Merge pull request 'refactor: add anchor tag on video' (#45) from apurvab/theme-elegance:marketing-experiment into marketing-experiment

Reviewed-on: brooksbingham/theme-elegance#45

assets/css/custom.css

@@ -0,0 +1,3 @@
+body{
+    background-color:white;
+}

assets/css/theme.css

@@ -803,10 +803,6 @@ select {
   bottom: 0px;
 }
 
-.bottom-1 {
-  bottom: 0.25rem;
-}
-
 .bottom-\[50\%\] {
   bottom: 50%;
 }
@@ -823,12 +819,12 @@ select {
   right: 0px;
 }
 
-.right-12 {
-  right: 3rem;
+.right-1 {
+  right: 0.25rem;
 }
 
-.right-2 {
-  right: 0.5rem;
+.right-12 {
+  right: 3rem;
 }
 
 .right-4 {
@@ -859,38 +855,6 @@ select {
   z-index: 10;
 }
 
-.col-span-1 {
-  grid-column: span 1 / span 1;
-}
-
-.col-start-1 {
-  grid-column-start: 1;
-}
-
-.col-start-2 {
-  grid-column-start: 2;
-}
-
-.row-span-1 {
-  grid-row: span 1 / span 1;
-}
-
-.row-span-2 {
-  grid-row: span 2 / span 2;
-}
-
-.row-span-3 {
-  grid-row: span 3 / span 3;
-}
-
-.row-start-1 {
-  grid-row-start: 1;
-}
-
-.row-end-2 {
-  grid-row-end: 2;
-}
-
 .-mx-2 {
   margin-left: -0.5rem;
   margin-right: -0.5rem;
@@ -906,6 +870,11 @@ select {
   margin-bottom: -0.75rem;
 }
 
+.mx-3 {
+  margin-left: 0.75rem;
+  margin-right: 0.75rem;
+}
+
 .mx-4 {
   margin-left: 1rem;
   margin-right: 1rem;
@@ -926,11 +895,21 @@ select {
   margin-bottom: 0.125rem;
 }
 
+.my-12 {
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+}
+
 .my-2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
 
+.my-20 {
+  margin-top: 5rem;
+  margin-bottom: 5rem;
+}
+
 .my-8 {
   margin-top: 2rem;
   margin-bottom: 2rem;
@@ -944,10 +923,6 @@ select {
   margin-bottom: 3rem;
 }
 
-.mb-16 {
-  margin-bottom: 4rem;
-}
-
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -956,10 +931,6 @@ select {
   margin-bottom: 5rem;
 }
 
-.mb-24 {
-  margin-bottom: 6rem;
-}
-
 .mb-3 {
   margin-bottom: 0.75rem;
 }
@@ -1052,10 +1023,6 @@ select {
   display: flow-root;
 }
 
-.grid {
-  display: grid;
-}
-
 .hidden {
   display: none;
 }
@@ -1084,6 +1051,10 @@ select {
   height: 1.5rem;
 }
 
+.h-72 {
+  height: 18rem;
+}
+
 .h-8 {
   height: 2rem;
 }
@@ -1124,6 +1095,10 @@ select {
   width: 3.5rem;
 }
 
+.w-16 {
+  width: 4rem;
+}
+
 .w-24 {
   width: 6rem;
 }
@@ -1201,6 +1176,10 @@ select {
   max-width: 100%;
 }
 
+.max-w-screen-lg {
+  max-width: 1024px;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1236,8 +1215,8 @@ select {
   list-style-type: square;
 }
 
-.grid-cols-2 {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+.list-disc {
+  list-style-type: disc;
 }
 
 .flex-row {
@@ -1252,6 +1231,10 @@ select {
   flex-direction: column;
 }
 
+.flex-col-reverse {
+  flex-direction: column-reverse;
+}
+
 .flex-wrap {
   flex-wrap: wrap;
 }
@@ -1268,6 +1251,10 @@ select {
   align-items: baseline;
 }
 
+.justify-start {
+  justify-content: flex-start;
+}
+
 .justify-end {
   justify-content: flex-end;
 }
@@ -1288,6 +1275,10 @@ select {
   gap: 0.25rem;
 }
 
+.gap-12 {
+  gap: 3rem;
+}
+
 .gap-16 {
   gap: 4rem;
 }
@@ -1312,13 +1303,9 @@ select {
   gap: 2rem;
 }
 
-.gap-x-1 {
-  -moz-column-gap: 0.25rem;
-       column-gap: 0.25rem;
-}
-
-.gap-y-1 {
-  row-gap: 0.25rem;
+.gap-x-20 {
+  -moz-column-gap: 5rem;
+       column-gap: 5rem;
 }
 
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
@@ -1327,6 +1314,12 @@ select {
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-y-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+}
+
 .overflow-y-auto {
   overflow-y: auto;
 }
@@ -1349,6 +1342,10 @@ select {
   border-width: 1px;
 }
 
+.border-2 {
+  border-width: 2px;
+}
+
 .border-t {
   border-top-width: 1px;
 }
@@ -1412,6 +1409,11 @@ select {
   border-color: rgb(252 165 165 / var(--tw-border-opacity));
 }
 
+.border-white {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+
 .bg-black\/70 {
   background-color: rgb(0 0 0 / 0.7);
 }
@@ -1480,6 +1482,15 @@ select {
      object-fit: cover;
 }
 
+.object-scale-down {
+  -o-object-fit: scale-down;
+     object-fit: scale-down;
+}
+
+.p-1 {
+  padding: 0.25rem;
+}
+
 .p-2 {
   padding: 0.5rem;
 }
@@ -1488,14 +1499,27 @@ select {
   padding: 0.625rem;
 }
 
+.p-3 {
+  padding: 0.75rem;
+}
+
 .p-4 {
   padding: 1rem;
 }
 
+.p-5 {
+  padding: 1.25rem;
+}
+
 .p-8 {
   padding: 2rem;
 }
 
+.px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1506,6 +1530,11 @@ select {
   padding-right: 1rem;
 }
 
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -1541,10 +1570,30 @@ select {
   padding-bottom: 2rem;
 }
 
+.pb-10 {
+  padding-bottom: 2.5rem;
+}
+
 .pb-12 {
   padding-bottom: 3rem;
 }
 
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
+.pb-3 {
+  padding-bottom: 0.75rem;
+}
+
+.pb-6 {
+  padding-bottom: 1.5rem;
+}
+
+.pl-0 {
+  padding-left: 0px;
+}
+
 .pl-12 {
   padding-left: 3rem;
 }
@@ -1553,6 +1602,10 @@ select {
   padding-left: 0.5rem;
 }
 
+.pl-4 {
+  padding-left: 1rem;
+}
+
 .pl-6 {
   padding-left: 1.5rem;
 }
@@ -1565,10 +1618,6 @@ select {
   padding-right: 0.25rem;
 }
 
-.pr-1\.5 {
-  padding-right: 0.375rem;
-}
-
 .pr-2 {
   padding-right: 0.5rem;
 }
@@ -1589,14 +1638,34 @@ select {
   padding-top: 5rem;
 }
 
+.pt-3 {
+  padding-top: 0.75rem;
+}
+
 .pt-4 {
   padding-top: 1rem;
 }
 
+.pt-5 {
+  padding-top: 1.25rem;
+}
+
 .pt-6 {
   padding-top: 1.5rem;
 }
 
+.pt-7 {
+  padding-top: 1.75rem;
+}
+
+.pt-8 {
+  padding-top: 2rem;
+}
+
+.pt-9 {
+  padding-top: 2.25rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -1695,6 +1764,11 @@ select {
   color: rgb(249 250 251 / var(--tw-text-opacity));
 }
 
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
 .text-gray-600 {
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity));
@@ -2085,9 +2159,19 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
 }
 
 @media (min-width: 640px) {
+  .sm\:my-20 {
+    margin-top: 5rem;
+    margin-bottom: 5rem;
+  }
+
   .sm\:flex {
     display: flex;
   }
+
+  .sm\:px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
 }
 
 @media (min-width: 768px) {
@@ -2095,6 +2179,14 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     position: absolute;
   }
 
+  .md\:mt-0 {
+    margin-top: 0px;
+  }
+
+  .md\:mt-24 {
+    margin-top: 6rem;
+  }
+
   .md\:block {
     display: block;
   }
@@ -2103,14 +2195,26 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     display: flex;
   }
 
+  .md\:grid {
+    display: grid;
+  }
+
   .md\:hidden {
     display: none;
   }
 
+  .md\:h-\[300px\] {
+    height: 300px;
+  }
+
   .md\:h-\[3rem\] {
     height: 3rem;
   }
 
+  .md\:h-full {
+    height: 100%;
+  }
+
   .md\:w-1\/2 {
     width: 50%;
   }
@@ -2131,14 +2235,30 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     width: 6rem;
   }
 
-  .md\:w-3\/5 {
-    width: 60%;
-  }
-
   .md\:w-3\/6 {
     width: 50%;
   }
 
+  .md\:w-8\/12 {
+    width: 66.666667%;
+  }
+
+  .md\:w-\[30\%\] {
+    width: 30%;
+  }
+
+  .md\:w-\[70\%\] {
+    width: 70%;
+  }
+
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .md\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
   .md\:flex-row {
     flex-direction: row;
   }
@@ -2151,14 +2271,27 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     align-items: flex-start;
   }
 
+  .md\:justify-start {
+    justify-content: flex-start;
+  }
+
   .md\:gap-0 {
     gap: 0px;
   }
 
+  .md\:gap-10 {
+    gap: 2.5rem;
+  }
+
   .md\:gap-4 {
     gap: 1rem;
   }
 
+  .md\:object-cover {
+    -o-object-fit: cover;
+       object-fit: cover;
+  }
+
   .md\:p-2 {
     padding: 0.5rem;
   }
@@ -2167,6 +2300,20 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     padding: 2rem;
   }
 
+  .md\:px-12 {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+
+  .md\:px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .md\:pl-12 {
+    padding-left: 3rem;
+  }
+
   .md\:pl-4 {
     padding-left: 1rem;
   }
@@ -2183,14 +2330,29 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     padding-right: 12rem;
   }
 
-  .md\:text-3xl {
-    font-size: 1.875rem;
-    line-height: 2.25rem;
+  .md\:pt-11 {
+    padding-top: 2.75rem;
   }
 
-  .md\:text-4xl {
-    font-size: 2.25rem;
-    line-height: 2.5rem;
+  .md\:pt-12 {
+    padding-top: 3rem;
+  }
+
+  .md\:pt-5 {
+    padding-top: 1.25rem;
+  }
+
+  .md\:pt-6 {
+    padding-top: 1.5rem;
+  }
+
+  .md\:text-left {
+    text-align: left;
+  }
+
+  .md\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
   }
 
   .md\:text-base {
@@ -2208,9 +2370,22 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     line-height: 1.25rem;
   }
 
+  .md\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+
   .md\:font-bold {
     font-weight: 700;
   }
+
+  .md\:font-medium {
+    font-weight: 500;
+  }
+
+  .md\:font-semibold {
+    font-weight: 600;
+  }
 }
 
 @media (min-width: 1024px) {
@@ -2218,22 +2393,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     position: static;
   }
 
-  .lg\:bottom-3 {
-    bottom: 0.75rem;
-  }
-
   .lg\:right-0 {
     right: 0px;
   }
 
-  .lg\:mb-2 {
-    margin-bottom: 0.5rem;
-  }
-
-  .lg\:mb-32 {
-    margin-bottom: 8rem;
-  }
-
   .lg\:flex {
     display: flex;
   }
@@ -2242,6 +2405,14 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     display: none;
   }
 
+  .lg\:h-\[400px\] {
+    height: 400px;
+  }
+
+  .lg\:h-\[500px\] {
+    height: 500px;
+  }
+
   .lg\:h-\[90vh\] {
     height: 90vh;
   }
@@ -2266,6 +2437,14 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     width: 60%;
   }
 
+  .lg\:w-52 {
+    width: 13rem;
+  }
+
+  .lg\:w-80 {
+    width: 20rem;
+  }
+
   .lg\:w-full {
     width: 100%;
   }
@@ -2298,8 +2477,19 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     background-color: transparent;
   }
 
-  .lg\:p-4 {
-    padding: 1rem;
+  .lg\:px-20 {
+    padding-left: 5rem;
+    padding-right: 5rem;
+  }
+
+  .lg\:px-36 {
+    padding-left: 9rem;
+    padding-right: 9rem;
+  }
+
+  .lg\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
   }
 
   .lg\:py-0 {
@@ -2307,17 +2497,53 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     padding-bottom: 0px;
   }
 
+  .lg\:pl-2 {
+    padding-left: 0.5rem;
+  }
+
+  .lg\:pl-24 {
+    padding-left: 6rem;
+  }
+
+  .lg\:pr-10 {
+    padding-right: 2.5rem;
+  }
+
   .lg\:pt-24 {
     padding-top: 6rem;
   }
 
+  .lg\:pt-9 {
+    padding-top: 2.25rem;
+  }
+
+  .lg\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
+  .lg\:text-3xl {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
+
+  .lg\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+
+  .lg\:text-lg {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+
   .lg\:text-xl {
     font-size: 1.25rem;
     line-height: 1.75rem;
   }
 
-  .lg\:font-bold {
-    font-weight: 700;
+  .lg\:font-semibold {
+    font-weight: 600;
   }
 
   .lg\:shadow-none {
@@ -2331,5 +2557,13 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
   .xl\:w-1\/4 {
     width: 25%;
   }
+
+  .xl\:w-9\/12 {
+    width: 75%;
+  }
+
+  .xl\:pl-12 {
+    padding-left: 3rem;
+  }
 }
 

modules/bodymeasurements/views/templates/hook/displayCustomerAccount.tpl

@@ -1,25 +0,0 @@
-{**
- * Copyright since 2007 PrestaShop SA and Contributors
- * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
- *
- * NOTICE OF LICENSE
- *
- * This source file is subject to the Academic Free License version 3.0
- * that is bundled with this package in the file LICENSE.md.
- * It is also available through the world-wide-web at this URL:
- * https://opensource.org/licenses/AFL-3.0
- * If you did not receive a copy of the license and are unable to
- * obtain it through the world-wide-web, please send an email
- * to license@prestashop.com so we can send you a copy immediately.
- *
- * @author    PrestaShop SA and Contributors <contact@prestashop.com>
- * @copyright Since 2007 PrestaShop SA and Contributors
- * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License version 3.0
- *}
-
-<a class="w-full md:w-1/3 lg:w-1/4 flex flex-col p-4 border-gray-500" id="wishlist-link" disabled>
-  <span class="flex flex-col items-center font-semibolds text-lg">
-    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-ruler-measure" width="32" height="32" 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="M19.875 12c.621 0 1.125 .512 1.125 1.143v5.714c0 .631 -.504 1.143 -1.125 1.143h-15.875a1 1 0 0 1 -1 -1v-5.857c0 -.631 .504 -1.143 1.125 -1.143h15.75z" /><path d="M9 12v2" /><path d="M6 12v3" /><path d="M12 12v3" /><path d="M18 12v3" /><path d="M15 12v2" /><path d="M3 3v4" /><path d="M3 5h18" /><path d="M21 3v4" /></svg>
-    Body Measurements
-  </span>
-</a>

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

@@ -22,7 +22,8 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
  * International Registered Trademark & Property of PrestaShop SA
  *}
-<section class="featured-products flex flex-col gap-8">
+
+<section class="featured-products flex flex-col gap-8 mt-20">
   <h2 class="products-section-title text-2xl font-bold">
     {l s='Popular Products' d='Shop.Theme.Catalog'}
   </h2>
@@ -31,13 +32,47 @@
       {include file="catalog/_partials/miniatures/product.tpl" product=$product}
     {/foreach}
   </div>
-  <a class="all-product-link text-2xl font-bold w-full flex items-center justify-end mb-24" href="{$allProductsLink}">
+  <a class="all-product-link text-2xl font-bold w-full flex items-center justify-end mb-8" href="{$allProductsLink}">
     {l s='All products' 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>
 </section>
-
-
-
-
   
+
+{if $page.page_name == "index"}  
+<div class="mx-4 my-12 sm:my-20">
+  <h1 class="font-bold lg:text-3xl md:text-xl text-lg">What makes us unique?</h1>
+  <p class=" font-medium lg:text-lg md:text-md text-sm pt-9">Are you one of the millions of men that off the rack clothing just doesn't work for you? 
+     A generic size built for the generic man? Brooks Bingham Clothing started exactly for this reason.
+     We are athletes, surrounded by athletes and strive to work with those that search for perfection.
+     And we were sick and tired of spending thousands on garments just to spend hundreds or thousands more
+     for a tailor to sort of make it fit. We strive to be a luxury solution in the clothing industry while providing
+     custom garments built and des gned by you for you. We give you all the power to be as creative as possible
+     while designing your clothing followed by the implementation of photo technology to collect all needed measurements.
+     Through our 3D tocits you have the ability to see and explore millions of options to complete your one of a kind piece.
+     We thank you for taking the time to explore Brooks Bingham Clothing and we look forward to helping you explore the
+     world of custom garments.
+  </p>
+</div>
+
+<div class="mt-12 md:mt-24 flex relative items-center left-0 right-0 mb-12 ">
+      <img class="w-full lg:h-[400px] md:h-[300px] h-full object-cover" 
+           src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/seo-img6.png">
+        <div class="absolute text-white lg:pl-24 md:pl-12 pl-4">
+        <h1 class="md:font-bold font-semibold lg:text-4xl md:text-2xl text-sm">Step into Style with a Custom Touch</h1>
+        <p class="lg:font-semibold md:font-medium font-base lg:text-2xl md:text-lg text-xs md:w-8/12 lg:pt-9 md:pt-6 pt-4">
+           Our perfect fit guarantee ensures that every plece you order is tailored to your exact specifications,
+           delivering a perfect fit every time.
+        </p>
+        <div class="lg:w-52 md:w-42 w-38 flex justify-start pt-4">
+            <a class="all-product-link lg:text-xl md:text-md text-xs md:font-semibold font-base
+                      flex border border-2 border-white md:p-2 p-1 md:px-4 px-2 hover:text-white"
+               href="https://brooksbingham.com/17-custom-made-clothing">
+               Start Customization 
+            </a>
+        </div>
+      </div>
+</div>
+
+
+{/if}

templates/_partials/header.tpl

@@ -24,9 +24,9 @@
  *}
 
 {block name='header_top'}
-  <div class="container mx-auto">
+  <div class="container mx-auto z-10">
     <div class="relative -mx-4 flex items-center justify-between h-24">
-      <div class="w-40 max-md:pl-4 max-w-full ">
+      <div class="w-16 max-md:pl-4 max-w-full ">
         <a class="block w-full " href="{$urls.base_url}">
           <img class="w-full" src="{$shop.logo}" alt="{$shop.name}"/>
         </a>

templates/catalog/_partials/product-add-to-cart.tpl

@@ -22,7 +22,7 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
  * International Registered Trademark & Property of PrestaShop SA
  *}
-<div class="product-add-to-cart flex flex-col gap-3 mt-8 mb-4">
+<div class="product-add-to-cart flex flex-col gap-3 mb-4">
   {if !$configuration.is_catalog}
 
     {block name='product_availability'}

templates/catalog/_partials/products.tpl

@@ -22,6 +22,38 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
  * 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="mb-12 w-full lg:h-[90vh]" style="clip-path: inset(4px)">
+        <a href="https://brooksbingham.com/module/thob/configurator?id_product=75">
+          <video autoplay muted loop class="w-full h-auto object-cover" style="background-color: rgba(0, 0, 0, 0)">
+              <source src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/slider.mp4" 
+                      type="video/mp4" >
+          </video>
+        </a>
+</div>
+<div class=" mx-auto h-[50vh] flex flex-col justify-center ">
+  <h1 class="lg:font-semibold 
+             font-bold 
+             lg:text-4xl 
+             md:text-2xl 
+             text-xl 
+             text-center">
+      Curate a Perfect Wardrobe with Our Custom-Made Apparel </h1>
+  <p class="lg:px-36 
+            lg:text-xl 
+            text-lg 
+            font-medium 
+            px-5 
+            text-center 
+            xl:w-9/12 
+            mx-auto 
+            pt-8">
+      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">
     {foreach from=$listing.products item="product"}
@@ -31,9 +63,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">
@@ -41,3 +76,245 @@
     </a>
   </div>
 </div>
+
+
+{if $page.meta.title == 'Custom made' || $page.meta.title == 'custom made' || $page.meta.title == 'Custom Made' || $page.meta.title == 'custom'}
+
+
+
+<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 tuxedos are tailored specifically for you, offering an unparalleled fit. 
+            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/module/thob/configurator?id_product=77"> 
+           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" 
+                 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 class="w-full md:w-[30%]">
+        <img class="image p-3 object-scale-down w-full lg:h-[500px] h-full right-0" 
+             src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/custom-made-page/tux-img">
+    </div>
+</div>
+
+<div class="flex md:flex-row flex-col items-center mx-auto md:mt-24 mt-16">
+    <div class="w-full md:w-[30%]">
+        <img class="image p-3 object-scale-down lg:h-[500px] h-full w-full" 
+             src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/custom-made-page/suit-img">
+    </div>     
+    <div class="mx-3 w-full md:w-[70%] text-center md:text-left lg:pr-10 pr-1">
+        <h1 class="font-bold lg:text-3xl md:text-2xl text-xl">
+            Not Just Made-To-Order 
+        </h1>
+        <p class="lg:text-xl font-medium pt-5">
+            Our Custom Designed Suits are made to last. Enjoy a personalized, custom-fit experience that not only sets you apart  
+            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/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" 
+                 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 class="mx-auto">
+  <div class="max-w-screen-lg 
+              mx-auto 
+              px-4 
+              sm:px-6 
+              flex 
+              flex-col
+              lg:px-8 
+              justify-between 
+              my-20">
+    <div class="center pb-6">
+      <h2 class="lg:text-3xl
+                 md:text-2xl
+                 text-xl
+                 font-bold 
+                 text-center">
+          Customize Your Apparel in 3 Steps: </h2>
+     </div>
+    <div class="mt-19">
+        <ul class="md:grid 
+                   md:grid-cols-3 
+                   md:gap-10 
+                   gap-12">
+            <li class="bg-gray-100 
+                       p-5 
+                       pb-10 
+                       text-center">
+              <div class="flex 
+                          flex-col 
+                          items-center">
+                <div>
+                  <img class="w-full 
+                              lg:w-80 
+                              h-72
+                              pt-4 
+                              pb-3" 
+                       src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/custom-made-page/fabric.jpg" 
+                       alt="Select the Fabric">
+                  </div>
+                <div class="mt-4">
+                  <h4 class="text-xl 
+                             leading-6 
+                             font-bold 
+                             pb-2">
+                      Select the Fabric </h4>
+                  <p class="mt-3 
+                            font-medium
+                            text-lg 
+                            leading-6 
+                            text-gray-500">
+                      Choose from a wide range of trendy fabrics updated every seasons </p>
+                 </div>
+               </div>
+            </li>
+
+           <li class="bg-gray-100 
+                     p-5 
+                     pb-10 
+                     text-center 
+                     md:mt-0 
+                     mt-8">
+            <div class="flex 
+                        flex-col 
+                        items-center">
+              <div>
+                <img class="w-full 
+                            lg:w-80 
+                            h-72
+                            pt-4 
+                            pb-3
+                            object-cover" 
+                    src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/custom-made-page/design.jpg" 
+                    alt="Finalize the Design">
+                </div>
+              <div class="mt-4">
+                <h4 class="text-xl 
+                           leading-6 
+                           font-bold 
+                           pb-2">
+                    Finalize the Design </h4>
+                <p class="mt-3 
+                          text-lg 
+                          font-medium 
+                          leading-6 
+                          text-gray-500">
+                    Personalize details like lapels, pockets, and lining through online platform. </p>
+                </div>
+              </div>
+          </li>
+
+         <li class="bg-gray-100 
+                    p-5 pb-10 
+                    text-center 
+                    md:mt-0 
+                    mt-8">
+            <div class="flex 
+                        flex-col 
+                        items-center">
+              <div>
+                <img class="w-full 
+                            lg:w-80 
+                            h-72
+                            pt-4 
+                            pb-3
+                            object-cover" 
+                     src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/custom-made-page/3d-format-measure.jpg" 
+                     alt="Get Measured">
+                </div>
+              <div class="mt-4">
+                <h4 class="text-xl 
+                         leading-6 
+                         font-bold 
+                         pb-2">
+                    Get Measured </h4>
+                <p class="mt-3 
+                        text-lg 
+                        font-medium 
+                        leading-6 
+                        text-gray-500">
+                  Ensure your custom apparel fits you flawlessly by getting measured. </p>
+               </div>
+             </div>
+          </li>
+        </ul>
+      </div>
+  </div>
+</div>
+<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="md:pt-12 pt-9 lg:px-20 md:px-12 px-0">
+<ul class="md:grid md:grid-cols-2 md:gap-10 gap-x-20">
+<li class="border-2 p-5 pb-10">
+<div class="flex flex-col items-center">
+<div class="mt-4">
+<h4 class="md:text-xl text-lg text-center leading-6 font-bold pb-2">Manual 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>Follow clear step-by-step instructions for accurate results.</li>
+<li>Simple form to fill for each measurement.</li>
+<li>Ensure precision with detailed guidance for each body part.</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://brooksbingham.com/content/11-manual-measurement"> Know more </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 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>Utilize advanced 3D scanning via a smartphone app.</li>
+<li>Quick and convenient measurement process.</li>
+<li>Secure and private data storage for continuous updates.</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://brooksbingham.com/content/12-automated-measurement"> Know more </a></div>
+</div>
+</div>
+</li>
+</ul>
+</div>
+</div>
+
+{/if}

templates/catalog/_partials/sort-orders.tpl

@@ -1,12 +1,15 @@
+
+
+
 {**
- * 2007-2019 PrestaShop and Contributors
+ * 2006-2019 PrestaShop and Contributors
  *
  * NOTICE OF LICENSE
  *
- * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
+ * This source file is subject to the Academic Free License 2.0 (AFL-3.0)
  * that is bundled with this package in the file LICENSE.txt.
  * It is also available through the world-wide-web at this URL:
- * https://opensource.org/licenses/AFL-3.0
+ * https://opensource.org/licenses/AFL-4.0
  * If you did not receive a copy of the license and are unable to
  * obtain it through the world-wide-web, please send an email
  * to license@prestashop.com so we can send you a copy immediately.
@@ -18,31 +21,32 @@
  * needs please refer to https://www.prestashop.com for more information.
  *
  * @author    PrestaShop SA <contact@prestashop.com>
- * @copyright 2007-2019 PrestaShop SA and Contributors
- * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
+ * @copyright 2006-2019 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/AFL-4.0 Academic Free License 3.0 (AFL-3.0)
  * International Registered Trademark & Property of PrestaShop SA
  *}
 
-<div class="relative flex-1 w-full max-w-[240px] group">
+<!--
+<div class="relative flex-2 w-full max-w-[240px] group">
   <button
-    class="dropdown-toggle relative px-4 pr-6 leading-1 w-full text-left"
+    class="dropdown-toggle relative px-5 pr-6 leading-1 w-full text-left"
     type="button"
     rel="nofollow"
     aria-haspopup="true"
     aria-expanded="false">
     {if isset($listing.sort_selected)}{$listing.sort_selected}{else}{l s='Select' d='Shop.Theme.Actions'}{/if}
-    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down absolute right-0 top-1" width="16" height="16" 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>
-      <path d="M6 9l6 6l6 -6"></path>
+    <svg xmlns="http://www.w2.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down absolute right-0 top-1" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <path stroke="none" d="M-1 0h24v24H0z" fill="none"></path>
+      <path d="M5 9l6 6l6 -6"></path>
     </svg>
   </button>
-  <div class="dropdown-menu hidden group-hover:flex absolute top-full right-0 bg-white z-10 shadow-lg">
+  <div class="dropdown-menu hidden group-hover:flex absolute top-full right-1 bg-white z-10 shadow-lg">
     <div class="flex flex-col whitespace-nowrap">
       {foreach from=$listing.sort_orders item=sort_order}
         <a
           rel="nofollow"
           href="{$sort_order.url}"
-          class="px-4 py-1 hover:text-yellow-700 select-list {['current' => $sort_order.current, 'js-search-link' => true]|classnames}"
+          class="px-5 py-1 hover:text-yellow-700 select-list {['current' => $sort_order.current, 'js-search-link' => true]|classnames}"
         >
           {$sort_order.label}
         </a>
@@ -50,3 +54,4 @@
     </div>
   </div>
 </div>
+-->

templates/layouts/layout-both-columns.tpl

@@ -1,4 +1,4 @@
-{**
+{*
  * 2007-2019 PrestaShop and Contributors
  *
  * NOTICE OF LICENSE
@@ -51,6 +51,14 @@
       {/block}
     </header>
 
+    {if $page.page_name == 'index'}
+      <div class="w-full top-0 left-0  flex items-center">
+          <img class="w-full md:h-full md:object-cover" 
+            src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/banner.png" />
+      </div>
+      
+    {/if}
+
     {block name='displayBeforeWrapper'}
       {hook h='displayBeforeWrapper'}
     {/block}
@@ -85,104 +93,23 @@
       {/block}
 
       {if $page.page_name == 'index'}
-      <div class="container">
- <h2 class="products-section-title text-2xl font-bold mb-16 mt-20 text-center"> Custom design by you</h2>
- <div  class=" flex md:flex-row flex-col gap-8 lg:mb-32 mb-20">
-  <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"> 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"> Suits</h3>
-   </a>
-  </div>
+<script>
+    const slides = document.querySelectorAll('.slide');
+    let currentSlide = 0;
 
-  <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</h3>
-   </a>
-  </div>
+    document.querySelector('[data-carousel-next]').addEventListener('click', () => {
+        slides[currentSlide].classList.add('hidden');
+        currentSlide = (currentSlide + 1) % slides.length;
+        slides[currentSlide].classList.remove('hidden');
+    });
 
-  <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"> Tuxedos</h3>
-   </a>
-  </div>
-
- </div>
-</div>
-
-
-<div class="lg:mb-32 mb-20" >
- <h1 class="text-2xl font-bold text-center">Design and Visualize what you need</h1>
- <h3 class="text-lg font-semibold text-center mb-12">Choose what looks good on you </h3>
- <img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/widget-screenshot.png"/>
-</div>
-
-   <div class=" text-white grid grid-cols-2 grid-rows-* gap-y-1 gap-x-1 mb-1">
-   <div class="row-span-3 col-start-1 row-end-2 relative">
-    <h3 class="absolute lg:bottom-3 bottom-1 right-0 lg:font-bold font-medium lg:text-xl lg:mb-2 pr-1.5 xxs lg:p-4">Business Suits for Men</h3>
-    <h3 class="absolute bottom-0 right-0 text-white text-lg hide-on-small p-4">Make a powerful impression and radiate confidence</h3>
-    <img class="object-cover" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-big%20img.jpg" alt="Tailored business Suits designed for you to make a                         
-    powerful impression and radiate confidence." />
-    </div>
-   <div class="col-span-1 col-start-2 row-span-2  flex relative">
-    <h3 class="absolute lg:bottom-3 bottom-1 lg:right-0 right-2 lg:font-bold font-medium lg:text-xl lg:mb-2 xxs lg:p-4">Browse through our design</h3>
-    <h3 class="absolute bottom-0 right-0 text-lg hide-on-small  p-4">Get inspired with our curated outfit ideas</h3>
-    <img class=" object-cover" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Right-small-img1.png" />
-    </div>
-    <div class="row-start-1 col-start-2 col-span-1 row-span-1 relative ">
-    <h3 class="absolute lg:bottom-3 bottom-1 lg:right-0 right-2 lg:font-bold font-medium lg:text-xl lg:mb-2 xxs lg:p-4">Get the perfect fit</h3>
-    <h3 class="absolute bottom-0 right-0 text-lg p-4 hide-on-small">Get inspired with our curated outfit ideas</h3>
-    <img class=" object-cover h-full" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Right-small-img2.jpg" 
-    alt="The future of fashion with our innovative designs. Customization options tailored to your measurements and discover your perfect fit in minutes" />
-    </div>
-    </div> 
-   </div>
-
-   <div class=" text-white grid grid-cols-2 grid-rows-* gap-y-1 gap-x-1">
-   <div class="row-span-3 col-start-2 row-end-2 relative">
-    <h3 class="absolute lg:bottom-3 bottom-1 right-0 lg:font-bold font-medium pr-1.5 lg:text-xl lg:mb-2 xxs lg:p-4">Wear Your Identity</h3>
-    <h3 class="absolute bottom-0 right-0 text-white text-lg hide-on-small p-4">Fashion that speaks volumes</h3>
-    <img class="object-cover" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Right-big%20img.jpg" />
-    </div>
-   <div class="col-span-1 col-start-1 row-span-2  flex relative">
-    <h3 class="absolute lg:bottom-3 bottom-1 lg:right-0 right-2 lg:font-bold font-medium lg:text-xl lg:mb-2 xxs lg:p-4">Timeless Quality </h3>
-    <h3 class="absolute bottom-0 right-0 text-lg hide-on-small p-4">Fashion that stands the test of time</h3>
-    <img class=" object-cover" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg" alt="Invest in enduring fashion with our commitment to quality and 
-    durability.From custom-made tuxedos to business suits, each piece stands the test of time." />
-    </div>
-    <div class="row-start-1 col-start-1 col-span-1 row-span-1 relative ">
-    <h3 class="absolute lg:bottom-3 bottom-1 lg:right-0 right-2 lg:font-bold font-medium lg:text-xl lg:mb-2 xxs lg:p-4">Tailored to your specifications </h3>
-    <h3 class="absolute bottom-0 right-0 hide-on-small text-lg p-4">Tailor every detail to match your preferences</h3>
-    <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>
-
-
-         <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'}
-          <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 class="flex h-[50vh] items-center">
-         <div class="flex justify-center p-4">
-          <div class="md:w-3/5 relative text-center">
-            <p class="md:text-3xl text-xl p-4 font-medium"><b class="md:text-4xl text-xl ">“</b>
-            <b>BrooksBingham</b> is your destination for custom-tailored menswear, where authenticity is woven into every stitch.<b class="md:text-4xl text-xl">”</b></p>
-            
-            <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>
+    document.querySelector('[data-carousel-prev]').addEventListener('click', () => {
+        slides[currentSlide].classList.add('hidden');
+        currentSlide = (currentSlide - 1 + slides.length) % slides.length;
+        slides[currentSlide].classList.remove('hidden');
+    });
+</script>
 
       {/if}
 
@@ -218,6 +145,7 @@
     {block name='hook_before_body_closing_tag'}
       {hook h='displayBeforeBodyClosingTag'}
     {/block}
+
   </body>
 
 </html>