maj

2026-02-25 19:32:34 +01:00
parent 344ad83164
commit 338c249e49
14 changed files with 1789 additions and 96 deletions
@@ -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>
+  )
+}