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

Compare commits

base: sayalip:11db4d7657d91fc709bb4fcbe0cf914204f6c930
Branches Tags
sayalip:home-custom
sayalip:staging
sayalip:main
sayalip:measurement-page
sayalip:dev
...
compare: sayalip:02b82c1f18c83793be39003001565ea0a5b6c5e4
Branches Tags
sayalip:home-custom
sayalip:staging
sayalip:main
sayalip:measurement-page
sayalip:dev

11 Commits
11db4d7657 ... 02b82c1f18

Author SHA1 Message Date
sayalip 02b82c1f18 refactor:update slider 2024-07-05 13:15:20 +05:30
jatiny d20f1f437a Merge pull request 'fix/home-page' (#41) from jatiny/theme-elegance:fix/home-page into staging 
Reviewed-on: brooksbingham/theme-elegance#41
 2024-07-04 12:54:01 +00:00
jatin 8fcda81556 Merge remote-tracking branch 'upstream/staging' into fix/home-page 2024-07-04 18:23:34 +05:30
jatin dbdd1640d5 fix: remove commented override 2024-07-04 18:23:15 +05:30
jatiny 8bdca0ac2b Merge pull request 'fix/home-page' (#40) from jatiny/theme-elegance:fix/home-page into staging 
Reviewed-on: brooksbingham/theme-elegance#40
 2024-07-04 12:46:02 +00:00
jatin 4d75c227ed Merge remote-tracking branch 'upstream/staging' into fix/home-page 2024-07-04 18:15:28 +05:30
jatin 81409f856a fix: move hero banner outside wrapper 2024-07-04 18:15:02 +05:30
jatiny 3e87e56831 Merge pull request 'fix/home-page' (#39) from jatiny/theme-elegance:fix/home-page into staging 
Reviewed-on: brooksbingham/theme-elegance#39
 2024-07-04 11:57:16 +00:00
jatin 910777cd0d chore: merge staging latest 2024-07-04 17:26:44 +05:30
jatiny 57eb8e4b41 Merge pull request 'home-custom' (#37) from sayalip/theme-elegance:home-custom into staging 
Reviewed-on: brooksbingham/theme-elegance#37
 2024-07-04 11:52:52 +00:00
jatin eba682fdaa fix: add cta links, change img link, hero section positioning 2024-07-04 16:20:23 +05:30
3 changed files with 226 additions and 258 deletions
Show Stats Expand all files Collapse all files

292
assets/css/theme.css
View File

@ -787,10 +787,6 @@ select {
bottom: 0.25rem;
}
.bottom-9 {
bottom: 2.25rem;
}
.bottom-\[50\%\] {
bottom: 50%;
}
@ -835,6 +831,10 @@ select {
top: 50%;
}
.top-28 {
top: 7rem;
}
.top-\[70\%\] {
top: 70%;
}
@ -847,18 +847,6 @@ select {
z-index: 10;
}
.z-0 {
z-index: 0;
}
.z-auto {
z-index: auto;
}
.z-50 {
z-index: 50;
}
.col-span-1 {
grid-column: span 1 / span 1;
}
@ -936,11 +924,6 @@ select {
margin-bottom: 0.125rem;
}
.my-12 {
margin-top: 3rem;
margin-bottom: 3rem;
}
.my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
@ -1065,10 +1048,6 @@ select {
margin-top: 2.25rem;
}
.box-border {
box-sizing: border-box;
}
.block {
display: block;
}
@ -1081,6 +1060,10 @@ select {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.table {
display: table;
}
@ -1101,8 +1084,8 @@ select {
aspect-ratio: 342/513;
}
.h-1\/2 {
height: 50%;
.h-10 {
height: 2.5rem;
}
.h-12 {
@ -1113,6 +1096,10 @@ select {
height: 6rem;
}
.h-4 {
height: 1rem;
}
.h-40 {
height: 10rem;
}
@ -1137,6 +1124,10 @@ select {
height: 20px;
}
.h-\[30px\] {
height: 30px;
}
.h-\[50px\] {
height: 50px;
}
@ -1153,48 +1144,12 @@ select {
height: 100%;
}
.h-\[700px\] {
height: 700px;
.h-\[30vh\] {
height: 30vh;
}
.h-\[400px\] {
height: 400px;
}
.h-\[500px\] {
height: 500px;
}
.h-\[180px\] {
height: 180px;
}
.h-\[100px\] {
height: 100px;
}
.h-\[70px\] {
height: 70px;
}
.h-\[30px\] {
height: 30px;
}
.h-32 {
height: 8rem;
}
.h-96 {
height: 24rem;
}
.h-\[300px\] {
height: 300px;
}
.h-\[600px\] {
height: 600px;
.h-\[40vh\] {
height: 40vh;
}
.max-h-\[40px\] {
@ -1213,6 +1168,10 @@ select {
width: 16.666667%;
}
.w-10 {
width: 2.5rem;
}
.w-12 {
width: 3rem;
}
@ -1233,6 +1192,10 @@ select {
width: 8rem;
}
.w-4 {
width: 1rem;
}
.w-40 {
width: 10rem;
}
@ -1437,24 +1400,20 @@ select {
gap: 2rem;
}
.gap-20 {
gap: 5rem;
}
.gap-x-1 {
-moz-column-gap: 0.25rem;
column-gap: 0.25rem;
}
.gap-y-1 {
row-gap: 0.25rem;
}
.gap-x-20 {
-moz-column-gap: 5rem;
column-gap: 5rem;
}
.gap-y-1 {
row-gap: 0.25rem;
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@ -1467,6 +1426,10 @@ select {
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.overflow-hidden {
overflow: hidden;
}
.overflow-y-auto {
overflow-y: auto;
}
@ -1481,6 +1444,10 @@ select {
white-space: nowrap;
}
.rounded-full {
border-radius: 9999px;
}
.rounded-lg {
border-radius: 0.5rem;
}
@ -1493,10 +1460,6 @@ select {
border-width: 2px;
}
.border-4 {
border-width: 4px;
}
.border-t {
border-top-width: 1px;
}
@ -1609,13 +1572,9 @@ select {
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-red-700 {
.bg-\[\#E6DFD4\] {
--tw-bg-opacity: 1;
background-color: rgb(185 28 28 / var(--tw-bg-opacity));
}
.bg-cover {
background-size: cover;
background-color: rgb(230 223 212 / var(--tw-bg-opacity));
}
.stroke-black {
@ -1680,6 +1639,11 @@ select {
padding: 2rem;
}
.px-0 {
padding-left: 0px;
padding-right: 0px;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
@ -1730,16 +1694,6 @@ select {
padding-bottom: 2rem;
}
.px-20 {
padding-left: 5rem;
padding-right: 5rem;
}
.px-0 {
padding-left: 0px;
padding-right: 0px;
}
.pb-10 {
padding-bottom: 2.5rem;
}
@ -1856,18 +1810,6 @@ select {
padding-top: 2.25rem;
}
.pt-12 {
padding-top: 3rem;
}
.pt-11 {
padding-top: 2.75rem;
}
.pb-20 {
padding-bottom: 5rem;
}
.text-left {
text-align: left;
}
@ -1889,11 +1831,6 @@ select {
line-height: 2rem;
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.text-5xl {
font-size: 3rem;
line-height: 1;
@ -1956,11 +1893,6 @@ select {
line-height: 1;
}
.text-\[\#000E2A\] {
--tw-text-opacity: 1;
color: rgb(0 14 42 / var(--tw-text-opacity));
}
.text-blue-900 {
--tw-text-opacity: 1;
color: rgb(30 58 138 / var(--tw-text-opacity));
@ -2031,6 +1963,11 @@ select {
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-gray-800 {
--tw-text-opacity: 1;
color: rgb(31 41 55 / var(--tw-text-opacity));
}
.underline {
text-decoration-line: underline;
}
@ -2325,6 +2262,13 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
display: none;
}
@media (prefers-color-scheme: dark) {
.dark\:text-gray-800 {
--tw-text-opacity: 1;
color: rgb(31 41 55 / var(--tw-text-opacity));
}
}
@media not all and (min-width: 1024px) {
.max-lg\:flex-col {
flex-direction: column;
@ -2396,14 +2340,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;
@ -2441,6 +2377,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
display: none;
}
.md\:h-\[200px\] {
height: 200px;
}
.md\:h-\[300px\] {
height: 300px;
}
@ -2453,16 +2393,16 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
height: 40px;
}
.md\:h-\[100px\] {
height: 100px;
.md\:h-\[70vh\] {
height: 70vh;
}
.md\:h-\[180px\] {
height: 180px;
.md\:h-\[80vh\] {
height: 80vh;
}
.md\:h-\[200px\] {
height: 200px;
.md\:h-full {
height: 100%;
}
.md\:w-1\/2 {
@ -2521,14 +2461,14 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
width: 70%;
}
.md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.md\:flex-row {
flex-direction: row;
}
@ -2557,8 +2497,13 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
gap: 1rem;
}
.md\:gap-20 {
gap: 5rem;
.md\:bg-transparent {
background-color: transparent;
}
.md\:object-cover {
-o-object-fit: cover;
object-fit: cover;
}
.md\:p-2 {
@ -2569,9 +2514,9 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
padding: 2rem;
}
.md\:px-10 {
padding-left: 2.5rem;
padding-right: 2.5rem;
.md\:px-12 {
padding-left: 3rem;
padding-right: 3rem;
}
.md\:px-4 {
@ -2579,11 +2524,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
padding-right: 1rem;
}
.md\:px-12 {
padding-left: 3rem;
padding-right: 3rem;
}
.md\:pl-10 {
padding-left: 2.5rem;
}
@ -2620,6 +2560,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
padding-top: 0px;
}
.md\:pt-11 {
padding-top: 2.75rem;
}
.md\:pt-12 {
padding-top: 3rem;
}
@ -2628,6 +2572,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
padding-top: 0.75rem;
}
.md\:pt-5 {
padding-top: 1.25rem;
}
.md\:pt-6 {
padding-top: 1.5rem;
}
@ -2636,18 +2584,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
padding-top: 1.75rem;
}
.md\:pt-8 {
padding-top: 2rem;
}
.md\:pt-5 {
padding-top: 1.25rem;
}
.md\:pt-11 {
padding-top: 2.75rem;
}
.md\:text-left {
text-align: left;
}
@ -2714,23 +2650,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
bottom: 0.75rem;
}
.lg\:bottom-48 {
bottom: 12rem;
}
.lg\:right-0 {
right: 0px;
}
.lg\:right-20 {
right: 5rem;
}
.lg\:my-20 {
margin-top: 5rem;
margin-bottom: 5rem;
}
.lg\:my-32 {
margin-top: 8rem;
margin-bottom: 8rem;
@ -2760,6 +2683,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
display: none;
}
.lg\:h-\[300px\] {
height: 300px;
}
.lg\:h-\[400px\] {
height: 400px;
}
@ -2776,14 +2703,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
height: 90vh;
}
.lg\:h-\[460px\] {
height: 460px;
}
.lg\:h-\[300px\] {
height: 300px;
}
.lg\:w-1\/3 {
width: 33.333333%;
}
@ -2876,11 +2795,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
padding-bottom: 0px;
}
.lg\:py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.lg\:pb-6 {
padding-bottom: 1.5rem;
}
@ -2909,10 +2823,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
padding-top: 3rem;
}
.lg\:pt-16 {
padding-top: 4rem;
}
.lg\:pt-24 {
padding-top: 6rem;
}
@ -2974,14 +2884,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
}
@media (min-width: 1280px) {
.xl\:right-56 {
right: 14rem;
}
.xl\:h-\[500px\] {
height: 500px;
}
.xl\:h-\[460px\] {
height: 460px;
}

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

@ -23,7 +23,6 @@
* International Registered Trademark & Property of PrestaShop SA
*}
<!--
<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'}
@ -38,8 +37,4 @@
<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>
-->

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

@ -51,19 +51,18 @@
{/block}
</header>
{if $page.page_name == 'index'}
<div class="w-full h-[40vh] md:h-[80vh] absolute top-0 left-0 bg-[#E6DFD4] md:bg-transparent flex items-center">
<img class="w-full md:h-full md:object-cover"
src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/banner.png" />
</div>
<div class="w-full h-[30vh] md:h-[70vh]">
</div>
{/if}
{block name='displayBeforeWrapper'}
{hook h='displayBeforeWrapper'}
{/block}
<!-- {if $page.page_name == 'index'}
<a href="https://brooksbingham.com/17-custom-made" id="slider">
<div class="mb-12 w-full lg:h-[90vh]" style="clip-path: inset(4px)" id="slider">
<video autoplay muted loop class="w-full h-full 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>
</a>
{/if} -->
<section class="container mx-auto">
{block name='breadcrumb'}
@ -95,21 +94,14 @@
{/block}
{if $page.page_name == 'index'}
<div>
<img class="absolute left-0 top-0 right-0 w-full"
src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/banner.png"
</div>
<div class="xl:h-[460px] lg:h-[300px] md:h-[200px] h-[30px]" >
</div>
<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>
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/widget-screenshot.png"/>
<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>
@ -126,7 +118,7 @@
</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/17-custom-made-clothing">
href="https://brooksbingham.com/module/thob/configurator?id_product=75">
Start Customization
</a>
</div>
@ -155,8 +147,8 @@
</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://brooksbingham.com/17-custom-made-clothing">
Start Customization
href="https://stage.brooksbingham.com/content/10-how-to-measure">
How to measure
</a>
</div>
</div>
@ -259,44 +251,124 @@
<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 class="w-full md:w-[60%] text-center md:text-left md:pt-0 pt-5 md:pr-5 pr-0 relative">
<div id="slider" class="relative overflow-hidden">
<div class="slide">
<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 relative z-10">
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 relative z-10">
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="slide hidden">
<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 relative z-10">
Magical, is how I can describe my experience and the suits Brooks helped with my wedding! The men are still wearing their suit jackets and suits for other events! The fit was sharp and the fabrics were fantastic! There were so many options it was tough to choose from! Highly recommend Brooks for custom suits for any occasion!
</p>
<h1 class="font-bold text-center lg:text-xl md:text-lg text-md lg:pt-8 pt-6">Stephanie H</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>
<button type="button"
class="absolute left-0 top-28 flex items-center justify-center h-full cursor-pointer"
data-carousel-prev>
<span class="inline-flex items-center justify-center w-10 h-10">
<svg class="w-4 h-4 text-gray-800"
aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
<path stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 1 1 5l4 4"/>
</svg>
<span class="sr-only">Previous</span>
</span>
</button>
<button type="button"
class="absolute right-0 top-28 flex items-center justify-center h-full cursor-pointer"
data-carousel-next>
<span class="inline-flex items-center justify-center w-10 h-10">
<svg class="w-4 h-4 text-gray-800"
aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
</svg>
<span class="sr-only">Next</span>
</span>
</button>
</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">
<img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/seo-img5.png">
</div>
</div>
<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');
});
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="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">
@ -308,7 +380,7 @@
</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"
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>
@ -432,8 +504,7 @@
{block name='hook_before_body_closing_tag'}
{hook h='displayBeforeBodyClosingTag'}
{/block}
{/block}
</body>