chore: update theme.css

assets/css/theme.css

@@ -847,6 +847,10 @@ select {
   grid-column: span 1 / span 1;
 }
 
+.col-span-3 {
+  grid-column: span 3 / span 3;
+}
+
 .col-start-1 {
   grid-column-start: 1;
 }
@@ -871,10 +875,18 @@ select {
   grid-row-start: 1;
 }
 
+.row-start-2 {
+  grid-row-start: 2;
+}
+
 .row-end-2 {
   grid-row-end: 2;
 }
 
+.row-end-3 {
+  grid-row-end: 3;
+}
+
 .-mx-2 {
   margin-left: -0.5rem;
   margin-right: -0.5rem;
@@ -890,6 +902,11 @@ select {
   margin-bottom: -0.75rem;
 }
 
+.mx-1 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+
 .mx-3 {
   margin-left: 0.75rem;
   margin-right: 0.75rem;
@@ -915,21 +932,26 @@ 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;
 }
 
-.my-32 {
-  margin-top: 8rem;
-  margin-bottom: 8rem;
-}
-
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -938,10 +960,6 @@ select {
   margin-bottom: 3rem;
 }
 
-.mb-16 {
-  margin-bottom: 4rem;
-}
-
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -1014,10 +1032,18 @@ select {
   margin-top: 0.75rem;
 }
 
+.mt-32 {
+  margin-top: 8rem;
+}
+
 .mt-4 {
   margin-top: 1rem;
 }
 
+.mt-48 {
+  margin-top: 12rem;
+}
+
 .mt-6 {
   margin-top: 1.5rem;
 }
@@ -1026,6 +1052,10 @@ select {
   margin-top: 2rem;
 }
 
+.mt-9 {
+  margin-top: 2.25rem;
+}
+
 .block {
   display: block;
 }
@@ -1058,6 +1088,10 @@ select {
   aspect-ratio: 342/513;
 }
 
+.h-1\/2 {
+  height: 50%;
+}
+
 .h-12 {
   height: 3rem;
 }
@@ -1078,16 +1112,28 @@ select {
   height: 1.5rem;
 }
 
+.h-72 {
+  height: 18rem;
+}
+
 .h-8 {
   height: 2rem;
 }
 
-.h-\[350px\] {
+.h-\[100px\] {
-  height: 350px;
+  height: 100px;
 }
 
-.h-\[380px\] {
+.h-\[20px\] {
-  height: 380px;
+  height: 20px;
+}
+
+.h-\[50px\] {
+  height: 50px;
+}
+
+.h-\[50vh\] {
+  height: 50vh;
 }
 
 .h-auto {
@@ -1162,6 +1208,14 @@ select {
   width: 160px;
 }
 
+.w-\[20px\] {
+  width: 20px;
+}
+
+.w-\[50px\] {
+  width: 50px;
+}
+
 .w-full {
   width: 100%;
 }
@@ -1238,10 +1292,22 @@ select {
   list-style-type: square;
 }
 
+.grid-flow-col {
+  grid-auto-flow: column;
+}
+
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.grid-rows-3 {
+  grid-template-rows: repeat(3, minmax(0, 1fr));
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -1274,6 +1340,10 @@ select {
   align-items: baseline;
 }
 
+.justify-start {
+  justify-content: flex-start;
+}
+
 .justify-end {
   justify-content: flex-end;
 }
@@ -1327,16 +1397,31 @@ select {
        column-gap: 0.25rem;
 }
 
+.gap-x-2 {
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
+}
+
 .gap-y-1 {
   row-gap: 0.25rem;
 }
 
+.gap-y-2 {
+  row-gap: 0.5rem;
+}
+
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
   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;
 }
@@ -1359,6 +1444,10 @@ select {
   border-width: 1px;
 }
 
+.border-2 {
+  border-width: 2px;
+}
+
 .border-t {
   border-top-width: 1px;
 }
@@ -1367,6 +1456,11 @@ select {
   border-style: none;
 }
 
+.border-black {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+
 .border-blue-300 {
   --tw-border-opacity: 1;
   border-color: rgb(147 197 253 / var(--tw-border-opacity));
@@ -1422,6 +1516,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);
 }
@@ -1490,6 +1589,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;
 }
@@ -1524,6 +1632,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;
@@ -1559,11 +1672,6 @@ select {
   padding-bottom: 2rem;
 }
 
-.px-5 {
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-}
-
 .pb-10 {
   padding-bottom: 2.5rem;
 }
@@ -1580,10 +1688,18 @@ select {
   padding-bottom: 0.75rem;
 }
 
+.pb-4 {
+  padding-bottom: 1rem;
+}
+
 .pb-6 {
   padding-bottom: 1.5rem;
 }
 
+.pl-0 {
+  padding-left: 0px;
+}
+
 .pl-12 {
   padding-left: 3rem;
 }
@@ -1592,6 +1708,10 @@ select {
   padding-left: 0.5rem;
 }
 
+.pl-4 {
+  padding-left: 1rem;
+}
+
 .pl-6 {
   padding-left: 1.5rem;
 }
@@ -1624,14 +1744,26 @@ select {
   padding-right: 2rem;
 }
 
+.pt-0 {
+  padding-top: 0px;
+}
+
 .pt-1 {
   padding-top: 0.25rem;
 }
 
+.pt-2 {
+  padding-top: 0.5rem;
+}
+
 .pt-20 {
   padding-top: 5rem;
 }
 
+.pt-3 {
+  padding-top: 0.75rem;
+}
+
 .pt-4 {
   padding-top: 1rem;
 }
@@ -1644,6 +1776,14 @@ select {
   padding-top: 1.5rem;
 }
 
+.pt-7 {
+  padding-top: 1.75rem;
+}
+
+.pt-8 {
+  padding-top: 2rem;
+}
+
 .pt-9 {
   padding-top: 2.25rem;
 }
@@ -1674,6 +1814,11 @@ select {
   line-height: 2.5rem;
 }
 
+.text-5xl {
+  font-size: 3rem;
+  line-height: 1;
+}
+
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -1746,6 +1891,11 @@ select {
   color: rgb(23 37 84 / var(--tw-text-opacity));
 }
 
+.text-gray-300 {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
 .text-gray-400 {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -2151,10 +2301,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
 }
 
 @media (min-width: 640px) {
-  .sm\:mb-1 {
-    margin-bottom: 0.25rem;
-  }
-
   .sm\:flex {
     display: flex;
   }
@@ -2170,6 +2316,19 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     position: absolute;
   }
 
+  .md\:bottom-28 {
+    bottom: 7rem;
+  }
+
+  .md\:right-12 {
+    right: 3rem;
+  }
+
+  .md\:my-24 {
+    margin-top: 6rem;
+    margin-bottom: 6rem;
+  }
+
   .md\:mt-0 {
     margin-top: 0px;
   }
@@ -2178,6 +2337,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     margin-top: 6rem;
   }
 
+  .md\:mt-32 {
+    margin-top: 8rem;
+  }
+
   .md\:block {
     display: block;
   }
@@ -2194,10 +2357,30 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     display: none;
   }
 
+  .md\:h-\[200px\] {
+    height: 200px;
+  }
+
+  .md\:h-\[300px\] {
+    height: 300px;
+  }
+
   .md\:h-\[3rem\] {
     height: 3rem;
   }
 
+  .md\:h-\[400px\] {
+    height: 400px;
+  }
+
+  .md\:h-\[40px\] {
+    height: 40px;
+  }
+
+  .md\:h-\[410px\] {
+    height: 410px;
+  }
+
   .md\:w-1\/2 {
     width: 50%;
   }
@@ -2226,6 +2409,34 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     width: 50%;
   }
 
+  .md\:w-8\/12 {
+    width: 66.666667%;
+  }
+
+  .md\:w-\[30\%\] {
+    width: 30%;
+  }
+
+  .md\:w-\[40\%\] {
+    width: 40%;
+  }
+
+  .md\:w-\[40px\] {
+    width: 40px;
+  }
+
+  .md\:w-\[50\%\] {
+    width: 50%;
+  }
+
+  .md\:w-\[60\%\] {
+    width: 60%;
+  }
+
+  .md\:w-\[70\%\] {
+    width: 70%;
+  }
+
   .md\:grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
@@ -2242,6 +2453,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     align-items: flex-start;
   }
 
