feat:add SEO section for custom made page

main
sayalip 2024-06-14 13:22:46 +05:30
parent 18017975fd
commit 1df40204aa
2 changed files with 472 additions and 8 deletions

View File

@ -787,6 +787,10 @@ select {
bottom: 0.25rem;
}
.bottom-9 {
bottom: 2.25rem;
}
.bottom-\[50\%\] {
bottom: 50%;
}
@ -886,6 +890,11 @@ select {
margin-bottom: -0.75rem;
}
.mx-3 {
margin-left: 0.75rem;
margin-right: 0.75rem;
}
.mx-4 {
margin-left: 1rem;
margin-right: 1rem;
@ -916,6 +925,11 @@ select {
margin-bottom: 2rem;
}
.my-32 {
margin-top: 8rem;
margin-bottom: 8rem;
}
.mb-1 {
margin-bottom: 0.25rem;
}
@ -932,6 +946,10 @@ select {
margin-bottom: 0.5rem;
}
.mb-20 {
margin-bottom: 5rem;
}
.mb-24 {
margin-bottom: 6rem;
}
@ -1008,10 +1026,6 @@ select {
margin-top: 2rem;
}
.mb-20 {
margin-bottom: 5rem;
}
.block {
display: block;
}
@ -1068,6 +1082,14 @@ select {
height: 2rem;
}
.h-\[350px\] {
height: 350px;
}
.h-\[380px\] {
height: 380px;
}
.h-auto {
height: auto;
}
@ -1177,6 +1199,10 @@ select {
max-width: 100%;
}
.max-w-screen-lg {
max-width: 1024px;
}
.flex-1 {
flex: 1 1 0%;
}
@ -1228,6 +1254,10 @@ select {
flex-direction: column;
}
.flex-col-reverse {
flex-direction: column-reverse;
}
.flex-wrap {
flex-wrap: wrap;
}
@ -1264,6 +1294,10 @@ select {
gap: 0.25rem;
}
.gap-12 {
gap: 3rem;
}
.gap-16 {
gap: 4rem;
}
@ -1464,10 +1498,18 @@ select {
padding: 0.625rem;
}
.p-3 {
padding: 0.75rem;
}
.p-4 {
padding: 1rem;
}
.p-5 {
padding: 1.25rem;
}
.p-8 {
padding: 2rem;
}
@ -1517,10 +1559,31 @@ select {
padding-bottom: 2rem;
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.pb-10 {
padding-bottom: 2.5rem;
}
.pb-12 {
padding-bottom: 3rem;
}
.pb-2 {
padding-bottom: 0.5rem;
}
.pb-3 {
padding-bottom: 0.75rem;
}
.pb-6 {
padding-bottom: 1.5rem;
}
.pl-12 {
padding-left: 3rem;
}
@ -1561,6 +1624,10 @@ select {
padding-right: 2rem;
}
.pt-1 {
padding-top: 0.25rem;
}
.pt-20 {
padding-top: 5rem;
}
@ -1569,10 +1636,18 @@ select {
padding-top: 1rem;
}
.pt-5 {
padding-top: 1.25rem;
}
.pt-6 {
padding-top: 1.5rem;
}
.pt-9 {
padding-top: 2.25rem;
}
.text-left {
text-align: left;
}
@ -1594,6 +1669,11 @@ select {
line-height: 2rem;
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.text-base {
font-size: 1rem;
line-height: 1.5rem;
@ -1651,6 +1731,11 @@ 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));
@ -1671,6 +1756,11 @@ select {
color: rgb(249 250 251 / var(--tw-text-opacity));
}
.text-gray-500 {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
}
.text-gray-600 {
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity));
@ -2061,9 +2151,18 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
}
@media (min-width: 640px) {
.sm\:mb-1 {
margin-bottom: 0.25rem;
}
.sm\:flex {
display: flex;
}
.sm\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
@media (min-width: 768px) {
@ -2071,6 +2170,14 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
position: absolute;
}
.md\:mt-0 {
margin-top: 0px;
}
.md\:mt-24 {
margin-top: 6rem;
}
.md\:block {
display: block;
}
@ -2079,6 +2186,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
display: flex;
}
.md\:grid {
display: grid;
}
.md\:hidden {
display: none;
}
@ -2115,6 +2226,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
width: 50%;
}
.md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.md\:flex-row {
flex-direction: row;
}
@ -2131,6 +2246,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
gap: 0px;
}
.md\:gap-10 {
gap: 2.5rem;
}
.md\:gap-4 {
gap: 1rem;
}
@ -2159,6 +2278,15 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
padding-right: 12rem;
}
.md\:pt-9 {
padding-top: 2.25rem;
}
.md\:text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.md\:text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
@ -2198,18 +2326,22 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
bottom: 0.75rem;
}
.lg\:bottom-48 {
bottom: 12rem;
}
.lg\:right-0 {
right: 0px;
}
.lg\:mb-32 {
margin-bottom: 8rem;
}
.lg\:mb-2 {
margin-bottom: 0.5rem;
}
.lg\:mb-32 {
margin-bottom: 8rem;
}
.lg\:flex {
display: flex;
}
@ -2218,6 +2350,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
display: none;
}
.lg\:h-2\/3 {
height: 66.666667%;
}
.lg\:h-\[90vh\] {
height: 90vh;
}
@ -2234,6 +2370,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
width: 20%;
}
.lg\:w-11\/12 {
width: 91.666667%;
}
.lg\:w-2\/5 {
width: 40%;
}
@ -2242,6 +2382,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
width: 60%;
}
.lg\:w-80 {
width: 20rem;
}
.lg\:w-full {
width: 100%;
}
@ -2278,24 +2422,66 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
padding: 1rem;
}
.lg\:px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.lg\:py-0 {
padding-top: 0px;
padding-bottom: 0px;
}
.lg\:px-36 {
padding-left: 9rem;
padding-right: 9rem;
}
.lg\:pt-12 {
padding-top: 3rem;
}
.lg\:pt-14 {
padding-top: 3.5rem;
}
.lg\:pt-24 {
padding-top: 6rem;
}
.lg\:text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.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\:font-bold {
font-weight: 700;
}
.lg\:font-semibold {
font-weight: 600;
}
.lg\:shadow-none {
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
@ -2304,8 +2490,16 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
}
@media (min-width: 1280px) {
.xl\:right-56 {
right: 14rem;
}
.xl\:w-1\/4 {
width: 25%;
}
.xl\:w-9\/12 {
width: 75%;
}
}

