tbg-ecomm-nextjs/pages-sections/home/SectionContent.js

import React from "react";

// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";

// Component
import SnackbarContent from "components/Snackbar/SnackbarContent.js";
import Clearfix from "components/Clearfix/Clearfix.js";
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import CardBody from "components/Card/CardBody.js";
import Card from "components/Card/Card.js";
import Button from "components/CustomButtons/Button.js";

// react component for creating beautiful carousel
import Carousel from "react-slick";

// @material-ui/icons
import LocationOn from "@material-ui/icons/LocationOn";

import image1 from "assets/img/bg.jpg";
import image2 from "assets/img/bg2.png";
import image3 from "assets/img/bg3.jpg";
// import "assets/css/hover.css";

// import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/carouselStyle.js";


const useStyles = makeStyles(styles);

const DataSnackbarContent = function()  {
  const classes = useStyles();
  return (
    <div className={classes.section} id="notifications">
      <SnackbarContent
        message={
          <span>
            <b>Thamrin Group</b> bersama Anda melawan COVID-19. Untuk informasi silakan klik di sini. 
          </span>
        }
        align="center"
        color="danger"
        icon="info_outline"
      />
    </div>
  );
}

const DataCarousel = function ({ carousel, ...props })  {
  const classes = useStyles();
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    time: 5
  };
  return (
    <div className={classes.section} id="notifications">
      <div className={classes.section}>
        <div className={classes.container}>
          <GridContainer>
            <GridItem className={classes.marginAuto}>
              <Card carousel>
                <Carousel {...settings}>
                  <div>
                    <img src={image1} alt="First slide" className="slick-image" />
                  </div>
                  <div>
                    <img src={image2} alt="Second slide" className="slick-image"/>
                  </div>
                  <div>
                    <img src={image3} alt="Third slide" className="slick-image" />
                  </div>
                </Carousel>
              </Card>
            </GridItem>
          </GridContainer>
        </div>
      </div>
    </div>
  );
}

