updated 2 level collection

components/Collection/InnerDetails.js

@@ -57,9 +57,17 @@ const InnerDetails = ({ subCategories }) => {
           {subCategories?.map((sub) => (
             <Col md={6} key={sub.slug}>
               <div className="collections-item">
-                <Link
+                {/* <Link
                   href={sub?.show_detail_page ? `collections/${category}/${sub?.show_detail_page?.slug}` : `/collections/${category}/${sub.slug}`}
-                >
+                > */}
+                <Link
+  href={
+    sub?.show_detail_page
+      ? `/collections/${category}/${sub?.show_detail_page?.slug}`
+      : `/collections/${category}/${sub.slug}`
+  }
+>
+
                   <Image
                     width={868}
                     height={560}

components/Collection/Video.js

@@ -23,7 +23,7 @@ const Video = ({productData}) => {
 
   return (
     <section className="video_sec sec_padd collection-section">
-      <Container className="custom_container">
+      <div className="custom_containers">
         <video
           ref={videoRef}
           autoPlay
@@ -35,7 +35,7 @@ const Video = ({productData}) => {
           <source src={cleanImage(productData?.video?.url)} type="video/mp4" />
           Your browser does not support the video tag.
         </video>
-      </Container>
+      </div>
     </section>
   );
 };

components/Heading.js

@@ -20,7 +20,7 @@ const Heading = ({
   // ✅ IF HTML → render directly
   if (isHtml) {
     return (
-      <div className={`headings mb-1 ${className}`}>
+      <div className={`headings mb-4 ${className}`}>
         {subheading && <Wrapper className="subheading">{subheading}</Wrapper>}
         <Wrapper
           className="heading"
@@ -45,7 +45,7 @@ const Heading = ({
   };
 
   return (
-    <div className={`headings mb-1 ${className}`}>
+    <div className={`headings mb-4 ${className}`}>
       <Wrapper className="subheading">{subheading}</Wrapper>
       <div className="heading-container">
         {headingArray.map((item, index) => (

pages/collections/[category]/[subCategory]/index.js

@@ -2,26 +2,83 @@ import { useRouter } from "next/router";
 import Breadcrumb from "@/components/Common/Breadcrumb";
 import HeadTitle from "@/components/Common/HeadTitle";
 import InnerDetailsSubCategory from "@/components/Collection/InnerDetailsSubCategory";
-import { getCollectionDetailCategoryData } from "@/services/collectionDetailCategoryApi";
+import InnerBannerproduct from "@/components/Collection/InnerBannerproduct";
+import AboutInfo from "@/components/Collection/AboutInfo";
+import Video from "@/components/Collection/Video";
+import Gallery from "@/components/Collection/Gallery";
+import Catalogues from "@/container/Home/Catalogues";
+import { Contact } from "@/container/Home/Contact";
+import CompanyOverview from "@/components/Collection/CompanyOverview";
+import TechnicalDetails from "@/components/Collection/TechnicalDetails";
+import Explore from "@/components/Collection/Explore";
+
+import {
+  getCollectionDetailCategoryData,
+} from "@/services/collectionDetailCategoryApi";
 import { getCollectionSubCategoryData } from "@/services/collectionSubCategoryApi";
+import { getCataloguesBySlug } from "@/services/cataloguesApi";
 
-const SubCategoryPage = ({ products,categoriesSub,activeSubCategory }) => {
-  console.log("products9999", categoriesSub)
+const SubCategoryOrProductPage = ({
+  type,
+  products,
+  productData,
+  activeSubCategory,
+  cataloguesData,
+}) => {
   const router = useRouter();
   const { category, subCategory } = router.query;
-  console.log("subCategory", subCategory)
 
   if (!router.isReady) return null;
 
-  // ⛔ No data
+  /* ======================================================
+     🟢 IF PRODUCT (2 LEVEL PRODUCT PAGE)
+  ====================================================== */
+  if (type === "product") {
+    const subCategoryData = productData.collection_sub_category;
+
+    const breadcrumbData = [
+      { href: "/collections", label: "Collections" },
+      {
+        href: `/collections/${category}`,
+        label: category.replace(/-/g, " "),
+      },
+      {
+        href: router.asPath,
+        label: productData.title,
+      },
+    ];
+
+    return (
+      <>
+        <Breadcrumb breadcrumbData={breadcrumbData} />
+        <InnerBannerproduct productData={productData} />
+        <AboutInfo productData={productData?.aboutInfo} />
+
+        {productData?.isDoorAndPartitionsLayouts && <CompanyOverview />}
+        <Video productData={productData?.video} />
+        {productData?.isDoorAndPartitionsLayouts && <TechnicalDetails />}
+        <Gallery productData={productData?.gallery} />
+        {productData?.isDoorAndPartitionsLayouts && <Explore />}
+
+        {!productData?.isDoorAndPartitionsLayouts && (
+          <Catalogues cataloguesData={cataloguesData} />
+        )}
+
+        <Contact />
+      </>
+    );
+  }
+
+  /* ======================================================
+     🔵 IF SUBCATEGORY (NORMAL 2 LEVEL SUBCATEGORY PAGE)
+  ====================================================== */
+
   if (!products || products.length === 0) {
     return <h1>Sub Category not found</h1>;
   }
 
-  // ✅ Sub-category info
   const subCategoryData = products[0].collection_sub_category;
 
-  // ✅ Breadcrumb
   const breadcrumbData = [
     { href: "/", label: "Home" },
     { href: "/collections", label: "Collections" },
@@ -30,18 +87,11 @@ const SubCategoryPage = ({ products,categoriesSub,activeSubCategory }) => {
       label: category.replace(/-/g, " "),
     },
     {
-      href: `/collections/${category}/${subCategory}`,
+      href: router.asPath,
       label: subCategoryData.title,
     },
   ];
 
-  // ✅ Head title
-  // const headTitleData = {
-  //   title: subCategoryData.title,
-  //   descrition1: "",
-  //   descrition2: "",
-  // };
-
   return (
     <>
       <Breadcrumb breadcrumbData={breadcrumbData} />
@@ -51,38 +101,53 @@ const SubCategoryPage = ({ products,categoriesSub,activeSubCategory }) => {
   );
 };
 
+export default SubCategoryOrProductPage;
+
+/* ======================================================
+   ✅ SERVER SIDE LOGIC
+====================================================== */
+
 export async function getServerSideProps({ params }) {
   try {
     const { subCategory } = params;
 
+    /* 1️⃣ Check if this slug is a PRODUCT */
+    const productCheck = await getCollectionDetailCategoryData(subCategory);
+
+    if (productCheck && productCheck.length > 0) {
+      const cataloguesData = await getCataloguesBySlug();
+
+      return {
+        props: {
+          type: "product",
+          productData: productCheck[0],
+          cataloguesData,
+        },
+      };
+    }
+
+    /* 2️⃣ Otherwise treat as SUBCATEGORY */
     const categoriesSub = await getCollectionSubCategoryData();
     const allProducts = await getCollectionDetailCategoryData();
 
-    // ✅ Filter products by subCategory slug
     const products = allProducts.filter(
       (item) => item.collection_sub_category?.slug === subCategory
     );
 
-    // ✅ Filter sub-category data for HeadTitle
     const activeSubCategory =
       categoriesSub.find((item) => item.slug === subCategory) || null;
 
     return {
       props: {
+        type: "subcategory",
         products,
-        activeSubCategory, // 👈 single object
+        activeSubCategory,
       },
     };
   } catch (error) {
     console.error(error);
     return {
-      props: {
-        products: [],
-        activeSubCategory: null,
-      },
+      notFound: true,
     };
   }
 }
-
-
-export default SubCategoryPage;

styles/globals.css

@@ -265,7 +265,7 @@ button.cust-swiper-button-next {
 /* ======video section===== */
 .video-animate {
   width: 100%;
-  height: 600px; /* Desktop height */
+  /* height: 600px;  */
   object-fit: cover;
   /* border-radius: 20px; */
   cursor: pointer;
@@ -434,6 +434,7 @@ input:focus-visible {
 }
 .product-banner {
   position: relative;
+  height: calc(100vh - 148px);
 }
 .product-banner .info {
   position: absolute;