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

d

Browse Source
This commit is contained in:
lfirmin
2026-02-28 21:01:01 +01:00
parent 6364988f0f
commit 01eb68d3e1
8 changed files with 80 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
img/hero-bg-mobile.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

public/config.json
+2 -1
View File
@@ -1,4 +1,5 @@
{ {
"heroVideo": "/video/home.mp4", "heroVideo": "/video/home.mp4",
"heroBg": "/img/hero-bg.webp" "heroBg": "/img/hero-bg.webp",
"heroBgMobile": "/img/hero-bg-mobile.webp"
} }
src/App.jsx
+8 -4
View File
@@ -6,12 +6,16 @@ import GuideSection from './components/GuideSection'
import Footer from './components/Footer' import Footer from './components/Footer'
export default function App() { export default function App() {
const [bgSrc, setBgSrc] = useState(null) const [bgSrc, setBgSrc] = useState(null)
const [bgMobileSrc, setBgMobileSrc] = useState(null)
useEffect(() => { useEffect(() => {
fetch('/config.json') fetch('/config.json')
.then(r => r.json()) .then(r => r.json())
.then(data => setBgSrc(data.heroBg ?? null)) .then(data => {
if (data.heroBg) setBgSrc(data.heroBg)
if (data.heroBgMobile) setBgMobileSrc(data.heroBgMobile)
})
.catch(() => {}) .catch(() => {})
}, []) }, [])
@@ -19,9 +23,9 @@ export default function App() {
<div className="min-h-screen bg-[#19392e]"> <div className="min-h-screen bg-[#19392e]">
<Navbar /> <Navbar />
<main> <main>
<Hero bgSrc={bgSrc} /> <Hero bgSrc={bgSrc} bgMobileSrc={bgMobileSrc} />
<ComparisonSection /> <ComparisonSection />
<GuideSection bgSrc={bgSrc} /> <GuideSection bgSrc={bgSrc} bgMobileSrc={bgMobileSrc} />
</main> </main>
<Footer /> <Footer />
</div> </div>
src/components/ComparisonSection.jsx
+2 -2
View File
@@ -107,13 +107,13 @@ export default function ComparisonSection() {
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.5 }} transition={{ duration: 0.5 }}
className="text-center mb-14" className="text-center mb-8 sm: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"> <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} /> <FiAward size={13} />
Classement officiel 2026 Classement officiel 2026
</div> </div>
<h2 className="text-4xl font-extrabold text-slate-900 tracking-tight mb-4"> <h2 className="text-2xl sm:text-4xl font-extrabold text-slate-900 tracking-tight mb-4">
Les meilleures mutuelles santé Les meilleures mutuelles santé
</h2> </h2>
<p className="text-slate-500 max-w-xl mx-auto leading-relaxed"> <p className="text-slate-500 max-w-xl mx-auto leading-relaxed">
src/components/Footer.jsx
+25 -35
View File
@@ -23,11 +23,10 @@ const colLegal = [
export default function Footer() { export default function Footer() {
return ( return (
<footer className="bg-[#19392e]"> <footer className="bg-[#19392e]">
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
{/* Main grid */} {/* Main grid */}
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-10 py-16"> <div className="grid grid-cols-2 lg:grid-cols-4 gap-x-6 gap-y-8 py-10 lg:py-16">
{/* Brand */} {/* Brand */}
<motion.div <motion.div
@@ -35,9 +34,9 @@ export default function Footer() {
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.45, delay: 0 }} transition={{ duration: 0.45, delay: 0 }}
className="sm:col-span-2 lg:col-span-1" className="col-span-2 lg:col-span-1 flex flex-col items-center lg:items-start text-center lg:text-left"
> >
<div className="flex items-center gap-2.5 mb-5"> <div className="flex items-center gap-2.5 mb-4">
<img <img
src="/img/ico.webp" src="/img/ico.webp"
alt="AssurezMoi" alt="AssurezMoi"
@@ -47,44 +46,36 @@ export default function Footer() {
/> />
<AnimatedBrandName lightText /> <AnimatedBrandName lightText />
</div> </div>
<address className="not-italic text-sm text-[#fffef6]/60 leading-relaxed mb-4"> <address className="not-italic text-sm text-[#fffef6]/60 leading-relaxed mb-3">
Votre comparateur d'assurances<br /> Votre comparateur d'assurances<br />
1 Rue john doe<br /> 1 Rue john doe<br />
59100 Roubaix, France 59100 Roubaix, France
</address> </address>
<a <div className="flex flex-col gap-1 items-center lg:items-start">
href="mailto:[email protected]" <a href="mailto:[email protected]" className="text-sm text-[#fffef6]/60 hover:text-[#9CCC8A] transition-colors">
className="text-sm text-[#fffef6]/60 hover:text-[#9CCC8A] transition-colors" contact@assurezmoi.com
> </a>
contact@assurezmoi.com <a href="tel:+33180891030" className="text-sm text-[#fffef6]/60 hover:text-[#9CCC8A] transition-colors">
</a>
<div className="mt-2">
<a
href="tel:+33180891030"
className="text-sm text-[#fffef6]/60 hover:text-[#9CCC8A] transition-colors"
>
01 02 03 04 05 01 02 03 04 05
</a> </a>
</div> </div>
</motion.div> </motion.div>
{/* Resources */} {/* Ressources */}
<motion.div <motion.div
initial={{ opacity: 0, y: 24 }} initial={{ opacity: 0, y: 24 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.45, delay: 0.1 }} transition={{ duration: 0.45, delay: 0.1 }}
className="flex flex-col items-center lg:items-start text-center lg:text-left"
> >
<h4 className="text-[#fffef6] font-bold text-sm uppercase tracking-widest mb-5"> <h4 className="text-[#fffef6] font-bold text-sm uppercase tracking-widest mb-4">
Ressources Ressources
</h4> </h4>
<ul className="space-y-3"> <ul className="space-y-2.5">
{colResources.map((r) => ( {colResources.map((r) => (
<li key={r}> <li key={r}>
<a <a href="#" className="text-sm text-[#fffef6]/60 hover:text-[#9CCC8A] transition-colors inline-flex items-center gap-1 group">
href="#"
className="text-sm text-[#fffef6]/60 hover:text-[#9CCC8A] 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" />
</a> </a>
@@ -93,23 +84,21 @@ export default function Footer() {
</ul> </ul>
</motion.div> </motion.div>
{/* Discover */} {/* Nous découvrir */}
<motion.div <motion.div
initial={{ opacity: 0, y: 24 }} initial={{ opacity: 0, y: 24 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.45, delay: 0.2 }} transition={{ duration: 0.45, delay: 0.2 }}
className="flex flex-col items-center lg:items-start text-center lg:text-left"
> >
<h4 className="text-[#fffef6] font-bold text-sm uppercase tracking-widest mb-5"> <h4 className="text-[#fffef6] font-bold text-sm uppercase tracking-widest mb-4">
Nous découvrir Nous découvrir
</h4> </h4>
<ul className="space-y-3"> <ul className="space-y-2.5">
{colDiscover.map((d) => ( {colDiscover.map((d) => (
<li key={d}> <li key={d}>
<a <a href="#" className="text-sm text-[#fffef6]/60 hover:text-[#9CCC8A] transition-colors inline-flex items-center gap-1 group">
href="#"
className="text-sm text-[#fffef6]/60 hover:text-[#9CCC8A] 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" />
</a> </a>
@@ -118,19 +107,20 @@ export default function Footer() {
</ul> </ul>
</motion.div> </motion.div>
{/* Legal */} {/* Informations légales */}
<motion.div <motion.div
initial={{ opacity: 0, y: 24 }} initial={{ opacity: 0, y: 24 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.45, delay: 0.3 }} transition={{ duration: 0.45, delay: 0.3 }}
className="col-span-2 lg:col-span-1 flex flex-col items-center lg:items-start text-center lg:text-left"
> >
<h4 className="text-[#fffef6] font-bold text-sm uppercase tracking-widest mb-5"> <h4 className="text-[#fffef6] font-bold text-sm uppercase tracking-widest mb-4">
Informations légales Informations légales
</h4> </h4>
<ul className="space-y-3"> <ul className="grid grid-cols-2 lg:block gap-x-6 gap-y-2.5 lg:space-y-2.5 w-full">
{colLegal.map((l) => ( {colLegal.map((l) => (
<li key={l}> <li key={l} className="text-center lg:text-left">
<a href="#" className="text-sm text-[#fffef6]/60 hover:text-[#9CCC8A] transition-colors"> <a href="#" className="text-sm text-[#fffef6]/60 hover:text-[#9CCC8A] transition-colors">
{l} {l}
</a> </a>
@@ -146,7 +136,7 @@ export default function Footer() {
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.4, delay: 0.1 }} transition={{ duration: 0.4, delay: 0.1 }}
className="border-t border-white/10 py-6 flex items-center justify-center" className="border-t border-white/10 py-5 flex items-center justify-center"
> >
<p className="text-xs text-[#fffef6]/40 text-center"> <p className="text-xs text-[#fffef6]/40 text-center">
© 2026 AssurezMoi — Tous droits réservés. © 2026 AssurezMoi — Tous droits réservés.
src/components/GuideSection.jsx
+19 -8
View File
@@ -50,12 +50,23 @@ function FaqItem({ faq, index }) {
) )
} }
export default function GuideSection({ bgSrc }) { export default function GuideSection({ bgSrc, bgMobileSrc }) {
return ( return (
<section <section className="relative py-0" style={!bgSrc ? { backgroundColor: '#19392e' } : {}}>
className="relative py-0 bg-cover bg-center bg-fixed" {/* Fond mobile (portrait) */}
style={bgSrc ? { backgroundImage: `url(${bgSrc})` } : { backgroundColor: '#19392e' }} {(bgMobileSrc || bgSrc) && (
> <div
className="md:hidden absolute inset-0 bg-cover bg-center"
style={{ backgroundImage: `url(${bgMobileSrc || bgSrc})` }}
/>
)}
{/* Fond desktop (paysage, parallax) */}
{bgSrc && (
<div
className="hidden md:block absolute inset-0 bg-cover bg-center bg-fixed"
style={{ backgroundImage: `url(${bgSrc})` }}
/>
)}
{/* Overlay */} {/* Overlay */}
<div className="pointer-events-none absolute inset-0 bg-[#19392e]/70 backdrop-blur-[2px]" /> <div className="pointer-events-none absolute inset-0 bg-[#19392e]/70 backdrop-blur-[2px]" />
@@ -73,7 +84,7 @@ export default function GuideSection({ bgSrc }) {
</svg> </svg>
</div> </div>
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-48 pb-48"> <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-24 md:pt-48 pb-24 md:pb-48">
<motion.div <motion.div
initial={{ opacity: 0, y: 24 }} initial={{ opacity: 0, y: 24 }}
@@ -82,7 +93,7 @@ export default function GuideSection({ bgSrc }) {
transition={{ duration: 0.5 }} transition={{ duration: 0.5 }}
className="text-center mb-14" className="text-center mb-14"
> >
<h2 className="text-4xl font-extrabold text-[#fffef6] tracking-tight mb-4"> <h2 className="text-2xl sm:text-4xl font-extrabold text-[#fffef6] tracking-tight mb-4">
Tout savoir sur la mutuelle santé Tout savoir sur la mutuelle santé
</h2> </h2>
<p className="text-[#fffef6]/60 max-w-xl mx-auto"> <p className="text-[#fffef6]/60 max-w-xl mx-auto">
@@ -90,7 +101,7 @@ export default function GuideSection({ bgSrc }) {
</p> </p>
</motion.div> </motion.div>
<div className="grid lg:grid-cols-3 gap-12"> <div className="grid lg:grid-cols-3 gap-6 lg:gap-12">
{/* FAQ accordéon */} {/* FAQ accordéon */}
<div className="lg:col-span-2 space-y-3"> <div className="lg:col-span-2 space-y-3">
src/components/Hero.jsx
+22 -11
View File
@@ -30,7 +30,7 @@ function VideoPlayer({ src }) {
} }
return ( return (
<div className="relative rounded-2xl overflow-hidden shadow-2xl shadow-black/30 bg-slate-900 w-full h-full min-h-[320px]"> <div className="relative rounded-2xl overflow-hidden shadow-2xl shadow-black/30 bg-slate-900 w-full h-full min-h-[220px] md:min-h-[320px]">
{src ? ( {src ? (
<video <video
ref={videoRef} ref={videoRef}
@@ -79,7 +79,7 @@ function VideoPlayer({ src }) {
) )
} }
export default function Hero({ bgSrc }) { export default function Hero({ bgSrc, bgMobileSrc }) {
const [videoSrc, setVideoSrc] = useState(null) const [videoSrc, setVideoSrc] = useState(null)
useEffect(() => { useEffect(() => {
@@ -90,10 +90,21 @@ export default function Hero({ bgSrc }) {
}, []) }, [])
return ( return (
<section <section className="relative pt-20 md:pt-28 pb-36 md:pb-48">
className="relative bg-cover bg-center bg-fixed pt-28 pb-48" {/* Fond mobile (portrait) */}
style={bgSrc ? { backgroundImage: `url(${bgSrc})` } : {}} {(bgMobileSrc || bgSrc) && (
> <div
className="md:hidden absolute inset-0 bg-cover bg-center"
style={{ backgroundImage: `url(${bgMobileSrc || bgSrc})` }}
/>
)}
{/* Fond desktop (paysage, parallax) */}
{bgSrc && (
<div
className="hidden md:block absolute inset-0 bg-cover bg-center bg-fixed"
style={{ backgroundImage: `url(${bgSrc})` }}
/>
)}
{/* Overlay */} {/* Overlay */}
<div className="pointer-events-none absolute inset-0 bg-[#19392e]/70 backdrop-blur-[2px]" /> <div className="pointer-events-none absolute inset-0 bg-[#19392e]/70 backdrop-blur-[2px]" />
@@ -112,7 +123,7 @@ export default function Hero({ bgSrc }) {
transition={{ duration: 0.55 }} transition={{ duration: 0.55 }}
className="text-center mb-12" className="text-center mb-12"
> >
<h1 className="text-5xl xl:text-7xl font-extrabold text-[#fffef6] leading-[1.05] tracking-tight mb-5"> <h1 className="text-3xl sm:text-5xl xl:text-7xl font-extrabold text-[#fffef6] leading-[1.05] tracking-tight mb-5">
Mutuelle santé{' '} Mutuelle santé{' '}
<span className="relative inline-block"> <span className="relative inline-block">
<span className="relative z-10 text-transparent bg-clip-text bg-gradient-to-r from-[#9CCC8A] to-[#5BAF7A]"> <span className="relative z-10 text-transparent bg-clip-text bg-gradient-to-r from-[#9CCC8A] to-[#5BAF7A]">
@@ -140,7 +151,7 @@ export default function Hero({ bgSrc }) {
initial={{ opacity: 0, x: -28 }} initial={{ opacity: 0, x: -28 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.55, delay: 0.3 }} transition={{ duration: 0.55, delay: 0.3 }}
className="bg-[#19392e]/80 backdrop-blur-sm rounded-3xl border border-white/10 shadow-xl shadow-black/30 p-8 flex flex-col justify-between" className="bg-[#19392e]/80 backdrop-blur-sm rounded-3xl border border-white/10 shadow-xl shadow-black/30 p-5 sm:p-8 flex flex-col justify-between"
> >
<div> <div>
<p className="text-lg text-[#fffef6]/80 leading-relaxed mb-6"> <p className="text-lg text-[#fffef6]/80 leading-relaxed mb-6">
@@ -159,16 +170,16 @@ export default function Hero({ bgSrc }) {
</ul> </ul>
{/* CTAs */} {/* CTAs */}
<div className="flex flex-wrap gap-3 mb-8"> <div className="flex flex-col sm:flex-row flex-wrap gap-3 mb-8">
<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-[#9CCC8A] hover:bg-[#87BE73] text-black font-bold text-base px-7 py-3.5 rounded-xl shadow-lg shadow-[#9CCC8A]/40 transition-all" className="flex items-center justify-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 w-full sm:w-auto"
> >
Comparer les mutuelles Comparer les mutuelles
<FiArrowRight /> <FiArrowRight />
</motion.button> </motion.button>
<button className="flex items-center gap-2 font-semibold text-[#fffef6]/80 text-base px-7 py-3.5 rounded-xl border border-white/20 bg-white/5 hover:border-[#9CCC8A] hover:text-[#9CCC8A] transition-all"> <button className="flex items-center justify-center gap-2 font-semibold text-[#fffef6]/80 text-base px-7 py-3.5 rounded-xl border border-white/20 bg-white/5 hover:border-[#9CCC8A] hover:text-[#9CCC8A] transition-all w-full sm:w-auto">
Voir le classement Voir le classement
</button> </button>
</div> </div>
src/components/MutuelleCard.jsx
+2 -2
View File
@@ -139,10 +139,10 @@ export default function MutuelleCard({ mutuelle }) {
href={mutuelle.lien} href={mutuelle.lien}
target="_blank" target="_blank"
rel="noopener noreferrer" 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-1.5 text-white font-bold text-sm px-3 sm:px-5 py-2.5 rounded-xl flex-shrink-0 hover:opacity-90 active:scale-95 transition-all shadow-md"
style={{ backgroundColor: mutuelle.couleur }} style={{ backgroundColor: mutuelle.couleur }}
> >
Voir l'offre <span className="hidden sm:inline">Voir l'offre</span>
<FiArrowRight /> <FiArrowRight />
</a> </a>
</div> </div>