Viewing File: /home/ubuntu/walnutminds-ecom-frontend-base/src/components/landingPage/HomeBannerIndex.jsx

import React, { useState, useEffect } from "react";
import { Navbar, Container, Image, Nav, Row, Col } from "react-bootstrap";
import { Link } from "react-router-dom";
import "./Landing.css";
import { connect } from "react-redux";
import Slider from "react-slick";
import { withTranslation, useTranslation } from "react-multi-lang";
import { fetchBannersListStart } from "../store/actions/HomePageAction";
import BannerListLoader from "../Helper/BannerListLoader";
import CustomLazyLoad from "../Helper/CustomLazyLoad";
import configuration from "react-global-configuration";


const HomeBannerIndex = (props) => {
  const t = useTranslation();

  const { bannerList } = props;

  useEffect(() => {
    props.dispatch(fetchBannersListStart());
  }, []);

  var settings = {
    dots: false,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    adaptiveHeight: true,
  };

  return (
    <>
      <div className="home-banner-sec">
        {bannerList.loading ? (
          <BannerListLoader />
        ) : (
          <Container fluid className="p-0">
            {bannerList.data.banners && bannerList.data.banners.length > 0 ? (
              <div className="home-banner-content">
                {bannerList.data.banners.slice(0, 1).map((banner, index) => (
                  <div className="home-banner-info">
                    {/* <h5>{t("cosmetics")}</h5> */}
                    <h1>{banner.title}</h1>
                    <p>{banner.description}</p>
                    <div className="default-btn-sec">
                      <Link
                        to="/shop"
                        className="default-btn"
                      >
                        {t("shop_now")}
                      </Link>
                    </div>
                  </div>
                ))}
                <div className="home-banner-avaters">
                  <Image
                    className="faq-img"
                    src={window.location.origin + "/images/blooms/banner-one.jpg"}
                    type="image/svg"
                    alt=" Ecommerce Platform"
                  />
                  <Image
                    className="faq-img"
                    src={window.location.origin + "/images/blooms/banner-two.jpg"}
                    type="image/svg"
                    alt=" Ecommerce Platform"
                  />
                  <Image
                    className="faq-img"
                    src={window.location.origin + "/images/blooms/banner-three.jpg"}
                    type="image/svg"
                    alt=" Ecommerce Platform"
                  />
                  <div className="water-logo-box">
                    <Image
                      className="lazyload feature-logo"
                      src={window.location.origin + "/images/blooms/logo-white.png"}

                      type="image/png"
                      alt={configuration.get("configData.site_name")}
                    />
                  </div>
                </div>

              </div>
            ) : null}
          </Container>
        )}
      </div>
    </>
  );
};

const mapStateToPros = (state) => ({
  bannerList: state.homepage.bannerList,
});

function mapDispatchToProps(dispatch) {
  return { dispatch };
}

export default connect(
  mapStateToPros,
  mapDispatchToProps
)(withTranslation(HomeBannerIndex));