file name and location updayed for better be

pages/faq/faqAccardion.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import * as Accordion from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+
+export interface FAQItem {
+  id: number;
+  question: string;
+  answer: string;
+}
+
+interface FAQAccordionProps {
+  items: FAQItem[];
+}
+
+export default function FAQAccordion({ items }: FAQAccordionProps) {
+  return (
+    <Accordion.Root type="single" collapsible className="w-full">
+      {items.map((item, index) => (
+        <Accordion.Item
+          key={item.id}
+          value={String(item.id)}
+          className="border-b border-slate-700 py-6"
+        >
+          <Accordion.Trigger className="group flex w-full items-center justify-between text-left">
+            <h3 className="font-almarai text-lg font-bold uppercase tracking-wide text-white transition-colors duration-300 group-hover:cursor-pointer md:text-xl">
+              {item.question}
+            </h3>
+            <div className="ml-4 shrink-0">
+              <ChevronDown
+                className="h-6 w-6 text-red-600 transition-transform duration-300 group-data-[state=open]:rotate-180"
+                aria-hidden="true"
+              />
+            </div>
+          </Accordion.Trigger>
+
+          <Accordion.Content className="overflow-hidden pt-4 text-gray-400 animate-in fade-in slide-in-from-top-2 duration-300 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:slide-out-to-top-2">
+            <p className="font-almarai leading-relaxed text-sm md:text-base">
+              {item.answer}
+            </p>
+          </Accordion.Content>
+        </Accordion.Item>
+      ))}
+    </Accordion.Root>
+  );
+}