faq , statistics , gallary parts connected to backend

components/HomeMarquee.tsx

@@ -1,52 +1,47 @@
+"use client";
+import httpClient from "@/request/api";
+import { endPoints } from "@/request/links";
+import { useQuery } from "@tanstack/react-query";
 import Image from "next/image";
+import { useEffect, useState } from "react";
 import Marquee from "react-fast-marquee";
 
+const images = [
+  "/images/img2.webp",
+  "/images/img3.jpg",
+  "/images/img6.jpg",
+  "/images/img11.jpeg",
+  "/images/img12.png",
+];
+
 export default function HomeMarquee() {
+  const [marqImg, setMarqImg] = useState<string[]>(images);
+  const { data } = useQuery({
+    queryKey: ["gallery"],
+    queryFn: () => httpClient(endPoints.gallery),
+    select: (data) => {
+      const galary = data?.data?.results;
+      return galary.map((item: any) => item.image) || [];
+    },
+  });
+  useEffect(() => {
+    data && setMarqImg(data);
+  }, [data]);
   return (
     <div className="bg-[#1e1d1c] py-5">
       <Marquee>
-        <div className="relative sm:w-125 w-70 sm:h-62.5 h-40 mx-2 overflow-hidden rounded-xl">
-          <Image
-            src="/images/img2.webp"
-            alt="images"
-            fill
-            priority
-            className="object-cover"
-          />
-        </div>
-        <div className="relative sm:w-125 w-70 sm:h-62.5 h-40 mx-2 overflow-hidden rounded-xl">
-          <Image
-            src="/images/img3.jpg"
-            alt="images"
-            fill
-            className="object-cover"
-          />
-        </div>
-        <div className="relative sm:w-125 w-70 sm:h-62.5 h-40 mx-2 overflow-hidden rounded-xl">
-          <Image
-            src="/images/img6.jpg"
-            alt="images"
-            fill
-            className="object-cover"
-          />
-        </div>
-        <div className="relative sm:w-125 w-70 sm:h-62.5 h-40 mx-2 overflow-hidden rounded-xl">
-          <Image
-            src="/images/img11.jpeg"
-            alt="images"
-            fill
-            className="object-cover"
-          />
-        </div>
-        <div className="relative sm:w-125 w-70 sm:h-62.5 h-40 mx-2 overflow-hidden rounded-xl">
-          <Image
-            src="/images/img12.png"
-            alt="images"
-            fill
-            className="object-cover"
-          />
-        </div>
+        {marqImg.map((item) => (
+          <div className="relative sm:w-125 w-70 sm:h-62.5 h-40 mx-2 overflow-hidden rounded-xl">
+            <Image
+              src={item}
+              alt="images"
+              fill
+              priority
+              className="object-cover"
+            />
+          </div>
+        ))}
       </Marquee>
     </div>
   );
-}
+}

components/pages/faq/answearQuestions.tsx

@@ -1,37 +1,53 @@
+"use client";
 import Link from "next/link";
-import FAQAccordion from "./faqAccardion";
-import { faqItems } from "@/lib/demoData";
+import FAQAccordion, { FAQItem } from "./faqAccardion";
 import { useTranslations } from "next-intl";
+import { useQuery } from "@tanstack/react-query";
+import httpClient from "@/request/api";
+import { endPoints } from "@/request/links";
+import { useEffect, useState } from "react";
 
 export function Togle() {
   const t = useTranslations();
-    const faqItems = [
-      {
-        id: "faq-1",
-        question: t("faq.question1.question"),
-        answer: t("faq.question1.answer"),
-      },
-      {
-        id: "faq-2",
-        question: t("faq.question2.question"),
-        answer: t("faq.question2.answer"),
-      },
-      {
-        id: "faq-3",
-        question: t("faq.question3.question"),
-        answer: t("faq.question3.answer"),
-      },
-      {
-        id: "faq-4",
-        question: t("faq.question4.question"),
-        answer: t("faq.question4.answer"),
-      },
-      {
-        id: "faq-5",
-        question: t("faq.question5.question"),
-        answer: t("faq.question5.answer"),
-      },
-    ];
+  const faqItems: FAQItem[] = [
+    {
+      id: 1,
+      question: t("faq.question1.question"),
+      answer: t("faq.question1.answer"),
+    },
+    {
+      id: 2,
+      question: t("faq.question2.question"),
+      answer: t("faq.question2.answer"),
+    },
+    {
+      id: 3,
+      question: t("faq.question3.question"),
+      answer: t("faq.question3.answer"),
+    },
+    {
+      id: 4,
+      question: t("faq.question4.question"),
+      answer: t("faq.question4.answer"),
+    },
+    {
+      id: 5,
+      question: t("faq.question5.question"),
+      answer: t("faq.question5.answer"),
+    },
+  ];
+  const [faq, setFaq] = useState<any>(faqItems);
+
+  const { data } = useQuery({
+    queryKey: ["faq"],
+    queryFn: () => httpClient(endPoints.faq),
+    select: (data) => data?.data?.results,
+  });
+
+  useEffect(() => {
+    data && setFaq(data);
+  }, [data]);
+
   return (
     <div className="min-h-screen bg-[#1e1d1c]">
       <main className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
@@ -48,7 +64,7 @@ export function Togle() {
 
           {/* FAQ Section */}
           <div className="max-w-250 w-full">
-            <FAQAccordion items={faqItems} />
+            <FAQAccordion items={faq} />
           </div>
         </div>
         {/* ASK QUESTION */}

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>
       ))}

