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 { 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/navigation";
+import { useSearchParams } from "next/dist/client/components/navigation";
 
 // Types
 interface ProductImage {
@@ -33,13 +32,11 @@ interface ProductDetail {
 }
 
 export default function SlugPage() {
-  const searchParams = useSearchParams();
-  const productId = searchParams.get("productId");
+
   const productZustand = useProductPageInfo((state) => state.product);
-  const id = productId ? Number(productId) : productZustand.id;
   const { data: product, isLoading } = useQuery({
     queryKey: ["product", productZustand.id],
-    queryFn: () => httpClient(endPoints.product.detail(id)),
+    queryFn: () => httpClient(endPoints.product.detail(productZustand.id)),
     select: (data) => data?.data?.data as ProductDetail,
   });
 
@@ -62,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/page.tsx

@@ -7,7 +7,7 @@ import {
   SystemFeature,
 } from "@/lib/api/demoapi/operationalSystems";
 import { Breadcrumb } from "@/components/breadCrumb";
-import { useServiceDetail } from "@/store/useService";
+import { useServiceDetail } from "@/zustand/useService";
 import { useQuery } from "@tanstack/react-query";
 import httpClient from "@/request/api";
 import { endPoints } from "@/request/links";

app/layout.tsx

@@ -155,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>;
@@ -161,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);
   };
 

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">
+              {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>
-              <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"
-              >
-                {locale === "ru" ? "ФАК" : "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>
+              )}
             </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">
+          {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-base font-semibold hover:text-red-500 transition py-2"
-            onClick={() => setIsMobileMenuOpen(false)}
+              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-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)}
-          >
-            {locale === "ru" ? "ФАК" : "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>
+          )}
         </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,5 +1,3 @@
-"use client";
-
 import Image from "next/image";
 import { Check } from "lucide-react";
 import DotAnimatsiya from "@/components/dot/DotAnimatsiya";

components/pages/home/banner/banner.tsx

@@ -1,13 +1,8 @@
-import { useLocale, useTranslations } from "next-intl";
-import DotAnimatsiya from "../../../dot/DotAnimatsiya";
-import Link from "next/link";
 import { BannerSlider } from "./slider";
 
 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">
+    <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"

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

@@ -9,6 +9,11 @@ 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";
@@ -16,6 +21,11 @@ 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",
@@ -28,14 +38,19 @@ export function BannerSlider() {
       description: t("home.banner.description"),
     },
   ];
