184 lines
7.5 KiB
React
184 lines
7.5 KiB
React
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-white/10 rounded-2xl overflow-hidden bg-[#19392e]/80 backdrop-blur-sm">
|
|
<button
|
|
onClick={() => setOpen((v) => !v)}
|
|
className="w-full flex items-start gap-4 px-6 py-5 text-left hover:bg-white/5 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 ? '#9CCC8A' : 'rgba(255,254,246,0.2)' }}
|
|
>
|
|
{index + 1}
|
|
</span>
|
|
<span className="flex-1 font-bold text-[#fffef6] 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-[#9CCC8A]' : 'text-[#fffef6]/40'}`} />
|
|
</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-white/10 pt-4">
|
|
{faq.content.map((para, i) => (
|
|
<p key={i} className="text-sm text-[#fffef6]/60 leading-relaxed">
|
|
{para}
|
|
</p>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function GuideSection({ bgSrc, bgMobileSrc }) {
|
|
return (
|
|
<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]" />
|
|
|
|
{/* Wave ← ComparisonSection */}
|
|
<div className="absolute top-0 left-0 w-full overflow-hidden leading-[0] pointer-events-none">
|
|
<svg className="block w-full h-20 fill-white" viewBox="0 0 1200 120" preserveAspectRatio="none">
|
|
<path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" />
|
|
</svg>
|
|
</div>
|
|
|
|
{/* Wave → Footer */}
|
|
<div className="absolute bottom-0 left-0 w-full overflow-hidden leading-[0] pointer-events-none">
|
|
<svg className="block w-full h-20" viewBox="0 0 1200 120" preserveAspectRatio="none" style={{ fill: '#19392e', transform: 'scaleY(-1)' }}>
|
|
<path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" />
|
|
</svg>
|
|
</div>
|
|
|
|
<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 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5 }}
|
|
className="text-center mb-14"
|
|
>
|
|
<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">
|
|
Nos guides répondent à toutes vos questions pour faire le bon choix.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid lg:grid-cols-3 gap-6 lg: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 self-start">
|
|
<div className="sticky top-24 space-y-4">
|
|
|
|
{/* Guides card */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 24 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.45, delay: 0.1 }}
|
|
className="bg-[#19392e]/80 backdrop-blur-sm rounded-2xl border border-white/10 p-6"
|
|
>
|
|
<div className="flex items-center gap-2 mb-5">
|
|
<div className="w-8 h-8 bg-[#9CCC8A]/20 rounded-xl flex items-center justify-center">
|
|
<FiBookOpen className="text-[#9CCC8A] text-sm" />
|
|
</div>
|
|
<h3 className="font-bold text-[#fffef6]">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-[#fffef6]/70 hover:text-[#9CCC8A] transition-colors py-2 group"
|
|
>
|
|
<FiChevronRight className="flex-shrink-0 mt-0.5 text-white/20 group-hover:text-[#9CCC8A] transition-colors" />
|
|
{guide}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</motion.div>
|
|
|
|
{/* CTA card */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 24 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.45, delay: 0.2 }}
|
|
className="bg-[#19392e]/80 backdrop-blur-sm rounded-2xl border border-white/10 p-6"
|
|
>
|
|
<div className="font-extrabold text-lg mb-2 text-[#fffef6]">
|
|
Besoin d'un conseil personnalisé ?
|
|
</div>
|
|
<p className="text-[#fffef6]/60 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-[#9CCC8A] hover:bg-[#87BE73] text-black font-bold text-sm py-3 rounded-xl transition-colors"
|
|
>
|
|
📞 01 80 89 10 30
|
|
</a>
|
|
</motion.div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|