Merge pull request 'home-custom' (#37) from sayalip/theme-elegance:home-custom into staging

Reviewed-on: brooksbingham/theme-elegance#37

assets/css/theme.css

@@ -1345,6 +1345,10 @@ select {
   list-style-type: square;
 }
 
+.list-disc {
+  list-style-type: disc;
+}
+
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -1433,6 +1437,10 @@ select {
   gap: 2rem;
 }
 
+.gap-20 {
+  gap: 5rem;
+}
+
 .gap-x-1 {
   -moz-column-gap: 0.25rem;
        column-gap: 0.25rem;
@@ -1442,6 +1450,11 @@ select {
   row-gap: 0.25rem;
 }
 
+.gap-x-20 {
+  -moz-column-gap: 5rem;
+       column-gap: 5rem;
+}
+
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@@ -1717,6 +1730,16 @@ select {
   padding-bottom: 2rem;
 }
 
+.px-20 {
+  padding-left: 5rem;
+  padding-right: 5rem;
+}
+
+.px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
 .pb-10 {
   padding-bottom: 2.5rem;
 }
@@ -1833,6 +1856,18 @@ select {
   padding-top: 2.25rem;
 }
 
+.pt-12 {
+  padding-top: 3rem;
+}
+
+.pt-11 {
+  padding-top: 2.75rem;
+}
+
+.pb-20 {
+  padding-bottom: 5rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -2490,6 +2525,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .md\:flex-row {
     flex-direction: row;
   }
@@ -2518,6 +2557,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     gap: 1rem;
   }
 
+  .md\:gap-20 {
+    gap: 5rem;
+  }
+
   .md\:p-2 {
     padding: 0.5rem;
   }
@@ -2536,6 +2579,11 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     padding-right: 1rem;
   }
 
+  .md\:px-12 {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+
   .md\:pl-10 {
     padding-left: 2.5rem;
   }
@@ -2592,6 +2640,14 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     padding-top: 2rem;
   }
 
+  .md\:pt-5 {
+    padding-top: 1.25rem;
+  }
+
+  .md\:pt-11 {
+    padding-top: 2.75rem;
+  }
+
   .md\:text-left {
     text-align: left;
   }

templates/catalog/_partials/products.tpl

@@ -23,6 +23,7 @@
  * International Registered Trademark & Property of PrestaShop SA
  *}
 
+{if $page.meta.title == 'Custom made' || $page.meta.title == 'custom made' || $page.meta.title == 'Custom Made' || $page.meta.title == 'custom'}
 
 <div class=" mx-auto h-[50vh] flex flex-col justify-center ">
   <h1 class="lg:font-semibold 
@@ -44,6 +45,7 @@
       Step into our world of custom-made luxury with Brooks Bingham, offering you Custom Business Shirts, 
       Custom Sport Jackets, Custom Made Tuxedos, and more. </p>
 </div>
+{/if}
 
 <div id="js-product-list" class="flex flex-col">
   <div class="products flex flex-wrap">
@@ -54,9 +56,12 @@
     {/foreach}
   </div>
 
+{if $page.meta.title != 'Custom made' && $page.meta.title != 'custom made' && $page.meta.title != 'Custom Made' && $page.meta.title != 'custom'}
   {block name='pagination'}
     {include file='_partials/pagination.tpl' pagination=$listing.pagination}
   {/block}
+{/if}
+
 
   <div class="flex justify-center md:hidden my-8">
     <a href="#js-product-list-header" class="btn btn-secondary font-semibold">
@@ -66,45 +71,27 @@
 </div>
 
 
