FIX: Created Carousel and fix the space above carousel

package.json

@@ -18,6 +18,7 @@
     "pure-react-carousel": "^1.30.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.7.1",
     "react-multi-carousel": "^2.8.2",
     "react-responsive-carousel": "^3.2.23"
   },

src/App.jsx

@@ -3,6 +3,7 @@ import { useState } from "react";
 import "./App.css";
 import { Maintenance } from "./pages/Maintenance/Maintenance";
 import { Navbar } from "./components/Navbar/Navbar";
+import { HeaderCarousel } from "./components/HeaderCarousel/HeaderCarousel";
 
 // import Form from "./pages/Form/Form";
 
@@ -11,7 +12,8 @@ function App() {
     <>
     <Navbar/>
     <Maintenance/>
-      {/* <Form /> */}
+    {/* <Form /> */}
+    {/* <HeaderCarousel /> */}
     </>
   );
 }

src/components/HeaderCarousel/HeaderCarousel.css

@@ -0,0 +1,73 @@
+.carousel-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 2rem 4rem;
+}
+
+.carousel {
+    height: 22rem;
+    width: 65rem;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+
+.carousel-image {
+    object-fit: cover;
+}
+
+.carousel-btn {
+    background-color: rgba(226, 226, 226, 0.495);
+    color: rgb(244, 7, 7);
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    align-items: center;
+}
+
+.carousel-btn:hover {
+    background-color: rgb(255, 255, 255);
+    transition: .3s;
+}
+
+.icon {
+    align-items: center;
+    margin: 0 auto;
+} 
+
+.prev {
+    position: absolute;
+    left: 0;
+    top: 50;
+}
+
+.next {
+    position: absolute;
+    right: 0;
+    top: 50;
+}
+
+@media only screen and (max-width: 500px) {
+    .carousel-wrapper {
+        margin: 1rem 2rem;
+    }
+
+    .carousel {
+        height: 20rem;
+        width: 50rem;
+    }
+}
+
+@media only screen and (max-width: 768px) {
+    .carousel-wrapper {
+        margin: 2rem 2rem;
+    }
+
+    .carousel {
+        width: 80rem;
+    }
+
+}

src/components/HeaderCarousel/HeaderCarousel.jsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from "react";
+import "./HeaderCarousel.css";
+
+import { FcPrevious } from "react-icons/fc";
+import { FcNext } from "react-icons/fc";
+
+import image1 from "../../images/header/image1.jpg";
+import image2 from "../../images/header/image2.jpg";
+import image3 from "../../images/header/image3.jpg";
+import image4 from "../../images/header/image4.jpg";
+import image5 from "../../images/header/image5.jpg";
+
+const images = [image1, image2, image3, image4, image5];
+
+export const HeaderCarousel = () => {
+  const [selectedImage, setSelectedImage] = useState(0);
+  const [allImages, setAllImages] = useState(images);
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setSelectedImage((selectedImage) =>
+        selectedImage < allImages.length - 1 ? selectedImage + 1 : 0
+      );
+    }, 3000);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
+  return (
+    <div className="carousel-wrapper">
+      <div className="carousel">
+        <img
+          className="carousel-image"
+          src={allImages[selectedImage]}
+          alt={selectedImage}
+        />
+        <button
+          className="carousel-btn prev"
+          onClick={() => {
+            if (selectedImage > 0) setSelectedImage(selectedImage - 1);
+          }}
+        >
+          <FcPrevious className="icon" />
+        </button>
+        <button
+          className="carousel-btn next"
+          onClick={() => {
+            selectedImage < allImages.length - 1
+              ? setSelectedImage(selectedImage + 1)
+              : setSelectedImage(0);
+          }}
+        >
+          <FcNext className="icon" />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+// export default HeaderCarousel;

src/components/Navbar/Navbar.jsx

@@ -9,7 +9,7 @@ export const Navbar = () => {
         setIsActive(current => !current);
     };
 
-
+    
     return (
         <>
             <header>
@@ -28,10 +28,10 @@ export const Navbar = () => {
                             <a className='nav-link' href="/">SQUAD</a
                             ></li>
                         <li className='nav-item'>
-                            <a hre className='nav-link' href="/">GALLERY</a>
+                            <a className='nav-link' href="/">GALLERY</a>
                         </li>
                         <li className='nav-item'>
-                            <a hre className='nav-link' href="/">FACULTY</a>
+                            <a className='nav-link' href="/">FACULTY</a>
                         </li>
                         <li className='nav-item'>
                             <a className='nav-link' href="/">APPLY</a>

src/pages/Form/Form.jsx

@@ -1,12 +1,14 @@
 import React from "react";
 import Footer from "../../components/Footer/Footer";
+import HeaderCarousel from "../../components/HeaderCarousel/HeaderCarousel";
 import MailForm from "../../components/MailForm";
 import { Navbar } from "../../components/Navbar/Navbar";
 
 function Form() {
   return (
     <div>
       <Navbar />
+      <HeaderCarousel />
       <MailForm />
       <Footer/>
     </div>