animation fixed in section

src/components/ui/FAQAccordion.tsx

@@ -1,8 +1,11 @@
 "use client";
 
 import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
 import { MaterialIcon } from "./MaterialIcon";
 
+const EASE = [0.22, 1, 0.36, 1] as [number, number, number, number];
+
 export type FAQItem = {
   question: string;
   answer: string;
@@ -31,25 +34,30 @@ export function FAQAccordion({ items }: FAQAccordionProps) {
             <span className="text-sm md:text-base font-black text-[#16001D] leading-snug">
               {item.question}
             </span>
-            <div
-              className={`flex-shrink-0 w-8 h-8 rounded-full bg-[#6330D6]/8 flex items-center justify-center text-[#6330D6] transition-transform duration-300 ${
-                openIndex === index ? "rotate-180" : ""
-              }`}
+            <motion.div
+              className="flex-shrink-0 w-8 h-8 rounded-full bg-[#6330D6]/8 flex items-center justify-center text-[#6330D6]"
+              animate={{ rotate: openIndex === index ? 180 : 0 }}
+              transition={{ duration: 0.3, ease: EASE }}
             >
               <MaterialIcon icon="expand_more" size={20} />
-            </div>
+            </motion.div>
           </button>
-          <div
-            className={`overflow-hidden transition-all duration-300 ease-in-out ${
-              openIndex === index
-                ? "max-h-[500px] opacity-100"
-                : "max-h-0 opacity-0"
-            }`}
-          >
-            <p className="px-6 pb-5 text-sm md:text-base text-[#5E5866] leading-relaxed border-t border-[#6330D6]/5 pt-4">
-              {item.answer}
-            </p>
-          </div>
+          <AnimatePresence initial={false}>
+            {openIndex === index && (
+              <motion.div
+                key="content"
+                initial={{ height: 0, opacity: 0 }}
+                animate={{ height: "auto", opacity: 1 }}
+                exit={{ height: 0, opacity: 0 }}
+                transition={{ duration: 0.3, ease: EASE }}
+                style={{ overflow: "hidden" }}
+              >
+                <p className="px-6 pb-5 text-sm md:text-base text-[#5E5866] leading-relaxed border-t border-[#6330D6]/5 pt-4">
+                  {item.answer}
+                </p>
+              </motion.div>
+            )}
+          </AnimatePresence>
         </div>
       ))}
     </div>