import React from "react";
import MainNavbar from "../../Components/Navbar/Navbar";
import MainCarousel from "../../Components/Carousel/Carousel";
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 (
    <>
      <section>
        <div>
          <MainNavbar />
        </div>
        <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>
    </>
  );
};

export default Home;