+  .md\:justify-start {
+    justify-content: flex-start;
+  }
+
   .md\:gap-0 {
     gap: 0px;
   }
@@ -2262,10 +2477,36 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     padding: 2rem;
   }
 
+  .md\:px-10 {
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+
+  .md\:px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .md\:pl-10 {
+    padding-left: 2.5rem;
+  }
+
+  .md\:pl-12 {
+    padding-left: 3rem;
+  }
+
+  .md\:pl-3 {
+    padding-left: 0.75rem;
+  }
+
   .md\:pl-4 {
     padding-left: 1rem;
   }
 
+  .md\:pl-5 {
+    padding-left: 1.25rem;
+  }
+
   .md\:pr-12 {
     padding-right: 3rem;
   }
@@ -2278,10 +2519,38 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     padding-right: 12rem;
   }
 
+  .md\:pr-5 {
+    padding-right: 1.25rem;
+  }
+
+  .md\:pt-0 {
+    padding-top: 0px;
+  }
+
+  .md\:pt-10 {
+    padding-top: 2.5rem;
+  }
+
+  .md\:pt-12 {
+    padding-top: 3rem;
+  }
+
+  .md\:pt-6 {
+    padding-top: 1.5rem;
+  }
+
+  .md\:pt-8 {
+    padding-top: 2rem;
+  }
+
   .md\:pt-9 {
     padding-top: 2.25rem;
   }
 
