From da3cce9f8f9e56de11db6b20cb65d4da3b9ef94c Mon Sep 17 00:00:00 2001
From: Juthatip McDevitt <jtp@mcdevitt.tech>
Date: Fri, 19 Apr 2024 13:26:00 -0500
Subject: [PATCH] added footer section and update code

---
 awwwards_ss4/src/App.jsx                 |   2 +
 awwwards_ss4/src/components/Footer.jsx   |  50 +++++++++
 awwwards_ss4/src/components/Home.jsx     |   8 +-
 awwwards_ss4/src/components/KitVideo.jsx |   2 +-
 awwwards_ss4/src/components/Navbar.jsx   |  10 +-
 awwwards_ss4/src/components/Products.jsx | 127 ++++++++++++++++++++---
 awwwards_ss4/src/components/Shop.jsx     |  58 +++++++----
 7 files changed, 208 insertions(+), 49 deletions(-)
 create mode 100644 awwwards_ss4/src/components/Footer.jsx

diff --git a/awwwards_ss4/src/App.jsx b/awwwards_ss4/src/App.jsx
index 79e044b..718a80e 100644
--- a/awwwards_ss4/src/App.jsx
+++ b/awwwards_ss4/src/App.jsx
@@ -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/>
     </>
   )
 }
diff --git a/awwwards_ss4/src/components/Footer.jsx b/awwwards_ss4/src/components/Footer.jsx
new file mode 100644
index 0000000..e679405
--- /dev/null
+++ b/awwwards_ss4/src/components/Footer.jsx
@@ -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
\ No newline at end of file
diff --git a/awwwards_ss4/src/components/Home.jsx b/awwwards_ss4/src/components/Home.jsx
index cb1d125..ef05895 100644
--- a/awwwards_ss4/src/components/Home.jsx
+++ b/awwwards_ss4/src/components/Home.jsx
@@ -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>
diff --git a/awwwards_ss4/src/components/KitVideo.jsx b/awwwards_ss4/src/components/KitVideo.jsx
index a8931ba..8db651c 100644
--- a/awwwards_ss4/src/components/KitVideo.jsx
+++ b/awwwards_ss4/src/components/KitVideo.jsx
@@ -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>
diff --git a/awwwards_ss4/src/components/Navbar.jsx b/awwwards_ss4/src/components/Navbar.jsx
index d08090a..fbdef3d 100644
--- a/awwwards_ss4/src/components/Navbar.jsx
+++ b/awwwards_ss4/src/components/Navbar.jsx
@@ -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>
   )
diff --git a/awwwards_ss4/src/components/Products.jsx b/awwwards_ss4/src/components/Products.jsx
index 2b44d55..281b78c 100644
--- a/awwwards_ss4/src/components/Products.jsx
+++ b/awwwards_ss4/src/components/Products.jsx
@@ -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>
diff --git a/awwwards_ss4/src/components/Shop.jsx b/awwwards_ss4/src/components/Shop.jsx
index aca96a0..2b4ccfb 100644
--- a/awwwards_ss4/src/components/Shop.jsx
+++ b/awwwards_ss4/src/components/Shop.jsx
@@ -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>