maj designe

src/components/GuideSection.jsx

@@ -7,24 +7,24 @@ function FaqItem({ faq, index }) {
   const [open, setOpen] = useState(index === 0)
 
   return (
-    <div className="border border-slate-100 rounded-2xl overflow-hidden">
+    <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-slate-50 transition-colors"
+        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' : '#CBD5E1' }}
+          style={{ backgroundColor: open ? '#9CCC8A' : 'rgba(255,254,246,0.2)' }}
         >
           {index + 1}
         </span>
-        <span className="flex-1 font-bold text-slate-900 leading-snug">{faq.question}</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-slate-400'}`} />
+          <FiChevronDown className={`text-lg transition-colors ${open ? 'text-[#9CCC8A]' : 'text-[#fffef6]/40'}`} />
         </motion.div>
       </button>
 
@@ -36,9 +36,9 @@ function FaqItem({ faq, index }) {
             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">
+            <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-slate-500 leading-relaxed">
+                <p key={i} className="text-sm text-[#fffef6]/60 leading-relaxed">
                   {para}
                 </p>
               ))}
@@ -50,19 +50,45 @@ function FaqItem({ faq, index }) {
   )
 }
 
-export default function GuideSection() {
+export default function GuideSection({ bgSrc }) {
   return (
-    <section className="py-20 bg-white">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <section
+      className="relative py-0 bg-cover bg-center bg-fixed"
+      style={bgSrc ? { backgroundImage: `url(${bgSrc})` } : { backgroundColor: '#19392e' }}
+    >
+      {/* Overlay */}
+      <div className="pointer-events-none absolute inset-0 bg-[#19392e]/70 backdrop-blur-[2px]" />
 
-        <div className="text-center mb-14">
-          <h2 className="text-4xl font-extrabold text-slate-900 tracking-tight mb-4">
+      {/* 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-48 pb-48">
+
+        <motion.div
+          initial={{ opacity: 0, y: 24 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: false }}z
+          transition={{ duration: 0.5 }}
+          className="text-center mb-14"
+        >
+          <h2 className="text-4xl font-extrabold text-[#fffef6] tracking-tight mb-4">
             Tout savoir sur la mutuelle santé
           </h2>
-          <p className="text-slate-500 max-w-xl mx-auto">
+          <p className="text-[#fffef6]/60 max-w-xl mx-auto">
             Nos guides répondent à toutes vos questions pour faire le bon choix.
           </p>
-        </div>
+        </motion.div>
 
         <div className="grid lg:grid-cols-3 gap-12">
 
@@ -73,7 +99,7 @@ export default function GuideSection() {
                 key={i}
                 initial={{ opacity: 0, y: 12 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true }}
+                viewport={{ once: false }}
                 transition={{ delay: i * 0.07, duration: 0.4 }}
               >
                 <FaqItem faq={faq} index={i} />
@@ -86,43 +112,55 @@ export default function GuideSection() {
             <div className="sticky top-24 space-y-4">
 
               {/* Guides card */}
-              <div className="bg-slate-50 rounded-2xl border border-slate-100 p-6">
+              <motion.div
+                initial={{ opacity: 0, y: 24 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: false }}
+                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-slate-900">Tous nos guides</h3>
+                  <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-slate-600 hover:text-[#9CCC8A] transition-colors py-2 group"
+                        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-slate-300 group-hover:text-[#9CCC8A] transition-colors" />
+                        <FiChevronRight className="flex-shrink-0 mt-0.5 text-white/20 group-hover:text-[#9CCC8A] transition-colors" />
                         {guide}
                       </a>
                     </li>
                   ))}
                 </ul>
-              </div>
+              </motion.div>
 
               {/* CTA card */}
-              <div className="bg-gradient-to-br from-[#9CCC8A] to-[#74AB61] rounded-2xl p-6 text-white">
-                <div className="font-extrabold text-lg mb-2">
+              <motion.div
+                initial={{ opacity: 0, y: 24 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: false }}
+                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-white/70 text-sm mb-5 leading-relaxed">
+                <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-white text-[#74AB61] font-bold text-sm py-3 rounded-xl hover:bg-[#9CCC8A]/10 transition-colors"
+                  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>
-              </div>
+              </motion.div>
 
             </div>
           </div>