Popular responsive

package.json

@@ -13,7 +13,9 @@
     "axios": "^1.6.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.21.3"
+    "react-router-dom": "^6.21.3",
+    "react-slick": "^0.30.2",
+    "slick-carousel": "^1.8.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.43",

src/Components/Hero.jsx

@@ -1,12 +1,43 @@
 import React, { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
 import HeroImg from "../assets/hero2.jpg";
+import HeroImg2 from "../assets/hero1.jpg";
+import HeroImg3 from "../assets/Hero.jpg";
 import arrow from "../assets/arrow.png";
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
 const Hero = () => {
+  const data = [
+    {
+      img:HeroImg,
+      index: 1,
+    },
+    {
+      img:HeroImg2 ,
+      index: 2,
+    },
+    {
+      img: HeroImg3,
+      index: 3,
+    },
+  ];
+
+  var settings = {
+    dots: true,
+    infinite: true,
+    speed: 1500,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    autoplay: true,
+    autoplaySpeed: 2500,
+    focusOnSelect: true,
+
+  };
   return (
     <div className="w-full z-10 relative">
-      <div className="flex items-center flex-col">
-        <p className="text-sm md:text-base lg:text-lg font-Poppins text-center text-black pt-10 md:pt-20 absolute top-28 left-0 md:left-[250px]">
+      <div className="flex z-20 relative items-center flex-col">
+        <p className="text-sm md:text-base lg:text-lg   font-Poppins text-center text-black pt-10 md:pt-20 absolute top-28 left-0 md:left-[250px]">
           SPRING/SUMMER COLLECTION 2021
         </p>
         <p className="text-2xl md:text-4xl lg:text-5xl font-Poppins text-center text-black pt-16 md:pt-32 absolute top-32 left-0 md:left-[250px]">
@@ -20,7 +51,27 @@ const Hero = () => {
         </button>
       </div>
 
-      <img src={HeroImg} alt="image" />
+      {/* <img src={HeroImg} alt="image" /> */}
+      <Slider {...settings}>
+       {/* <Slider {...settings}> */}
+
+        {data.map((d, index) => (
+          <div
+            key={index}
+            className="bg-white z-0  shadow-md gap-2 p-1  text-black"
+          >
+            <div className=" mt-14 rounded-t-xl px-16 flex justify-center p-2 items-center  ">
+              <img src={d.img} className=" h-96 w-full" alt="kkk" />
+            </div>
+            {/* <div className="flex-col flex bg-white font-semibold justify-center items-center gap-2 p-4 ">
+                <p className="text-lg  font-semibold ">{d.Name}</p>
+                <p>{d.description}</p>
+              </div> */}
+          </div>
+        ))}
+        {/* </Slider> */}
+        </Slider>
+
     </div>
   );
 };

src/Components/Popular.jsx

@@ -9,7 +9,7 @@ const Popular = () => {
         Popular In Women
       </h1>
       <hr className="w-[200px] h-2 bg-gray-400 rounded-xl" />
-      <div className="flex">
+      <div className="sm:flex">
         {dataProduct.map((item) => {
           return <Item data={item} key={item.id} />;
         })}

src/index.css

@@ -1,3 +1,6 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+.slick-slide > div{
+    margin : 0 10px
+}