Merge pull request 'Home and Custom made changes' (#32) from sayalip/theme-elegance:home-custom into staging

Reviewed-on: brooksbingham/theme-elegance#32
home-custom
jatiny 2024-07-02 07:29:26 +00:00
commit 06cebc0caa
4 changed files with 812 additions and 108 deletions

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 {
@ -859,6 +839,10 @@ select {
top: 100%;
}
.right-1 {
right: 0.25rem;
}
.z-10 {
z-index: 10;
}
@ -867,6 +851,10 @@ select {
grid-column: span 1 / span 1;
}
.col-span-3 {
grid-column: span 3 / span 3;
}
.col-start-1 {
grid-column-start: 1;
}
@ -891,10 +879,18 @@ 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;
@ -940,14 +936,24 @@ select {
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;
.mx-1 {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.my-12 {
margin-top: 3rem;
margin-bottom: 3rem;
}
.mb-1 {
@ -1046,6 +1052,18 @@ select {
margin-top: 2rem;
}
.mt-32 {
margin-top: 8rem;
}
.mt-48 {
margin-top: 12rem;
}
.mt-9 {
margin-top: 2.25rem;
}
.block {
display: block;
}
@ -1098,16 +1116,16 @@ select {
height: 1.5rem;
}
.h-72 {
height: 18rem;
}
.h-8 {
height: 2rem;
}
.h-\[350px\] {
height: 350px;
}
.h-\[380px\] {
height: 380px;
.h-\[50vh\] {
height: 50vh;
}
.h-auto {
@ -1118,6 +1136,22 @@ select {
height: 100%;
}
.h-1\/2 {
height: 50%;
}
.h-\[100px\] {
height: 100px;
}
.h-\[20px\] {
height: 20px;
}
.h-\[50px\] {
height: 50px;
}
.max-h-\[40px\] {
max-height: 40px;
}
@ -1191,6 +1225,14 @@ select {
width: max-content;
}
.w-\[20px\] {
width: 20px;
}
.w-\[50px\] {
width: 50px;
}
.max-w-6xl {
max-width: 72rem;
}
@ -1258,10 +1300,22 @@ 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;
}
@ -1294,6 +1348,10 @@ select {
align-items: baseline;
}
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
@ -1351,12 +1409,27 @@ select {
row-gap: 0.25rem;
}
.gap-x-2 {
-moz-column-gap: 0.5rem;
column-gap: 0.5rem;
}
.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;
}
@ -1379,6 +1452,10 @@ select {
border-width: 1px;
}
.border-2 {
border-width: 2px;
}
.border-t {
border-top-width: 1px;
}
@ -1442,6 +1519,16 @@ select {
border-color: rgb(252 165 165 / var(--tw-border-opacity));
}
.border-black {
--tw-border-opacity: 1;
border-color: rgb(0 0 0 / 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);
}
@ -1510,6 +1597,11 @@ select {
object-fit: cover;
}
.object-scale-down {
-o-object-fit: scale-down;
object-fit: scale-down;
}
.p-2 {
padding: 0.5rem;
}
@ -1534,6 +1626,10 @@ select {
padding: 2rem;
}
.p-1 {
padding: 0.25rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
@ -1544,6 +1640,11 @@ select {
padding-right: 1rem;
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
@ -1579,11 +1680,6 @@ select {
padding-bottom: 2rem;
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.pb-10 {
padding-bottom: 2.5rem;
}
@ -1604,6 +1700,10 @@ select {
padding-bottom: 1.5rem;
}
.pl-0 {
padding-left: 0px;
}
.pl-12 {
padding-left: 3rem;
}
@ -1644,10 +1744,6 @@ select {
padding-right: 2rem;
}
.pt-1 {
padding-top: 0.25rem;
}
.pt-20 {
padding-top: 5rem;
}
@ -1664,6 +1760,38 @@ select {
padding-top: 1.5rem;
}
.pt-8 {
padding-top: 2rem;
}
.pb-4 {
padding-bottom: 1rem;
}
.pl-4 {
padding-left: 1rem;
}
.pt-0 {
padding-top: 0px;
}
.pt-1 {
padding-top: 0.25rem;
}
.pt-2 {
padding-top: 0.5rem;
}
.pt-3 {
padding-top: 0.75rem;
}
.pt-7 {
padding-top: 1.75rem;
}
.pt-9 {
padding-top: 2.25rem;
}
@ -1719,6 +1847,11 @@ select {
line-height: 1rem;
}
.text-5xl {
font-size: 3rem;
line-height: 1;
}
.font-bold {
font-weight: 700;
}
@ -1821,6 +1954,11 @@ select {
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-gray-300 {
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity));
}
.underline {
text-decoration-line: underline;
}
@ -1916,7 +2054,7 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
}
.group{
&:before,
&:before,
&:after {
content: "";
display: table;
@ -2171,10 +2309,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
}
@media (min-width: 640px) {
.sm\:mb-1 {
margin-bottom: 0.25rem;
}
.sm\:flex {
display: flex;
}
@ -2190,6 +2324,19 @@ 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;
}
@ -2198,6 +2345,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
margin-top: 6rem;
}
.md\:mt-32 {
margin-top: 8rem;
}
.md\:block {
display: block;
}
@ -2218,6 +2369,26 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
height: 3rem;
}
.md\:h-\[200px\] {
height: 200px;
}
.md\:h-\[300px\] {
height: 300px;
}
.md\:h-\[400px\] {
height: 400px;
}
.md\:h-\[40px\] {
height: 40px;
}
.md\:h-\[410px\] {
height: 410px;
}
.md\:w-1\/2 {
width: 50%;
}
@ -2246,6 +2417,34 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
width: 50%;
}
.md\:w-\[30\%\] {
width: 30%;
}
.md\:w-\[70\%\] {
width: 70%;
}
.md\:w-8\/12 {
width: 66.666667%;
}
.md\:w-\[40\%\] {
width: 40%;
}
.md\:w-\[40px\] {
width: 40px;
}
.md\:w-\[50\%\] {
width: 50%;
}
.md\:w-\[60\%\] {
width: 60%;
}
.md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@ -2262,6 +2461,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
align-items: flex-start;
}
.md\:justify-start {
justify-content: flex-start;
}
.md\:gap-0 {
gap: 0px;
}
@ -2282,6 +2485,16 @@ 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-4 {
padding-left: 1rem;
}
@ -2298,10 +2511,54 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
padding-right: 12rem;
}
.md\:pl-10 {
padding-left: 2.5rem;
}
.md\:pl-12 {
padding-left: 3rem;
}
.md\:pl-3 {
padding-left: 0.75rem;
}
.md\:pl-5 {
padding-left: 1.25rem;
}
.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;
@ -2332,9 +2589,27 @@ 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) {
@ -2354,6 +2629,20 @@ 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;
}
@ -2362,6 +2651,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
margin-bottom: 8rem;
}
.lg\:mt-32 {
margin-top: 8rem;
}
.lg\:flex {
display: flex;
}
@ -2374,10 +2667,26 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
height: 66.666667%;
}
.lg\:h-\[500px\] {
height: 500px;
}
.lg\:h-\[90vh\] {
height: 90vh;
}
.lg\:h-\[200px\] {
height: 200px;
}
.lg\:h-\[400px\] {
height: 400px;
}
.lg\:h-\[60px\] {
height: 60px;
}
.lg\:w-1\/3 {
width: 33.333333%;
}
@ -2390,10 +2699,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
width: 20%;
}
.lg\:w-11\/12 {
width: 91.666667%;
}
.lg\:w-2\/5 {
width: 40%;
}
@ -2410,6 +2715,14 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
width: 100%;
}
.lg\:w-52 {
width: 13rem;
}
.lg\:w-\[60px\] {
width: 60px;
}
.lg\:max-w-full {
max-width: 100%;
}
@ -2442,6 +2755,11 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
padding: 1rem;
}
.lg\:px-36 {
padding-left: 9rem;
padding-right: 9rem;
}
.lg\:px-8 {
padding-left: 2rem;
padding-right: 2rem;
@ -2452,46 +2770,92 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
padding-bottom: 0px;
}
.lg\:px-36 {
padding-left: 9rem;
padding-right: 9rem;
.lg\:px-20 {
padding-left: 5rem;
padding-right: 5rem;
}
.lg\:pt-12 {
padding-top: 3rem;
.lg\:py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.lg\:pt-14 {
padding-top: 3.5rem;
.lg\:pl-2 {
padding-left: 0.5rem;
}
.lg\:pr-10 {
padding-right: 2.5rem;
}
.lg\:pt-24 {
padding-top: 6rem;
}
.lg\:pb-6 {
padding-bottom: 1.5rem;
}
.lg\:pl-24 {
padding-left: 6rem;
}
.lg\:pl-5 {
padding-left: 1.25rem;
}
.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-8 {
padding-top: 2rem;
}
.lg\:pt-9 {
padding-top: 2.25rem;
}
.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 {
font-size: 1.125rem;
line-height: 1.75rem;
}
.lg\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.lg\:text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
.lg\:text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.lg\:text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.lg\:font-bold {
@ -2521,5 +2885,29 @@ 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;
}
}

View File

@ -69,22 +69,24 @@
<div class="relative
flex
mt-16
lg:h-2/3
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
lg:bottom-48
md:bottom-28
bottom-9
text-[#000E2A]
text-left
lg:text-5xl
lg:text-4xl
md:text-2xl
text-sm
lg:font-semibold
text-xs
font-bold">
<h1> Because You Are Unique. </h1>
<h1> So Is Your Body… </h1>
@ -94,11 +96,11 @@
<div class="flex flex-col-reverse md:flex-row items-center md:mt-24 mt-16 mx-auto">
<div class="mx-3 w-full md:w-[70%] text-center md:text-left xl:pl-12 lg:pl-2 pl-0">
<h1 class="font-bold lg:text-3xl md:text-2xl text-xl">
Custom Fit for teyour Comfort
Custom Fit for your Comfort
</h1>
<p class="lg:text-xl font-medium pt-5">
Custom-made shirts and tuxedos are tailored just for you, offering a fit like no other.
Experience unmatched comfort and style with our tailored suits, celebrating your uniqueness.
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.
</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">
@ -161,11 +163,6 @@
</div>
</div>
<div class="mx-auto">
<div class="max-w-screen-lg
mx-auto
@ -210,7 +207,7 @@
pb-2">
Select the Fabric </h4>
<p class="mt-3
font-semibold
font-medium
text-lg
leading-6
text-gray-500">
@ -246,7 +243,7 @@
Finalize the Design </h4>
<p class="mt-3
text-lg
font-semibold
font-medium
leading-6
text-gray-500">
Personalize details like lapels, pockets, and lining through online platform. </p>
@ -280,7 +277,7 @@
Get Measured </h4>
<p class="mt-3
text-lg
font-semibold
font-medium
leading-6
text-gray-500">
Ensure your custom apparel fits you flawlessly by getting measured. </p>
@ -291,3 +288,41 @@
</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>

View File

@ -1,12 +1,15 @@
{**
* 2007-2019 PrestaShop and Contributors
* 2006-2019 PrestaShop and Contributors
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License 3.0 (AFL-3.0)
* This source file is subject to the Academic Free License 2.0 (AFL-3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* https://opensource.org/licenses/AFL-3.0
* https://opensource.org/licenses/AFL-4.0
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
@ -18,31 +21,32 @@
* needs please refer to https://www.prestashop.com for more information.
*
* @author PrestaShop SA <contact@prestashop.com>
* @copyright 2007-2019 PrestaShop SA and Contributors
* @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
* @copyright 2006-2019 PrestaShop SA and Contributors
* @license https://opensource.org/licenses/AFL-4.0 Academic Free License 3.0 (AFL-3.0)
* International Registered Trademark & Property of PrestaShop SA
*}
<div class="relative flex-1 w-full max-w-[240px] group">
<!--
<div class="relative flex-2 w-full max-w-[240px] group">
<button
class="dropdown-toggle relative px-4 pr-6 leading-1 w-full text-left"
class="dropdown-toggle relative px-5 pr-6 leading-1 w-full text-left"
type="button"
rel="nofollow"
aria-haspopup="true"
aria-expanded="false">
{if isset($listing.sort_selected)}{$listing.sort_selected}{else}{l s='Select' d='Shop.Theme.Actions'}{/if}
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down absolute right-0 top-1" width="16" height="16" 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>
<path d="M6 9l6 6l6 -6"></path>
<svg xmlns="http://www.w2.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down absolute right-0 top-1" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M-1 0h24v24H0z" fill="none"></path>
<path d="M5 9l6 6l6 -6"></path>
</svg>
</button>
<div class="dropdown-menu hidden group-hover:flex absolute top-full right-0 bg-white z-10 shadow-lg">
<div class="dropdown-menu hidden group-hover:flex absolute top-full right-1 bg-white z-10 shadow-lg">
<div class="flex flex-col whitespace-nowrap">
{foreach from=$listing.sort_orders item=sort_order}
<a
rel="nofollow"
href="{$sort_order.url}"
class="px-4 py-1 hover:text-yellow-700 select-list {['current' => $sort_order.current, 'js-search-link' => true]|classnames}"
class="px-5 py-1 hover:text-yellow-700 select-list {['current' => $sort_order.current, 'js-search-link' => true]|classnames}"
>
{$sort_order.label}
</a>
@ -50,3 +54,4 @@
</div>
</div>
</div>
-->

View File

@ -1,4 +1,4 @@
{**
{*
* 2007-2019 PrestaShop and Contributors
*
* NOTICE OF LICENSE
@ -95,9 +95,97 @@
{/block}
{if $page.page_name == 'index'}
<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>
<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 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"/>
@ -125,17 +213,205 @@
<h3 class="text-center text-lg pt-4 font-semibold"> Tuxedos</h3>
</a>
</div>
</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 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>
<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>
@ -175,7 +451,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'}