refactor:update slider

Reviewed-on: brooksbingham/theme-elegance#41

assets/css/theme.css

@@ -787,10 +787,6 @@ select {
   bottom: 0.25rem;
 }
 
-.bottom-9 {
-  bottom: 2.25rem;
-}
-
 .bottom-\[50\%\] {
   bottom: 50%;
 }
@@ -835,6 +831,10 @@ select {
   top: 50%;
 }
 
+.top-28 {
+  top: 7rem;
+}
+
 .top-\[70\%\] {
   top: 70%;
 }
@@ -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;
 }
@@ -936,11 +924,6 @@ select {
   margin-bottom: 0.125rem;
 }
 
-.my-12 {
-  margin-top: 3rem;
-  margin-bottom: 3rem;
-}
-
 .my-2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -1065,10 +1048,6 @@ select {
   margin-top: 2.25rem;
 }
 
-.box-border {
-  box-sizing: border-box;
-}
-
 .block {
   display: block;
 }
@@ -1081,6 +1060,10 @@ select {
   display: flex;
 }
 
+.inline-flex {
+  display: inline-flex;
+}
+
 .table {
   display: table;
 }
@@ -1101,8 +1084,8 @@ select {
   aspect-ratio: 342/513;
 }
 
-.h-1\/2 {
+.h-10 {
-  height: 50%;
+  height: 2.5rem;
 }
 
 .h-12 {
@@ -1113,6 +1096,10 @@ select {
   height: 6rem;
 }
 
+.h-4 {
+  height: 1rem;
+}
+
 .h-40 {
   height: 10rem;
 }
@@ -1137,6 +1124,10 @@ select {
   height: 20px;
 }
 
+.h-\[30px\] {
+  height: 30px;
+}
+
 .h-\[50px\] {
   height: 50px;
 }
@@ -1153,48 +1144,12 @@ select {
   height: 100%;
 }
 
-.h-\[700px\] {
+.h-\[30vh\] {
-  height: 700px;
+  height: 30vh;
 }
 
-.h-\[400px\] {
+.h-\[40vh\] {
-  height: 400px;
+  height: 40vh;
-}
-
-.h-\[500px\] {
-  height: 500px;
-}
-
-.h-\[180px\] {
-  height: 180px;
-}
-
-.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;
 }
 
 .max-h-\[40px\] {
@@ -1213,6 +1168,10 @@ select {
   width: 16.666667%;
 }
 
+.w-10 {
+  width: 2.5rem;
+}
+
 .w-12 {
   width: 3rem;
 }
@@ -1233,6 +1192,10 @@ select {
   width: 8rem;
 }
 
+.w-4 {
+  width: 1rem;
+}
+
 .w-40 {
   width: 10rem;
 }
@@ -1437,24 +1400,20 @@ select {
   gap: 2rem;
 }
 
-.gap-20 {
-  gap: 5rem;
-}
-
 .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;
 }
 
+.gap-y-1 {
+  row-gap: 0.25rem;
+}
+
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@@ -1467,6 +1426,10 @@ select {
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
 
+.overflow-hidden {
+  overflow: hidden;
+}
+
 .overflow-y-auto {
   overflow-y: auto;
 }
@@ -1481,6 +1444,10 @@ select {
   white-space: nowrap;
 }
 
+.rounded-full {
+  border-radius: 9999px;
+}
+
 .rounded-lg {
   border-radius: 0.5rem;
 }
@@ -1493,10 +1460,6 @@ select {
   border-width: 2px;
 }
 
-.border-4 {
-  border-width: 4px;
-}
-
 .border-t {
   border-top-width: 1px;
 }
@@ -1609,13 +1572,9 @@ select {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-red-700 {
+.bg-\[\#E6DFD4\] {
   --tw-bg-opacity: 1;
-  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
+  background-color: rgb(230 223 212 / var(--tw-bg-opacity));
-}
-
-.bg-cover {
-  background-size: cover;
 }
 
 .stroke-black {
@@ -1680,6 +1639,11 @@ select {
   padding: 2rem;
 }
 
+.px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1730,16 +1694,6 @@ select {
   padding-bottom: 2rem;
 }
 
-.px-20 {
-  padding-left: 5rem;
-  padding-right: 5rem;
-}
-
-.px-0 {
-  padding-left: 0px;
-  padding-right: 0px;
-}
-
 .pb-10 {
   padding-bottom: 2.5rem;
 }
@@ -1856,18 +1810,6 @@ select {
   padding-top: 2.25rem;
 }
 
-.pt-12 {
-  padding-top: 3rem;
-}
-
-.pt-11 {
-  padding-top: 2.75rem;
-}
-
-.pb-20 {
-  padding-bottom: 5rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -1889,11 +1831,6 @@ select {
   line-height: 2rem;
 }
 
-.text-4xl {
-  font-size: 2.25rem;
-  line-height: 2.5rem;
-}
-
 .text-5xl {
   font-size: 3rem;
   line-height: 1;
@@ -1956,11 +1893,6 @@ select {
   line-height: 1;
 }
 
-.text-\[\#000E2A\] {
-  --tw-text-opacity: 1;
-  color: rgb(0 14 42 / var(--tw-text-opacity));
-}
-
 .text-blue-900 {
   --tw-text-opacity: 1;
   color: rgb(30 58 138 / var(--tw-text-opacity));
@@ -2031,6 +1963,11 @@ select {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
 .underline {
   text-decoration-line: underline;
 }
@@ -2325,6 +2262,13 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
   display: none;
 }
 
+@media (prefers-color-scheme: dark) {
+  .dark\:text-gray-800 {
+    --tw-text-opacity: 1;
+    color: rgb(31 41 55 / var(--tw-text-opacity));
+  }
+}
+
 @media not all and (min-width: 1024px) {
   .max-lg\:flex-col {
     flex-direction: column;
@@ -2396,14 +2340,6 @@ 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;
@@ -2441,6 +2377,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     display: none;
   }
 
+  .md\:h-\[200px\] {
+    height: 200px;
+  }
+
   .md\:h-\[300px\] {
     height: 300px;
   }
@@ -2453,16 +2393,16 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     height: 40px;
   }
 
-  .md\:h-\[100px\] {
+  .md\:h-\[70vh\] {
-    height: 100px;
+    height: 70vh;
   }
 
-  .md\:h-\[180px\] {
+  .md\:h-\[80vh\] {
-    height: 180px;
+    height: 80vh;
   }
 
-  .md\:h-\[200px\] {
+  .md\:h-full {
-    height: 200px;
+    height: 100%;
   }
 
   .md\:w-1\/2 {
@@ -2521,14 +2461,14 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     width: 70%;
   }
 
-  .md\:grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
   .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;
   }
@@ -2557,8 +2497,13 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     gap: 1rem;
   }
 
-  .md\:gap-20 {
+  .md\:bg-transparent {
-    gap: 5rem;
+    background-color: transparent;
+  }
+
+  .md\:object-cover {
+    -o-object-fit: cover;
+       object-fit: cover;
   }
 
   .md\:p-2 {
@@ -2569,9 +2514,9 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     padding: 2rem;
   }
 
-  .md\:px-10 {
+  .md\:px-12 {
-    padding-left: 2.5rem;
+    padding-left: 3rem;
-    padding-right: 2.5rem;
+    padding-right: 3rem;
   }
 
   .md\:px-4 {
@@ -2579,11 +2524,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     padding-right: 1rem;
   }
 
-  .md\:px-12 {
-    padding-left: 3rem;
-    padding-right: 3rem;
-  }
-
   .md\:pl-10 {
     padding-left: 2.5rem;
   }
@@ -2620,6 +2560,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     padding-top: 0px;
   }
 
+  .md\:pt-11 {
+    padding-top: 2.75rem;
+  }
+
   .md\:pt-12 {
     padding-top: 3rem;
   }
@@ -2628,6 +2572,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     padding-top: 0.75rem;
   }
 
+  .md\:pt-5 {
+    padding-top: 1.25rem;
+  }
+
   .md\:pt-6 {
     padding-top: 1.5rem;
   }
@@ -2636,18 +2584,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     padding-top: 1.75rem;
   }
 
-  .md\:pt-8 {
-    padding-top: 2rem;
-  }
-
-  .md\:pt-5 {
-    padding-top: 1.25rem;
-  }
-
-  .md\:pt-11 {
-    padding-top: 2.75rem;
-  }
-
   .md\:text-left {
     text-align: left;
   }
@@ -2714,23 +2650,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     bottom: 0.75rem;
   }
 
-  .lg\:bottom-48 {
-    bottom: 12rem;
-  }
-
   .lg\:right-0 {
     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;
@@ -2760,6 +2683,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     display: none;
   }
 
+  .lg\:h-\[300px\] {
+    height: 300px;
+  }
+
   .lg\:h-\[400px\] {
     height: 400px;
   }
@@ -2776,14 +2703,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%;
   }
@@ -2876,11 +2795,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     padding-bottom: 0px;
   }
 
-  .lg\:py-8 {
-    padding-top: 2rem;
-    padding-bottom: 2rem;
-  }
-
   .lg\:pb-6 {
     padding-bottom: 1.5rem;
   }
@@ -2909,10 +2823,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     padding-top: 3rem;
   }
 
-  .lg\:pt-16 {
-    padding-top: 4rem;
-  }
-
   .lg\:pt-24 {
     padding-top: 6rem;
   }
@@ -2974,14 +2884,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
 }
 
 @media (min-width: 1280px) {
-  .xl\:right-56 {
-    right: 14rem;
-  }
-
-  .xl\:h-\[500px\] {
-    height: 500px;
-  }
-
   .xl\:h-\[460px\] {
     height: 460px;
   }

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

@@ -23,7 +23,6 @@
  * International Registered Trademark & Property of PrestaShop SA
  *}
 
- <!--
 <section class="featured-products flex flex-col gap-8">
   <h2 class="products-section-title text-2xl font-bold">
     {l s='Popular Products' d='Shop.Theme.Catalog'}
@@ -39,7 +38,3 @@
   </a>
 </section>
   
--->
-
-
-  

templates/layouts/layout-both-columns.tpl

@@ -51,20 +51,19 @@
       {/block}
     </header>
 
+    {if $page.page_name == 'index'}
+      <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="w-full h-[30vh] md:h-[70vh]">
+      </div>
+    {/if}
+
     {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'}
         {include file='_partials/breadcrumb.tpl'}
@@ -97,19 +96,12 @@
       {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>
-
-<div class="xl:h-[460px] lg:h-[300px] md:h-[200px] h-[30px]" >
-</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 +118,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 +147,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">
+               href="https://stage.brooksbingham.com/content/10-how-to-measure">
-               Start Customization
+               How to measure
             </a>
         </div>
       </div>
@@ -259,44 +251,124 @@
 
 
 <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="w-full md:w-[60%] text-center md:text-left md:pt-0 pt-5 md:pr-5 pr-0 relative"> 
-        <div class="flex justify-center lg:pb-6 pb-3">
+        <div id="slider" class="relative overflow-hidden">
-            <img class="lg:w-[60px] lg:h-[60px] md:w-[40px] md:h-[40px] w-[50px] h-[50px]"
+            <div class="slide">
-                 src="https://brooksbingham.com/img/logo-1715173509.jpg">
+                <div class="flex justify-center lg:pb-6 pb-3">
-        </div>
+                    <img class="lg:w-[60px] lg:h-[60px] md:w-[40px] md:h-[40px] w-[50px] h-[50px]"
-        <h1 class="font-bold lg:text-3xl md:text-2xl text-xl text-center">
+                         src="https://brooksbingham.com/img/logo-1715173509.jpg">
-            See What They Think
+                </div>
-        </h1>
+                <h1 class="font-bold lg:text-3xl md:text-2xl text-xl text-center">
-        <p class="lg:text-xl text-sm font-medium lg:pt-10 pt-6 text-center">
+                    See What They Think
-            The quality of my bespoke shirts from Brooks Bingham Clothing has been exceptional! 
+                </h1>
-        </p>
+                <p class="lg:text-xl text-sm font-medium lg:pt-10 pt-6 text-center relative z-10">
-        <p class="lg:text-xl text-sm font-medium text-center">
+                    The quality of my bespoke shirts from Brooks Bingham Clothing has been exceptional!
-            The fabrics, buttons, and stitching are of the highest quality.
+                </p>
-        </p>
+                <p class="lg:text-xl text-sm font-medium text-center relative z-10">
-        <h1 class="font-bold text-center lg:text-xl md:text-lg text-md lg:pt-8 pt-6">Matt K </h1>
+                    The fabrics, buttons, and stitching are of the highest quality.
-        <div class="flex justify-center lg:pt-10 md:pt-6 pt-8">
+                </p>
-            <svg class="w-[20px] h-[20px] mx-1" viewBox="0 0 24 24" fill="gold" xmlns="http://www.w3.org/2000/svg">
+                <h1 class="font-bold text-center lg:text-xl md:text-lg text-md lg:pt-8 pt-6">Matt K</h1>
-                <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"/>
+                <div class="flex justify-center lg:pt-10 md:pt-6 pt-8">
-            </svg>
+                    <svg class="w-[20px] h-[20px] mx-1" viewBox="0 0 24 24" fill="gold" xmlns="http://www.w3.org/2000/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"/>
-                <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>
+                    <svg class="w-[20px] h-[20px] mx-1" viewBox="0 0 24 24" fill="gold" xmlns="http://www.w3.org/2000/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"/>
-                <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>
+                    <svg class="w-[20px] h-[20px] mx-1" viewBox="0 0 24 24" fill="gold" xmlns="http://www.w3.org/2000/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"/>
-                <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>
+                    <svg class="w-[20px] h-[20px] mx-1" viewBox="0 0 24 24" fill="gold" xmlns="http://www.w3.org/2000/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"/>
-                <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>
+                    <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="slide hidden">
+                <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 relative z-10">
+                    Magical, is how I can describe my experience and the suits Brooks helped with my wedding! The men are still wearing their suit jackets and suits for other events! The fit was sharp and the fabrics were fantastic! There were so many options it was tough to choose from! Highly recommend Brooks for custom suits for any occasion!
+                </p>
+                <h1 class="font-bold text-center lg:text-xl md:text-lg text-md lg:pt-8 pt-6">Stephanie H</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>
+
+        <button type="button" 
+                class="absolute left-0 top-28  flex items-center justify-center h-full cursor-pointer" 
+                data-carousel-prev>
+            <span class="inline-flex items-center justify-center w-10 h-10">
+                <svg class="w-4 h-4 text-gray-800" 
+                     aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+                    <path stroke="currentColor" 
+                          stroke-linecap="round" 
+                          stroke-linejoin="round" 
+                          stroke-width="2" 
+                          d="M5 1 1 5l4 4"/>
+                </svg>
+                <span class="sr-only">Previous</span>
+            </span>
+        </button>
+        <button type="button" 
+                class="absolute right-0 top-28 flex items-center justify-center h-full cursor-pointer" 
+                data-carousel-next>
+            <span class="inline-flex items-center justify-center w-10 h-10">
+                <svg class="w-4 h-4 text-gray-800" 
+                     aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
+                </svg>
+                <span class="sr-only">Next</span>
+            </span>
+        </button>
     </div>
     <div class="w-full md:w-[40%] h-full">
-      <img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/seo-img5.png">
+        <img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/seo-img5.png">
     </div>
 </div>
 
+<script>
+    const slides = document.querySelectorAll('.slide');
+    let currentSlide = 0;
+
+    document.querySelector('[data-carousel-next]').addEventListener('click', () => {
+        slides[currentSlide].classList.add('hidden');
+        currentSlide = (currentSlide + 1) % slides.length;
+        slides[currentSlide].classList.remove('hidden');
+    });
+
+    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>
+
+
 <div class="mt-32 flex relative items-center left-0 right-0">
       <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">
@@ -308,7 +380,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>
@@ -434,7 +506,6 @@
       {hook h='displayBeforeBodyClosingTag'}
     {/block}
 
-
   </body>
 
 </html>