payment not found

app/[locale]/about/baza/page.tsx

@@ -0,0 +1,10 @@
+import NormativBazaPage from "@/components/pages/about/aboutDetail/baza";
+import { Statistics } from "@/components/pages/home";
+
+export default function Baza() {
+  return (
+    <div>
+      <NormativBazaPage />
+    </div>
+  );
+}

app/[locale]/about/layout.tsx

@@ -0,0 +1,15 @@
+import { AboutBanner } from "@/components/pages/about";
+import React from "react";
+
+export default function AboutLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div>
+      <AboutBanner />
+      {children}
+    </div>
+  );
+}

app/[locale]/about/notePP/page.tsx

@@ -0,0 +1,20 @@
+import { useTranslations } from "next-intl";
+import { Guides } from "@/components/pages/about/aboutDetail/guides";
+
+export default function NotePPPage() {
+  const t = useTranslations();
+  return (
+    <main className="min-h-[30vh] bg-[#0f0e0d] pt-5 text-white pb-40">
+      <div className="bg-black sm:w-[95%] w-[98%] mx-auto p-5">
+        <h1
+          className="my-15 text-center font-unbounded uppercase bg-linear-to-br from-white via-white/70 to-black
+text-transparent bg-clip-text text-3xl font-bold sm:text-4xl"
+        >
+          {t("about.notePPPage.title")}
+        </h1>
+
+        <Guides />
+      </div>
+    </main>
+  );
+}

app/[locale]/about/page.tsx

@@ -1,10 +1,9 @@
-import { AboutBanner, Story, WhyChooseUs } from "@/components/pages/about";
+import { Story, WhyChooseUs } from "@/components/pages/about";
 import { Statistics } from "@/components/pages/home";
 
 export default function Page() {
   return (
     <div className="mb-0">
-      <AboutBanner />
       <Story />
       <Statistics/>
       <WhyChooseUs/>

app/[locale]/about/sertificate/page.tsx

@@ -0,0 +1,110 @@
+"use client";
+import { CertCardSkeleton } from "@/components/pages/about/aboutDetail/loading/loading";
+import { CertCard } from "@/components/pages/about/aboutDetail/sertificateCard";
+import PaginationLite from "@/components/paginationUI";
+import { certs } from "@/lib/demoData";
+import httpClient from "@/request/api";
+import { endPoints } from "@/request/links";
+import { useQuery } from "@tanstack/react-query";
+import { motion } from "framer-motion";
+import { Award } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+
+export default function SertificatePage() {
+  const t = useTranslations();
+  const [currentPage, setCurrentPage] = useState(1);
+  const { data, isLoading } = useQuery({
+    queryKey: ["sertificate"],
+    queryFn: () => httpClient(endPoints.sertificate),
+    select: (res) => ({
+      results: res.data?.data?.results,
+      current_page: res.data?.data?.current_page,
+      total_pages: res.data?.data?.total_pages,
+    }),
+  });
+
+  const generallydata = data?.results || certs;
+
+  return (
+    <main className="min-h-screen bg-[#0f0e0d] text-white pb-44 overflow-x-hidden">
+      {/* ── Hero ── */}
+      <section className="max-w-6xl mx-auto px-6 pt-14 pb-10">
+        <motion.span
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.5 }}
+          className="text-[11px] font-black uppercase tracking-[0.22em] text-red-600"
+        >
+          {t("about.certificatePage.hero.label")}
+        </motion.span>
+
+        <motion.h1
+          initial={{ opacity: 0, y: 24 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.05 } as any}
+          className="mt-3 text-5xl md:text-7xl font-black uppercase tracking-tight leading-[0.92]"
+        >
+          {t("about.certificatePage.hero.title1")}{" "}
+          <span className="text-red-600">
+            {t("about.certificatePage.hero.title2")}
+          </span>
+        </motion.h1>
+
+        <motion.p
+          initial={{ opacity: 0, y: 16 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.15 } as any}
+          className="mt-5 max-w-lg text-sm md:text-base text-gray-300 leading-relaxed"
+        >
+          {t("about.certificatePage.hero.description")}
+        </motion.p>
+
+        <motion.div
+          initial={{ scaleX: 0 }}
+          animate={{ scaleX: 1 }}
+          transition={{ delay: 0.3, duration: 0.7 } as any}
+          style={{ originX: 0 }}
+          className="mt-8 w-20 h-px bg-red-600"
+        />
+      </section>
+
+      {/* ── Count strip ── */}
+      <motion.div
+        initial={{ opacity: 0 }}
+        whileInView={{ opacity: 1 }}
+        transition={{ duration: 0.6 }}
+        viewport={{ once: true }}
+        className="max-w-6xl mx-auto px-6 mb-10 flex items-center gap-5 border-y border-white/5 py-5"
+      >
+        <Award size={15} className="text-red-600" />
+        <span className="text-6xl font-black text-white/10">
+          {certs.length}
+        </span>
+        <p className="text-sm text-gray-400 leading-relaxed max-w-xs">
+          {t("about.certificatePage.count.description")}
+        </p>
+      </motion.div>
+
+      {/* ── Cards ── */}
+      <section className="max-w-4xl mx-auto px-6 flex flex-col gap-4">
+        {isLoading ? (
+          <CertCardSkeleton />
+        ) : (
+          generallydata.map((c: any, i: number) => (
+            <CertCard key={c.id} c={c} i={i} />
+          ))
+        )}
+      </section>
+
+      {/*pagination*/}
+      {data?.total_pages > 1 && (
+        <PaginationLite
+          currentPage={currentPage}
+          totalPages={data?.total_pages}
+          onChange={setCurrentPage}
+        />
+      )}
+    </main>
+  );
+}

app/[locale]/catalog_page/products/[slug]/page.tsx

@@ -1,15 +1,14 @@
 "use client";
 
 import { Features, RightSide, SliderComp } from "@/components/pages/products";
-import { useProductPageInfo } from "@/store/useProduct";
+import { useProductPageInfo } from "@/zustand/useProduct";
 import { useQuery } from "@tanstack/react-query";
 import httpClient from "@/request/api";
 import { endPoints } from "@/request/links";
-import { AlertCircle } from "lucide-react";
 import { LoadingSkeleton } from "@/components/pages/products/slug/loading";
 import { EmptyState } from "@/components/pages/products/slug/empty";
-import { useEffect } from "react";
 import { Breadcrumb } from "@/components/breadCrumb";
