diff --git a/assets/css/theme.css b/assets/css/theme.css index 61c8d50..9168aad 100755 --- a/assets/css/theme.css +++ b/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%; + } } diff --git a/templates/catalog/_partials/products.tpl b/templates/catalog/_partials/products.tpl index 8814449..90e7935 100644 --- a/templates/catalog/_partials/products.tpl +++ b/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,230 @@ </a> </div> </div> + + +<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-[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 teyour 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-[30%]"> + <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/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%]"> + <img class="image p-3 object-scale-down lg:h-[500px] h-full w-full" + src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/custom-made-page/image%202.jpg"> + </div> + <div class="mx-3 w-full md:w-[70%] text-center md:text-left lg:pr-10 pr-1"> + <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-72 + pt-4 + pb-3" + 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 + 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-72 + pt-4 + pb-3 + 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 + 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-72 + pt-4 + pb-3 + 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 + 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>