From 2052be6e3ef2717be6fdfd543ed6b7541c8b76c6 Mon Sep 17 00:00:00 2001
From: apurvab <apurvabangali@gmail.com>
Date: Wed, 12 Jun 2024 11:17:43 +0530
Subject: [PATCH] refactor:change who are we section

---
 assets/css/theme.css                          | 101 ++++--------------
 .../templates/hook/ps_featuredproducts.tpl    |   2 +-
 templates/layouts/layout-both-columns.tpl     |  25 ++---
 3 files changed, 36 insertions(+), 92 deletions(-)

diff --git a/assets/css/theme.css b/assets/css/theme.css
index 6c3ab0b..46160e1 100755
--- a/assets/css/theme.css
+++ b/assets/css/theme.css
@@ -787,10 +787,6 @@ select {
   bottom: 0.25rem;
 }
 
-.bottom-5 {
-  bottom: 1.25rem;
-}
-
 .bottom-\[50\%\] {
   bottom: 50%;
 }
@@ -839,6 +835,10 @@ select {
   top: 100%;
 }
 
+.left-2 {
+  left: 0.5rem;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -915,16 +915,6 @@ select {
   margin-bottom: 0.5rem;
 }
 
-.my-48 {
-  margin-top: 12rem;
-  margin-bottom: 12rem;
-}
-
-.my-5 {
-  margin-top: 1.25rem;
-  margin-bottom: 1.25rem;
-}
-
 .my-8 {
   margin-top: 2rem;
   margin-bottom: 2rem;
@@ -946,6 +936,10 @@ select {
   margin-bottom: 0.5rem;
 }
 
+.mb-24 {
+  margin-bottom: 6rem;
+}
+
 .mb-3 {
   margin-bottom: 0.75rem;
 }
@@ -954,10 +948,6 @@ select {
   margin-bottom: 1rem;
 }
 
-.mb-6 {
-  margin-bottom: 1.5rem;
-}
-
 .mb-8 {
   margin-bottom: 2rem;
 }
@@ -1022,10 +1012,6 @@ select {
   margin-top: 2rem;
 }
 
-.mb-24 {
-  margin-bottom: 6rem;
-}
-
 .block {
   display: block;
 }
@@ -1082,10 +1068,6 @@ select {
   height: 2rem;
 }
 
-.h-\[400px\] {
-  height: 400px;
-}
-
 .h-auto {
   height: auto;
 }
@@ -1138,10 +1120,6 @@ select {
   width: 11rem;
 }
 
-.w-48 {
-  width: 12rem;
-}
-
 .w-5 {
   width: 1.25rem;
 }
@@ -1410,11 +1388,6 @@ select {
   border-color: rgb(252 165 165 / var(--tw-border-opacity));
 }
 
-.bg-\[\#000E2A\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 14 42 / var(--tw-bg-opacity));
-}
-
 .bg-black\/70 {
   background-color: rgb(0 0 0 / 0.7);
 }
@@ -1449,11 +1422,6 @@ select {
   background-color: rgb(254 242 242 / var(--tw-bg-opacity));
 }
 
-.bg-slate-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(226 232 240 / var(--tw-bg-opacity));
-}
-
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -2086,15 +2054,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
   .sm\:flex {
     display: flex;
   }
-
-  .sm\:pr-4 {
-    padding-right: 1rem;
-  }
-
-  .sm\:text-sm {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-  }
 }
 
 @media (min-width: 768px) {
@@ -2102,10 +2061,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     position: absolute;
   }
 
-  .md\:mt-28 {
-    margin-top: 7rem;
-  }
-
   .md\:block {
     display: block;
   }
@@ -2142,6 +2097,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     width: 6rem;
   }
 
+  .md\:w-3\/5 {
+    width: 60%;
+  }
+
   .md\:w-3\/6 {
     width: 50%;
   }
@@ -2190,6 +2149,16 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     padding-right: 12rem;
   }
 
+  .md\:text-3xl {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
+
+  .md\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+
   .md\:text-base {
     font-size: 1rem;
     line-height: 1.5rem;
@@ -2215,10 +2184,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     position: static;
   }
 
-  .lg\:absolute {
-    position: absolute;
-  }
-
   .lg\:bottom-3 {
     bottom: 0.75rem;
   }
@@ -2231,22 +2196,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     right: 0px;
   }
 
-  .lg\:mb-20 {
-    margin-bottom: 5rem;
-  }
-
   .lg\:mb-32 {
     margin-bottom: 8rem;
   }
 
-  .lg\:mt-24 {
-    margin-top: 6rem;
-  }
-
-  .lg\:mb-52 {
-    margin-bottom: 13rem;
-  }
-
   .lg\:flex {
     display: flex;
   }
@@ -2324,16 +2277,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     padding-top: 6rem;
   }
 
-  .lg\:text-2xl {
-    font-size: 1.5rem;
-    line-height: 2rem;
-  }
-
-  .lg\:text-lg {
-    font-size: 1.125rem;
-    line-height: 1.75rem;
-  }
-
   .lg\:text-xl {
     font-size: 1.25rem;
     line-height: 1.75rem;
diff --git a/modules/ps_featuredproducts/views/templates/hook/ps_featuredproducts.tpl b/modules/ps_featuredproducts/views/templates/hook/ps_featuredproducts.tpl
index edc3c95..9d8076b 100644
--- a/modules/ps_featuredproducts/views/templates/hook/ps_featuredproducts.tpl
+++ b/modules/ps_featuredproducts/views/templates/hook/ps_featuredproducts.tpl
@@ -31,7 +31,7 @@
       {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" href="{$allProductsLink}">
+  <a class="all-product-link text-2xl font-bold w-full flex items-center justify-end mb-24" 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>
diff --git a/templates/layouts/layout-both-columns.tpl b/templates/layouts/layout-both-columns.tpl
index 8d44612..1f4c146 100644
--- a/templates/layouts/layout-both-columns.tpl
+++ b/templates/layouts/layout-both-columns.tpl
@@ -128,8 +128,8 @@
 
    <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 lg:left-0 right-2 font-bold lg:text-xl mb-2 text-xs lg:p-4">Business Suits for Men</h3>
-    <h3 class="absolute bottom-0 text-white text-lg hide-on-small p-4">Make a powerful impression and radiate confidence</h3>
+    <h3 class="absolute lg:bottom-3 bottom-1 right-0 font-bold lg:text-xl mb-2 text-xs 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>
@@ -149,8 +149,8 @@
 
    <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 lg:left-0 right-2 font-bold lg:text-xl mb-2 text-xs lg:p-4">Wear Your Identity</h3>
-    <h3 class="absolute bottom-0 text-white text-lg hide-on-small p-4">Fashion that speaks volumes</h3>
+    <h3 class="absolute lg:bottom-3 bottom-1 right-0  font-bold lg:text-xl mb-2 text-xs 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">
@@ -172,16 +172,17 @@
           <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=" w-full flex lg:flex-row p-8 flex-col">
-          <div >
-            <h1 class="text-2xl p-4 font-bold">Who Are We?</h1>
-            <p class="text-lg p-4 font-medium"><b>BrooksBingham</b> is your destination for custom-tailored menswear, where authenticity is woven into every stitch. Experience our cutting-edge fitting technology for a flawless fit tailored to your measurements in minutes.Our perfect fit guarantee ensures that every piece you order is tailored to your exact specifications, delivering a perfect fit every time.</p>
-            <a class="p-4 font-bold text-lg flex flex-row" href="https://brooksbingham.com/content/4-about-brooksbingham">
-             Learn 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 class="flex">
+         <div class="flex justify-center p-8">
+          <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}