added carousel

package.json

@@ -17,6 +17,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.12.0",
+    "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "^6.15.0",
     "react-scroll-to-top": "^3.0.0"
   },

src/components/Header-section/Header-section.css

@@ -1,9 +1,9 @@
 .header-section {
   width: 100%;
   height: 100vh;
-  background: url(/src/assets/Images/red-house.png);
-  background-position: center center;
-  background-color: #262626;
+  /* background: url(/src/assets/Images/red-house.png); */
+  /* background-position: center center; */
+  /* background-color: #262626; */
   background-size: cover;
   position: relative;
   margin-bottom: 0;
@@ -44,7 +44,7 @@
 }
 
 .header-text {
-  position: relative;
+  /* position: relative; */
   left: 4%;
   width: 68%;
 }

src/components/Header-section/Header.jsx

@@ -1,19 +1,39 @@
 import "../Header-section/Header-section.css";
 import { Link } from "react-router-dom";
 import Navbar from "./Navbar";
+import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
+import { Carousel } from 'react-responsive-carousel';
+import carImg1 from "../../assets/Images/red-house.png"
+import carImg2 from "../../assets/Images/carousel2.png"
+import carImg3 from "../../assets/Images/carousel3.png"
 const Header = () => {
   return (
     <>
       <div className="header-section mb-[80px]">
         <Navbar />
+
         <div id="home"></div>
-        <div className="header-text top-[15%] sm:top-[23%]">
+        <Carousel autoPlay = {true} infiniteLoop = {true} showStatus = {false} showThumbs = {false} stopOnHover ={false} swipeable = {false} animationHandler="fade">
+          <div>
+            <img src={carImg1} />
+
+          </div>
+          <div>
+            <img src={carImg2} />
+
+          </div>
+          <div>
+            <img src={carImg3} />
+
+          </div>
+        </Carousel>
+        <div className="header-text top-[15%] sm:top-[23%] absolute">
           <h1>
             Welcome to <span>Rentalog</span>
           </h1>
           <p>
-            Rentalog is the ultimate solution for landlords looking to simplify
-            their rent management process. Keep track of your renters personal
+            Rentalog is the ultimate solution for landlords looking to simplify <br />
+            their rent management process. Keep track of your <br /> renters personal
             details, their payment history, and much more with ease.
           </p>
           <Link to="/register">