faq , statistics , gallary parts connected to backend

components/pages/faq/faqAccardion.tsx

@@ -1,10 +1,10 @@
-'use client';
+"use client";
 
-import * as Accordion from '@radix-ui/react-accordion';
-import { ChevronDown } from 'lucide-react';
+import * as Accordion from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
 
-interface FAQItem {
-  id: string;
+export interface FAQItem {
+  id: number;
   question: string;
   answer: string;
 }
@@ -17,7 +17,11 @@ 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={item.id} className="border-b border-slate-700 py-6">
+        <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}
@@ -31,7 +35,9 @@ export default function FAQAccordion({ items }: FAQAccordionProps) {
           </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>
+            <p className="font-almarai leading-relaxed text-sm md:text-base">
+              {item.answer}
+            </p>
           </Accordion.Content>
         </Accordion.Item>
       ))}