const DataService = function ({ service, ...props })  {
    const classes = useStyles();

    const services = service.map((data) => (
        <GridContainer justify="center">
          <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
            <Paper className={classes.paper}>
              <Card style={{width: "20rem"}}>
                <img
                  style={{height: "180px", width: "100%", padding:"20px", display: "block"}}
                  className={classes.imgCardTop}
                  src={data.img}
                />
              </Card>
            </Paper>
          </Grid>          
        </GridContainer>
    ));
    return (
      <div className={classes.section} id="notifications">
        <div align="center">
            <h2>Our Service</h2>
        </div>
        <div>
          {services}
        </div>
      </div>
    );
}

  const DataBusinessPartner = function ({ businessPartners, ...props })  {
    const classes = useStyles();
    const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      time: 5
    };
    return (
      <div className={classes.section} id="notifications">
        <div align="center">
            <h2>Our Business Partner</h2>
        </div>
        <GridContainer justify="center">
          <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
            <Paper className={classes.paper}>
              <Card style={{width: "20rem"}}>
                <div align="center">
                <img
                  style={{height: "180px", width: "300px", display: "block"}}
                  className={classes.imgCardTop}
                  src="https://imgx.gridoto.com/crop/31x4:629x377/750x500/photo/2020/06/28/829813812.jpg"
                />
                </div>
              </Card>
            </Paper>
          </Grid>        
          <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
            <Paper className={classes.paper}>
              <Card style={{width: "20rem"}}>
                <div align="center">
                <img
                  style={{height: "180px", width: "270px", display: "block"}}
                  className={classes.imgCardTop}
                  src="https://i.pinimg.com/originals/64/e7/73/64e773194975e702677c5089fc6c8ae2.png"
                  alt="Card-img-cap"
                />
                </div>
              </Card>
            </Paper>
          </Grid>
          <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
            <Paper className={classes.paper}>
              <Card style={{width: "20rem"}}>
              <div align="center">
                <img
                  style={{height: "180px", width: "270px", padding:"20px", display: "block"}}
                  className={classes.imgCardTop}
                  src="https://upload.wikimedia.org/wikipedia/id/d/d5/Honda-logo.png"
                  alt="Card-img-cap"
                />
                </div>
              </Card>
            </Paper>
          </Grid>
          <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
            <Paper className={classes.paper}>
              <Card style={{width: "20rem"}}>
                <div align="center">
                <img
                  style={{height: "180px", width: "200px", padding:"20px", display: "block"}}
                  className={classes.imgCardTop}
                  src="https://i.pinimg.com/originals/1e/12/a3/1e12a32f6f4838188f71eeb6d48ccc55.png"
                  alt="Card-img-cap"
                />
                </div>
              </Card>
            </Paper>
          </Grid>
          <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
            <Paper className={classes.paper}>
              <Card style={{width: "20rem"}}>
                <div align="center">
                <img
                  style={{height: "180px", width: "200px", padding:"20px", display: "block"}}
                  className={classes.imgCardTop}
                  src="https://3.bp.blogspot.com/-hUQJabKTGCg/WfcN66wVQCI/AAAAAAAAAxU/OW8hrgMH6nA-XyYkg6Pt6fNYmbpzY4noACLcBGAs/s1600/softskill.png"
                />
                </div>
              </Card>
            </Paper>
          </Grid>        
          <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
            <Paper className={classes.paper}>
              <Card style={{width: "20rem"}}>
                <div align="center">
                <img
                  style={{height: "180px", width: "300px", padding:"20px", display: "block"}}
                  className={classes.imgCardTop}
                  src="http://bprberkatsejati.com/wp-content/uploads/2019/03/cover1.jpg"
                  alt="Card-img-cap"
                />
                </div>
              </Card>
            </Paper>
          </Grid>
          <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
            <Paper className={classes.paper}>
              <Card style={{width: "20rem"}}>
                <div align="center">
                <img
                  style={{height: "180px", width: "250px", padding:"20px", display: "block"}}
                  className={classes.imgCardTop}
                  src="https://d5b1dwptmw1mf.cloudfront.net/uploads/malls/logo/L1_w_dvWvn_1lsCh-palembang-indah-mall-1479113878_1.jpg"
                  alt="Card-img-cap"
                />
                </div>
              </Card>
            </Paper>
          </Grid>
          <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
            <Paper className={classes.paper}>
              <Card style={{width: "20rem"}}>
                <div align="center">
                <img
                  style={{height: "180px", width: "330px", padding:"20px", display: "block"}}
                  className={classes.imgCardTop}
                  src="https://lh3.googleusercontent.com/proxy/5AktadKOHE-SrymxW0Ffgw4P_eKgXjNsuSs9mpTHAfYbm5UMfdbT3vefgtxA8NnbJEUdMYdj5kpQolEu5r-938-T9sHM6ApF1M_k1DgloSP0d7kL5Qeoi_-e6lIuwYa2XR8"
                  alt="Card-img-cap"
                />
                </div>
              </Card>
            </Paper>
          </Grid>
          <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
            <Paper className={classes.paper}>
              <Card style={{width: "20rem"}}>
                <div align="center">
                <img
                  style={{height: "180px", width: "330px", padding:"20px", display: "block"}}
                  className={classes.imgCardTop}
                  src="https://3.bp.blogspot.com/-NFjgD_eGwy8/Wn70CKGh5QI/AAAAAAAACRg/7fAzLraWggwc5HJU-KVJUrKYAnKQ52VWgCLcBGAs/s1600/Thamrin%2BHomes.png"
                />
                </div>
              </Card>
            </Paper>
          </Grid>     
        </GridContainer>
      </div>
    );
}

module.exports = {
  DataSnackbarContent: DataSnackbarContent,
	DataCarousel: DataCarousel,
	DataService: DataService,
	DataBusinessPartner: DataBusinessPartner,
};