Navbar bug fix

src/Components/Carousel/Carousel.js

+import React from "react";
+import carouselImg from "../../assets/images/offer.jpg";
+
+import { Carousel } from "react-bootstrap";
+
+const MainCarousel = () => {
+  return (
+    <>
+      <Carousel variant="dark">
+        <Carousel.Item>
+          <img className="d-block w-100" src={carouselImg} alt="First slide" />
+          <Carousel.Caption>
+            <h5>First slide label</h5>
+            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+          </Carousel.Caption>
+        </Carousel.Item>
+        {/* <Carousel.Item>
+          <img
+            className="d-block w-100"
+            src="holder.js/800x400?text=Second slide&bg=eee"
+            alt="Second slide"
+          />
+          <Carousel.Caption>
+            <h5>Second slide label</h5>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+          </Carousel.Caption>
+        </Carousel.Item>
+        <Carousel.Item>
+          <img
+            className="d-block w-100"
+            src="holder.js/800x400?text=Third slide&bg=e5e5e5"
+            alt="Third slide"
+          />
+          <Carousel.Caption>
+            <h5>Third slide label</h5>
+            <p>
+              Praesent commodo cursus magna, vel scelerisque nisl consectetur.
+            </p>
+          </Carousel.Caption>
+        </Carousel.Item> */}
+      </Carousel>
+    </>
+  );
+};
+
+export default MainCarousel;

src/Components/Navbar/Navbar.js

 import React from "react";
 import {
-  Button,
-  Col,
   Container,
-  Row,
   Navbar,
-  NavDropdown,
   Nav,
 } from "react-bootstrap";
 import style from "./Navbar.module.scss";
-import logo from "../../assets/logo.png";
+import logo from "../../assets/images/logo.png";
 import { Input } from "antd";
 import { IoCartOutline } from "react-icons/io5";
 import { headerData } from "../../Helper/dummyData";
@@ -69,7 +65,7 @@ const MainNavbar = () => {
               {headerData?.map((item, index) => {
                 return (
                   <li>
-                    <a href="" className={headerData?.length - 1 !==index && style.borderRight}>{item?.link}</a>
+                    <a href={item?.link} className={headerData?.length - 1 !==index && style.borderRight}>{item?.link}</a>
                   </li>
                 );
               })}

src/Components/Navbar/Navbar.module.scss

@@ -34,7 +34,8 @@ $main_green: #56a514;
     }
   }
   .navbarMainContainer {
-    height: 90px;
+    // height: 90px;
+    // min-height: 190px;
   }
   .searchContainer {
     width: 75%;

src/Helper/dummyData.js

@@ -3,30 +3,6 @@ const headerData = [
     id: 1,
     link: "Mobile Tablet and Laptop",
   },
-  {
-    id: 2,
-    link: "Fashion",
-  },
-  {
-    id: 3,
-    link: "Groceries",
-  },
-  {
-    id: 4,
-    link: "Electronics Device",
-  },
-  {
-    id: 5,
-    link: "Sports",
-  },
-  {
-    id: 5,
-    link: "Tv and Home Appliances",
-  },
-  {
-    id: 5,
-    link: "Home and Life style",
-  },
   
 ];
 

src/Screens/Home/Home.js

 import React from "react";
 import MainNavbar from "../../Components/Navbar/Navbar";
+import MainCarousel from "../../Components/Carousel/Carousel";
+import style from "./Home.module.scss"
+import { Container } from "react-bootstrap";
 
 const Home = () => {
   return (
     <>
+      <section>
+        <div>
           <MainNavbar />
+        </div>
+        <div className={style.carouselContainer}>
+        <Container>
+
+          <MainCarousel />
+        </Container>
+        </div>
+      </section>
     </>
   );
 };