feat:add SEO section for custom made page

assets/css/theme.css

@@ -787,6 +787,10 @@ select {
   bottom: 0.25rem;
 }
 
+.bottom-9 {
+  bottom: 2.25rem;
+}
+
 .bottom-\[50\%\] {
   bottom: 50%;
 }
@@ -886,6 +890,11 @@ select {
   margin-bottom: -0.75rem;
 }
 
+.mx-3 {
+  margin-left: 0.75rem;
+  margin-right: 0.75rem;
+}
+
 .mx-4 {
   margin-left: 1rem;
   margin-right: 1rem;
@@ -916,6 +925,11 @@ select {
   margin-bottom: 2rem;
 }
 
+.my-32 {
+  margin-top: 8rem;
+  margin-bottom: 8rem;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -932,6 +946,10 @@ select {
   margin-bottom: 0.5rem;
 }
 
+.mb-20 {
+  margin-bottom: 5rem;
+}
+
 .mb-24 {
   margin-bottom: 6rem;
 }
@@ -1008,10 +1026,6 @@ select {
   margin-top: 2rem;
 }
 
-.mb-20 {
-  margin-bottom: 5rem;
-}
-
 .block {
   display: block;
 }
@@ -1068,6 +1082,14 @@ select {
   height: 2rem;
 }
 
+.h-\[350px\] {
+  height: 350px;
+}
+
+.h-\[380px\] {
+  height: 380px;
+}
+
 .h-auto {
   height: auto;
 }
@@ -1177,6 +1199,10 @@ select {
   max-width: 100%;
 }
 
+.max-w-screen-lg {
+  max-width: 1024px;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1228,6 +1254,10 @@ select {
   flex-direction: column;
 }
 
+.flex-col-reverse {
+  flex-direction: column-reverse;
+}
+
 .flex-wrap {
   flex-wrap: wrap;
 }
@@ -1264,6 +1294,10 @@ select {
   gap: 0.25rem;
 }
 
+.gap-12 {
+  gap: 3rem;
+}
+
 .gap-16 {
   gap: 4rem;
 }
@@ -1464,10 +1498,18 @@ select {
   padding: 0.625rem;
 }
 
+.p-3 {
+  padding: 0.75rem;
+}
+
 .p-4 {
   padding: 1rem;
 }
 
+.p-5 {
+  padding: 1.25rem;
+}
+
 .p-8 {
   padding: 2rem;
 }
@@ -1517,10 +1559,31 @@ select {
   padding-bottom: 2rem;
 }
 
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
+.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-12 {
   padding-left: 3rem;
 }
@@ -1561,6 +1624,10 @@ select {
   padding-right: 2rem;
 }
 
+.pt-1 {
+  padding-top: 0.25rem;
+}
+
 .pt-20 {
   padding-top: 5rem;
 }
@@ -1569,10 +1636,18 @@ select {
   padding-top: 1rem;
 }
 
+.pt-5 {
+  padding-top: 1.25rem;
+}
+
 .pt-6 {
   padding-top: 1.5rem;
 }
 
+.pt-9 {
+  padding-top: 2.25rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -1594,6 +1669,11 @@ select {
   line-height: 2rem;
 }
 
+.text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -1651,6 +1731,11 @@ 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));
@@ -1671,6 +1756,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));
@@ -2061,9 +2151,18 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
 }
 
 @media (min-width: 640px) {
+  .sm\:mb-1 {
+    margin-bottom: 0.25rem;
+  }
+
   .sm\:flex {
     display: flex;
   }
+
+  .sm\:px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
 }
 
 @media (min-width: 768px) {
@@ -2071,6 +2170,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;
   }
@@ -2079,6 +2186,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     display: flex;
   }
 
+  .md\:grid {
+    display: grid;
+  }
+
   .md\:hidden {
     display: none;
   }
@@ -2115,6 +2226,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     width: 50%;
   }
 
+  .md\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
   .md\:flex-row {
     flex-direction: row;
   }
@@ -2131,6 +2246,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     gap: 0px;
   }
 
+  .md\:gap-10 {
+    gap: 2.5rem;
+  }
+
   .md\:gap-4 {
     gap: 1rem;
   }
@@ -2159,6 +2278,15 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     padding-right: 12rem;
   }
 
+  .md\:pt-9 {
+    padding-top: 2.25rem;
+  }
+
+  .md\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
   .md\:text-3xl {
     font-size: 1.875rem;
     line-height: 2.25rem;
@@ -2198,18 +2326,22 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     bottom: 0.75rem;
   }
 
+  .lg\:bottom-48 {
+    bottom: 12rem;
+  }
+
   .lg\:right-0 {
     right: 0px;
   }
 
