update privacy policy page

src/components/ui/FAQAccordion.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { useState } from "react";
+import { MaterialIcon } from "./MaterialIcon";
+
+export type FAQItem = {
+  question: string;
+  answer: string;
+};
+
+type FAQAccordionProps = {
+  items: FAQItem[];
+};
+
+export function FAQAccordion({ items }: FAQAccordionProps) {
+  const [openIndex, setOpenIndex] = useState<number | null>(null);
+
+  return (
+    <div className="space-y-3">
+      {items.map((item, index) => (
+        <div
+          key={index}
+          className="rounded-2xl border border-[#6330D6]/10 bg-white overflow-hidden shadow-[0_2px_12px_rgba(22,0,29,0.04)] transition-shadow hover:shadow-[0_4px_18px_rgba(22,0,29,0.07)]"
+        >
+          <button
+            type="button"
+            onClick={() => setOpenIndex(openIndex === index ? null : index)}
+            className="w-full flex items-center justify-between gap-4 px-6 py-5 text-left"
+            aria-expanded={openIndex === index}
+          >
+            <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" : ""
+              }`}
+            >
+              <MaterialIcon icon="expand_more" size={20} />
+            </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>
+        </div>
+      ))}
+    </div>
+  );
+}