forked from brooksbingham/theme-elegance
fix: add cta links, change img link, hero section positioning
parent
ed4dd2f131
commit
eba682fdaa
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -961,6 +949,11 @@ select {
|
|||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.my-16 {
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
|
@ -1065,10 +1058,6 @@ select {
|
|||
margin-top: 2.25rem;
|
||||
}
|
||||
|
||||
.box-border {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -1137,6 +1126,10 @@ select {
|
|||
height: 20px;
|
||||
}
|
||||
|
||||
.h-\[30px\] {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.h-\[50px\] {
|
||||
height: 50px;
|
||||
}
|
||||
|
|
@ -1153,48 +1146,24 @@ select {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.h-\[700px\] {
|
||||
height: 700px;
|
||||
.h-4\/5 {
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
.h-\[400px\] {
|
||||
height: 400px;
|
||||
.h-\[80vh\] {
|
||||
height: 80vh;
|
||||
}
|
||||
|
||||
.h-\[500px\] {
|
||||
height: 500px;
|
||||
.h-\[70vh\] {
|
||||
height: 70vh;
|
||||
}
|
||||
|
||||
.h-\[180px\] {
|
||||
height: 180px;
|
||||
.h-\[40vh\] {
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
.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-\[30vh\] {
|
||||
height: 30vh;
|
||||
}
|
||||
|
||||
.max-h-\[40px\] {
|
||||
|
|
@ -1480,10 +1449,6 @@ select {
|
|||
border-width: 2px;
|
||||
}
|
||||
|
||||
.border-4 {
|
||||
border-width: 4px;
|
||||
}
|
||||
|
||||
.border-t {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
|
@ -1596,13 +1561,23 @@ select {
|
|||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-red-700 {
|
||||
.bg-neutral-400 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(185 28 28 / var(--tw-bg-opacity));
|
||||
background-color: rgb(163 163 163 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-cover {
|
||||
background-size: cover;
|
||||
.bg-neutral-100 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(245 245 245 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-\[\#E6DFD4\] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(230 223 212 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.stroke-black {
|
||||
|
|
@ -1629,11 +1604,21 @@ select {
|
|||
stroke-width: 3px;
|
||||
}
|
||||
|
||||
.object-contain {
|
||||
-o-object-fit: contain;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.object-cover {
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.object-fill {
|
||||
-o-object-fit: fill;
|
||||
object-fit: fill;
|
||||
}
|
||||
|
||||
.object-scale-down {
|
||||
-o-object-fit: scale-down;
|
||||
object-fit: scale-down;
|
||||
|
|
@ -2406,6 +2391,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.md\:h-\[200px\] {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.md\:h-\[300px\] {
|
||||
height: 300px;
|
||||
}
|
||||
|
|
@ -2418,16 +2407,16 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
|||
height: 40px;
|
||||
}
|
||||
|
||||
.md\:h-\[100px\] {
|
||||
height: 100px;
|
||||
.md\:h-\[80vh\] {
|
||||
height: 80vh;
|
||||
}
|
||||
|
||||
.md\:h-\[180px\] {
|
||||
height: 180px;
|
||||
.md\:h-\[70vh\] {
|
||||
height: 70vh;
|
||||
}
|
||||
|
||||
.md\:h-\[200px\] {
|
||||
height: 200px;
|
||||
.md\:h-full {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.md\:w-1\/2 {
|
||||
|
|
@ -2518,6 +2507,15 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
|||
gap: 1rem;
|
||||
}
|
||||
|
||||
.md\:bg-transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.md\:object-cover {
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.md\:p-2 {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
|
@ -2704,6 +2702,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.lg\:h-\[300px\] {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.lg\:h-\[400px\] {
|
||||
height: 400px;
|
||||
}
|
||||
|
|
@ -2720,14 +2722,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%;
|
||||
}
|
||||
|
|
@ -2922,10 +2916,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
|||
right: 14rem;
|
||||
}
|
||||
|
||||
.xl\:h-\[500px\] {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.xl\:h-\[460px\] {
|
||||
height: 460px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,16 +54,6 @@
|
|||
{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 +85,20 @@
|
|||
{/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 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="xl:h-[460px] lg:h-[300px] md:h-[200px] h-[30px]" >
|
||||
<div class="w-full h-[30vh] md:h-[70vh]">
|
||||
</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 +115,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 +144,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>
|
||||
|
|
@ -308,7 +297,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>
|
||||
|
|
@ -330,77 +319,7 @@
|
|||
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}
|
||||
|
||||
{/if}
|
||||
{block name="right_column"}
|
||||
<div id="right-column" class="col-xs-12 col-sm-4 col-md-3">
|
||||
{if $page.page_name == 'product'}
|
||||
|
|
@ -432,8 +351,7 @@
|
|||
|
||||
{block name='hook_before_body_closing_tag'}
|
||||
{hook h='displayBeforeBodyClosingTag'}
|
||||
{/block}
|
||||
-->
|
||||
{/block}
|
||||
|
||||
</body>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue