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",
"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'
export default function App() {
const [bgSrc, setBgSrc] = useState(null)
const [bgSrc, setBgSrc] = useState(null)
const [bgMobileSrc, setBgMobileSrc] = useState(null)
useEffect(() => {
fetch('/config.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(() => {})
}, [])
@@ -19,9 +23,9 @@ export default function App() {
<div className="min-h-screen bg-[#19392e]">
<Navbar />
<main>
<Hero bgSrc={bgSrc} />
<Hero bgSrc={bgSrc} bgMobileSrc={bgMobileSrc} />
<ComparisonSection />
<GuideSection bgSrc={bgSrc} />
<GuideSection bgSrc={bgSrc} bgMobileSrc={bgMobileSrc} />
</main>
<Footer />
</div>
src/components/ComparisonSection.jsx
+2 -2
View File
@@ -107,13 +107,13 @@ export default function ComparisonSection() {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
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">
<FiAward size={13} />
Classement officiel 2026
</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é
</h2>
<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() {
return (
<footer className="bg-[#19392e]">
<div className="relative 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">
<div className="grid grid-cols-2 lg:grid-cols-4 gap-x-6 gap-y-8 py-10 lg:py-16">
{/* Brand */}
<motion.div
@@ -35,9 +34,9 @@ export default function Footer() {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
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
src="/img/ico.webp"
alt="AssurezMoi"
@@ -47,44 +46,36 @@ export default function Footer() {
/>
<AnimatedBrandName lightText />
</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 />
1 Rue john doe<br />
59100 Roubaix, France
</address>
<a
href="mailto:[email protected]"
className="text-sm text-[#fffef6]/60 hover:text-[#9CCC8A] transition-colors"
>
contact@assurezmoi.com
</a>
<div className="mt-2">
<a
href="tel:+33180891030"
className="text-sm text-[#fffef6]/60 hover:text-[#9CCC8A] transition-colors"
>
<div className="flex flex-col gap-1 items-center lg:items-start">
<a href="mailto:[email protected]" className="text-sm text-[#fffef6]/60 hover:text-[#9CCC8A] transition-colors">
contact@assurezmoi.com
</a>
<a href="tel:+33180891030" className="text-sm text-[#fffef6]/60 hover:text-[#9CCC8A] transition-colors">
01 02 03 04 05
</a>
</div>
</motion.div>
{/* Resources */}
{/* Ressources */}
<motion.div
initial={{ opacity: 0, y: 24 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
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
</h4>
<ul className="space-y-3">
<ul className="space-y-2.5">
{colResources.map((r) => (
<li key={r}>
<a
href="#"
className="text-sm text-[#fffef6]/60 hover:text-[#9CCC8A] transition-colors flex items-center gap-1 group"
>
<a href="#" className="text-sm text-[#fffef6]/60 hover:text-[#9CCC8A] transition-colors inline-flex items-center gap-1 group">
{r}
<FiArrowUpRight size={11} className="opacity-0 group-hover:opacity-100 transition-opacity" />
</a>
@@ -93,23 +84,21 @@ export default function Footer() {
</ul>
</motion.div>
{/* Discover */}
{/* Nous découvrir */}
<motion.div
initial={{ opacity: 0, y: 24 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
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
</h4>
<ul className="space-y-3">
<ul className="space-y-2.5">
{colDiscover.map((d) => (
<li key={d}>
<a
href="#"
className="text-sm text-[#fffef6]/60 hover:text-[#9CCC8A] transition-colors flex items-center gap-1 group"
>
<a href="#" className="text-sm text-[#fffef6]/60 hover:text-[#9CCC8A] transition-colors inline-flex items-center gap-1 group">
{d}
<FiArrowUpRight size={11} className="opacity-0 group-hover:opacity-100 transition-opacity" />
</a>
@@ -118,19 +107,20 @@ export default function Footer() {
</ul>
</motion.div>
{/* Legal */}
{/* Informations légales */}
<motion.div
initial={{ opacity: 0, y: 24 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
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
</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) => (
<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">
{l}
</a>
@@ -146,7 +136,7 @@ export default function Footer() {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
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">
© 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 (
<section
className="relative py-0 bg-cover bg-center bg-fixed"
style={bgSrc ? { backgroundImage: `url(${bgSrc})` } : { backgroundColor: '#19392e' }}
>
<section className="relative py-0" style={!bgSrc ? { backgroundColor: '#19392e' } : {}}>
{/* Fond mobile (portrait) */}
{(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 */}
<div className="pointer-events-none absolute inset-0 bg-[#19392e]/70 backdrop-blur-[2px]" />
@@ -73,7 +84,7 @@ export default function GuideSection({ bgSrc }) {
</svg>
</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
initial={{ opacity: 0, y: 24 }}
@@ -82,7 +93,7 @@ export default function GuideSection({ bgSrc }) {
transition={{ duration: 0.5 }}
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é
</h2>
<p className="text-[#fffef6]/60 max-w-xl mx-auto">
@@ -90,7 +101,7 @@ export default function GuideSection({ bgSrc }) {
</p>
</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 */}
<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 (
<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 ? (
<video
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)
useEffect(() => {
@@ -90,10 +90,21 @@ export default function Hero({ bgSrc }) {
}, [])
return (
<section
className="relative bg-cover bg-center bg-fixed pt-28 pb-48"
style={bgSrc ? { backgroundImage: `url(${bgSrc})` } : {}}
>
<section className="relative pt-20 md:pt-28 pb-36 md:pb-48">
{/* Fond mobile (portrait) */}
{(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 */}
<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 }}
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é{' '}
<span className="relative inline-block">
<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 }}
animate={{ opacity: 1, x: 0 }}
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>
<p className="text-lg text-[#fffef6]/80 leading-relaxed mb-6">
@@ -159,16 +170,16 @@ export default function Hero({ bgSrc }) {
</ul>
{/* 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
whileHover={{ scale: 1.025 }}
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
<FiArrowRight />
</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
</button>
</div>
src/components/MutuelleCard.jsx
+2 -2
View File
@@ -139,10 +139,10 @@ export default function MutuelleCard({ mutuelle }) {
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-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 }}
>
Voir l'offre
<span className="hidden sm:inline">Voir l'offre</span>
<FiArrowRight />
</a>
</div>