From eba682fdaaccf2437a5d85bfbff4e8c2af0eefb2 Mon Sep 17 00:00:00 2001
From: jatin <jatiny@consultbop.com>
Date: Thu, 4 Jul 2024 16:20:23 +0530
Subject: [PATCH] fix: add cta links, change img link, hero section positioning

---
 assets/css/theme.css                      | 142 ++++++++++------------
 templates/layouts/layout-both-columns.tpl | 108 ++--------------
 2 files changed, 79 insertions(+), 171 deletions(-)

diff --git a/assets/css/theme.css b/assets/css/theme.css
index e330326..a558249 100644
--- a/assets/css/theme.css
+++ b/assets/css/theme.css
@@ -847,18 +847,6 @@ select {
   z-index: 10;
 }
 
-.z-0 {
-  z-index: 0;
-}
-
-.z-auto {
-  z-index: auto;
-}
-
-.z-50 {
-  z-index: 50;
-}
-
 .col-span-1 {
   grid-column: span 1 / span 1;
 }
@@ -961,6 +949,11 @@ select {
   margin-bottom: 2rem;
 }
 
+.my-16 {
+  margin-top: 4rem;
+  margin-bottom: 4rem;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -1065,10 +1058,6 @@ select {
   margin-top: 2.25rem;
 }
 
-.box-border {
-  box-sizing: border-box;
-}
-
 .block {
   display: block;
 }
@@ -1137,6 +1126,10 @@ select {
   height: 20px;
 }
 
+.h-\[30px\] {
+  height: 30px;
+}
+
 .h-\[50px\] {
   height: 50px;
 }
@@ -1153,48 +1146,24 @@ select {
   height: 100%;
 }
 
-.h-\[700px\] {
-  height: 700px;
+.h-4\/5 {
+  height: 80%;
 }
 
-.h-\[400px\] {
-  height: 400px;
+.h-\[80vh\] {
+  height: 80vh;
 }
 
-.h-\[500px\] {
-  height: 500px;
+.h-\[70vh\] {
+  height: 70vh;
 }
 
-.h-\[180px\] {
-  height: 180px;
+.h-\[40vh\] {
+  height: 40vh;
 }
 
-.h-\[100px\] {
-  height: 100px;
-}
-
-.h-\[70px\] {
-  height: 70px;
-}
-
-.h-\[30px\] {
-  height: 30px;
-}
-
-.h-32 {
-  height: 8rem;
-}
-
-.h-96 {
-  height: 24rem;
-}
-
-.h-\[300px\] {
-  height: 300px;
-}
-
-.h-\[600px\] {
-  height: 600px;
+.h-\[30vh\] {
+  height: 30vh;
 }
 
 .max-h-\[40px\] {
@@ -1480,10 +1449,6 @@ select {
   border-width: 2px;
 }
 
-.border-4 {
-  border-width: 4px;
-}
-
 .border-t {
   border-top-width: 1px;
 }
@@ -1596,13 +1561,23 @@ select {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-red-700 {
+.bg-neutral-400 {
   --tw-bg-opacity: 1;
-  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
+  background-color: rgb(163 163 163 / var(--tw-bg-opacity));
 }
 
-.bg-cover {
-  background-size: cover;
+.bg-neutral-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#E6DFD4\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(230 223 212 / var(--tw-bg-opacity));
+}
+
+.bg-transparent {
+  background-color: transparent;
 }
 
 .stroke-black {
@@ -1629,11 +1604,21 @@ select {
   stroke-width: 3px;
 }
 
+.object-contain {
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
 }
 
+.object-fill {
+  -o-object-fit: fill;
+     object-fit: fill;
+}
+
 .object-scale-down {
   -o-object-fit: scale-down;
      object-fit: scale-down;
@@ -2406,6 +2391,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     display: none;
   }
 
+  .md\:h-\[200px\] {
+    height: 200px;
+  }
+
   .md\:h-\[300px\] {
     height: 300px;
   }
@@ -2418,16 +2407,16 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     height: 40px;
   }
 
-  .md\:h-\[100px\] {
-    height: 100px;
+  .md\:h-\[80vh\] {
+    height: 80vh;
   }
 
-  .md\:h-\[180px\] {
-    height: 180px;
+  .md\:h-\[70vh\] {
+    height: 70vh;
   }
 
-  .md\:h-\[200px\] {
-    height: 200px;
+  .md\:h-full {
+    height: 100%;
   }
 
   .md\:w-1\/2 {
@@ -2518,6 +2507,15 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     gap: 1rem;
   }
 
+  .md\:bg-transparent {
+    background-color: transparent;
+  }
+
+  .md\:object-cover {
+    -o-object-fit: cover;
+       object-fit: cover;
+  }
+
   .md\:p-2 {
     padding: 0.5rem;
   }
@@ -2704,6 +2702,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     display: none;
   }
 
+  .lg\:h-\[300px\] {
+    height: 300px;
+  }
+
   .lg\:h-\[400px\] {
     height: 400px;
   }
@@ -2720,14 +2722,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     height: 90vh;
   }
 
-  .lg\:h-\[460px\] {
-    height: 460px;
-  }
-
-  .lg\:h-\[300px\] {
-    height: 300px;
-  }
-
   .lg\:w-1\/3 {
     width: 33.333333%;
   }
@@ -2922,10 +2916,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     right: 14rem;
   }
 
-  .xl\:h-\[500px\] {
-    height: 500px;
-  }
-
   .xl\:h-\[460px\] {
     height: 460px;
   }
diff --git a/templates/layouts/layout-both-columns.tpl b/templates/layouts/layout-both-columns.tpl
index 3bd562d..587f255 100644
--- a/templates/layouts/layout-both-columns.tpl
+++ b/templates/layouts/layout-both-columns.tpl
@@ -54,16 +54,6 @@
     {block name='displayBeforeWrapper'}
       {hook h='displayBeforeWrapper'}
     {/block}
-    
-<!--        {if $page.page_name == 'index'}
-      <a href="https://brooksbingham.com/17-custom-made" id="slider">
-      <div  class="mb-12 w-full lg:h-[90vh]" style="clip-path: inset(4px)" id="slider">
-          <video autoplay muted loop class="w-full h-full 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>
-      </div>
-    </a>  
-      {/if} -->
 
     <section class="container mx-auto">
       {block name='breadcrumb'}
@@ -95,21 +85,20 @@
       {/block}
 
       {if $page.page_name == 'index'}
-  
 
-<div>
-
-  <img class="absolute left-0 top-0 right-0 w-full" 
-       src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/banner.png"
+<div class="w-full h-[40vh] md:h-[80vh] absolute top-0 left-0 bg-[#E6DFD4] md:bg-transparent 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>
-
-<div class="xl:h-[460px] lg:h-[300px] md:h-[200px] h-[30px]" >
+<div class="w-full h-[30vh] md:h-[70vh]">
 </div>
 
 <div class="lg:my-32 my-20" >
  <h1 class="lg:text-2xl md:text-xl text-lg  font-bold text-center">Design and Visualize what you need</h1>
  <h3 class="lg:text-lg md:text-md text-sm 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"/>
+ <a href="https://brooksbingham.com/module/thob/configurator?id_product=77">
+  <img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/widget-screenshot.png"/>
+ </a>
 </div>
 
 
@@ -126,7 +115,7 @@
         </p>
         <div class="xl:w-52 lg:w-42 md:w-42 w-38 flex md:justify-start justify-center">
             <a class="all-product-link xl:text-xl lg:text-lg md:text-md text-sm font-bold mt-9 flex border border-2 border-black p-2 px-4" 
-               href="https://brooksbingham.com/17-custom-made-clothing">
+               href="https://brooksbingham.com/module/thob/configurator?id_product=75">
                Start Customization
             </a>
         </div>
@@ -155,8 +144,8 @@
         </p>
         <div class="lg:w-52 md:w-42 w-38 flex md:justify-start justify-center">
             <a class="all-product-link xl:text-xl lg:text-lg md:text-sm text-sm font-bold mt-9 md:mt-4 lg:mt-9 flex border border-2 border-black p-2 px-4" 
-               href="https://brooksbingham.com/17-custom-made-clothing">
-               Start Customization
+               href="https://stage.brooksbingham.com/content/10-how-to-measure">
+               How to measure
             </a>
         </div>
       </div>
@@ -308,7 +297,7 @@
         </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"
+                      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>
@@ -330,77 +319,7 @@
      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>
-    <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>
-</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>
-
-      {/if}
-
+{/if}
       {block name="right_column"}
         <div id="right-column" class="col-xs-12 col-sm-4 col-md-3">
           {if $page.page_name == 'product'}
@@ -432,8 +351,7 @@
 
     {block name='hook_before_body_closing_tag'}
       {hook h='displayBeforeBodyClosingTag'}
-    {/block} 
-    -->
+    {/block}
 
   </body>