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

edit mutuel panel

Browse Source
This commit is contained in:
lfirmin
2026-02-26 03:39:49 +01:00
parent 338c249e49
commit 63864a991b
7 changed files with 263 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/mutuelles.json
+95
View File
@@ -0,0 +1,95 @@
{
"mutuelles": [
{
"rang": 1,
"nom": "Experia conseil",
"slogan": "Experia conseil",
"couleur": "#2563EB",
"initiales": "NCA",
"meilleurChoix": true,
"tags": ["Actifs", "Seniors"],
"couvertures": { "soins": 3, "dentaire": 2, "optique": 3 },
"score": 9.8,
"promo": null,
"lien": "https://experia-conseils.fr/"
},
{
"rang": 2,
"nom": "ECG",
"slogan": "groupe pereire",
"couleur": "#1444ff",
"initiales": "ID",
"meilleurChoix": false,
"tags": ["Actifs"],
"couvertures": { "soins": 3, "dentaire": 2, "optique": 3 },
"score": 9.5,
"promo": null,
"lien": "https://pereire.co/"
},
{
"rang": 3,
"nom": "JSC santé",
"slogan": "Excellent rapport qualité-prix",
"couleur": "#FF1111",
"initiales": "YE",
"meilleurChoix": false,
"tags": ["Actifs", "Familles"],
"couvertures": { "soins": 3, "dentaire": 3, "optique": 2 },
"score": 9.3,
"promo": null,
"lien": "https://www.jscsante.fr/"
},
{
"rang": 4,
"nom": "Biomay",
"slogan": "Excellence pour seniors",
"couleur": "#2563EB",
"initiales": "SM",
"meilleurChoix": false,
"tags": ["Seniors"],
"couvertures": { "soins": 3, "dentaire": 3, "optique": 3 },
"score": 9.1,
"promo": null,
"lien": "https://www.biomay.fr/"
},
{
"rang": 5,
"nom": "NCA",
"slogan": "Flexibilité maximale",
"couleur": "#0891B2",
"initiales": "AP",
"meilleurChoix": false,
"tags": ["Seniors", "Indépendants"],
"couvertures": { "soins": 2, "dentaire": 3, "optique": 3 },
"score": 8.9,
"promo": null,
"lien": "https://ncassurances.net/"
},
{
"rang": 6,
"nom": "Helse",
"slogan": "Rapport qualité-prix optimal",
"couleur": "#059669",
"initiales": "HE",
"meilleurChoix": false,
"tags": ["Actifs", "Étudiants"],
"couvertures": { "soins": 2, "dentaire": 2, "optique": 3 },
"score": 8.7,
"promo": null,
"lien": "https://www.helse.fr"
},
{
"rang": 7,
"nom": "Helse",
"slogan": "Rapport qualité-prix optimal",
"couleur": "#059669",
"initiales": "HE",
"meilleurChoix": false,
"tags": ["Actifs", "Étudiants"],
"couvertures": { "soins": 2, "dentaire": 2, "optique": 3 },
"score": 8.7,
"promo": null,
"lien": "https://www.helse.fr"
}
]
}
src/components/ComparisonSection.jsx
+88 -58
View File
@@ -1,7 +1,7 @@
import { motion } from 'framer-motion' import { motion } from 'framer-motion'
import { FiAward, FiArrowRight } from 'react-icons/fi' import { FiAward, FiArrowRight } from 'react-icons/fi'
import { mutuelles } from '../data/mutuelles' import { useMutuelles } from '../hooks/useMutuelles'
import MutuelleCard from './MutuelleCard' import MutuelleCard, { LogoMutuelle } from './MutuelleCard'
const medals = ['🏆', '🥈', '🥉'] const medals = ['🏆', '🥈', '🥉']
@@ -16,36 +16,31 @@ function TopCard({ mutuelle, index }) {
: 'border-slate-100 bg-white hover:border-slate-200 shadow-sm' : 'border-slate-100 bg-white hover:border-slate-200 shadow-sm'
}`} }`}
> >
{/* Badge */} {/* Badge meilleur choix */}
{isFirst && ( {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-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 ⭐ Meilleur Choix 2026
</div> </div>
)} )}
<div className="flex items-start justify-between mb-5 mt-1"> <div className="flex items-start justify-between mb-5 mt-1">
{/* Logo */} {/* Logo (favicon ou initiales) */}
<div <LogoMutuelle mutuelle={mutuelle} className="w-14 h-14 text-lg" />
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 */} {/* Médaille */}
<span className="text-2xl">{medals[index]}</span> <span className="text-2xl">{medals[index]}</span>
</div> </div>
<div className="font-extrabold text-slate-900 text-base mb-0.5">{mutuelle.name}</div> <div className="font-extrabold text-slate-900 text-base mb-0.5">{mutuelle.nom}</div>
<div className="text-xs text-slate-500 mb-4">{mutuelle.tagline}</div> <div className="text-xs text-slate-500 mb-4">{mutuelle.slogan}</div>
{/* Tags */} {/* Tags */}
<div className="flex gap-1.5 flex-wrap mb-5"> <div className="flex gap-1.5 flex-wrap mb-5">
{mutuelle.idealFor.map((tag) => ( {mutuelle.tags.map((tag) => (
<span <span
key={tag} key={tag}
className="text-[11px] font-medium px-2 py-0.5 rounded-full" className="text-[11px] font-medium px-2 py-0.5 rounded-full"
style={{ backgroundColor: mutuelle.lightBg, color: mutuelle.primaryColor }} style={{ backgroundColor: `${mutuelle.couleur}18`, color: mutuelle.couleur }}
> >
{tag} {tag}
</span> </span>
@@ -53,33 +48,55 @@ function TopCard({ mutuelle, index }) {
</div> </div>
{/* Promo */} {/* Promo */}
{mutuelle.offer && ( {mutuelle.promo && (
<div className="mb-4 bg-emerald-50 border border-emerald-200 text-emerald-700 text-xs font-bold text-center py-2 rounded-xl"> <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} 🎁 {mutuelle.promo}
</div> </div>
)} )}
{/* Score + CTA */} {/* Score + CTA */}
<div className="flex items-end justify-between mt-auto pt-4 border-t border-slate-100"> <div className="flex items-end justify-between mt-auto pt-4 border-t border-slate-100">
<div> <div>
<div className="text-3xl font-extrabold" style={{ color: mutuelle.primaryColor }}> <div className="text-3xl font-extrabold" style={{ color: mutuelle.couleur }}>
{mutuelle.score} {mutuelle.score}
<span className="text-sm font-medium text-slate-400"> /10</span> <span className="text-sm font-medium text-slate-400"> /10</span>
</div> </div>
<div className="text-[10px] text-slate-400 font-medium mt-0.5">Score Mon Gaston</div> <div className="text-[10px] text-slate-400 font-medium mt-0.5">Score Mon Gaston</div>
</div> </div>
<button <a
href={mutuelle.lien}
target="_blank"
rel="noopener noreferrer"
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" 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 }} style={{ backgroundColor: mutuelle.couleur }}
> >
Voir l'offre <FiArrowRight size={13} /> Voir l'offre <FiArrowRight size={13} />
</button> </a>
</div>
</div>
)
}
function LoadingSkeleton() {
return (
<div className="animate-pulse space-y-4">
<div className="grid md:grid-cols-3 gap-6">
{[1, 2, 3].map((i) => (
<div key={i} className="h-64 bg-slate-100 rounded-3xl" />
))}
</div>
<div className="space-y-3 mt-14">
{[1, 2, 3, 4, 5, 6].map((i) => (
<div key={i} className="h-20 bg-slate-100 rounded-2xl" />
))}
</div> </div>
</div> </div>
) )
} }
export default function ComparisonSection() { export default function ComparisonSection() {
const { mutuelles, loading, error } = useMutuelles()
return ( return (
<section id="classement" className="pt-10 pb-20 bg-white"> <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"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -99,44 +116,57 @@ export default function ComparisonSection() {
</p> </p>
</div> </div>
{/* Top 3 grid */} {/* Erreur */}
<div className="grid md:grid-cols-3 gap-6 mb-14"> {error && (
{mutuelles.slice(0, 3).map((m, i) => ( <div className="text-center text-red-500 py-10">{error}</div>
<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 */} {/* Chargement */}
<div className="flex items-center gap-4 mb-8"> {loading && !error && <LoadingSkeleton />}
<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 */} {/* Contenu */}
<div className="space-y-3"> {!loading && !error && (
{mutuelles.map((m, i) => ( <>
<motion.div {/* Top 3 */}
key={m.id} <div className="grid md:grid-cols-3 gap-6 mb-14">
initial={{ opacity: 0, x: -16 }} {mutuelles.slice(0, 3).map((m, i) => (
whileInView={{ opacity: 1, x: 0 }} <motion.div
viewport={{ once: true }} key={m.rang}
transition={{ delay: i * 0.06, duration: 0.4 }} initial={{ opacity: 0, y: 24 }}
> whileInView={{ opacity: 1, y: 0 }}
<MutuelleCard mutuelle={m} /> viewport={{ once: true }}
</motion.div> transition={{ delay: i * 0.1, duration: 0.45 }}
))} >
</div> <TopCard mutuelle={m} index={i} />
</motion.div>
))}
</div>
{/* Séparateur */}
<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>
{/* Liste complète */}
<div className="space-y-3">
{mutuelles.map((m, i) => (
<motion.div
key={m.rang}
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> </div>
</section> </section>
) )
src/components/Footer.jsx
+6 -6
View File
@@ -36,7 +36,7 @@ const socials = [
export default function Footer() { export default function Footer() {
return ( return (
<footer className="bg-slate-900 text-slate-400"> <footer className="bg-slate-900 text-slate-400 relative z-10">
<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 */}
@@ -49,26 +49,26 @@ export default function Footer() {
<MdPets className="text-white text-lg" /> <MdPets className="text-white text-lg" />
</div> </div>
<span className="font-extrabold text-xl text-white tracking-tight"> <span className="font-extrabold text-xl text-white tracking-tight">
Mon <span className="text-indigo-400">Gaston</span> Assurez<span className="text-indigo-400">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">
Votre comparateur d'assurances<br /> Votre comparateur d'assurances<br />
33 avenue Roger Salengro<br /> 1 Rue john doe<br />
59100 Roubaix, France 59100 Roubaix, France
</address> </address>
<a <a
href="mailto:[email protected]" href="mailto:[email protected]"
className="text-sm text-slate-500 hover:text-indigo-400 transition-colors" className="text-sm text-slate-500 hover:text-indigo-400 transition-colors"
> >
contact@mongaston.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-indigo-400 transition-colors"
> >
01 80 89 10 30 01 02 03 04 05
</a> </a>
</div> </div>
</div> </div>
@@ -133,7 +133,7 @@ export default function Footer() {
{/* 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-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"> <p className="text-xs text-slate-600 text-center sm:text-left">
© 2026 Mon Gaston — 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-slate-700">·</span>
Comparateur de mutuelles santé & assurances Comparateur de mutuelles santé & assurances
</p> </p>
src/components/GuideSection.jsx
+1 -1
View File
@@ -82,7 +82,7 @@ export default function GuideSection() {
</div> </div>
{/* Sidebar */} {/* Sidebar */}
<div className="lg:col-span-1"> <div className="lg:col-span-1 self-start">
<div className="sticky top-24 space-y-4"> <div className="sticky top-24 space-y-4">
{/* Guides card */} {/* Guides card */}
src/components/MutuelleCard.jsx
+47 -41
View File
@@ -1,22 +1,32 @@
import { useState } from 'react'
import { FiArrowRight, FiActivity, FiEye, FiSmile } from 'react-icons/fi' import { FiArrowRight, FiActivity, FiEye, FiSmile } from 'react-icons/fi'
import { MdLocalHospital } from 'react-icons/md'
const hospConfig = { // Favicon auto-chargé depuis le lien, fallback sur les initiales
orange: { export function LogoMutuelle({ mutuelle, className = '' }) {
bg: 'bg-orange-50', const [faviconError, setFaviconError] = useState(false)
text: 'text-orange-700',
border: 'border-orange-200', const faviconUrl =
}, mutuelle.lien && !faviconError
green: { ? `https://www.google.com/s2/favicons?sz=64&domain_url=${encodeURIComponent(mutuelle.lien)}`
bg: 'bg-emerald-50', : null
text: 'text-emerald-700',
border: 'border-emerald-200', return (
}, <div
teal: { className={`rounded-2xl flex items-center justify-center font-extrabold text-white flex-shrink-0 shadow-md overflow-hidden ${className}`}
bg: 'bg-teal-50', style={{ backgroundColor: faviconUrl ? 'transparent' : mutuelle.couleur }}
text: 'text-teal-700', >
border: 'border-teal-200', {faviconUrl ? (
}, <img
src={faviconUrl}
alt=""
className="w-full h-full object-contain"
onError={() => setFaviconError(true)}
/>
) : (
<span>{mutuelle.initiales}</span>
)}
</div>
)
} }
function FeatureDots({ count }) { function FeatureDots({ count }) {
@@ -54,8 +64,7 @@ function ScoreBar({ score, color }) {
} }
export default function MutuelleCard({ mutuelle }) { export default function MutuelleCard({ mutuelle }) {
const hosp = hospConfig[mutuelle.hospColor] || hospConfig.teal const isFirst = mutuelle.rang === 1
const isFirst = mutuelle.rank === 1
return ( return (
<div <div
@@ -65,35 +74,30 @@ export default function MutuelleCard({ mutuelle }) {
: 'border-slate-100 hover:border-slate-200' : 'border-slate-100 hover:border-slate-200'
}`} }`}
> >
{/* Rank badge */} {/* 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-indigo-600 text-white shadow-md shadow-indigo-300' : 'bg-slate-100 text-slate-500'
}`} }`}
> >
{mutuelle.rank} {mutuelle.rang}
</div> </div>
{/* Logo */} {/* Logo (favicon ou initiales) */}
<div <LogoMutuelle mutuelle={mutuelle} className="w-14 h-14 text-sm" />
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 */} {/* Nom + tags */}
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="flex items-center gap-2 flex-wrap mb-1"> <div className="flex items-center gap-2 flex-wrap mb-1">
<span className="font-bold text-slate-900 truncate">{mutuelle.name}</span> <span className="font-bold text-slate-900 truncate">{mutuelle.nom}</span>
{isFirst && ( {mutuelle.meilleurChoix && (
<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"> <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 ⭐ Meilleur Choix
</span> </span>
)} )}
</div> </div>
<div className="flex items-center gap-1.5 flex-wrap"> <div className="flex items-center gap-1.5 flex-wrap">
{mutuelle.idealFor.map((tag) => ( {mutuelle.tags.map((tag) => (
<span <span
key={tag} key={tag}
className="text-[11px] font-medium bg-slate-100 text-slate-500 px-2 py-0.5 rounded-full" className="text-[11px] font-medium bg-slate-100 text-slate-500 px-2 py-0.5 rounded-full"
@@ -104,39 +108,41 @@ export default function MutuelleCard({ mutuelle }) {
</div> </div>
</div> </div>
{/* Features */} {/* Points de couverture */}
<div className="hidden md:flex flex-col gap-2 flex-shrink-0"> <div className="hidden md:flex flex-col gap-2 flex-shrink-0">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<FiActivity className="text-slate-300 text-xs flex-shrink-0" /> <FiActivity className="text-slate-300 text-xs flex-shrink-0" />
<span className="text-[11px] text-slate-500 w-12">Soins</span> <span className="text-[11px] text-slate-500 w-12">Soins</span>
<FeatureDots count={mutuelle.soins} /> <FeatureDots count={mutuelle.couvertures.soins} />
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<FiSmile className="text-slate-300 text-xs flex-shrink-0" /> <FiSmile className="text-slate-300 text-xs flex-shrink-0" />
<span className="text-[11px] text-slate-500 w-12">Dentaire</span> <span className="text-[11px] text-slate-500 w-12">Dentaire</span>
<FeatureDots count={mutuelle.dentaire} /> <FeatureDots count={mutuelle.couvertures.dentaire} />
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<FiEye className="text-slate-300 text-xs flex-shrink-0" /> <FiEye className="text-slate-300 text-xs flex-shrink-0" />
<span className="text-[11px] text-slate-500 w-12">Optique</span> <span className="text-[11px] text-slate-500 w-12">Optique</span>
<FeatureDots count={mutuelle.optique} /> <FeatureDots count={mutuelle.couvertures.optique} />
</div> </div>
</div> </div>
{/* Score */} {/* Score */}
<div className="hidden lg:block flex-shrink-0"> <div className="hidden lg:block flex-shrink-0">
<ScoreBar score={mutuelle.score} color={mutuelle.primaryColor} /> <ScoreBar score={mutuelle.score} color={mutuelle.couleur} />
</div> </div>
{/* CTA */} {/* CTA */}
<button <a
href={mutuelle.lien}
target="_blank"
rel="noopener noreferrer"
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" 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 }} style={{ backgroundColor: mutuelle.couleur }}
> >
Voir l'offre Voir l'offre
<FiArrowRight /> <FiArrowRight />
</button> </a>
</div> </div>
) )
} }
src/components/Navbar.jsx
+1 -1
View File
@@ -25,7 +25,7 @@ export default function Navbar() {
<MdPets className="text-white text-lg" /> <MdPets className="text-white text-lg" />
</div> </div>
<span className="font-extrabold text-xl tracking-tight text-slate-900"> <span className="font-extrabold text-xl tracking-tight text-slate-900">
Mon <span className="text-indigo-600">Gaston</span> Assurez<span className="text-indigo-600">Moi</span>
</span> </span>
</a> </a>
src/hooks/useMutuelles.js
+25
View File
@@ -0,0 +1,25 @@
import { useState, useEffect } from 'react'
export function useMutuelles() {
const [mutuelles, setMutuelles] = useState([])
const [loading, setLoading] = useState(true)
const [error, setError] = useState(null)
useEffect(() => {
fetch('/mutuelles.json')
.then((res) => {
if (!res.ok) throw new Error('Impossible de charger les données')
return res.json()
})
.then((data) => {
setMutuelles(data.mutuelles)
setLoading(false)
})
.catch((err) => {
setError(err.message)
setLoading(false)
})
}, [])
return { mutuelles, loading, error }
}