Header complete with responsive

src/Components/Carousel/Carousel.js

@@ -2,18 +2,26 @@ import React from "react";
 import carouselImg from "../../assets/images/offer.jpg";
 
 import { Carousel } from "react-bootstrap";
+import { carouselData } from "../../Helper/dummyData";
+import style from "./Carousel.module.scss"
 
 const MainCarousel = () => {
   return (
     <>
-      <Carousel variant="dark">
+      <Carousel variant="dark" controls={false} indicators={false} className={`${style.carousel}`} interval={3000}>
+        {carouselData?.map((item, inndex) => {
+          return (
             <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>
+              <img
+                className={`d-block w-100 ${style.image}`}
+                src={item?.image}
+                alt="First slide"
+                fluid
+              />
             </Carousel.Item>
+          );
+        })}
+
         {/* <Carousel.Item>
           <img
             className="d-block w-100"

src/Components/Carousel/Carousel.module.scss

+.image{
+    height: 550px;
+}
+
+.carousel{
+    height: 550px;
+}
+
+@media only screen and (max-width: 1200px) {
+    .image{
+        height: 350px;
+    }
+    .carousel{
+        height: 350px;
+    }
+    
+   
+}
\ No newline at end of file

src/Helper/dummyData.js

+import fruitAndVegetablesImg from "../assets/images/fruitAndVegetables.jpeg";
+import offerImg from "../assets/images/offer.jpg";
+import discountImg from "../assets/images/20_discount.jpeg";
+import mart_innerImg from "../assets/images/mart_inner.jpeg";
+
+
 const headerData = [
   {
     id: 1,
     link: "Mobile Tablet and Laptop",
   },
+];
 
+const carouselData = [
+  { id: 1, image: fruitAndVegetablesImg },
+  { id: 2, image: offerImg },
+  { id: 3, image: discountImg },
+  { id: 4, image: mart_innerImg },
 ];
 
-export {headerData}
+export { headerData, carouselData };

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";
+import style from "./Home.module.scss";
+import { Container, Row, Col } from "react-bootstrap";
+import bestPriceImg from "../../assets/images/bestPrice.jpg";
+import prayerMatImg from "../../assets/images/prayerMat.jpg";
 
 const Home = () => {
   return (
@@ -11,10 +13,25 @@ const Home = () => {
         <div>
           <MainNavbar />
         </div>
-        <div className={style.carouselContainer}>
-        <Container>
-
+        <div>
+          <Container className={style.carouselContainer}>
+            <Row className={style.carouselContainerRow}>
+              <Col xl={3} md={12} sm={12}>
+                <div className={style.leftImages}>
+                  <div>
+                    <img src={bestPriceImg} alt="best price" />
+                  </div>
+                  <div>
+                    <img src={prayerMatImg} alt="prayer mat" />
+                  </div>
+                </div>
+              </Col>
+              <Col xl={8} md={12} sm={12}>
+                <div>
                   <MainCarousel />
+                </div>
+              </Col>
+            </Row>
           </Container>
         </div>
       </section>

src/Screens/Home/Home.module.scss

+.carouselContainer {
+  margin-top: 30px;
+  .leftImages {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    width: 100%;
+  }
+  .leftImages div:nth-child(2) {
+    margin-top: 30px;
+  }
+  .carouselContainerRow {
+    display: flex;
+    justify-content: center;
+  }
+}
+
+@media only screen and (max-width: 1200px) {
+    .carouselContainer{
+        // background-color: red;
+        .leftImages {
+            display: flex;
+            justify-content: center;
+            flex-direction: row;
+            width: 100%;
+            overflow: auto;
+          }
+          .leftImages div {
+            padding: 0px 30px 30px 30px;
+            
+          }
+          .leftImages div:nth-child(2) {
+            margin-top: 0px;
+
+          }
+    }
+   
+}