Merge pull request #274 from YooAshu/carousel

added carousel

package.json

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

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%;
 }
@@ -72,15 +72,19 @@
   .header-section {
     width: 100%;
     height: 100vh;
-    background: url(/src/assets/Images/red-house.png);
+    /* background: url(/src/assets/Images/red-house.png); */
     background-position: center center;
-    background-color: #262626;
+    /* background-color: #262626; */
     background-size: cover;
     position: relative;
   }
 
+  .header-desc {
+    font-weight: 500;
+  }
+
   .header-text {
-    position: relative;
+    /* position: relative; */
     left: 4%;
     width: 74%;
   }
@@ -141,4 +145,4 @@
     height: 44px;
     background: #1abc9c;
   }
-}
+}

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} className="h-screen object-cover"/>
+
+          </div>
+          <div>
+            <img src={carImg2} className="h-screen object-cover"/>
+
+          </div>
+          <div>
+            <img src={carImg3} className="h-screen object-cover"/>
+
+          </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
+          <p className="header-desc">
+            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">