animasi 90%

src/components/contact/FAQSection.jsx

@@ -1,30 +1,41 @@
-import { useState, useEffect } from "react";
-import { useLocation } from "react-router-dom";
+"use client"
+
+import { useState, useEffect } from "react"
+import { useLocation } from "react-router-dom"
+import { motion, useAnimation } from "framer-motion"
+import { useInView } from "react-intersection-observer"
 
 const FAQ = () => {
-  const location = useLocation();
+  const location = useLocation()
+  const controls = useAnimation()
+  const [ref, inView] = useInView({
+    threshold: 0.1,
+    triggerOnce: false,
+  })
+
+  useEffect(() => {
+    if (inView) {
+      controls.start("visible")
+    } else {
+      controls.start("hidden")
+    }
+  }, [controls, inView])
 
   useEffect(() => {
     if (location.hash) {
-      const element = document.querySelector(location.hash);
+      const element = document.querySelector(location.hash)
       if (element) {
-        element.scrollIntoView({ behavior: "smooth" });
+        element.scrollIntoView({ behavior: "smooth" })
       }
     }
-  }, [location]);
-  // State untuk menyimpan indeks pertanyaan yang sedang dibuka
-  // Jika tidak ada pertanyaan yang terbuka, nilai adalah null
-  const [openQuestion, setOpenQuestion] = useState(null);
+  }, [location])
+
+  const [openQuestion, setOpenQuestion] = useState(null)
 
-  // Fungsi untuk membuka atau menutup pertanyaan berdasarkan indeks
-  // Jika pertanyaan yang sama diklik lagi, tutup pertanyaan tersebut
   const toggleQuestion = (index) => {
-    // Cek apakah pertanyaan yang sama diklik
-    // Jika iya, tutup (set openQuestion ke null), jika tidak, buka pertanyaan tersebut
-    setOpenQuestion(openQuestion === index ? null : index);
-  };
+    setOpenQuestion(openQuestion === index ? null : index)
+  }
 
-  // Data FAQ yang berisi array objek dengan pertanyaan dan jawaban
   const faqData = [
     {
       question: "Apa itu Rekan AI?",
@@ -119,11 +130,33 @@ const FAQ = () => {
         </p>
       ),
     },
-  ];
+  ]
+
+  // Animation variants for the container
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.5,
+      },
+    },
+  }
+
+  // Animation variants for each FAQ item
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 1,
+      },
+    },
+  }
 
   return (
-    <div className="text-[#212121] max-w-4xl mx-auto px-4 py-6 text-center " id="faq">
-      {/* Judul halaman FAQ */}
+    <div className="text-[#212121] max-w-4xl mx-auto px-4 py-6 text-center " id="faq" ref={ref}>
       <div className="mt-[111px]">
         <h1 className="text-[32px] font-[505] leading-[48px] tracking-[0.005em] text-center mb-4">
           Frequently Asked Questions
@@ -133,36 +166,38 @@ const FAQ = () => {
         </h2>
       </div>
 
-      {/* Bagian FAQ */}
-      <div className="space-y-[22px] mb-[110px] mt-[60px]">
+      <motion.div
+        className="space-y-[22px] mb-[110px] mt-[60px]"
+        variants={containerVariants}
+        initial="hidden"
+        animate={controls}
+      >
         {faqData.map((item, index) => (
-          <div
+          <motion.div
             key={index}
-            className="text-[20px] border border-[#5B59E8] p-[5px] rounded-[12px] overflow-hidden "
+            className="text-[20px] border border-[#5B59E8] p-[5px] rounded-[12px] overflow-hidden"
+            variants={itemVariants}
           >
-            {/* Bagian untuk menampilkan pertanyaan dan tanda buka/tutup */}
             <div
               className={`flex justify-between items-center cursor-pointer bg-white ml-4 ${
-                // Jika pertanyaan ini dibuka, beri highlight
                 openQuestion === index ? "text-blue-500" : ""
               }`}
-              onClick={() => toggleQuestion(index)} // Ketika pertanyaan diklik, panggil toggleQuestion
+              onClick={() => toggleQuestion(index)}
             >
               <span className="font-[550]">{item.question}</span>
-              <span className="text-[39px] text-[#845FF1] mr-4">{openQuestion === index ? "–" : "+"}</span> {/* Tampilkan tanda buka atau tutup */}
+              <span className="text-[39px] text-[#845FF1] mr-4">{openQuestion === index ? "–" : "+"}</span>
             </div>
 
-            {/* Bagian untuk menampilkan jawaban jika pertanyaan ini terbuka */}
             {openQuestion === index && (
               <div className="p-4 text-[16px] ml-4 text-left bg-white text-sm">
                 {item.answer}
               </div>
             )}
-          </div>
+          </motion.div>
         ))}
-      </div>
+      </motion.div>
     </div>
-  );
-};
+  )
+}
 
-export default FAQ;
+export default FAQ