added footer section and update code

This commit is contained in:
Juthatip McDevitt 2024-04-19 13:26:00 -05:00
parent bf9e25fdd3
commit da3cce9f8f
7 changed files with 208 additions and 49 deletions

View file

@ -1,3 +1,4 @@
import Footer from "./components/Footer"
import Home from "./components/Home"
import KitVideo from "./components/KitVideo"
import Products from "./components/Products"
@ -12,6 +13,7 @@ function App() {
<Shop/>
<KitVideo/>
<Products/>
<Footer/>
</>
)
}

View file

@ -0,0 +1,50 @@
import { FaArrowRight } from "react-icons/fa6";
const Footer = () => {
return (
<div className="w-full h-full flex flex-col bg-[#FAF3E8] px-5 sm:px-10">
<div className="border border-[#C20019] border-dashed -mt-60 md:-mt-32 xl:-mt-20 2xl:mt-20"></div>
<div className="flex flex-col lg:grid lg:grid-cols-2">
<div className="flex flex-col mt-10 text-[#C20019] pr-10">
<p className="mb-10 text-2xl">Join Kit World below, say hi <button className="underline hover:text-black">@kitskinkind</button>, or <button className="underline hover:text-black"> drop us an email.</button></p>
<form className="w-[30vh] md:w-[50vh] flex justify-between border border-[#C20019] py-2 px-4 rounded-full mb-10">
<input type="text" placeholder="Enter email" className=" bg-transparent placeholder-[#c20019] outline-none"/>
<button type="submit"><FaArrowRight className="font-semibold"/></button>
</form>
</div>
<div className="flex flex-col mt-10 text-[#c20019]">
<p className="flex items-center text-2xl gap-2">Also <FaArrowRight className="text-[#C20019] font-semibold text-sm"/></p>
<div className="text-2xl">
<a href="" className="underline hover:text-black">FAQs</a>
<a href="" className="underline hover:text-black pl-4">Privacy Policy</a>
<a href="" className="underline hover:text-black pl-4">Returns Policy</a>
<a href="" className="underline hover:text-black pl-4">Terms and Conditions</a>
</div>
</div>
</div>
<div className="flex justify-center mt-10">
<svg aria-label="Kit:" className="logo--full w-[100vw] mb-[2vw]" viewBox="0 0 833 374" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M736.903 325.809C736.903 316.28 739.721 306.964 745 299.04C750.28 291.116 757.784 284.941 766.564 281.294C775.344 277.647 785.005 276.693 794.325 278.552C803.646
280.411 812.207 285 818.927 291.739C825.647 298.477 830.223 307.063 832.077 316.41C833.931 325.757 832.979 335.445 829.343 344.249C825.706 353.053 819.547 360.578 811.646
365.873C803.744 371.167 794.455 373.994 784.952 373.994C778.614 374.096 772.319 372.919 766.444 370.534C760.568 368.149 755.23 364.604 750.748 360.109C746.266 355.614
742.731 350.262 740.352 344.369C737.974 338.477 736.801 332.165 736.903 325.809ZM736.903 172.343C736.903 162.813 739.721 153.497 745 145.574C750.28 137.65 757.784 131.473
766.564 127.826C775.344 124.179 785.005 123.225 794.325 125.085C803.646 126.944 812.207 131.533 818.927 138.271C825.647 145.01 830.223 153.596 832.077 162.942C833.931
172.289 832.979 181.977 829.343 190.781C825.706 199.586 819.547 207.112 811.646 212.406C803.744 217.701 794.455 220.526 784.952 220.526C778.614 220.629 772.319 219.453
766.444 217.068C760.568 214.683 755.23 211.137 750.748 206.643C746.266 202.148 742.731 196.795 740.352 190.903C737.974 185.011 736.801 178.699 736.903 172.343ZM630.401
298.304C630.401 318.412 638.724 329.225 656.885 329.225C675.045 329.225 683.369 318.412 683.369 287.491H719.688C719.688 350.376 689.233 373.994 629.456 373.994C560.22
373.994 539.128 341.555 539.128 297.261V162.953H490.134V126.056C545.56 126.056 574.502 84.2276 574.502 25.7052H630.401V126.056H705.501V162.953H630.401V298.304ZM376.727
48.3733C376.708 38.8207 379.516 29.4773 384.795 21.5254C390.074 13.5736 397.586 7.3715 406.382 3.70286C415.177 0.0342193 424.86 -0.936165 434.205 0.915951C443.55 2.76807
452.137 7.35908 458.88 14.1072C465.622 20.8553 470.216 29.4581 472.082 38.8258C473.947 48.1935 472.999 57.9047 469.358 66.732C465.717 75.5593 459.546 83.1056 451.627
88.4148C443.708 93.7239 434.397 96.5578 424.871 96.5578C418.525 96.6732 412.221 95.5066 406.334 93.1272C400.447 90.7478 395.098 87.204 390.605 82.7078C386.113 78.2116
382.569 72.8552 380.185 66.9566C377.801 61.0579 376.625 54.7373 376.727 48.3733ZM469.514 305.133C469.514 326.284 475.851 335.201 507.348 335.201V372.096H340.502V335.201C371.904
335.201 378.336 326.284 378.336 305.133V162.858H335.678V125.961H469.609L469.514 305.133ZM274.766 162.858L228.136 204.687L288.007 311.962C297.466 329.129 302.195 333.113 321.774
334.536V372.476H172.71V334.536C186.425 334.536 193.802 329.129 193.802 321.257C193.802 316.894 192.762 314.428 186.898 303.615L164.292 261.786L128.539 293.75V305.038C128.539
326.189 136.39 334.536 154.077 334.536V372.476H0V335.579C31.4018 335.579 37.8336 326.664 37.8336 305.512V62.9806H0V26.0838H129.012V244.239L219.245
163.521H171.197V126.625H316.951V163.521L274.766 162.858Z" fill="#C20019"></path>
</svg>
</div>
</div>
)
}
export default Footer