components/pages/home/statistics.tsx

@@ -1,36 +1,63 @@
+"use client";
 import { Counter } from "@/components/Counter";
+import httpClient from "@/request/api";
+import { endPoints } from "@/request/links";
+import { useQuery } from "@tanstack/react-query";
 import { useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
+
+interface Statistics {
+  id: number;
+  number: number;
+  hint: string;
+  description: string;
+}
 
 export function Statistics() {
   const t = useTranslations();
   const stats = [
     {
-      number: "25",
-      symbol: "+",
-      label: t("home.statistics.experience"),
+      id: 1,
+      number: 25,
+      hint: "+",
+      description: t("home.statistics.experience"),
     },
     {
-      number: "450",
-      symbol: "+",
-      label: t("home.statistics.projectsCompleted"),
+      id: 2,
+      number: 450,
+      hint: "+",
+      description: t("home.statistics.projectsCompleted"),
     },
     {
-      number: "99",
-      symbol: "+",
-      label: t("home.statistics.trainedSpecialists"),
+      id: 3,
+      number: 99,
+      hint: "+",
+      description: t("home.statistics.trainedSpecialists"),
     },
     {
-      number: "93",
-      symbol: "%",
-      label: t("home.statistics.trustedClients"),
+      id: 4,
+      number: 93,
+      hint: "%",
+      description: t("home.statistics.trustedClients"),
     },
   ];
+  const [stat, setStat] = useState<Statistics[]>(stats);
+
+  const { data, isLoading } = useQuery({
+    queryKey: ["statistics"],
+    queryFn: () => httpClient(endPoints.statistics),
+    select: (data) => data?.data?.results,
+  });
+
+  useEffect(() => {
+    data && setStat(data);
+  }, [data]);
 
   return (
     <section className="w-full bg-black">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="grid grid-cols-2 md:grid-cols-4 gap-8 lg:gap-12">
-          {stats.map((stat, index) => (
+          {stat.map((stat, index) => (
             <div
               key={index}
               className="flex flex-col items-center justify-center py-10 sm:py-20 lg:py-15 border-b-red-600 border-b"
@@ -41,13 +68,13 @@ export function Statistics() {
                   <Counter countNum={Number(stat.number)} />
                 </span>
                 <span className="text-4xl sm:text-5xl lg:text-6xl font-bold text-red-600">
-                  {stat.symbol}
+                  {stat.hint}
                 </span>
               </div>
 
               {/* Label */}
               <p className="font-almarai text-sm sm:text-base text-gray-300 mt-4 text-center font-medium">
-                {stat.label}
+                {stat.description}
               </p>
             </div>
           ))}

lib/demoData.ts

@@ -29,45 +29,6 @@ export const DATA = [
   },
 ];
 
-export const faqItems = [
-  {
-    id: "faq-1",
-    question: "How do I become a firefighter?",
-    answer:
-      "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel sit amet adipiscing sem neque.",
-  },
-  {
-    id: "faq-2",
-    question: "What equipment do firefighters use?",
-    answer:
-      "Firefighters use specialized equipment including protective gear, breathing apparatus, fire hoses, ladders, and various rescue tools. Each piece of equipment is designed to keep firefighters safe while they perform their duties. Our team is trained extensively on all equipment and safety protocols.",
-  },
-  {
-    id: "faq-3",
-    question: "Do firefighters only fight fires?",
-    answer:
-      "No, modern firefighters respond to a wide variety of emergencies including medical calls, vehicle accidents, hazardous material incidents, and rescue operations. They serve as first responders and are trained in emergency medical services to provide life-saving care to the community.",
-  },
-  {
-    id: "faq-4",
-    question: "What are the work hours for firefighters?",
-    answer:
-      "Firefighters typically work shifts that vary by department. Many operate on a schedule of 24 hours on duty followed by 48-72 hours off duty. This schedule allows for adequate rest and recovery while ensuring continuous emergency response coverage for the community.",
-  },
-  {
-    id: "faq-5",
-    question: "How long is firefighter training?",
-    answer:
-      "Initial firefighter training typically takes 12-18 weeks of full-time instruction at a fire academy. After this, firefighters continue receiving ongoing training throughout their careers. Our department invests heavily in continuous education to maintain the highest standards of service.",
-  },
-  {
-    id: "faq-6",
-    question: "What is required to apply for the firefighter position?",
-    answer:
-      "Candidates must be at least 18 years old, have a high school diploma or GED, possess a valid drivers license, and pass a background check and medical examination. Physical fitness is essential, and candidates must pass the Candidate Physical Ability Test (CPAT).",
-  },
-];
-
 export const ProductCatalog = [
   {
     id: "slt",