updated compoennt file structure

components/pages/services/empty.tsx

@@ -0,0 +1,72 @@
+import { useTranslations } from "next-intl";
+import { motion } from "framer-motion";
+
+// Empty State Component
+export function EmptyServices() {
+  const t = useTranslations();
+  
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+      className="max-w-250 w-full mx-auto py-20"
+    >
+      <div className="bg-[#171616] bg-linear-to-br from-[#2a2a2a] to-black rounded-2xl p-10 md:p-16 text-center border border-gray-500">
+        <motion.div
+          initial={{ scale: 0 }}
+          animate={{ scale: 1 }}
+          transition={{ delay: 0.2, type: "spring", stiffness: 200 }}
+          className="mb-8"
+        >
+          <div className="w-24 h-24 mx-auto bg-red-500/10 rounded-full flex items-center justify-center">
+            <svg
+              className="w-12 h-12 text-red-500"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
+              />
+            </svg>
+          </div>
+        </motion.div>
+
+        <motion.h3
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.3 }}
+          className="text-2xl md:text-3xl font-bold text-white font-unbounded mb-4"
+        >
+          {t("operationalSystems.noData.title") || "Xizmatlar topilmadi"}
+        </motion.h3>
+
+        <motion.p
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.4 }}
+          className="text-gray-400 font-almarai text-base md:text-lg mb-8 max-w-md mx-auto"
+        >
+          {t("operationalSystems.noData.description") || "Hozircha hech qanday xizmat mavjud emas. Tez orada yangi xizmatlar qo'shiladi."}
+        </motion.p>
+
+        <motion.div
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.5 }}
+        >
+          <button
+            onClick={() => window.location.reload()}
+            className="font-almarai bg-red-600 hover:bg-red-700 text-white font-semibold py-3 px-8 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-red-500/50"
+          >
+            {t("operationalSystems.noData.empty") || "Qayta yuklash"}
+          </button>
+        </motion.div>
+      </div>
+    </motion.div>
+  );
+}

components/pages/services/index.ts

@@ -0,0 +1,3 @@
+export { ServiceBanner } from "./serviceBanner";
+export { ServiceFaq } from "./serviceFaq";
+export { ServicePageServices } from "./servicePageServices";

components/pages/services/loading.tsx

@@ -0,0 +1,45 @@
+import { motion } from "framer-motion";
+
+// Loading Skeleton Component
+function ServiceCardSkeleton() {
+  return (
+    <div className="animate-pulse space-y-4 py-6 px-8 rounded-xl bg-[#171616] bg-linear-to-br from-[#2a2a2a] to-black">
+      <div className="h-6 bg-[#171616] rounded w-3/4"></div>
+      <div className="h-4 bg-[#171616] rounded w-full"></div>
+      <div className="h-4 bg-[#171616] rounded w-5/6"></div>
+      <div className="h-8 bg-[#171616] rounded w-32"></div>
+    </div>
+  );
+}
+
+// Loading Component
+export function ServicesLoading() {
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      className="max-w-250 w-full mx-auto space-y-5"
+    >
+      {/* Top Cards Skeleton */}
+      <div className="flex sm:flex-row flex-col items-center gap-5">
+        <div className="sm:w-[55%] w-full">
+          <ServiceCardSkeleton />
+        </div>
+        <div className="sm:w-[45%] w-full">
+          <ServiceCardSkeleton />
+        </div>
+      </div>
+
+      {/* Bottom Cards Skeleton */}
+      <div className="flex sm:flex-row flex-col items-start justify-between gap-5">
+        <div className="sm:w-[40%] w-full">
+          <ServiceCardSkeleton />
+        </div>
+        <div className="sm:w-[60%] w-full space-y-5">
+          <ServiceCardSkeleton />
+          <div className="h-24 bg-[#171616] rounded-xl animate-pulse"></div>
+        </div>
+      </div>
+    </motion.div>
+  );
+}

components/pages/services/serviceBanner.tsx

