added footer section and update code
This commit is contained in:
parent
bf9e25fdd3
commit
da3cce9f8f
7 changed files with 208 additions and 49 deletions
|
@ -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/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
50
awwwards_ss4/src/components/Footer.jsx
Normal file
50
awwwards_ss4/src/components/Footer.jsx
Normal 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
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
|
|
|
@ -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]">What’s 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>
|
||||
|
|
|
@ -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]">Everyone’s kit is different, and we’ve 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>
|
||||
|
|
Loading…
Add table
Reference in a new issue