updated

components/Common/HeadTitle.js

@@ -8,8 +8,8 @@ const HeadTitle = ({categoryData}) => {
     <>
         <section className='let-connect-section '>
             <div className='custom_container container'>
-              <Row className='text-center'>
-                <Col>
+              <Row className='justify-content-center align-items-center text-center'>
+                <Col md={8}>
                   <Heading el="h2" heading={categoryData?.title} />
                   <div className='mb-0 gray-text' dangerouslySetInnerHTML={{__html:categoryData?.description}}></div>
                   {/* <p className='mb-0 gray-text'>{categoryData?.descrition2}</p> */}

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

@@ -15,7 +15,7 @@ import { Tab, Tabs } from "react-bootstrap";
 import { useEffect, useState } from "react";
 
 const ProductPage = ({ productData, cataloguesData }) => {
-  
+
   const router = useRouter();
   const { category, subCategory: subCategorySlug, productSlug } = router.query;
 
@@ -39,82 +39,82 @@ const ProductPage = ({ productData, cataloguesData }) => {
       label: productData.title,
     },
   ];
-const [activeTab, setActiveTab] = useState(null);
-const productTabs = productData?.productTabs;
-useEffect(() => {
-  if (productTabs?.length > 0) {
-    setActiveTab(productTabs[0].title);
-  }
-}, [productTabs]);
+  const [activeTab, setActiveTab] = useState(null);
+  const productTabs = productData?.productTabs;
+  useEffect(() => {
+    if (productTabs?.length > 0) {
+      setActiveTab(productTabs[0].title);
+    }
+  }, [productTabs]);
   return (
     <>
-        <Breadcrumb breadcrumbData={breadcrumbData} />
-        <InnerBannerproduct productData={productData} />
-        
-        
-        {productData?.isDoorAndPartitionsLayouts == true ? (
-          <section className="details-tab-section">
-            <div className="custom_containers">
-              <div className="details-tab">
-                <div className="head">Products:</div>
-                <Tabs
-  activeKey={activeTab}
-  onSelect={(k) => setActiveTab(k)}
-  className="tab-01"
->
-  {productTabs?.map((tab) => (
-    <Tab
-      key={tab.id}
-      eventKey={tab.title}
-      title={tab.title}
-    >
-      <AboutInfo productData={tab?.aboutInfo} />
-
-      <CompanyOverview
-        companyOverviewData={tab?.companyOverview?.items}
-      />
-
-      <Video productData={tab?.videoSection} />
-
-      {tab?.technicalDetails?.length > 0 && (
-        <TechnicalDetails productData={tab?.technicalDetails} />
-      )}
-
-      {tab?.gallery?.length > 0 && (
-        <Gallery productData={tab?.gallery} />
-      )}
-    </Tab>
-  ))}
-</Tabs>
-              </div>
+      <Breadcrumb breadcrumbData={breadcrumbData} />
+      <InnerBannerproduct productData={productData} />
+
+
+      {productData?.isDoorAndPartitionsLayouts == true ? (
+        <section className="details-tab-section">
+          <div className="custom_containers">
+            <div className="details-tab">
+              <div className="head">Products:</div>
+              <Tabs
+                activeKey={activeTab}
+                onSelect={(k) => setActiveTab(k)}
+                className="tab-01"
+              >
+                {productTabs?.map((tab) => (
+                  <Tab
+                    key={tab.id}
+                    eventKey={tab.title}
+                    title={tab.title}
+                  >
+                    <AboutInfo productData={tab?.aboutInfo} />
+
+                    <CompanyOverview
+                      companyOverviewData={tab?.companyOverview?.items}
+                    />
+
+                    <Video productData={tab?.videoSection} />
+
+                    {tab?.technicalDetails?.length > 0 && (
+                      <TechnicalDetails productData={tab?.technicalDetails} />
+                    )}
+
+                    {tab?.gallery?.length > 0 && (
+                      <Gallery productData={tab?.gallery} />
+                    )}
+                  </Tab>
+                ))}
+              </Tabs>
             </div>
-          </section>
-        ) : (<>
-        
+          </div>
+        </section>
+      ) : (<>
+
         <AboutInfo productData={productData?.aboutInfo} />
         <CompanyOverview companyOverviewData={productData?.companyOverview} />
         <Video productData={productData?.video} />
         {productData?.technicalDetails?.length > 0 && (
-             <TechnicalDetails productData={productData?.technicalDetails} />
-            )}
-        
+          <TechnicalDetails productData={productData?.technicalDetails} />
+        )}
+
         <Gallery productData={productData?.gallery} />
         {/* <Explore productData={productData?.explore} /> */}
-        </>)}
+      </>)}
 
-        {productData?.isDoorAndPartitionsLayouts && (
-          <Explore productData={productData?.exploreProducts} />
-        )}
+      {productData?.isDoorAndPartitionsLayouts && (
+        <Explore productData={productData?.exploreProducts} />
+      )}
 
-        {!productData?.isDoorAndPartitionsLayouts && (
-          <Catalogues cataloguesData={cataloguesData} />
-        )}
+      {!productData?.isDoorAndPartitionsLayouts && (
+        <Catalogues cataloguesData={cataloguesData} />
+      )}
 
-        {/* {productData?.isDoorAndPartitionsLayouts === false && (
+      {/* {productData?.isDoorAndPartitionsLayouts === false && (
           <AboutInfo productData={productData?.aboutInfo} />
         )} */}
-        
-        {/* {productData?.isDoorAndPartitionsLayouts == false && (
+
+      {/* {productData?.isDoorAndPartitionsLayouts == false && (
           <CompanyOverview companyOverviewData={productData?.companyOverview} />
         )}
         {productData?.isDoorAndPartitionsLayouts == false && (
@@ -128,10 +128,10 @@ useEffect(() => {
           <Gallery productData={productData?.gallery} />
         )} */}
 
-        
 
-        <Contact />
-      </>
+
+      <Contact />
+    </>
   );
 };
 
@@ -142,7 +142,7 @@ export async function getServerSideProps({ params }) {
   try {
     const { productSlug } = params;
 
-   
+
 
     const productData = await getCollectionDetailCategoryData(productSlug);
     const cataloguesData = await getCataloguesBySlug();