-<div class="relative 
+{if $page.meta.title == 'Custom made' || $page.meta.title == 'custom made' || $page.meta.title == 'Custom Made' || $page.meta.title == 'custom'}
-            flex 
+<div  class="mb-12 w-full lg:h-[90vh]" style="clip-path: inset(4px)">
-            mt-16 
+          <video autoplay muted loop class="w-full h-auto object-cover" style="background-color: rgba(0, 0, 0, 0)">
-            h-1/2
+              <source src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/slider.mp4" 
-            mx-auto">
+                      type="video/mp4" >
-    <img class="w-full scale-down" 
+          </video>
-         src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/custom_page_banner_image.jpeg" 
-         alt="Image">
-    <div class="absolute 
-                xl:right-56 
-                lg:right-20
-                md:right-12
-                right-4 
-                lg:bottom-48
-                md:bottom-28
-                bottom-9 
-                text-[#000E2A] 
-                text-left 
-                lg:text-4xl 
-                md:text-2xl 
-                text-xs
-                font-bold">
-        <h1> Because You Are Unique. </h1>
-        <h1> So Is Your Body… </h1>
-     </div>
 </div>
 
+
 <div class="flex flex-col-reverse md:flex-row items-center md:mt-24 mt-16 mx-auto">
     <div class="mx-3 w-full md:w-[70%] text-center md:text-left xl:pl-12 lg:pl-2 pl-0">
         <h1 class="font-bold lg:text-3xl md:text-2xl text-xl">
             Custom Fit for your Comfort 
         </h1>
         <p class="lg:text-xl font-medium pt-5">
-            Custom-made shirts and tuxedos are tailored specifically for you, offering an unparalleled fit. 
+            Custom-made tuxedos are tailored specifically for you, offering an unparalleled fit. 
-            Experience unmatched comfort and style with our tailored suits, crafted to celebrate your uniqueness.
+            Experience unmatched comfort and style with our tailored tuxedos, crafted to celebrate your uniqueness.
         </p>
         <a class="all-product-link text-xl font-bold mt-8 flex items-center justify-center md:justify-start" 
-           href="https://brooksbingham.com/17-custom-made-clothing"> 
+           href="https://brooksbingham.com/module/thob/configurator?id_product=77"> 
-           Design Your Suit
+           Design Your Tuxedos
             <svg xmlns="http://www.w3.org/2000/svg" 
                  class="icon stroke-gray-600 stroke-[3px] icon-tabler icon-tabler-chevron-right" 
                  width="24" 
@@ -142,7 +129,7 @@
             from ready-to-wear options but is also designed to be durable.
         </p>
         <a class="all-product-link text-xl font-bold mt-8 flex items-center justify-center md:justify-start" 
-           href="https://brooksbingham.com/17-custom-made-clothing">
+           href="https://brooksbingham.com/module/thob/configurator?id_product=75">
             Design Your Suit
             <svg xmlns="http://www.w3.org/2000/svg" 
                  class="icon stroke-gray-600 stroke-[3px] icon-tabler icon-tabler-chevron-right" 
@@ -174,7 +161,9 @@
               justify-between 
               my-20">
     <div class="center pb-6">
-      <h2 class="text-4xl 
+      <h2 class="lg:text-3xl
+                 md:text-2xl
+                 text-xl
                  font-bold 
                  text-center">
           Customize Your Apparel in 3 Steps: </h2>
@@ -293,39 +282,113 @@
 </div>
 
 
-<div class="mx-auto lg:my-20 my-12 flex flex-col justify-center px-4 md:px-10 lg:px-20">
+
+
+<div class="mx-auto mb-20 flex flex-col">
   <h1 class="font-bold text-xl md:text-2xl lg:text-3xl text-center">
     How Can You Get Measured?
   </h1>
-  <div class="pt-8 md:pt-12 lg:pt-16">
+
-    <ul class="font-medium text-sm md:text-xl space-y-2">
+  <div class="md:pt-12 pt-9 lg:px-20 md:px-12 px-0">
-      <li>- Simply scan the QR code at checkout.</li>
+        <ul class="md:grid 
-      <li>- Carefully watch the instruction video.</li>
+                   md:grid-cols-2 
-      <li>- Next, you will have 2 photos taken to collect all needed measurements to create your custom fit.</li>
+                   md:gap-10 
-    </ul>
+                   gap-x-20">
-  </div>
+            <li class="border-2
-  <h2 class="font-semibold text-sm md:text-lg lg:text-xl pt-6 md:pt-8 lg:py-8 pb-10">
+                       p-5 
-    (Disclaimer: Please follow the instruction video closely as it will guide you to wear specific clothing, stand barefoot, etc.)
+                       pb-10 
-  </h2>
+                       ">
-  <div class="flex justify-end">
+              <div class="flex 
-    <a class="all-product-link lg:text-xl md:text-lg text-sm font-bold flex items-center " 
+                          flex-col 
-       href="https://stage.brooksbingham.com/content/10-measurement"> 
+                          items-center">
-       Know more
+                <div class="mt-4">
-       <svg xmlns="http://www.w3.org/2000/svg" 
+                  <h4 class="md:text-xl
-            class="icon stroke-gray-600 stroke-[3px] icon-tabler icon-tabler-chevron-right" 
+                             text-lg
-            width="24" 
+                             text-center
-            height="24" 
+                             leading-6 
-            viewBox="0 0 24 24" 
+                             font-bold 
-            stroke-width="2" 
+                             text-gray-900 
-            stroke="currentColor" 
+                             pb-2">
-            fill="none" 
+                      Manual Measurement</h4>
-            stroke-linecap="round" 
+                  <div class="md:pt-5 pt-3 font-medium text-lg">
-            stroke-linejoin="round">
+                    <ul class="space-y-2 list-disc lg:text-lg md:text-md text-sm">
-           <path stroke="none" 
+                      <li>Choose from a wide range of trendy fabrics updated every seasons</li>
-                 d="M0 0h24v24H0z" 
+                      <li>Choose from a wide range of trendy fabrics updated every seasons</li>
-                 fill="none"/>
+                      <li>Choose from a wide range of trendy fabrics updated every seasons</li>
-           <path d="M9 6l6 6l-6 6" />
+                    </ul>
-       </svg>
+                   </div>
-    </a>
+
+                  <div class="flex justify-end md:pt-11 pt-7">
+                      <a class="all-product-link lg:text-lg text-md font-bold flex items-center " 
+                         href="https://stage.brooksbingham.com/content/11-manual-measurement"> Know more
+                       <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>
+                  </div>
+                </div>
+               </div>
+            </li>
+            
+            <li class="border-2
+                       p-5">
+              <div class="flex 
+                          flex-col 
+                          items-center">
+                <div class="mt-4">
+                  <h4 class="md:text-xl
+                             text-lg
+                             text-center
+                             leading-6 
+                             font-bold 
+                             text-gray-900 
+                             pb-2">
+                      Automated Measurement </h4>
+                  <div class="md:pt-5 pt-3 font-medium text-lg">
+                    <ul class="space-y-2 list-disc lg:text-lg md:text-md text-sm">
+                      <li>Choose from a wide range of trendy fabrics updated every seasons</li>
+                      <li>Choose from a wide range of trendy fabrics updated every seasons</li>
+                      <li>Choose from a wide range of trendy fabrics updated every seasons</li>
+                    </ul>
+                   </div>
+
+                  <div class="flex justify-end md:pt-11 pt-7">
+                      <a class="all-product-link lg:text-lg text-md font-bold flex items-center " 
+                         href="https://stage.brooksbingham.com/content/12-automated-measurement"> Know more
+                       <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>
+                  </div>
+                </div>
+               </div>
+            </li>
+      </ul>
   </div>
 </div>
+
+{/if}

templates/layouts/layout-both-columns.tpl

@@ -380,7 +380,7 @@
     <img class=" object-cover h-full" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img2.png" /> </div>
     </div> 
    </div>
-</div>
+</div> 
 
          <a class="all-product-link text-2xl font-bold w-full flex items-center justify-end mt-8 mb-8" href="https://brooksbingham.com/content/9-gallery">
           {l s='View More' d='Shop.Theme.Catalog'}
@@ -397,7 +397,7 @@
             <p class="text-sm"> Our perfect fit guarantee ensures that every piece you order is tailored to your exact specifications, delivering a perfect fit every time.</p>
           </div>
          </div>
-         </div>
+         </div> -->
 
       {/if}
 
@@ -433,7 +433,7 @@
     {block name='hook_before_body_closing_tag'}
       {hook h='displayBeforeBodyClosingTag'}
     {/block} 
-    -->
+    
 
   </body>