vreadCrumb added

app/[locale]/catalog_page/page.tsx

@@ -1,3 +1,4 @@
+import { Breadcrumb } from "@/components/breadCrumb";
 import Catalog from "@/components/pages/home/blog/catalog";
 import { ProductBanner } from "@/components/pages/products";
 import { MainSubCategory } from "@/components/pages/subCategory";
@@ -7,6 +8,7 @@ export default function Page() {
     <div className="bg-[#1e1d1c] pb-30">
       <ProductBanner />
       <div className="max-w-300 mx-auto w-full pt-20">
+        <Breadcrumb />
         <Catalog />
       </div>
     </div>

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

@@ -9,6 +9,7 @@ import { AlertCircle } from "lucide-react";
 import { LoadingSkeleton } from "@/components/pages/products/slug/loading";
 import { EmptyState } from "@/components/pages/products/slug/empty";
 import { useEffect } from "react";
+import { Breadcrumb } from "@/components/breadCrumb";
 
 // Types
 interface ProductImage {
@@ -41,7 +42,7 @@ export default function SlugPage() {
     enabled: !!productZustand.id,
   });
 
-  useEffect(()=>console.log("product detail: ",product))
+  useEffect(() => console.log("product detail: ", product));
 
   // Loading State
   if (isLoading) {
@@ -55,12 +56,16 @@ export default function SlugPage() {
 
   // Extract images
   const productImages = product.images?.map((img) => img.image) || [];
-  const mainImage = product.images?.find((img) => img.is_main)?.image || productImages[0] || "";
-  const features = product.features.map((item:any)=>item.name)
+  const mainImage =
+    product.images?.find((img) => img.is_main)?.image || productImages[0] || "";
+  const features = product.features.map((item: any) => item.name);
 
   return (
-    <div className="min-h-screen bg-[#1e1d1c] py-32 lg:py-40 px-4 md:px-8">
+    <div className="min-h-screen bg-[#1e1d1c] px-4 md:px-8">
       <div className="max-w-7xl mx-auto">
+        <div className="pt-30 pb-10">
+          <Breadcrumb />
+        </div>
         {/* Main Product Section */}
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 mb-12">
           {/* Left - Image Slider */}

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

@@ -1,11 +1,18 @@
+"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";
 
 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-15">
+        <Breadcrumb customLabels={{ subCategory: subCategory.name}} />
+      </div>
       <Products />
     </div>
   );

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

@@ -1,3 +1,4 @@
+import { Breadcrumb } from "@/components/breadCrumb";
 import { ProductBanner } from "@/components/pages/products";
 import { MainSubCategory } from "@/components/pages/subCategory";
 
@@ -5,7 +6,10 @@ export default function Page() {
   return (
     <div className="bg-[#1e1d1c] pb-30">
       <ProductBanner />
-      <div className="py-20">
+      <div className="pb-20">
+        <div className="max-w-350 mx-auto w-full py-10">
+          <Breadcrumb />
+        </div>
         <MainSubCategory />
       </div>
     </div>