+  .md\:text-left {
+    text-align: left;
+  }
+
   .md\:text-2xl {
     font-size: 1.5rem;
     line-height: 2rem;
@@ -2312,9 +2581,27 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     line-height: 1.25rem;
   }
 
+  .md\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+
+  .md\:text-xs {
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+
   .md\:font-bold {
     font-weight: 700;
   }
+
+  .md\:font-medium {
+    font-weight: 500;
+  }
+
+  .md\:font-semibold {
+    font-weight: 600;
+  }
 }
 
 @media (min-width: 1024px) {
@@ -2334,6 +2621,20 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     right: 0px;
   }
 
+  .lg\:right-20 {
+    right: 5rem;
+  }
+
+  .lg\:my-20 {
+    margin-top: 5rem;
+    margin-bottom: 5rem;
+  }
+
+  .lg\:my-32 {
+    margin-top: 8rem;
+    margin-bottom: 8rem;
+  }
+
   .lg\:mb-2 {
     margin-bottom: 0.5rem;
   }
@@ -2342,6 +2643,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     margin-bottom: 8rem;
   }
 
+  .lg\:mt-32 {
+    margin-top: 8rem;
+  }
+
   .lg\:flex {
     display: flex;
   }
@@ -2350,8 +2655,20 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     display: none;
   }
 
-  .lg\:h-2\/3 {
+  .lg\:h-\[200px\] {
-    height: 66.666667%;
+    height: 200px;
+  }
+
+  .lg\:h-\[400px\] {
+    height: 400px;
+  }
+
+  .lg\:h-\[500px\] {
+    height: 500px;
+  }
+
+  .lg\:h-\[60px\] {
+    height: 60px;
   }
 
   .lg\:h-\[90vh\] {
@@ -2370,10 +2687,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     width: 20%;
   }
 
-  .lg\:w-11\/12 {
-    width: 91.666667%;
-  }
-
   .lg\:w-2\/5 {
     width: 40%;
   }
@@ -2382,10 +2695,18 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     width: 60%;
   }
 
+  .lg\:w-52 {
+    width: 13rem;
+  }
+
   .lg\:w-80 {
     width: 20rem;
   }
 
+  .lg\:w-\[60px\] {
+    width: 60px;
+  }
+
   .lg\:w-full {
     width: 100%;
   }
@@ -2422,6 +2743,16 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     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;
@@ -2432,31 +2763,72 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     padding-bottom: 0px;
   }
 