View file

@ -30,7 +30,7 @@ const Home = () => {
<>
<div className="w-full h-screen overflow-hidden">
<div className="w-full bg-[#C20019] absolute z-50">
<motion.p className="text-white text-end" variants={textAnimation } initial="initial" animate="animate">Free shipping on all orders over $50.</motion.p>
<motion.p className="text-white text-end text-sm sm:text-md" variants={textAnimation } initial="initial" animate="animate">Free shipping on all orders over $50.</motion.p>
</div>
<div className="w-full flex justify-between absolute z-50 px-5 md:px-10 py-10 md:py-14">
<div className='flex flex-col'>
@ -69,7 +69,7 @@ const Home = () => {
</svg>
<div className="flex flex-col justify-start items-start mb-14 w-[100vw] md:w-[45vw]">
<h2 className="text-[5vw] md:text-[3.5vw] lg:text-[2.5vw] leading-[5.5vw] md:leading-[3.5vw] lg:leading-[3vw] text-white mb-4">MODERN FORMULAS FOR ALL SKINKIND.</h2>
<button className="uppercase px-8 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white hover:bg-transparent hover:text-[#C20019]">shop all</button>
<button className="uppercase px-8 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white hover:bg-transparent hover:text-[#C20019] duration-300">shop all</button>
</div>
</div>
</div>
@ -99,7 +99,7 @@ const Home = () => {
</svg>
<div className="flex flex-col justify-start items-start mb-14 w-[100vw] md:w-[45vw]">
<h2 className="text-[5vw] md:text-[3.5vw] lg:text-[2.5vw] leading-[5.5vw] md:leading-[3.5vw] lg:leading-[3vw] text-white mb-4">NEW IN: A REMEDY FOR BUSY, OVERWORKED BODIES.</h2>
<button className="uppercase px-8 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white hover:bg-transparent hover:text-[#C20019]">shop gua sha body tool</button>
<button className="uppercase px-8 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white hover:bg-transparent hover:text-[#C20019] duration-300">shop gua sha body tool</button>
</div>
</div>
</div>
@ -129,7 +129,7 @@ const Home = () => {
</svg>
<div className="flex flex-col justify-start items-start mb-14 w-[100vw] md:w-[45vw]">
<h2 className="text-[5vw] md:text-[3.5vw] lg:text-[2.5vw] leading-[5.5vw] md:leading-[3.5vw] lg:leading-[3vw] text-white mb-4">UNWIND WITH KIT</h2>
<button className="uppercase px-8 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white hover:bg-transparent hover:text-[#C20019]">shop unwind routine</button>
<button className="uppercase px-8 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white hover:bg-transparent hover:text-[#C20019] duration-300">shop unwind routine</button>
</div>
</div>
</div>

View file

@ -7,7 +7,7 @@ const KitVideo = () => {
<div className="w-full flex absolute px-5 sm:px-10">
<h1 className="mb-10 text-white">
<p className="w-[100vw] xl:w-[40vw] 2xl:w-[35vw] text-[32px] md:text-[36px] xl:text-[3vw] 2xl:text-[2.5vw]">For the good kind of stretch.</p>
<button className="uppercase px-10 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white hover:bg-transparent hover:text-[#C20019] mt-5">shop the gua sha body tool</button>
<button className="uppercase px-10 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white hover:bg-transparent hover:text-[#C20019] mt-5 duration-300">shop the gua sha body tool</button>
</h1>
</div>
</div>

View file

@ -1,11 +1,11 @@
const Navbar = () => {
return (
<div className='my-1'>
<div className="hidden md:flex gap-12 uppercase px-6 py-4 rounded-full backdrop-blur-md text-white text-sm md:text-lg">
<a href="">shop</a>
<a href="">ethos</a>
<a href="">apothecary</a>
<a href="">journal</a>
<div className="hidden md:flex gap-5 uppercase border-transparent rounded-full backdrop-blur-md text-white text-sm md:text-lg">
<a href="" className="py-3 px-6 hover:bg-[#FBF8F4] hover:text-[#c20019] rounded-full duration-300">shop</a>
<a href="" className="py-3 px-6 hover:bg-[#FBF8F4] hover:text-[#c20019] rounded-full duration-300">ethos</a>
<a href="" className="py-3 px-6 hover:bg-[#FBF8F4] hover:text-[#c20019] rounded-full duration-300">apothecary</a>
<a href="" className="py-3 px-6 hover:bg-[#FBF8F4] hover:text-[#c20019] rounded-full duration-300">journal</a>
</div>
</div>
)

View file

@ -14,22 +14,29 @@ const Products = () => {
slidesToScroll: 3.5,
initialSlide: 0,
responsive: [
{
breakpoint: 1250,
settings: {
slidesToShow: 2.5,
slidesToScroll: 2.5,
infinite: false,
dots: false
{
breakpoint: 1250,
settings: {
slidesToShow: 2.5,
slidesToScroll: 2.5,
infinite: false,
dots: false
}
},
{
breakpoint: 670,
settings: {
slidesToShow: 1.5,
slidesToScroll: 1.5
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1.15,
slidesToScroll: 1.15
}
}
},
{
breakpoint: 560,
settings: {
slidesToShow: 1.5,
slidesToScroll: 1.5
}
}
]
};
@ -40,7 +47,7 @@ const Products = () => {
<div className="w-[100vw] flex-col md:flex md:flex-row justify-between">
<p className="w-[90vw] sm:w-[80vw] md:w-[65vw] text-[12vw] sm:text-[5vw] md:text-[4.5vw] leading-[12.5vw] sm:leading-[5.5vw] md:leading-[5vw] tracking-tighter text-[#C20019]">Whats in your kit? </p>
<div className="flex flex-col justify-start items-start md:items-end w-[90vw] md:w-[35vw] pr-20 mt-5 md:mt-0">
<button className="uppercase px-10 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white hover:bg-transparent hover:text-[#C20019]">shop all</button>
<button className="uppercase px-10 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white hover:bg-transparent hover:text-[#C20019] duration-300">shop all</button>
</div>
</div>
</div>
@ -64,7 +71,93 @@ const Products = () => {
<p className="uppercase text-sm text-[#B9B8B7]">30ML / 1.01FL. OZ</p>
<p className="mb-5 uppercase text-sm">$42</p>
</div>
{/* Need 9 more*/}
<div className="w-full flex flex-col justify-center items-center text-center hover:bg-[#FBF8F4] hover:rounded-3xl">
<div className="relative overflow-hidden z-50">
<div className="transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer">
<img src="https://kitskinkind.com.au/cdn/shop/files/F_A.C.E_Serum_front_SHOP.jpg" alt="" className="w-[100vw] h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-1"/>
</div>
<div className="absolute inset-0 -z-[1] px-1">
<div className="bg-[#FBF8F4] rounded-3xl">
<button className="w-full h-full flex justify-center items-end py-10 absolute capitalize">
<span className="w-[100%] mx-10 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white">add to cart</span>
</button>
<video src="https://cdn.shopify.com/videos/c/vp/70c0e1ac978a4c5ebc458cba53d85d8e/70c0e1ac978a4c5ebc458cba53d85d8e.HD-1080p-7.2Mbps.mp4" loop muted autoPlay className="w-full h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-3 py-3"></video>
</div>
</div>
</div>
<p className="mt-5 uppercase text-sm">(F)A.C.E serum</p>
<p className="uppercase text-sm text-[#B9B8B7]">30ML / 1.01FL. OZ</p>
<p className="mb-5 uppercase text-sm">$40</p>
</div>
<div className="w-full flex flex-col justify-center items-center text-center hover:bg-[#FBF8F4] hover:rounded-3xl">
<div className="relative overflow-hidden z-50">
<div className="transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer">
<img src="https://kitskinkind.com.au/cdn/shop/files/body_Brush_SHOP.jpg" alt="" className="w-[100vw] h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-1"/>
</div>
<div className="absolute inset-0 -z-[1] px-1">
<div className="bg-[#FBF8F4] rounded-3xl">
<button className="w-full h-full flex justify-center items-end py-10 absolute capitalize">
<span className="w-[100%] mx-10 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white">add to cart</span>
</button>
<video src="https://kitskinkind.com.au/cdn/shop/files/body_Brush_2_HOVER.jpg" loop muted autoPlay className="w-full h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-3 py-3"></video>
</div>
</div>
</div>
<p className="mt-5 uppercase text-sm mb-6">all body dry brush</p>
<p className="mb-5 uppercase text-sm">$26</p>
</div>
<div className="w-full flex flex-col justify-center items-center text-center hover:bg-[#FBF8F4] hover:rounded-3xl">
<div className="relative overflow-hidden z-50">
<div className="transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer">
<img src="https://kitskinkind.com.au/cdn/shop/files/Body_Nutrition_Lotion_Front_SHOP.jpg" alt="" className="w-[100vw] h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-1"/>
</div>
<div className="absolute inset-0 -z-[1] px-1">
<div className="bg-[#FBF8F4] rounded-3xl">
<button className="w-full h-full flex justify-center items-end py-10 absolute capitalize">
<span className="w-[100%] mx-10 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white">add to cart</span>
</button>
<video src="https://cdn.shopify.com/videos/c/vp/b96fb62905ce4e5db802c596ae49f407/b96fb62905ce4e5db802c596ae49f407.HD-1080p-7.2Mbps.mp4" loop muted autoPlay className="w-full h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-3 py-3"></video>
</div>
</div>
</div>
<p className="mt-5 uppercase text-sm">Body Nutrition Lotion</p>
<p className="uppercase text-sm text-[#B9B8B7]">145ML / 4.9 FL. OZ</p>
<p className="mb-5 uppercase text-sm">$36</p>
</div>
<div className="w-full flex flex-col justify-center items-center text-center hover:bg-[#FBF8F4] hover:rounded-3xl">
<div className="relative overflow-hidden z-50">
<div className="transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer">
<img src="https://kitskinkind.com.au/cdn/shop/files/GOOD_NIGHT_BALM_THUMB_6ccbc9aa-4e3a-4c63-ae3a-6cc53861962b.jpg" alt="" className="w-[100vw] h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-1"/>
</div>
<div className="absolute inset-0 -z-[1] px-1">
<div className="bg-[#FBF8F4] rounded-3xl">
<button className="w-full h-full flex justify-center items-end py-10 absolute capitalize">
<span className="w-[100%] mx-10 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white">add to cart</span>
</button>
<video src="https://cdn.shopify.com/videos/c/vp/b5d7a85e63ea43449bfcf0862929b19a/b5d7a85e63ea43449bfcf0862929b19a.HD-1080p-7.2Mbps-22274279.mp4" loop muted autoPlay className="w-full h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-3 py-3"></video>
</div>
</div>
</div>
<p className="mt-5 uppercase text-sm mb-6">Good night balm</p>
<p className="mb-5 uppercase text-sm">$48</p>
</div>
<div className="w-full flex flex-col justify-center items-center text-center hover:bg-[#FBF8F4] hover:rounded-3xl">
<div className="relative overflow-hidden z-50">
<div className="transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer">
<img src="https://kitskinkind.com.au/cdn/shop/files/Gua_Sha_SHOP.jpg" alt="" className="w-[100vw] h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-1"/>
</div>
<div className="absolute inset-0 -z-[1] px-1">
<div className="bg-[#FBF8F4] rounded-3xl">
<button className="w-full h-full flex justify-center items-end py-10 absolute capitalize">
<span className="w-[100%] mx-10 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white">add to cart</span>
</button>
<video src="https://cdn.shopify.com/videos/c/vp/6b5e74042cda467ebed00ca1db370501/6b5e74042cda467ebed00ca1db370501.HD-1080p-7.2Mbps-25489853.mp4" loop muted autoPlay className="w-full h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-3 py-3"></video>
</div>
</div>
</div>
<p className="mt-5 uppercase text-sm mb-6">gua sha facial tool</p>
<p className="mb-5 uppercase text-sm">$35</p>
</div>
</Slider>
</div>
</div>

View file

@ -18,22 +18,36 @@ const Shop = () => {
slidesToScroll: 3.5,
initialSlide: 0,
responsive: [
{
breakpoint: 1250,
settings: {
slidesToShow: 2.5,
slidesToScroll: 2.5,
infinite: false,
dots: false
{
breakpoint: 1250,
settings: {
slidesToShow: 2.5,
slidesToScroll: 2.5,
infinite: false,
dots: false
}
},
{
breakpoint: 670,
settings: {
slidesToShow: 1.5,
slidesToScroll: 1.5
}
},
{
breakpoint: 560,
settings: {
slidesToShow: 1.25,
slidesToScroll: 1.25
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1.15,
slidesToScroll: 1.15
}
}
},
{
breakpoint: 560,
settings: {
slidesToShow: 1.5,
slidesToScroll: 1.5
}
}
]
};
@ -43,7 +57,7 @@ const Shop = () => {
<div className="w-[100vw] flex-col md:flex md:flex-row justify-between">
<p className="w-[90vw] sm:w-[80vw] md:w-[65vw] text-[12vw] sm:text-[5vw] md:text-[4.5vw] leading-[12.5vw] sm:leading-[5.5vw] md:leading-[5vw] tracking-tighter text-[#C20019]">Everyones kit is different, and weve got a kit for everyone. </p>
<div className="flex flex-col justify-start items-start md:items-end w-[90vw] md:w-[35vw] pr-20 mt-5 md:mt-0">
<button className="uppercase px-10 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white hover:bg-transparent hover:text-[#C20019]">shop all</button>
<button className="uppercase px-10 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white hover:bg-transparent hover:text-[#C20019] duration-300">shop all</button>
</div>
</div>
</div>
@ -57,7 +71,7 @@ const Shop = () => {
<div className="absolute inset-0 -z-[1] px-1">
<div className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1 bg-[#C20019]">
<p className="w-[100%] h-[100%] flex justify-between items-center px-5 md:px-10 text-white capitalize tracking-tighter">
<span className="text-[5vw] md:text-[2vw]">thank you kit</span>
<span className="text-[3.5vw] sm:text-[3vw] md:text-[2vw]">thank you kit</span>
<span>01</span>
</p>
</div>
@ -71,7 +85,7 @@ const Shop = () => {
<div className="absolute inset-0 -z-[1] px-1">
<div className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1 bg-[#C20019]">
<p className="w-[100%] h-[100%] flex justify-between items-center px-10 text-white capitalize tracking-tighter">
<span className="text-[5vw] md:text-[2vw]">Best sellers</span>
<span className="text-[3.5vw] sm:text-[3vw] md:text-[2vw]">Best sellers</span>
<span>23</span>
</p>
</div>
@ -85,7 +99,7 @@ const Shop = () => {
<div className="absolute inset-0 -z-[1] px-1">
<div className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1 bg-[#C20019]">
<p className="w-[100%] h-[100%] flex justify-between items-center px-10 text-white capitalize tracking-tighter">
<span className="text-[5vw] md:text-[2vw]">unwind</span>
<span className="text-[3.5vw] sm:text-[3vw] md:text-[2vw]">unwind</span>
<span>05</span>
</p>
</div>
@ -99,7 +113,7 @@ const Shop = () => {
<div className="absolute inset-0 -z-[1] px-1">
<div className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1 bg-[#C20019]">
<p className="w-[100%] h-[100%] flex justify-between items-center px-10 text-white capitalize tracking-tighter">
<span className="text-[5vw] md:text-[2vw]">treat</span>
<span className="text-[3.5vw] sm:text-[3vw] md:text-[2vw]">treat</span>
<span>07</span>
</p>
</div>
@ -113,7 +127,7 @@ const Shop = () => {
<div className="absolute inset-0 -z-[1] px-1">
<div className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1 bg-[#C20019]">
<p className="w-[100%] h-[100%] flex justify-between items-center px-10 text-white capitalize tracking-tighter">
<span className="text-[5vw] md:text-[2vw]">Body</span>
<span className="text-[3.5vw] sm:text-[3vw] md:text-[2vw]">Body</span>
<span>09</span>
</p>
</div>
@ -127,7 +141,7 @@ const Shop = () => {
<div className="absolute inset-0 -z-[1] px-1">
<div className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1 bg-[#C20019]">
<p className="w-[100%] h-[100%] flex justify-between items-center px-10 text-white capitalize tracking-tighter">
<span className="text-[5vw] md:text-[2vw]">face</span>
<span className="text-[3.5vw] sm:text-[3vw] md:text-[2vw]">face</span>
<span>10</span>
</p>
</div>