forked from brooksbingham/theme-elegance
refactor:update custom made page
parent
ad534acbe9
commit
f9bdf41705
|
|
@ -1345,6 +1345,10 @@ select {
|
|||
list-style-type: square;
|
||||
}
|
||||
|
||||
.list-disc {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
.grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
|
@ -1433,6 +1437,10 @@ select {
|
|||
gap: 2rem;
|
||||
}
|
||||
|
||||
.gap-20 {
|
||||
gap: 5rem;
|
||||
}
|
||||
|
||||
.gap-x-1 {
|
||||
-moz-column-gap: 0.25rem;
|
||||
column-gap: 0.25rem;
|
||||
|
|
@ -1442,6 +1450,11 @@ select {
|
|||
row-gap: 0.25rem;
|
||||
}
|
||||
|
||||
.gap-x-20 {
|
||||
-moz-column-gap: 5rem;
|
||||
column-gap: 5rem;
|
||||
}
|
||||
|
||||
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
|
||||
|
|
@ -1717,6 +1730,16 @@ 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;
|
||||
}
|
||||
|
|
@ -1833,6 +1856,18 @@ 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;
|
||||
}
|
||||
|
|
@ -2490,6 +2525,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
|||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.md\:grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.md\:flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
|
@ -2518,6 +2557,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
|||
gap: 1rem;
|
||||
}
|
||||
|
||||
.md\:gap-20 {
|
||||
gap: 5rem;
|
||||
}
|
||||
|
||||
.md\:p-2 {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
|
@ -2536,6 +2579,11 @@ 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;
|
||||
}
|
||||
|
|
@ -2592,6 +2640,14 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
|||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.md\:pt-5 {
|
||||
padding-top: 1.25rem;
|
||||
}
|
||||
|
||||
.md\:pt-11 {
|
||||
padding-top: 2.75rem;
|
||||
}
|
||||
|
||||
.md\:text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -380,7 +380,7 @@
|
|||
<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>
|
||||
</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'}
|
||||
|
|
@ -397,7 +397,7 @@
|
|||
<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>
|
||||
</div> -->
|
||||
|
||||
{/if}
|
||||
|
||||
|
|
@ -433,7 +433,7 @@
|
|||
{block name='hook_before_body_closing_tag'}
|
||||
{hook h='displayBeforeBodyClosingTag'}
|
||||
{/block}
|
||||
-->
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue