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

Compare commits

base: apurvab:de11abaa9c17110dddb32c162b668e8d27818649
Branches Tags
apurvab:main
apurvab:fix/facets
apurvab:marketing-experiment
apurvab:staging
apurvab:update
apurvab:dev
..
compare: apurvab:d20f1f437abd0b694c4053c3aa51b348e9d028ea
Branches Tags
apurvab:main
apurvab:fix/facets
apurvab:marketing-experiment
apurvab:staging
apurvab:update
apurvab:dev

No commits in common. "de11abaa9c17110dddb32c162b668e8d27818649" and "d20f1f437abd0b694c4053c3aa51b348e9d028ea" have entirely different histories.
de11abaa9c ... d20f1f437a

5 changed files with 421 additions and 175 deletions
Show Stats Expand all files Collapse all files

3
assets/css/custom.css
View File

@ -1,3 +0,0 @@
body{
background-color:white;
}

84
assets/css/theme.css
View File

@ -1,5 +1,5 @@
/*
! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com
! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com
*/
/*
@ -32,11 +32,9 @@
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
html {
line-height: 1.5;
/* 1 */
-webkit-text-size-adjust: 100%;
@ -52,8 +50,6 @@ html,
/* 5 */
font-variation-settings: normal;
/* 6 */
-webkit-tap-highlight-color: transparent;
/* 7 */
}
/*
@ -125,10 +121,8 @@ strong {
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/
code,
@ -137,12 +131,8 @@ samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
/* 1 */
font-feature-settings: normal;
/* 2 */
font-variation-settings: normal;
/* 3 */
font-size: 1em;
/* 4 */
/* 2 */
}
/*
@ -211,8 +201,6 @@ textarea {
/* 1 */
line-height: inherit;
/* 1 */
letter-spacing: inherit;
/* 1 */
color: inherit;
/* 1 */
margin: 0;
@ -236,9 +224,9 @@ select {
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
/* 1 */
background-color: transparent;
@ -665,10 +653,6 @@ select {
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
::backdrop {
@ -719,10 +703,6 @@ select {
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
.container {
@ -851,10 +831,6 @@ select {
top: 50%;
}
.top-28 {
top: 7rem;
}
.top-\[70\%\] {
top: 70%;
}
@ -964,11 +940,6 @@ select {
margin-bottom: 2rem;
}
.my-12 {
margin-top: 3rem;
margin-bottom: 3rem;
}
.mb-1 {
margin-bottom: 0.25rem;
}
@ -1085,10 +1056,6 @@ select {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.table {
display: table;
}
@ -1109,10 +1076,6 @@ select {
aspect-ratio: 342/513;
}
.h-10 {
height: 2.5rem;
}
.h-12 {
height: 3rem;
}
@ -1121,10 +1084,6 @@ select {
height: 6rem;
}
.h-4 {
height: 1rem;
}
.h-40 {
height: 10rem;
}
@ -1189,10 +1148,6 @@ select {
width: 16.666667%;
}
.w-10 {
width: 2.5rem;
}
.w-12 {
width: 3rem;
}
@ -1213,10 +1168,6 @@ select {
width: 8rem;
}
.w-4 {
width: 1rem;
}
.w-40 {
width: 10rem;
}
@ -1447,10 +1398,6 @@ select {
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.overflow-hidden {
overflow: hidden;
}
.overflow-y-auto {
overflow-y: auto;
}
@ -1945,11 +1892,6 @@ select {
color: rgb(75 85 99 / var(--tw-text-opacity));
}
.text-gray-800 {
--tw-text-opacity: 1;
color: rgb(31 41 55 / var(--tw-text-opacity));
}
.text-gray-900 {
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
@ -2335,11 +2277,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
}
@media (min-width: 640px) {
.sm\:my-20 {
margin-top: 5rem;
margin-bottom: 5rem;
}
.sm\:flex {
display: flex;
}
@ -2360,11 +2297,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
margin-bottom: 6rem;
}
.md\:my-20 {
margin-top: 5rem;
margin-bottom: 5rem;
}
.md\:mt-0 {
margin-top: 0px;
}

42
modules/ps_featuredproducts/views/templates/hook/ps_featuredproducts.tpl
View File

@ -23,7 +23,7 @@
* International Registered Trademark & Property of PrestaShop SA
*}
<section class="featured-products flex flex-col gap-8 mt-20">
<section class="featured-products flex flex-col gap-8">
<h2 class="products-section-title text-2xl font-bold">
{l s='Popular Products' d='Shop.Theme.Catalog'}
</h2>
@ -32,47 +32,9 @@
{include file="catalog/_partials/miniatures/product.tpl" product=$product}
{/foreach}
</div>
<a class="all-product-link text-2xl font-bold w-full flex items-center justify-end mb-8" href="{$allProductsLink}">
<a class="all-product-link text-2xl font-bold w-full flex items-center justify-end mb-24" href="{$allProductsLink}">
{l s='All products' 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>
</section>
{if $page.page_name == "index"}
<div class="mx-4 my-12 sm:my-20">
<h1 class="font-bold lg:text-3xl md:text-xl text-lg">What makes us unique?</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-12 md:mt-24 flex relative items-center left-0 right-0 mb-12 ">
<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/homepage/seo-img6.png">
<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 hover:text-white"
href="https://brooksbingham.com/17-custom-made-clothing">
Start Customization
</a>
</div>
</div>
</div>
{/if}

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

@ -24,12 +24,7 @@
*}
{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=" mx-auto h-[50vh] flex flex-col justify-center ">
<h1 class="lg:font-semibold
font-bold
@ -77,7 +72,12 @@
{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">
@ -193,6 +193,7 @@
<h4 class="text-xl
leading-6
font-bold
text-gray-900
pb-2">
Select the Fabric </h4>
<p class="mt-3
@ -228,6 +229,7 @@
<h4 class="text-xl
leading-6
font-bold
text-gray-900
pb-2">
Finalize the Design </h4>
<p class="mt-3
@ -262,6 +264,7 @@
<h4 class="text-xl
leading-6
font-bold
text-gray-900
pb-2">
Get Measured </h4>
<p class="mt-3
@ -277,42 +280,115 @@
</div>
</div>
</div>
<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="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 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>Follow clear step-by-step instructions for accurate results.</li>
<li>Simple form to fill for each measurement.</li>
<li>Ensure precision with detailed guidance for each body part.</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 </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 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>Utilize advanced 3D scanning via a smartphone app.</li>
<li>Quick and convenient measurement process.</li>
<li>Secure and private data storage for continuous updates.</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 </a></div>
</div>
</div>
</li>
</ul>
</div>
<h1 class="font-bold text-xl md:text-2xl lg:text-3xl text-center">
How Can You Get Measured?
</h1>
<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}

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

@ -95,22 +95,301 @@
{if $page.page_name == 'index'}
<script>
const slides = document.querySelectorAll('.slide');
let currentSlide = 0;
document.querySelector('[data-carousel-next]').addEventListener('click', () => {
slides[currentSlide].classList.add('hidden');
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].classList.remove('hidden');
});
<div class="lg:my-32 my-20" >
<h1 class="lg:text-2xl md:text-xl text-lg font-bold text-center">Design and Visualize what you need</h1>
<h3 class="lg:text-lg md:text-md text-sm font-semibold text-center mb-12">Choose what looks good on you </h3>
<a href="https://brooksbingham.com/module/thob/configurator?id_product=77">
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/widget-screenshot.png"/>
</a>
</div>
document.querySelector('[data-carousel-prev]').addEventListener('click', () => {
slides[currentSlide].classList.add('hidden');
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
slides[currentSlide].classList.remove('hidden');
});
</script>
<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="xl:text-xl lg:text-lg md:text-md text-sm font-medium pt-5 lg:w-11/12 w-full">
Personalize your handcrafted look with our exclusive collection of Made-to-Measure men's clothing.
</p>
<p class="xl:text-xl lg:text-lg md:text-md text-sm font-medium pt-1 lg:w-11/12 w-full">
Take control and feel confident with our Perfect Fit Guarantee
</p>
<div class="xl:w-52 lg:w-42 md:w-42 w-38 flex md:justify-start justify-center">
<a class="all-product-link xl:text-xl lg:text-lg md:text-md text-sm font-bold mt-9 flex border border-2 border-black p-2 px-4"
href="https://brooksbingham.com/module/thob/configurator?id_product=75">
Start Customization
</a>
</div>
</div>
<div class="w-full md:w-[50%]">
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/seo-img1.png">
</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">
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/seo-img2.png">
</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-md text-lg md:pt-0 pt-2">
Tailored Perfection for a Flawless Fit
</h1>
<p class="xl:text-xl lg:text-md md:text-xs text-sm font-medium pt-5 md:pt-3 lg:pt-9">
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="xl:text-xl lg:text-md md:text-xs 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 xl:text-xl lg:text-lg md:text-sm text-sm font-bold mt-9 md:mt-4 lg:mt-9 flex border border-2 border-black p-2 px-4"
href="https://stage.brooksbingham.com/content/10-how-to-measure">
How to measure
</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 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"/>
<h3 class="text-center text-lg pt-4 font-semibold"> Shirts</h3>
</a>
</div>
<div>
<a href="https://brooksbingham.com/module/thob/configurator?id_product=75">
<img class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100" src="https://stage.brooksbingham.com/107-home_default/business-suit.jpg"/>
<h3 class="text-center text-lg pt-4 font-semibold"> Suits</h3>
</a>
</div>
<div>
<a href="https://brooksbingham.com/module/thob/configurator?id_product=76">
<img class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100" src="https://stage.brooksbingham.com/108-home_default/sports-jacket.jpg"/>
<h3 class="text-center text-lg pt-4 font-semibold">Sport Jackets</h3>
</a>
</div>
<div>
<a href="https://brooksbingham.com/module/thob/configurator?id_product=77">
<img class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100" src="https://stage.brooksbingham.com/112-home_default/tuxedo.jpg"/>
<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">
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/seo-img3.png">
</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="xl:pt-10 lg:pt-6 md:pt-6 pt-4 xl:text-xl lg:text-md md:text-md 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>
<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 xl:pt-16 lg:pt-5 md:pt-3 pt-0">
Why Choose Brooks Bingham?
</h1>
<div class="flex md:flex-row flex-col xl:pt-20 lg:pt-12 md:pt-7 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%]">
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/seo-img4.png">
</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%] h-full">
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/seo-img5.png">
</div>
</div>
<div class="mt-32 flex relative items-center left-0 right-0">
<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/homepage/seo-img6.png">
<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 hover:text-white"
href="https://brooksbingham.com/17-custom-made-clothing">
Start Customization
</a>
</div>
</div>
</div>
<div class="mx-4 my-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>
<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}