sayalip
/
theme-elegance
forked from brooksbingham/theme-elegance
1
0
Fork 0
Code Pull Requests Activity

Compare commits

base: sayalip:main
Branches Tags
sayalip:home-custom
sayalip:staging
sayalip:main
sayalip:measurement-page
sayalip:dev
..
compare: sayalip:measurement-page
Branches Tags
sayalip:home-custom
sayalip:staging
sayalip:main
sayalip:measurement-page
sayalip:dev

5 Commits
main ... measuremen

Author SHA1 Message Date
sayalip aac25c11a3 refactor:add images 2024-06-24 21:40:51 +05:30
sayalip 8fb19fdefc refactor:change SEO section for measurement page 2024-06-19 14:50:09 +05:30
sayalip 7c64b4320c chore:push the theme file 2024-06-18 12:17:37 +05:30
sayalip e70f680b1d feat:add measurement cards 2024-06-18 12:13:08 +05:30
sayalip a8b692828b feat:add how to measure content 2024-06-17 14:43:45 +05:30
4 changed files with 665 additions and 819 deletions
Show Stats Expand all files Collapse all files

477
assets/css/theme.css
View File

@ -847,10 +847,6 @@ select {
grid-column: span 1 / span 1;
}
.col-span-3 {
grid-column: span 3 / span 3;
}
.col-start-1 {
grid-column-start: 1;
}
@ -875,18 +871,10 @@ select {
grid-row-start: 1;
}
.row-start-2 {
grid-row-start: 2;
}
.row-end-2 {
grid-row-end: 2;
}
.row-end-3 {
grid-row-end: 3;
}
.-mx-2 {
margin-left: -0.5rem;
margin-right: -0.5rem;
@ -902,11 +890,6 @@ select {
margin-bottom: -0.75rem;
}
.mx-1 {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.mx-3 {
margin-left: 0.75rem;
margin-right: 0.75rem;
@ -932,26 +915,21 @@ select {
margin-bottom: 0.125rem;
}
.my-12 {
margin-top: 3rem;
margin-bottom: 3rem;
}
.my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.my-20 {
margin-top: 5rem;
margin-bottom: 5rem;
}
.my-8 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.my-32 {
margin-top: 8rem;
margin-bottom: 8rem;
}
.mb-1 {
margin-bottom: 0.25rem;
}
@ -960,6 +938,10 @@ select {
margin-bottom: 3rem;
}
.mb-16 {
margin-bottom: 4rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
@ -1032,18 +1014,10 @@ select {
margin-top: 0.75rem;
}
.mt-32 {
margin-top: 8rem;
}
.mt-4 {
margin-top: 1rem;
}
.mt-48 {
margin-top: 12rem;
}
.mt-6 {
margin-top: 1.5rem;
}
@ -1052,10 +1026,6 @@ select {
margin-top: 2rem;
}
.mt-9 {
margin-top: 2.25rem;
}
.block {
display: block;
}
@ -1088,10 +1058,6 @@ select {
aspect-ratio: 342/513;
}
.h-1\/2 {
height: 50%;
}
.h-12 {
height: 3rem;
}
@ -1112,28 +1078,16 @@ select {
height: 1.5rem;
}
.h-72 {
height: 18rem;
}
.h-8 {
height: 2rem;
}
.h-\[100px\] {
height: 100px;
.h-\[350px\] {
height: 350px;
}
.h-\[20px\] {
height: 20px;
}
.h-\[50px\] {
height: 50px;
}
.h-\[50vh\] {
height: 50vh;
.h-\[380px\] {
height: 380px;
}
.h-auto {
@ -1208,14 +1162,6 @@ select {
width: 160px;
}
.w-\[20px\] {
width: 20px;
}
.w-\[50px\] {
width: 50px;
}
.w-full {
width: 100%;
}
@ -1292,22 +1238,10 @@ select {
list-style-type: square;
}
.grid-flow-col {
grid-auto-flow: column;
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-rows-3 {
grid-template-rows: repeat(3, minmax(0, 1fr));
}
.flex-row {
flex-direction: row;
}
@ -1340,10 +1274,6 @@ select {
align-items: baseline;
}
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
@ -1397,31 +1327,16 @@ select {
column-gap: 0.25rem;
}
.gap-x-2 {
-moz-column-gap: 0.5rem;
column-gap: 0.5rem;
}
.gap-y-1 {
row-gap: 0.25rem;
}
.gap-y-2 {
row-gap: 0.5rem;
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.overflow-y-auto {
overflow-y: auto;
}
@ -1444,10 +1359,6 @@ select {
border-width: 1px;
}
.border-2 {
border-width: 2px;
}
.border-t {
border-top-width: 1px;
}
@ -1456,11 +1367,6 @@ select {
border-style: none;
}
.border-black {
--tw-border-opacity: 1;
border-color: rgb(0 0 0 / var(--tw-border-opacity));
}
.border-blue-300 {
--tw-border-opacity: 1;
border-color: rgb(147 197 253 / var(--tw-border-opacity));
@ -1516,11 +1422,6 @@ select {
border-color: rgb(252 165 165 / var(--tw-border-opacity));
}
.border-white {
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity));
}
.bg-black\/70 {
background-color: rgb(0 0 0 / 0.7);
}
@ -1589,15 +1490,6 @@ select {
object-fit: cover;
}
.object-scale-down {
-o-object-fit: scale-down;
object-fit: scale-down;
}
.p-1 {
padding: 0.25rem;
}
.p-2 {
padding: 0.5rem;
}
@ -1632,11 +1524,6 @@ select {
padding-right: 1rem;
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
@ -1672,6 +1559,11 @@ select {
padding-bottom: 2rem;
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.pb-10 {
padding-bottom: 2.5rem;
}
@ -1688,18 +1580,10 @@ select {
padding-bottom: 0.75rem;
}
.pb-4 {
padding-bottom: 1rem;
}
.pb-6 {
padding-bottom: 1.5rem;
}
.pl-0 {
padding-left: 0px;
}
.pl-12 {
padding-left: 3rem;
}
@ -1708,10 +1592,6 @@ select {
padding-left: 0.5rem;
}
.pl-4 {
padding-left: 1rem;
}
.pl-6 {
padding-left: 1.5rem;
}
@ -1744,26 +1624,14 @@ select {
padding-right: 2rem;
}
.pt-0 {
padding-top: 0px;
}
.pt-1 {
padding-top: 0.25rem;
}
.pt-2 {
padding-top: 0.5rem;
}
.pt-20 {
padding-top: 5rem;
}
.pt-3 {
padding-top: 0.75rem;
}
.pt-4 {
padding-top: 1rem;
}
@ -1776,14 +1644,6 @@ select {
padding-top: 1.5rem;
}
.pt-7 {
padding-top: 1.75rem;
}
.pt-8 {
padding-top: 2rem;
}
.pt-9 {
padding-top: 2.25rem;
}
@ -1814,11 +1674,6 @@ select {
line-height: 2.5rem;
}
.text-5xl {
font-size: 3rem;
line-height: 1;
}
.text-base {
font-size: 1rem;
line-height: 1.5rem;
@ -1891,11 +1746,6 @@ select {
color: rgb(23 37 84 / var(--tw-text-opacity));
}
.text-gray-300 {
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity));
}
.text-gray-400 {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
@ -2301,6 +2151,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
}
@media (min-width: 640px) {
.sm\:mb-1 {
margin-bottom: 0.25rem;
}
.sm\:flex {
display: flex;
}
@ -2316,19 +2170,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;
}
.md\:mt-0 {
margin-top: 0px;
}
@ -2337,10 +2178,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
margin-top: 6rem;
}
.md\:mt-32 {
margin-top: 8rem;
}
.md\:block {
display: block;
}
@ -2357,30 +2194,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
display: none;
}
.md\:h-\[200px\] {
height: 200px;
}
.md\:h-\[300px\] {
height: 300px;
}
.md\:h-\[3rem\] {
height: 3rem;
}
.md\:h-\[400px\] {
height: 400px;
}
.md\:h-\[40px\] {
height: 40px;
}
.md\:h-\[410px\] {
height: 410px;
}
.md\:w-1\/2 {
width: 50%;
}
@ -2409,34 +2226,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
width: 50%;
}
.md\:w-8\/12 {
width: 66.666667%;
}
.md\:w-\[30\%\] {
width: 30%;
}
.md\:w-\[40\%\] {
width: 40%;
}
.md\:w-\[40px\] {
width: 40px;
}
.md\:w-\[50\%\] {
width: 50%;
}
.md\:w-\[60\%\] {
width: 60%;
}
.md\:w-\[70\%\] {
width: 70%;
}
.md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@ -2453,10 +2242,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
align-items: flex-start;
}
.md\:justify-start {
justify-content: flex-start;
}
.md\:gap-0 {
gap: 0px;
}
@ -2477,36 +2262,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
padding: 2rem;
}
.md\:px-10 {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
.md\:px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.md\:pl-10 {
padding-left: 2.5rem;
}
.md\:pl-12 {
padding-left: 3rem;
}
.md\:pl-3 {
padding-left: 0.75rem;
}
.md\:pl-4 {
padding-left: 1rem;
}
.md\:pl-5 {
padding-left: 1.25rem;
}
.md\:pr-12 {
padding-right: 3rem;
}
@ -2519,38 +2278,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
padding-right: 12rem;
}
.md\:pr-5 {
padding-right: 1.25rem;
}
.md\:pt-0 {
padding-top: 0px;
}
.md\:pt-10 {
padding-top: 2.5rem;
}
.md\:pt-12 {
padding-top: 3rem;
}
.md\:pt-6 {
padding-top: 1.5rem;
}
.md\:pt-8 {
padding-top: 2rem;
}
.md\:pt-9 {
padding-top: 2.25rem;
}
.md\:text-left {
text-align: left;
}
.md\:text-2xl {
font-size: 1.5rem;
line-height: 2rem;
@ -2581,27 +2312,9 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
line-height: 1.25rem;
}
.md\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.md\:text-xs {
font-size: 0.75rem;
line-height: 1rem;
}
.md\:font-bold {
font-weight: 700;
}
.md\:font-medium {
font-weight: 500;
}
.md\:font-semibold {
font-weight: 600;
}
}
@media (min-width: 1024px) {
@ -2621,20 +2334,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
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;
}
.lg\:mb-2 {
margin-bottom: 0.5rem;
}
@ -2643,10 +2342,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
margin-bottom: 8rem;
}
.lg\:mt-32 {
margin-top: 8rem;
}
.lg\:flex {
display: flex;
}
@ -2655,20 +2350,8 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
display: none;
}
.lg\:h-\[200px\] {
height: 200px;
}
.lg\:h-\[400px\] {
height: 400px;
}
.lg\:h-\[500px\] {
height: 500px;
}
.lg\:h-\[60px\] {
height: 60px;
.lg\:h-2\/3 {
height: 66.666667%;
}
.lg\:h-\[90vh\] {
@ -2687,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%;
}
@ -2695,18 +2382,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
width: 60%;
}
.lg\:w-52 {
width: 13rem;
}
.lg\:w-80 {
width: 20rem;
}
.lg\:w-\[60px\] {
width: 60px;
}
.lg\:w-full {
width: 100%;
}
@ -2743,16 +2422,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
padding: 1rem;
}
.lg\:px-20 {
padding-left: 5rem;
padding-right: 5rem;
}
.lg\:px-36 {
padding-left: 9rem;
padding-right: 9rem;
}
.lg\:px-8 {
padding-left: 2rem;
padding-right: 2rem;
@ -2763,72 +2432,31 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
padding-bottom: 0px;
}
.lg\:py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
.lg\:px-36 {
padding-left: 9rem;
padding-right: 9rem;
}
.lg\:pb-6 {
padding-bottom: 1.5rem;
.lg\:pt-12 {
padding-top: 3rem;
}
.lg\:pl-2 {
padding-left: 0.5rem;
}
.lg\:pl-24 {
padding-left: 6rem;
}
.lg\:pl-5 {
padding-left: 1.25rem;
}
.lg\:pr-10 {
padding-right: 2.5rem;
}
.lg\:pr-6 {
padding-right: 1.5rem;
}
.lg\:pt-10 {
padding-top: 2.5rem;
}
.lg\:pt-16 {
padding-top: 4rem;
}
.lg\:pt-20 {
padding-top: 5rem;
.lg\:pt-14 {
padding-top: 3.5rem;
}
.lg\:pt-24 {
padding-top: 6rem;
}
.lg\:pt-8 {
padding-top: 2rem;
}
.lg\:pt-9 {
padding-top: 2.25rem;
}
.lg\:text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.lg\:text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.lg\:text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
.lg\:text-5xl {
font-size: 3rem;
line-height: 1;
}
.lg\:text-lg {
@ -2841,6 +2469,11 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
line-height: 1.75rem;
}
.lg\:text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.lg\:font-bold {
font-weight: 700;
}
@ -2868,29 +2501,5 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
.xl\:w-9\/12 {
width: 75%;
}
.xl\:pl-12 {
padding-left: 3rem;
}
.xl\:pr-12 {
padding-right: 3rem;
}
.xl\:text-5xl {
font-size: 3rem;
line-height: 1;
}
.xl\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
}
@media (min-width: 1536px) {
.\32xl\:pr-16 {
padding-right: 4rem;
}
}

179
templates/catalog/_partials/products.tpl
View File

@ -64,29 +64,27 @@
</a>
</div>
</div>
i
<div class="relative
flex
mt-16
h-1/2
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
lg:right-20
md:right-12
right-4
lg:bottom-48
md:bottom-28
bottom-9
text-[#000E2A]
text-left
lg:text-4xl
lg:text-5xl
md:text-2xl
text-xs
text-sm
lg:font-semibold
font-bold">
<h1> Because You Are Unique. </h1>
<h1> So Is Your Body… </h1>
@ -94,13 +92,13 @@
</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">
<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 specifically for you, offering an unparalleled fit.
Experience unmatched comfort and style with our tailored suits, crafted to celebrate your uniqueness.
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">
@ -122,47 +120,74 @@
</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 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 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 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
@ -194,10 +219,10 @@
<div>
<img class="w-full
lg:w-80
h-72
h-auto
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">
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
@ -207,7 +232,7 @@
pb-2">
Select the Fabric </h4>
<p class="mt-3
font-medium
font-semibold
text-lg
leading-6
text-gray-500">
@ -228,11 +253,10 @@
<div>
<img class="w-full
lg:w-80
h-72
h-auto
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">
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
@ -243,7 +267,7 @@
Finalize the Design </h4>
<p class="mt-3
text-lg
font-medium
font-semibold
leading-6
text-gray-500">
Personalize details like lapels, pockets, and lining through online platform. </p>
@ -262,11 +286,10 @@
<div>
<img class="w-full
lg:w-80
h-72
h-auto
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">
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
@ -277,7 +300,7 @@
Get Measured </h4>
<p class="mt-3
text-lg
font-medium
font-semibold
leading-6
text-gray-500">
Ensure your custom apparel fits you flawlessly by getting measured. </p>
@ -288,41 +311,3 @@
</div>
</div>
</div>
<div class="mx-auto lg:my-20 my-12 flex flex-col justify-center px-4 md:px-10 lg:px-20">
<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>
</div>

527
templates/catalog/listing/product-list.tpl
View File

@ -56,6 +56,531 @@
<div id="js-product-list-bottom"></div>
{/if}
</section>
</section>
<div class="mx-auto my-24 flex items-center relative">
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/measurement-page/banner.jpg"
class="h-full w-full">
<div class="absolute xl:px-40 lg:px-20 md:px-12 px-2">
<h1 class="xl:text-6xl lg:text-4xl md:text-3xl text-sm lg:font-bold font-bold">
How to measure
</h1>
<p class="lg:text-xl md:text-lg text-xs lg:font-semibold font-medium lg:w-96 md:w-80 w-36 lg:pt-4 pt-2">
Ten minutes is all it should take if you follow our simple step by step directions.
</p>
</div>
</div>
<div class="mx-auto lg:my-60 md:my-28 my-24 flex flex-col items-center">
<h1 class="font-bold lg:text-4xl md:text-xl text-lg font-bold text-center">
Our precise measuring system ensures your custom garment requirements are perfected.
</h1>
<p class="lg:pt-12 md:pt-9 pt-6 lg:w-8/12 w-10/12 text-center lg:text-xl md:text-lg
text-sm lg:font-semibold font-medium">
Your measurements are utilized by Brooks Bingham to create a tailored profile using advanced technology.
Each model undergoes thorough review and adjustment by our master tailors in our design studio.
Just follow each step, and your measurements will be perfect.
</p>
</div>
<div class="mx-4 mt-20">
<div class="text-center font-bold lg:text-4xl md:text-2xl text-xl">
<h1>Upper Body Measurements</h1>
</div>
<div>
<div class="flex md:flex-row justify-start lg:mt-32 md:mt-28 my-20 flex-col">
<div class="xl:w-1/2 lg:w-3/5 w-full">
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/measurement-page/neck.png"
class="image object-cover">
</div>
<div class="w-full text-center md:text-left lg:px-6 md:px-4">
<h1 class="font-bold xl:text-3xl lg:text-xl text-md">
Neck Measurements
</h1>
<p class="md:font-medium font-base xl:text-lg lg:text-sm text-xs pt-4">
Place the measuring tape below the Adam’s apple and keep the cloth tape 3cm
above 7th Cervical vertebra and the pit of the neck. The tape should be parallel
of the neck cross-section. Once finger in th tape, it is advisable to slight tight.
(Add 2cm in the finished collor too).
</p>
<h3 class="font-bold xl:text-lg lg:text-lg text-xs xl:pt-12 pt-4">
Usually 30 to 66 CM or 11.81 to 21.98 IN
</h3>
</div>
</div>
<div class="flex md:flex-row justify-start mb-20 flex-col">
<div class="xl:w-1/2 lg:w-3/5 w-full">
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/measurement-page/chest.png"
class="image object-cover">
</div>
<div class="w-full text-center md:text-left lg:px-6 md:px-4">
<h1 class="font-bold xl:text-3xl lg:text-xl text-md">
Chest Measurements
</h1>
<p class="md:font-medium font-base xl:text-lg lg:text-sm text-xs pt-4">
Run the measuring tape around the fullest part of teh Chest. Two fingers
in the measuring tape, not too tight or too loose.
</p>
<h3 class="font-bold xl:text-lg lg:text-lg text-xs xl:pt-12 pt-4">
Usually 72 to 175 CM or 25.98 to 73.23 IN
</h3>
</div>
</div>
<div class="flex md:flex-row justify-start mb-20 flex-col">
<div class="xl:w-1/2 lg:w-3/5 w-full">
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/measurement-page/stomach.png"
class="image object-cover">
</div>
<div class="w-full text-center md:text-left lg:px-6 md:px-4">
<h1 class="font-bold xl:text-3xl lg:text-xl text-md">
Stomach Measurements
</h1>
<p class="md:font-medium font-base xl:text-lg lg:text-sm text-xs pt-4">
Take the back waist point as the datum point, run the measuring tape around the abdomen.
Two fingers in the measuring tape, not toop tight or too loose.
</p>
<h3 class="font-bold xl:text-lg lg:text-lg text-xs xl:pt-12 pt-4">
Usually 55 to 185 CM or 22.68 to 72.83 IN
</h3>
</div>
</div>
<div class="flex md:flex-row justify-start mb-20 flex-col">
<div class="xl:w-1/2 lg:w-3/5 w-full">
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/measurement-page/seat.png"
class="image object-cover">
</div>
<div class="w-full text-center md:text-left lg:px-6 md:px-4">
<h1 class="font-bold xl:text-3xl lg:text-xl text-md">
Seat Measurements
</h1>
<p class="md:font-medium font-base xl:text-lg lg:text-sm text-xs pt-4">
Stand naturally and measure around the fullest part of teh hips.
Two fingers in the measuring tape, not too tight or loose.
</p>
<h3 class="font-bold xl:text-lg lg:text-lg text-xs xl:pt-12 pt-4">
Usually 70 to 200 CM or 26.77 to 78.74 IN
</h3>
</div>
</div>
<div class="flex md:flex-row justify-start mb-20 flex-col">
<div class="xl:w-1/2 lg:w-3/5 w-full">
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/measurement-page/bicep.png"
class="image object-cover">
</div>
<div class="w-full text-center md:text-left lg:px-6 md:px-4">
<h1 class="font-bold xl:text-3xl lg:text-xl text-md">
Bicep Measurements
</h1>
<p class="md:font-medium font-base xl:text-lg lg:text-sm text-xs pt-4">
With the arm hanging at customer’s side and relaxed, measure around the
bicep at its fullest point. Hold one finder between the bicep and the cloth tape.
</p>
<h3 class="font-bold xl:text-lg lg:text-lg text-xs xl:pt-12 pt-4">
Usually 31 to 72 CM or 7.48 to 29.13 IN
</h3>
</div>
</div>
<div class="flex md:flex-row justify-start mb-20 flex-col">
<div class="xl:w-1/2 lg:w-3/5 w-full">
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/measurement-page/shoulder.png"
class="image object-cover">
</div>
<div class="w-full text-center md:text-left lg:px-6 md:px-4">
<h1 class="font-bold xl:text-3xl lg:text-xl text-md">
Shoulder Measurements
</h1>
<p class="md:font-medium font-base xl:text-lg lg:text-sm text-xs pt-4">
Place the measuring tape where the shoulder points are.
The measuring tap should touch the 7th cervical vertebra.
</p>
<h3 class="font-bold xl:text-lg lg:text-lg text-xs xl:pt-12 pt-4">
Usually 22 to 68 CM or 12.20 to 29.92 IN
</h3>
</div>
</div>
<div class="flex md:flex-row justify-start mb-20 flex-col">
<div class="xl:w-1/2 lg:w-3/5 w-full">
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/measurement-page/front%20shoulder.png"
class="image object-cover">
</div>
<div class="w-full text-center md:text-left lg:px-6 md:px-4">
<h1 class="font-bold xl:text-3xl lg:text-xl text-md">
Front Shoulder Measurements
</h1>
<p class="md:font-medium font-base xl:text-lg lg:text-sm text-xs pt-4">
Keep the measuring tape straight. The starting point is the right shoulder
point the destination is the left shoulder point.
</p>
<h3 class="font-bold xl:text-lg lg:text-lg text-xs xl:pt-12 pt-4">
Usually 29 to 68 CM or 11.42 to 26.77 IN
</h3>
</div>
</div>
<div class="flex md:flex-row justify-start mb-20 flex-col">
<div class="xl:w-1/2 lg:w-3/5 w-full">
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/measurement-page/sleeves.png"
class="image object-cover">
</div>
<div class="w-full text-center md:text-left lg:px-6 md:px-4 ">
<h1 class="font-bold xl:text-3xl lg:text-xl text-md">
Sleeve Measurement
</h1>
<p class="md:font-medium font-base xl:text-lg lg:text-sm text-xs pt-4">
PLcae one end of the measuring tape where the right shoulder point is.
Measure along the arm down to the frist knuckle of the middle finger.
Deduct 4cm for men sleeve length.
</p>
<h3 class="font-bold xl:text-lg lg:text-lg text-xs xl:pt-12 pt-4">
Usually L,R 25 to 82 CM or 9.84 to 33.46 IN
</h3>
</div>
</div>
<div class="flex md:flex-row justify-start mb-20 flex-col">
<div class="xl:w-1/2 lg:w-3/5 w-full">
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/measurement-page/back%20length.png"
class="image object-cover">
</div>
<div class="w-full text-center md:text-left lg:px-6 md:px-4">
<h1 class="font-bold xl:text-3xl lg:text-xl text-md">
Back Length Measurement
</h1>
<p class="md:font-medium font-base xl:text-lg lg:text-sm text-xs pt-4">
Keep teh cloth tape in the middle of the back. Place the measureing tape from the 7th cervical vertebra to
the butt crotch. The data deducts 2cm iis the standard for men’s back length. Remark: 3cm or more up of the
standard length is the short pattern. 3cm or less down of the standard length is the long pattern
</p>
<h3 class="font-bold xl:text-lg lg:text-lg text-xs xl:pt-12 pt-4">
Usually 47 to 118 CM or 18.5 to 41.34 IN
</h3>
</div>
</div>
<div class="flex md:flex-row justify-start mb-20 flex-col">
<div class="xl:w-1/2 lg:w-3/5 w-full">
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/measurement-page/nape-waist.png"
class="image object-cover">
</div>
<div class="w-full text-center md:text-left lg:px-6 md:px-4 ">
<h1 class="font-bold xl:text-3xl lg:text-xl text-md">
Nape to Waist Measurement
</h1>
<p class="md:font-medium font-base xl:text-lg lg:text-sm text-xs pt-4">
Place the measure tape from the 7th cervical vertebra to the white line of the belt.
</p>
<h3 class="font-bold xl:text-lg lg:text-lg text-xs xl:pt-12 pt-4">
Usually 31 to 63 CM or 11.42 to 24.8 IN
</h3>
</div>
</div>
<div class="flex md:flex-row justify-start mb-20 flex-col">
<div class="xl:w-1/2 lg:w-3/5 w-full">
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/measurement-page/front%20waist%20length.png"
class="image object-cover">
</div>
<div class="w-full text-center md:text-left lg:px-6 md:px-4">
<h1 class="font-bold xl:text-3xl lg:text-xl text-md">
Front Waist Length Measurements
</h1>
<p class="md:font-medium font-base xl:text-lg lg:text-sm text-xs pt-4">
Place the measuring tape from the shoulder neck point ot the white line of the stomach belt.
The cloth tape should pass the highest point of the chest.
</p>
<h3 class="font-bold xl:text-lg lg:text-lg text-xs xl:pt-12 pt-4">
Usually 33 to 75 CM or 12.20 to 29.53 IN
</h3>
</div>
</div>
<div class="flex md:flex-row justify-start mb-20 flex-col">
<div class="xl:w-1/2 lg:w-3/5 w-full">
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/measurement-page/u-rise.png"
class="image object-cover">
</div>
<div class="w-full text-center md:text-left lg:px-6 md:px-4">
<h1 class="font-bold xl:text-3xl lg:text-xl text-md">
U - Rise Measurement
</h1>
<p class="md:font-medium font-base xl:text-lg lg:text-sm text-xs pt-4">
When measuring, let the customer's stand up and take out all the things of the pocket.
Half squat, find the most full part of the hip. Measure horizontally along the full ump
for a round and can add 1-2cm to that basis data.
</p>
<h3 class="font-bold xl:text-lg lg:text-lg text-xs xl:pt-12 pt-4">
Usually 50 to 120 CM or 19.69 to 47.24 IN
</h3>
</div>
</div>
<div class="flex md:flex-row justify-start mb-20 flex-col">
<div class="xl:w-1/2 lg:w-3/5 w-full">
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/measurement-page/back%20waist%20length.png"
class="image object-cover">
</div>
<div class="w-full text-center md:text-left lg:px-6 md:px-4">
<h1 class="font-bold xl:text-3xl lg:text-xl text-md">
Back Waist Length Measurements
</h1>
<p class="md:font-medium font-base xl:text-lg lg:text-sm text-xs pt-4">
Place the measuring tape from the white line of the belt to the top of the back waistband.
Keep the cloth tape in the middle of the back.
</p>
<h3 class="font-bold xl:text-lg lg:text-lg text-xs xl:pt-12 pt-4">
Usually 0 to 21 CM or 0 to 8.27 IN
</h3>
</div>
</div>
<div class="flex md:flex-row justify-start mb-20 flex-col">
<div class="xl:w-1/2 lg:w-3/5 w-full">
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/measurement-page/Front%20Waist%20Height.png"
class="image object-cover">
</div>
<div class="w-full text-center md:text-left lg:px-6 md:px-4">
<h1 class="font-bold xl:text-3xl lg:text-xl text-md">
Front Waist Height Measurements
</h1>
<p class="md:font-medium font-base xl:text-lg lg:text-sm text-xs pt-4">
Place the measuring tape from the white line of the belt to the top of the front waistband.
Keep the cloth tape in the middle of the front.
</p>
<h3 class="font-bold xl:text-lg lg:text-lg text-xs xl:pt-12 pt-4">
Usually 0 to 30 CM ot 0 to 16.14 IN
</h3>
</div>
</div>
<div class="flex md:flex-row justify-start mb-20 flex-col">
<div class="xl:w-1/2 lg:w-3/5 w-full">
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/measurement-page/outseam.png"
class="image object-cover">
</div>
<div class="w-full text-center md:text-left lg:px-6 md:px-4">
<h1 class="font-bold xl:text-3xl lg:text-xl text-md">
Outseam Left & Right Measurement
</h1>
<p class="md:font-medium font-base xl:text-lg lg:text-sm text-xs pt-4">
Place the measuring tape on the top of the waistband. Measure downt he outside of the lef to the ground.
Normally deduct 2cm length. Customer can appoint the pant length they prefer.
</p>
<h3 class="font-bold xl:text-lg lg:text-lg text-xs xl:pt-12 pt-4">
Usually 60 to 135 CM or 23.62 to 53.15 IN
</h3>
</div>
</div>
<div class="flex md:flex-row justify-start mb-20 flex-col">
<div class="xl:w-1/2 lg:w-3/5 w-full">
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/measurement-page/cuff.png"
class="image object-cover">
</div>
<div class="w-full text-center md:text-left lg:px-6 md:px-4">
<h1 class="font-bold xl:text-3xl lg:text-xl text-md">
Cuff Measurements
</h1>
<p class="md:font-medium font-base xl:text-lg lg:text-sm text-xs pt-4">
Measure around the fullest part of the cuff. Make sure the tape is not too tight.
</p>
<h3 class="font-bold xl:text-lg lg:text-lg text-xs xl:pt-12 pt-4">
Usually 25 to 70 CM or .84 to 27.56 IN
</h3>
</div>
</div>
<div class="flex md:flex-row justify-start flex-col">
<div class="xl:w-1/2 lg:w-3/5 w-full">
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/measurement-page/wrist.png"
class="image object-cover">
</div>
<div class="w-full text-center md:text-left lg:px-6 md:px-4">
<h1 class="font-bold xl:text-3xl lg:text-xl text-md">
Left & Right Wrist Measurements
</h1>
<p class="md:font-medium font-base xl:text-lg lg:text-sm text-xs pt-4">
Measure around the fullest part of the wrist. If the customer wears watch
depending on the size of the watch, add 1.5 to 2 cm
</p>
<h3 class="font-bold xl:text-lg lg:text-lg text-xs xl:pt-12 pt-4">
Usually 13 to 33 CM
</h3>
</div>
</div>
</div>
</div>
<div class="text-center font-bold lg:text-4xl md:text-2xl text-xl lg:mt-32 md:mt-28 mt-20">
<h1>Lower Body Measurements</h1>
</div>
<div class="flex md:flex-row justify-start mx-4 lg:mt-32 md:mt-28 my-20 flex-col">
<div class="xl:w-1/2 lg:w-3/5 w-full">
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/measurement-page/waist.png"
class="image object-cover">
</div>
<div class="w-full text-center md:text-left lg:px-6 md:px-4">
<h1 class="font-bold xl:text-3xl lg:text-xl text-md">
Waist Circumference
</h1>
<p class="md:font-medium font-base xl:text-lg lg:text-sm text-xs pt-4">
Place soft ruler along the customer's waist along the amount of a week,
two fingers in the soft ruler shall prevail, the combined point on the right side.
(For convex belly or fat customers, we should let the customer take a breath to record the data size)
(If it is all rubber waist, please subtract 10-15cm in the net body data) 
</p>
<h3 class="font-bold xl:text-lg lg:text-lg text-xs xl:pt-12 pt-4">
Usually 100 to 120 CM or >40 IN
</h3>
</div>
</div>
<div class="flex md:flex-row justify-start mx-4 mb-20 flex-col">
<div class="xl:w-1/2 lg:w-3/5 w-full">
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/measurement-page/hip.png"
class="image object-cover">
</div>
<div class="w-full text-center md:text-left lg:px-6 md:px-4">
<h1 class="font-bold xl:text-3xl lg:text-xl text-md">
Hip Circumference
</h1>
<p class="md:font-medium font-base xl:text-lg lg:text-sm text-xs pt-4">
When measuring, let the customer's stand up and take out all the things of the pocket.
Half squat, find the most full part of the hip. Measure horizontally along the full ump
for a round and can add 1-2cm to that basis data.
</p>
<h3 class="font-bold xl:text-lg lg:text-lg text-xs xl:pt-12 pt-4">
Usually 94 to 99 CM or 37 to 39 IN
</h3>
</div>
</div>
<div class="flex md:flex-row justify-start mx-4 mb-20 flex-col">
<div class="xl:w-1/2 lg:w-3/5 w-full">
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/measurement-page/thigh.png"
class="image object-cover">
</div>
<div class="w-full text-center md:text-left lg:px-6 md:px-4">
<h1 class="font-bold xl:text-3xl lg:text-xl text-md">
Thigh Circumference
</h1>
<p class="md:font-medium font-base xl:text-lg lg:text-sm text-xs pt-4">
Horizontally measure the fullest part of the thigh horizontally for a round,
and two fingers in the soft ruler shall prevail, neither loose nor tight,
(the joint point is on the right side).
</p>
<h3 class="font-bold xl:text-lg lg:text-lg text-xs xl:pt-12 pt-4">
Usually 51 to 61 or 20 to 24 IN
</h3>
</div>
</div>
<div class="flex md:flex-row justify-start mx-4 mb-20 flex-col">
<div class="xl:w-1/2 lg:w-3/5 w-full">
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/measurement-page/crotch.png"
class="image object-cover">
</div>
<div class="lg:px-6 md:px-4 w-full text-center md:text-left">
<h1 class="font-bold xl:text-3xl lg:text-xl text-md">
Crotch
</h1>
<p class="md:font-medium font-base xl:text-lg lg:text-sm text-xs pt-4">
Soft rule from the waist high point through the crotch to the waist high point,
not loose or tight. (To have the action of lifting the ruler)
</p>
<h3 class="font-bold xl:text-lg lg:text-lg text-xs xl:pt-12 pt-4">
Usually 86 to 91 CM or 34 to 36 IN
</h3>
</div>
</div>
<div class="flex md:flex-row justify-start mx-4 mb-20 flex-col">
<div class="xl:w-1/2 lg:w-3/5 w-full">
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/measurement-page/knee.png"
class="image object-cover">
</div>
<div class="lg:px-6 md:px-4 w-full text-center md:text-left">
<h1 class="font-bold xl:text-3xl lg:text-xl text-md">
Knee Circumference
</h1>
<p class="md:font-medium font-base xl:text-lg lg:text-sm text-xs pt-4">
Measure horizontally around the knee for a week, the man put 1 finger,
the woman does not put the fingers. (When measuring knee circumference,
certain contrast measures crus circumference, the size of knee circumference
and crus circumference which larger we take the size of which part)
</p>
<h3 class="font-bold xl:text-lg lg:text-lg text-xs xl:pt-12 pt-4">
Usually 38 to 43 CM or 15 to 17 IN
</h3>
</div>
</div>
<div class="flex md:flex-row justify-start mx-4 mb-20 flex-col">
<div class="xl:w-1/2 lg:w-3/5 w-full">
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/measurement-page/bottom.png"
class="image object-cover">
</div>
<div class="lg:px-6 md:px-4 w-full text-justify md:text-left">
<h1 class="font-bold xl:text-3xl lg:text-xl text-md md:text-left text-center">
Bottom Circumference
</h1>
<p class="md:font-medium font-base xl:text-lg lg:text-sm text-xs pt-3">
Adjust according to the customer's request.
Measuring for the finished clothes (ready- wear-size):<br>
1.Female straight jeans: bottom circumference net size minus 2 cm<br>
2.Boot cut jeans: bottom circumference size add 4-5 cm <br>
3.Wide-leg jeans: bottom circumference net size minus 3-4 cm <br>
4.Flare jeans: bottom circumference net size plus 5 cm <br>
5.Pants: measure tightly 
</p>
<h3 class="font-bold xl:text-lg lg:text-lg text-xs xl:pt-8 pt-4 md:text-left text-center">
Usually 38 to 43 CM or 15 to 17 IN
</h3>
</div>
</div>
<div class="flex md:flex-row justify-start mx-4 mb-20 flex-col">
<div class="xl:w-1/2 lg:w-3/5 w-full">
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/measurement-page/length%20circum.png"
class="image object-cover">
</div>
<div class="lg:px-6 md:px-4 w-full text-center md:text-left">
<h1 class="font-bold xl:text-3xl lg:text-xl text-md">
Length Circumference
</h1>
<p class="md:font-medium font-base xl:text-lg lg:text-sm text-xs pt-4">
From the waist, along the side seam of the pants, the normal data is the measurement minus 1-2 cm.
</p>
<h3 class="font-bold xl:text-lg lg:text-lg text-xs xl:pt-12 pt-4">
Usually 76 to 91 CM or 30 to 36 IN
</h3>
</div>
</div>
<div class="mx-4 lg:my-48 md:my-28 my-20 border-2 border-gray-400">
<p class="lg:text-xl md:text-lg text-xs lg:px-32 md:px-9 px-4 font-medium text-center p-8">
If you have any concerns regarding measurements, please contact us at
<span class="font-bold">brooksbingham.com</span>. We are committed to providing excellent customer service and
ensuring your complete satisfaction. Feel free to reach out to us for any inquiries or assistance.
Your feedback is valuable to us, and we are here to help with any questions or issues you may have.
</p>
</div>
{/block}

297
templates/layouts/layout-both-columns.tpl
View File

@ -1,4 +1,4 @@
{*
{**
* 2007-2019 PrestaShop and Contributors
*
* NOTICE OF LICENSE
@ -85,97 +85,9 @@
{/block}
{if $page.page_name == 'index'}
<div>
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/custom_page_banner_image.jpeg"
</div>
<div class="lg:my-32 my-20" >
<h1 class="text-2xl font-bold text-center">Design and Visualize what you need</h1>
<h3 class="text-lg 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"/>
</div>
<div class="flex flex-col-reverse md:flex-row items-center md:mt-24 mt-20 mx-4">
<div class="mx-3 w-full md:w-[50%] text-center md:text-left md:pt-0 pt-2">
<h1 class="font-bold lg:text-3xl md:text-xl text-lg">
The Art of Custom Clothing
</h1>
<p class="lg:text-xl md:text-md text-sm font-medium pt-5">
Personalize your handcrafted look with our exclusive collection of Made-to-Measure men's clothing.
</p>
<p class="lg:text-xl md:text-md text-sm font-medium pt-1">
Take control and feel confident with our Perfect Fit Guarantee
</p>
<div class="lg:w-52 md:w-42 w-38 flex md:justify-start justify-center">
<a class="all-product-link lg:text-xl md:text-md text-sm font-bold mt-9 flex border border-2 border-black p-2 px-4"
href="https://brooksbingham.com/16-custom-made-clothing">
Start Customization
</a>
</div>
</div>
<div class="w-full md:w-[50%] grid grid-flow-col grid-rows-3 gap-x-2 lg:pl-5 md:pl-3 pl-0">
<div class="row-end-3 row-span-2">
<img class="object-cover md:h-[200px] h-full w-full" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg">
</div>
<div class="row-start-2 row-span-2">
<img class="object-cover md:h-[200px] h-full w-full " src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg">
</div>
</div>
</div>
<div class="flex md:flex-row flex-col items-center mx-4 lg:mt-32 md:mt-24 mt-20">
<div class="w-full md:w-[60%] h-full">
<div class="grid grid-cols-3 gap-y-2 gap-x-2">
<div class="">
<img class="object-cover md:h-[200px] h-full" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg">
</div>
<div class="row-span-1">
<img class="object-cover md:h-[200px] h-full" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg">
</div>
<div class="row-span-2 col-span-1 relative">
<img class="object-cover md:h-[410px] h-full" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg">
</div>
<div>
<img class="object-cover md:h-[200px] h-full" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg">
</div>
<div class="">
<img class="object-cover md:h-[200px] h-full" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg">
</div>
</div>
</div>
<div class="mx-3 w-full md:w-[40%] text-center md:text-left md:pl-5 pl-0 ">
<h1 class="font-bold lg:text-3xl md:text-xl text-lg md:pt-0 pt-2">
Tailored Perfection for a Flawless Fit
</h1>
<p class="lg:text-xl md:text-md text-sm font-medium pt-5">
Craft your signature style down to the finest details - from quality fabrics and distinctive
buttons to unique pocket hues and lining designs.
</p>
<p class="lg:text-xl md:text-md text-sm font-medium pt-1">Our Perfect Fit Guarantee ensures a tailored look that exudes your confident individuality</p>
<div class="lg:w-52 md:w-42 w-38 flex md:justify-start justify-center">
<a class="all-product-link lg:text-xl md:text-md text-sm font-bold mt-9 flex border border-2 border-black p-2 px-4"
href="https://brooksbingham.com/16-custom-made-clothing">
Start Customization
</a>
</div>
</div>
</div>
<div class="mx-4 lg:mt-32 md:mt-24 mt-20">
<h1 class="lg:text-3xl md:text-2xl text-lg font-bold text-center">Curated Custom Collection</h1>
<p class="lg:text-xl md:text-md text-sm text-center pt-4 font-medium">Experience luxury with personalized jackets and custom collections crafted just for you</p>
</div>
<div class="container mt-16">
<div class=" flex md:flex-row flex-col gap-8 lg:mb-32 mb-20">
<div class="container">
<h2 class="products-section-title text-2xl font-bold mb-16 mt-20 text-center"> Custom design by you</h2>
<div class=" flex md:flex-row flex-col gap-8 lg:mb-32 mb-20">
<div href="https://brooksbingham.com/module/thob/configurator?id_product=74">
<a href="https://brooksbingham.com/module/thob/configurator?id_product=74">
<img class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100" src="https://stage.brooksbingham.com/111-home_default/business-shirt.jpg"/>
@ -203,205 +115,20 @@
<h3 class="text-center text-lg pt-4 font-semibold"> Tuxedos</h3>
</a>
</div>
</div>
</div>
<div class="flex md:flex-row flex-col mx-4 items-center lg:my-32 md:my-24 my-20">
<div class="w-full md:w-[50%] h-full">
<div class="grid grid-rows-3 grid-flow-col gap-y-2 gap-x-2">
<div class="row-span-2">
<img class="h-full object-cover"
src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg">
</div>
<div class="row-span-1">
<img class="h-full object-cover"
src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg">
</div>
<div class="row-span-1">
<img class="h-full object-cover"
src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg">
</div>
<div class="row-span-2">
<img class="h-full object-cover"
src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg">
</div>
<div class="row-span-3">
<img class="h-full object-cover"
src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg">
</div>
</div>
</div>
<div class="w-full md:w-[50%] md:text-left md:pl-10 pl-0 md:pt-0 pt-3 ">
<h1 class="font-bold lg:text-3xl md:text-xl text-lg md:pt-0 pt-2 text-center md:text-left">
About Brooks Bingham
</h1>
<div class="lg:pt-10 md:pt-6 pt-4 lg:text-xl text-sm font-medium space-y-2 text-left">
<li>Individuality and precision tailoring is what we celebrate.</li>
<li>We are on a mission to provide high-quality, custom-fit clothing that embodies YOU.</li>
<li>Modern with the technology, but we never forget the importance of classic traditional tailoring.</li>
<li>We are all about creating timeless, personalized pieces.</li>
</div>
</div>
<div class="lg:mb-32 mb-20" >
<h1 class="text-2xl font-bold text-center">Design and Visualize what you need</h1>
<h3 class="text-lg 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"/>
</div>
<div class="flex flex-col-reverse md:flex-row md:mt-24 mt-20 mx-4">
<div class="w-full md:w-[60%] text-center md:text-left md:pt-0 pt-4">
<h1 class="font-bold lg:text-4xl md:text-2xl text-lg lg:pt-20 md:pt-9 pt-0">
Why Choose Brooks Bingham?
</h1>
<div class="flex md:flex-row flex-col lg:pt-20 md:pt-10 pt-7">
<div class="flex-col 2xl:pr-16 xl:pr-12 lg:pr-6 md:pr-5 pr-0">
<h1 class="md:text-xl xl:text-5xl lg:text-3xl text-5xl font-semibold text-gray-300 pb-4">1.</h1>
<h1 class="xl:text-xl lg:text-lg md:text-xs text-xl font-semibold">Expert</h1>
<h1 class="xl:text-xl lg:text-lg md:text-xs text-xl font-semibold">Craftmanship</h1>
</div>
<div class="flex-col 2xl:pr-16 xl:pr-12 lg:pr-6 md:pr-5 pr-0 md:pt-0 pt-4">
<h1 class="md:text-xl xl:text-5xl lg:text-3xl text-5xl font-semibold text-gray-300 pb-4">2.</h1>
<h1 class="xl:text-xl lg:text-lg md:text-xs text-xl font-semibold">Innovative</h1>
<h1 class="xl:text-xl lg:text-lg md:text-xs text-xl font-semibold">Customization</h1>
</div>
<div class="flex-col 2xl:pr-16 xl:pr-12 lg:pr-6 md:pr-5 pr-0 md:pt-0 pt-4">
<h1 class="md:text-xl xl:text-5xl lg:text-3xl text-5xl font-semibold text-gray-300 pb-4">3.</h1>
<h1 class="xl:text-xl lg:text-lg md:text-xs text-xl font-semibold">Quality</h1>
<h1 class="xl:text-xl lg:text-lg md:text-xs text-xl font-semibold">Materials</h1>
</div>
<div class="flex-col 2xl:pr-16 xl:pr-12 lg:pr-6 md:pr-5 pr-0 md:pt-0 pt-4">
<h1 class="md:text-xl xl:text-5xl lg:text-3xl text-5xl font-semibold text-gray-300 pb-4">4.</h1>
<h1 class="xl:text-xl lg:text-lg md:text-xs text-xl font-semibold">Sustainable</h1>
<h1 class="xl:text-xl lg:text-lg md:text-xs text-xl font-semibold">Practices</h1>
</div>
<div class="flex-col md:pt-0 pt-4">
<h1 class="md:text-xl xl:text-5xl lg:text-3xl text-5xl font-semibold text-gray-300 pb-4">5.</h1>
<h1 class="xl:text-xl lg:text-lg md:text-xs text-xl font-semibold">Exceptional</h1>
<h1 class="xl:text-xl lg:text-lg md:text-xs text-xl font-semibold">Support</h1>
</div>
</div>
</div>
<div class="w-full md:w-[40%] grid grid-cols-3 gap-x-2 gap-y-2 lg:pl-2 md:pl-3 pl-0 md:pt-0 pt-4">
<div class="col-span-3">
<img class="object-cover lg:h-[200px] h-[100px] w-full" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg">
</div>
<div class="">
<img class="object-cover lg:h-[200px] h-[100px] w-full " src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg">
</div>
<div class="">
<img class="object-cover lg:h-[200px] h-[100px] w-full" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg">
</div>
<div class="">
<img class="object-cover lg:h-[200px] h-[100px] w-full" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg">
</div>
</div>
</div>
<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="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">
The quality of my bespoke shirts from Brooks Bingham Clothing has been exceptional!
</p>
<p class="lg:text-xl text-sm font-medium text-center">
The fabrics, buttons, and stitching are of the highest quality.
</p>
<h1 class="font-bold text-center lg:text-xl md:text-lg text-md lg:pt-8 pt-6">Matt K </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 class="w-full md:w-[40%]">
<img class="image object-cover w-full h-full md:h-[400px]"
src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg">
</div>
</div>
<div class="mt-32 mx-4 flex relative items-center">
<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/gallery/Left-small-img1.jpg">
<div class="absolute text-white lg:pl-24 md:pl-12 pl-4">
<h1 class="md:font-bold font-semibold lg:text-4xl md:text-2xl text-sm">Step into Style with a Custom Touch</h1>
<p class="lg:font-semibold md:font-medium font-base lg:text-2xl md:text-lg text-xs md:w-8/12 lg:pt-9 md:pt-6 pt-4">
Our perfect fit guarantee ensures that every plece you order is tailored to your exact specifications,
delivering a perfect fit every time.
</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"
href="https://brooksbingham.com/16-custom-made-clothing">
Start Customization
</a>
</div>
</div>
</div>
<div class="mx-4 mt-32">
<h1 class="font-bold lg:text-3xl md:text-xl text-lg">BROOKSBINGHAM</h1>
<p class=" font-medium lg:text-lg md:text-md text-sm pt-9">Are you one of the millions of men that off the rack clothing just doesn't work for you?
A generic size built for the generic man? Brooks Bingham Clothing started exactly for this reason.
We are athletes, surrounded by athletes and strive to work with those that search for perfection.
And we were sick and tired of spending thousands on garments just to spend hundreds or thousands more
for a tailor to sort of make it fit. We strive to be a luxury solution in the clothing industry while providing
custom garments built and des gned by you for you. We give you all the power to be as creative as possible
while designing your clothing followed by the implementation of photo technology to collect all needed measurements.
Through our 3D tocits you have the ability to see and explore millions of options to complete your one of a kind piece.
We thank you for taking the time to explore Brooks Bingham Clothing and we look forward to helping you explore the
world of custom garments.
</p>
</div>
<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>
@ -441,7 +168,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>
<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'}