-  .lg\:mb-32 {
-    margin-bottom: 8rem;
-  }
-
   .lg\:mb-2 {
     margin-bottom: 0.5rem;
   }
 
+  .lg\:mb-32 {
+    margin-bottom: 8rem;
+  }
+
   .lg\:flex {
     display: flex;
   }
@@ -2218,6 +2350,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     display: none;
   }
 
+  .lg\:h-2\/3 {
+    height: 66.666667%;
+  }
+
   .lg\:h-\[90vh\] {
     height: 90vh;
   }
@@ -2234,6 +2370,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     width: 20%;
   }
 
+  .lg\:w-11\/12 {
+    width: 91.666667%;
+  }
+
   .lg\:w-2\/5 {
     width: 40%;
   }
@@ -2242,6 +2382,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     width: 60%;
   }
 
+  .lg\:w-80 {
+    width: 20rem;
+  }
+
   .lg\:w-full {
     width: 100%;
   }
@@ -2278,24 +2422,66 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     padding: 1rem;
   }
 
+  .lg\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
   .lg\:py-0 {
     padding-top: 0px;
     padding-bottom: 0px;
   }
 
+  .lg\:px-36 {
+    padding-left: 9rem;
+    padding-right: 9rem;
+  }
+
+  .lg\:pt-12 {
+    padding-top: 3rem;
+  }
+
+  .lg\:pt-14 {
+    padding-top: 3.5rem;
+  }
+
   .lg\:pt-24 {
     padding-top: 6rem;
   }
 
+  .lg\:text-3xl {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
+
+  .lg\:text-5xl {
+    font-size: 3rem;
+    line-height: 1;
+  }
+
+  .lg\:text-lg {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+
   .lg\:text-xl {
     font-size: 1.25rem;
     line-height: 1.75rem;
   }
 
+  .lg\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+
   .lg\:font-bold {
     font-weight: 700;
   }
 
+  .lg\:font-semibold {
+    font-weight: 600;
+  }
+
   .lg\:shadow-none {
     --tw-shadow: 0 0 #0000;
     --tw-shadow-colored: 0 0 #0000;
@@ -2304,8 +2490,16 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
 }
 
 @media (min-width: 1280px) {
+  .xl\:right-56 {
+    right: 14rem;
+  }
+
   .xl\:w-1\/4 {
     width: 25%;
   }
+
+  .xl\:w-9\/12 {
+    width: 75%;
+  }
 }
 

templates/catalog/_partials/products.tpl

@@ -22,6 +22,29 @@
  * @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=" 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>
+
 <div id="js-product-list" class="flex flex-col">
   <div class="products flex flex-wrap">
     {foreach from=$listing.products item="product"}
@@ -41,3 +64,250 @@
     </a>
   </div>
 </div>
+i
+
+<div class="relative 
+            flex 
+            mt-16 
+            lg:h-2/3
+            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 
+                right-4 
+                lg:bottom-48 
+                bottom-9 
+                text-[#000E2A] 
+                text-left 
+                lg:text-5xl 
+                md:text-2xl 
+                text-sm 
+                lg:font-semibold 
+                font-bold">
+        <h1> Because You Are Unique. </h1>
+        <h1> So Is Your Body… </h1>
+     </div>
+</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">
+        <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. 
+            Experience unmatched comfort and style with our tailored suits, celebrating 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"> 
+           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 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_992-min.jpg">
+    </div>
+</div>
+
+
+
+<div class="flex 
+            mt-20 
+            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">
+      <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/17-custom-made-clothing"> 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="text-4xl 
+                 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-auto 
+                              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">
+                  </div>
+                <div class="mt-4">
+                  <h4 class="text-xl 
+                             leading-6 
+                             font-bold 
+                             text-gray-900 
+                             pb-2">
+                      Select the Fabric </h4>
+                  <p class="mt-3 
+                             font-semibold 
+                            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-auto 
+                            pt-4 
+                            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">
+                </div>
+              <div class="mt-4">
+                <h4 class="text-xl 
+                           leading-6 
+                           font-bold 
+                           text-gray-900 
+                           pb-2">
+                    Finalize the Design </h4>
+                <p class="mt-3 
+                          text-lg 
+                          font-semibold 
+                          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-auto 
+                            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="Get Measured">
+                </div>
+              <div class="mt-4">
+                <h4 class="text-xl 
+                         leading-6 
+                         font-bold 
+                         text-gray-900 
+                         pb-2">
+                    Get Measured </h4>
+                <p class="mt-3 
+                        text-lg 
+                        font-semibold 
+                        leading-6 
+                        text-gray-500">
+                  Ensure your custom apparel fits you flawlessly by getting measured. </p>
+               </div>
+             </div>
+          </li>
+        </ul>
+      </div>
+  </div>
+</div>