diff --git a/assets/css/theme.css b/assets/css/theme.css index a558249..a7be518 100644 --- a/assets/css/theme.css +++ b/assets/css/theme.css @@ -787,10 +787,6 @@ select { bottom: 0.25rem; } -.bottom-9 { - bottom: 2.25rem; -} - .bottom-\[50\%\] { bottom: 50%; } @@ -924,11 +920,6 @@ select { margin-bottom: 0.125rem; } -.my-12 { - margin-top: 3rem; - margin-bottom: 3rem; -} - .my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; @@ -949,11 +940,6 @@ select { margin-bottom: 2rem; } -.my-16 { - margin-top: 4rem; - margin-bottom: 4rem; -} - .mb-1 { margin-bottom: 0.25rem; } @@ -1090,10 +1076,6 @@ select { aspect-ratio: 342/513; } -.h-1\/2 { - height: 50%; -} - .h-12 { height: 3rem; } @@ -1126,8 +1108,12 @@ select { height: 20px; } -.h-\[30px\] { - height: 30px; +.h-\[30vh\] { + height: 30vh; +} + +.h-\[40vh\] { + height: 40vh; } .h-\[50px\] { @@ -1146,26 +1132,6 @@ select { height: 100%; } -.h-4\/5 { - height: 80%; -} - -.h-\[80vh\] { - height: 80vh; -} - -.h-\[70vh\] { - height: 70vh; -} - -.h-\[40vh\] { - height: 40vh; -} - -.h-\[30vh\] { - height: 30vh; -} - .max-h-\[40px\] { max-height: 40px; } @@ -1314,6 +1280,10 @@ select { list-style-type: square; } +.list-disc { + list-style-type: disc; +} + .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @@ -1407,6 +1377,11 @@ select { column-gap: 0.25rem; } +.gap-x-20 { + -moz-column-gap: 5rem; + column-gap: 5rem; +} + .gap-y-1 { row-gap: 0.25rem; } @@ -1522,6 +1497,11 @@ select { border-color: rgb(255 255 255 / var(--tw-border-opacity)); } +.bg-\[\#E6DFD4\] { + --tw-bg-opacity: 1; + background-color: rgb(230 223 212 / var(--tw-bg-opacity)); +} + .bg-black\/70 { background-color: rgb(0 0 0 / 0.7); } @@ -1561,25 +1541,6 @@ select { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.bg-neutral-400 { - --tw-bg-opacity: 1; - background-color: rgb(163 163 163 / var(--tw-bg-opacity)); -} - -.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 { stroke: #000; } @@ -1604,21 +1565,11 @@ 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; @@ -1652,6 +1603,11 @@ select { padding: 2rem; } +.px-0 { + padding-left: 0px; + padding-right: 0px; +} + .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; @@ -1839,11 +1795,6 @@ select { line-height: 2rem; } -.text-4xl { - font-size: 2.25rem; - line-height: 2.5rem; -} - .text-5xl { font-size: 3rem; line-height: 1; @@ -1906,11 +1857,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)); @@ -2346,14 +2292,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; @@ -2391,10 +2329,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { display: none; } - .md\:h-\[200px\] { - height: 200px; - } - .md\:h-\[300px\] { height: 300px; } @@ -2407,14 +2341,14 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { height: 40px; } - .md\:h-\[80vh\] { - height: 80vh; - } - .md\:h-\[70vh\] { height: 70vh; } + .md\:h-\[80vh\] { + height: 80vh; + } + .md\:h-full { height: 100%; } @@ -2475,6 +2409,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { width: 70%; } + .md\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @@ -2524,9 +2462,9 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { padding: 2rem; } - .md\:px-10 { - padding-left: 2.5rem; - padding-right: 2.5rem; + .md\:px-12 { + padding-left: 3rem; + padding-right: 3rem; } .md\:px-4 { @@ -2570,6 +2508,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; } @@ -2578,6 +2520,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; } @@ -2586,10 +2532,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { padding-top: 1.75rem; } - .md\:pt-8 { - padding-top: 2rem; - } - .md\:text-left { text-align: left; } @@ -2656,23 +2598,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; @@ -2702,10 +2631,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { display: none; } - .lg\:h-\[300px\] { - height: 300px; - } - .lg\:h-\[400px\] { height: 400px; } @@ -2814,11 +2739,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; } @@ -2847,10 +2767,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { padding-top: 3rem; } - .lg\:pt-16 { - padding-top: 4rem; - } - .lg\:pt-24 { padding-top: 6rem; } @@ -2912,14 +2828,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { } @media (min-width: 1280px) { - .xl\:right-56 { - right: 14rem; - } - - .xl\:h-\[460px\] { - height: 460px; - } - .xl\:w-1\/4 { width: 25%; } diff --git a/templates/catalog/_partials/products.tpl b/templates/catalog/_partials/products.tpl index d415de7..2313acc 100644 --- a/templates/catalog/_partials/products.tpl +++ b/templates/catalog/_partials/products.tpl @@ -23,6 +23,7 @@ * International Registered Trademark & Property of PrestaShop SA *} +{if $page.meta.title == 'Custom made' || $page.meta.title == 'custom made' || $page.meta.title == 'Custom Made' || $page.meta.title == 'custom'} <div class=" mx-auto h-[50vh] flex flex-col justify-center "> <h1 class="lg:font-semibold @@ -44,6 +45,7 @@ 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> +{/if} <div id="js-product-list" class="flex flex-col"> <div class="products flex flex-wrap"> @@ -54,9 +56,12 @@ {/foreach} </div> +{if $page.meta.title != 'Custom made' && $page.meta.title != 'custom made' && $page.meta.title != 'Custom Made' && $page.meta.title != 'custom'} {block name='pagination'} {include file='_partials/pagination.tpl' pagination=$listing.pagination} {/block} +{/if} + <div class="flex justify-center md:hidden my-8"> <a href="#js-product-list-header" class="btn btn-secondary font-semibold"> @@ -66,45 +71,27 @@ </div> -<div class="relative - flex - mt-16 - h-1/2 - 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 - lg:right-20 - md:right-12 - right-4 - lg:bottom-48 - md:bottom-28 - bottom-9 - text-[#000E2A] - text-left - lg:text-4xl - md:text-2xl - text-xs - font-bold"> - <h1> Because You Are Unique. </h1> - <h1> So Is Your Body… </h1> - </div> +{if $page.meta.title == 'Custom made' || $page.meta.title == 'custom made' || $page.meta.title == 'Custom Made' || $page.meta.title == 'custom'} +<div class="mb-12 w-full lg:h-[90vh]" style="clip-path: inset(4px)"> + <video autoplay muted loop class="w-full h-auto 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> + <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 your Comfort </h1> <p class="lg:text-xl font-medium pt-5"> - Custom-made shirts and tuxedos are tailored specifically for you, offering an unparalleled fit. - Experience unmatched comfort and style with our tailored suits, crafted to celebrate your uniqueness. + Custom-made tuxedos are tailored specifically for you, offering an unparalleled fit. + Experience unmatched comfort and style with our tailored tuxedos, crafted to celebrate 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 + href="https://brooksbingham.com/module/thob/configurator?id_product=77"> + Design Your Tuxedos <svg xmlns="http://www.w3.org/2000/svg" class="icon stroke-gray-600 stroke-[3px] icon-tabler icon-tabler-chevron-right" width="24" @@ -142,7 +129,7 @@ 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"> + href="https://brooksbingham.com/module/thob/configurator?id_product=75"> Design Your Suit <svg xmlns="http://www.w3.org/2000/svg" class="icon stroke-gray-600 stroke-[3px] icon-tabler icon-tabler-chevron-right" @@ -174,7 +161,9 @@ justify-between my-20"> <div class="center pb-6"> - <h2 class="text-4xl + <h2 class="lg:text-3xl + md:text-2xl + text-xl font-bold text-center"> Customize Your Apparel in 3 Steps: </h2> @@ -293,39 +282,113 @@ </div> -<div class="mx-auto lg:my-20 my-12 flex flex-col justify-center px-4 md:px-10 lg:px-20"> + + +<div class="mx-auto mb-20 flex flex-col"> <h1 class="font-bold text-xl md:text-2xl lg:text-3xl text-center"> How Can You Get Measured? </h1> - <div class="pt-8 md:pt-12 lg:pt-16"> - <ul class="font-medium text-sm md:text-xl space-y-2"> - <li>- Simply scan the QR code at checkout.</li> - <li>- Carefully watch the instruction video.</li> - <li>- Next, you will have 2 photos taken to collect all needed measurements to create your custom fit.</li> - </ul> - </div> - <h2 class="font-semibold text-sm md:text-lg lg:text-xl pt-6 md:pt-8 lg:py-8 pb-10"> - (Disclaimer: Please follow the instruction video closely as it will guide you to wear specific clothing, stand barefoot, etc.) - </h2> - <div class="flex justify-end"> - <a class="all-product-link lg:text-xl md:text-lg text-sm font-bold flex items-center " - href="https://stage.brooksbingham.com/content/10-measurement"> - Know 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="md:pt-12 pt-9 lg:px-20 md:px-12 px-0"> + <ul class="md:grid + md:grid-cols-2 + md:gap-10 + gap-x-20"> + <li class="border-2 + p-5 + pb-10 + "> + <div class="flex + flex-col + items-center"> + <div class="mt-4"> + <h4 class="md:text-xl + text-lg + text-center + leading-6 + font-bold + text-gray-900 + pb-2"> + Manual Measurement</h4> + <div class="md:pt-5 pt-3 font-medium text-lg"> + <ul class="space-y-2 list-disc lg:text-lg md:text-md text-sm"> + <li>Choose from a wide range of trendy fabrics updated every seasons</li> + <li>Choose from a wide range of trendy fabrics updated every seasons</li> + <li>Choose from a wide range of trendy fabrics updated every seasons</li> + </ul> + </div> + + <div class="flex justify-end md:pt-11 pt-7"> + <a class="all-product-link lg:text-lg text-md font-bold flex items-center " + href="https://stage.brooksbingham.com/content/11-manual-measurement"> Know 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> + </div> + </div> + </li> + + <li class="border-2 + p-5"> + <div class="flex + flex-col + items-center"> + <div class="mt-4"> + <h4 class="md:text-xl + text-lg + text-center + leading-6 + font-bold + text-gray-900 + pb-2"> + Automated Measurement </h4> + <div class="md:pt-5 pt-3 font-medium text-lg"> + <ul class="space-y-2 list-disc lg:text-lg md:text-md text-sm"> + <li>Choose from a wide range of trendy fabrics updated every seasons</li> + <li>Choose from a wide range of trendy fabrics updated every seasons</li> + <li>Choose from a wide range of trendy fabrics updated every seasons</li> + </ul> + </div> + + <div class="flex justify-end md:pt-11 pt-7"> + <a class="all-product-link lg:text-lg text-md font-bold flex items-center " + href="https://stage.brooksbingham.com/content/12-automated-measurement"> Know 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> + </div> + </div> + </li> + </ul> </div> </div> + +{/if} diff --git a/templates/layouts/layout-both-columns.tpl b/templates/layouts/layout-both-columns.tpl index 587f255..b436f2a 100644 --- a/templates/layouts/layout-both-columns.tpl +++ b/templates/layouts/layout-both-columns.tpl @@ -319,7 +319,77 @@ world of custom garments. </p> </div> -{/if} + + + + + + + + +<!-- + +<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} + {block name="right_column"} <div id="right-column" class="col-xs-12 col-sm-4 col-md-3"> {if $page.page_name == 'product'}