lfirmin/site_assu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

push video

Browse Source
This commit is contained in:
lfirmin
2026-02-28 01:06:16 +01:00
parent 5199d8883d
commit fc9f384b47
15 changed files with 213 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
img/favicon.ico
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

img/hero-bg.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 68 KiB

img/ico-180.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

img/ico.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

img/ico.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

index.html
+9 -2
View File
@@ -2,9 +2,16 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <!-- Favicon legacy (IE, Windows, Android) -->
<link rel="icon" href="/favicon.ico" sizes="32x32" />
<!-- Favicon PNG (Chrome, Firefox, Edge, Safari desktop) -->
<link rel="icon" type="image/png" sizes="64x64" href="/img/ico.png" />
<!-- Favicon WebP (Chromium dernières versions) -->
<link rel="icon" type="image/webp" href="/img/ico.webp" />
<!-- Apple touch icon (iOS Safari, iPadOS) -->
<link rel="apple-touch-icon" sizes="180x180" href="/img/ico-180.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>amado-redesign</title> <title>AssurezMoi — Comparateur de mutuelles santé</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
public/config.json
+2 -1
View File
@@ -1,3 +1,4 @@
{ {
"heroVideo": "/video/home.webm" "heroVideo": "/video/home.mp4",
"heroBg": "/img/hero-bg.webp"
} }
public/video/home.mp4
BIN
View File
Binary file not shown.
src/components/ComparisonSection.jsx
+2 -2
View File
@@ -12,13 +12,13 @@ function TopCard({ mutuelle, index }) {
<div <div
className={`relative flex flex-col rounded-3xl border-2 p-6 transition-all hover:shadow-xl hover:-translate-y-1 cursor-pointer ${ className={`relative flex flex-col rounded-3xl border-2 p-6 transition-all hover:shadow-xl hover:-translate-y-1 cursor-pointer ${
isFirst 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' : 'border-slate-100 bg-white hover:border-slate-200 shadow-sm'
}`} }`}
> >
{/* Badge meilleur choix */} {/* Badge meilleur choix */}
{mutuelle.meilleurChoix && ( {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 ⭐ Meilleur Choix 2026
</div> </div>
)} )}
src/components/Footer.jsx
+22 -21
View File
@@ -1,4 +1,3 @@
import { MdPets } from 'react-icons/md'
import { import {
FiFacebook, FiFacebook,
FiTwitter, FiTwitter,
@@ -36,7 +35,7 @@ const socials = [
export default function Footer() { export default function Footer() {
return ( 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"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
{/* Main grid */} {/* Main grid */}
@@ -45,11 +44,13 @@ export default function Footer() {
{/* Brand */} {/* Brand */}
<div className="sm:col-span-2 lg:col-span-1"> <div className="sm:col-span-2 lg:col-span-1">
<div className="flex items-center gap-2.5 mb-5"> <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"> <img
<MdPets className="text-white text-lg" /> src="/img/ico.webp"
</div> alt="AssurezMoi"
<span className="font-extrabold text-xl text-white tracking-tight"> className="w-9 h-9 rounded-xl object-contain"
Assurez<span className="text-indigo-400">Moi</span> />
<span className="font-extrabold text-xl text-slate-900 tracking-tight">
Assurez<span className="text-[#9CCC8A]">Moi</span>
</span> </span>
</div> </div>
<address className="not-italic text-sm text-slate-500 leading-relaxed mb-4"> <address className="not-italic text-sm text-slate-500 leading-relaxed mb-4">
@@ -58,15 +59,15 @@ export default function Footer() {
59100 Roubaix, France 59100 Roubaix, France
</address> </address>
<a <a
href="mailto:contact@mongaston.com" href="mailto:contact@assurezmoi.com"
className="text-sm text-slate-500 hover:text-indigo-400 transition-colors" className="text-sm text-slate-500 hover:text-[#9CCC8A] transition-colors"
> >
contact@assurezmoi.com contact@assurezmoi.com
</a> </a>
<div className="mt-2"> <div className="mt-2">
<a <a
href="tel:+33180891030" 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 01 02 03 04 05
</a> </a>
@@ -75,7 +76,7 @@ export default function Footer() {
{/* Resources */} {/* Resources */}
<div> <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 Ressources
</h4> </h4>
<ul className="space-y-3"> <ul className="space-y-3">
@@ -83,7 +84,7 @@ export default function Footer() {
<li key={r}> <li key={r}>
<a <a
href="#" 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} {r}
<FiArrowUpRight size={11} className="opacity-0 group-hover:opacity-100 transition-opacity" /> <FiArrowUpRight size={11} className="opacity-0 group-hover:opacity-100 transition-opacity" />
@@ -95,7 +96,7 @@ export default function Footer() {
{/* Discover */} {/* Discover */}
<div> <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 Nous découvrir
</h4> </h4>
<ul className="space-y-3"> <ul className="space-y-3">
@@ -103,7 +104,7 @@ export default function Footer() {
<li key={d}> <li key={d}>
<a <a
href="#" 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} {d}
<FiArrowUpRight size={11} className="opacity-0 group-hover:opacity-100 transition-opacity" /> <FiArrowUpRight size={11} className="opacity-0 group-hover:opacity-100 transition-opacity" />
@@ -115,13 +116,13 @@ export default function Footer() {
{/* Legal */} {/* Legal */}
<div> <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 Informations légales
</h4> </h4>
<ul className="space-y-3"> <ul className="space-y-3">
{colLegal.map((l) => ( {colLegal.map((l) => (
<li key={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} {l}
</a> </a>
</li> </li>
@@ -131,10 +132,10 @@ export default function Footer() {
</div> </div>
{/* Bottom bar */} {/* Bottom bar */}
<div className="border-t border-slate-800 py-6 flex flex-col sm:flex-row items-center justify-between gap-4"> <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-600 text-center sm:text-left"> <p className="text-xs text-slate-400 text-center sm:text-left">
© 2026 AssurezMoi — Tous droits réservés. © 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 Comparateur de mutuelles santé & assurances
</p> </p>
@@ -144,9 +145,9 @@ export default function Footer() {
key={label} key={label}
href="#" href="#"
aria-label={label} 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> </a>
))} ))}
</div> </div>
src/components/GuideSection.jsx
+9 -9
View File
@@ -14,7 +14,7 @@ function FaqItem({ faq, index }) {
> >
<span <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" 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} {index + 1}
</span> </span>
@@ -24,7 +24,7 @@ function FaqItem({ faq, index }) {
transition={{ duration: 0.2 }} transition={{ duration: 0.2 }}
className="flex-shrink-0 mt-0.5" 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> </motion.div>
</button> </button>
@@ -88,8 +88,8 @@ export default function GuideSection() {
{/* Guides card */} {/* Guides card */}
<div className="bg-slate-50 rounded-2xl border border-slate-100 p-6"> <div className="bg-slate-50 rounded-2xl border border-slate-100 p-6">
<div className="flex items-center gap-2 mb-5"> <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"> <div className="w-8 h-8 bg-[#9CCC8A]/20 rounded-xl flex items-center justify-center">
<FiBookOpen className="text-indigo-600 text-sm" /> <FiBookOpen className="text-[#9CCC8A] text-sm" />
</div> </div>
<h3 className="font-bold text-slate-900">Tous nos guides</h3> <h3 className="font-bold text-slate-900">Tous nos guides</h3>
</div> </div>
@@ -98,9 +98,9 @@ export default function GuideSection() {
<li key={i}> <li key={i}>
<a <a
href="#" 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} {guide}
</a> </a>
</li> </li>
@@ -109,16 +109,16 @@ export default function GuideSection() {
</div> </div>
{/* CTA card */} {/* 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"> <div className="font-extrabold text-lg mb-2">
Besoin d'un conseil personnalisé ? Besoin d'un conseil personnalisé ?
</div> </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. Nos experts répondent à toutes vos questions gratuitement, sans engagement.
</p> </p>
<a <a
href="tel:+33180891030" 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 📞 01 80 89 10 30
</a> </a>
src/components/Hero.jsx
+132 -23
View File
@@ -1,5 +1,9 @@
import { useState, useEffect, useRef } from 'react'
import { motion } from 'framer-motion' 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 = [ const stats = [
{ value: '186', label: 'mutuelles analysées', icon: FiShield }, { value: '186', label: 'mutuelles analysées', icon: FiShield },
@@ -7,78 +11,183 @@ const stats = [
{ value: '250 000+', label: 'utilisateurs', icon: FiUsers }, { 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 ( return (
<section className="relative overflow-hidden bg-gradient-to-br from-slate-50 via-indigo-50/40 to-white pt-14 pb-10"> <div className="relative rounded-2xl overflow-hidden shadow-2xl shadow-[#9CCC8A]/30 bg-slate-900 aspect-video w-full">
{/* Decorative blobs */} {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="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 -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-sky-100/40 blur-3xl" /> <div className="absolute bottom-0 -left-32 w-[400px] h-[400px] rounded-full bg-[#9CCC8A]/10 blur-3xl" />
</div> </div>
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center text-center"> <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 <motion.div
initial={{ opacity: 0, y: 24 }} initial={{ opacity: 0, y: 24 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.55 }} transition={{ duration: 0.55 }}
className="max-w-3xl" 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"> <h1 className="text-5xl xl:text-6xl font-extrabold text-slate-900 leading-[1.08] tracking-tight mb-5">
Mutuelle santé{' '} Mutuelle santé{' '}
<span className="relative"> <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 pour tous
</span> </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> </span>
</h1> </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 Jeune actif, parent, senior — comparez les garanties utiles et trouvez
la couverture parfaite au meilleur prix, sans engagement. la couverture parfaite au meilleur prix, sans engagement.
</p> </p>
{/* Trust points */} {/* Trust points */}
<ul className="flex flex-wrap justify-center gap-x-6 gap-y-1.5 mb-8"> <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) => ( {['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"> <li key={t} className="flex items-center gap-1.5 text-sm text-black">
<FiCheckCircle className="text-emerald-500 flex-shrink-0" /> <FiCheckCircle className="text-emerald-500 flex-shrink-0" />
{t} {t}
</li> </li>
))} ))}
</ul> </ul>
{/* CTA */} {/* CTAs */}
<div className="flex flex-wrap justify-center gap-3"> <div className="flex flex-wrap gap-3 mb-14">
<motion.button <motion.button
whileHover={{ scale: 1.025 }} whileHover={{ scale: 1.025 }}
whileTap={{ scale: 0.97 }} 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 Comparer les mutuelles
<FiArrowRight /> <FiArrowRight />
</motion.button> </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 Voir le classement
</button> </button>
</div> </div>
</motion.div>
{/* Stats bar */} {/* Stats bar */}
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.55, delay: 0.35 }} transition={{ duration: 0.55, delay: 0.35 }}
className="mt-16 grid grid-cols-3 gap-6 max-w-2xl" className="grid grid-cols-3 gap-6 max-w-xs"
> >
{stats.map(({ value, label, icon: Icon }) => ( {stats.map(({ value, label, icon: Icon }) => (
<div key={label} className="flex flex-col items-center gap-1"> <div key={label} className="flex flex-col gap-1">
<Icon className="text-indigo-400 text-lg mb-0.5" /> <Icon className="text-white text-lg mb-0.5" />
<div className="text-2xl font-extrabold text-slate-900">{value}</div> <div className="text-2xl font-extrabold text-slate-900">{value}</div>
<div className="text-xs text-slate-400 font-medium">{label}</div> <div className="text-xs text-black font-medium">{label}</div>
</div> </div>
))} ))}
</motion.div> </motion.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> </div>
</section> </section>
) )
src/components/MutuelleCard.jsx
+3 -3
View File
@@ -36,7 +36,7 @@ function FeatureDots({ count }) {
<div <div
key={i} key={i}
className={`w-2.5 h-2.5 rounded-full transition-colors ${ 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 <div
className={`bg-white rounded-2xl border transition-all hover:shadow-lg hover:-translate-y-0.5 p-5 flex items-center gap-4 ${ className={`bg-white rounded-2xl border transition-all hover:shadow-lg hover:-translate-y-0.5 p-5 flex items-center gap-4 ${
isFirst 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' : 'border-slate-100 hover:border-slate-200'
}`} }`}
> >
{/* Rang */} {/* Rang */}
<div <div
className={`w-8 h-8 rounded-xl flex items-center justify-center text-sm font-bold flex-shrink-0 ${ 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} {mutuelle.rang}
src/components/Navbar.jsx
+10 -9
View File
@@ -1,7 +1,6 @@
import { useState } from 'react' import { useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion' import { motion, AnimatePresence } from 'framer-motion'
import { FiPhone, FiMenu, FiX } from 'react-icons/fi' import { FiPhone, FiMenu, FiX } from 'react-icons/fi'
import { MdPets } from 'react-icons/md'
const navLinks = [ const navLinks = [
{ label: 'Mutuelle santé', href: '#' }, { label: 'Mutuelle santé', href: '#' },
@@ -21,11 +20,13 @@ export default function Navbar() {
<div className="flex items-center justify-between h-16"> <div className="flex items-center justify-between h-16">
{/* Logo */} {/* Logo */}
<a href="#" className="flex items-center gap-2.5"> <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"> <img
<MdPets className="text-white text-lg" /> src="/img/ico.webp"
</div> alt="AssurezMoi"
className="w-9 h-9 rounded-xl object-contain"
/>
<span className="font-extrabold text-xl tracking-tight text-slate-900"> <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> </span>
</a> </a>
@@ -35,7 +36,7 @@ export default function Navbar() {
<a <a
key={link.label} key={link.label}
href={link.href} 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} {link.label}
</a> </a>
@@ -46,7 +47,7 @@ export default function Navbar() {
<div className="hidden lg:flex items-center gap-3"> <div className="hidden lg:flex items-center gap-3">
<a <a
href="tel:+33180891030" 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" /> <FiPhone className="text-base" />
01 80 89 10 30 01 80 89 10 30
@@ -78,14 +79,14 @@ export default function Navbar() {
<a <a
key={link.label} key={link.label}
href={link.href} 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} {link.label}
</a> </a>
))} ))}
<a <a
href="tel:+33180891030" 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 /> <FiPhone />
01 80 89 10 30 01 80 89 10 30
src/components/Testimonials.jsx
+1 -1
View File
@@ -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" 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 */} {/* 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> </div>