-  .lg\:px-36 {
+  .lg\:py-8 {
-    padding-left: 9rem;
+    padding-top: 2rem;
-    padding-right: 9rem;
+    padding-bottom: 2rem;
   }
 
-  .lg\:pt-12 {
+  .lg\:pb-6 {
-    padding-top: 3rem;
+    padding-bottom: 1.5rem;
   }
 
-  .lg\:pt-14 {
+  .lg\:pl-2 {
-    padding-top: 3.5rem;
+    padding-left: 0.5rem;
+  }
+
+  .lg\:pl-24 {
+    padding-left: 6rem;
+  }
+
+  .lg\:pl-5 {
+    padding-left: 1.25rem;
+  }
+
+  .lg\:pr-10 {
+    padding-right: 2.5rem;
+  }
+
+  .lg\:pr-6 {
+    padding-right: 1.5rem;
+  }
+
+  .lg\:pt-10 {
+    padding-top: 2.5rem;
+  }
+
+  .lg\:pt-16 {
+    padding-top: 4rem;
+  }
+
+  .lg\:pt-20 {
+    padding-top: 5rem;
   }
 
   .lg\:pt-24 {
     padding-top: 6rem;
   }
 
+  .lg\:pt-8 {
+    padding-top: 2rem;
+  }
+
+  .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-5xl {
+  .lg\:text-4xl {
-    font-size: 3rem;
+    font-size: 2.25rem;
-    line-height: 1;
+    line-height: 2.5rem;
   }
 
   .lg\:text-lg {
@@ -2469,11 +2841,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     line-height: 1.75rem;
   }
 
-  .lg\:text-4xl {
-    font-size: 2.25rem;
-    line-height: 2.5rem;
-  }
-
   .lg\:font-bold {
     font-weight: 700;
   }
@@ -2501,5 +2868,29 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
   .xl\:w-9\/12 {
     width: 75%;
   }
+
+  .xl\:pl-12 {
+    padding-left: 3rem;
+  }
+
+  .xl\:pr-12 {
+    padding-right: 3rem;
+  }
+
+  .xl\:text-5xl {
+    font-size: 3rem;
+    line-height: 1;
+  }
+
+  .xl\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+}
+
+@media (min-width: 1536px) {
+  .\32xl\:pr-16 {
+    padding-right: 4rem;
+  }
 }
 

templates/catalog/_partials/products.tpl

@@ -64,27 +64,29 @@
     </a>
   </div>
 </div>
-i
+
 
 <div class="relative 
             flex 
             mt-16 
-            lg:h-2/3
+            h-1/2
             mx-auto">
     <img class="w-full scale-down" 
          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-5xl 
+                lg:text-4xl 
                 md:text-2xl 
-                text-sm 
+                text-xs
-                lg:font-semibold 
                 font-bold">
         <h1> Because You Are Unique. </h1>
         <h1> So Is Your Body… </h1>
@@ -92,13 +94,13 @@ i
 </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-1/2 text-center md:text-left">
+    <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 just for you, offering a fit like no other. 
+            Custom-made shirts and tuxedos are tailored specifically for you, offering an unparalleled fit. 
-            Experience unmatched comfort and style with our tailored suits, celebrating your uniqueness.
+            Experience unmatched comfort and style with our tailored suits, 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"> 
@@ -120,54 +122,30 @@ i
             </svg>
         </a>
     </div>
-    <div class="w-full md:w-1/2">
+    <div class="w-full md:w-[30%]">
-        <img class="image p-3 object-cover w-full" 
+        <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/20-06-23%20Brooks%20Bingham%20Summer_992-min.jpg">
+             src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/custom-made-page/image%201.jpg">
     </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%]">
-<div class="flex 
+        <img class="image p-3 object-scale-down lg:h-[500px] h-full w-full" 
-            mt-20 
+             src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/custom-made-page/image%202.jpg">
-            md:mt-24
-            md:flex-row 
-            flex-col
-            items-center
-            mx-auto">
-    <div class="w-full md:w-1/2">
-      <img class="image   
-                p-3 
-                object-cover 
-                w-full" 
-         src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/20-06-23%20Brooks%20Bingham%20Summer_892-min.jpg">
     </div>     
-    <div class="mx-3 w-full md:w-1/2 text-center md:text-left">
+    <div class="mx-3 w-full md:w-[70%] text-center md:text-left lg:pr-10 pr-1">
-      <h1 class="font-bold 
+        <h1 class="font-bold lg:text-3xl md:text-2xl text-xl">
-                 lg:text-3xl 
+            Not Just Made-To-Order 
-                 md:text-2xl 
+        </h1>
-                 text-xl">
+        <p class="lg:text-xl font-medium pt-5">
-          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>
+            from ready-to-wear options but is also designed to be durable.
-      <a class="all-product-link 
+        </p>
-                text-xl 
+        <a class="all-product-link text-xl font-bold mt-8 flex items-center justify-center md:justify-start" 
-                font-bold 
+           href="https://brooksbingham.com/17-custom-made-clothing">
-                mt-8 
+            Design Your Suit
-                flex 
-                items-center
-                justify-center
-                md:justify-start" 
-         href="https://brooksbingham.com/17-custom-made-clothing"> Design Your Suit
             <svg xmlns="http://www.w3.org/2000/svg" 
-            class="icon 
+                 class="icon stroke-gray-600 stroke-[3px] icon-tabler icon-tabler-chevron-right" 
-                   stroke-gray-600 
-                   stroke-[3px] 
-                   icon-tabler 
-                   icon-tabler-chevron-right" 
                  width="24" 
                  height="24" 
                  viewBox="0 0 24 24" 
@@ -179,15 +157,12 @@ i
                 <path stroke="none" 
                       d="M0 0h24v24H0z" 
                       fill="none"/>
-        <path d="M9 6l6 6l-6 6" /></svg>
+                <path d="M9 6l6 6l-6 6" />
+            </svg>
         </a>
     </div>
 </div>
 
-
-
-
-
 <div class="mx-auto">
   <div class="max-w-screen-lg 
               mx-auto 
@@ -219,10 +194,10 @@ i
                 <div>
                   <img class="w-full 
                               lg:w-80 
-                              h-auto 
+                              h-72
                               pt-4 
                               pb-3" 
-                       src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/20-06-23%20Brooks%20Bingham%20Summer_992-min.jpg" alt="Select the Fabric">
+                       src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/custom-made-page/fabric%20image.jpeg" alt="Select the Fabric">
                   </div>
                 <div class="mt-4">
                   <h4 class="text-xl 
@@ -232,7 +207,7 @@ i
                              pb-2">
                       Select the Fabric </h4>
                   <p class="mt-3 
-                             font-semibold 
+                            font-medium
                             text-lg 
                             leading-6 
                             text-gray-500">
@@ -253,10 +228,11 @@ i
               <div>
                 <img class="w-full 
                             lg:w-80 
-                            h-auto 
+                            h-72
                             pt-4 
-                            pb-3" 
+                            pb-3
-                    src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/20-06-23%20Brooks%20Bingham%20Summer_892-min.jpg" alt="Finalize the Design">
+                            object-cover" 
+                    src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/custom-made-page/20-06-23%20Brooks%20Bingham%20Summer_479.jpg" alt="Finalize the Design">
                 </div>
               <div class="mt-4">
                 <h4 class="text-xl 
@@ -267,7 +243,7 @@ i
                     Finalize the Design </h4>
                 <p class="mt-3 
                           text-lg 
-                          font-semibold 
+                          font-medium 
                           leading-6 
                           text-gray-500">
                     Personalize details like lapels, pockets, and lining through online platform. </p>
@@ -286,10 +262,11 @@ i
               <div>
                 <img class="w-full 
                             lg:w-80 
-                            h-auto 
+                            h-72
                             pt-4 
-                            pb-3" 
+                            pb-3
-                     src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/20-06-23%20Brooks%20Bingham%20Summer_992-min.jpg" alt="Get Measured">
+                            object-cover" 
+                     src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/custom-made-page/3d%20format%20measure.jpg" alt="Get Measured">
                 </div>
               <div class="mt-4">
                 <h4 class="text-xl 
@@ -300,7 +277,7 @@ i
                     Get Measured </h4>
                 <p class="mt-3 
                         text-lg 
-                        font-semibold 
+                        font-medium 
                         leading-6 
                         text-gray-500">
                   Ensure your custom apparel fits you flawlessly by getting measured. </p>
@@ -311,3 +288,41 @@ i
       </div>
   </div>
 </div>
+
+
+<div class="mx-auto lg:my-20 my-12 flex flex-col justify-center px-4 md:px-10 lg:px-20">
+  <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">
+      <li>- Simply scan the QR code at checkout.</li>
+      <li>- Carefully watch the instruction video.</li>
+      <li>- Next, you will have 2 photos taken to collect all needed measurements to create your custom fit.</li>
+    </ul>
+  </div>
+  <h2 class="font-semibold text-sm md:text-lg lg:text-xl pt-6 md:pt-8 lg:py-8 pb-10">
+    (Disclaimer: Please follow the instruction video closely as it will guide you to wear specific clothing, stand barefoot, etc.)
+  </h2>
+  <div class="flex justify-end">
+    <a class="all-product-link lg:text-xl md:text-lg text-sm font-bold flex items-center " 
+       href="https://stage.brooksbingham.com/content/10-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>

templates/layouts/layout-both-columns.tpl

@@ -1,4 +1,4 @@
-{**
+{*
  * 2007-2019 PrestaShop and Contributors
  *
  * NOTICE OF LICENSE
@@ -85,8 +85,96 @@
       {/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>
+  <img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/custom_page_banner_image.jpeg"
+</div>
+
+
+<div class="lg:my-32 my-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="flex flex-col-reverse md:flex-row items-center md:mt-24 mt-20 mx-4">
+    <div class="mx-3 w-full md:w-[50%] text-center md:text-left md:pt-0 pt-2">
+        <h1 class="font-bold lg:text-3xl md:text-xl text-lg">
+            The Art of Custom Clothing 
+        </h1>
+        <p class="lg:text-xl md:text-md text-sm font-medium pt-5">
+            Personalize your handcrafted look with our exclusive collection of Made-to-Measure men's clothing.
+        </p>
+        <p class="lg:text-xl md:text-md text-sm font-medium pt-1">
+            Take control and feel confident with our Perfect Fit Guarantee
+        </p>
+        <div class="lg:w-52 md:w-42 w-38 flex md:justify-start justify-center">
+            <a class="all-product-link lg:text-xl md:text-md text-sm font-bold mt-9 flex border border-2 border-black p-2 px-4" 
+               href="https://brooksbingham.com/16-custom-made-clothing"> 
+               Start Customization 
+            </a>
+        </div>
+    </div>
+
+    <div class="w-full md:w-[50%] grid grid-flow-col grid-rows-3 gap-x-2 lg:pl-5 md:pl-3 pl-0">
+        <div class="row-end-3 row-span-2">
+            <img class="object-cover md:h-[200px] h-full w-full" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg">
+        </div>
+        <div class="row-start-2 row-span-2">
+            <img class="object-cover md:h-[200px] h-full w-full " src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg">
+        </div>
+      </div>
+</div>
+
+
+
+<div class="flex md:flex-row flex-col items-center mx-4 lg:mt-32 md:mt-24 mt-20">
+    <div class="w-full md:w-[60%] h-full">
+        <div class="grid grid-cols-3 gap-y-2 gap-x-2">
+          <div class="">
+            <img class="object-cover md:h-[200px] h-full" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg">
+          </div>
+          <div class="row-span-1">
+            <img class="object-cover md:h-[200px] h-full" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg">
+          </div>
+          <div class="row-span-2 col-span-1 relative">
+            <img class="object-cover md:h-[410px] h-full" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg">
+          </div>
+          <div>
+            <img class="object-cover md:h-[200px] h-full" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg">
+          </div>
+          <div class="">
+            <img class="object-cover md:h-[200px] h-full" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg">
+          </div>
+        </div>
+    </div>     
+    <div class="mx-3 w-full md:w-[40%] text-center md:text-left md:pl-5 pl-0 ">
+        <h1 class="font-bold lg:text-3xl md:text-xl text-lg md:pt-0 pt-2">
+            Tailored Perfection for a Flawless Fit
+        </h1>
+        <p class="lg:text-xl md:text-md text-sm font-medium pt-5">
+            Craft your signature style down to the finest details - from quality fabrics and distinctive 
+            buttons to unique pocket hues and lining designs.        
+        </p>
+        <p class="lg:text-xl md:text-md text-sm font-medium pt-1">Our Perfect Fit Guarantee ensures a tailored look that exudes your confident individuality</p>
+        <div class="lg:w-52 md:w-42 w-38 flex md:justify-start justify-center">
+            <a class="all-product-link lg:text-xl md:text-md text-sm font-bold mt-9 flex border border-2 border-black p-2 px-4" 
+               href="https://brooksbingham.com/16-custom-made-clothing"> 
+               Start Customization 
+            </a>
+        </div>
+      </div>
+</div>
+
+
+<div class="mx-4 lg:mt-32 md:mt-24 mt-20">
+  <h1 class="lg:text-3xl md:text-2xl text-lg font-bold text-center">Curated Custom Collection</h1>
+  <p class="lg:text-xl md:text-md text-sm text-center pt-4 font-medium">Experience luxury with personalized jackets and custom collections crafted just for you</p>
+</div>
+
+<div class="container mt-16">
   <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">
@@ -115,17 +203,205 @@
    <h3 class="text-center text-lg pt-4 font-semibold"> Tuxedos</h3>
    </a>
   </div>
-
  </div>
 </div>
 
 
-<div class="lg:mb-32 mb-20" >
+<div class="flex md:flex-row flex-col mx-4 items-center lg:my-32 md:my-24 my-20">
- <h1 class="text-2xl font-bold text-center">Design and Visualize what you need</h1>
+    <div class="w-full md:w-[50%] h-full">
- <h3 class="text-lg font-semibold text-center mb-12">Choose what looks good on you </h3>
+        <div class="grid grid-rows-3 grid-flow-col gap-y-2 gap-x-2">
- <img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/widget-screenshot.png"/>
+          <div class="row-span-2">
+            <img class="h-full object-cover" 
+                 src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg">
+          </div>
+          <div class="row-span-1">
+            <img class="h-full object-cover" 
+                 src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg">
+          </div>
+          <div class="row-span-1">
+            <img class="h-full object-cover" 
+                 src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg">
+          </div>
+          <div class="row-span-2">
+            <img class="h-full object-cover" 
+                 src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg">
+          </div>
+          <div class="row-span-3">
+            <img class="h-full object-cover" 
+                 src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg">
+          </div>
+        </div>
+    </div>
+  
+    <div class="w-full md:w-[50%] md:text-left md:pl-10 pl-0 md:pt-0 pt-3 ">
+        <h1 class="font-bold lg:text-3xl md:text-xl text-lg md:pt-0 pt-2 text-center md:text-left">
+            About Brooks Bingham
+        </h1>
+        <div class="lg:pt-10 md:pt-6 pt-4 lg:text-xl text-sm font-medium space-y-2 text-left">
+          <li>Individuality and precision tailoring is what we celebrate.</li>
+          <li>We are on a mission to provide high-quality, custom-fit clothing that embodies YOU.</li>
+          <li>Modern with the technology, but we never forget the importance of classic traditional tailoring.</li>
+          <li>We are all about creating timeless, personalized pieces.</li>
+        </div>
+    </div>
 </div>
 
+
+<div class="flex flex-col-reverse md:flex-row md:mt-24 mt-20 mx-4">
+    <div class="w-full md:w-[60%] text-center md:text-left md:pt-0 pt-4">
+        <h1 class="font-bold lg:text-4xl md:text-2xl text-lg lg:pt-20 md:pt-9 pt-0">
+            Why Choose Brooks Bingham?
+        </h1>
+        <div class="flex md:flex-row flex-col lg:pt-20 md:pt-10 pt-7">
+            <div class="flex-col 2xl:pr-16 xl:pr-12 lg:pr-6 md:pr-5 pr-0">
+              <h1 class="md:text-xl xl:text-5xl lg:text-3xl text-5xl font-semibold text-gray-300 pb-4">1.</h1>
+              <h1 class="xl:text-xl lg:text-lg md:text-xs  text-xl font-semibold">Expert</h1>
+              <h1 class="xl:text-xl lg:text-lg md:text-xs text-xl font-semibold">Craftmanship</h1>
+            </div>
+            <div class="flex-col 2xl:pr-16 xl:pr-12 lg:pr-6 md:pr-5 pr-0 md:pt-0 pt-4">
+              <h1 class="md:text-xl xl:text-5xl lg:text-3xl text-5xl font-semibold text-gray-300 pb-4">2.</h1>
+              <h1 class="xl:text-xl lg:text-lg md:text-xs text-xl font-semibold">Innovative</h1>
+              <h1 class="xl:text-xl lg:text-lg md:text-xs text-xl font-semibold">Customization</h1>
+            </div>
+            <div class="flex-col 2xl:pr-16 xl:pr-12 lg:pr-6 md:pr-5 pr-0 md:pt-0 pt-4">
+              <h1 class="md:text-xl xl:text-5xl lg:text-3xl text-5xl font-semibold text-gray-300 pb-4">3.</h1>
+              <h1 class="xl:text-xl lg:text-lg md:text-xs text-xl font-semibold">Quality</h1>
+              <h1 class="xl:text-xl lg:text-lg md:text-xs text-xl font-semibold">Materials</h1>
+            </div>
+            <div class="flex-col 2xl:pr-16 xl:pr-12 lg:pr-6 md:pr-5 pr-0 md:pt-0 pt-4">
+              <h1 class="md:text-xl xl:text-5xl lg:text-3xl text-5xl font-semibold text-gray-300 pb-4">4.</h1>
+              <h1 class="xl:text-xl lg:text-lg md:text-xs text-xl font-semibold">Sustainable</h1>
+              <h1 class="xl:text-xl lg:text-lg md:text-xs text-xl font-semibold">Practices</h1>
+            </div>
+            <div class="flex-col md:pt-0 pt-4">
+              <h1 class="md:text-xl xl:text-5xl lg:text-3xl text-5xl font-semibold text-gray-300 pb-4">5.</h1>
+              <h1 class="xl:text-xl lg:text-lg md:text-xs text-xl font-semibold">Exceptional</h1>
+              <h1 class="xl:text-xl lg:text-lg md:text-xs text-xl font-semibold">Support</h1>
+            </div>
+        </div>
+    </div>
+    <div class="w-full md:w-[40%] grid grid-cols-3 gap-x-2 gap-y-2 lg:pl-2 md:pl-3 pl-0 md:pt-0 pt-4">
+        <div class="col-span-3">
+            <img class="object-cover lg:h-[200px] h-[100px] w-full" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg">
+        </div>
+        <div class="">
+            <img class="object-cover lg:h-[200px] h-[100px] w-full " src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg">
+        </div>
+        <div class="">
+            <img class="object-cover lg:h-[200px] h-[100px] w-full" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg">
+        </div>
+        <div class="">
+            <img class="object-cover lg:h-[200px] h-[100px] w-full" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg">
+        </div>
+    </div>
+</div>
+
+
+
+<div class="flex flex-col-reverse md:flex-row items-center justify-center md:mt-32 mt-16 mx-4">
+    <div class="w-full md:w-[60%] text-center md:text-left md:pt-0 pt-5 md:pr-5 pr-0">
+        <div class="flex justify-center lg:pb-6 pb-3">
+            <img class="lg:w-[60px] lg:h-[60px] md:w-[40px] md:h-[40px] w-[50px] h-[50px]"
+                 src="https://brooksbingham.com/img/logo-1715173509.jpg">
+        </div>
+        <h1 class="font-bold lg:text-3xl md:text-2xl text-xl text-center">
+            See What They Think 
+        </h1>
+        <p class="lg:text-xl text-sm font-medium lg:pt-10 pt-6 text-center">
+            The quality of my bespoke shirts from Brooks Bingham Clothing has been exceptional! 
+        </p>
+        <p class="lg:text-xl text-sm font-medium text-center">
+            The fabrics, buttons, and stitching are of the highest quality.        
+        </p>
+        <h1 class="font-bold text-center lg:text-xl md:text-lg text-md lg:pt-8 pt-6">Matt K </h1>
+        <div class="flex justify-center lg:pt-10 md:pt-6 pt-8">
+            <svg class="w-[20px] h-[20px] mx-1" viewBox="0 0 24 24" fill="gold" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12 0l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.27 5.82 22 7 14.14l-5-4.87 6.91-3.01L12 0z"/>
+            </svg>
+            <svg class="w-[20px] h-[20px] mx-1" viewBox="0 0 24 24" fill="gold" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12 0l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.27 5.82 22 7 14.14l-5-4.87 6.91-3.01L12 0z"/>
+            </svg>
+            <svg class="w-[20px] h-[20px] mx-1" viewBox="0 0 24 24" fill="gold" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12 0l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.27 5.82 22 7 14.14l-5-4.87 6.91-3.01L12 0z"/>
+            </svg>
+            <svg class="w-[20px] h-[20px] mx-1" viewBox="0 0 24 24" fill="gold" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12 0l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.27 5.82 22 7 14.14l-5-4.87 6.91-3.01L12 0z"/>
+            </svg>
+            <svg class="w-[20px] h-[20px] mx-1" viewBox="0 0 24 24" fill="gold" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12 0l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.27 5.82 22 7 14.14l-5-4.87 6.91-3.01L12 0z"/>
+            </svg>
+        </div>
+    </div>
+    <div class="w-full md:w-[40%]">
+        <img class="image object-cover w-full h-full md:h-[400px]" 
+             src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg">
+    </div>
+</div>
+
+
+
+
+<div class="mt-32 mx-4 flex relative items-center">
+      <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/gallery/Left-small-img1.jpg">
+      
+      <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" 
+               href="https://brooksbingham.com/16-custom-made-clothing"> 
+               Start Customization 
+            </a>
+        </div>
+      </div>
+</div>
+
+<div class="mx-4 mt-32">
+  <h1 class="font-bold lg:text-3xl md:text-xl text-lg">BROOKSBINGHAM</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-48">
    <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>
@@ -165,7 +441,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>
 
          <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'}