tbg-ecomm-nextjs/pages-sections/Components-Sections/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);

function SectionNotifications(props) {
  const classes = useStyles();
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: false
  };
  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"
      />
      <Clearfix />
      <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 align="center">
          <h2>Our Service</h2>
      </div>
      <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="https://www.odtap.com/wp-content/uploads/2019/03/delivery.png"
              />
            </Card>
          </Paper>
        </Grid>        
        <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="https://i.pinimg.com/736x/fa/22/a1/fa22a1196ecc812fa57366ccf6e1596b.jpg"
                alt="Card-img-cap"
              />
            </Card>
          </Paper>
        </Grid>
        <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="https://cdn-ds.com/media/3402/shopper-assurance-logo.png"
                alt="Card-img-cap"
              />
            </Card>
          </Paper>
        </Grid>
      </GridContainer>
      <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>
  );
}

export default SectionNotifications;