@@ -0,0 +1,49 @@
+import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
+import { useTranslations } from "next-intl";
+
+export function ServiceBanner() {
+  const t = useTranslations();
+  return (
+    <section className="relative w-full h-[60vh] min-h-100 overflow-hidden pt-10">
+      {/* Background Image */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          backgroundImage: "url(/images/services/serviceBanner.jpg)",
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+        }}
+      />
+
+      {/* Gradient Overlay - Bottom-left to top-right */}
+      <div
+        className="absolute inset-0 z-10"
+        style={{
+          background: `linear-gradient(to right top, rgb(157 73 9) 0%, rgb(33 32 31 / 89%) 40%, rgba(30, 29, 28, 0.89) 100%)`,
+        }}
+      />
+
+      <div className="max-w-250 w-full mx-auto px-4">
+        <div className="relative z-20 h-full flex max-lg:flex-col items-start justify-between gap-5 pt-30">
+          <div className="spacw-y-4 ">
+            <div className="flex items-center gap-3">
+              <DotAnimatsiya />
+              <span className="font-almarai text-sm text-white font-semibold tracking-wide">
+                {t("services.banner.title")}
+              </span>
+            </div>
+            <p
+              className="font-unbounded uppercase bg-linear-to-br from-white via-white to-black
+  text-transparent bg-clip-text text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty"
+            >
+              {t("services.banner.subtitle")}
+            </p>
+          </div>
+          <div className="font-almarai lg:w-[40%] text-gray-300 mt-10 text-lg">
+            {t("services.banner.description")}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

components/pages/services/serviceFaq.tsx

@@ -0,0 +1,56 @@
+import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
+import FAQAccordion, { FAQItem } from "../faq/faqAccardion";
+import { useLocale, useTranslations } from "next-intl";
+
+export function ServiceFaq() {
+  const t = useTranslations();
+  const locale = useLocale();
+  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"),
+    },
+  ];
+  return (
+    <div className="bg-[#1e1d1c] py-20 pb-50 space-y-8">
+      {/* header */}
+      <div className="space-y-4 w-full ">
+        <div className="flex items-center gap-3 justify-center text-white text-xl">
+          <DotAnimatsiya /> {locale === "ru" ? "ФАК" : "FAQ"}
+        </div>
+        <h1
+          className="text-center bg-linear-to-br from-white via-white/50 to-black
+  text-transparent bg-clip-text text-3xl font-bold uppercase leading-tight sm:text-4xl md:text-5xl lg:text-6xl"
+        >
+          {t("faq.banner.topic")}
+        </h1>
+      </div>
+
+      {/* FAQ Section */}
+      <div className="md:col-span-2 max-w-6xl mx-auto w-full px-2">
+        <FAQAccordion items={faqItems} />
+      </div>
+    </div>
+  );
+}

components/pages/services/servicePageServices.tsx

