maj
This commit is contained in:
lfirmin
@@ -0,0 +1,143 @@
|
||||
import { motion } from 'framer-motion'
|
||||
import { FiAward, FiArrowRight } from 'react-icons/fi'
|
||||
import { mutuelles } from '../data/mutuelles'
|
||||
import MutuelleCard from './MutuelleCard'
|
||||
|
||||
const medals = ['🏆', '🥈', '🥉']
|
||||
|
||||
function TopCard({ mutuelle, index }) {
|
||||
const isFirst = index === 0
|
||||
|
||||
return (
|
||||
<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-slate-100 bg-white hover:border-slate-200 shadow-sm'
|
||||
}`}
|
||||
>
|
||||
{/* Badge */}
|
||||
{isFirst && (
|
||||
<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">
|
||||
⭐ Meilleur Choix 2026
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-start justify-between mb-5 mt-1">
|
||||
{/* Logo */}
|
||||
<div
|
||||
className="w-14 h-14 rounded-2xl flex items-center justify-center font-extrabold text-white text-lg shadow-md"
|
||||
style={{ backgroundColor: mutuelle.primaryColor }}
|
||||
>
|
||||
{mutuelle.initials}
|
||||
</div>
|
||||
|
||||
{/* Medal + rank */}
|
||||
<span className="text-2xl">{medals[index]}</span>
|
||||
</div>
|
||||
|
||||
<div className="font-extrabold text-slate-900 text-base mb-0.5">{mutuelle.name}</div>
|
||||
<div className="text-xs text-slate-500 mb-4">{mutuelle.tagline}</div>
|
||||
|
||||
{/* Tags */}
|
||||
<div className="flex gap-1.5 flex-wrap mb-5">
|
||||
{mutuelle.idealFor.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="text-[11px] font-medium px-2 py-0.5 rounded-full"
|
||||
style={{ backgroundColor: mutuelle.lightBg, color: mutuelle.primaryColor }}
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Promo */}
|
||||
{mutuelle.offer && (
|
||||
<div className="mb-4 bg-emerald-50 border border-emerald-200 text-emerald-700 text-xs font-bold text-center py-2 rounded-xl">
|
||||
🎁 {mutuelle.offer}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Score + CTA */}
|
||||
<div className="flex items-end justify-between mt-auto pt-4 border-t border-slate-100">
|
||||
<div>
|
||||
<div className="text-3xl font-extrabold" style={{ color: mutuelle.primaryColor }}>
|
||||
{mutuelle.score}
|
||||
<span className="text-sm font-medium text-slate-400"> /10</span>
|
||||
</div>
|
||||
<div className="text-[10px] text-slate-400 font-medium mt-0.5">Score Mon Gaston</div>
|
||||
</div>
|
||||
<button
|
||||
className="flex items-center gap-1.5 text-sm font-bold text-white px-4 py-2 rounded-xl hover:opacity-90 transition-opacity shadow-md"
|
||||
style={{ backgroundColor: mutuelle.primaryColor }}
|
||||
>
|
||||
Voir l'offre <FiArrowRight size={13} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function ComparisonSection() {
|
||||
return (
|
||||
<section id="classement" className="pt-10 pb-20 bg-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
|
||||
{/* Header */}
|
||||
<div className="text-center mb-14">
|
||||
<div className="inline-flex items-center gap-2 bg-amber-50 border border-amber-200 text-amber-700 text-xs font-bold px-3 py-1.5 rounded-full mb-5">
|
||||
<FiAward size={13} />
|
||||
Classement officiel 2026
|
||||
</div>
|
||||
<h2 className="text-4xl font-extrabold text-slate-900 tracking-tight mb-4">
|
||||
Les meilleures mutuelles santé
|
||||
</h2>
|
||||
<p className="text-slate-500 max-w-xl mx-auto leading-relaxed">
|
||||
Classement mis à jour chaque mois — basé sur les garanties, les tarifs
|
||||
et les avis clients de plus de 186 mutuelles analysées.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Top 3 grid */}
|
||||
<div className="grid md:grid-cols-3 gap-6 mb-14">
|
||||
{mutuelles.slice(0, 3).map((m, i) => (
|
||||
<motion.div
|
||||
key={m.id}
|
||||
initial={{ opacity: 0, y: 24 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: i * 0.1, duration: 0.45 }}
|
||||
>
|
||||
<TopCard mutuelle={m} index={i} />
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<div className="flex-1 h-px bg-slate-100" />
|
||||
<span className="text-xs font-bold text-slate-400 uppercase tracking-widest">
|
||||
Classement complet
|
||||
</span>
|
||||
<div className="flex-1 h-px bg-slate-100" />
|
||||
</div>
|
||||
|
||||
{/* Full list */}
|
||||
<div className="space-y-3">
|
||||
{mutuelles.map((m, i) => (
|
||||
<motion.div
|
||||
key={m.id}
|
||||
initial={{ opacity: 0, x: -16 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: i * 0.06, duration: 0.4 }}
|
||||
>
|
||||
<MutuelleCard mutuelle={m} />
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,157 @@
|
||||
import { MdPets } from 'react-icons/md'
|
||||
import {
|
||||
FiFacebook,
|
||||
FiTwitter,
|
||||
FiInstagram,
|
||||
FiLinkedin,
|
||||
FiYoutube,
|
||||
FiArrowUpRight,
|
||||
} from 'react-icons/fi'
|
||||
|
||||
const colResources = ['FAQ', 'Guides', 'Lexique', 'Documents']
|
||||
|
||||
const colDiscover = [
|
||||
'À propos',
|
||||
'Fonctionnement',
|
||||
'Revue de presse',
|
||||
'Nous rejoindre',
|
||||
'Nos partenaires',
|
||||
'Espace presse',
|
||||
]
|
||||
|
||||
const colLegal = [
|
||||
'Mentions légales',
|
||||
'Politique de confidentialité',
|
||||
'Gestion des cookies',
|
||||
"Conditions générales d'utilisation",
|
||||
]
|
||||
|
||||
const socials = [
|
||||
{ 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">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
|
||||
{/* Main grid */}
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-10 py-16">
|
||||
|
||||
{/* 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">
|
||||
Mon <span className="text-indigo-400">Gaston</span>
|
||||
</span>
|
||||
</div>
|
||||
<address className="not-italic text-sm text-slate-500 leading-relaxed mb-4">
|
||||
Votre comparateur d'assurances<br />
|
||||
33 avenue Roger Salengro<br />
|
||||
59100 Roubaix, France
|
||||
</address>
|
||||
<a
|
||||
href="mailto:[email protected]"
|
||||
className="text-sm text-slate-500 hover:text-indigo-400 transition-colors"
|
||||
>
|
||||
contact@mongaston.com
|
||||
</a>
|
||||
<div className="mt-2">
|
||||
<a
|
||||
href="tel:+33180891030"
|
||||
className="text-sm text-slate-500 hover:text-indigo-400 transition-colors"
|
||||
>
|
||||
01 80 89 10 30
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Resources */}
|
||||
<div>
|
||||
<h4 className="text-white font-bold text-sm uppercase tracking-widest mb-5">
|
||||
Ressources
|
||||
</h4>
|
||||
<ul className="space-y-3">
|
||||
{colResources.map((r) => (
|
||||
<li key={r}>
|
||||
<a
|
||||
href="#"
|
||||
className="text-sm text-slate-500 hover:text-white transition-colors flex items-center gap-1 group"
|
||||
>
|
||||
{r}
|
||||
<FiArrowUpRight size={11} className="opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Discover */}
|
||||
<div>
|
||||
<h4 className="text-white font-bold text-sm uppercase tracking-widest mb-5">
|
||||
Nous découvrir
|
||||
</h4>
|
||||
<ul className="space-y-3">
|
||||
{colDiscover.map((d) => (
|
||||
<li key={d}>
|
||||
<a
|
||||
href="#"
|
||||
className="text-sm text-slate-500 hover:text-white transition-colors flex items-center gap-1 group"
|
||||
>
|
||||
{d}
|
||||
<FiArrowUpRight size={11} className="opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Legal */}
|
||||
<div>
|
||||
<h4 className="text-white 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">
|
||||
{l}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</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">
|
||||
© 2026 Mon Gaston — Tous droits réservés.
|
||||
<span className="mx-2 text-slate-700">·</span>
|
||||
Comparateur de mutuelles santé & assurances
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{socials.map(({ Icon, label }) => (
|
||||
<a
|
||||
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"
|
||||
>
|
||||
<Icon size={14} className="text-slate-400 hover:text-white" />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
import { useState } from 'react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import { FiChevronDown, FiBookOpen, FiChevronRight } from 'react-icons/fi'
|
||||
import { faqs, guides } from '../data/mutuelles'
|
||||
|
||||
function FaqItem({ faq, index }) {
|
||||
const [open, setOpen] = useState(index === 0)
|
||||
|
||||
return (
|
||||
<div className="border border-slate-100 rounded-2xl overflow-hidden">
|
||||
<button
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
className="w-full flex items-start gap-4 px-6 py-5 text-left hover:bg-slate-50 transition-colors"
|
||||
>
|
||||
<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' }}
|
||||
>
|
||||
{index + 1}
|
||||
</span>
|
||||
<span className="flex-1 font-bold text-slate-900 leading-snug">{faq.question}</span>
|
||||
<motion.div
|
||||
animate={{ rotate: open ? 180 : 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="flex-shrink-0 mt-0.5"
|
||||
>
|
||||
<FiChevronDown className={`text-lg transition-colors ${open ? 'text-indigo-500' : 'text-slate-400'}`} />
|
||||
</motion.div>
|
||||
</button>
|
||||
|
||||
<AnimatePresence initial={false}>
|
||||
{open && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<div className="px-6 pb-6 space-y-3 border-t border-slate-100 pt-4">
|
||||
{faq.content.map((para, i) => (
|
||||
<p key={i} className="text-sm text-slate-500 leading-relaxed">
|
||||
{para}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function GuideSection() {
|
||||
return (
|
||||
<section className="py-20 bg-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
|
||||
<div className="text-center mb-14">
|
||||
<h2 className="text-4xl font-extrabold text-slate-900 tracking-tight mb-4">
|
||||
Tout savoir sur la mutuelle santé
|
||||
</h2>
|
||||
<p className="text-slate-500 max-w-xl mx-auto">
|
||||
Nos guides répondent à toutes vos questions pour faire le bon choix.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-3 gap-12">
|
||||
|
||||
{/* FAQ accordéon */}
|
||||
<div className="lg:col-span-2 space-y-3">
|
||||
{faqs.map((faq, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: i * 0.07, duration: 0.4 }}
|
||||
>
|
||||
<FaqItem faq={faq} index={i} />
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="lg:col-span-1">
|
||||
<div className="sticky top-24 space-y-4">
|
||||
|
||||
{/* 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>
|
||||
<h3 className="font-bold text-slate-900">Tous nos guides</h3>
|
||||
</div>
|
||||
<ul className="space-y-1">
|
||||
{guides.map((guide, i) => (
|
||||
<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"
|
||||
>
|
||||
<FiChevronRight className="flex-shrink-0 mt-0.5 text-slate-300 group-hover:text-indigo-400 transition-colors" />
|
||||
{guide}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* CTA card */}
|
||||
<div className="bg-gradient-to-br from-indigo-600 to-indigo-700 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">
|
||||
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"
|
||||
>
|
||||
📞 01 80 89 10 30
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
import { motion } from 'framer-motion'
|
||||
import { FiArrowRight, FiShield, FiStar, FiUsers, FiCheckCircle } 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 },
|
||||
]
|
||||
|
||||
export default function Hero() {
|
||||
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="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>
|
||||
|
||||
<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"
|
||||
>
|
||||
<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">
|
||||
pour tous
|
||||
</span>
|
||||
<span className="absolute bottom-1 left-0 w-full h-3 bg-indigo-100/70 rounded-sm -z-0" />
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-slate-500 leading-relaxed mb-8 max-w-lg mx-auto">
|
||||
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">
|
||||
<FiCheckCircle className="text-emerald-500 flex-shrink-0" />
|
||||
{t}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{/* CTA */}
|
||||
<div className="flex flex-wrap justify-center gap-3">
|
||||
<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"
|
||||
>
|
||||
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">
|
||||
Voir le classement
|
||||
</button>
|
||||
</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>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
import { FiArrowRight, FiActivity, FiEye, FiSmile } from 'react-icons/fi'
|
||||
import { MdLocalHospital } from 'react-icons/md'
|
||||
|
||||
const hospConfig = {
|
||||
orange: {
|
||||
bg: 'bg-orange-50',
|
||||
text: 'text-orange-700',
|
||||
border: 'border-orange-200',
|
||||
},
|
||||
green: {
|
||||
bg: 'bg-emerald-50',
|
||||
text: 'text-emerald-700',
|
||||
border: 'border-emerald-200',
|
||||
},
|
||||
teal: {
|
||||
bg: 'bg-teal-50',
|
||||
text: 'text-teal-700',
|
||||
border: 'border-teal-200',
|
||||
},
|
||||
}
|
||||
|
||||
function FeatureDots({ count }) {
|
||||
return (
|
||||
<div className="flex gap-1">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`w-2.5 h-2.5 rounded-full transition-colors ${
|
||||
i <= count ? 'bg-indigo-500' : 'bg-slate-200'
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ScoreBar({ score, color }) {
|
||||
return (
|
||||
<div className="flex flex-col items-center gap-1 min-w-[64px]">
|
||||
<div className="text-xl font-extrabold" style={{ color }}>
|
||||
{score}
|
||||
</div>
|
||||
<div className="w-14 h-1.5 bg-slate-100 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full rounded-full"
|
||||
style={{ width: `${(score / 10) * 100}%`, backgroundColor: color }}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-[10px] text-slate-400 font-medium whitespace-nowrap">
|
||||
Score Mon Gaston
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function MutuelleCard({ mutuelle }) {
|
||||
const hosp = hospConfig[mutuelle.hospColor] || hospConfig.teal
|
||||
const isFirst = mutuelle.rank === 1
|
||||
|
||||
return (
|
||||
<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-slate-100 hover:border-slate-200'
|
||||
}`}
|
||||
>
|
||||
{/* Rank badge */}
|
||||
<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'
|
||||
}`}
|
||||
>
|
||||
{mutuelle.rank}
|
||||
</div>
|
||||
|
||||
{/* Logo */}
|
||||
<div
|
||||
className="w-14 h-14 rounded-2xl flex items-center justify-center font-extrabold text-white text-sm flex-shrink-0 shadow-md"
|
||||
style={{ backgroundColor: mutuelle.primaryColor }}
|
||||
>
|
||||
{mutuelle.initials}
|
||||
</div>
|
||||
|
||||
{/* Name + tags */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap mb-1">
|
||||
<span className="font-bold text-slate-900 truncate">{mutuelle.name}</span>
|
||||
{isFirst && (
|
||||
<span className="bg-amber-50 text-amber-600 border border-amber-200 text-[10px] font-extrabold px-2 py-0.5 rounded-full whitespace-nowrap">
|
||||
⭐ Meilleur Choix
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 flex-wrap">
|
||||
{mutuelle.idealFor.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="text-[11px] font-medium bg-slate-100 text-slate-500 px-2 py-0.5 rounded-full"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Features */}
|
||||
<div className="hidden md:flex flex-col gap-2 flex-shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<FiActivity className="text-slate-300 text-xs flex-shrink-0" />
|
||||
<span className="text-[11px] text-slate-500 w-12">Soins</span>
|
||||
<FeatureDots count={mutuelle.soins} />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<FiSmile className="text-slate-300 text-xs flex-shrink-0" />
|
||||
<span className="text-[11px] text-slate-500 w-12">Dentaire</span>
|
||||
<FeatureDots count={mutuelle.dentaire} />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<FiEye className="text-slate-300 text-xs flex-shrink-0" />
|
||||
<span className="text-[11px] text-slate-500 w-12">Optique</span>
|
||||
<FeatureDots count={mutuelle.optique} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Score */}
|
||||
<div className="hidden lg:block flex-shrink-0">
|
||||
<ScoreBar score={mutuelle.score} color={mutuelle.primaryColor} />
|
||||
</div>
|
||||
|
||||
{/* CTA */}
|
||||
<button
|
||||
className="flex items-center gap-2 text-white font-bold text-sm px-5 py-2.5 rounded-xl flex-shrink-0 hover:opacity-90 active:scale-95 transition-all shadow-md"
|
||||
style={{ backgroundColor: mutuelle.primaryColor }}
|
||||
>
|
||||
Voir l'offre
|
||||
<FiArrowRight />
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
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: '#' },
|
||||
{ label: 'Assurance animaux', href: '#' },
|
||||
{ label: 'Assurance auto', href: '#' },
|
||||
{ label: 'Assurance habitation', href: '#' },
|
||||
{ label: 'Assurance Emprunteur', href: '#' },
|
||||
{ label: 'Contact', href: '#' },
|
||||
]
|
||||
|
||||
export default function Navbar() {
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 bg-white/95 backdrop-blur border-b border-slate-100 shadow-sm">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<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>
|
||||
<span className="font-extrabold text-xl tracking-tight text-slate-900">
|
||||
Mon <span className="text-indigo-600">Gaston</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
{/* Desktop nav */}
|
||||
<nav className="hidden lg:flex items-center gap-1">
|
||||
{navLinks.map((link) => (
|
||||
<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"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Phone CTA */}
|
||||
<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"
|
||||
>
|
||||
<FiPhone className="text-base" />
|
||||
01 80 89 10 30
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Mobile toggle */}
|
||||
<button
|
||||
className="lg:hidden p-2 rounded-lg text-slate-600 hover:bg-slate-100 transition-colors"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
aria-label="Menu"
|
||||
>
|
||||
{open ? <FiX size={22} /> : <FiMenu size={22} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile menu */}
|
||||
<AnimatePresence>
|
||||
{open && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -8 }}
|
||||
transition={{ duration: 0.18 }}
|
||||
className="lg:hidden border-t border-slate-100 bg-white px-4 pt-3 pb-5 space-y-1"
|
||||
>
|
||||
{navLinks.map((link) => (
|
||||
<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"
|
||||
>
|
||||
{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"
|
||||
>
|
||||
<FiPhone />
|
||||
01 80 89 10 30
|
||||
</a>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
import { motion } from 'framer-motion'
|
||||
import { FiStar } from 'react-icons/fi'
|
||||
import { testimonials } from '../data/mutuelles'
|
||||
|
||||
function Stars({ rating }) {
|
||||
return (
|
||||
<div className="flex gap-0.5">
|
||||
{[1, 2, 3, 4, 5].map((i) => (
|
||||
<FiStar
|
||||
key={i}
|
||||
size={13}
|
||||
className={i <= rating ? 'text-amber-400' : 'text-slate-200'}
|
||||
style={i <= rating ? { fill: 'currentColor' } : {}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Testimonials() {
|
||||
return (
|
||||
<section className="py-20 bg-slate-50">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
|
||||
<div className="text-center mb-14">
|
||||
<h2 className="text-4xl font-extrabold text-slate-900 tracking-tight mb-4">
|
||||
Ce que nos clients disent de nous
|
||||
</h2>
|
||||
<p className="text-slate-500 max-w-xl mx-auto">
|
||||
Découvrez les témoignages de clients satisfaits qui nous font confiance
|
||||
pour leurs assurances santé.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{testimonials.map((t, i) => (
|
||||
<motion.div
|
||||
key={t.id}
|
||||
initial={{ opacity: 0, y: 24 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: i * 0.12, duration: 0.45 }}
|
||||
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>
|
||||
|
||||
<p className="text-sm text-slate-600 leading-relaxed mb-5">
|
||||
{t.text}
|
||||
</p>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-between pt-4 border-t border-slate-100">
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className="w-10 h-10 rounded-full flex items-center justify-center text-white font-bold text-sm shadow-sm flex-shrink-0"
|
||||
style={{ backgroundColor: t.avatarColor }}
|
||||
>
|
||||
{t.avatar}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-bold text-sm text-slate-900">{t.name}</div>
|
||||
<div className="text-xs text-slate-400">{t.role}</div>
|
||||
</div>
|
||||
</div>
|
||||
<Stars rating={t.rating} />
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Trust bar */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 16 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.45, delay: 0.3 }}
|
||||
className="mt-12 flex flex-col sm:flex-row items-center justify-center gap-4 bg-white rounded-2xl border border-slate-100 shadow-sm px-8 py-5"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex -space-x-2">
|
||||
{[
|
||||
{ initials: 'AB', color: '#2563EB' },
|
||||
{ initials: 'CL', color: '#DC2626' },
|
||||
{ initials: 'MK', color: '#059669' },
|
||||
{ initials: 'JD', color: '#7C3AED' },
|
||||
].map((a) => (
|
||||
<div
|
||||
key={a.initials}
|
||||
className="w-8 h-8 rounded-full border-2 border-white flex items-center justify-center text-white text-[10px] font-bold"
|
||||
style={{ backgroundColor: a.color }}
|
||||
>
|
||||
{a.initials}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-sm font-bold text-slate-900">250 000+</span>
|
||||
<span className="text-sm text-slate-500">utilisateurs satisfaits</span>
|
||||
</div>
|
||||
<div className="hidden sm:block w-px h-6 bg-slate-200" />
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex gap-0.5">
|
||||
{[1,2,3,4,5].map((i) => (
|
||||
<FiStar key={i} size={14} className="text-amber-400" style={{ fill: 'currentColor' }} />
|
||||
))}
|
||||
</div>
|
||||
<span className="text-sm font-bold text-slate-900">4.9 / 5</span>
|
||||
<span className="text-sm text-slate-500">note moyenne</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user