Viewing File: /home/ubuntu/vedadeals-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";

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

  const { bannerList } = props;

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

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

  return (
    <>
      <div className="home-banner-sec">
        {bannerList.loading ? (
          <BannerListLoader />
        ) : (
          <Container>
            {bannerList.data.banners && bannerList.data.banners.length > 0 ? (
              <div className="home-banner-content">
                {/* <Carousel showStatus={false} showArrows={false} showIndicators={false}> */}

                <Slider {...settings} arrows={false}>
                  {bannerList.data.banners.map((banner, index) => (
                    <div>
                      <Row
                        className="align-items-center new-home-banner-sec"
                        key={index}
                      >
                        <Col md={6} className="resp-mrg-btm-xs">
                          <div className="home-banner-info">
                            {/* <h5>{t("cosmetics")}</h5> */}
                            <h1>{banner.title}</h1>
                            <p>{banner.description}</p>
                            <div className="default-btn-sec">
                              <a
                                href={banner.link}
                                target="_blank"
                                className="default-btn"
                              >
                                {t("shop_now")}
                              </a>
                            </div>
                          </div>
                        </Col>
                        <Col md={6}>
                          <div className="home-banner-img-sec">
                            <CustomLazyLoad
                              src={banner.picture}
                              placeholderSrc={
                                window.location.origin +
                                "/images/transparent.png"
                              }
                              classes="home-banner-img"
                              alt={banner.title}
                            />
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="animate-shape">
                                <linearGradient id="shape_1" x1="100%" x2="0%" y1="100%" y2="0%">
                                </linearGradient>
                                <path d="">
                                    <animate repeatCount="indefinite" attributeName="d" dur="15s" values="M37.5,186c-12.1-10.5-11.8-32.3-7.2-46.7c4.8-15,13.1-17.8,30.1-36.7C91,68.8,83.5,56.7,103.4,45 c22.2-13.1,51.1-9.5,69.6-1.6c18.1,7.8,15.7,15.3,43.3,33.2c28.8,18.8,37.2,14.3,46.7,27.9c15.6,22.3,6.4,53.3,4.4,60.2 c-3.3,11.2-7.1,23.9-18.5,32c-16.3,11.5-29.5,0.7-48.6,11c-16.2,8.7-12.6,19.7-28.2,33.2c-22.7,19.7-63.8,25.7-79.9,9.7 c-15.2-15.1,0.3-41.7-16.6-54.9C63,186,49.7,196.7,37.5,186z; M51,171.3c-6.1-17.7-15.3-17.2-20.7-32c-8-21.9,0.7-54.6,20.7-67.1c19.5-12.3,32.8,5.5,67.7-3.4C145.2,62,145,49.9,173,43.4 c12-2.8,41.4-9.6,60.2,6.6c19,16.4,16.7,47.5,16,57.7c-1.7,22.8-10.3,25.5-9.4,46.4c1,22.5,11.2,25.8,9.1,42.6 c-2.2,17.6-16.3,37.5-33.5,40.8c-22,4.1-29.4-22.4-54.9-22.6c-31-0.2-40.8,39-68.3,35.7c-17.3-2-32.2-19.8-37.3-34.8 C48.9,198.6,57.8,191,51,171.3z; M37.5,186c-12.1-10.5-11.8-32.3-7.2-46.7c4.8-15,13.1-17.8,30.1-36.7C91,68.8,83.5,56.7,103.4,45 c22.2-13.1,51.1-9.5,69.6-1.6c18.1,7.8,15.7,15.3,43.3,33.2c28.8,18.8,37.2,14.3,46.7,27.9c15.6,22.3,6.4,53.3,4.4,60.2 c-3.3,11.2-7.1,23.9-18.5,32c-16.3,11.5-29.5,0.7-48.6,11c-16.2,8.7-12.6,19.7-28.2,33.2c-22.7,19.7-63.8,25.7-79.9,9.7 c-15.2-15.1,0.3-41.7-16.6-54.9C63,186,49.7,196.7,37.5,186z"></animate>
                                </path>
                            </svg>
                          </div>
                        </Col>
                      </Row>
                    </div>
                  ))}
                </Slider>

                {/* </Carousel> */}
              </div>
            ) : null}
          </Container>
        )}
      </div>
    </>
  );
};

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

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

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