View File

@ -22,6 +22,29 @@
* @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
* International Registered Trademark & Property of PrestaShop SA
*}
<div class=" mx-auto h-[50vh] flex flex-col justify-center ">
<h1 class="lg:font-semibold
font-bold
lg:text-4xl
md:text-2xl
text-xl
text-center">
Curate a Perfect Wardrobe with Our Custom-Made Apparel </h1>
<p class="lg:px-36
lg:text-xl
text-lg
font-medium
px-5
text-center
xl:w-9/12
mx-auto
pt-8">
Step into our world of custom-made luxury with Brooks Bingham, offering you Custom Business Shirts,
Custom Sport Jackets, Custom Made Tuxedos, and more. </p>
</div>
<div id="js-product-list" class="flex flex-col">
<div class="products flex flex-wrap">
{foreach from=$listing.products item="product"}
@ -41,3 +64,250 @@
</a>
</div>
</div>
i
<div class="relative
flex
mt-16
lg:h-2/3
mx-auto">
<img class="w-full scale-down"
src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/custom_page_banner_image.jpeg"
alt="Image">
<div class="absolute
xl:right-56
right-4
lg:bottom-48
bottom-9
text-[#000E2A]
text-left
lg:text-5xl
md:text-2xl
text-sm
lg:font-semibold
font-bold">
<h1> Because You Are Unique. </h1>
<h1> So Is Your Body… </h1>
</div>
</div>
<div class="flex flex-col-reverse md:flex-row items-center md:mt-24 mt-16 mx-auto">
<div class="mx-3 w-full md:w-1/2 text-center md:text-left">
<h1 class="font-bold lg:text-3xl md:text-2xl text-xl">
Custom Fit for your Comfort
</h1>
<p class="lg:text-xl font-medium pt-5">
Custom-made shirts and tuxedos are tailored just for you, offering a fit like no other.
Experience unmatched comfort and style with our tailored suits, celebrating your uniqueness.
</p>
<a class="all-product-link text-xl font-bold mt-8 flex items-center justify-center md:justify-start"
href="https://brooksbingham.com/17-custom-made-clothing">
Design Your Suit
<svg xmlns="http://www.w3.org/2000/svg"
class="icon stroke-gray-600 stroke-[3px] icon-tabler icon-tabler-chevron-right"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none"
d="M0 0h24v24H0z"
fill="none"/>
<path d="M9 6l6 6l-6 6" />
</svg>
</a>
</div>
<div class="w-full md:w-1/2">
<img class="image p-3 object-cover w-full"
src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/20-06-23%20Brooks%20Bingham%20Summer_992-min.jpg">
</div>
</div>
<div class="flex
mt-20
md:mt-24
md:flex-row
flex-col
items-center
mx-auto">
<div class="w-full md:w-1/2">
<img class="image
p-3
object-cover
w-full"
src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/20-06-23%20Brooks%20Bingham%20Summer_892-min.jpg">
</div>
<div class="mx-3 w-full md:w-1/2 text-center md:text-left">
<h1 class="font-bold
lg:text-3xl
md:text-2xl
text-xl">
Not Just Made-To-Order </h1>
<p class="lg:text-xl
font-medium
pt-5">
Our Custom Designed Suits are made to last. Enjoy a personalized, custom-fit experience that not only sets you apart
from ready-to-wear options but is also designed to be durable.</p>
<a class="all-product-link
text-xl
font-bold
mt-8
flex
items-center
justify-center
md:justify-start"
href="https://brooksbingham.com/17-custom-made-clothing"> Design Your Suit
<svg xmlns="http://www.w3.org/2000/svg"
class="icon
stroke-gray-600
stroke-[3px]
icon-tabler
icon-tabler-chevron-right"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none"
d="M0 0h24v24H0z"
fill="none"/>
<path d="M9 6l6 6l-6 6" /></svg>
</a>
</div>
</div>
<div class="mx-auto">
<div class="max-w-screen-lg
mx-auto
px-4
sm:px-6
flex
flex-col
lg:px-8
justify-between
my-20">
<div class="center pb-6">
<h2 class="text-4xl
font-bold
text-center">
Customize Your Apparel in 3 Steps: </h2>
</div>
<div class="mt-19">
<ul class="md:grid
md:grid-cols-3
md:gap-10
gap-12">
<li class="bg-gray-100
p-5
pb-10
text-center">
<div class="flex
flex-col
items-center">
<div>
<img class="w-full
lg:w-80
h-auto
pt-4
pb-3"
src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/20-06-23%20Brooks%20Bingham%20Summer_992-min.jpg" alt="Select the Fabric">
</div>
<div class="mt-4">
<h4 class="text-xl
leading-6
font-bold
text-gray-900
pb-2">
Select the Fabric </h4>
<p class="mt-3
font-semibold
text-lg
leading-6
text-gray-500">
Choose from a wide range of trendy fabrics updated every seasons </p>
</div>
</div>
</li>
<li class="bg-gray-100
p-5
pb-10
text-center
md:mt-0
mt-8">
<div class="flex
flex-col
items-center">
<div>
<img class="w-full
lg:w-80
h-auto
pt-4
pb-3"
src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/20-06-23%20Brooks%20Bingham%20Summer_892-min.jpg" alt="Finalize the Design">
</div>
<div class="mt-4">
<h4 class="text-xl
leading-6
font-bold
text-gray-900
pb-2">
Finalize the Design </h4>
<p class="mt-3
text-lg
font-semibold
leading-6
text-gray-500">
Personalize details like lapels, pockets, and lining through online platform. </p>
</div>
</div>
</li>
<li class="bg-gray-100
p-5 pb-10
text-center
md:mt-0
mt-8">
<div class="flex
flex-col
items-center">
<div>
<img class="w-full
lg:w-80
h-auto
pt-4
pb-3"
src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/20-06-23%20Brooks%20Bingham%20Summer_992-min.jpg" alt="Get Measured">
</div>
<div class="mt-4">
<h4 class="text-xl
leading-6
font-bold
text-gray-900
pb-2">
Get Measured </h4>
<p class="mt-3
text-lg
font-semibold
leading-6
text-gray-500">
Ensure your custom apparel fits you flawlessly by getting measured. </p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>