file name and location updayed for better be

pages/home/statistics.tsx

@@ -0,0 +1,85 @@
+"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 = [
+    {
+      id: 1,
+      number: 25,
+      hint: "+",
+      description: t("home.statistics.experience"),
+    },
+    {
+      id: 2,
+      number: 450,
+      hint: "+",
+      description: t("home.statistics.projectsCompleted"),
+    },
+    {
+      id: 3,
+      number: 99,
+      hint: "+",
+      description: t("home.statistics.trainedSpecialists"),
+    },
+    {
+      id: 4,
+      number: 93,
+      hint: "%",
+      description: t("home.statistics.trustedClients"),
+    },
+  ];
+  const [stat, setStat] = useState<Statistics[]>(stats);
+
+  const { data } = 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">
+          {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"
+            >
+              {/* Number and Symbol */}
+              <div className="flex items-baseline gap-2 font-almarai">
+                <span className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white">
+                  <Counter countNum={Number(stat.number)} />
+                </span>
+                <span className="text-4xl sm:text-5xl lg:text-6xl font-bold text-red-600">
+                  {stat.hint}
+                </span>
+              </div>
+
+              {/* Label */}
+              <p className="font-almarai text-sm sm:text-base text-gray-300 mt-4 text-center font-medium">
+                {stat.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}