push video
This commit is contained in:
lfirmin
@@ -12,13 +12,13 @@ function TopCard({ mutuelle, index }) {
|
||||
<div
|
||||
className={`relative flex flex-col rounded-3xl border-2 p-6 transition-all hover:shadow-xl hover:-translate-y-1 cursor-pointer ${
|
||||
isFirst
|
||||
? 'border-indigo-300 bg-gradient-to-b from-indigo-50 to-white shadow-lg shadow-indigo-100'
|
||||
? 'border-[#9CCC8A]/50 bg-gradient-to-b from-[#9CCC8A]/5 to-white shadow-lg shadow-[#9CCC8A]/20'
|
||||
: 'border-slate-100 bg-white hover:border-slate-200 shadow-sm'
|
||||
}`}
|
||||
>
|
||||
{/* Badge meilleur choix */}
|
||||
{mutuelle.meilleurChoix && (
|
||||
<div className="absolute -top-3.5 left-1/2 -translate-x-1/2 bg-gradient-to-r from-indigo-600 to-indigo-700 text-white text-[11px] font-extrabold px-4 py-1.5 rounded-full shadow-md whitespace-nowrap">
|
||||
<div className="absolute -top-3.5 left-1/2 -translate-x-1/2 bg-[#9CCC8A] text-white text-[11px] font-extrabold px-4 py-1.5 rounded-full shadow-md whitespace-nowrap">
|
||||
⭐ Meilleur Choix 2026
|
||||
</div>
|
||||
)}
|
||||
|
||||
+27
-26
@@ -1,4 +1,3 @@
|
||||
import { MdPets } from 'react-icons/md'
|
||||
import {
|
||||
FiFacebook,
|
||||
FiTwitter,
|
||||
@@ -27,16 +26,16 @@ const colLegal = [
|
||||
]
|
||||
|
||||
const socials = [
|
||||
{ Icon: FiFacebook, label: 'Facebook' },
|
||||
{ Icon: FiTwitter, label: 'Twitter / X' },
|
||||
{ Icon: FiInstagram, label: 'Instagram' },
|
||||
{ Icon: FiLinkedin, label: 'LinkedIn' },
|
||||
{ Icon: FiYoutube, label: 'YouTube' },
|
||||
{ Icon: FiFacebook, label: 'Facebook' },
|
||||
{ Icon: FiTwitter, label: 'Twitter / X' },
|
||||
{ Icon: FiInstagram, label: 'Instagram' },
|
||||
{ Icon: FiLinkedin, label: 'LinkedIn' },
|
||||
{ Icon: FiYoutube, label: 'YouTube' },
|
||||
]
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="bg-slate-900 text-slate-400 relative z-10">
|
||||
<footer className="bg-[#F2F8EE] text-slate-500 border-t border-[#9CCC8A]/20">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
|
||||
{/* Main grid */}
|
||||
@@ -45,11 +44,13 @@ export default function Footer() {
|
||||
{/* Brand */}
|
||||
<div className="sm:col-span-2 lg:col-span-1">
|
||||
<div className="flex items-center gap-2.5 mb-5">
|
||||
<div className="w-9 h-9 bg-indigo-500 rounded-xl flex items-center justify-center shadow-md">
|
||||
<MdPets className="text-white text-lg" />
|
||||
</div>
|
||||
<span className="font-extrabold text-xl text-white tracking-tight">
|
||||
Assurez<span className="text-indigo-400">Moi</span>
|
||||
<img
|
||||
src="/img/ico.webp"
|
||||
alt="AssurezMoi"
|
||||
className="w-9 h-9 rounded-xl object-contain"
|
||||
/>
|
||||
<span className="font-extrabold text-xl text-slate-900 tracking-tight">
|
||||
Assurez<span className="text-[#9CCC8A]">Moi</span>
|
||||
</span>
|
||||
</div>
|
||||
<address className="not-italic text-sm text-slate-500 leading-relaxed mb-4">
|
||||
@@ -58,15 +59,15 @@ export default function Footer() {
|
||||
59100 Roubaix, France
|
||||
</address>
|
||||
<a
|
||||
href="mailto:contact@mongaston.com"
|
||||
className="text-sm text-slate-500 hover:text-indigo-400 transition-colors"
|
||||
href="mailto:contact@assurezmoi.com"
|
||||
className="text-sm text-slate-500 hover:text-[#9CCC8A] transition-colors"
|
||||
>
|
||||
contact@assurezmoi.com
|
||||
</a>
|
||||
<div className="mt-2">
|
||||
<a
|
||||
href="tel:+33180891030"
|
||||
className="text-sm text-slate-500 hover:text-indigo-400 transition-colors"
|
||||
className="text-sm text-slate-500 hover:text-[#9CCC8A] transition-colors"
|
||||
>
|
||||
01 02 03 04 05
|
||||
</a>
|
||||
@@ -75,7 +76,7 @@ export default function Footer() {
|
||||
|
||||
{/* Resources */}
|
||||
<div>
|
||||
<h4 className="text-white font-bold text-sm uppercase tracking-widest mb-5">
|
||||
<h4 className="text-slate-700 font-bold text-sm uppercase tracking-widest mb-5">
|
||||
Ressources
|
||||
</h4>
|
||||
<ul className="space-y-3">
|
||||
@@ -83,7 +84,7 @@ export default function Footer() {
|
||||
<li key={r}>
|
||||
<a
|
||||
href="#"
|
||||
className="text-sm text-slate-500 hover:text-white transition-colors flex items-center gap-1 group"
|
||||
className="text-sm text-slate-500 hover:text-slate-900 transition-colors flex items-center gap-1 group"
|
||||
>
|
||||
{r}
|
||||
<FiArrowUpRight size={11} className="opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
@@ -95,7 +96,7 @@ export default function Footer() {
|
||||
|
||||
{/* Discover */}
|
||||
<div>
|
||||
<h4 className="text-white font-bold text-sm uppercase tracking-widest mb-5">
|
||||
<h4 className="text-slate-700 font-bold text-sm uppercase tracking-widest mb-5">
|
||||
Nous découvrir
|
||||
</h4>
|
||||
<ul className="space-y-3">
|
||||
@@ -103,7 +104,7 @@ export default function Footer() {
|
||||
<li key={d}>
|
||||
<a
|
||||
href="#"
|
||||
className="text-sm text-slate-500 hover:text-white transition-colors flex items-center gap-1 group"
|
||||
className="text-sm text-slate-500 hover:text-slate-900 transition-colors flex items-center gap-1 group"
|
||||
>
|
||||
{d}
|
||||
<FiArrowUpRight size={11} className="opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
@@ -115,13 +116,13 @@ export default function Footer() {
|
||||
|
||||
{/* Legal */}
|
||||
<div>
|
||||
<h4 className="text-white font-bold text-sm uppercase tracking-widest mb-5">
|
||||
<h4 className="text-slate-700 font-bold text-sm uppercase tracking-widest mb-5">
|
||||
Informations légales
|
||||
</h4>
|
||||
<ul className="space-y-3">
|
||||
{colLegal.map((l) => (
|
||||
<li key={l}>
|
||||
<a href="#" className="text-sm text-slate-500 hover:text-white transition-colors">
|
||||
<a href="#" className="text-sm text-slate-500 hover:text-slate-900 transition-colors">
|
||||
{l}
|
||||
</a>
|
||||
</li>
|
||||
@@ -131,10 +132,10 @@ export default function Footer() {
|
||||
</div>
|
||||
|
||||
{/* Bottom bar */}
|
||||
<div className="border-t border-slate-800 py-6 flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||
<p className="text-xs text-slate-600 text-center sm:text-left">
|
||||
<div className="border-t border-[#9CCC8A]/20 py-6 flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||
<p className="text-xs text-slate-400 text-center sm:text-left">
|
||||
© 2026 AssurezMoi — Tous droits réservés.
|
||||
<span className="mx-2 text-slate-700">·</span>
|
||||
<span className="mx-2 text-[#9CCC8A]/50">·</span>
|
||||
Comparateur de mutuelles santé & assurances
|
||||
</p>
|
||||
|
||||
@@ -144,9 +145,9 @@ export default function Footer() {
|
||||
key={label}
|
||||
href="#"
|
||||
aria-label={label}
|
||||
className="w-8 h-8 rounded-lg bg-slate-800 hover:bg-indigo-600 flex items-center justify-center transition-all hover:-translate-y-0.5"
|
||||
className="w-8 h-8 rounded-lg bg-[#9CCC8A]/15 hover:bg-[#9CCC8A] text-slate-500 hover:text-white flex items-center justify-center transition-all hover:-translate-y-0.5"
|
||||
>
|
||||
<Icon size={14} className="text-slate-400 hover:text-white" />
|
||||
<Icon size={14} />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -14,7 +14,7 @@ function FaqItem({ faq, index }) {
|
||||
>
|
||||
<span
|
||||
className="flex-shrink-0 w-7 h-7 rounded-full flex items-center justify-center text-xs font-extrabold mt-0.5 text-white"
|
||||
style={{ backgroundColor: open ? '#4F46E5' : '#CBD5E1' }}
|
||||
style={{ backgroundColor: open ? '#9CCC8A' : '#CBD5E1' }}
|
||||
>
|
||||
{index + 1}
|
||||
</span>
|
||||
@@ -24,7 +24,7 @@ function FaqItem({ faq, index }) {
|
||||
transition={{ duration: 0.2 }}
|
||||
className="flex-shrink-0 mt-0.5"
|
||||
>
|
||||
<FiChevronDown className={`text-lg transition-colors ${open ? 'text-indigo-500' : 'text-slate-400'}`} />
|
||||
<FiChevronDown className={`text-lg transition-colors ${open ? 'text-[#9CCC8A]' : 'text-slate-400'}`} />
|
||||
</motion.div>
|
||||
</button>
|
||||
|
||||
@@ -88,8 +88,8 @@ export default function GuideSection() {
|
||||
{/* Guides card */}
|
||||
<div className="bg-slate-50 rounded-2xl border border-slate-100 p-6">
|
||||
<div className="flex items-center gap-2 mb-5">
|
||||
<div className="w-8 h-8 bg-indigo-100 rounded-xl flex items-center justify-center">
|
||||
<FiBookOpen className="text-indigo-600 text-sm" />
|
||||
<div className="w-8 h-8 bg-[#9CCC8A]/20 rounded-xl flex items-center justify-center">
|
||||
<FiBookOpen className="text-[#9CCC8A] text-sm" />
|
||||
</div>
|
||||
<h3 className="font-bold text-slate-900">Tous nos guides</h3>
|
||||
</div>
|
||||
@@ -98,9 +98,9 @@ export default function GuideSection() {
|
||||
<li key={i}>
|
||||
<a
|
||||
href="#"
|
||||
className="flex items-start gap-2 text-sm text-slate-600 hover:text-indigo-600 transition-colors py-2 group"
|
||||
className="flex items-start gap-2 text-sm text-slate-600 hover:text-[#9CCC8A] transition-colors py-2 group"
|
||||
>
|
||||
<FiChevronRight className="flex-shrink-0 mt-0.5 text-slate-300 group-hover:text-indigo-400 transition-colors" />
|
||||
<FiChevronRight className="flex-shrink-0 mt-0.5 text-slate-300 group-hover:text-[#9CCC8A] transition-colors" />
|
||||
{guide}
|
||||
</a>
|
||||
</li>
|
||||
@@ -109,16 +109,16 @@ export default function GuideSection() {
|
||||
</div>
|
||||
|
||||
{/* CTA card */}
|
||||
<div className="bg-gradient-to-br from-indigo-600 to-indigo-700 rounded-2xl p-6 text-white">
|
||||
<div className="bg-gradient-to-br from-[#9CCC8A] to-[#74AB61] rounded-2xl p-6 text-white">
|
||||
<div className="font-extrabold text-lg mb-2">
|
||||
Besoin d'un conseil personnalisé ?
|
||||
</div>
|
||||
<p className="text-indigo-200 text-sm mb-5 leading-relaxed">
|
||||
<p className="text-white/70 text-sm mb-5 leading-relaxed">
|
||||
Nos experts répondent à toutes vos questions gratuitement, sans engagement.
|
||||
</p>
|
||||
<a
|
||||
href="tel:+33180891030"
|
||||
className="flex items-center justify-center gap-2 bg-white text-indigo-700 font-bold text-sm py-3 rounded-xl hover:bg-indigo-50 transition-colors"
|
||||
className="flex items-center justify-center gap-2 bg-white text-[#74AB61] font-bold text-sm py-3 rounded-xl hover:bg-[#9CCC8A]/10 transition-colors"
|
||||
>
|
||||
📞 01 80 89 10 30
|
||||
</a>
|
||||
|
||||
+150
-41
@@ -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 (
|
||||
<section className="relative overflow-hidden bg-gradient-to-br from-slate-50 via-indigo-50/40 to-white pt-14 pb-10">
|
||||
{/* Decorative blobs */}
|
||||
<div className="relative rounded-2xl overflow-hidden shadow-2xl shadow-[#9CCC8A]/30 bg-slate-900 aspect-video w-full">
|
||||
{src ? (
|
||||
<video
|
||||
ref={videoRef}
|
||||
src={src}
|
||||
autoPlay
|
||||
muted
|
||||
loop
|
||||
playsInline
|
||||
preload="metadata"
|
||||
onClick={togglePlay}
|
||||
className="w-full h-full object-cover cursor-pointer"
|
||||
/>
|
||||
) : (
|
||||
/* Placeholder pendant le chargement de config.json */
|
||||
<div className="w-full h-full flex items-center justify-center bg-slate-800 animate-pulse">
|
||||
<FiPlay className="text-slate-600 text-5xl" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Icône play/pause au centre au clic */}
|
||||
{src && !playing && (
|
||||
<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
|
||||
<div className="w-16 h-16 rounded-full bg-black/50 flex items-center justify-center backdrop-blur-sm">
|
||||
<FiPlay className="text-white text-2xl ml-1" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Contrôles : pause + mute */}
|
||||
{src && (
|
||||
<div className="absolute bottom-3 right-3 flex gap-2">
|
||||
<button
|
||||
onClick={togglePlay}
|
||||
aria-label={playing ? 'Pause' : 'Play'}
|
||||
className="w-9 h-9 flex items-center justify-center rounded-full bg-black/50 text-white backdrop-blur-sm hover:bg-black/70 transition-colors"
|
||||
>
|
||||
{playing ? <FiPause size={14} /> : <FiPlay size={14} />}
|
||||
</button>
|
||||
<button
|
||||
onClick={toggleMute}
|
||||
aria-label={muted ? 'Activer le son' : 'Couper le son'}
|
||||
className="w-9 h-9 flex items-center justify-center rounded-full bg-black/50 text-white backdrop-blur-sm hover:bg-black/70 transition-colors"
|
||||
>
|
||||
{muted ? <FiVolumeX size={14} /> : <FiVolume2 size={14} />}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Hero() {
|
||||
const [videoSrc, setVideoSrc] = useState(null)
|
||||
const [bgSrc, setBgSrc] = useState(null)
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/config.json')
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
setVideoSrc(data.heroVideo)
|
||||
setBgSrc(data.heroBg ?? null)
|
||||
})
|
||||
.catch(() => {})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<section
|
||||
className="relative overflow-hidden bg-cover bg-center pt-24 pb-20"
|
||||
style={bgSrc ? { backgroundImage: `url(${bgSrc})` } : {}}
|
||||
>
|
||||
{/* Gradient overlay semi-transparent (couvre l'image de fond) */}
|
||||
<div className="pointer-events-none absolute inset-0 bg-gradient-to-br from-white/88 via-[#9CCC8A]/18 to-white/75" />
|
||||
|
||||
{/* Blobs décoratifs */}
|
||||
<div className="pointer-events-none absolute inset-0 overflow-hidden">
|
||||
<div className="absolute -top-48 -right-48 w-[600px] h-[600px] rounded-full bg-indigo-100/50 blur-3xl" />
|
||||
<div className="absolute bottom-0 -left-32 w-[400px] h-[400px] rounded-full bg-sky-100/40 blur-3xl" />
|
||||
<div className="absolute -top-48 -right-48 w-[600px] h-[600px] rounded-full bg-[#9CCC8A]/15 blur-3xl" />
|
||||
<div className="absolute bottom-0 -left-32 w-[400px] h-[400px] rounded-full bg-[#9CCC8A]/10 blur-3xl" />
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center text-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 24 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.55 }}
|
||||
className="max-w-3xl"
|
||||
>
|
||||
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex flex-col lg:flex-row lg:items-center gap-10 lg:gap-16">
|
||||
|
||||
{/* ── Colonne gauche : texte ── */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 24 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.55 }}
|
||||
className="flex-1 flex flex-col"
|
||||
>
|
||||
<h1 className="text-5xl xl:text-6xl font-extrabold text-slate-900 leading-[1.08] tracking-tight mb-5">
|
||||
Mutuelle santé{' '}
|
||||
<span className="relative">
|
||||
<span className="relative z-10 text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-sky-500">
|
||||
<span className="relative z-10 text-transparent bg-clip-text bg-gradient-to-r from-[#9CCC8A] to-[#5BAF7A]">
|
||||
pour tous
|
||||
</span>
|
||||
<span className="absolute bottom-1 left-0 w-full h-3 bg-indigo-100/70 rounded-sm -z-0" />
|
||||
<span className="absolute bottom-1 left-0 w-full h-3 bg-[#9CCC8A]/30 rounded-sm -z-0" />
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-slate-500 leading-relaxed mb-8 max-w-lg mx-auto">
|
||||
<p className="text-lg text-black leading-relaxed mb-8 max-w-lg">
|
||||
Jeune actif, parent, senior — comparez les garanties utiles et trouvez
|
||||
la couverture parfaite au meilleur prix, sans engagement.
|
||||
</p>
|
||||
|
||||
{/* Trust points */}
|
||||
<ul className="flex flex-wrap justify-center gap-x-6 gap-y-1.5 mb-8">
|
||||
{['Comparaison 100% gratuite', 'Sans engagement', 'Réponse en 2 min'].map((t) => (
|
||||
<li key={t} className="flex items-center gap-1.5 text-sm text-slate-500">
|
||||
<ul className="flex flex-wrap gap-x-6 gap-y-1.5 mb-8">
|
||||
{['Comparaison 100% gratuite', 'Sans engagement', 'Réponse en 2 min'].map(t => (
|
||||
<li key={t} className="flex items-center gap-1.5 text-sm text-black">
|
||||
<FiCheckCircle className="text-emerald-500 flex-shrink-0" />
|
||||
{t}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{/* CTA */}
|
||||
<div className="flex flex-wrap justify-center gap-3">
|
||||
{/* CTAs */}
|
||||
<div className="flex flex-wrap gap-3 mb-14">
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.025 }}
|
||||
whileTap={{ scale: 0.97 }}
|
||||
className="flex items-center gap-2 bg-gradient-to-r from-indigo-600 to-indigo-700 hover:from-indigo-700 hover:to-indigo-800 text-white font-bold text-base px-7 py-3.5 rounded-xl shadow-lg shadow-indigo-300/50 transition-all"
|
||||
className="flex items-center gap-2 bg-[#9CCC8A] hover:bg-[#87BE73] text-black font-bold text-base px-7 py-3.5 rounded-xl shadow-lg shadow-[#9CCC8A]/40 transition-all"
|
||||
>
|
||||
Comparer les mutuelles
|
||||
<FiArrowRight />
|
||||
</motion.button>
|
||||
<button className="flex items-center gap-2 font-semibold text-slate-700 text-base px-7 py-3.5 rounded-xl border border-slate-200 bg-white hover:border-indigo-300 hover:text-indigo-600 transition-all">
|
||||
<button className="flex items-center gap-2 font-semibold text-slate-700 text-base px-7 py-3.5 rounded-xl border border-slate-200 bg-white hover:border-[#9CCC8A] hover:text-[#9CCC8A] transition-all">
|
||||
Voir le classement
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Stats bar */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.55, delay: 0.35 }}
|
||||
className="grid grid-cols-3 gap-6 max-w-xs"
|
||||
>
|
||||
{stats.map(({ value, label, icon: Icon }) => (
|
||||
<div key={label} className="flex flex-col gap-1">
|
||||
<Icon className="text-white text-lg mb-0.5" />
|
||||
<div className="text-2xl font-extrabold text-slate-900">{value}</div>
|
||||
<div className="text-xs text-black font-medium">{label}</div>
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
{/* Stats bar */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.55, delay: 0.35 }}
|
||||
className="mt-16 grid grid-cols-3 gap-6 max-w-2xl"
|
||||
>
|
||||
{stats.map(({ value, label, icon: Icon }) => (
|
||||
<div key={label} className="flex flex-col items-center gap-1">
|
||||
<Icon className="text-indigo-400 text-lg mb-0.5" />
|
||||
<div className="text-2xl font-extrabold text-slate-900">{value}</div>
|
||||
<div className="text-xs text-slate-400 font-medium">{label}</div>
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
{/* ── Colonne droite : vidéo ── */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 32 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.55, delay: 0.2 }}
|
||||
className="w-full lg:w-[520px] xl:w-[580px] flex-shrink-0"
|
||||
>
|
||||
<VideoPlayer src={videoSrc} />
|
||||
</motion.div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
|
||||
@@ -36,7 +36,7 @@ function FeatureDots({ count }) {
|
||||
<div
|
||||
key={i}
|
||||
className={`w-2.5 h-2.5 rounded-full transition-colors ${
|
||||
i <= count ? 'bg-indigo-500' : 'bg-slate-200'
|
||||
i <= count ? 'bg-[#9CCC8A]' : 'bg-slate-200'
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
@@ -70,14 +70,14 @@ export default function MutuelleCard({ mutuelle }) {
|
||||
<div
|
||||
className={`bg-white rounded-2xl border transition-all hover:shadow-lg hover:-translate-y-0.5 p-5 flex items-center gap-4 ${
|
||||
isFirst
|
||||
? 'border-indigo-200 shadow-md ring-1 ring-indigo-100'
|
||||
? 'border-[#9CCC8A]/40 shadow-md ring-1 ring-[#9CCC8A]/20'
|
||||
: 'border-slate-100 hover:border-slate-200'
|
||||
}`}
|
||||
>
|
||||
{/* Rang */}
|
||||
<div
|
||||
className={`w-8 h-8 rounded-xl flex items-center justify-center text-sm font-bold flex-shrink-0 ${
|
||||
isFirst ? 'bg-indigo-600 text-white shadow-md shadow-indigo-300' : 'bg-slate-100 text-slate-500'
|
||||
isFirst ? 'bg-[#9CCC8A] text-white shadow-md shadow-[#9CCC8A]/40' : 'bg-slate-100 text-slate-500'
|
||||
}`}
|
||||
>
|
||||
{mutuelle.rang}
|
||||
|
||||
@@ -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() {
|
||||
<div className="flex items-center justify-between h-16">
|
||||
{/* Logo */}
|
||||
<a href="#" className="flex items-center gap-2.5">
|
||||
<div className="w-9 h-9 bg-gradient-to-br from-indigo-500 to-indigo-700 rounded-xl flex items-center justify-center shadow-md shadow-indigo-200">
|
||||
<MdPets className="text-white text-lg" />
|
||||
</div>
|
||||
<img
|
||||
src="/img/ico.webp"
|
||||
alt="AssurezMoi"
|
||||
className="w-9 h-9 rounded-xl object-contain"
|
||||
/>
|
||||
<span className="font-extrabold text-xl tracking-tight text-slate-900">
|
||||
Assurez<span className="text-indigo-600">Moi</span>
|
||||
Assurez<span className="text-[#9CCC8A]">Moi</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
@@ -35,7 +36,7 @@ export default function Navbar() {
|
||||
<a
|
||||
key={link.label}
|
||||
href={link.href}
|
||||
className="px-3 py-2 text-sm text-slate-600 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg transition-all font-medium"
|
||||
className="px-3 py-2 text-sm text-slate-600 hover:text-[#9CCC8A] hover:bg-[#9CCC8A]/10 rounded-lg transition-all font-medium"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
@@ -46,7 +47,7 @@ export default function Navbar() {
|
||||
<div className="hidden lg:flex items-center gap-3">
|
||||
<a
|
||||
href="tel:+33180891030"
|
||||
className="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800 text-white text-sm font-bold px-4 py-2.5 rounded-xl transition-all shadow-md shadow-indigo-200"
|
||||
className="flex items-center gap-2 bg-[#9CCC8A] hover:bg-[#87BE73] active:bg-[#74AB61] text-white text-sm font-bold px-4 py-2.5 rounded-xl transition-all shadow-md shadow-[#9CCC8A]/40"
|
||||
>
|
||||
<FiPhone className="text-base" />
|
||||
01 80 89 10 30
|
||||
@@ -78,14 +79,14 @@ export default function Navbar() {
|
||||
<a
|
||||
key={link.label}
|
||||
href={link.href}
|
||||
className="block px-3 py-2.5 text-sm text-slate-600 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg font-medium transition-colors"
|
||||
className="block px-3 py-2.5 text-sm text-slate-600 hover:text-[#9CCC8A] hover:bg-[#9CCC8A]/10 rounded-lg font-medium transition-colors"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
))}
|
||||
<a
|
||||
href="tel:+33180891030"
|
||||
className="mt-3 flex items-center justify-center gap-2 bg-indigo-600 text-white text-sm font-bold px-4 py-3 rounded-xl w-full"
|
||||
className="mt-3 flex items-center justify-center gap-2 bg-[#9CCC8A] text-white text-sm font-bold px-4 py-3 rounded-xl w-full"
|
||||
>
|
||||
<FiPhone />
|
||||
01 80 89 10 30
|
||||
|
||||
@@ -43,7 +43,7 @@ export default function Testimonials() {
|
||||
className="bg-white rounded-2xl border border-slate-100 p-6 shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all"
|
||||
>
|
||||
{/* Quote mark */}
|
||||
<div className="text-4xl font-serif text-indigo-100 leading-none mb-2 select-none">
|
||||
<div className="text-4xl font-serif text-[#9CCC8A]/30 leading-none mb-2 select-none">
|
||||
"
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user