Besoin d'un conseil personnalisé ?
-
+
Nos experts répondent à toutes vos questions gratuitement, sans engagement.
📞 01 80 89 10 30
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index 3f4c827..e0fc136 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -1,84 +1,193 @@
+import { useState, useEffect, useRef } from 'react'
import { motion } from 'framer-motion'
-import { FiArrowRight, FiShield, FiStar, FiUsers, FiCheckCircle } from 'react-icons/fi'
+import {
+ FiArrowRight, FiShield, FiStar, FiUsers, FiCheckCircle,
+ FiPlay, FiPause, FiVolume2, FiVolumeX,
+} from 'react-icons/fi'
const stats = [
- { value: '186', label: 'mutuelles analysées', icon: FiShield },
- { value: '4.9 / 5', label: 'note clients', icon: FiStar },
- { value: '250 000+', label: 'utilisateurs', icon: FiUsers },
+ { value: '186', label: 'mutuelles analysées', icon: FiShield },
+ { value: '4.9 / 5', label: 'note clients', icon: FiStar },
+ { value: '250 000+', label: 'utilisateurs', icon: FiUsers },
]
-export default function Hero() {
+function VideoPlayer({ src }) {
+ const videoRef = useRef(null)
+ const [playing, setPlaying] = useState(true)
+ const [muted, setMuted] = useState(true)
+
+ const togglePlay = () => {
+ if (!videoRef.current) return
+ if (playing) videoRef.current.pause()
+ else videoRef.current.play()
+ setPlaying(p => !p)
+ }
+
+ const toggleMute = () => {
+ if (!videoRef.current) return
+ videoRef.current.muted = !muted
+ setMuted(m => !m)
+ }
+
return (
-
- {/* Decorative blobs */}
+
+ {src ? (
+
+ ) : (
+ /* Placeholder pendant le chargement de config.json */
+
+
+
+ )}
+
+ {/* Icône play/pause au centre au clic */}
+ {src && !playing && (
+
+ )}
+
+ {/* Contrôles : pause + mute */}
+ {src && (
+
+
+
+
+ )}
+
-
+
+
+
+ {/* ── Colonne gauche : texte ── */}
+
Mutuelle santé{' '}
-
+
pour tous
-
+
-
+
Jeune actif, parent, senior — comparez les garanties utiles et trouvez
la couverture parfaite au meilleur prix, sans engagement.
{/* Trust points */}
-
- {['Comparaison 100% gratuite', 'Sans engagement', 'Réponse en 2 min'].map((t) => (
- -
+
+ {['Comparaison 100% gratuite', 'Sans engagement', 'Réponse en 2 min'].map(t => (
+ -
{t}
))}
- {/* CTA */}
-
+ {/* CTAs */}
+
Comparer les mutuelles
-
+
+ {/* Stats bar */}
+
+ {stats.map(({ value, label, icon: Icon }) => (
+
+ ))}
+
- {/* Stats bar */}
-
- {stats.map(({ value, label, icon: Icon }) => (
-
- ))}
-
+ {/* ── Colonne droite : vidéo ── */}
+
+
+
+
+
)
diff --git a/src/components/MutuelleCard.jsx b/src/components/MutuelleCard.jsx
index 3fa3cc7..747eabe 100644
--- a/src/components/MutuelleCard.jsx
+++ b/src/components/MutuelleCard.jsx
@@ -36,7 +36,7 @@ function FeatureDots({ count }) {
))}
@@ -70,14 +70,14 @@ export default function MutuelleCard({ mutuelle }) {
{/* Rang */}
{mutuelle.rang}
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index f022f42..5f3e624 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,7 +1,6 @@
import { useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { FiPhone, FiMenu, FiX } from 'react-icons/fi'
-import { MdPets } from 'react-icons/md'
const navLinks = [
{ label: 'Mutuelle santé', href: '#' },
@@ -21,11 +20,13 @@ export default function Navbar() {