refactor:add product categories on homepage

assets/css/theme.css

@@ -876,26 +876,11 @@ select {
   margin-bottom: 2rem;
 }
 
-.my-\[30px\] {
-  margin-top: 30px;
-  margin-bottom: 30px;
-}
-
 .my-\[20px\] {
   margin-top: 20px;
   margin-bottom: 20px;
 }
 
-.my-\[35px\] {
-  margin-top: 35px;
-  margin-bottom: 35px;
-}
-
-.my-\[40px\] {
-  margin-top: 40px;
-  margin-bottom: 40px;
-}
-
 .my-\[45px\] {
   margin-top: 45px;
   margin-bottom: 45px;
@@ -909,12 +894,12 @@ select {
   margin-bottom: 3rem;
 }
 
-.mb-2 {
+.mb-16 {
-  margin-bottom: 0.5rem;
+  margin-bottom: 4rem;
 }
 
-.mb-20 {
+.mb-2 {
-  margin-bottom: 5rem;
+  margin-bottom: 0.5rem;
 }
 
 .mb-3 {
@@ -925,10 +910,6 @@ select {
   margin-bottom: 1rem;
 }
 
-.mb-6 {
-  margin-bottom: 1.5rem;
-}
-
 .mb-8 {
   margin-bottom: 2rem;
 }
@@ -977,10 +958,6 @@ select {
   margin-top: 6rem;
 }
 
-.mt-28 {
-  margin-top: 7rem;
-}
-
 .mt-3 {
   margin-top: 0.75rem;
 }
@@ -997,8 +974,12 @@ select {
   margin-top: 2rem;
 }
 
-.mb-16 {
+.mb-20 {
-  margin-bottom: 4rem;
+  margin-bottom: 5rem;
+}
+
+.mb-32 {
+  margin-bottom: 8rem;
 }
 
 .block {
@@ -2030,16 +2011,16 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
 }
 
 @media (min-width: 640px) {
-  .sm\:mb-4 {
-    margin-bottom: 1rem;
-  }
-
   .sm\:flex {
     display: flex;
   }
 
-  .sm\:text-justify {
+  .sm\:flex-col {
-    text-align: justify;
+    flex-direction: column;
+  }
+
+  .sm\:flex-wrap {
+    flex-wrap: wrap;
   }
 
   .sm\:text-sm {
@@ -2141,6 +2122,11 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     padding-right: 12rem;
   }
 
+  .md\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
   .md\:text-base {
     font-size: 1rem;
     line-height: 1.5rem;
@@ -2156,11 +2142,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     line-height: 1.25rem;
   }
 
-  .md\:text-2xl {
-    font-size: 1.5rem;
-    line-height: 2rem;
-  }
-
   .md\:text-xl {
     font-size: 1.25rem;
     line-height: 1.75rem;
@@ -2180,10 +2161,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     right: 0px;
   }
 
-  .lg\:mt-28 {
-    margin-top: 7rem;
-  }
-
   .lg\:mb-20 {
     margin-bottom: 5rem;
   }
@@ -2274,14 +2251,9 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     line-height: 2rem;
   }
 
-  .lg\:text-3xl {
+  .lg\:text-lg {
-    font-size: 1.875rem;
+    font-size: 1.125rem;
-    line-height: 2.25rem;
+    line-height: 1.75rem;
-  }
-
-  .lg\:text-4xl {
-    font-size: 2.25rem;
-    line-height: 2.5rem;
   }
 
   .lg\:text-xl {
@@ -2289,11 +2261,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     line-height: 1.75rem;
   }
 
-  .lg\:text-lg {
-    font-size: 1.125rem;
-    line-height: 1.75rem;
-  }
-
   .lg\:shadow-none {
     --tw-shadow: 0 0 #0000;
     --tw-shadow-colored: 0 0 #0000;

modules/ps_featuredproducts/views/templates/hook/ps_featuredproducts.tpl

@@ -37,6 +37,41 @@
   </a>
 </section>
 
+<div class="container">
+ <h2 class="products-section-title text-2xl font-bold mb-16 mt-20"> Product Categories </h2>
+ <div  class=" flex md:flex-row flex-col gap-8 lg:mb-32">
+  <div href="https://brooksbingham.com/module/thob/configurator?id_product=74">
+   <a href="https://brooksbingham.com/module/thob/configurator?id_product=74">
+   <img class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100" src="https://stage.brooksbingham.com/111-home_default/business-shirt.jpg"/>
+   <h3 class="text-center text-lg pt-4 font-semibold">Custom Made Shirts</h3>
+   </a>
+  </div>
+
+  <div> 
+   <a  href="https://brooksbingham.com/module/thob/configurator?id_product=75">
+   <img  class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100" src="https://stage.brooksbingham.com/107-home_default/business-suit.jpg"/>
+   <h3 class="text-center text-lg pt-4 font-semibold">Custom Suits Online</h3>
+   </a>
+  </div>
+
+  <div>
+   <a href="https://brooksbingham.com/module/thob/configurator?id_product=76">
+   <img  class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100" src="https://stage.brooksbingham.com/108-home_default/sports-jacket.jpg"/>
+   <h3 class="text-center text-lg pt-4 font-semibold">Sport Jackets for Men</h3>
+   </a>
+  </div>
+
+  <div>
+   <a href="https://brooksbingham.com/module/thob/configurator?id_product=77">
+   <img  class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100" src="https://stage.brooksbingham.com/112-home_default/tuxedo.jpg"/>
+   <h3 class="text-center text-lg pt-4 font-semibold">Custom made Tuxedos</h3>
+   </a>
+  </div>
+
+ </div>
+<div/>
+
+
   <h1 class="font-bold md:text-2xl text-center mt-20 mb-8 ">Business Suits for Men</h1>
   <h3 class="font-semibold md:text-xl text-center text-sm">Tailored business Suits designed for you to make a powerful impression and radiate confidence.</h3>
 
@@ -59,4 +94,4 @@
   </article>
 
 
-
+  

templates/layouts/layout-both-columns.tpl

@@ -103,7 +103,7 @@
                 </div>
             </div> -->
         </div>
-         <a class="all-product-link text-2xl font-bold w-full flex items-center justify-end mt-4" href="https://brooksbingham.com/content/9-gallery">
+         <a class="all-product-link text-2xl font-bold w-full flex items-center justify-end mt-8" href="https://brooksbingham.com/content/9-gallery">
           {l s='View More' d='Shop.Theme.Catalog'}
           <svg xmlns="http://www.w3.org/2000/svg" class="icon stroke-gray-600 stroke-[3px] icon-tabler icon-tabler-chevron-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg>
          </a>