+
+  const bannerData = data ?? BANNER_DATA;
+
+  if (isLoading) return <BannerSliderSkeleton />;
+
   return (
-    <div className="relative z-30 h-full mt-20">
+    <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-[10%] top-50 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`}
+        )} 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>
@@ -43,7 +58,7 @@ export function BannerSlider() {
         className={`${navigationNextEl.replace(
           ".",
           "",
-        )} w-10 h-10 absolute z-10 right-[10%] top-50 rounded-full bg-primary text-center text-white lg:flex hidden items-center justify-center hover:bg-red-600 hover:cursor-pointer transition `}
+        )} 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>
@@ -62,7 +77,7 @@ export function BannerSlider() {
           disableOnInteraction: false,
         }}
       >
-        {BANNER_DATA.map((item, index) => (
+        {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">

components/pages/home/ourService.tsx

@@ -10,7 +10,7 @@ import Link from "next/link";
 import { motion } from "framer-motion";
 import { ServicesLoading } from "../services/loading";
 import { EmptyServices } from "../services/empty";
-import { useServiceDetail } from "@/store/useService";
+import { useServiceDetail } from "@/zustand/useService";
 import { cardVariants, containerVariants } from "@/lib/animations";
 
 export function OurService() {

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,92 +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 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,
-  });
-
-  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,303 +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 { useTranslations } from "next-intl";
-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 t = useTranslations();
-
-  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) => 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) => 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">
-                      {t("subcategory_not_found")}
-                    </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">
-            {t("section")}
-          </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,36 +0,0 @@
-"use client";
-
-import { useFilter } from "@/lib/filter-zustand";
-import { X } from "lucide-react";
-import { useTranslations } from "next-intl";
-
-export default function FilterInfo() {
-  const filtered = useFilter((state) => state.filter);
-  const resetFilter = useFilter((state) => state.resetFilter);
-  const togleFilter = useFilter((state) => state.toggleFilter);
-  const t = useTranslations();
-  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">
-      <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 ">
-        {t("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,15 +1,17 @@
 "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 { useMemo, useState } 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 t = useTranslations();
@@ -19,8 +21,15 @@ export default function MainProduct() {
   const getFiltersByType = useFilter((s) => s.getFiltersByType);
   const setProduct = useProductPageInfo((s) => s.setProducts);
 
+  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");
@@ -31,45 +40,48 @@ export default function MainProduct() {
     return allParams ? `&${allParams}` : "";
   }, [filter]);
 
+  // ── Request URL ──────────────────────────────────────────────────────────
   const requestLink = useMemo(() => {
     const baseLink = category.have_sub_category
       ? endPoints.product.bySubCategory({ id: subCategory.id, currentPage })
+      : parentID
+        ? endPoints.product.byCatalogSection({ id: parentID, currentPage })
         : endPoints.product.byCategory({ id: category.id, currentPage });
+
     return `${baseLink}${queryParams}`;
   }, [
     category.id,
     category.have_sub_category,
-    queryParams,
     subCategory.id,
     currentPage,
+    parentID,
+    queryParams,
   ]);
 
+  // ── Query ────────────────────────────────────────────────────────────────
   const { data, isLoading, error } = useQuery({
     queryKey: [
       "products",
-      subCategory.id,
       category.id,
+      category.have_sub_category,
+      subCategory.id,
+      parentID,
       queryParams,
       currentPage,
     ],
     queryFn: () => httpClient(requestLink),
-    placeholderData: (prev) => prev, // ✅ pagination da flicker yo'q
+    placeholderData: (prev) => prev, // no flicker on pagination
     select: (res) => ({
       results: res?.data?.data?.results ?? [],
       totalPages: res?.data?.data?.total_pages ?? 1,
     }),
   });
 
-  // ✅ To'g'ridan select dan olamiz — useEffect + let emas
-  const results = useMemo(() => {
-    return data?.results ?? [];
-  }, [data]);
-  const totalPages = useMemo(() => {
-    return data?.totalPages ?? 1;
-  }, [data]);
+  const results = data?.results ?? [];
+  const totalPages = data?.totalPages ?? 1;
 
+  // ── Render states ────────────────────────────────────────────────────────
   if (isLoading && !data) {
-    // ✅ placeholderData bor — faqat birinchi yuklanishda
     return (
       <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
         {[1, 2, 3].map((i) => (
@@ -94,10 +106,11 @@ export default function MainProduct() {
   }
 
   return (
-    <div >
-      {/* ✅ isLoading da overlay — list o'rnini saqlab, ustidan opacity */}
+    <div className="space-y-4">
       <div
-        className={`grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5 transition-opacity ${isLoading ? "opacity-50 pointer-events-none" : "opacity-100"}`}
+        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

components/pages/products/product/productCard.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useLocale } from "next-intl";
+import { useLocale, useTranslations } from "next-intl";
 import Image from "next/image";
 import Link from "next/link";
 
@@ -18,6 +18,7 @@ export default function ProductCard({
   getProduct,
 }: ProductCardProps) {
   const locale = useLocale();
+  const t = useTranslations();
 
   return (
     <Link
@@ -121,7 +122,7 @@ export default function ProductCard({
               uppercase
               font-medium
             ">
-              Batafsil
+              { t("home.services.learnmore")}
             </span>
 
             {/* Arrow */}

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/rightSide.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { usePriceModalStore } from "@/store/useProceModalStore";
+import { usePriceModalStore } from "@/zustand/useProceModalStore";
 import { Check, Instagram, Send, Share2 } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useParams } from "next/navigation";
@@ -113,14 +113,6 @@ export function RightSide({
 
       {/* Price Section */}
       <div className="bg-[#1716169f] rounded-xl p-5 space-y-6">
-        {/* Price */}
-        {/* <div>
-          <p className="text-gray-400 text-sm mb-2">{t("products.price")}:</p>
-          <h2 className="text-3xl md:text-4xl font-bold text-red-700">
-            ${price}
-          </h2>
-        </div> */}
-
         {/* Action Button */}
         <button
           onClick={handleGetPrice}
@@ -149,9 +141,6 @@ export function RightSide({
               </>
             )}
           </button>
-          {/* <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"

components/pages/services/servicePageServices.tsx

@@ -10,7 +10,7 @@ import Link from "next/link";
 import { motion } from "framer-motion";
 import { ServicesLoading } from "./loading";
 import { EmptyServices } from "./empty";
-import { useServiceDetail } from "@/store/useService";
+import { useServiceDetail } from "@/zustand/useService";
 import { cardVariants, containerVariants } from "@/lib/animations";
 
 export function ServicePageServices() {
@@ -41,8 +41,6 @@ export function ServicePageServices() {
     },
   });
 
-  console.log("service page services: ", data);
-
   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">

components/pages/subCategory/body.tsx

@@ -3,7 +3,7 @@
 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";
 

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";

components/paginationUI.tsx

@@ -78,8 +78,8 @@ export default function PaginationLite({
           ) : (
             <PaginationItem key={idx}>
               <PaginationLink
-                className="hover:cursor-pointer text-white hover:text-white"
                 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}

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";

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

lib/demoData.ts

@@ -1,3 +1,47 @@
+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",
@@ -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": {
@@ -209,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.",
@@ -283,22 +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!",
-  "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",
   "priceModal": {
     "title": "Get Price",
     "product": {
@@ -341,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": {
@@ -170,7 +228,7 @@
   },
   "faq": {
     "banner": {
-      "title": "FAQ",
+      "title": "ЧЗВ",
       "subtitle": "Общие Вопросы",
       "topic": "О РАБОТЕ"
     },
@@ -209,13 +267,15 @@
   },
   "navbar": {
     "home": "ГЛАВНАЯ",
-    "about": "О НАС",
+    "about": "О компании",
     "pages": "СТРАНИЦЫ",
     "services": "УСЛУГИ",
-    "faq": "FAQ",
+    "faq": "ЧЗВ",
     "products": "ПРОДУКТЫ",
     "contact": "КОНТАКТЫ",
-    "emergency": "Экстренный Вызов!"
+    "emergency": "Экстренный Вызов!",
+    "catalog": "Каталог",
+    "connect": "Связаться с Нами"
   },
   "footer": {
     "description": "Мы предоставляем профессиональные услуги по установке систем пожарной безопасности и продаже сертифицированных средств защиты.",
@@ -225,7 +285,7 @@
       "about": "О нас",
       "services": "Услуги",
       "products": "Продукты",
-      "faq": "FAQ"
+      "faq": "ЧЗВ"
     },
     "support": {
       "title": "ПОДДЕРЖКА",
@@ -283,22 +343,6 @@
       }
     }
   },
-  "rasmlar": "Изображения",
-  "fotogalereya": "Фотогалерея",
-  "contactTitle": "Отправьте нам свой номер",
-  "contactSubTitle": "Наши сотрудники свяжутся с вами",
-  "enterPhone": "Введите ваш номер телефона",
-  "send": "Отправить",
-  "error": "Ошибка!",
-  "succes": "Отправлено!",
-  "loadingError": "Произошла ошибка при загрузке данных",
-  "productsNotFound": "Товары не найдены",
-  "subcategory_not_found": "Подкатегория не найдена",
-  "section": "Раздел",
-  "clear_all": "Очистить всё",
-  "image_not_found": "Изображение отсутствует",
-  "loading_error": "Произошла ошибка при загрузке данных",
-  "products_not_found":"Товары не найдены",
    "priceModal": {
     "title": "Узнать цену",
     "product": {
@@ -341,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": {
@@ -209,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.",
@@ -283,22 +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!",
-  "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",
   "priceModal": {
     "title": "Narxni bilish",
     "product": {
@@ -341,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
+  // 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",
     });
   }
 
-  // Normal flow - just pass locale in headers
-  const response = NextResponse.next();
-  const requestHeaders = new Headers(request.headers);
-  requestHeaders.set("x-locale", localeFromPath);
-  requestHeaders.set("x-pathname", pathname);
-
-  return NextResponse.next({
-    request: {
-      headers: requestHeaders,
-    },
-  });
+  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

@@ -16,8 +16,8 @@ export const endPoints = {
   },
   product: {
     byCategory: ({ id, currentPage }: ProductTypes) => {
-      let link = "product/";
-      if (id) link += `?category=${id}`;
+      let link = "product/?page_size=12";
+      if (id) link += `&category=${id}`;
       if (currentPage) link += `&page=${currentPage}`;
 
       return link;
@@ -29,12 +29,24 @@ export const endPoints = {
 
       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",
@@ -42,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 }),
+  };
+});