+import { useSearchParams } from "next/dist/client/components/navigation";
 
 // Types
 interface ProductImage {
@@ -33,17 +32,14 @@ interface ProductDetail {
 }
 
 export default function SlugPage() {
-  const productZustand = useProductPageInfo((state) => state.product);
 
+  const productZustand = useProductPageInfo((state) => state.product);
   const { data: product, isLoading } = useQuery({
     queryKey: ["product", productZustand.id],
     queryFn: () => httpClient(endPoints.product.detail(productZustand.id)),
     select: (data) => data?.data?.data as ProductDetail,
-    enabled: !!productZustand.id,
   });
 
-  useEffect(() => console.log("product detail: ", product));
-
   // Loading State
   if (isLoading) {
     return <LoadingSkeleton />;
@@ -63,7 +59,7 @@ export default function SlugPage() {
   return (
     <div className="min-h-screen bg-[#1e1d1c] px-4 md:px-8 pb-35">
       <div className="max-w-7xl mx-auto">
-        <div className="pt-30 pb-10">
+        <div className="min-[400px]:pt-35 pt-45 pb-10">
           <Breadcrumb />
         </div>
         {/* Main Product Section */}

app/[locale]/catalog_page/products/page.tsx

@@ -1,17 +1,15 @@
 "use client";
 import { Breadcrumb } from "@/components/breadCrumb";
 import { ProductBanner, Products } from "@/components/pages/products";
-import FilterCatalog from "@/components/pages/products/filter/catalog/filterCatalog";
-import { useSubCategory } from "@/store/useSubCategory";
+import { useSubCategory } from "@/zustand/useSubCategory";
 
 export default function Page() {
   const subCategory = useSubCategory((state) => state.subCategory);
   return (
     <div className="bg-[#1e1d1c] pb-30">
       <ProductBanner />
-      {/* <FilterCatalog /> */}
-      <div className="max-w-300 w-full mx-auto pt-8">
-        <Breadcrumb customLabels={{ subCategory: subCategory.name}} />
+      <div className="max-w-300 w-full mx-auto pt-4">
+        <Breadcrumb customLabels={{ subCategory: subCategory.name }} />
       </div>
       <Products />
     </div>

app/[locale]/page.tsx

@@ -1,6 +1,9 @@
-import { redirect } from 'next/navigation'
-import React from 'react'
+
+import PaymentFailed from "@/components/pages/payment";
+import { redirect } from "next/navigation";
+import React from "react";
 
 export default function Page() {
-  return redirect('/home')
+  // return redirect('/home')
+  return <PaymentFailed />;
 }

app/[locale]/services/detail/loading.tsx

@@ -0,0 +1,5 @@
+import { InitialLoading } from "@/components/initialLoading/initialLoading";
+
+export default function Loading() {
+  return <InitialLoading />;
+}

app/[locale]/services/detail/page.tsx

@@ -2,26 +2,37 @@
 
 import Image from "next/image";
 import { motion } from "framer-motion";
-import { useEffect, useState } from "react";
 import { useTranslations } from "next-intl";
 import {
-  getOperationalSystems,
   SystemFeature,
 } from "@/lib/api/demoapi/operationalSystems";
 import { Breadcrumb } from "@/components/breadCrumb";
+import { useServiceDetail } from "@/zustand/useService";
+import { useQuery } from "@tanstack/react-query";
+import httpClient from "@/request/api";
+import { endPoints } from "@/request/links";
+import { cardVariants, containerVariants } from "@/lib/animations";
 
 export default function OperationalSystemsPage() {
   const t = useTranslations("operationalSystems");
-  const [data, setData] = useState<SystemFeature[] | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(false);
+  const serviceId = useServiceDetail((state) => state.serviceId);
+
+  const {
+    data,
+    isLoading: loading,
+    isError: error,
+  } = useQuery({
+    queryKey: ["firesafety", serviceId],
+    queryFn: () => httpClient(endPoints.services.detail(serviceId || 0)),
+    select: (data) => data?.data?.data,
+  });
 
   // Demo data - fallback ma'lumotlar
   const demoData: SystemFeature[] = [
     {
       id: "1",
       title: t("systems.sprinkler.title"),
-      shortDesc:t("systems.sprinkler.short-desc"),
+      shortDesc: t("systems.sprinkler.short-desc"),
       description: t("systems.sprinkler.description"),
       features: [
         t("systems.sprinkler.features.0"),
@@ -33,68 +44,6 @@ export default function OperationalSystemsPage() {
     },
   ];
 
-  const fetchData = async () => {
-    try {
-      setLoading(true);
-      setError(false);
-
-      const result = await getOperationalSystems();
-
-      // Agar backend ma'lumot qaytarsa
-      if (result && result.length > 0) {
-        setData(result);
-      } else {
-        // Backend bo'sh ma'lumot qaytarsa, demo ma'lumotlarni ishlatamiz
-        setData(demoData);
-      }
-    } catch (err) {
-      setError(true);
-      // Xatolik bo'lsa, demo ma'lumotlarni ishlatamiz
-      setData(demoData);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    fetchData();
-  }, []);
-
-  // Animation variants
-  const containerVariants = {
-    hidden: { opacity: 0 },
-    visible: {
-      opacity: 1,
-      transition: {
-        staggerChildren: 0.15,
-      },
-    },
-  };
-
-  const itemVariants = {
-    hidden: { opacity: 0, y: 30 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: {
-        duration: 0.6,
-        ease: [0.22, 1, 0.36, 1] as const,
-      },
-    },
-  };
-
-  const cardVariants = {
-    hidden: { opacity: 0, scale: 0.95 },
-    visible: {
-      opacity: 1,
-      scale: 1,
-      transition: {
-        duration: 0.5,
-        ease: [0.22, 1, 0.36, 1] as const,
-      },
-    },
-  };
-
   // Loading state
   if (loading) {
     return (
@@ -128,14 +77,6 @@ export default function OperationalSystemsPage() {
         >
           <div className="text-7xl">⚠️</div>
           <p className="text-white text-xl font-medium">{t("error")}</p>
-          <motion.button
-            whileHover={{ scale: 1.05 }}
-            whileTap={{ scale: 0.95 }}
-            onClick={fetchData}
-            className="px-6 py-3 bg-red-500 text-white rounded-lg font-medium hover:bg-red-600 transition-colors"
-          >
-            {t("retry")}
-          </motion.button>
         </motion.div>
       </div>
     );
@@ -143,43 +84,12 @@ export default function OperationalSystemsPage() {
 
   return (
     <div className="pt-20 md:pt-30 pb-35 max-w-6xl mx-auto w-full px-4">
-      {/* Header */}
-      {/* <motion.div
-        variants={containerVariants}
-        initial="hidden"
-        animate="visible"
-        className="flex md:flex-row flex-col items-start justify-between gap-6 md:gap-8 w-full mb-16 md:mb-24"
-      >
-        <motion.div variants={itemVariants} className="space-y-4 md:space-y-8 flex-1">
-          <h1 className="bg-linear-to-br from-white via-white to-gray-400 text-transparent bg-clip-text text-3xl md:text-4xl lg:text-5xl font-semibold font-almarai">
-            {t('title')}
-          </h1>
-          <p className="text-white font-medium font-unbounded text-base sm:text-lg md:text-xl max-w-2xl leading-relaxed">
-            {t('subtitle')}
-          </p>
-        </motion.div>
-        
-        <motion.div
-          variants={itemVariants}
-          whileHover={{ scale: 1.05, rotate: 3 }}
-          transition={{ type: "spring", stiffness: 300, damping: 20 }}
-          className="shrink-0 relative"
-        >
-          <Image
-            src="/images/home/redShlang.png"
-            alt="Fire hose"
-            fill
-            priority
-            className="w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 lg:w-52 lg:h-52 object-contain"
-          />
-        </motion.div>
-      </motion.div> */}
       <div className="mb-5">
         <Breadcrumb />
       </div>
 
       {/* Main Content */}
-      {!data || data.length === 0 ? (
+      {!data || data.legth === 0 ? (
         <motion.div
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
@@ -194,85 +104,59 @@ export default function OperationalSystemsPage() {
           animate="visible"
           className="space-y-12 md:space-y-20"
         >
-          {data.map((system, index) => (
+          <motion.div
+            variants={cardVariants}
+            whileHover={{ y: -8 }}
+            className={`flex flex-col gap-8 md:gap-12 items-center`}
+          >
+            {/* Image Section */}
             <motion.div
-              key={system.id}
-              variants={cardVariants}
-              whileHover={{ y: -8 }}
-              className={`flex flex-col gap-8 md:gap-12 items-center`}
+              whileHover={{ scale: 1.03 }}
+              transition={{ duration: 0.3 }}
+              className="w-full relative h-64 md:h-80 lg:h-96 rounded-xl overflow-hidden"
             >
-              {/* Image Section */}
-              <motion.div
-                whileHover={{ scale: 1.03 }}
-                transition={{ duration: 0.3 }}
-                className="w-full relative h-64 md:h-80 lg:h-96 rounded-xl overflow-hidden"
-              >
-                <Image
-                  src={system.image}
-                  alt={system.title}
-                  fill
-                  className="object-cover w-full h-auto"
-                />
-                <div className="absolute inset-0 bg-linear-to-t from-black/10 to-transparent" />
-              </motion.div>
-
-              {/* Content Section */}
-              <div className="w-full space-y-6">
-                <motion.h2
-                  initial={{ opacity: 0, x: index % 2 === 0 ? -20 : 20 }}
-                  whileInView={{ opacity: 1, x: 0 }}
-                  viewport={{ once: true }}
-                  transition={{ duration: 0.6 }}
-                  className="text-2xl md:text-3xl lg:text-4xl font-bold text-white font-almarai"
-                >
-                  {system.title}
-                </motion.h2>
-
-                <motion.p
-                  initial={{ opacity: 0, x: index % 2 === 0 ? -20 : 20 }}
-                  whileInView={{ opacity: 1, x: 0 }}
-                  viewport={{ once: true }}
-                  transition={{ duration: 0.6, delay: 0.1 }}
-                  className="text-gray-300 text-sm md:text-base leading-relaxed font-unbounded"
-                >
-                  {system.shortDesc}
-                </motion.p>
-
-                <motion.p
-                  initial={{ opacity: 0, x: index % 2 === 0 ? -20 : 20 }}
-                  whileInView={{ opacity: 1, x: 0 }}
-                  viewport={{ once: true }}
-                  transition={{ duration: 0.6, delay: 0.1 }}
-                  className="text-gray-300 text-sm md:text-base leading-relaxed font-unbounded"
-                >
-                  {system.description}
-                </motion.p>
-
-                <div className="space-y-4">
-
-                  <ul className="space-y-3">
-                    {system.features.map((feature, featureIndex) => (
-                      <motion.li
-                        key={featureIndex}
-                        initial={{ opacity: 0, x: index % 2 === 0 ? -20 : 20 }}
-                        whileInView={{ opacity: 1, x: 0 }}
-                        viewport={{ once: true }}
-                        transition={{
-                          duration: 0.5,
-                          delay: 0.3 + featureIndex * 0.1,
-                        }}
-                        className="flex items-start gap-3 text-gray-300"
-                      >
-                        <span className="text-sm md:text-base font-unbounded">
-                          {feature}
-                        </span>
-                      </motion.li>
-                    ))}
-                  </ul>
-                </div>
-              </div>
+              <Image
+                src={data?.detail_image}
+                alt={data.title}
+                fill
+                className="object-cover w-full h-auto"
+              />
+              <div className="absolute inset-0 bg-linear-to-t from-black/10 to-transparent" />
             </motion.div>
-          ))}
+
+            {/* Content Section */}
+            <div className="w-full space-y-6">
+              <motion.h2
+                initial={{ opacity: 0, x: data?.id % 2 === 0 ? -20 : 20 }}
+                whileInView={{ opacity: 1, x: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6 }}
+                className="text-2xl md:text-3xl lg:text-4xl font-bold text-white font-almarai"
+              >
+                {data.title}
+              </motion.h2>
+
+              <motion.p
+                initial={{ opacity: 0, x: data?.id % 2 === 0 ? -20 : 20 }}
+                whileInView={{ opacity: 1, x: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.1 }}
+                className="text-gray-300 text-sm md:text-base leading-relaxed font-unbounded"
+              >
+                {data.subtitle}
+              </motion.p>
+
+              <motion.p
+                initial={{ opacity: 0, x: data?.id % 2 === 0 ? -20 : 20 }}
+                whileInView={{ opacity: 1, x: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.1 }}
+                className="text-gray-300 text-sm md:text-base leading-relaxed font-unbounded"
+              >
+                {data?.description}
+              </motion.p>
+            </div>
+          </motion.div>
         </motion.div>
       )}
     </div>

app/[locale]/services/loading.tsx

@@ -0,0 +1,5 @@
+import { InitialLoading } from "@/components/initialLoading/initialLoading";
+
+export default function Loading() {
+  return <InitialLoading />;
+}

app/[locale]/services/page.tsx

@@ -1,11 +1,15 @@
-import { OurService, Video } from "@/components/pages/home";
-import { ServiceBanner, ServiceFaq } from "@/components/pages/services";
+import { Video } from "@/components/pages/home";
+import {
+  ServiceBanner,
+  ServiceFaq,
+  ServicePageServices,
+} from "@/components/pages/services";
 
 export default function Page() {
   return (
     <div className="">
       <ServiceBanner />
-      <OurService />
+      <ServicePageServices />
       <Video />
       <ServiceFaq />
     </div>

app/layout.tsx

@@ -18,6 +18,32 @@ const geistMono = Geist_Mono({
   subsets: ["latin"],
 });
 
+// openGraphData tipini aniq belgilaymiz
+const openGraphData: Record<
+  "uz" | "ru" | "en",
+  { title: string; description: string; locale: string }
+> = {
+  uz: {
+    title: "Ignum Technologies - Professional Fire Safety Systems",
+    description:
+      "Tijorat va uy-joy ob’ektlari uchun yong‘in aniqlash, bostirish va signalizatsiya tizimlarini o‘z ichiga olgan to‘liq yong‘in himoyasi yechimlari.",
+    locale: "uz_UZ",
+  },
+  ru: {
+    title:
+      "Ignum Technologies - Профессиональные системы пожарной безопасности",
+    description:
+      "Полные решения по пожарной защите, включая системы обнаружения, тушения и сигнализации для коммерческих и жилых объектов.",
+    locale: "ru_RU",
+  },
+  en: {
+    title: "Ignum Technologies - Professional Fire Safety Systems",
+    description:
+      "Comprehensive fire protection solutions including detection, suppression, and alarm systems for commercial and residential properties.",
+    locale: "en_US",
+  },
+};
+
 export const metadata: Metadata = {
   title: {
     default: "Ignum Technologies - Fire Safety Systems Installation & Sales",
@@ -39,99 +65,62 @@ export const metadata: Metadata = {
   authors: [{ name: "Ignum Technologies" }],
   creator: "Ignum Technologies",
   publisher: "Ignum Technologies",
-  formatDetection: {
-    email: false,
-    address: false,
-    telephone: false,
-  },
-  metadataBase: new URL("https://ignum-tech.com"), // O'zingizning domen manzilingizni kiriting for gitea
-  alternates: {
-    canonical: "/",
-  },
-  openGraph: {
-    type: "website",
-    locale: "uz_UZ",
-    url: "https://ignum-tech.com",
-    siteName: "Ignum Technologies",
-    title: "Ignum Technologies - Professional Fire Safety Systems",
-    description:
-      "Leading provider of fire safety systems installation and sales. Comprehensive fire protection solutions including detection, suppression, and alarm systems for commercial and residential properties.",
-    images: [
-      {
-        url: "/og-image.jpg", // 1200x630 o'lchamda rasm qo'shing
-        width: 1200,
-        height: 630,
-        alt: "Ignum Technologies - Fire Safety Systems",
-      },
-      {
-        url: "/og-image-square.jpg", // 1200x1200 o'lchamda rasm qo'shing
-        width: 1200,
-        height: 1200,
-        alt: "Ignum Technologies Logo",
-      },
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",
-    title: "Ignum Technologies - Fire Safety Systems Installation & Sales",
-    description:
-      "Professional fire safety systems installation and sales. Protect your property with certified fire detection, suppression, and alarm solutions.",
-    images: ["/twitter-image.jpg"], // 1200x600 o'lchamda rasm qo'shing
-    creator: "@ignumtech", // Twitter username-ingizni kiriting
-  },
-  robots: {
-    index: true,
-    follow: true,
-    googleBot: {
-      index: true,
-      follow: true,
-      "max-video-preview": -1,
-      "max-image-preview": "large",
-      "max-snippet": -1,
-    },
-  },
+  formatDetection: { email: false, address: false, telephone: false },
+  metadataBase: new URL("https://ignum-tech.com"),
+  alternates: { canonical: "/" },
   icons: {
     icon: [
-      {
-        url: "/icon-light-32x32.png",
-        media: "(prefers-color-scheme: light)",
-      },
-      {
-        url: "/icon-dark-32x32.png",
-        media: "(prefers-color-scheme: dark)",
-      },
-      {
-        url: "/icon.svg",
-        type: "image/svg+xml",
-      },
+      { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)" },
+      { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)" },
+      { url: "/icon.svg", type: "image/svg+xml" },
     ],
     apple: "/apple-icon.png",
   },
-  verification: {
-    google: "your-google-verification-code", // Google Search Console verification kodi
-    // yandex: "your-yandex-verification-code", // Agar kerak bo'lsa
-  },
+  verification: { google: "your-google-verification-code" },
 };
 
 export default async function RootLayout({
   children,
   params,
-}: Readonly<{
-  children: React.ReactNode;
-  params: any;
-}>) {
+}: Readonly<{ children: React.ReactNode; params: any }>) {
   const { locale } = await params;
   const messages: any = await getMessages();
 
+  // Locale ga mos Open Graph ma'lumotini tanlaymiz
+  const og = openGraphData[locale as "uz" | "ru" | "en"] || openGraphData["uz"];
+
   return (
     <html lang={locale} suppressHydrationWarning>
       <head>
-        {/* Qo'shimcha SEO elementlar */}
         <link rel="manifest" href="/manifest.json" />
         <meta name="theme-color" content="#FF4500" />
         <meta name="apple-mobile-web-app-capable" content="yes" />
         <meta name="apple-mobile-web-app-status-bar-style" content="default" />
         <meta name="apple-mobile-web-app-title" content="Ignum Tech" />
+
+        {/* Open Graph */}
+        <meta property="og:type" content="website" />
+        <meta property="og:locale" content={og.locale} />
+        <meta property="og:url" content="https://ignum-tech.com" />
+        <meta property="og:site_name" content="Ignum Technologies" />
+        <meta property="og:title" content={og.title} />
+        <meta property="og:description" content={og.description} />
+        <meta property="og:image" content="/og-image.jpg" />
+        <meta property="og:image:width" content="1200" />
+        <meta property="og:image:height" content="630" />
+        <meta
+          property="og:image:alt"
+          content="Ignum Technologies - Fire Safety Systems"
+        />
+
+        {/* Twitter */}
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:title" content={og.title} />
+        <meta name="twitter:description" content={og.description} />
+        <meta name="twitter:image" content="/twitter-image.jpg" />
+        <meta name="twitter:creator" content="@ignumtech" />
+
+        {/* Yandex Metrika */}
         <Script
           id="yandex-metrika"
           strategy="afterInteractive"
@@ -166,10 +155,11 @@ export default async function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        <InitialLoading />
+        {/* <InitialLoading />
         <NextIntlClientProvider messages={messages} locale={locale}>
           <Providers>{children}</Providers>
-        </NextIntlClientProvider>
+        </NextIntlClientProvider> */}
+        {children}
       </body>
     </html>
   );

app/page.tsx

@@ -1,5 +1,8 @@
+
+import PaymentFailed from "@/components/pages/payment";
 import { redirect } from "next/navigation";
 
 export default function Home() {
-  return redirect('/uz/home')
+  // return redirect('/uz/home')
+  return <PaymentFailed />;
 }

components/breadCrumb.tsx

@@ -3,9 +3,9 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { ChevronRight, Home } from "lucide-react";
 import { useTranslations } from "next-intl";
-import { useCategory } from "@/store/useCategory";
-import { useSubCategory } from "@/store/useSubCategory";
-import { useProductPageInfo } from "@/store/useProduct";
+import { useCategory } from "@/zustand/useCategory";
+import { useSubCategory } from "@/zustand/useSubCategory";
+import { useProductPageInfo } from "@/zustand/useProduct";
 
 interface BreadcrumbProps {
   customLabels?: Record<string, string>;
@@ -21,7 +21,6 @@ export function Breadcrumb({
   const category = useCategory((state) => state.category);
   const subCategory = useSubCategory((state) => state.subCategory);
   const product = useProductPageInfo((state) => state.product);
-  console.log("sub category: ", subCategory);
 
   // Pathdan segments olish
   const segments = pathname.split("/").filter((segment) => segment !== "");
@@ -162,28 +161,28 @@ export function Breadcrumb({
             className="flex items-center gap-2"
           >
             {index > 0 && (
-              <ChevronRight className="w-4 h-4 text-gray-400 dark:text-gray-600" />
+              <ChevronRight className="w-4 h-4 text-gray-200" />
             )}
 
             {index === 0 ? (
               // Home link with icon
               <Link
                 href={item.href}
-                className="flex items-center gap-1.5 text-gray-600 hover:text-red-600 dark:text-gray-400 dark:hover:text-red-500 transition-colors duration-200"
+                className="flex items-center gap-1.5 text-gray-200 hover:text-red-600 transition-colors duration-200"
               >
                 <Home className="w-4 h-4" />
                 <span className="hidden sm:inline">{item.label}</span>
               </Link>
             ) : item.isLast ? (
               // Last item (current page)
-              <span className="text-gray-900 dark:text-white font-medium line-clamp-1">
+              <span className=" text-gray-200 font-medium line-clamp-1">
                 {item.label}
               </span>
             ) : (
               // Regular link
               <Link
                 href={item.href}
-                className="text-gray-600 hover:text-red-600 dark:text-gray-400 dark:hover:text-red-500 transition-colors duration-200 line-clamp-1"
+                className="text-gray-200 hover:text-red-600 transition-colors duration-200 line-clamp-1"
               >
                 {item.label}
               </Link>

components/languageSwitcher.tsx

@@ -5,10 +5,12 @@ import { useRouter, usePathname } from "next/navigation";
 import { Check, ChevronDown, Globe } from "lucide-react";
 import { locales, localeFlags, localeNames, type Locale } from "@/i18n/config";
 import { useLocale } from "next-intl";
+import { useQueryClient } from "@tanstack/react-query";
 
 export default function LanguageSelectRadix() {
   const router = useRouter();
   const pathname = usePathname();
+  const queryClient = useQueryClient();
   const currentLocale = useLocale() as Locale;
   const [isPending, startTransition] = useTransition();
   const [isOpen, setIsOpen] = useState(false);
@@ -46,6 +48,9 @@ export default function LanguageSelectRadix() {
       }, 100); // Small delay ensures navigation completes
     });
 
+    setTimeout(() => {
+      queryClient.invalidateQueries({ queryKey: [newLocale] });
+    }, 200);
     setIsOpen(false);
   };
 
@@ -55,7 +60,7 @@ export default function LanguageSelectRadix() {
       <button
         onClick={() => setIsOpen(!isOpen)}
         disabled={isPending}
-        className="inline-flex items-center justify-between gap-2 px-2 py-1 border border-gray-300 hover:border-red-600 
+        className="inline-flex items-center justify-between gap-2 px-2 py-1 border border-gray-300 hover:border-red-600
         rounded-lg text-white text-sm font-medium shadow-sm hover:bg-red-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
         aria-label="Tilni tanlash"
         aria-expanded={isOpen}

components/layout/footer.tsx

@@ -63,7 +63,6 @@ export function Footer() {
     if (email) {
       // Telefon raqamni tozalash (faqat raqamlar)
       const cleanPhone = email.replace(/\D/g, "");
-      console.log("without 998: ", cleanPhone.slice(3));
       formRequest.mutate({ number: Number(cleanPhone.slice(3)) });
     }
   };
@@ -239,11 +238,11 @@ export function Footer() {
       </div>
 
       {/* Copyright Section */}
-      <div className="border-t border-gray-800 px-4 py-8">
+      <div className="border-t border-gray-800 px-4 py-6">
         <div className="mx-auto max-w-6xl">
-          <div className="font-almarai flex flex-col justify-between gap-4 text-lg text-gray-400 md:flex-row md:items-center">
+          <div className="font-almarai flex flex-col justify-end items-end w-full gap-4 text-lg text-gray-400 md:flex-row md:items-center">
             {locale === "uz" ? (
-              <div className="flex gap-2 ">
+              <div className="flex gap-2 w-full justify-center items-end ">
                 <a
                   href="http://felix-its.uz/"
                   className="hover:text-red-600 hover:cursor-pointer text-blue-300 underline"
@@ -253,7 +252,7 @@ export function Footer() {
                 <p>- Jamoasi tomonidan ishlab chiqilgan</p>
               </div>
             ) : (
-              <div className="flex gap-2">
+              <div className="flex w-full justify-center items-end gap-2">
                 {locale === "ru" ? <p>Разработано -</p> : <p>Created by - </p>}
                 <a
                   href="http://felix-its.uz/"

components/layout/navbar.tsx

@@ -5,6 +5,17 @@ import { ChevronDown, Phone, Menu, X } from "lucide-react";
 import Image from "next/image";
 import LanguageSelectRadix from "../languageSwitcher";
 import { useLocale, useTranslations } from "next-intl";
+import UpHeader from "./upHeader";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import { useQuery } from "@tanstack/react-query";
+import httpClient from "@/request/api";
+import { endPoints } from "@/request/links";
+import { NavbarItem } from "@/lib/types";
 
 export function Navbar() {
   const locale = useLocale();
@@ -12,6 +23,16 @@ export function Navbar() {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [scrolled, setScrolled] = useState(false);
 
+  const { data: navbarItems } = useQuery({
+    queryKey: ["navbaritem",locale],
+    queryFn: () => httpClient(endPoints.navbar),
+    select: (data: any) => ({
+      results: data?.data?.data?.results,
+      total_items: data?.data?.data?.total_items,
+      total_pages: data?.data?.data?.total_pages,
+    }),
+  });
+
   useEffect(() => {
     const handleScroll = () => {
       setScrolled(window.scrollY > 50);
@@ -34,6 +55,16 @@ export function Navbar() {
       <nav
         className={`fixed top-0 left-0 right-0 z-50 border-b border-gray-400/50 ${scrolled && "bg-black"} transition`}
       >
+        <div
+          className={`overflow-hidden transition-all duration-500 ease-in-out ${
+            scrolled
+              ? "max-h-0 opacity-0 -translate-y-2"
+              : "max-h-20 opacity-100 translate-y-0"
+          }`}
+          style={{ transform: scrolled ? "translateY(-8px)" : "translateY(0)" }}
+        >
+          <UpHeader />
+        </div>
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between items-center h-20">
             {/* Logo */}
@@ -52,44 +83,45 @@ export function Navbar() {
 
             {/* Desktop Navigation Menu */}
             <div className="hidden h-full lg:flex items-center gap-8">
-              <Link
-                href={`/${locale}/home`}
-                className="font-unbounded uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
-              >
-                {t("navbar.home")}
-              </Link>
-              <Link
-                href={`/${locale}/about`}
-                className="font-unbounded uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
-              >
-                {t("navbar.about")}
-              </Link>
-
-              <Link
-                href={`/${locale}/faq`}
-                className="font-unbounded uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
-              >
-                {t("navbar.faq")}
-              </Link>
-              <Link
-                href={`/${locale}/services`}
-                className="font-unbounded uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
-              >
-                {t("navbar.services")}
-              </Link>
-
-              <Link
-                href={`/${locale}/catalog_page`}
-                className="font-unbounded uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
-              >
-                {t("navbar.products")}
-              </Link>
-              <Link
-                href={`/${locale}/contact`}
-                className="font-unbounded uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
-              >
-                {t("navbar.contact")}
-              </Link>
+              {navbarItems?.results ? (
+                navbarItems.results.map((item: NavbarItem) => (
+                  <DropdownMenu key={item.id}>
+                    <DropdownMenuTrigger asChild>
+                      <Link
+                        key={item.id}
+                        href={`/${locale}/${item.url}`}
+                        className="font-unbounded uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
+                      >
+                        {item.name}
+                        {item.children.length > 0 && (
+                          <ChevronDown size={12} className="ml-1" />
+                        )}
+                      </Link>
+                    </DropdownMenuTrigger>
+                    {item.children.length > 0 && (
+                      <DropdownMenuContent className="space-y-2">
+                        {item.children.map((child: NavbarItem) => (
+                          <DropdownMenuItem asChild key={child.id}>
+                            <Link
+                              href={`/${locale}/${child.url}`}
+                              className="font-unbounded uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
+                            >
+                              {child.name}
+                            </Link>
+                          </DropdownMenuItem>
+                        ))}
+                      </DropdownMenuContent>
+                    )}
+                  </DropdownMenu>
+                ))
+              ) : (
+                <Link
+                  href={`/${locale}/home`}
+                  className="font-unbounded uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
+                >
+                  {t("navbar.home")}
+                </Link>
+              )}
             </div>
 
             <div className="flex items-center gap-5">
@@ -166,51 +198,44 @@ export function Navbar() {
 
         {/* Mobile Menu Links */}
         <div className="flex flex-col p-6 gap-4">
-          <Link
-            href={`/${locale}/home`}
-            className="font-unbounded uppercase text-white text-base font-semibold hover:text-red-500 transition py-2"
-            onClick={() => setIsMobileMenuOpen(false)}
-          >
-            {t("navbar.home")}
-          </Link>
-          <Link
-            href={`/${locale}/about`}
-            className="font-unbounded uppercase text-white text-base font-semibold hover:text-red-500 transition py-2"
-            onClick={() => setIsMobileMenuOpen(false)}
-          >
-            {t("navbar.about")}
-          </Link>
-
-          {/* Mobile Pages Dropdown */}
-          <Link
-            href={`/${locale}/faq`}
-            className="font-unbounded uppercase text-white text-base font-semibold hover:text-red-500 transition py-2"
-            onClick={() => setIsMobileMenuOpen(false)}
-          >
-            {t("navbar.faq")}
-          </Link>
-          <Link
-            href={`/${locale}/services`}
-            className="font-unbounded uppercase text-white text-base font-semibold hover:text-red-500 transition py-2"
-            onClick={() => setIsMobileMenuOpen(false)}
-          >
-            {t("navbar.services")}
-          </Link>
-
-          <Link
-            href={`/${locale}/catalog_page`}
-            className="font-unbounded uppercase text-white text-base font-semibold hover:text-red-500 transition py-2"
-            onClick={() => setIsMobileMenuOpen(false)}
-          >
-            {t("navbar.products")}
-          </Link>
-          <Link
-            href={`/${locale}/contact`}
-            className="font-unbounded uppercase text-white text-base font-semibold hover:text-red-500 transition py-2"
-            onClick={() => setIsMobileMenuOpen(false)}
-          >
-            {t("navbar.contact")}
-          </Link>
+          {navbarItems?.results ? (
+            navbarItems.results.map((item: NavbarItem) => (
+              <DropdownMenu key={item.id}>
+                <DropdownMenuTrigger asChild>
+                  <Link
+                    key={item.id}
+                    href={`/${locale}/${item.url}`}
+                    className="font-unbounded uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
+                  >
+                    {item.name}
+                    {item.children.length > 0 && (
+                      <ChevronDown size={12} className="ml-1" />
+                    )}
+                  </Link>
+                </DropdownMenuTrigger>
+                {item.children.length > 0 && (
+                  <DropdownMenuContent className="space-y-2">
+                    {item.children.map((child: NavbarItem) => (
+                      <Link
+                        key={child.id}
+                        href={`/${locale}/${child.url}`}
+                        className="font-unbounded uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
+                      >
+                        {child.name}
+                      </Link>
+                    ))}
+                  </DropdownMenuContent>
+                )}
+              </DropdownMenu>
+            ))
+          ) : (
+            <Link
+              href={`/${locale}/home`}
+              className="font-unbounded uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
+            >
+              {t("navbar.home")}
+            </Link>
+          )}
         </div>
       </div>
     </>

components/layout/upHeader.tsx

@@ -0,0 +1,51 @@
+import { Download, Mail, Phone, Send } from "lucide-react";
+import { useTranslations } from "next-intl";
+
+const downloadCatalog = () => {
+  const link = document.createElement("a");
+  link.href = "/catalog.pdf";
+  link.download = "catalog.pdf";
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
+
+export default function UpHeader() {
+  const t = useTranslations();
+  return (
+    <div className="w-full border-b border-gray-400/50">
+      <div className="max-w-7xl mx-auto py-2 px-4 sm:px-6 lg:px-8 flex max-[450px]:flex-col justify-between gap-2 items-center">
+        <div className="flex items-center gap-2">
+          <p className="text-white font-medium">{t("navbar.connect")}:</p>
+          <div className="flex items-center gap-3">
+            <a
+              href="mailto:support@fireforce.com"
+              className="p-1 rounded-sm  text-white hover:text-white hover:border-red-700 hover:bg-red-700 transition"
+            >
+              <Mail size={20} />
+            </a>
+            <a
+              href="tel:+998773722121"
+              className="p-1 rounded-sm  text-white hover:text-white hover:border-red-700 hover:bg-red-700 transition"
+            >
+              <Phone size={20} />
+            </a>
+            <a
+              href="https://t.me/ignum_tech"
+              className="p-1 rounded-sm  text-white hover:text-white hover:border-red-700 hover:bg-red-700 transition"
+            >
+              <Send size={20} />
+            </a>
+          </div>
+        </div>
+        <button
+          onClick={downloadCatalog}
+          className="py-1 px-4 flex items-center gap-2 hover:bg-red-700 hover:cursor-pointer hover:border-red-700 text-white font-medium border border-white rounded-md transition"
+        >
+          <Download size={18} />
+          {t("navbar.catalog")}
+        </button>
+      </div>
+    </div>
+  );
+}

components/pages/about/aboutBanner.tsx

@@ -1,10 +1,11 @@
 import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
 import { useTranslations } from "next-intl";
+import { InnerNavbar } from "./innerNavbar";
 
 export function AboutBanner() {
   const t = useTranslations();
   return (
-    <section className="relative w-full lg:h-[60vh] h-screen min-h-100 overflow-hidden pt-10">
+    <section className="relative w-full lg:h-[70vh] min-[350px]:h-[90vh] h-screen min-h-100 overflow-hidden pt-10">
       {/* Background Image */}
       <div
         className="absolute inset-0 z-0"
@@ -24,7 +25,10 @@ export function AboutBanner() {
       />
 
       <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="relative z-20 pt-50 sm:pt-30 pb-10">
+          <InnerNavbar />
+        </div> */}
+        <div className="relative z-20 h-full flex max-lg:flex-col items-start justify-between gap-5 pt-40">
           <div className="spacw-y-4 ">
             <div className="flex items-center gap-3">
               <DotAnimatsiya />
@@ -39,7 +43,7 @@ export function AboutBanner() {
               {t("about.banner.subtitle")}
             </p>
           </div>
-          <div className="font-almarai lg:w-[40%] text-gray-300 mt-20">
+          <div className="font-almarai lg:w-[40%] text-gray-300 sm:mt-20">
             {t("about.banner.description")}
           </div>
         </div>

components/pages/about/aboutDetail/baza.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ShieldCheck } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { NormativeCard } from "./normativeCard";
+
+const fadeUp = (delay = 0) => ({
+  initial: { opacity: 0, y: 36 },
+  animate: { opacity: 1, y: 0 },
+  transition: { duration: 0.65, ease: [0.22, 1, 0.36, 1] as any, delay },
+});
+
+const fadeUpView = (delay = 0) => ({
+  initial: { opacity: 0, y: 48 },
+  whileInView: { opacity: 1, y: 0 },
+  transition: { duration: 0.65, ease: [0.22, 1, 0.36, 1] as any, delay },
+  viewport: { once: true },
+});
+
+export default function NormativBazaPage() {
+  const t = useTranslations();
+
+  return (
+    <div className="bg-[#0f0e0d] text-white min-h-screen pt-10 pb-20">
+      {/* ── Hero ── */}
+      <section className="relative w-full px-2">
+        {/* Content */}
+        <div className="relative z-10 flex flex-col justify-end h-full max-w-6xl mx-auto">
+          <motion.span
+            {...fadeUp(0)}
+            className="text-xs font-black uppercase tracking-[0.22em] text-red-600 mb-4"
+          >
+            {t("about.normativBaza.hero.label")}
+          </motion.span>
+
+          <motion.h1
+            {...fadeUp(0.1)}
+            className="text-4xl md:text-5xl lg:text-7xl font-black uppercase leading-[0.95] tracking-tight text-white"
+          >
+            {t("about.normativBaza.hero.title1")}
+            <br />
+            <span className="text-red-700">
+              {t("about.normativBaza.hero.title2")}
+            </span>
+          </motion.h1>
+
+          <motion.p
+            {...fadeUp(0.22)}
+            className="mt-6 max-w-xl text-sm md:text-base text-gray-300 leading-relaxed"
+          >
+            {t("about.normativBaza.hero.description")}
+          </motion.p>
+
+          {/* Decorative line */}
+          <motion.div
+            initial={{ scaleX: 0, originX: 0 }}
+            animate={{ scaleX: 1 }}
+            transition={{ delay: 0.4, duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
+            className="mt-10 w-24 h-px bg-red-700"
+          />
+        </div>
+      </section>
+
+      <NormativeCard />
+
+      {/* ── Bottom quote band ── */}
+      <motion.section
+        {...fadeUpView(0)}
+        className="border-t border-white/5 max-w-6xl mx-auto px-6 py-10 flex flex-col md:flex-row items-start md:items-center gap-6 justify-between"
+      >
+        <p className="text-xl md:text-2xl font-bold text-white/80 max-w-lg leading-snug">
+          {t("about.normativBaza.bottomText")}
+        </p>
+        <div className="shrink-0 w-16 h-16 rounded-2xl bg-red-400/10 border border-red-400/20 flex items-center justify-center">
+          <ShieldCheck size={28} className="text-red-600" />
+        </div>
+      </motion.section>
+    </div>
+  );
+}

components/pages/about/aboutDetail/card.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { Download } from "lucide-react";
+
+interface DownloadCardProps {
+  title: string;
+  fileType?: string;
+  fileSize: string;
+  fileUrl: string;
+}
+
+export default function DownloadCard({
+  title,
+  fileType = "PDF",
+  fileSize,
+  fileUrl,
+}: DownloadCardProps) {
+  return (
+    <a
+      href={fileUrl}
+      download
+      className="min-h-40 h-full group relative w-full max-w-md border border-white/10  bg-[#171616b8] transition rounded-lg p-4 flex flex-col gap-4 items-start justify-between"
+    >
+      {/* Background glow effect */}
+      <div className="absolute inset-0 bg-linear-to-t from-red-600/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+
+      {/* Decorative corner accent */}
+      <div className="absolute top-0 right-0 w-24 h-24 bg-linear-to-br from-red-500/20 to-transparent rounded-bl-full opacity-0 group-hover:opacity-00 transition-opacity duration-500" />
+      {/* Top section */}
+      <div className="flex justify-between items-start">
+        <h3 className="text-xl font-unbounded font-bold group-hover:text-red-500 text-white leading-tight transition-colors duration-300">
+          {title}
+        </h3>
+
+        <span className="text-sm font-medium text-white">{fileType}</span>
+      </div>
+
+      {/* Bottom section */}
+      <div className="flex w-full justify-between items-center">
+        <span className="text-sm text-gray-200">{fileSize}</span>
+
+        <Download
+          size={20}
+          className="text-gray-600 transition group-hover:text-red-700 duration-300"
+        />
+      </div>
+    </a>
+  );
+}

components/pages/about/aboutDetail/guides.tsx

@@ -0,0 +1,73 @@
+"use client";
+import { useTranslations } from "next-intl";
+import DownloadCard from "./card";
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import httpClient from "@/request/api";
+import { endPoints } from "@/request/links";
+import PaginationLite from "@/components/paginationUI";
+import { DownloadCardSkeleton } from "./loading/guidLoading";
+
+export function Guides() {
+  const t = useTranslations();
+  const [currentPage, setCurrentPage] = useState(1);
+  const guides = [
+    {
+      file: "/varnix.pdf",
+      name: t("about.notePPPage.varnix"),
+      file_type: "PDF",
+      file_size: "368.51 KB",
+    },
+    {
+      file: "/ppFlanes.pdf",
+      name: t("about.notePPPage.ppFlanes"),
+      file_type: "PDF",
+      file_size: "368.51 KB",
+    },
+    {
+      file: "/ppFiting.pdf",
+      name: t("about.notePPPage.ppFiting"),
+      file_type: "PDF",
+      file_size: "368.51 KB",
+    },
+  ];
+
+  const { data, isLoading } = useQuery({
+    queryKey: ["guides"],
+    queryFn: () => httpClient(endPoints.guides),
+    select: (res) => ({
+      results: res.data?.data?.results,
+      current_page: res.data?.data?.current_page,
+      total_pages: res.data?.data?.total_pages,
+    }),
+  });
+
+  const guidedata = data?.results ?? guides;
+
+  return (
+    <div className="space-y-4">
+      <div className="grid lg:grid-cols-3 min-[580px]:grid-cols-2 grid-cols-1  gap-4 max-w-7xl mx-auto py-5">
+        {isLoading ? (
+          <DownloadCardSkeleton />
+        ) : (
+          guidedata.map((guide: any, index: number) => (
+            <DownloadCard
+              key={index}
+              title={guide.name}
+              fileType={guide.file_type}
+              fileSize={guide.file_size}
+              fileUrl={guide.file}
+            />
+          ))
+        )}
+      </div>
+      {data?.total_pages > 1 && (
+        <PaginationLite
+          currentPage={currentPage}
+          totalPages={data?.total_pages}
+          onChange={setCurrentPage}
+        />
+      )}
+    </div>
+  );
+}

components/pages/about/aboutDetail/loading/guidLoading.tsx

@@ -0,0 +1,24 @@
+export function DownloadCardSkeleton() {
+  return (
+    <div
+      className="min-h-40 h-full relative w-full max-w-md border border-white/10 bg-[#171616b8] rounded-lg p-4 flex flex-col gap-4 items-start justify-between"
+    >
+      {/* Top section */}
+      <div className="flex justify-between items-start w-full gap-4">
+        {/* Title */}
+        <div className="space-y-2 flex-1">
+          <div className="h-4 w-3/4 rounded bg-white/8 animate-pulse" />
+          <div className="h-4 w-1/2 rounded bg-white/8 animate-pulse" />
+        </div>
+        {/* File type badge */}
+        <div className="h-4 w-10 rounded bg-white/8 animate-pulse shrink-0" />
+      </div>
+
+      {/* Bottom section */}
+      <div className="flex w-full justify-between items-center">
+        <div className="h-3 w-16 rounded bg-white/8 animate-pulse" />
+        <div className="w-5 h-5 rounded bg-white/8 animate-pulse" />
+      </div>
+    </div>
+  );
+}

components/pages/about/aboutDetail/loading/loading.tsx

@@ -0,0 +1,44 @@
+export function CertCardSkeleton({ count = 6 }: { count?: number }) {
+  return (
+    <>
+      <article className="flex flex-col rounded-2xl overflow-hidden sm:p-5 p-2 bg-[#161514] border border-white/5 w-full">
+        {/* Badge row */}
+        <div className="flex flex-col justify-between flex-1 min-w-0 py-1 gap-4">
+          <div className="space-y-2">
+            <div className="flex items-center gap-2 flex-wrap">
+              {/* Award badge */}
+              <div className="flex items-center gap-1.5">
+                <div className="w-2.5 h-2.5 rounded-sm bg-red-900/40 animate-pulse" />
+                <div className="h-2.5 w-20 rounded-full bg-red-900/40 animate-pulse" />
+              </div>
+              {/* Category pill */}
+              <div className="h-4 w-16 rounded-full border border-white/10 bg-white/5 animate-pulse" />
+            </div>
+
+            {/* Title lines */}
+            <div className="space-y-1.5 pt-1">
+              <div className="h-3.5 w-full rounded bg-white/8 animate-pulse" />
+              <div className="h-3.5 w-3/4 rounded bg-white/8 animate-pulse" />
+            </div>
+          </div>
+        </div>
+
+        {/* Divider */}
+        <div className="mx-4 h-px bg-white/5 sm:my-5 my-2" />
+
+        {/* Document list */}
+        <ul className="flex flex-col gap-2.5">
+          {Array.from({ length: 3 }).map((_, di) => (
+            <li key={di} className="flex items-start gap-2.5">
+              <span className="mt-1 flex-none w-1.5 h-1.5 rounded-full bg-red-900/40 animate-pulse" />
+              <div
+                className="h-3 rounded bg-white/8 animate-pulse"
+                style={{ width: `${75 - di * 10}%` }}
+              />
+            </li>
+          ))}
+        </ul>
+      </article>
+    </>
+  );
+}

components/pages/about/aboutDetail/normativeCard.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { useTranslations } from "next-intl";
+import { Award } from "lucide-react";
+import { normativeData } from "@/lib/demoData";
+import httpClient from "@/request/api";
+import { endPoints } from "@/request/links";
+import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+import PaginationLite from "@/components/paginationUI";
+import { CertCardSkeleton } from "./loading/loading";
+
+export function NormativeCard() {
+  const t = useTranslations();
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const { data, isLoading } = useQuery({
+    queryKey: ["normativeData"],
+    queryFn: () => httpClient(endPoints.normative),
+    select: (res) => ({
+      results: res.data?.data?.results,
+      current_page: res.data?.data?.current_page,
+      total_pages: res.data?.data?.total_pages,
+    }),
+  });
+
+  const generallyData = data?.results || normativeData;
+
+  if (isLoading) return <CertCardSkeleton />;
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-col gap-8 py-10 max-w-6xl mx-auto px-2">
+        {generallyData.map((c: any, i: number) => (
+          <motion.article
+            key={i}
+            initial={{ opacity: 0, y: 28 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.55, delay: i * 0.1 }}
+            viewport={{ once: true }}
+            className="group flex flex-col rounded-2xl overflow-hidden sm:p-5 p-2 bg-[#161514] border border-white/5 hover:border-red-600/20 transition-colors duration-300 w-full"
+          >
+            {/* Meta + actions */}
+            <div className="flex flex-col justify-between flex-1 min-w-0 py-1 gap-4">
+              <div className="space-y-2">
+                {/* Badge row */}
+                <div className="flex items-center gap-2 flex-wrap">
+                  <div className="flex items-center gap-1.5">
+                    <Award size={11} className="text-red-600 shrink-0" />
+                    <span className="text-[10px] font-black uppercase tracking-widest text-red-600">
+                      {t("about.certificatePage.card.badge")}
+                    </span>
+                  </div>
+                  <span className="text-[10px] font-bold uppercase tracking-wider text-white/20 border border-white/10 px-2 py-0.5 rounded-full">
+                    {c.artikul}
+                  </span>
+                </div>
+
+                {/* Title */}
+                <h3 className="font-bold text-sm md:text-base text-white leading-snug">
+                  {t(c.title)}
+                </h3>
+              </div>
+            </div>
+
+            {/* Divider */}
+            <div className="mx-4 h-px bg-white/5 sm:my-5 my-2" />
+
+            {/* Documents list */}
+            <div className="overflow-hidden">
+              <ul className="flex flex-col gap-2.5">
+                {c.features.map((doc: any, di: number) => (
+                  <li key={di} className="flex items-start gap-2.5">
+                    <span className="mt-1 flex-none w-1.5 h-1.5 rounded-full bg-red-600/60" />
+                    <p className="text-xs text-gray-400 leading-relaxed">
+                      {t(doc?.name)}
+                    </p>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </motion.article>
+        ))}
+      </div>
+      {data?.total_pages > 1 && (
+        <PaginationLite
+          currentPage={currentPage}
+          totalPages={data?.total_pages}
+          onChange={setCurrentPage}
+        />
+      )}
+    </div>
+  );
+}

components/pages/about/aboutDetail/sertificateCard.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { useTranslations } from "next-intl";
+import { certs } from "@/lib/demoData";
+import { Award } from "lucide-react";
+
+export function CertCard({ c, i }: { c: (typeof certs)[0]; i: number }) {
+  const t = useTranslations();
+
+  return (
+    <motion.article
+      initial={{ opacity: 0, y: 28 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.55, delay: i * 0.1 }}
+      viewport={{ once: true }}
+      className="group flex flex-col rounded-2xl overflow-hidden sm:p-5 p-2 bg-[#161514] border border-white/5 hover:border-red-600/20 transition-colors duration-300 w-full"
+    >
+      {/* Right: meta + actions for gitea */}
+      <div className="flex flex-col justify-between flex-1 min-w-0 py-1 gap-4">
+        <div className="space-y-2">
+          {/* Badge row */}
+          <div className="flex items-center gap-2 flex-wrap">
+            <div className="flex items-center gap-1.5">
+              <Award size={11} className="text-red-600 shrink-0" />
+              <span className="text-[10px] font-black uppercase tracking-widest text-red-600">
+                {t("about.certificatePage.card.badge")}
+              </span>
+            </div>
+            <span className="text-[10px] font-bold uppercase tracking-wider text-white/20 border border-white/10 px-2 py-0.5 rounded-full">
+              {c.artikul}
+            </span>
+          </div>
+
+          {/* Title */}
+          <h3 className="font-bold text-sm md:text-base text-white leading-snug">
+            {c.title}
+          </h3>
+        </div>
+      </div>
+
+      {/* ── Divider ── */}
+      <div className="mx-4 h-px bg-white/5 sm:my-5 my-2" />
+
+      {/* Collapsible document list */}
+      <div className="overflow-hidden">
+        <ul className="flex flex-col gap-2.5">
+          {c.features.length > 0 &&
+            c.features.map((doc: any, di: number) => {
+              const { name } = doc;
+              return (
+                <li key={di} className="flex items-start gap-2.5">
+                  <span className="mt-1 flex-none w-1.5 h-1.5 rounded-full bg-red-600/60" />
+                  <p className="text-xs text-gray-400 leading-relaxed">
+                    {name || ""}
+                  </p>
+                </li>
+              );
+            })}
+        </ul>
+      </div>
+    </motion.article>
+  );
+}

components/pages/about/index.ts

@@ -2,3 +2,4 @@ export { AboutBanner } from "./aboutBanner";
 export { Story } from "./story";
 export { AboutLine } from "./aboutLine";
 export { WhyChooseUs } from "./whyChooseUs";
+export { InnerNavbar } from "./innerNavbar";

components/pages/about/innerNavbar.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useLocale, useTranslations } from "next-intl";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+export function InnerNavbar() {
+  const t = useTranslations();
+  const locale = useLocale();
+  const pathname = usePathname();
+
+  const tabs = [
+    { name: t("about.subPages.baza"), value: "baza" },
+    { name: t("about.subPages.certificate"), value: "sertificate" },
+    { name: t("about.subPages.notePP"), value: "notePP" },
+    { name: t("about.subPages.noteTrailer"), value: "noteTrailer" },
+    { name: t("about.subPages.noteFlans"), value: "noteFlans" },
+  ];
+
+  return (
+    <nav className="w-full border-b border-gray-100 bg-[#1e1d1c] sticky top-0 z-30">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center gap-1 overflow-x-auto">
+          {tabs.map((tab) => {
+            const href = `/${locale}/about/${tab.value}`;
+            const isActive = pathname === href || pathname.endsWith(`/about/${tab.value}`);
+
+            return (
+              <Link
+                key={tab.value}
+                href={href}
+                className={[
+                  "relative shrink-0 px-4 py-4 text-sm font-semibold transition-colors duration-200 whitespace-nowrap",
+                  "after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:rounded-full after:transition-all after:duration-200",
+                  isActive
+                    ? "text-red-600"
+                    : "text-gray-300 after:bg-transparent hover:text-red-600",
+                ].join(" ")}
+              >
+                {tab.name}
+              </Link>
+            );
+          })}
+        </div>
+      </div>
+    </nav>
+  );
+}
+
+// for hide scrollbar in inner navbar, add this class to the parent container of InnerNavbar
+// scrollbar-none [-ms-overflow-style:none] [scrollbar-width:none]
+        

components/pages/about/story.tsx

@@ -6,7 +6,7 @@ export function Story() {
   return (
     <div className="pb-0 relative z-10 max-[350px]:pb-30 ">
       <div className="max-w-260 mx-auto px-4">
-        <section className="relative -top-30 rounded-xl w-full lg:h-[70vh] h-[80vh] min-h-150 sm:overflow-hidden shadow-2xl flex flex-col items-start justify-between">
+        <section className="relative -top-20 rounded-xl w-full lg:h-[70vh] h-[80vh] min-h-150 sm:overflow-hidden shadow-2xl flex flex-col items-start justify-between">
           {/* Background Image */}
           <div
             className="absolute inset-0 z-0 rounded-xl"

components/pages/about/whyChooseUs.tsx

@@ -1,12 +1,12 @@
-"use client";
-
 import Image from "next/image";
 import { Check } from "lucide-react";
 import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
-import { useTranslations } from "next-intl";
+import { useLocale, useTranslations } from "next-intl";
+import Link from "next/link";
 
 export function WhyChooseUs() {
   const t = useTranslations();
+  const locale = useLocale();
   const features = [
     { title: t("about.whyChoose.features.fastResponse") },
     { title: t("about.whyChoose.features.ready24") },
@@ -56,9 +56,12 @@ export function WhyChooseUs() {
 
           {/* CTA Button */}
           <div>
-            <button className="font-almarai shadow-[0px_0px_2px_8px_#ff01015c] rounded-full bg-red-600 px-6 py-3 font-bold text-white transition-all hover:bg-red-700 sm:px-8 sm:py-4">
+            <Link
+              href={`/${locale}/contact`}
+              className="font-almarai shadow-[0px_0px_2px_8px_#ff01015c] rounded-full bg-red-600 px-6 py-3 font-bold text-white transition-all hover:bg-red-700 sm:px-8 sm:py-4"
+            >
               {t("about.whyChoose.contact")}
-            </button>
+            </Link>
           </div>
         </div>
 

components/pages/home/banner.tsx

@@ -1,107 +0,0 @@
-import { useLocale, useTranslations } from "next-intl";
-import DotAnimatsiya from "../../dot/DotAnimatsiya";
-import Link from "next/link";
-
-export function Banner() {
-  const t = useTranslations();
-  const locale = useLocale();
-  return (
-    <section className="relative w-full lg:h-[86vh] h-screen min-h-150 overflow-hidden pt-20">
-      {/* Background Image */}
-      <div
-        className="absolute inset-0 z-0"
-        style={{
-          backgroundImage: "url(/images/home/banner.jpg)",
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-        }}
-      />
-
-      {/* Gradient Overlay - Bottom-left to top-right */}
-      <div
-        className="absolute inset-0 z-10"
-        style={{
-          background: `linear-gradient(to top right, #c75c08 0%, #1e1d1ce3 28%, #1e1d1ce3 100%)`,
-        }}
-      />
-
-      {/* Content Container */}
-      <div className="relative z-20 h-full flex items-center lg:mt-0 sm:mt-[10vh] mt-[5vh]">
-        <div className="max-w-400 mx-auto px-4 sm:px-6 lg:px-8 w-full">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center h-full">
-            {/* Right side - Text Content */}
-            <div className="lg:hidden inline-block space-y-6 text-white">
-              {/* Badge */}
-              <div className="flex items-center gap-2 w-fit">
-                <DotAnimatsiya />
-                <span className="text-sm font-semibold tracking-wide font-almarai">
-                  {t("home.banner.title1")}
-                </span>
-              </div>
-
-              {/* Main Heading */}
-              <h1
-                className="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 font-unbounded"
-              >
-                {t("home.banner.title2")}
-              </h1>
-
-              {/* Description */}
-              <p className="text-base sm:text-lg text-gray-300 leading-relaxed max-w-md">
-                {t("home.banner.description")}
-              </p>
-
-              {/* CTA Button */}
-              <button className="shadow-[0px_0px_2px_8px_#ff01015c] bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 w-fit">
-                {t("home.banner.cta")}
-              </button>
-            </div>
-
-            {/* Left side - Firefighters Image */}
-            <div className="flex items-end justify-center  ">
-              <img
-                src="/images/homeBanner3.png"
-                alt="Firefighters"
-                loading="lazy"
-                className="lg:w-150 w-100 lg:h-150 max-[300px]:w-[80vw] object-contain object-right rounded-xl drop-shadow-2xl"
-              />
-            </div>
-
-            {/* Right side - Text Content */}
-            <div className="lg:inline-block hidden space-y-6 mb-20">
-              {/* Badge */}
-              <div className="flex items-center gap-2 w-fit">
-                <DotAnimatsiya />
-                <span className="text-sm font-semibold text-white tracking-wide font-almarai">
-                  {t("home.banner.title1")}
-                </span>
-              </div>
-
-              {/* Main Heading */}
-              <h1
-                className="font-unbounded uppercase text-4xl bg-linear-to-br from-white via-white to-black
-  text-transparent bg-clip-text sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty"
-              >
-                {t("home.banner.title2")}
-              </h1>
-
-              {/* Description */}
-              <p className="font-almarai text-base sm:text-lg text-gray-300 leading-relaxed max-w-md">
-                {t("home.banner.description")}
-              </p>
-
-              {/* CTA Button */}
-              <Link
-                href={`/${locale}/contact`}
-                className="font-almarai shadow-[0px_0px_2px_8px_#ff01015c] bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 w-fit"
-              >
-                {t("home.banner.cta")}
-              </Link>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}

components/pages/home/banner/banner.tsx

@@ -0,0 +1,28 @@
+import { BannerSlider } from "./slider";
+
+export function Banner() {
+  return (
+    <section className="relative w-full lg:h-[86vh] h-screen min-h-150 overflow-hidden min-[450px]:pt-10 pt-20">
+      {/* Background Image */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          backgroundImage: "url(/images/home/banner.jpg)",
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+        }}
+      />
+
+      {/* Gradient Overlay - Bottom-left to top-right */}
+      <div
+        className="absolute inset-0 z-10"
+        style={{
+          background: `linear-gradient(to top right, #c75c08 0%, #1e1d1ce3 28%, #1e1d1ce3 100%)`,
+        }}
+      />
+
+      {/* Content Container */}
+      <BannerSlider />
+    </section>
+  );
+}

components/pages/home/banner/loading.tsx

@@ -0,0 +1,68 @@
+export function BannerSliderSkeleton() {
+  return (
+    <div className="max-w-7xl mx-auto relative z-30 h-full mt-20 flex items-center justify-center">
+      {/* Fake nav buttons */}
+      <div className="w-10 h-10 absolute z-10 left-[5%] top-[40vh] rounded-full bg-gray-700/50 lg:flex hidden animate-pulse" />
+      <div className="w-10 h-10 absolute z-10 right-[5%] top-[40vh] rounded-full bg-gray-700/50 lg:flex hidden animate-pulse" />
+
+      {/* Slide content */}
+      <div className="relative z-20 h-full flex items-center lg:mt-0 sm:mt-[10vh] mt-[5vh] w-full">
+        <div className="max-w-400 mx-auto px-4 sm:px-6 lg:px-8 w-full">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center h-full">
+
+            {/* Mobile text skeleton (hidden on lg) */}
+            <div className="lg:hidden space-y-6">
+              {/* Badge */}
+              <div className="flex items-center gap-2">
+                <div className="w-3 h-3 rounded-full bg-gray-600 animate-pulse" />
+                <div className="h-4 w-32 rounded-full bg-gray-600 animate-pulse" />
+              </div>
+              {/* Heading */}
+              <div className="space-y-3">
+                <div className="h-8 w-4/5 rounded-lg bg-gray-600 animate-pulse" />
+                <div className="h-8 w-3/5 rounded-lg bg-gray-600 animate-pulse" />
+              </div>
+              {/* Description */}
+              <div className="space-y-2">
+                <div className="h-4 w-full rounded bg-gray-700 animate-pulse" />
+                <div className="h-4 w-11/12 rounded bg-gray-700 animate-pulse" />
+                <div className="h-4 w-3/4 rounded bg-gray-700 animate-pulse" />
+              </div>
+              {/* CTA */}
+              <div className="h-12 w-40 rounded-full bg-red-900/40 animate-pulse" />
+            </div>
+
+            {/* Image skeleton */}
+            <div className="flex items-end justify-center">
+              <div className="lg:w-[375px] w-[250px] lg:h-[375px] h-[250px] max-[300px]:w-[80vw] rounded-xl bg-gray-700/50 animate-pulse shimmer" />
+            </div>
+
+            {/* Desktop text skeleton (hidden on mobile) */}
+            <div className="lg:inline-block hidden space-y-6 mb-20">
+              {/* Badge */}
+              <div className="flex items-center gap-2">
+                <div className="w-3 h-3 rounded-full bg-gray-600 animate-pulse" />
+                <div className="h-4 w-36 rounded-full bg-gray-600 animate-pulse" />
+              </div>
+              {/* Heading */}
+              <div className="space-y-3">
+                <div className="h-10 w-4/5 rounded-lg bg-gray-600 animate-pulse" />
+                <div className="h-10 w-3/5 rounded-lg bg-gray-600 animate-pulse" />
+                <div className="h-10 w-2/5 rounded-lg bg-gray-600 animate-pulse" />
+              </div>
+              {/* Description */}
+              <div className="space-y-2 max-w-md">
+                <div className="h-4 w-full rounded bg-gray-700 animate-pulse" />
+                <div className="h-4 w-11/12 rounded bg-gray-700 animate-pulse" />
+                <div className="h-4 w-3/4 rounded bg-gray-700 animate-pulse" />
+              </div>
+              {/* CTA */}
+              <div className="h-12 w-40 rounded-full bg-red-900/40 animate-pulse" />
+            </div>
+
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/pages/home/banner/slider.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Navigation, Autoplay } from "swiper/modules";
+import "swiper/css";
+import "swiper/css/navigation";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { useLocale, useTranslations } from "next-intl";
+import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
+import { useQuery } from "@tanstack/react-query";
+import httpClient from "@/request/api";
+import { endPoints } from "@/request/links";
+import { BannerType } from "@/lib/types";
+import { BannerSliderSkeleton } from "./loading";
+// The custom CSS selectors for navigation
+const navigationPrevEl = ".hero-swiper-prev";
+const navigationNextEl = ".hero-swiper-next";
+
+export function BannerSlider() {
+  const t = useTranslations();
+  const locale = useLocale();
+  const { data, isLoading } = useQuery({
+    queryKey: ["banner"],
+    queryFn: () => httpClient(endPoints.banner),
+    select: (data: any): BannerType[] => data?.data?.results,
+  });
+  const BANNER_DATA = [
+    {
+      image: "/images/homeBanner3.png",
+      title: t("home.banner.title2"),
+      description: t("home.banner.description"),
+    },
+    {
+      image: "/images/homeBanner4.png",
+      title: t("home.banner.title2"),
+      description: t("home.banner.description"),
+    },
+  ];
+
+  const bannerData = data ?? BANNER_DATA;
+
+  if (isLoading) return <BannerSliderSkeleton />;
+
+  return (
+    <div className="max-w-7xl mx-auto relative z-30 h-full mt-20 flex items-center justify-center ">
+      {/* Custom buttons */}
+      <button
+        className={`${navigationPrevEl.replace(
+          ".",
+          "",
+        )} w-10 h-10 absolute z-10 left-0 top-[40vh] rounded-full p-0 bg-primary text-center text-white lg:flex hidden items-center justify-center hover:bg-red-600 hover:cursor-pointer transition`}
+      >
+        <ChevronLeft size={30} />
+      </button>
+      <button
+        className={`${navigationNextEl.replace(
+          ".",
+          "",
+        )} w-10 h-10 absolute z-10 right-0 top-[40vh] rounded-full bg-primary text-center text-white lg:flex hidden items-center justify-center hover:bg-red-600 hover:cursor-pointer transition `}
+      >
+        <ChevronRight size={30} />
+      </button>
+      <Swiper
+        modules={[Navigation, Autoplay]}
+        slidesPerView={1}
+        spaceBetween={30}
+        loop={true}
+        navigation={{
+          // Pass the class selectors here
+          prevEl: navigationPrevEl,
+          nextEl: navigationNextEl,
+        }}
+        autoplay={{
+          delay: 5000,
+          disableOnInteraction: false,
+        }}
+      >
+        {bannerData.map((item, index) => (
+          <SwiperSlide key={index}>
+            <div className="relative z-20 h-full flex items-center lg:mt-0 sm:mt-[10vh] mt-[5vh]">
+              <div className="max-w-400 mx-auto px-4 sm:px-6 lg:px-8 w-full">
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center h-full">
+                  {/* Right side - Text Content */}
+                  <div className="lg:hidden inline-block space-y-6 text-white">
+                    {/* Badge */}
+                    <div className="flex items-center gap-2 w-fit">
+                      <DotAnimatsiya />
+                      <span className="text-sm font-semibold tracking-wide font-almarai">
+                        {t("home.banner.title1")}
+                      </span>
+                    </div>
+
+                    {/* Main Heading */}
+                    <h1
+                      className="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 font-unbounded"
+                    >
+                      {item.title}
+                    </h1>
+
+                    {/* Description */}
+                    <p className="text-base sm:text-lg text-gray-300 leading-relaxed max-w-md">
+                      {item.description}
+                    </p>
+
+                    {/* CTA Button */}
+                    <button className="shadow-[0px_0px_2px_8px_#ff01015c] bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 w-fit">
+                      {t("home.banner.cta")}
+                    </button>
+                  </div>
+
+                  {/* Left side - Firefighters Image */}
+                  <div className="flex items-end justify-center  ">
+                    <img
+                      src={item.image}
+                      alt="Firefighters"
+                      loading="lazy"
+                      className="lg:w-150 w-100 lg:h-150 max-[300px]:w-[80vw] object-contain object-right rounded-xl drop-shadow-2xl"
+                    />
+                  </div>
+
+                  {/* Right side - Text Content */}
+                  <div className="lg:inline-block hidden space-y-6 mb-20">
+                    {/* Badge */}
+                    <div className="flex items-center gap-2 w-fit">
+                      <DotAnimatsiya />
+                      <span className="text-sm font-semibold text-white tracking-wide font-almarai">
+                        {t("home.banner.title1")}
+                      </span>
+                    </div>
+
+                    {/* Main Heading */}
+                    <h1
+                      className="font-unbounded uppercase text-4xl bg-linear-to-br from-white via-white to-black
+  text-transparent bg-clip-text sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty"
+                    >
+                      {t("home.banner.title2")}
+                    </h1>
+
+                    {/* Description */}
+                    <p className="font-almarai text-base sm:text-lg text-gray-300 leading-relaxed max-w-md">
+                      {t("home.banner.description")}
+                    </p>
+
+                    {/* CTA Button */}
+                    <Link
+                      href={`/${locale}/contact`}
+                      className="font-almarai shadow-[0px_0px_2px_8px_#ff01015c] bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 w-fit"
+                    >
+                      {t("home.banner.cta")}
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    </div>
+  );
+}

components/pages/home/index.ts

@@ -1,8 +1,8 @@
-export { Banner } from "./banner";
+export { Banner } from "./banner/banner";
 export { Statistics } from "./statistics";
 export { AboutUs } from "./about";
 export { Video } from "./video";
-export { OurService } from "../services/ourService";
+export { OurService } from "./ourService";
 export { Testimonial } from "./testimonal";
 export { Line } from "./line";
 export { Blog } from "./blog/blog";

components/pages/home/ourService.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
 import httpClient from "@/request/api";
 import { endPoints } from "@/request/links";
@@ -8,48 +8,27 @@ 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 { ServicesLoading } from "../services/loading";
+import { EmptyServices } from "../services/empty";
+import { useServiceDetail } from "@/zustand/useService";
+import { cardVariants, containerVariants } from "@/lib/animations";
 
 export function OurService() {
   const t = useTranslations();
   const locale = useLocale();
+  const setServiceId = useServiceDetail((state) => state.setServiceId);
 
-  // get request 
+  // get request
   const { data, isLoading, isError } = useQuery({
-    queryKey: ['firesafety'],
-    queryFn: () => httpClient(endPoints.services.all)
+    queryKey: ["firesafety"],
+    queryFn: () => httpClient(endPoints.services.all),
+    select: (data) => data?.data?.data?.results.slice(0, 4),
   });
 
-  console.log("service data: ", data);
-
-  // Animation variants
-  const containerVariants = {
-    hidden: { opacity: 0 },
-    visible: {
-      opacity: 1,
-      transition: {
-        staggerChildren: 0.1,
-      },
-    },
-  };
-
-  const cardVariants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: {
-        duration: 0.5,
-        ease: [0.22, 1, 0.36, 1] as const,
-      },
-    },
-  };
-
   return (
     <div className="bg-[#1e1d1c] py-10 md:py-16 lg:py-20 mb-30">
       <div className="max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8">
-        {/* Header */}
+        {/* Header for github */}
         <motion.div
           initial={{ opacity: 0, y: -20 }}
           animate={{ opacity: 1, y: 0 }}
@@ -84,61 +63,77 @@ export function OurService() {
             animate="visible"
           >
             {/* cards */}
-            <div className="max-w-250 w-full mx-auto flex sm:flex-row flex-col items-center gap-5 my-10">
-              <motion.div variants={cardVariants} className="sm:w-[55%] w-full">
+            <div className="max-w-250 w-full mx-auto overflow-hidden flex sm:flex-row flex-col items-center gap-5 my-10">
+              <motion.div
+                variants={cardVariants}
+                className="sm:w-[55%] overflow-hidden w-full"
+                onClick={() => setServiceId(data[0].id)}
+              >
                 <Link
                   href={`/${locale}/services/detail`}
-                  className="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"
+                  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">
-                    {t("home.services.services.operation.title")}
+                    {data[0].title}
                   </p>
                   <p className="font-almarai text-gray-400 max-w-80 w-full">
-                    {t("home.services.services.operation.description")}
+                    {data[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="/images/home/gruop.png"
+                    src={data[0].main_image}
                     alt="images"
                     width={200}
                     height={100}
-                    className="object-contain sm:absolute bottom-0 right-2 z-10"
+                    className="object-contain sm:absolute bottom-0 -right-2 z-10"
                   />
                 </Link>
               </motion.div>
 
-              <motion.div variants={cardVariants} className="sm:w-[45%] w-full">
-                <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">
-                    {t("home.services.services.suppression.title")}
-                  </p>
-                  <p className="font-almarai text-gray-400 max-w-70 w-full">
-                    {t("home.services.services.suppression.description")}
-                  </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="/images/home/redShlang.png"
-                    alt="images"
-                    width={200}
-                    height={100}
-                    className="object-contain sm:absolute -bottom-4 -right-4 z-10"
-                  />
-                </div>
-              </motion.div>
+              <Link
+                href={`/${locale}/services/detail`}
+                className="sm:w-[45%] w-full"
+              >
+                <motion.div
+                  onClick={() => setServiceId(data[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">
+                      {data[1].title}
+                    </p>
+                    <p className="font-almarai text-gray-400 max-w-70 w-full">
+                      {data[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={data[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-5 mt- w-full mx-auto">
-              <motion.div variants={cardVariants} className="sm:w-[40%] w-full -mt-5">
+              <motion.div
+                variants={cardVariants}
+                onClick={() => setServiceId(data[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="/images/home/ambulance.png"
+                    src={data[2].main_image}
                     alt="images"
                     width={300}
                     height={200}
@@ -146,10 +141,10 @@ export function OurService() {
                   />
                   <div className="space-y-4 py-6 px-8">
                     <p className="uppercase font-unbounded font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
-                      {t("home.services.services.safety.title")}
+                      {data[2].title}
                     </p>
                     <p className="font-almarai text-gray-400 max-w-80 w-full">
-                      {t("home.services.services.safety.description")}
+                      {data[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} />
@@ -159,20 +154,24 @@ export function OurService() {
               </motion.div>
 
               <div className="sm:w-[60%] w-full">
-                <motion.div variants={cardVariants}>
+                <motion.div
+                  onClick={() => setServiceId(data[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">
-                        {t("home.services.services.monitoring.title")}
+                        {data[3].title}
                       </p>
                       <p className="font-almarai text-gray-400 max-w-70 w-full">
-                        {t("home.services.services.monitoring.description")}
+                        {data[3].subtitle}
                       </p>
-                      <button className="font-almarai sm:mt-38 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 className="font-almarai sm:mt-37 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="/images/home/balon.png"
+                        src={data[3].main_image}
                         alt="images"
                         width={200}
                         height={100}
@@ -190,7 +189,7 @@ export function OurService() {
                     {t("home.services.viewMoreServices")}
                   </h2>
                   <Link
-                    href="/services"
+                    href={`/${locale}/services`}
                     className="font-almarai shadow-[0px_0px_2px_6px_#a60404ad] bg-red-600 hover:bg-red-700 text-white font-bold sm:py-3 sm:px-8 px-8 py-2 rounded-full transition duration-300 transform hover:scale-105 w-fit"
                   >
                     {t("home.services.viewMore")}
@@ -203,4 +202,4 @@ export function OurService() {
       </div>
     </div>
   );
-}
+}

components/pages/home/statistics.tsx

@@ -43,7 +43,7 @@ export function Statistics() {
   ];
   const [stat, setStat] = useState<Statistics[]>(stats);
 
-  const { data, isLoading } = useQuery({
+  const { data } = useQuery({
     queryKey: ["statistics"],
     queryFn: () => httpClient(endPoints.statistics),
     select: (data) => data?.data?.results,

components/pages/payment/index.tsx

@@ -0,0 +1,527 @@
+"use client";
+import { useState, useEffect } from "react";
+
+const translations = {
+  uz: {
+    badge: "To'lov amalga oshmadi",
+    title: "To'lov\nQabul\nQilinmagani uchun Sayt O'chirildi",
+    subtitle: "Afsuski, to'lovingizni qayta ishlashda xatolik yuz berdi.",
+    reasons_title: "Mumkin bo'lgan sabablar:",
+    reasons: [
+      "Karta mablag'i yetarli emas",
+      "Bank tomonidan to'lov rad etildi",
+      "Karta ma'lumotlari noto'g'ri",
+      "Tarmoq ulanish muammosi",
+    ],
+    retry: "Qayta urinish",
+    support: "Qo'llab-quvvatlash",
+    back: "Orqaga qaytish",
+    code: "Xato kodi",
+    time: "Vaqt",
+  },
+  ru: {
+    badge: "Платёж не выполнен",
+    title: "Из-за\nнеполучения\nплатежа сайт отключен",
+    subtitle: "К сожалению, при обработке вашего платежа произошла ошибка.",
+    reasons_title: "Возможные причины:",
+    reasons: [
+      "Недостаточно средств на карте",
+      "Платёж отклонён банком",
+      "Неверные данные карты",
+      "Проблема с сетевым подключением",
+    ],
+    retry: "Повторить",
+    support: "Поддержка",
+    back: "Назад",
+    code: "Код ошибки",
+    time: "Время",
+  },
+  en: {
+    badge: "Payment Failed",
+    title: "The site\nwas disabled\ndue to non-payment",
+    subtitle: "Unfortunately, an error occurred while processing your payment.",
+    reasons_title: "Possible reasons:",
+    reasons: [
+      "Insufficient funds on card",
+      "Payment declined by bank",
+      "Incorrect card details",
+      "Network connection issue",
+    ],
+    retry: "Try Again",
+    support: "Support",
+    back: "Go Back",
+    code: "Error Code",
+    time: "Time",
+  },
+};
+
+const ERROR_CODE = "ERR-4082";
+
+export default function PaymentFailed() {
+  const [lang, setLang] = useState("en");
+  const [visible, setVisible] = useState(false);
+  const [shake, setShake] = useState(false);
+  const [time] = useState(() =>
+    new Date().toLocaleTimeString("en-GB", {
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+    })
+  );
+
+  const t = translations[lang as "uz" | "ru" | "en"];
+
+  useEffect(() => {
+    const timer = setTimeout(() => setVisible(true), 100);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const handleRetry = () => {
+    setShake(true);
+    setTimeout(() => setShake(false), 600);
+  };
+
+  return (
+    <>
+      <style>{`
+        @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');
+
+        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+        :root {
+          --red: #E83A3A;
+          --red-dark: #C02828;
+          --red-glow: rgba(232,58,58,0.18);
+          --bg: #0D0D0D;
+          --surface: #141414;
+          --surface2: #1C1C1C;
+          --border: rgba(255,255,255,0.07);
+          --text: #F0EDE8;
+          --muted: rgba(240,237,232,0.45);
+        }
+
+        body {
+          background: var(--bg);
+          font-family: 'DM Sans', sans-serif;
+          color: var(--text);
+          min-height: 100vh;
+        }
+
+        .page {
+          min-height: 100vh;
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          position: relative;
+          overflow: hidden;
+        }
+
+        /* Noise overlay */
+        .page::before {
+          content: '';
+          position: fixed;
+          inset: 0;
+          background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
+          pointer-events: none;
+          z-index: 0;
+          opacity: 0.6;
+        }
+
+        /* Left panel */
+        .left {
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          padding: 2.5rem;
+          border-right: 1px solid var(--border);
+          z-index: 1;
+          opacity: 0;
+          transform: translateX(-30px);
+          transition: opacity 0.7s ease, transform 0.7s ease;
+        }
+        .left.visible { opacity: 1; transform: translateX(0); }
+
+        .lang-switcher {
+          display: flex;
+          gap: 0.4rem;
+          align-self: flex-start;
+        }
+        .lang-btn {
+          background: transparent;
+          border: 1px solid var(--border);
+          color: var(--muted);
+          font-family: 'DM Sans', sans-serif;
+          font-size: 0.7rem;
+          font-weight: 500;
+          letter-spacing: 0.1em;
+          text-transform: uppercase;
+          padding: 0.35rem 0.7rem;
+          border-radius: 2rem;
+          cursor: pointer;
+          transition: all 0.2s;
+        }
+        .lang-btn:hover { color: var(--text); border-color: rgba(255,255,255,0.2); }
+        .lang-btn.active {
+          background: var(--red);
+          border-color: var(--red);
+          color: #fff;
+        }
+
+        .title-block { flex: 1; display: flex; align-items: center; }
+
+        .main-title {
+          font-family: 'Bebas Neue', sans-serif;
+          font-size: clamp(4.5rem, 8vw, 7rem);
+          line-height: 0.9;
+          letter-spacing: 0.02em;
+          color: var(--text);
+          white-space: pre-line;
+          position: relative;
+        }
+
+        .title-accent {
+          display: block;
+          color: var(--red);
+          position: relative;
+        }
+        .title-accent::after {
+          content: '';
+          position: absolute;
+          bottom: -4px;
+          left: 0;
+          width: 100%;
+          height: 3px;
+          background: var(--red);
+          transform: scaleX(0);
+          transform-origin: left;
+          animation: underline-grow 0.5s 0.9s ease forwards;
+        }
+        @keyframes underline-grow { to { transform: scaleX(1); } }
+
+        .meta-row {
+          display: flex;
+          gap: 2rem;
+          border-top: 1px solid var(--border);
+          padding-top: 1.5rem;
+        }
+        .meta-item { display: flex; flex-direction: column; gap: 0.25rem; }
+        .meta-label {
+          font-size: 0.65rem;
+          letter-spacing: 0.12em;
+          text-transform: uppercase;
+          color: var(--muted);
+        }
+        .meta-value {
+          font-family: 'Bebas Neue', sans-serif;
+          font-size: 1.1rem;
+          letter-spacing: 0.05em;
+          color: var(--red);
+        }
+
+        /* Right panel */
+        .right {
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 2.5rem 3rem;
+          z-index: 1;
+          opacity: 0;
+          transform: translateX(30px);
+          transition: opacity 0.7s 0.2s ease, transform 0.7s 0.2s ease;
+        }
+        .right.visible { opacity: 1; transform: translateX(0); }
+
+        /* Glowing orb background */
+        .orb {
+          position: absolute;
+          width: 350px;
+          height: 350px;
+          border-radius: 50%;
+          background: radial-gradient(circle, rgba(232,58,58,0.12) 0%, transparent 70%);
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          pointer-events: none;
+          animation: pulse-orb 4s ease-in-out infinite;
+        }
+        @keyframes pulse-orb {
+          0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
+          50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
+        }
+
+        .badge {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.5rem;
+          background: var(--red-glow);
+          border: 1px solid rgba(232,58,58,0.3);
+          border-radius: 2rem;
+          padding: 0.4rem 1rem;
+          font-size: 0.75rem;
+          font-weight: 500;
+          letter-spacing: 0.06em;
+          color: var(--red);
+          margin-bottom: 2rem;
+          width: fit-content;
+        }
+        .badge-dot {
+          width: 6px; height: 6px;
+          border-radius: 50%;
+          background: var(--red);
+          animation: blink 1.2s ease-in-out infinite;
+        }
+        @keyframes blink {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.2; }
+        }
+
+        .icon-wrap {
+          width: 80px; height: 80px;
+          border-radius: 50%;
+          background: var(--surface2);
+          border: 1px solid rgba(232,58,58,0.25);
+          display: flex; align-items: center; justify-content: center;
+          margin-bottom: 2rem;
+          position: relative;
+          animation: shake-anim 0s ease;
+        }
+        .icon-wrap.shake { animation: shake-anim 0.5s ease; }
+        @keyframes shake-anim {
+          0%, 100% { transform: translateX(0) rotate(0); }
+          15% { transform: translateX(-6px) rotate(-3deg); }
+          30% { transform: translateX(6px) rotate(3deg); }
+          45% { transform: translateX(-4px) rotate(-2deg); }
+          60% { transform: translateX(4px) rotate(2deg); }
+          75% { transform: translateX(-2px) rotate(-1deg); }
+        }
+        .icon-ring {
+          position: absolute;
+          inset: -8px;
+          border-radius: 50%;
+          border: 1px solid rgba(232,58,58,0.15);
+          animation: ring-pulse 2s ease-in-out infinite;
+        }
+        @keyframes ring-pulse {
+          0%, 100% { transform: scale(1); opacity: 0.5; }
+          50% { transform: scale(1.08); opacity: 1; }
+        }
+
+        .subtitle {
+          font-size: 1rem;
+          font-weight: 300;
+          color: var(--muted);
+          line-height: 1.7;
+          margin-bottom: 2.5rem;
+          max-width: 340px;
+        }
+
+        .reasons-card {
+          background: var(--surface);
+          border: 1px solid var(--border);
+          border-radius: 12px;
+          padding: 1.5rem;
+          margin-bottom: 2.5rem;
+        }
+        .reasons-title {
+          font-size: 0.7rem;
+          font-weight: 500;
+          letter-spacing: 0.1em;
+          text-transform: uppercase;
+          color: var(--muted);
+          margin-bottom: 1rem;
+        }
+        .reason-item {
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+          padding: 0.6rem 0;
+          border-bottom: 1px solid var(--border);
+          font-size: 0.875rem;
+          font-weight: 300;
+          color: var(--text);
+          opacity: 0;
+          transform: translateX(10px);
+          transition: opacity 0.4s ease, transform 0.4s ease;
+        }
+        .reason-item.visible { opacity: 1; transform: translateX(0); }
+        .reason-item:last-child { border-bottom: none; }
+        .reason-dot {
+          width: 4px; height: 4px;
+          border-radius: 50%;
+          background: var(--red);
+          flex-shrink: 0;
+        }
+
+        .actions {
+          display: flex;
+          flex-direction: column;
+          gap: 0.75rem;
+        }
+        .btn-primary {
+          background: var(--red);
+          color: #fff;
+          border: none;
+          border-radius: 8px;
+          padding: 1rem 1.5rem;
+          font-family: 'DM Sans', sans-serif;
+          font-size: 0.9rem;
+          font-weight: 500;
+          cursor: pointer;
+          transition: background 0.2s, transform 0.1s;
+          position: relative;
+          overflow: hidden;
+        }
+        .btn-primary::after {
+          content: '';
+          position: absolute;
+          inset: 0;
+          background: white;
+          opacity: 0;
+          transition: opacity 0.2s;
+        }
+        .btn-primary:hover { background: var(--red-dark); }
+        .btn-primary:hover::after { opacity: 0.05; }
+        .btn-primary:active { transform: scale(0.98); }
+
+        .btn-row { display: flex; gap: 0.75rem; }
+        .btn-secondary {
+          flex: 1;
+          background: var(--surface2);
+          color: var(--text);
+          border: 1px solid var(--border);
+          border-radius: 8px;
+          padding: 0.85rem 1rem;
+          font-family: 'DM Sans', sans-serif;
+          font-size: 0.85rem;
+          font-weight: 400;
+          cursor: pointer;
+          transition: all 0.2s;
+        }
+        .btn-secondary:hover {
+          background: var(--surface);
+          border-color: rgba(255,255,255,0.15);
+        }
+
+        /* Diagonal stripe decoration */
+        .stripe {
+          position: absolute;
+          top: 0; right: 0;
+          width: 1px;
+          height: 100%;
+          background: linear-gradient(to bottom, transparent, var(--red), transparent);
+          opacity: 0.2;
+        }
+
+        /* Responsive */
+        @media (max-width: 768px) {
+          .page { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
+          .left {
+            padding: 1.5rem;
+            border-right: none;
+            border-bottom: 1px solid var(--border);
+            gap: 1.5rem;
+          }
+          .title-block { align-items: flex-start; }
+          .main-title { font-size: clamp(3.5rem, 14vw, 5.5rem); }
+          .right { padding: 2rem 1.5rem; }
+          .orb { width: 250px; height: 250px; }
+          .meta-row { gap: 1.5rem; }
+        }
+
+        @media (max-width: 400px) {
+          .left { padding: 1.25rem; }
+          .right { padding: 1.5rem 1.25rem; }
+          .btn-row { flex-direction: column; }
+          .reasons-card { padding: 1.25rem; }
+        }
+      `}</style>
+
+      <div className="page">
+        {/* LEFT */}
+        <div className={`left ${visible ? "visible" : ""}`}>
+          <div className="lang-switcher">
+            {["uz", "ru", "en"].map((l) => (
+              <button
+                key={l}
+                className={`lang-btn ${lang === l ? "active" : ""}`}
+                onClick={() => setLang(l)}
+              >
+                {l.toUpperCase()}
+              </button>
+            ))}
+          </div>
+
+          <div className="title-block">
+            <h1 className="main-title">
+              {t.title.split("\n").map((line:any, i:number) =>
+                i === 1 ? (
+                  <span key={i} className="title-accent">{line}</span>
+                ) : (
+                  <span key={i} style={{ display: "block" }}>{line}</span>
+                )
+              )}
+            </h1>
+          </div>
+
+          <div className="meta-row">
+            <div className="meta-item">
+              <span className="meta-label">{t.code}</span>
+              <span className="meta-value">{ERROR_CODE}</span>
+            </div>
+            <div className="meta-item">
+              <span className="meta-label">{t.time}</span>
+              <span className="meta-value">{time}</span>
+            </div>
+          </div>
+        </div>
+
+        {/* RIGHT */}
+        <div className={`right ${visible ? "visible" : ""}`}>
+          <div className="orb" />
+          <div className="stripe" />
+
+          <div className="badge">
+            <span className="badge-dot" />
+            {t.badge}
+          </div>
+
+          <div className={`icon-wrap ${shake ? "shake" : ""}`}>
+            <div className="icon-ring" />
+            <svg width="34" height="34" viewBox="0 0 24 24" fill="none">
+              <path
+                d="M12 9v4M12 17h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"
+                stroke="#E83A3A"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </div>
+
+          <p className="subtitle">{t.subtitle}</p>
+
+          <div className="reasons-card">
+            <p className="reasons-title">{t.reasons_title}</p>
+            {t.reasons.map((reason, i) => (
+              <div
+                key={`${lang}-${i}`}
+                className={`reason-item ${visible ? "visible" : ""}`}
+                style={{ transitionDelay: `${0.4 + i * 0.1}s` }}
+              >
+                <span className="reason-dot" />
+                {reason}
+              </div>
+            ))}
+          </div>
+
+          <div className="actions">
+            <button className="btn-primary" onClick={handleRetry}>
+              +998-99-940-00-49
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

components/pages/products/catalog.tsx

@@ -48,8 +48,8 @@ import { useLocale, useTranslations } from "next-intl";
 import Image from "next/image";
 import Link from "next/link";
 import { ArrowUpRight } from "lucide-react";
-import { useCategory } from "@/store/useCategory";
-import { useSubCategory } from "@/store/useSubCategory";
+import { useCategory } from "@/zustand/useCategory";
+import { useSubCategory } from "@/zustand/useSubCategory";
 
 interface CatalogProps {
   id: number;

components/pages/products/filter/catalog.tsx

@@ -0,0 +1,151 @@
+"use client";
+import { useTranslations } from "next-intl";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { useCatalogHook } from "./useCataloghook";
+import { useCatalog } from "@/zustand/useCatalog";
+import { AnimatePresence, motion } from "framer-motion";
+
+export function CatalogSection() {
+  const t = useTranslations();
+  const setParentID = useCatalog((state) => state.setParentID);
+  const parentID = useCatalog((state) => state.parentID);
+  const {
+    catalogSection,
+    catalogsectionChild,
+    setParent,
+    childLoading,
+    openDropdowns,
+    setOpenDropdowns,
+  } = useCatalogHook();
+
+  return (
+    <div className="p-2 border-y flex flex-col overflow-x-auto gap-2 lg:overflow-x-hidden items-start justify-start">
+      {/* ── Top-level categories ─────────────────────────────────────── */}
+      <div className="flex gap-4 items-center">
+        {catalogSection?.map((item: any) => (
+          <div key={item.id} className="flex gap-2">
+            <div
+              onClick={() => {
+                setParent(item.id);
+                setParentID(item.id)
+                setOpenDropdowns((prev) => (prev === item.id ? null : item.id));
+              }}
+              className="flex items-center gap-2"
+            >
+              <p
+                className={`whitespace-nowrap font-medium hover:cursor-pointer hover:text-red-500 transition-colors duration-150 ${
+                  openDropdowns === item.id ? "text-red-500" : ""
+                }`}
+              >
+                {item.name}
+              </p>
+
+              {item.children.length > 0 && (
+                <motion.span
+                  // Chevron rotates smoothly instead of swapping icons
+                  animate={{ rotate: openDropdowns === item.id ? 180 : 0 }}
+                  transition={{ duration: 0.25, ease: "easeInOut" }}
+                  className={`flex h-5 w-5 items-center justify-center rounded ${
+                    openDropdowns === item.id ? "text-red-500" : "text-gray-400"
+                  }`}
+                  aria-label="Dropdown icon"
+                >
+                  {/*
+                   * Single icon that rotates — replaces the ChevronUp/Down swap.
+                   * Logic unchanged: openDropdowns === item.id still drives it.
+                   */}
+                  <ChevronDown className="h-4 w-4" strokeWidth={2.5} />
+                </motion.span>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* ── Sub-category dropdown — animated open/close ───────────────── */}
+      {/*
+       * AnimatePresence watches its children mount/unmount.
+       * The `key` on the motion.div is the open dropdown's id so that
+       * when you switch categories, the old panel exits and new one enters.
+       * All original conditional logic (catalogsectionChild, childLoading,
+       * .length > 0, t("subcategory_not_found")) is untouched.
+       */}
+      <AnimatePresence mode="wait">
+        {catalogsectionChild && openDropdowns !== null && (
+          <motion.div
+            key={openDropdowns} // re-mounts animation when category changes
+            initial={{ opacity: 0, height: 0, y: -6 }}
+            animate={{ opacity: 1, height: "auto", y: 0 }}
+            exit={{ opacity: 0, height: 0, y: -6 }}
+            transition={{
+              duration: 0.28,
+              ease: [0.25, 0.46, 0.45, 0.94], // smooth ease-out cubic
+            }}
+            style={{ overflow: "hidden" }} // required for height: 0 → auto
+            className="flex items-center gap-2 border-gray-400"
+          >
+            {childLoading ? (
+              // Loading skeleton — staggered pulse instead of plain text
+              <div className="flex gap-2 py-2">
+                {[1, 2, 3, 4].map((i) => (
+                  <motion.div
+                    key={i}
+                    className="h-5 rounded bg-gray-700"
+                    style={{ width: 72 + i * 12 }}
+                    animate={{ opacity: [0.4, 0.8, 0.4] }}
+                    transition={{
+                      duration: 1.2,
+                      repeat: Infinity,
+                      delay: i * 0.1,
+                      ease: "easeInOut",
+                    }}
+                  />
+                ))}
+              </div>
+            ) : catalogsectionChild.length > 0 ? (
+              <motion.div
+                className="flex items-center gap-0"
+                // Stagger each child item so they fan in one by one
+                variants={{
+                  show: { transition: { staggerChildren: 0.04 } },
+                  hidden: {},
+                }}
+                initial="hidden"
+                animate="show"
+              >
+                {catalogsectionChild.map((subItem: any) => (
+                  <motion.div
+                    key={subItem.id}
+                    variants={{
+                      hidden: { opacity: 0, x: -8 },
+                      show: { opacity: 1, x: 0 },
+                    }}
+                    transition={{ duration: 0.2, ease: "easeOut" }}
+                    onClick={() => setParentID(subItem.id)}
+                    className="border-l px-3 my-2 hover:cursor-pointer hover:text-red-500 text-white flex items-center justify-center"
+                  >
+                    <p
+                      className={`text-sm whitespace-nowrap transition-colors duration-150 ${
+                        parentID === subItem.id ? "text-red-500" : ""
+                      }`}
+                    >
+                      {subItem.name}
+                    </p>
+                  </motion.div>
+                ))}
+              </motion.div>
+            ) : (
+              <motion.p
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                className="text-sm text-gray-300 py-2"
+              >
+                {t("subcategory_not_found")}
+              </motion.p>
+            )}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

components/pages/products/filter/catalog/filterCatalog.tsx

@@ -1,96 +0,0 @@
-"use client";
-import EmptyData from "@/components/EmptyData";
-import { CategoryType } from "@/lib/types";
-import httpClient from "@/request/api";
-import { getRouteLang } from "@/request/getLang";
-import { endPoints } from "@/request/links";
-import { useCategory } from "@/store/useCategory";
-import { useQuery } from "@tanstack/react-query";
-import { useEffect } from "react";
-import CatalogCardSkeletonSmall from "./loading";
-import Image from "next/image";
-import { ArrowUpRight } from "lucide-react";
-
-export default function FilterCatalog() {
-  const language = getRouteLang();
-  const setCategory = useCategory((state) => state.setCategory);
-  const { data, isLoading } = useQuery({
-    queryKey: ["category", language],
-    queryFn: () => httpClient(endPoints.category.all),
-    select: (data): CategoryType[] => data?.data?.results,
-  });
-  useEffect(() => {
-    console.log("product catalog data: ", data);
-  }, [data]);
-
-  if (isLoading) {
-    return (
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {[...Array(3)].map((_, index) => (
-          <CatalogCardSkeletonSmall key={index} />
-        ))}
-      </div>
-    );
-  }
-
-  // Ma'lumot yo'q holati
-  if (!data || data.length === 0) {
-    return (
-      <EmptyData
-        title="Katalog topilmadi"
-        description="Hozircha kategoriyalar mavjud emas. Keyinroq qaytib keling."
-        icon="shopping"
-      />
-    );
-  }
-
-  return (
-    <div className="max-w-200 w-full mx-auto space-x-5 px-5 flex items-center justify-around my-10 -mt-30 pb-5 relative z-20 sm:overflow-x-hidden overflow-x-scroll">
-      {data?.map((item) => (
-        <div
-          onClick={() => setCategory(item)}
-          className="shrink-0 group relative w-55 h-60 overflow-hidden rounded-2xl bg-[#17161679] border border-white/10 transition-all duration-500 hover:-translate-y-1 hover:border-red-700 cursor-pointer"
-        >
-          {/* Background glow effect */}
-          <div className="absolute inset-0 bg-linear-to-t from-red-600/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-
-          {/* Decorative corner accent */}
-          <div className="absolute top-0 right-0 w-16 h-16 bg-linear-to-br from-red-500/20 to-transparent rounded-bl-full opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-
-          {/* Content container */}
-          <div className="relative h-full flex flex-col p-4">
-            {/* Title section */}
-            <div className="mb-3">
-              <div className="flex items-start justify-between gap-2">
-                <h3 className="text-lg font-unbounded font-bold text-white leading-tight transition-colors duration-300">
-                  {item.name}
-                </h3>
-
-                <div className="shrink-0 w-6 h-6 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-red-500 transition-all duration-300 group-hover:scale-110">
-                  <ArrowUpRight
-                    className="w-3.5 h-3.5 text-white"
-                    strokeWidth={2.5}
-                  />
-                </div>
-              </div>
-            </div>
-
-            {/* Image container */}
-            <div className="relative flex-1 rounded-xl overflow-hidden bg-linear-to-br from-[#444242] to-gray-900/50 border border-white/5 group-hover:border-white/20 transition-all duration-500">
-              <div className="absolute inset-0 bg-linear-to-t from-black/60 via-transparent to-transparent z-10" />
-
-              <div className="relative w-full h-full">
-                <Image
-                  src={item.image}
-                  alt={item.name}
-                  fill
-                  className="object-contain p-3 transition-transform duration-700 group-hover:scale-105"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}

components/pages/products/filter/catalog/loading.tsx

@@ -1,23 +0,0 @@
-// components/CatalogCardSkeletonSmall.tsx
-export default function CatalogCardSkeletonSmall() {
-  return (
-    <div className="relative w-50 h-87.5 overflow-hidden rounded-2xl bg-[#17161679] border border-white/10 animate-pulse">
-      <div className="flex flex-col h-full p-4 gap-3">
-        
-        {/* Title skeleton */}
-        <div className="space-y-2">
-          <div className="h-5 bg-white/10 rounded-md w-3/4" />
-          <div className="h-5 bg-white/10 rounded-md w-1/2" />
-        </div>
-
-        {/* Image skeleton */}
-        <div className="flex-1 rounded-xl bg-linear-to-br from-[#444242] to-gray-900/50 border border-white/5 flex items-center justify-center">
-          <div className="w-20 h-20 bg-white/5 rounded-lg" />
-        </div>
-      </div>
-
-      {/* Shimmer */}
-      <div className="absolute inset-0 -translate-x-full animate-shimmer bg-linear-to-r from-transparent via-white/5 to-transparent" />
-    </div>
-  );
-}

components/pages/products/filter/category.tsx

@@ -0,0 +1,87 @@
+"use client";
+import { useTranslations } from "next-intl";
+import { useCategoryHook } from "./useCategory";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+
+export function Category() {
+  const t = useTranslations();
+  const {
+    categoryBack,
+    handleCategoryClick,
+    openDropdowns,
+    category,
+    subCategory,
+    handleSubCategoryClick,
+    subCategoryBack,
+    subCategoryLoading,
+  } = useCategoryHook();
+
+  return (
+    <div className="lg:space-y-2 space-x-6 lg:p-2 flex lg:flex-col overflow-x-auto lg:overflow-x-hidden items-start justify-start w-full">
+      {categoryBack?.map((item: any) => (
+        <div key={item.id} className="w-full">
+          {/* Main Category */}
+          <div onClick={() => handleCategoryClick(item)} className="">
+            <p
+              className={`whitespace-nowrap font-medium hover:cursor-pointer hover:text-red-500 ${category.id === item.id ? "text-red-500" : ""}`}
+            >
+              {item.name}
+            </p>
+            {item.have_sub_category && (
+              <span
+                className={`flex h-5 w-5 items-center justify-center rounded transition ${
+                  openDropdowns[item.id] ? "text-red-500" : "text-gray-400"
+                }`}
+                aria-label="Dropdown icon"
+              >
+                {openDropdowns[item.id] ? (
+                  <ChevronUp className="h-4 w-4" strokeWidth={2.5} />
+                ) : (
+                  <ChevronDown className="h-4 w-4" strokeWidth={2.5} />
+                )}
+              </span>
+            )}
+          </div>
+
+          {/* ⭐ YANGI: SubCategory Dropdown */}
+          {item.have_sub_category && openDropdowns[item.id] && (
+            <div className="space-y-2 border-l-2 border-gray-400 pl-3">
+              {subCategoryLoading ? (
+                <p className="text-sm text-gray-300">Yuklanmoqda...</p>
+              ) : subCategoryBack && subCategoryBack.length > 0 ? (
+                subCategoryBack.map((subItem: any) => (
+                  <div
+                    key={subItem.id}
+                    onClick={() => handleSubCategoryClick(subItem)}
+                    className="hover:cursor-pointer flex items-center gap-2 hover:bg-gray-600 p-1.5 rounded transition-colors"
+                  >
+                    <span
+                      className={`flex h-4 w-4 items-center justify-center rounded border-2 transition ${
+                        subCategory.id === subItem.id
+                          ? "border-red-600 bg-red-600"
+                          : "border-gray-400 bg-transparent"
+                      }`}
+                      aria-label="SubCategory checkbox"
+                    >
+                      {subCategory.id === subItem.id && (
+                        <Check
+                          className="h-2.5 w-2.5 text-white"
+                          strokeWidth={3}
+                        />
+                      )}
+                    </span>
+                    <p className="text-sm whitespace-nowrap">{subItem.name}</p>
+                  </div>
+                ))
+              ) : (
+                <p className="text-sm text-gray-300">
+                  {t("subcategory_not_found")}
+                </p>
+              )}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}

components/pages/products/filter/filter.tsx

@@ -1,307 +1,11 @@
-"use client";
-import { result } from "@/lib/demoData";
-import { useFilter } from "@/lib/filter-zustand";
-import httpClient from "@/request/api";
-import { endPoints } from "@/request/links";
-import { useCategory } from "@/store/useCategory";
-import { useSubCategory } from "@/store/useSubCategory";
-import { useQuery } from "@tanstack/react-query";
-import { Check, ChevronDown, ChevronUp } from "lucide-react";
-import { useEffect, useState } from "react";
+import { Category } from "./category";
+import { CatalogSection } from "./catalog";
 
 export default function Filter() {
-  const filter = useFilter((state) => state.filter);
-  const toggleFilter = useFilter((state) => state.toggleFilter);
-  const hasData = useFilter((state) => state.hasFilter);
-  const category = useCategory((state) => state.category);
-  const setCategory = useCategory((state) => state.setCategory);
-  const subCategory = useSubCategory((state) => state.subCategory);
-  const setSubCategory = useSubCategory((state) => state.setSubCategory);
-  const clearSubCategory = useSubCategory((state) => state.clearSubCategory);
-
-  const [dataExpanded, setDataExpanded] = useState<boolean>(false);
-  const [numberExpanded, setNumberExpanded] = useState<boolean>(false);
-
-  // ⭐ YANGI: Dropdown state'lar - har bir kategoriya uchun
-  const [openDropdowns, setOpenDropdowns] = useState<Record<number, boolean>>(
-    {},
-  );
-
-  const [catalogData, setCatalogData] = useState<
-    { id: number; name: string; type: string }[]
-  >(result[0].items);
-  const [sizeData, setSizeData] = useState<
-    { id: number; name: string; type: string }[]
-  >(result[1].items);
-
-  // Category data
-  const { data: categoryBack } = useQuery({
-    queryKey: ["category"],
-    queryFn: () => httpClient(endPoints.category.all),
-    select: (data) => {
-      console.log("category data on filter: ", data?.data?.results);
-      return data?.data?.results;
-    },
-  });
-
-  // ⭐ O'ZGARTIRILDI: subCategory so'rovi faqat dropdown ochilganda va have_sub_category true bo'lganda
-  const { data: subCategoryBack, isLoading: subCategoryLoading } = useQuery({
-    queryKey: ["subCategory", category.id],
-    queryFn: () => httpClient(endPoints.subCategory.byId(category.id)),
-    // ⭐ YANGI: Faqat category tanlangan va have_sub_category true bo'lsa ishlaydi
-    enabled:
-      !!category.id &&
-      category.have_sub_category === true &&
-      openDropdowns[category.id] === true,
-    select: (data) => {
-      console.log("subCategory filter data: ", data?.data?.results);
-      return data?.data?.results;
-    },
-  });
-
-  // ⭐ O'ZGARTIRILDI: Catalog va Size query'lari category yoki subCategory ID'ga qarab ishlaydi
-  const activeId = subCategory.id || category.id;
-
-  const { data: catalog } = useQuery({
-    queryKey: ["catalog", activeId],
-    queryFn: () => httpClient(endPoints.filter.catalogCategoryId(activeId)),
-    enabled: !!activeId,
-    select: (data) => {
-      const catalogData = data?.data?.results || [];
-      return catalogData.map((item: any) => ({
-        id: item.id,
-        name: item.name,
-        type: "catalog",
-      }));
-    },
-  });
-
-  const { data: size } = useQuery({
-    queryKey: ["size", activeId],
-    queryFn: () => httpClient(endPoints.filter.sizeCategoryId(activeId)),
-    enabled: !!activeId,
-    select: (data) => {
-      const sizedata = data?.data?.results || [];
-      return sizedata.map((item: any) => ({
-        id: item.id,
-        name: item.name,
-        type: "size",
-      }));
-    },
-  });
-
-  useEffect(() => {
-    catalog && setCatalogData(catalog);
-    size && setSizeData(size);
-  }, [size, catalog]);
-
-  // Bo'lim uchun ko'rsatiladigan itemlar
-  const visibleSectionData = dataExpanded
-    ? catalogData
-    : catalogData.slice(0, 5);
-
-  // O'lcham uchun ko'rsatiladigan itemlar
-  const visibleSectionNumber = numberExpanded
-    ? sizeData
-    : sizeData.slice(0, 10);
-
-  // ⭐ O'ZGARTIRILDI: Category bosilganda dropdown toggle qilish
-  const handleCategoryClick = (item: any) => {
-    if (item.have_sub_category) {
-      // Agar subCategory bo'lsa, dropdown ochish/yopish
-      setOpenDropdowns((prev) => ({
-        ...prev,
-        [item.id]: !prev[item.id],
-      }));
-
-      // Category'ni set qilish (filterlar yangilanishi uchun)
-      setCategory(item);
-
-      // SubCategory'ni tozalash (yangisini tanlash uchun)
-      if (!openDropdowns[item.id]) {
-        clearSubCategory();
-      }
-    } else {
-      // Agar subCategory bo'lmasa, to'g'ridan-to'g'ri category ni set qilish
-      setCategory(item);
-      clearSubCategory();
-
-      // Barcha dropdown'larni yopish
-      setOpenDropdowns({});
-    }
-  };
-
-  // ⭐ YANGI: SubCategory bosilganda
-  const handleSubCategoryClick = (item: any) => {
-    setSubCategory(item);
-  };
-
   return (
-    <div className="space-y-3 lg:max-w-70 lg:px-0 px-3 w-full text-white ">
-      {/* ⭐ O'ZGARTIRILDI: Category filter with dropdown */}
-      <div className="bg-gray-500 rounded-lg w-full">
-        <p className="bg-red-500 text-white p-2 font-semibold font-almarai text-lg rounded-t-lg">
-          Kategoriyalar
-        </p>
-        <div className="lg:space-y-2 space-x-6 lg:p-2 p-5 flex lg:flex-col overflow-x-auto lg:overflow-x-hidden items-start justify-start w-full">
-          {categoryBack?.map((item: any) => (
-            <div key={item.id} className="w-full">
-              {/* Main Category */}
-              <div
-                onClick={() => handleCategoryClick(item)}
-                className="hover:cursor-pointer flex items-center gap-2 w-auto shrink-0 hover:bg-gray-600 lg:p-2 rounded transition-colors"
-              >
-                {/* Checkbox yoki Dropdown icon */}
-                {!item.have_sub_category ? (
-                  <span
-                    className={`flex h-5 w-5 items-center justify-center rounded border-2 transition ${
-                      category.id === item.id
-                        ? "border-red-600 bg-red-600"
-                        : "border-gray-400 bg-transparent"
-                    }`}
-                    aria-label="Filter checkbox"
-                  >
-                    {category.id === item.id && (
-                      <Check className="h-3 w-3 text-white" strokeWidth={3} />
-                    )}
-                  </span>
-                ) : (
-                  <span
-                    className={`flex h-5 w-5 items-center justify-center rounded transition ${
-                      openDropdowns[item.id] ? "text-red-500" : "text-gray-400"
-                    }`}
-                    aria-label="Dropdown icon"
-                  >
-                    {openDropdowns[item.id] ? (
-                      <ChevronUp className="h-4 w-4" strokeWidth={2.5} />
-                    ) : (
-                      <ChevronDown className="h-4 w-4" strokeWidth={2.5} />
-                    )}
-                  </span>
-                )}
-
-                <p className="whitespace-nowrap font-medium">{item.name}</p>
-              </div>
-
-              {/* ⭐ YANGI: SubCategory Dropdown */}
-              {item.have_sub_category && openDropdowns[item.id] && (
-                <div className="ml-7 mt-2 space-y-2 border-l-2 border-gray-400 pl-3">
-                  {subCategoryLoading ? (
-                    <p className="text-sm text-gray-300">Yuklanmoqda...</p>
-                  ) : subCategoryBack && subCategoryBack.length > 0 ? (
-                    subCategoryBack.map((subItem: any) => (
-                      <div
-                        key={subItem.id}
-                        onClick={() => handleSubCategoryClick(subItem)}
-                        className="hover:cursor-pointer flex items-center gap-2 hover:bg-gray-600 p-1.5 rounded transition-colors"
-                      >
-                        <span
-                          className={`flex h-4 w-4 items-center justify-center rounded border-2 transition ${
-                            subCategory.id === subItem.id
-                              ? "border-red-600 bg-red-600"
-                              : "border-gray-400 bg-transparent"
-                          }`}
-                          aria-label="SubCategory checkbox"
-                        >
-                          {subCategory.id === subItem.id && (
-                            <Check
-                              className="h-2.5 w-2.5 text-white"
-                              strokeWidth={3}
-                            />
-                          )}
-                        </span>
-                        <p className="text-sm whitespace-nowrap">
-                          {subItem.name}
-                        </p>
-                      </div>
-                    ))
-                  ) : (
-                    <p className="text-sm text-gray-300">
-                      SubCategory topilmadi
-                    </p>
-                  )}
-                </div>
-              )}
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Bo'lim filtri */}
-      {visibleSectionData && visibleSectionData.length > 0 && (
-        <div className="bg-gray-500 rounded-lg w-full">
-          <p className="bg-red-500 text-white p-2 font-semibold font-almarai text-lg rounded-t-lg">
-            Bo'lim
-          </p>
-          <div className="lg:space-y-3 space-x-6 lg:p-2 p-5 flex lg:flex-col overflow-x-auto lg:overflow-x-hidden items-start justify-start w-full">
-            {visibleSectionData.map((item: any) => (
-              <div
-                key={item.id}
-                onClick={() => toggleFilter(item)}
-                className="hover:cursor-pointer flex items-center gap-2 w-auto shrink-0 hover:bg-gray-600 lg:p-2 rounded transition-colors"
-              >
-                <span
-                  className={`flex h-5 w-5 items-center justify-center rounded border-2 transition ${
-                    hasData(item.name)
-                      ? "border-red-600 bg-red-600"
-                      : "border-gray-400 bg-transparent"
-                  }`}
-                  aria-label="Filter checkbox"
-                >
-                  {hasData(item.name) && (
-                    <Check className="h-3 w-3 text-white" strokeWidth={3} />
-                  )}
-                </span>
-                <p className="whitespace-nowrap">{item.name}</p>
-              </div>
-            ))}
-          </div>
-          <button
-            className="lg:flex hidden p-2 text-lg underline hover:text-red-300 transition"
-            onClick={() => setDataExpanded(!dataExpanded)}
-          >
-            {dataExpanded ? "Yashirish" : "Ko'proq ko'rish"}
-          </button>
-        </div>
-      )}
-
-      {/* O'lcham filtri */}
-      {visibleSectionNumber && visibleSectionNumber.length > 0 && (
-        <div className="bg-gray-500 rounded-lg">
-          <p className="bg-red-500 text-white p-2 font-semibold font-almarai text-lg rounded-t-lg">
-            O'lcham
-          </p>
-          <div className="lg:space-y-3 space-x-6 lg:p-2 p-5 flex lg:flex-col overflow-x-auto lg:overflow-x-hidden items-start justify-start w-full">
-            {visibleSectionNumber.map((item: any) => (
-              <div
-                key={item.id}
-                onClick={() => toggleFilter(item)}
-                className="hover:cursor-pointer flex items-center gap-2 w-auto shrink-0 hover:bg-gray-600 lg:p-2 rounded transition-colors"
-              >
-                <span
-                  className={`flex h-5 w-5 items-center justify-center rounded border-2 transition ${
-                    hasData(item.name)
-                      ? "border-red-600 bg-red-600"
-                      : "border-gray-400 bg-transparent"
-                  }`}
-                  aria-label="Filter checkbox"
-                >
-                  {hasData(item.name) && (
-                    <Check className="h-3 w-3 text-white" strokeWidth={3} />
-                  )}
-                </span>
-                <p>{item.name}</p>
-              </div>
-            ))}
-          </div>
-          <button
-            onClick={() => setNumberExpanded(!numberExpanded)}
-            className="lg:flex hidden p-2 text-lg underline hover:text-red-300 transition"
-          >
-            {numberExpanded ? "Yashirish" : "Ko'proq ko'rish"}
-          </button>
-        </div>
-      )}
+    <div className="space-y-1 lg:px-0 mb-2 px-3 w-full text-white ">
+      <Category />
+      <CatalogSection />
     </div>
   );
 }

components/pages/products/filter/filterInfo.tsx

@@ -1,35 +0,0 @@
-"use client";
-
-import { useFilter } from "@/lib/filter-zustand";
-import { X } from "lucide-react";
-
-export default function FilterInfo() {
-  const filtered = useFilter((state) => state.filter);
-  const resetFilter = useFilter((state) => state.resetFilter);
-  const togleFilter = useFilter((state) => state.toggleFilter);
-  if (filtered.length === 0) {
-    return null;
-  }
-  return (
-    <div className="fixed bottom-13 left-5 z-10 bg-gray-500 p-3 rounded-lg space-y-3 max-w-70 w-full">
-      <p className="text-white ">Found: 20</p>
-      <div className="flex gap-1 flex-wrap">
-        {filtered &&
-          filtered.map((item) => (
-            <div
-              key={item.id}
-              className="flex items-center gap-1 p-1 rounded-lg bg-gray-700 text-white text-sm "
-            >
-              <button onClick={() => togleFilter(item)}>
-                <X size={16} />
-              </button>
-              {item.name}
-            </div>
-          ))}
-      </div>
-      <button onClick={resetFilter} className="text-white underline ">
-        Clear all
-      </button>
-    </div>
-  );
-}

components/pages/products/filter/useCataloghook.ts

@@ -0,0 +1,34 @@
+"use client";
+import httpClient from "@/request/api";
+import { endPoints } from "@/request/links";
+import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+
+export const useCatalogHook = () => {
+  const [openDropdowns, setOpenDropdowns] = useState<number | undefined>(0);
+  const [parent, setParent] = useState(0);
+  const { data: catalogsectionChild, isLoading: childLoading } = useQuery({
+    queryKey: ["catalogsection/", parent],
+    queryFn: () => httpClient(endPoints.filter.child({ id: parent || 0 })),
+    select: (data) => data?.data?.data?.results,
+    enabled: !!openDropdowns,
+  });
+
+  const { data: catalogSection } = useQuery({
+    queryKey: ["catalogsection"],
+    queryFn: () => httpClient(endPoints.filter.catalogSection),
+    select: (data) => data?.data?.data?.results,
+  });
+
+  console.log({ catalogSection });
+  console.log({ catalogsectionChild });
+
+  return {
+    catalogSection,
+    catalogsectionChild,
+    setParent,
+    openDropdowns,
+    setOpenDropdowns,
+    childLoading,
+  };
+};

components/pages/products/filter/useCategory.ts

@@ -0,0 +1,78 @@
+import httpClient from "@/request/api";
+import { endPoints } from "@/request/links";
+import { useCategory } from "@/zustand/useCategory";
+import { useSubCategory } from "@/zustand/useSubCategory";
+import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+
+export const useCategoryHook = () => {
+  const [openDropdowns, setOpenDropdowns] = useState<Record<number, boolean>>(
+    {},
+  );
+
+  const category = useCategory((state) => state.category);
+  const setCategory = useCategory((state) => state.setCategory);
+  const subCategory = useSubCategory((state) => state.subCategory);
+  const setSubCategory = useSubCategory((state) => state.setSubCategory);
+  const clearSubCategory = useSubCategory((state) => state.clearSubCategory);
+
+  // Category data
+  const { data: categoryBack } = useQuery({
+    queryKey: ["category"],
+    queryFn: () => httpClient(endPoints.category.all),
+    select: (data) => data?.data?.results,
+  });
+
+  const { data: subCategoryBack, isLoading: subCategoryLoading } = useQuery({
+    queryKey: ["subCategory", category.id],
+    queryFn: () => httpClient(endPoints.subCategory.byId(category.id)),
+    enabled:
+      !!category.id &&
+      category.have_sub_category === true &&
+      openDropdowns[category.id] === true,
+    select: (data) => data?.data?.results,
+  });
+
+  const handleCategoryClick = (item: any) => {
+    if (item.have_sub_category) {
+      // Agar subCategory bo'lsa, dropdown ochish/yopish
+      setOpenDropdowns((prev) => ({
+        ...prev,
+        [item.id]: !prev[item.id],
+      }));
+
+      // Category'ni set qilish (filterlar yangilanishi uchun)
+      setCategory(item);
+
+      // SubCategory'ni tozalash (yangisini tanlash uchun)
+      if (!openDropdowns[item.id]) {
+        clearSubCategory();
+      }
+    } else {
+      // Agar subCategory bo'lmasa, to'g'ridan-to'g'ri category ni set qilish
+      setCategory(item);
+      clearSubCategory();
+
+      // Barcha dropdown'larni yopish
+      setOpenDropdowns({});
+    }
+  };
+
+  const handleSubCategoryClick = (item: any) => {
+    setSubCategory(item);
+  };
+
+  return {
+    category,
+    setCategory,
+    subCategory,
+    setSubCategory,
+    clearSubCategory,
+    categoryBack,
+    subCategoryBack,
+    subCategoryLoading,
+    handleCategoryClick,
+    handleSubCategoryClick,
+    openDropdowns,
+  };
+};

components/pages/products/product/mianProduct.tsx

@@ -1,57 +1,87 @@
 "use client";
+
 import httpClient from "@/request/api";
 import { endPoints } from "@/request/links";
 import { useQuery } from "@tanstack/react-query";
 import ProductCard from "./productCard";
-import { useCategory } from "@/store/useCategory";
+import { useCategory } from "@/zustand/useCategory";
 import { useFilter } from "@/lib/filter-zustand";
-import { useEffect, useMemo } from "react";
-import { useProductPageInfo } from "@/store/useProduct";
-import { useSubCategory } from "@/store/useSubCategory";
+import { useMemo, useState, useEffect } from "react";
+import { useProductPageInfo } from "@/zustand/useProduct";
+import { useSubCategory } from "@/zustand/useSubCategory";
+import { useTranslations } from "next-intl";
+import PaginationLite from "@/components/paginationUI";
+import { useCatalog } from "@/zustand/useCatalog";
 
 export default function MainProduct() {
-  const category = useCategory((state) => state.category);
-  const subCategory = useSubCategory((state) => state.subCategory);
-  const filter = useFilter((state) => state.filter);
-  const getFiltersByType = useFilter((state) => state.getFiltersByType);
-  const setProduct = useProductPageInfo((state) => state.setProducts);
+  const t = useTranslations();
+  const category = useCategory((s) => s.category);
+  const subCategory = useSubCategory((s) => s.subCategory);
+  const filter = useFilter((s) => s.filter);
+  const getFiltersByType = useFilter((s) => s.getFiltersByType);
+  const setProduct = useProductPageInfo((s) => s.setProducts);
 
-  console.log("subCategory data: ", subCategory);
-  // Query params yaratish
+  const parentID = useCatalog((state) => state.parentID);
+
+  const [currentPage, setCurrentPage] = useState(1);
+
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [parentID]);
+
+  // ── Filter params ────────────────────────────────────────────────────────
   const queryParams = useMemo(() => {
     const catalog = getFiltersByType("catalog");
     const size = getFiltersByType("size");
-
-    // Har bir filter uchun query string yaratish
-    const catalogParams = catalog.map((item) => `catalog=${item.id}`).join("&");
-    const sizeParams = size.map((item) => `size=${item.id}`).join("&");
-
-    // Barcha paramslarni birlashtirish for gitea
+    const catalogParams = catalog.map((i) => `catalog=${i.id}`).join("&");
+    const sizeParams = size.map((i) => `size=${i.id}`).join("&");
     const allParams = [catalogParams, sizeParams].filter(Boolean).join("&");
-
+    setCurrentPage(1);
     return allParams ? `&${allParams}` : "";
-  }, [filter, getFiltersByType]);
+  }, [filter]);
 
-  // Request link yaratish
+  // ── Request URL ──────────────────────────────────────────────────────────
   const requestLink = useMemo(() => {
     const baseLink = category.have_sub_category
-      ? endPoints.product.bySubCategory(subCategory.id)
-      : endPoints.product.byCategory(category.id || 0);
+      ? endPoints.product.bySubCategory({ id: subCategory.id, currentPage })
+      : parentID
+        ? endPoints.product.byCatalogSection({ id: parentID, currentPage })
+        : endPoints.product.byCategory({ id: category.id, currentPage });
 
-    // Query params qo'shish
     return `${baseLink}${queryParams}`;
-  }, [category.id, category.have_sub_category, queryParams , subCategory.id]);
+  }, [
+    category.id,
+    category.have_sub_category,
+    subCategory.id,
+    currentPage,
+    parentID,
+    queryParams,
+  ]);
 
+  // ── Query ────────────────────────────────────────────────────────────────
   const { data, isLoading, error } = useQuery({
-    queryKey: ["products", subCategory.id, queryParams],
+    queryKey: [
+      "products",
+      category.id,
+      category.have_sub_category,
+      subCategory.id,
+      parentID,
+      queryParams,
+      currentPage,
+    ],
     queryFn: () => httpClient(requestLink),
-    select: (data) => {
-      console.log("product: ", data?.data?.data?.results);
-      return data?.data?.data?.results;
-    },
+    placeholderData: (prev) => prev, // no flicker on pagination
+    select: (res) => ({
+      results: res?.data?.data?.results ?? [],
+      totalPages: res?.data?.data?.total_pages ?? 1,
+    }),
   });
 
-  if (isLoading) {
+  const results = data?.results ?? [];
+  const totalPages = data?.totalPages ?? 1;
+
+  // ── Render states ────────────────────────────────────────────────────────
+  if (isLoading && !data) {
     return (
       <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
         {[1, 2, 3].map((i) => (
@@ -63,31 +93,43 @@ export default function MainProduct() {
 
   if (error) {
     return (
-      <div className="text-center text-red-500 py-10">
-        Ma'lumotlarni yuklashda xatolik yuz berdi
-      </div>
+      <div className="text-center text-red-500 py-10">{t("loadingError")}</div>
     );
   }
 
-  if (!data || data.length === 0) {
+  if (!results.length) {
     return (
       <div className="text-center text-gray-400 py-10">
-        Mahsulotlar topilmadi
+        {t("productsNotFound")}
       </div>
     );
   }
 
   return (
-    <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
-      {data.map((item: any) => (
-        <ProductCard
-          key={item.id} // ✅ index o'rniga id ishlatish
-          getProduct={() => setProduct(item)}
-          title={item.name}
-          image={item?.images[0]?.image || ""}
-          slug="special_product"
+    <div className="space-y-4">
+      <div
+        className={`grid lg:grid-cols-4 sm:grid-cols-2 grid-cols-1 gap-5 transition-opacity ${
+          isLoading ? "opacity-50 pointer-events-none" : "opacity-100"
+        }`}
+      >
+        {results.map((item: any) => (
+          <ProductCard
+            key={item.id}
+            getProduct={() => setProduct(item)}
+            title={item.name}
+            image={item?.images?.[0]?.image || ""}
+            slug="special_product"
+          />
+        ))}
+      </div>
+
+      {totalPages > 1 && (
+        <PaginationLite
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onChange={(p) => setCurrentPage(p)}
         />
-      ))}
+      )}
     </div>
   );
 }

components/pages/products/product/productCard.tsx

@@ -1,4 +1,6 @@
-import { useLocale } from "next-intl";
+"use client";
+
+import { useLocale, useTranslations } from "next-intl";
 import Image from "next/image";
 import Link from "next/link";
 
@@ -16,28 +18,144 @@ export default function ProductCard({
   getProduct,
 }: ProductCardProps) {
   const locale = useLocale();
+  const t = useTranslations();
 
   return (
-    <Link href={`/${locale}/catalog_page/products/${slug}`} onClick={getProduct}>
-      <article className="group transition-all duration-300 hover:cursor-pointer max-sm:max-w-100 max-sm:mx-auto max-sm:w-full">
+    <Link
+      href={`/${locale}/catalog_page/products/${slug}`}
+      onClick={getProduct}
+      className="group block"
+    >
+      <article className="
+        relative
+        bg-neutral-900
+        border border-zinc-800
+        rounded-xl
+        overflow-hidden
+        transition-all duration-300
+        hover:border-red-600/60
+        hover:shadow-[0_0_24px_0_rgba(220,38,38,0.15)]
+        max-sm:max-w-100 max-sm:mx-auto max-sm:w-full
+        h-95 flex flex-col 
+      ">
+
+        {/* Top accent line */}
+        <div className="
+          absolute top-0 left-0 right-0 h-0.5
+          bg-linear-to-r from-transparent via-red-600 to-transparent
+          opacity-0 group-hover:opacity-100
+          transition-opacity duration-300
+          z-10
+        " />
+
         {/* Image Container */}
-        <div className="relative rounded-2xl h-45 sm:h-55 md:h-65 lg:w-[95%] w-[90%] mx-auto overflow-hidden">
+        <div className="
+          relative
+          h-48 sm:h-56 md:h-64
+          bg-zinc-900
+          border-b border-zinc-800
+          overflow-hidden
+        ">
+          {/* Background pattern */}
+          <div className="
+            absolute inset-0
+            bg-[radial-gradient(circle_at_center,_rgba(39,39,42,0.8)_0%,_rgba(9,9,11,1)_100%)]
+          " />
+
           <Image
             src={image || "/placeholder.svg"}
             alt={title}
             fill
-            className="object-contain transition-transform duration-300 group-hover:scale-105"
+            className="
+              object-contain
+              p-4
+              transition-transform duration-500
+              group-hover:scale-105
+              drop-shadow-[0_4px_12px_rgba(0,0,0,0.5)]
+            "
             sizes="(max-width: 640px) 90vw, (max-width: 1024px) 45vw, 30vw"
           />
+
+          {/* Hover overlay */}
+          <div className="
+            absolute inset-0
+            bg-red-600/5
+            opacity-0 group-hover:opacity-100
+            transition-opacity duration-300
+          " />
         </div>
 
-        {/* Content Container */}
-        <div className="p-6 sm:p-4">
-          <h3 className="text-lg text-center sm:text-xl md:text-2xl font-unbounded font-bold text-white mb-4 line-clamp-3 group-hover:text-red-400 transition-colors duration-300">
+        {/* Content */}
+        <div className="p-5">
+          {/* Decorative line */}
+          <div className="
+            w-8 h-0.5
+            bg-red-600
+            mb-3
+            transition-all duration-300
+            group-hover:w-16
+          " />
+
+          <h3 className="
+            text-sm sm:text-base
+            font-bold
+            text-zinc-100
+            line-clamp-3
+            leading-snug
+            tracking-wide
+            transition-colors duration-300
+            group-hover:text-white
+          ">
             {title}
           </h3>
+
+          {/* Bottom row */}
+          <div className="
+            flex items-center justify-between
+            mt-4 pt-4
+            border-t border-zinc-800
+          ">
+            <span className="
+              text-xs
+              text-zinc-500
+              tracking-widest
+              uppercase
+              font-medium
+            ">
+              { t("home.services.learnmore")}
+            </span>
+
+            {/* Arrow */}
+            <div className="
+              flex items-center justify-center
+              w-7 h-7
+              rounded-full
+              border border-zinc-700
+              text-zinc-500
+              transition-all duration-300
+              group-hover:border-red-600
+              group-hover:text-red-500
+              group-hover:bg-red-600/10
+            ">
+              <svg
+                width="12"
+                height="12"
+                viewBox="0 0 12 12"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M2 6H10M10 6L7 3M10 6L7 9"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            </div>
+          </div>
         </div>
       </article>
     </Link>
   );
-}
+}

components/pages/products/product/products.tsx

@@ -1,19 +1,16 @@
 import Filter from "../filter/filter";
-import FilterInfo from "../filter/filterInfo";
 import MainProduct from "./mianProduct";
 
 export function Products() {
   return (
     <div className="bg-[#1e1d1c] pb-10 pt-5 px-2">
       <div className="max-w-300 mx-auto w-full z-20 relative">
-        <div className="flex lg:flex-row flex-col lg:items-start items-center gap-5">
+        <div className="flex flex-col items-start gap-2">
           {/* filter part */}
           <Filter />
 
           {/* main products */}
           <MainProduct />
-
-          <FilterInfo />
         </div>
       </div>
     </div>

components/pages/products/slug/features.tsx

@@ -1,4 +1,7 @@
+import { useTranslations } from "next-intl";
+
 export function Features({ features }: { features: string[] }) {
+  const t = useTranslations();
   if (!features || features.length === 0) {
     return null;
   }
@@ -6,14 +9,14 @@ export function Features({ features }: { features: string[] }) {
   return (
     <div className="mt-12">
       <h2 className="text-2xl md:text-3xl font-bold text-white mb-6">
-        Xususiyatlar
+        {t("products.features")}
       </h2>
       <div className="rounded-xl overflow-hidden border border-gray-800 shadow-xl">
         <table className="w-full">
           <thead>
-            <tr className="bg-linear-to-r from-gray-900 to-black border-b border-gray-800">
+            <tr className="bg-linear-to-r from-stone-800 to-black/10 border-b border-gray-800">
               <th className="px-4 py-4 md:px-6 text-left text-sm md:text-base font-semibold text-white">
-                Xususiyat
+                {t("products.feature")}
               </th>
             </tr>
           </thead>
@@ -38,4 +41,4 @@ export function Features({ features }: { features: string[] }) {
       </div>
     </div>
   );
-}
+}

components/pages/products/slug/rightSide.tsx

@@ -1,5 +1,10 @@
-import { usePriceModalStore } from "@/store/useProceModalStore";
-import { Instagram, Send, Share2 } from "lucide-react";
+"use client";
+
+import { usePriceModalStore } from "@/zustand/useProceModalStore";
+import { Check, Instagram, Send, Share2 } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useParams } from "next/navigation";
+import { useState } from "react";
 
 interface RightSideProps {
   id: number;
@@ -21,6 +26,46 @@ export function RightSide({
   image,
 }: RightSideProps) {
   const openModal = usePriceModalStore((state) => state.openModal);
+  const t = useTranslations();
+  const params = useParams();
+  const locale = params.locale || "uz";
+  const [copied, setCopied] = useState(false);
+
+  const handleShare = async () => {
+    const productUrl = `${window.location.origin}/${locale}/catalog_page/products/special_product?productId=${id}`;
+
+    try {
+      // Modern Web Share API dan foydalanish (mobil qurilmalar uchun)
+      if (navigator.share) {
+        await navigator.share({
+          title: title,
+          text: `${title} - ${description.slice(0, 100)}...`,
+          url: productUrl,
+        });
+      } else {
+        // Desktop uchun clipboard ga copy qilish
+        await navigator.clipboard.writeText(productUrl);
+        setCopied(true);
+
+        // 2 soniyadan keyin "Copied" holatini o'chirish
+        setTimeout(() => {
+          setCopied(false);
+        }, 2000);
+      }
+    } catch (error) {
+      console.error("Share error:", error);
+      // Fallback - clipboard ga copy qilish
+      try {
+        await navigator.clipboard.writeText(productUrl);
+        setCopied(true);
+        setTimeout(() => {
+          setCopied(false);
+        }, 2000);
+      } catch (clipboardError) {
+        console.error("Clipboard error:", clipboardError);
+      }
+    }
+  };
 
   const handleGetPrice = () => {
     openModal({
@@ -40,7 +85,7 @@ export function RightSide({
   return (
     <div className="flex flex-col justify-center space-y-6">
       {/* Title */}
-      <h1 className="text-2xl md:text-3xl lg:text-4xl font-unbounded font-bold text-white leading-tight">
+      <h1 className="text-xl md:text-3xl font-unbounded font-bold text-white leading-tight">
         {title}
       </h1>
 
@@ -52,7 +97,9 @@ export function RightSide({
 
       {/* Status Badge */}
       <div>
-        <span className={`inline-block px-4 py-2 rounded-lg text-sm font-semibold ${statusColor}`}>
+        <span
+          className={`inline-block px-4 py-2 rounded-lg text-sm font-semibold ${statusColor}`}
+        >
           {status}
         </span>
       </div>
@@ -65,39 +112,43 @@ export function RightSide({
       </div>
 
       {/* Price Section */}
-      <div className="bg-[#1716169f] rounded-xl p-6 space-y-6">
-        {/* Price */}
-        <div>
-          <p className="text-gray-400 text-sm mb-2">Narx:</p>
-          <h2 className="text-3xl md:text-4xl font-bold text-red-700">
-            ${price}
-          </h2>
-        </div>
-
+      <div className="bg-[#1716169f] rounded-xl p-5 space-y-6">
         {/* Action Button */}
         <button
           onClick={handleGetPrice}
           className="w-full bg-red-700 hover:bg-red-800 text-white font-bold py-4 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 hover:shadow-lg hover:shadow-red-700/50"
         >
-          Xabar yuborish
+          {t("products.send")}
         </button>
 
         {/* Social Share */}
-        <div className="pt-4 border-t border-gray-800">
-          <div className="flex items-center gap-3 mb-3">
-            <Share2 className="w-5 h-5 text-gray-400" />
-            <span className="text-sm text-gray-400">Ulashish:</span>
-          </div>
-          <div className="flex items-center gap-5 mt-5">
-                {/* <a href="" className="p-2 rounded-md bg-white text-red-500 hover:text-white hover:bg-red-500">
-                  <Instagram />
-                </a> */}
-                <a href="https://t.me/ignum_tech" className="p-2 rounded-md bg-white text-red-500 hover:text-white hover:bg-red-500">
-                  <Send />
-                </a>
-              </div>
+        <div className="pt-4 border-t border-gray-800 flex items-center gap-5">
+          <button
+            onClick={handleShare}
+            className="flex items-center gap-3 mb-3 text-gray-400 hover:text-white transition-colors group"
+          >
+            {copied ? (
+              <>
+                <Check className="w-5 h-5 text-green-400" />
+                <span className="text-sm text-green-400">
+                  {t("products.copied") || "Link nusxalandi!"}
+                </span>
+              </>
+            ) : (
+              <>
+                <Share2 className="w-5 h-5 group-hover:scale-110 transition-transform" />
+                <span className="text-sm">{t("products.share")}:</span>
+              </>
+            )}
+          </button>
+          <a
+            href="https://t.me/ignum_tech"
+            className="p-2 rounded-md bg-white text-red-500 hover:text-white hover:bg-red-500"
+          >
+            <Send />
+          </a>
         </div>
       </div>
     </div>
   );
-}
+}

components/pages/products/slug/slider.tsx

@@ -8,12 +8,14 @@ import "swiper/css/navigation";
 import "swiper/css/pagination";
 import "swiper/css/thumbs";
 import Image from "next/image";
+import { useTranslations } from "next-intl";
 
 const navigationPrevEl = ".custom-swiper-prev";
 const navigationNextEl = ".custom-swiper-next";
 
 export function SliderComp({ imgs }: { imgs: string[] }) {
   const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null);
+  const t = useTranslations();
 
   // Agar rasm bo'lmasa
   if (!imgs || imgs.length === 0) {
@@ -33,7 +35,7 @@ export function SliderComp({ imgs }: { imgs: string[] }) {
               d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
             />
           </svg>
-          <p className="text-gray-500">Rasm mavjud emas</p>
+          <p className="text-gray-500">{t("image_not_found")}</p>
         </div>
       </div>
     );
@@ -45,7 +47,10 @@ export function SliderComp({ imgs }: { imgs: string[] }) {
       <div className="relative group">
         <Swiper
           modules={[Navigation, Pagination, Thumbs]}
-          thumbs={{ swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null }}
+          thumbs={{
+            swiper:
+              thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null,
+          }}
           navigation={{
             prevEl: navigationPrevEl,
             nextEl: navigationNextEl,
@@ -79,21 +84,41 @@ export function SliderComp({ imgs }: { imgs: string[] }) {
             <button
               className={`${navigationPrevEl.replace(
                 ".",
-                ""
+                "",
               )} absolute z-10 top-1/2 -translate-y-1/2 left-2 md:left-4 rounded-lg w-10 h-10 md:w-12 md:h-12 bg-red-700/90 hover:bg-red-800 text-white flex items-center justify-center transition opacity-0 group-hover:opacity-100 shadow-lg`}
             >
-              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+              <svg
+                className="w-6 h-6"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M15 19l-7-7 7-7"
+                />
               </svg>
             </button>
             <button
               className={`${navigationNextEl.replace(
                 ".",
-                ""
+                "",
               )} absolute z-10 top-1/2 -translate-y-1/2 right-2 md:right-4 rounded-lg w-10 h-10 md:w-12 md:h-12 bg-red-700/90 hover:bg-red-800 text-white flex items-center justify-center transition opacity-0 group-hover:opacity-100 shadow-lg`}
             >
-              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              <svg
+                className="w-6 h-6"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M9 5l7 7-7 7"
+                />
               </svg>
             </button>
           </>
@@ -130,4 +155,4 @@ export function SliderComp({ imgs }: { imgs: string[] }) {
       )}
     </div>
   );
-}
+}

components/pages/services/index.ts

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

components/pages/services/serviceFaq.tsx

@@ -1,53 +1,54 @@
 import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
-import FAQAccordion from "../faq/faqAccardion";
-import { useTranslations } from "next-intl";
+import FAQAccordion, { FAQItem } from "../faq/faqAccardion";
+import { useLocale, useTranslations } from "next-intl";
 
 export function ServiceFaq() {
   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 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 /> FAQ
+          <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"
         >
-          General Questions
+          {t("faq.banner.topic")}
         </h1>
       </div>
 
       {/* FAQ Section */}
-      <div className="md:col-span-2 max-w-6xl mx-auto w-full">
+      <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>
+  );
+}

components/pages/subCategory/body.tsx

@@ -3,11 +3,13 @@
 import httpClient from "@/request/api";
 import { endPoints } from "@/request/links";
 import { useQuery } from "@tanstack/react-query";
-import { useCategory } from "@/store/useCategory";
+import { useCategory } from "@/zustand/useCategory";
 import Card from "./card";
+import { useTranslations } from "next-intl";
 
 export function MainSubCategory() {
   const category = useCategory((state) => state.category);
+  const t = useTranslations();
   const { data, isLoading, error } = useQuery({
     queryKey: ["subCategory"],
     queryFn: () => httpClient(endPoints.subCategory.byId(category.id)),
@@ -27,7 +29,7 @@ export function MainSubCategory() {
   if (error) {
     return (
       <div className="text-center text-red-500 py-10">
-        Ma'lumotlarni yuklashda xatolik yuz berdi
+        {t("loading_error")}
       </div>
     );
   }
@@ -35,7 +37,7 @@ export function MainSubCategory() {
   if (!data || data.length === 0) {
     return (
       <div className="text-center text-gray-400 py-10">
-        Mahsulotlar topilmadi
+        {t("products_not_found")}
       </div>
     );
   }
@@ -43,7 +45,7 @@ export function MainSubCategory() {
     <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
       {data.map((item: any) => (
         <Card
-          key={item.id} // ✅ index o'rniga id ishlatish
+          key={item.id}
           title={item.name}
           image={item.image}
           slug={item.slug}

components/pages/subCategory/card.tsx

@@ -1,4 +1,4 @@
-import { useSubCategory } from "@/store/useSubCategory";
+import { useSubCategory } from "@/zustand/useSubCategory";
 import { useLocale } from "next-intl";
 import Image from "next/image";
 import Link from "next/link";
@@ -50,7 +50,7 @@ export default function Card({
 
         {/* Content Container */}
         <div className="p-6 sm:p-4">
-          <h3 className="text-lg text-center sm:text-xl md:text-2xl font-unbounded font-bold text-white mb-4 line-clamp-3 group-hover:text-red-400 transition-colors duration-300">
+          <h3 className="text-lg text-center font-unbounded font-bold text-white mb-4 line-clamp-3 group-hover:text-red-400 transition-colors duration-300">
             {title}
           </h3>
         </div>

components/paginationUI.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination";
+
+type Props = {
+  currentPage: number;
+  totalPages: number;
+  onChange: (page: number) => void;
+};
+
+export default function PaginationLite({
+  currentPage,
+  totalPages,
+  onChange,
+}: Props) {
+  const getPages = () => {
+    const visibleCount = 7; // maximum number of items to show (including ellipses)
+    const pages: (number | string)[] = [];
+
+    // If total pages are within visible limit, show all
+    if (totalPages <= visibleCount) {
+      for (let i = 1; i <= totalPages; i++) pages.push(i);
+      return pages;
+    }
+
+    // If current page is near the beginning: show 1..5, ellipsis, last
+    if (currentPage <= 4) {
+      for (let i = 1; i <= 5; i++) pages.push(i);
+      pages.push("…", totalPages);
+      return pages;
+    }
+
+    // If current page is near the end: show first, ellipsis, last-4..last
+    if (currentPage >= totalPages - 3) {
+      pages.push(1, "…");
+      for (let i = totalPages - 4; i <= totalPages; i++) pages.push(i);
+      return pages;
+    }
+
+    // Middle case: first, ellipsis, current-1, current, current+1, ellipsis, last
+    pages.push(
+      1,
+      "…",
+      currentPage - 1,
+      currentPage,
+      currentPage + 1,
+      "…",
+      totalPages,
+    );
+    return pages;
+  };
+
+  const pages = getPages();
+
+  return (
+    <Pagination className="w-full flex justify-center items-center mx-auto">
+      <PaginationContent className="w-full px-auto items-center flex justify-center ">
+        {totalPages !== 1 && (
+          <PaginationPrevious
+            className="hover:cursor-pointer text-white hover:text-white"
+            onClick={() => onChange(Math.max(1, currentPage - 1))}
+          />
+        )}
+
+        {/* Pages */}
+        {pages.map((p, idx) =>
+          p === "…" ? (
+            <PaginationItem key={idx} className="px-2 text-white">
+              …
+            </PaginationItem>
+          ) : (
+            <PaginationItem key={idx}>
+              <PaginationLink
+                isActive={p === currentPage}
+                className={`hover:cursor-pointer ${p === currentPage ? "text-black scale-110 text-[20px] font-medium" : "text-white"} hover:text-white border`}
+                onClick={() => onChange(Number(p))}
+              >
+                {p}
+              </PaginationLink>
+            </PaginationItem>
+          ),
+        )}
+        {totalPages !== 1 && (
+          <PaginationNext
+            className="hover:cursor-pointer text-white hover:text-white"
+            onClick={() => onChange(Math.min(totalPages, currentPage + 1))}
+          />
+        )}
+      </PaginationContent>
+    </Pagination>
+  );
+}

components/priceContact.tsx

@@ -3,7 +3,7 @@ import { useTranslations } from "next-intl";
 import Image from "next/image";
 import { useState, useEffect } from "react";
 import { X } from "lucide-react";
-import { usePriceModalStore } from "@/store/useProceModalStore";
+import { usePriceModalStore } from "@/zustand/useProceModalStore";
 import { useMutation } from "@tanstack/react-query";
 import httpClient from "@/request/api";
 import { endPoints } from "@/request/links";
@@ -55,7 +55,7 @@ export function PriceModal() {
       });
       setErrors({
         name: "",
-        number: '',
+        number: "",
       });
     }
   }, [isOpen]);
@@ -144,8 +144,6 @@ export function PriceModal() {
       number: Number(cleanPhone.slice(3)), // ✅ String sifatida yuborish
       product: product?.id || 0,
     };
-
-    console.log("Sended data:", sendedData);
     formRequest.mutate(sendedData);
   };
 
@@ -264,4 +262,4 @@ export function PriceModal() {
       </div>
     </div>
   );
-}
+}

components/ui/breadcrumb.tsx

@@ -13,7 +13,7 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
     <ol
       data-slot="breadcrumb-list"
       className={cn(
-        'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
+        'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-words sm:gap-2.5',
         className,
       )}
       {...props}

components/ui/dropdown-menu.tsx

@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
-import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
+import * as React from "react"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/lib/utils"
 
 function DropdownMenu({
   ...props
@@ -16,7 +16,7 @@ function DropdownMenuPortal({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
   return (
-    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+    <DropdownMenuPrimitive.Portal {...props} />
   )
 }
 
@@ -42,8 +42,8 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
-          className,
+          "border-[#1e1d1c] text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-[#1e1d1c] border p-1 shadow-md",
+          className
         )}
         {...props}
       />
@@ -62,11 +62,11 @@ function DropdownMenuGroup({
 function DropdownMenuItem({
   className,
   inset,
-  variant = 'default',
+  variant = "default",
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
   inset?: boolean
-  variant?: 'default' | 'destructive'
+  variant?: "default" | "destructive"
 }) {
   return (
     <DropdownMenuPrimitive.Item
@@ -75,7 +75,7 @@ function DropdownMenuItem({
       data-variant={variant}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        className
       )}
       {...props}
     />
@@ -93,7 +93,7 @@ function DropdownMenuCheckboxItem({
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        className
       )}
       checked={checked}
       {...props}
@@ -129,7 +129,7 @@ function DropdownMenuRadioItem({
       data-slot="dropdown-menu-radio-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        className
       )}
       {...props}
     >
@@ -155,8 +155,8 @@ function DropdownMenuLabel({
       data-slot="dropdown-menu-label"
       data-inset={inset}
       className={cn(
-        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
-        className,
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
       )}
       {...props}
     />
@@ -170,7 +170,7 @@ function DropdownMenuSeparator({
   return (
     <DropdownMenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
-      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
       {...props}
     />
   )
@@ -179,13 +179,13 @@ function DropdownMenuSeparator({
 function DropdownMenuShortcut({
   className,
   ...props
-}: React.ComponentProps<'span'>) {
+}: React.ComponentProps<"span">) {
   return (
     <span
       data-slot="dropdown-menu-shortcut"
       className={cn(
-        'text-muted-foreground ml-auto text-xs tracking-widest',
-        className,
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
       )}
       {...props}
     />
@@ -212,7 +212,7 @@ function DropdownMenuSubTrigger({
       data-inset={inset}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        className
       )}
       {...props}
     >
@@ -230,8 +230,8 @@ function DropdownMenuSubContent({
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
-        className,
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
       )}
       {...props}
     />

components/ui/pagination.tsx

@@ -1,20 +1,20 @@
-import * as React from 'react'
+import * as React from "react"
 import {
   ChevronLeftIcon,
   ChevronRightIcon,
   MoreHorizontalIcon,
-} from 'lucide-react'
+} from "lucide-react"
 
-import { cn } from '@/lib/utils'
-import { Button, buttonVariants } from '@/components/ui/button'
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"
 
-function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
   return (
     <nav
       role="navigation"
       aria-label="pagination"
       data-slot="pagination"
-      className={cn('mx-auto flex w-full justify-center', className)}
+      className={cn("mx-auto flex w-full justify-center", className)}
       {...props}
     />
   )
@@ -23,42 +23,42 @@ function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
 function PaginationContent({
   className,
   ...props
-}: React.ComponentProps<'ul'>) {
+}: React.ComponentProps<"ul">) {
   return (
     <ul
       data-slot="pagination-content"
-      className={cn('flex flex-row items-center gap-1', className)}
+      className={cn("flex flex-row items-center gap-1", className)}
       {...props}
     />
   )
 }
 
-function PaginationItem({ ...props }: React.ComponentProps<'li'>) {
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
   return <li data-slot="pagination-item" {...props} />
 }
 
 type PaginationLinkProps = {
   isActive?: boolean
-} & Pick<React.ComponentProps<typeof Button>, 'size'> &
-  React.ComponentProps<'a'>
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+  React.ComponentProps<"a">
 
 function PaginationLink({
   className,
   isActive,
-  size = 'icon',
+  size = "icon",
   ...props
 }: PaginationLinkProps) {
   return (
     <a
-      aria-current={isActive ? 'page' : undefined}
+      aria-current={isActive ? "page" : undefined}
       data-slot="pagination-link"
       data-active={isActive}
       className={cn(
         buttonVariants({
-          variant: isActive ? 'outline' : 'ghost',
+          variant: isActive ? "outline" : "ghost",
           size,
         }),
-        className,
+        className
       )}
       {...props}
     />
@@ -73,11 +73,10 @@ function PaginationPrevious({
     <PaginationLink
       aria-label="Go to previous page"
       size="default"
-      className={cn('gap-1 px-2.5 sm:pl-2.5', className)}
+      className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
       {...props}
     >
       <ChevronLeftIcon />
-      <span className="hidden sm:block">Previous</span>
     </PaginationLink>
   )
 }
@@ -90,10 +89,9 @@ function PaginationNext({
     <PaginationLink
       aria-label="Go to next page"
       size="default"
-      className={cn('gap-1 px-2.5 sm:pr-2.5', className)}
+      className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
       {...props}
     >
-      <span className="hidden sm:block">Next</span>
       <ChevronRightIcon />
     </PaginationLink>
   )
@@ -102,12 +100,12 @@ function PaginationNext({
 function PaginationEllipsis({
   className,
   ...props
-}: React.ComponentProps<'span'>) {
+}: React.ComponentProps<"span">) {
   return (
     <span
       aria-hidden
       data-slot="pagination-ellipsis"
-      className={cn('flex size-9 items-center justify-center', className)}
+      className={cn("flex size-9 items-center justify-center", className)}
       {...props}
     >
       <MoreHorizontalIcon className="size-4" />
@@ -124,4 +122,4 @@ export {
   PaginationPrevious,
   PaginationNext,
   PaginationEllipsis,
-}
+}

lib/animations.ts

@@ -0,0 +1,33 @@
+export const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.1,
+    },
+  },
+};
+
+export const itemVariants = {
+  hidden: { opacity: 0, y: 30 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.6,
+      ease: [0.22, 1, 0.36, 1] as const,
+    },
+  },
+};
+
+export const cardVariants = {
+  hidden: { opacity: 0, scale: 0.95 },
+  visible: {
+    opacity: 1,
+    scale: 1,
+    transition: {
+      duration: 0.5,
+      ease: [0.22, 1, 0.36, 1] as const,
+    },
+  },
+};

lib/demoData.ts

@@ -1,14 +1,58 @@
+import { title } from "process";
+
+export const certs = [
+  {
+    id: 1,
+    src: "/images/about/sertificate.webp",
+    title: "Пожаростойкие армированные трубы SLT BLOCKFIRE PP-R-GF",
+    year: "2024",
+    artikul: "PP-R-GF",
+    features: [
+      "СТО 22.21.29-015-17207509-2022 (версия 2) — согласован МЧС России в качестве нормативного документа по пожарной безопасности.",
+      "СТО 22.21.29-021-17207509-2024 «Автоматическая противопожарная защита многоярусных стеллажных конструкций» — согласован МЧС России №ГУ-исх-66586 от 05.07.2024.",
+      "Протоколы испытаний по ГОСТ Р 58832 ИЛ НИЦ ПТ и СП ФГБУ ВНИИПО МЧС России № 2249/2.1-2022 от 03.03.2022, №2683/2.1-2023 от 06.10.2023.",
+      "Свидетельство о государственной регистрации № RU.77.01.34.013.E.001631.07.20 от 07.07.2020.",
+    ],
+  },
+  {
+    id: 2,
+    src: "/images/about/sertificate.webp",
+    title: "Пожаростойкие однослойные трубы SLT BLOCKFIRE PP-R",
+    year: "2023",
+    artikul: "PP-R",
+    features: [
+      "СТО 22.21.29-015-17207509-2022 (версия 2) — согласован МЧС России в качестве нормативного документа по пожарной безопасности.",
+      "СТО 22.21.29-021-17207509-2024 «Автоматическая противопожарная защита многоярусных стеллажных конструкций» — согласован МЧС России №ГУ-исх-66586 от 05.07.2024.",
+      "Протоколы испытаний ИЛ НИЦ ПТ и СП ФГБУ ВНИИПО МЧС России № 2249/2.1-2022 от 03.03.2022, №2683/2.1-2023 от 06.10.2023.",
+      "Свидетельство о государственной регистрации № RU.77.01.34.008.E.001638.07.20 от 08.07.2020.",
+    ],
+  },
+  {
+    id: 3,
+    src: "/images/about/sertificate.webp",
+    title: "Пожаростойкие фитинги SLT BLOCKFIRE PP-R",
+    year: "2023",
+    artikul: "Фитинги",
+    features: [
+      "СТО 22.21.29-015-17207509-2022 (версия 2) — согласован МЧС России в качестве нормативного документа по пожарной безопасности.",
+      "СТО 22.21.29-021-17207509-2024 «Автоматическая противопожарная защита многоярусных стеллажных конструкций» — согласован МЧС России №ГУ-исх-66586 от 05.07.2024.",
+      "Протоколы испытаний по ГОСТ Р 58832 ИЛ НИЦ ПТ и СП ФГБУ ВНИИПО МЧС России № 2249/2.1-2022 от 03.03.2022, №2683/2.1-2023 от 06.10.2023.",
+      "Свидетельство о государственной регистрации № RU.77.01.34.013.E.001630.07.20 от 07.07.2020.",
+    ],
+  },
+];
+
 export const DATA = [
   {
     name: "P-0834405",
     title: "Elektr yong'in detektori-Ypres ver.3",
     status: "full",
-    description: `Xavfsizlik va yong'in qo'l detektori barcha turdagi qabul qilish va nazorat qilish moslamalari bilan ishlash uchun mo'ljallangan. 
-    Detektor GOST R 53325-2012 bo'yicha a sinfiga mos keladi va himoya qopqog'ini ochib, qo'zg'aysan elementini - ishning markazidagi tugmachani 
-    bosgandan so'ng signal signalini hosil qiladi.Detektor korpusining kichik qalinligi uni shikastlanishdan himoya qiladi, tashqi ko'rinishini 
-    yaxshilaydi va faqat o'rnatish uchun qo'shimcha variantni ishlatishga imkon beradi. Elektr detektori-IPR ver.3 faqat HP signal kabellarida ishlashni ta'minlaydi. 
-    Detektorning navbatchilik rejimi qizil rangdagi ko'rinishlar bilan ko'rsatiladi, "yong'in" rejimi - qizil indikatorni doimiy ravishda yoqish orqali. 
-    Tugmani bosgandan va mahkamlagandan so'ng uni dastlabki holatiga qulay tarzda qaytarish( asbob bilan, maxsus kalitsiz); etkazib berish to'plamida shaffof himoya 
+    description: `Xavfsizlik va yong'in qo'l detektori barcha turdagi qabul qilish va nazorat qilish moslamalari bilan ishlash uchun mo'ljallangan.
+    Detektor GOST R 53325-2012 bo'yicha a sinfiga mos keladi va himoya qopqog'ini ochib, qo'zg'aysan elementini - ishning markazidagi tugmachani
+    bosgandan so'ng signal signalini hosil qiladi.Detektor korpusining kichik qalinligi uni shikastlanishdan himoya qiladi, tashqi ko'rinishini
+    yaxshilaydi va faqat o'rnatish uchun qo'shimcha variantni ishlatishga imkon beradi. Elektr detektori-IPR ver.3 faqat HP signal kabellarida ishlashni ta'minlaydi.
+    Detektorning navbatchilik rejimi qizil rangdagi ko'rinishlar bilan ko'rsatiladi, "yong'in" rejimi - qizil indikatorni doimiy ravishda yoqish orqali.
+    Tugmani bosgandan va mahkamlagandan so'ng uni dastlabki holatiga qulay tarzda qaytarish( asbob bilan, maxsus kalitsiz); etkazib berish to'plamida shaffof himoya
     qopqog'ining mavjudligi; tizimga texnik xizmat ko'rsatishni soddalashtirish uchun muhrlash qobiliyati.`,
     features: [
       "Signal pallasida besleme zo'riqishida-9 + 28V;",
@@ -238,3 +282,25 @@ export const result = [
     })),
   },
 ];
+
+export const normativeData = [
+  {
+    title: "certs.slt_blockfire.title",
+    artikul: "SLT BLOCKFIRE",
+    features: [
+      "certs.slt_blockfire.doc1",
+      "certs.slt_blockfire.doc2",
+      "certs.slt_blockfire.doc3",
+      "certs.slt_blockfire.doc4",
+      "certs.slt_blockfire.doc5",
+      "certs.slt_blockfire.doc6",
+      "certs.slt_blockfire.doc7",
+      "certs.slt_blockfire.doc8",
+    ],
+  },
+  {
+    title: "certs.slt_aqua.title",
+    artikul: "SLT AQUA",
+    features: ["certs.slt_aqua.doc1"],
+  },
+];

lib/types.ts

@@ -38,3 +38,26 @@ export interface ProductDetail {
   features: string[];
   images: ProductImage[];
 }
+
+export interface NavbarItem {
+  id: number;
+  name: string;
+  url: string;
+  order: number;
+  open_in_new_tab: boolean;
+  children: NavbarItem[];
+}
+
+export interface BannerType {
+  id: number;
+  image: string;
+  title: string;
+  description: string;
+}
+
+export interface CatalogItem {
+  id: number;
+  name: string;
+  parent: number | null;
+  children: CatalogItem[];
+}

messages/en.json

@@ -120,6 +120,64 @@
       },
       "contact": "CONTACT US",
       "award": "Best Fire Protection Award 2025"
+    },
+    "subPages": {
+      "baza": "Regulatory base",
+      "certificate": "Certificates",
+      "notePP": "Guides"
+    },
+    "normativBaza": {
+      "hero": {
+        "label": "Documents & Standards",
+        "title1": "Regulatory",
+        "title2": "Framework",
+        "description": "Our company installs and supplies fire protection equipment and systems in accordance with current regulatory and legal standards."
+      },
+      "sectionLabel": "Main Directions",
+      "cards": {
+        "card1": {
+          "title": "State Standards",
+          "text": "Equipment and installation works fully comply with national fire safety standards."
+        },
+        "card2": {
+          "title": "Technical Regulations",
+          "text": "All fire protection systems are designed and installed in compliance with current technical regulations."
+        },
+        "card3": {
+          "title": "Safety Requirements",
+          "text": "Each project is individually analyzed, taking into account the safety level of the facility."
+        }
+      },
+      "bottomText": "All works are carried out in accordance with state standards and safety requirements."
+    },
+    "certificatePage": {
+      "hero": {
+        "label": "Official Approvals",
+        "title1": "Certifi",
+        "title2": "cates",
+        "description": "Official certificates and documents confirming the quality of our products and installation services."
+      },
+      "count": {
+        "suffix": "certificates",
+        "description": "Number of official certificates and approval documents obtained by our company during its operations."
+      },
+      "card": {
+        "badge": "Official Document",
+        "view": "View",
+        "download": "Download"
+      },
+      "certificates": {
+        "cert1": {
+          "title": "Certificate 1",
+          "desc": "Official certificate authorizing installation and supply of fire protection systems."
+        }
+      }
+    },
+    "notePPPage": {
+      "title": "Installation Instructions",
+      "varnix": "Installation instructions for welded saddles 2025",
+      "ppFlanes": "Installation instructions for PP flanges",
+      "ppFiting": "Installation instructions for PP pipes and fittings"
     }
   },
   "contact": {
@@ -136,12 +194,12 @@
         "subject": "Subject",
         "message": "Leave us a message"
       },
-      "privacy": "You agree to our friendly privacy policy",
+      "privacy": "You agree to our Privacy Policy.",
       "send": "SEND MESSAGE",
       "email": "EMAIL",
       "emailAddress": "info@ignum-tech.com",
       "location": "Our Location",
-      "address": "Toshkent shahri , Yunusabod tumani , Niyozbek yo'li 3 tor ko'chasi , 39 uy",
+      "address": "39, 3rd Niyozbek Yoli Street, Yunusabad District, Tashkent, Uzbekistan",
       "phone": "Phone"
     }
   },
@@ -160,7 +218,13 @@
       "subtitle": "Ignum Technology Ready",
       "description": "We not only supply equipment but become a successful partner for every client."
     },
-    "ourproducts": "Our Products"
+    "ourproducts": "Our Products",
+    "price": "Price",
+    "send": "Send Message",
+    "share": "Share",
+    "features": "Features",
+    "feature": "Feature",
+    "copied": "Link copied!"
   },
   "faq": {
     "banner": {
@@ -203,13 +267,15 @@
   },
   "navbar": {
     "home": "HOME",
-    "about": "ABOUT",
+    "about": "ABOUT COMPANY",
     "pages": "PAGES",
     "services": "SERVICES",
     "faq": "FAQ",
     "products": "PRODUCTS",
     "contact": "CONTACT",
-    "emergency": "Emergency Call!"
+    "emergency": "Emergency Call!",
+    "catalog": "Catalog",
+    "connect": "Connect with us"
   },
   "footer": {
     "description": "We provide professional services for the installation of fire safety systems and the sale of certified protective equipment.",
@@ -277,14 +343,6 @@
       }
     }
   },
-  "rasmlar": "Images",
-  "fotogalereya": "Photo Gallery",
-  "contactTitle": "Send us your phone number",
-  "contactSubTitle": "Our staff will contact you",
-  "enterPhone": "Enter your phone number",
-  "send": "Sent",
-  "error": "Error!",
-  "succes": "sent!",
   "priceModal": {
     "title": "Get Price",
     "product": {
@@ -316,6 +374,7 @@
     "products": "Products",
     "contact": "Contact",
     "blog": "Blog",
+    "catalog_page": "Products",
     "fire-safety": "Fire Safety",
     "fire-alarm": "Fire Alarm",
     "fire-suppression": "Fire Suppression",
@@ -326,5 +385,48 @@
     "category": "Categories",
     "catalog": "Section",
     "size": "Sizes"
-  }
+  },
+  "certs": {
+    "slt_blockfire": {
+      "title": "Design and Installation of SLT BLOCKFIRE Plastic Pipes",
+      "doc1": "STO 22.21.29-015-17207509-2022, approved by Uzbekistan MES",
+      "doc2": "Fire resistance tests in FGBU VNIIPO Uzbekistan labs",
+      "doc3": "Certification test reports №14143/1 06.09.2018",
+      "doc4": "Fire resistance research reports 29.06.2022 and 11.01.2023",
+      "doc5": "Test protocols for SLT BLOCKFIRE pipes and fittings №2249/2.1-2022",
+      "doc6": "Test protocols for SLT BLOCKFIRE pipes and fittings №2683/2.1-2023",
+      "doc7": "Test protocols for SLT BLOCKFIRE pipes and fittings №134/18-07.2024/12-1/Д-3556",
+      "doc8": "Fire resistance tests for AUP-S-M №131/26-12.2023/12-1/Д-3190"
+    },
+    "slt_aqua": {
+      "title": "SLT AQUA Automatic Fire Protection System",
+      "doc1": "STO 22.21.29-021-17207509-2023, approved by Uzbekistan MES"
+    }
+  },
+  "aboutCerts": {
+    "certificatePage": {
+      "card": {
+        "badge": "certificate"
+      }
+    }
+  },
+  "rasmlar": "Images",
+  "fotogalereya": "Photo Gallery",
+  "contactTitle": "Send us your phone number",
+  "contactSubTitle": "Our staff will contact you",
+  "enterPhone": "Enter your phone number",
+  "send": "Sent",
+  "error": "Error!",
+  "succes": "sent!",
+  "loadingError": "An error occurred while loading data",
+  "productsNotFound": "Products not found",
+  "subcategory_not_found": "Subcategory not found",
+  "section": "Section",
+  "clear_all": "Clear all",
+  "image_not_found": "Image not available",
+  "loading_error": "An error occurred while loading data",
+  "products_not_found": "Products not found",
+  "hide": "Hide",
+  "show_more": "Show more",
+  "category": "Categories"
 }

messages/ru.json

@@ -120,6 +120,64 @@
       },
       "contact": "СВЯЗАТЬСЯ С НАМИ",
       "award": "Лучшая Пожарная Защита 2025"
+    },
+    "subPages": {
+      "baza": "Нормативная база",
+      "certificate": "Сертификаты",
+      "notePP": "Инструкция"
+    },
+    "normativBaza": {
+      "hero": {
+        "label": "Документы и стандарты",
+        "title1": "Нормативная",
+        "title2": "База",
+        "description": "Наша компания осуществляет установку и продажу противопожарных средств и систем на основании действующих нормативно-правовых документов."
+      },
+      "sectionLabel": "Основные направления",
+      "cards": {
+        "card1": {
+          "title": "Государственные стандарты",
+          "text": "Оборудование и монтажные работы полностью соответствуют национальным стандартам пожарной безопасности."
+        },
+        "card2": {
+          "title": "Технические регламенты",
+          "text": "При проектировании и установке противопожарных систем соблюдаются действующие технические регламенты."
+        },
+        "card3": {
+          "title": "Требования безопасности",
+          "text": "Каждый проект анализируется индивидуально с учетом уровня безопасности объекта."
+        }
+      },
+      "bottomText": "Все работы выполняются в соответствии с государственными стандартами и требованиями безопасности."
+    },
+    "certificatePage": {
+      "hero": {
+        "label": "Официальные подтверждения",
+        "title1": "Сертифи",
+        "title2": "каты",
+        "description": "Официальные сертификаты и документы, подтверждающие качество нашей продукции и монтажных работ."
+      },
+      "count": {
+        "suffix": "сертификатов",
+        "description": "Количество официальных сертификатов и подтверждающих документов, полученных компанией за время деятельности."
+      },
+      "card": {
+        "badge": "Официальный документ",
+        "view": "Просмотреть",
+        "download": "Скачать"
+      },
+      "certificates": {
+        "cert1": {
+          "title": "Сертификат 1",
+          "desc": "Официальный сертификат, подтверждающий право на установку и поставку систем пожарной безопасности."
+        }
+      }
+    },
+    "notePPPage": {
+      "title": "Инструкция по монтажу",
+      "varnix": "Инструкция по монтажу вварных седел 2025",
+      "ppFlanes": "Инструкция по монтажу фланцев из ПП",
+      "ppFiting": "Инструкция по монтажу ПП труб и фитингов"
     }
   },
   "contact": {
@@ -136,12 +194,12 @@
         "subject": "Тема",
         "message": "Оставьте нам сообщение"
       },
-      "privacy": "Вы соглашаетесь с нашей дружественной политикой конфиденциальности",
+      "privacy": "Вы соглашаетесь с нашей Политикой конфиденциальности.",
       "send": "ОТПРАВИТЬ СООБЩЕНИЕ",
       "email": "ЭЛЕКТРОННАЯ ПОЧТА",
       "emailAddress": "info@ignum-tech.com",
       "location": "Наше Местоположение",
-      "address": "Toshkent shahri , Yunusabod tumani , Niyozbek yo'li 3 tor ko'chasi , 39 uy",
+      "address": "г. Ташкент, Юнусабадский район, 3-й проезд Ниёзбек йули, дом 39",
       "phone": "Телефон"
     }
   },
@@ -160,11 +218,17 @@
       "subtitle": "Технология Ignum Готова",
       "description": "Мы не просто поставляем оборудование, мы становимся успешным партнером для каждого клиента."
     },
-    "ourproducts": "Наши продукты"
+    "ourproducts": "Наши продукты",
+    "price": "Цена",
+    "send": "Отправить сообщение",
+    "share": "Поделиться",
+    "features": "Характеристики",
+    "feature": "Характеристика",
+    "copied": "Ссылка скопирована!"
   },
   "faq": {
     "banner": {
-      "title": "FAQ",
+      "title": "ЧЗВ",
       "subtitle": "Общие Вопросы",
       "topic": "О РАБОТЕ"
     },
@@ -203,13 +267,15 @@
   },
   "navbar": {
     "home": "ГЛАВНАЯ",
-    "about": "О НАС",
+    "about": "О компании",
     "pages": "СТРАНИЦЫ",
     "services": "УСЛУГИ",
-    "faq": "FAQ",
+    "faq": "ЧЗВ",
     "products": "ПРОДУКТЫ",
     "contact": "КОНТАКТЫ",
-    "emergency": "Экстренный Вызов!"
+    "emergency": "Экстренный Вызов!",
+    "catalog": "Каталог",
+    "connect": "Связаться с Нами"
   },
   "footer": {
     "description": "Мы предоставляем профессиональные услуги по установке систем пожарной безопасности и продаже сертифицированных средств защиты.",
@@ -219,7 +285,7 @@
       "about": "О нас",
       "services": "Услуги",
       "products": "Продукты",
-      "faq": "FAQ"
+      "faq": "ЧЗВ"
     },
     "support": {
       "title": "ПОДДЕРЖКА",
@@ -277,15 +343,7 @@
       }
     }
   },
-  "rasmlar": "Изображения",
-  "fotogalereya": "Фотогалерея",
-  "contactTitle": "Отправьте нам свой номер",
-  "contactSubTitle": "Наши сотрудники свяжутся с вами",
-  "enterPhone": "Введите ваш номер телефона",
-  "send": "Отправить",
-  "error": "Ошибка!",
-  "succes": "Отправлено!",
-  "priceModal": {
+   "priceModal": {
     "title": "Узнать цену",
     "product": {
       "inStock": "В наличии"
@@ -316,6 +374,7 @@
     "products": "Продукция",
     "contact": "Контакты",
     "blog": "Блог",
+    "catalog_page": "Товары",
     "fire-safety": "Пожарная безопасность",
     "fire-alarm": "Пожарная сигнализация",
     "fire-suppression": "Пожаротушение",
@@ -326,5 +385,48 @@
     "category": "Категории",
     "catalog": "Раздел",
     "size": "Размеры"
-  }
+  },
+  "certs": {
+    "slt_blockfire": {
+      "title": "Проектирование и монтаж пластиковых труб SLT BLOCKFIRE",
+      "doc1": "СТО 22.21.29-015-17207509-2022, утверждено МЧС Узбекистана",
+      "doc2": "Испытания на огнестойкость в лабораториях ФГБУ ВНИИПО Узбекистан",
+      "doc3": "Отчеты о сертификационных испытаниях №14143/1 06.09.2018",
+      "doc4": "Отчеты по исследованиям огнестойкости 29.06.2022 и 11.01.2023",
+      "doc5": "Протокол испытаний труб и фитингов SLT BLOCKFIRE №2249/2.1-2022",
+      "doc6": "Протокол испытаний труб и фитингов SLT BLOCKFIRE №2683/2.1-2023",
+      "doc7": "Протокол испытаний труб и фитингов SLT BLOCKFIRE №134/18-07.2024/12-1/Д-3556",
+      "doc8": "Протокол испытаний огнестойкости AUP-S-M №131/26-12.2023/12-1/Д-3190"
+    },
+    "slt_aqua": {
+      "title": "Автоматическая противопожарная защита SLT AQUA",
+      "doc1": "СТО 22.21.29-021-17207509-2023, утверждено МЧС Узбекистана"
+    }
+  },
+  "aboutCerts": {
+    "certificatePage": {
+      "card": {
+        "badge": "сертификат"
+      }
+    }
+  },
+  "rasmlar": "Изображения",
+  "fotogalereya": "Фотогалерея",
+  "contactTitle": "Отправьте нам свой номер",
+  "contactSubTitle": "Наши сотрудники свяжутся с вами",
+  "enterPhone": "Введите ваш номер телефона",
+  "send": "Отправить",
+  "error": "Ошибка!",
+  "succes": "Отправлено!",
+  "loadingError": "Произошла ошибка при загрузке данных",
+  "productsNotFound": "Товары не найдены",
+  "subcategory_not_found": "Подкатегория не найдена",
+  "section": "Раздел",
+  "clear_all": "Очистить всё",
+  "image_not_found": "Изображение отсутствует",
+  "loading_error": "Произошла ошибка при загрузке данных",
+  "products_not_found": "Товары не найдены",
+  "hide": "Скрыть",
+  "show_more": "Показать больше",
+  "category": "Категории"
 }

messages/uz.json

@@ -120,6 +120,64 @@
       },
       "contact": "BIZ BILAN BOG'LANISH",
       "award": "Eng Yaxshi Yong'in Himoyasi 2025"
+    },
+    "subPages": {
+      "baza": "Normativ baza",
+      "certificate": "Sertifikatlar",
+      "notePP": "Qo'llanmalar"
+    },
+    "normativBaza": {
+      "hero": {
+        "label": "Hujjatlar va standartlar",
+        "title1": "Normativ",
+        "title2": "Baza",
+        "description": "Kompaniyamiz yong'inga qarshi vositalar va tizimlarni o'rnatish hamda sotish faoliyatini amaldagi normativ-huquqiy hujjatlar asosida olib boradi."
+      },
+      "sectionLabel": "Asosiy yo'nalishlar",
+      "cards": {
+        "card1": {
+          "title": "Davlat Standartlari",
+          "text": "Yong'in xavfsizligi bo'yicha milliy standartlarga to'liq mos keluvchi uskunalar va montaj ishlari."
+        },
+        "card2": {
+          "title": "Texnik Reglamentlar",
+          "text": "Yong'inga qarshi tizimlarni loyihalash va o'rnatishda amaldagi texnik reglamentlarga rioya qilinadi."
+        },
+        "card3": {
+          "title": "Xavfsizlik Talablari",
+          "text": "Har bir loyiha individual tahlil qilinadi va obyektning xavfsizlik darajasi hisobga olinadi."
+        }
+      },
+      "bottomText": "Barcha ishlar davlat standartlari va xavfsizlik talablariga muvofiq amalga oshiriladi."
+    },
+    "certificatePage": {
+      "hero": {
+        "label": "Rasmiy tasdiqlar",
+        "title1": "Sertifi",
+        "title2": "katlar",
+        "description": "Bizning mahsulotlar va o'rnatish ishlari sifatini tasdiqlovchi rasmiy sertifikatlar va hujjatlar."
+      },
+      "count": {
+        "suffix": "ta sertifikat",
+        "description": "Kompaniyamiz faoliyati davomida olingan rasmiy sertifikat va tasdiqlash hujjatlari soni."
+      },
+      "card": {
+        "badge": "Rasmiy hujjat",
+        "view": "Ko'rish",
+        "download": "Yuklab olish"
+      },
+      "certificates": {
+        "cert1": {
+          "title": "Sertifikat 1",
+          "desc": "Yong'in xavfsizligi tizimlarini o'rnatish va yetkazib berish faoliyatini amalga oshirish uchun berilgan rasmiy sertifikat."
+        }
+      }
+    },
+    "notePPPage": {
+      "title": "Montaj bo‘yicha ko‘rsatma",
+      "varnix": "Payvandlanadigan sedelkalarni o‘rnatish bo‘yicha yo‘riqnoma",
+      "ppFlanes": "PP flaneslarni o‘rnatish bo‘yicha yo‘riqnoma",
+      "ppFiting": "PP quvurlar va fitinglarni o‘rnatish bo‘yicha yo‘riqnoma"
     }
   },
   "contact": {
@@ -136,7 +194,7 @@
         "subject": "Mavzu",
         "message": "Xabaringizni qoldiring"
       },
-      "privacy": "Bizning maxfiylik siyosatimizga rozilik bildirasiz",
+      "privacy": "Siz bizning Maxfiylik siyosatimizga rozilik bildirasiz.",
       "send": "XABAR YUBORISH",
       "email": "ELEKTRON POCHTA",
       "emailAddress": "info@ignum-tech.com",
@@ -146,9 +204,9 @@
     }
   },
   "products": {
-    "noData":{
-      "title":"Katalog topilmadi",
-      "description":"Hozircha kategoriyalar mavjud emas. Keyinroq urinib ko'ring"
+    "noData": {
+      "title": "Katalog topilmadi",
+      "description": "Hozircha kategoriyalar mavjud emas. Keyinroq urinib ko'ring"
     },
     "catalog": {
       "blockdescription": "Avtomatik yong‘in o‘chirish tizimlari va ichki yong‘inga qarshi suv ta’minoti uchun polipropilen quvurlar va fitinglar",
@@ -160,7 +218,13 @@
       "subtitle": "Ignum Texnologiyasi Tayyor",
       "description": "Biz nafaqat uskunalar yetkazib beramiz, balki har bir mijozning muvaffaqiyatli hamkoriga aylanamiz."
     },
-    "ourproducts": "Bizning mahsulotlarimiz"
+    "ourproducts": "Bizning mahsulotlarimiz",
+    "price": "Narx",
+    "send": "Xabar yuborish",
+    "share": "Ulashish",
+    "features": "Xususiyatlar",
+    "feature": "Xususiyat",
+    "copied": "Link nusxalandi!"
   },
   "faq": {
     "banner": {
@@ -203,13 +267,15 @@
   },
   "navbar": {
     "home": "ASOSIY",
-    "about": "BIZ HAQIMIZDA",
+    "about": "KAMPANIYA HAQIDA",
     "pages": "SAHIFALAR",
     "services": "XIZMATLAR",
     "faq": "FAQ",
     "products": "MAHSULOTLAR",
     "contact": "ALOQA",
-    "emergency": "Favqulodda Qo'ng'iroq!"
+    "emergency": "Favqulodda Qo'ng'iroq!",
+    "catalog": "Katalog",
+    "connect": "Biz bilan bog'laning"
   },
   "footer": {
     "description": "Biz yong‘in xavfsizligi tizimlarini o‘rnatish va sertifikatlangan himoya vositalari savdosi bo‘yicha professional xizmatlar ko‘rsatamiz.",
@@ -228,8 +294,8 @@
     },
     "address": "Toshkent shahri , Yunusabod tumani , Niyozbek yo'li 3 tor ko'chasi , 39 uy",
     "create": "{name} - Jamoasi tomonidan ishlab chiqilgan",
-    "terms":"Foydalanish shartlari",
-    "privacy":"Maxfiylik siyosati"
+    "terms": "Foydalanish shartlari",
+    "privacy": "Maxfiylik siyosati"
   },
   "operationalSystems": {
     "title": "Operatsion tizimlar",
@@ -277,14 +343,6 @@
       }
     }
   },
-  "rasmlar": "Rasmlar",
-  "fotogalereya": "Fotogalereya",
-  "contactTitle": "Bizga raqamingizni yuboring",
-  "contactSubTitle": "Xodimlarimiz siz bilan bog'lanishadi",
-  "enterPhone": "Telefon raqamingiz kiriting",
-  "send": "Yuborish",
-  "error": "Xatolik!",
-  "succes": "Yuborildi!",
   "priceModal": {
     "title": "Narxni bilish",
     "product": {
@@ -327,5 +385,48 @@
     "category": "Kategoriyalar",
     "catalog": "Bo'lim",
     "size": "O'lchamlar"
-  }
+  },
+  "certs": {
+    "slt_blockfire": {
+      "title": "SLT BLOCKFIRE plastik quvurlarini loyihalash va o‘rnatish",
+      "doc1": "STO 22.21.29-015-17207509-2022, Moslashtirilgan O‘zbekiston MChS tomonidan",
+      "doc2": "O‘tga chidamlilik laboratoriya sinovlari FGBU VNIIPO O‘zbekiston",
+      "doc3": "Sertifikatsion sinov hisobotlari №14143/1 06.09.2018",
+      "doc4": "O‘tga chidamlilik tadqiqotlari hisobotlari 29.06.2022 va 11.01.2023",
+      "doc5": "SLT BLOCKFIRE quvurlari va fittinglar protokollari №2249/2.1-2022",
+      "doc6": "SLT BLOCKFIRE quvurlari va fittinglar protokollari №2683/2.1-2023",
+      "doc7": "SLT BLOCKFIRE quvurlari va fittinglar protokollari №134/18-07.2024/12-1/Д-3556",
+      "doc8": "O‘tga chidamlilik AUP-S-M sinovlari protokoli №131/26-12.2023/12-1/Д-3190"
+    },
+    "slt_aqua": {
+      "title": "SLT AQUA avtomatik yong‘inga qarshi himoya tizimi",
+      "doc1": "STO 22.21.29-021-17207509-2023, O‘zbekiston MChS tomonidan tasdiqlangan"
+    }
+  },
+  "aboutCerts": {
+    "certificatePage": {
+      "card": {
+        "badge": "sertifikat"
+      }
+    }
+  },
+  "rasmlar": "Rasmlar",
+  "fotogalereya": "Fotogalereya",
+  "contactTitle": "Bizga raqamingizni yuboring",
+  "contactSubTitle": "Xodimlarimiz siz bilan bog'lanishadi",
+  "enterPhone": "Telefon raqamingiz kiriting",
+  "send": "Yuborish",
+  "error": "Xatolik!",
+  "succes": "Yuborildi!",
+  "loadingError": "Ma'lumotlarni yuklashda xatolik yuz berdi",
+  "productsNotFound": "Mahsulotlar topilmadi",
+  "subcategory_not_found": "Subkategoriya topilmadi",
+  "section": "Bo'lim",
+  "clear_all": "Barchasini tozalash",
+  "image_not_found": "Rasm mavjud emas",
+  "loading_error": "Ma'lumotlarni yuklashda xatolik yuz berdi",
+  "products_not_found": "Mahsulotlar topilmadi",
+  "hide":"Yashirish",
+  "show_more":"Ko'proq ko'rish",
+  "category": "Kategoriyalar"
 }

middleware.ts

@@ -1,7 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
 import { match as matchLocale } from "@formatjs/intl-localematcher";
 import Negotiator from "negotiator";
-const PUBLIC_PAGES = ["/login", "/register"];
 
 const LOCALES = ["uz", "ru", "en"];
 const DEFAULT_LOCALE = "uz";
@@ -9,23 +8,18 @@ const DEFAULT_LOCALE = "uz";
 type Locale = (typeof LOCALES)[number];
 
 function getLocaleFromPathname(pathname: string): Locale | null {
-  const segments = pathname.split("/").filter(Boolean);
-  const firstSegment = segments[0];
-
+  const firstSegment = pathname.split("/").filter(Boolean)[0];
   if (firstSegment && LOCALES.includes(firstSegment as Locale)) {
     return firstSegment as Locale;
   }
-
   return null;
 }
 
 function getLocaleFromCookie(request: NextRequest): Locale | null {
   const cookieLocale = request.cookies.get("NEXT_LOCALE")?.value;
-
   if (cookieLocale && LOCALES.includes(cookieLocale as Locale)) {
     return cookieLocale as Locale;
   }
-
   return null;
 }
 
@@ -36,13 +30,8 @@ function getLocaleFromHeaders(request: NextRequest): Locale {
   });
 
   const languages = new Negotiator({ headers: negotiatorHeaders }).languages();
-
   try {
-    return matchLocale(
-      languages,
-      LOCALES as unknown as string[],
-      DEFAULT_LOCALE
-    ) as Locale;
+    return matchLocale(languages, LOCALES as string[], DEFAULT_LOCALE) as Locale;
   } catch {
     return DEFAULT_LOCALE;
   }
@@ -51,86 +40,37 @@ function getLocaleFromHeaders(request: NextRequest): Locale {
 export function middleware(request: NextRequest) {
   const { pathname, search } = request.nextUrl;
 
-  // Skip public files and API routes
-  if (
-    pathname.includes(".") ||
-    pathname.startsWith("/api") ||
-    pathname.startsWith("/_next")
-  ) {
-    return NextResponse.next();
-  }
-
-  // 1. Check URL locale
+  // 1. If URL has a locale, pass it through with headers (+ sync cookie if needed)
   const localeFromPath = getLocaleFromPathname(pathname);
-
-  // 2. Check cookie locale
   const localeFromCookie = getLocaleFromCookie(request);
+  const preferredLocale = localeFromPath ?? localeFromCookie ?? getLocaleFromHeaders(request);
 
-  // 3. Check browser locale
-  const localeFromBrowser = getLocaleFromHeaders(request);
-
-  // Priority: URL > Cookie > Browser
-  const preferredLocale =
-    localeFromPath || localeFromCookie || localeFromBrowser;
-
-  // Faqat kerakli sahifalarni redirect qilamiz
-  const isPublicPage = PUBLIC_PAGES.some((page) => pathname === page);
-
-  if (isPublicPage) {
-    const url = request.nextUrl.clone();
-    url.pathname = `/${DEFAULT_LOCALE}/verify-otp`;
-    url.search = search; // ?code=1111&phone=...
-
-    return NextResponse.redirect(url);
-  }
-
-  // If URL has no locale, redirect with preferred locale
+  // 2. No locale in URL → redirect to preferred locale
   if (!localeFromPath) {
-    const newUrl = new URL(`/${preferredLocale}/${pathname}`, request.url);
+    const newUrl = new URL(`/${preferredLocale}${pathname}`, request.url);
+    newUrl.search = search;
     return NextResponse.redirect(newUrl);
   }
 
-  // If URL locale differs from cookie, update cookie
-  if (localeFromPath !== localeFromCookie) {
-    const response = NextResponse.next();
-
-    // ✅ Set cookie on server side
-    response.cookies.set("NEXT_LOCALE", localeFromPath, {
-      path: "/",
-      maxAge: 31536000, // 1 year
-      sameSite: "lax",
-    });
-
-    // ✅ Pass locale to request headers for server components
-    const requestHeaders = new Headers(request.headers);
-    requestHeaders.set("x-locale", localeFromPath);
-    requestHeaders.set("x-pathname", pathname);
-
-    return NextResponse.next({
-      request: {
-        headers: requestHeaders,
-      },
-    });
-  }
-
-  // Normal flow - just pass locale in headers
-  const response = NextResponse.next();
+  // 3. Build response with locale headers for server components
   const requestHeaders = new Headers(request.headers);
   requestHeaders.set("x-locale", localeFromPath);
   requestHeaders.set("x-pathname", pathname);
 
-  return NextResponse.next({
-    request: {
-      headers: requestHeaders,
-    },
-  });
+  const response = NextResponse.next({ request: { headers: requestHeaders } });
+
+  // 4. Sync cookie if it differs from URL locale
+  if (localeFromPath !== localeFromCookie) {
+    response.cookies.set("NEXT_LOCALE", localeFromPath, {
+      path: "/",
+      maxAge: 31_536_000, // 1 year
+      sameSite: "lax",
+    });
+  }
+
+  return response;
 }
 
 export const config = {
-  matcher: [
-    // Match all pathnames except for
-    // - … if they start with `/api`, `/_next` or `/_vercel`
-    // - … the ones containing a dot (e.g. `favicon.ico`)
-    '/((?!api|_next|_vercel|.*\\..*).*)',
-  ],
+  matcher: ["/((?!api|_next|_vercel|.*\\..*).*)"],
 };

package.json

@@ -55,6 +55,7 @@
     "next": "16.0.10",
     "next-intl": "^4.7.0",
     "next-themes": "^0.4.6",
+    "radix-ui": "^1.4.3",
     "react": "19.2.0",
     "react-day-picker": "9.8.0",
     "react-dom": "19.2.0",

request/links.ts

@@ -1,3 +1,8 @@
+interface ProductTypes {
+  id: number;
+  currentPage: number;
+}
+
 export const endPoints = {
   category: {
     all: "category/",
@@ -6,19 +11,42 @@ export const endPoints = {
     byId: (id: number) => `subCategory/?category=${id}`,
   },
   services: {
-    all: "firesafety/",
-    detail: (id: number) => `/api/firesafety/${id}`,
+    all: "firesafety/?page_size=500",
+    detail: (id: number) => `firesafety/${id}`,
   },
   product: {
-    byCategory: (categoryId: number) => `product/?category=${categoryId}`,
-    bySubCategory: (subCategoryId: number) =>
-      `product/?subCategory=${subCategoryId}`,
+    byCategory: ({ id, currentPage }: ProductTypes) => {
+      let link = "product/?page_size=12";
+      if (id) link += `&category=${id}`;
+      if (currentPage) link += `&page=${currentPage}`;
+
+      return link;
+    },
+    bySubCategory: ({ id, currentPage }: ProductTypes) => {
+      let link = "product/";
+      if (id) link += `?subCategory=${id}`;
+      if (currentPage) link += `&page=${currentPage}`;
+
+      return link;
+    },
+    byCatalogSection: ({ id, currentPage }: ProductTypes) => {
+      let link = "product";
+      if (id) link += `?catalog_section=${id}`;
+      if (currentPage) link += `&page=${currentPage}`;
+
+      return link;
+    },
     detail: (id: number) => `product/${id}/`,
   },
   faq: "faq/",
   gallery: "gallery/?page_size=500",
   contact: "contact/",
   statistics: "statistics/",
+  banner: "banner/?page_size=500",
+  navbar: "navigationitem/?page_size=500",
+  sertificate: "document/?type=certificate",
+  normative: "document/?type=normative",
+  guides: "guide/",
   filter: {
     size: "size/",
     sizePageItems: "size/?page_size=500",
@@ -26,6 +54,12 @@ export const endPoints = {
     catalog: "catalog/",
     catalogPageItems: "catalog/?page_size=500",
     catalogCategoryId: (id: number) => `catalog/?category=${id}&page_size=500`,
+    child: ({ id }: { id?: number }) => {
+      const link = "catalogsection/?page_size=500";
+      if (id) return `${link}&parent=${id}`;
+      return link;
+    },
+    catalogSection: "catalogsection/?page_size=500",
   },
   post: {
     sendNumber: "callBack/",

zustand/useCatalog.ts

@@ -0,0 +1,13 @@
+import { create } from "zustand";
+
+type CatalogType = {
+  parentID: number;
+  setParentID: (id: number) => void;
+};
+
+export const useCatalog = create<CatalogType>((set) => {
+  return {
+    parentID: 0,
+    setParentID: (id: number) => set({ parentID: id }),
+  };
+});