feat:add measurement cards

measurement-page
sayalip 2024-06-18 12:13:08 +05:30
parent a8b692828b
commit e70f680b1d
2 changed files with 172 additions and 55 deletions

View File

@ -58,65 +58,179 @@
</section> </section>
</section> </section>
<div class="mx-auto <div class="mx-auto my-24 flex items-center relative">
mb-24 <img src="/themes/elegance/assets/images/img2.jpg"
flex class="h-full w-full">
items-center <div class="absolute xl:px-40 lg:px-20 md:px-12 px-2">
relative"> <h1 class="xl:text-6xl lg:text-4xl md:text-3xl text-sm lg:font-bold font-bold">
<img src="/themes/elegance/assets/images/img2.jpg" How to measure
class="h-full w-full"> </h1>
<div class="absolute <p class="lg:text-xl md:text-lg text-xs lg:font-semibold font-medium lg:w-96 md:w-80 w-36 lg:pt-4 pt-2">
xl:px-40 Ten minutes is all it should take if you follow our simple step by step directions.
lg:px-20 </p>
md:px-12
px-2">
<h1 class="xl:text-6xl
lg:text-4xl
md:text-3xl
text-sm
lg:font-bold
font-bold">How to measure </h1>
<p class="lg:text-xl
md:text-lg
text-xs
lg:font-semibold
font-base
lg:w-96
md:w-80
w-36
lg:pt-4
pt-2">Ten minutes is all it should take if you follow our simple step by step directions.</p>
</div> </div>
</div> </div>
<div class="mx-auto <div class="mx-auto lg:my-60 md:my-28 my-24 flex flex-col items-center">
lg:my-52 <h1 class="font-bold lg:text-4xl md:text-xl text-lg font-bold text-center">
md:my-28 Our precise measuring system ensures your custom garment requirements are perfected.
my-24 </h1>
flex <p class="lg:pt-12 md:pt-9 pt-6 lg:w-8/12 w-10/12 text-center lg:text-xl md:text-lg
flex-col text-sm lg:font-semibold font-medium">
items-center"> Your measurements are utilized by Brooks Bingham to create a tailored profile using advanced technology.
<h1 class="font-bold
lg:text-4xl
md:text-xl
text-lg
font-bold
text-center">Our precise measuring system ensures your custom garment requirements are perfected.</h1>
<p class="lg:pt-12
md:pt-9
pt-6
lg:w-8/12
w-10/12
text-center
lg:text-xl
md:text-lg
text-sm
lg:font-semibold
font-medium">Your measurements are utilized by Brooks Bingham to create a tailored profile using advanced technology.
Each model undergoes thorough review and adjustment by our master tailors in our design studio. Each model undergoes thorough review and adjustment by our master tailors in our design studio.
Just follow each step, and your measurements will be perfect.</p> Just follow each step, and your measurements will be perfect.
</p>
</div>
</div> <div class="flex md:flex-row justify-start mx-4 mt-24 mb-20 flex-col">
<div class="xl:w-1/2 lg:w-3/5 w-full">
<img src="/themes/elegance/assets/images/img3.jpg"
class="image object-cover">
</div>
<div class="mx-4 w-full text-center md:text-left">
<h1 class="font-bold xl:text-3xl lg:text-xl text-lg">
Waist Circumference
</h1>
<p class="md:font-medium font-base xl:text-lg lg:text-sm text-xs pt-4">
Place soft ruler along the customer's waist along the amount of a week,
two fingers in the soft ruler shall prevail, the combined point on the right side.
(For convex belly or fat customers, we should let the customer take a breath to record the data size)
(If it is all rubber waist, please subtract 10-15cm in the net body data) 
</p>
<h3 class="font-medium xl:text-lg lg:text-lg text-xs xl:pt-12 pt-4">
Suggested Measurement: >40 inches (120cm)
</h3>
</div>
</div>
<div class="flex md:flex-row justify-start mx-4 mb-20 flex-col">
<div class="xl:w-1/2 lg:w-3/5 w-full">
<img src="/themes/elegance/assets/images/img3.jpg"
class="image object-cover">
</div>
<div class="mx-4 w-full text-center md:text-left">
<h1 class="font-bold xl:text-3xl lg:text-xl text-lg">
Hip Circumference
</h1>
<p class="md:font-medium font-base xl:text-lg lg:text-sm text-xs pt-4">
When measuring, let the customer's stand up and take out all the things of the pocket.
Half squat, find the most full part of the hip. Measure horizontally along the full ump
for a round and can add 1-2cm to that basis data.
</p>
<h3 class="font-medium xl:text-lg lg:text-lg text-xs xl:pt-12 pt-4">
Suggested Measurement: 37-39 inches (94-99cm)
</h3>
</div>
</div>
<div class="flex md:flex-row justify-start mx-4 mb-20 flex-col">
<div class="xl:w-1/2 lg:w-3/5 w-full">
<img src="/themes/elegance/assets/images/img3.jpg"
class="image object-cover">
</div>
<div class="mx-4 w-full text-center md:text-left">
<h1 class="font-bold xl:text-3xl lg:text-xl text-lg">
Thigh Circumference
</h1>
<p class="md:font-medium font-base xl:text-lg lg:text-sm text-xs pt-4">
Horizontally measure the fullest part of the thigh horizontally for a round,
and two fingers in the soft ruler shall prevail, neither loose nor tight,
(the joint point is on the right side).
</p>
<h3 class="font-semibold xl:text-lg lg:text-lg text-xs xl:pt-12 pt-4">
Suggested Measurement: 20-24 inches (51-61cm)
</h3>
</div>
</div>
<div class="flex md:flex-row justify-start mx-4 mb-20 flex-col">
<div class="xl:w-1/2 lg:w-3/5 w-full">
<img src="/themes/elegance/assets/images/img3.jpg"
class="image object-cover">
</div>
<div class="mx-4 w-full text-center md:text-left">
<h1 class="font-bold xl:text-3xl lg:text-xl text-lg">
Crotch
</h1>
<p class="md:font-medium font-base xl:text-lg lg:text-sm text-xs pt-4">
Soft rule from the waist high point through the crotch to the waist high point,
not loose or tight. (To have the action of lifting the ruler)
</p>
<h3 class="font-semibold xl:text-lg lg:text-lg text-xs xl:pt-12 pt-4">
Suggested Measurement: 34-36 inches (86-91cm)
</h3>
</div>
</div>
<div class="flex md:flex-row justify-start mx-4 mb-20 flex-col">
<div class="xl:w-1/2 lg:w-3/5 w-full">
<img src="/themes/elegance/assets/images/img3.jpg"
class="image object-cover">
</div>
<div class="mx-4 w-full text-center md:text-left">
<h1 class="font-bold xl:text-3xl lg:text-xl text-lg">
Knee Circumference
</h1>
<p class="md:font-medium font-base xl:text-lg lg:text-sm text-xs pt-4">
Measure horizontally around the knee for a week, the man put 1 finger,
the woman does not put the fingers. (When measuring knee circumference,
certain contrast measures crus circumference, the size of knee circumference
and crus circumference which larger we take the size of which part)
</p>
<h3 class="font-semibold xl:text-lg lg:text-lg text-xs xl:pt-12 pt-4">
Suggested Measurement: 15-17 inches (38-43cm)
</h3>
</div>
</div>
<div class="flex md:flex-row justify-start mx-4 mb-20 flex-col">
<div class="xl:w-1/2 lg:w-3/5 w-full">
<img src="/themes/elegance/assets/images/img3.jpg"
class="image object-cover">
</div>
<div class="mx-4 w-full text-justify md:text-left">
<h1 class="font-bold xl:text-3xl lg:text-xl text-lg md:text-left text-center">
Bottom Circumference
</h1>
<p class="md:font-medium font-base xl:text-lg lg:text-sm text-xs pt-3">
Adjust according to the customer's request.
Measuring for the finished clothes (ready- wear-size):<br>
1.Female straight jeans: bottom circumference net size minus 2 cm<br>
2.Boot cut jeans: bottom circumference size add 4-5 cm <br>
3.Wide-leg jeans: bottom circumference net size minus 3-4 cm <br>
4.Flare jeans: bottom circumference net size plus 5 cm <br>
5.Pants: measure tightly 
</p>
<h3 class="font-semibold xl:text-lg lg:text-lg text-xs xl:pt-8 pt-4 md:text-left text-center">
Suggested Measurement: 15-17 inches (38-43cm)
</h3>
</div>
</div>
<div class="flex md:flex-row justify-start mx-4 mb-20 flex-col">
<div class="xl:w-1/2 lg:w-3/5 w-full">
<img src="/themes/elegance/assets/images/img3.jpg"
class="image object-cover">
</div>
<div class="mx-4 w-full text-center md:text-left">
<h1 class="font-bold xl:text-3xl lg:text-xl text-lg">
Length Circumference
</h1>
<p class="md:font-medium font-base xl:text-lg lg:text-sm text-xs pt-4">
From the waist, along the side seam of the pants, the normal data is the measurement minus 1-2 cm.
</p>
<h3 class="font-semibold xl:text-lg lg:text-lg text-xs xl:pt-12 pt-4">
Suggested Measurement: 30-36 inches (76-91cm)
</h3>
</div>
</div>
{/block} {/block}

View File

@ -120,6 +120,9 @@
</div> </div>
<div class="lg:mb-32 mb-20" > <div class="lg:mb-32 mb-20" >
<h1 class="text-2xl font-bold text-center">Design and Visualize what you need</h1> <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> <h3 class="text-lg font-semibold text-center mb-12">Choose what looks good on you </h3>