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