@@ -0,0 +1,220 @@
+"use client";
+import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
+import httpClient from "@/request/api";
+import { endPoints } from "@/request/links";
+import { useQuery } from "@tanstack/react-query";
+import { ChevronRight } from "lucide-react";
+import { useLocale, useTranslations } from "next-intl";
+import Image from "next/image";
+import Link from "next/link";
+import { motion } from "framer-motion";
+import { ServicesLoading } from "./loading";
+import { EmptyServices } from "./empty";
+import { useServiceDetail } from "@/zustand/useService";
+import { cardVariants, containerVariants } from "@/lib/animations";
+
+export function ServicePageServices() {
+  const t = useTranslations();
+  const locale = useLocale();
+  const setServiceId = useServiceDetail((state) => state.setServiceId);
+
+  // get request
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["firesafety"],
+    queryFn: () => httpClient(endPoints.services.all),
+    select: (data) => {
+      const serviceData = data?.data?.data?.results;
+      return serviceData.reduce(
+        (resultArray: any, item: any, index: number) => {
+          const chunkIndex = Math.floor(index / 4);
+
+          if (!resultArray[chunkIndex]) {
+            resultArray[chunkIndex] = []; // Yangi chunk boshlash
+          }
+
+          resultArray[chunkIndex].push(item);
+
+          return resultArray;
+        },
+        [] as any[][],
+      );
+    },
+  });
+
+  return (
+    <div className="bg-[#1e1d1c] py-10 md:py-16 lg:py-20 mb-15">
+      <div className="max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Header for github */}
+        <motion.div
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          className="space-y-4 md:space-y-6"
+        >
+          <div className="font-almarai flex items-center justify-center gap-2 text-base sm:text-lg md:text-xl text-white font-bold">
+            <DotAnimatsiya />
+            {t("home.services.title")}
+          </div>
+          <h1 className="uppercase font-unbounded text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl tracking-wider lg:tracking-[5px] font-bold bg-linear-to-br from-white via-white to-gray-400 text-transparent bg-clip-text text-center w-full">
+            {t("home.services.subtitle")}
+          </h1>
+          <p className="font-almarai text-center text-sm sm:text-base md:text-lg text-gray-400 max-w-4xl mx-auto px-4">
+            {t("home.services.description")}
+          </p>
+        </motion.div>
+
+        {/* Conditional Rendering */}
+        {isLoading ? (
+          <div className="my-10">
+            <ServicesLoading />
+          </div>
+        ) : !data || (Array.isArray(data) && data.length === 0) ? (
+          <div className="my-10">
+            <EmptyServices />
+          </div>
+        ) : (
+          data.map((item: any, index: number) => (
+            <motion.div
+              key={index}
+              variants={containerVariants}
+              initial="hidden"
+              animate="visible"
+            >
+              {/* cards */}
+              <div className="max-w-250 w-full mx-auto overflow-hidden flex sm:flex-row flex-col items-center gap-3 my-4">
+                {item[0] && (
+                  <motion.div
+                    variants={cardVariants}
+                    className="sm:w-[55%] overflow-hidden w-full"
+                    onClick={() => setServiceId(item[0].id)}
+                  >
+                    <Link
+                      href={`/${locale}/services/detail`}
+                      className="overflow-hidden block hover:cursor-pointer relative space-y-4 py-6 px-8 rounded-xl w-full bg-[linear-gradient(to_bottom_right,#000000,#190b00,#542604,#8f4308)] hover:shadow-2xl hover:shadow-red-500/20 transition-all duration-300"
+                    >
+                      <p className="uppercase font-unbounded font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
+                        {item[0]?.title}
+                      </p>
+                      <p className="font-almarai text-gray-400 max-w-80 w-full">
+                        {item[0]?.subtitle}
+                      </p>
+                      <button className="font-almarai text-[#dc2626] font-semibold flex items-center gap-2 text-sm hover:gap-3 transition-all">
+                        {t("home.services.learnmore")}{" "}
+                        <ChevronRight size={20} />
+                      </button>
+                      <Image
+                        src={item[0]?.main_image}
+                        alt="images"
+                        width={200}
+                        height={100}
+                        className="object-contain sm:absolute bottom-0 -right-2 z-10"
+                      />
+                    </Link>
+                  </motion.div>
+                )}
+
+                {item[1] && (
+                  <Link
+                    href={`/${locale}/services/detail`}
+                    className="sm:w-[45%] w-full"
+                  >
+                    <motion.div
+                      onClick={() => setServiceId(item[1]?.id)}
+                      variants={cardVariants}
+                    >
+                      <div className="hover:cursor-pointer relative overflow-hidden space-y-4 py-6 px-8 rounded-xl w-full bg-[linear-gradient(to_bottom_right,#000000,#190b00,#542604,#8f4308)] hover:shadow-2xl hover:shadow-red-500/20 transition-all duration-300">
+                        <p className="uppercase font-unbounded font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
+                          {item[1]?.title}
+                        </p>
+                        <p className="font-almarai text-gray-400 max-w-70 w-full">
+                          {item[1]?.subtitle}
+                        </p>
+                        <button className="font-almarai text-[#dc2626] font-semibold flex items-center gap-2 text-sm hover:gap-3 transition-all">
+                          {t("home.services.learnmore")}{" "}
+                          <ChevronRight size={20} />
+                        </button>
+                        <Image
+                          src={item[1]?.main_image}
+                          alt="images"
+                          width={200}
+                          height={100}
+                          className="object-contain sm:absolute -bottom-4 -right-4 z-10"
+                        />
+                      </div>
+                    </motion.div>
+                  </Link>
+                )}
+              </div>
+
+              <div className="max-w-250 flex sm:flex-row flex-col items-start justify-between gap-3 w-full mx-auto">
+                {item[2] && (
+                  <motion.div
+                    variants={cardVariants}
+                    onClick={() => setServiceId(item[2]?.id)}
+                    className="sm:w-[40%] w-full -mt-5"
+                  >
+                    <Link
+                      href={`/${locale}/services/detail`}
+                      className="block hover:cursor-pointer relative rounded-xl w-full bg-[linear-gradient(to_bottom_right,#000000,#190b00,#542604,#8f4308)] hover:shadow-2xl hover:shadow-red-500/20 transition-all duration-300"
+                    >
+                      <Image
+                        src={item[2]?.main_image}
+                        alt="images"
+                        width={250}
+                        height={200}
+                        className="object-contain mt-5"
+                      />
+                      <div className="space-y-1 pb-3 px-5">
+                        <p className="uppercase font-unbounded font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
+                          {item[2]?.title}
+                        </p>
+                        <p className="font-almarai text-gray-400 max-w-80 w-full">
+                          {item[2]?.subtitle}
+                        </p>
+                        <button className="font-almarai text-[#dc2626] font-semibold flex items-center gap-2 text-sm hover:gap-3 transition-all">
+                          {t("home.services.learnmore")}{" "}
+                          <ChevronRight size={20} />
+                        </button>
+                      </div>
+                    </Link>
+                  </motion.div>
+                )}
+
+                <div className="sm:w-[60%] w-full">
+                  {item[3] && (
+                    <motion.div
+                      onClick={() => setServiceId(item[3]?.id)}
+                      variants={cardVariants}
+                    >
+                      <Link href={`/${locale}/services/detail`}>
+                        <div className="hover:cursor-pointer relative overflow-hidden space-y-4 py-6 px-8 rounded-xl w-full bg-[linear-gradient(to_bottom_right,#000000,#190b00,#542604,#8f4308)] hover:shadow-2xl hover:shadow-red-500/20 transition-all duration-300">
+                          <p className="uppercase font-unbounded font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
+                            {item[3]?.title}
+                          </p>
+                          <p className="font-almarai text-gray-400 max-w-70 w-full">
+                            {item[3]?.subtitle}
+                          </p>
+                          <button className="font-almarai sm:mt-40 mt-0 text-[#dc2626] font-semibold flex items-center gap-2 text-sm hover:gap-3 transition-all">
+                            {t("home.services.learnmore")}{" "}
+                            <ChevronRight size={20} />
+                          </button>
+                          <Image
+                            src={item[3]?.main_image}
+                            alt="images"
+                            width={200}
+                            height={100}
+                            className="object-contain sm:absolute -bottom-20 -right-4 max-sm:-mb-20 z-10"
+                          />
+                        </div>
+                      </Link>
+                    </motion.div>
+                  )}
+                </div>
+              </div>
+            </motion.div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}