tbg-ecomm-nextjs/pages-sections/yamaha/home/service.js

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

import GridContainer from "components/Grid/GridContainer.js";
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import Card from "components/Card/Card.js";
import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
import SnackbarContent from "components/Snackbar/SnackbarContent.js";
import Button from "components/CustomButtons/Button.js";
import Icon from "@material-ui/core/Icon";
import Carousel from "react-slick";

import Selling from "assets/img/service/selling.png";
import Service from "assets/img/service/service.jpg";
import Sparepart from "assets/img/service/sparepart.jpg";

const useStyles = makeStyles(styles);
const DataService = function ({ backend, service, ...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" style={{marginTop:"30px"}}>
        <div style={{padding:"20px"}} align="center">
            <div align="center" className={classes.section} id="notifications">
                <SnackbarContent
                align="center"
                color="info"
                message="Thamrin Brothers - Yamaha 3S"
                />
            </div>
        </div>
        <div>
            <Grid container style={{marginTop:"-50px"}}>
              <Grid item xs={4} className={classes.marginAuto}>
                <div style={{padding:"20px"}} className="container">
                  <Card>
                      <Carousel {...settings}>
                        <img style={{height: "180px", width: "300px", display: "block"}} className="image" className={classes.imgCardTop} src={Selling}/>
                      </Carousel>
                  </Card>
                  <div align="center">
                    <h3><b>Yamaha Selling Product</b></h3>
                    <Button color="info" round href="/yamaha/product/product" target="_blank">
                        <Icon className={classes.icons}>open_in_new</Icon>View More Selling
                    </Button>
                  </div>
                </div>
              </Grid>                        
              <Grid item xs={4} className={classes.marginAuto}>
                <div style={{padding:"20px"}} className="container">
                  <Card>
                    <Carousel {...settings}>
                      <img style={{width: "300px", display: "block"}} className="image" className={classes.imgCardTop} src={Service}/>
                    </Carousel>
                  </Card>
                  <div align="center">
                    <h3><b>Yamaha Service Product</b></h3>
                    <Button color="info" round href="https://booking.thamrin.co.id/" target="_blank">
                        <Icon className={classes.icons}>open_in_new</Icon>View More Service
                    </Button>
                  </div>
                </div>
              </Grid>
              <Grid item xs={4} className={classes.marginAuto}>
                <div style={{padding:"20px"}} className="container">
                  <Card>
                    <Carousel {...settings}>
                      <img style={{height: "180px", width: "300px", display: "block"}} className="image" className={classes.imgCardTop} src={Sparepart}/>
                    </Carousel>                
                  </Card>
                  <div align="center">
                    <h3><b>Yamaha Sparepart Product</b></h3>
                    <Button color="info" round href="sparepart/sparepart" target="_blank">
                        <Icon className={classes.icons}>open_in_new</Icon>View More Sparepart
                    </Button>
                  </div>
                </div>
              </Grid>
            </Grid>
            {/* <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}>
              <Card style={{width: "20rem"}}>
                <div align="center" className="container">
                  <img style={{height: "180px", width: "300px", display: "block"}} className="image" className={classes.imgCardTop} src={Selling}/>
                  <div className="middle">
                    <div className="text">Selling</div>
                  </div>
                </div>
              </Card>
              <div align="center">
                <Button color="info" round href="/yamaha/product/product" target="_blank">
                    <Icon className={classes.icons}>open_in_new</Icon>View More Selling
                </Button>
              </div>
            </Grid>
            <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}>
              <Card style={{width: "20rem"}}>
                <div align="center" className="container">
                  <img style={{height: "180px", width: "300px", display: "block"}} className="image" className={classes.imgCardTop} src={Service}/>
                  <div className="middle">
                    <div className="text">Service</div>
                  </div>
                </div>
              </Card>
              <div align="center">
                <Button color="info" round href="https://booking.thamrin.co.id/" target="_blank">
                    <Icon className={classes.icons}>open_in_new</Icon>View More Service
                </Button>
              </div>
            </Grid>
            <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}>
              <Card style={{width: "20rem"}}>
                <div align="center" className="container">
                  <img style={{height: "180px", width: "300px", display: "block"}} className="image" className={classes.imgCardTop} src={Sparepart}/>
                  <div className="middle">
                    <div className="text">Sparepart</div>
                  </div>
                </div>
              </Card>
              <div align="center">
                <Button color="info" round href="sparepart/sparepart" target="_blank">
                    <Icon className={classes.icons}>open_in_new</Icon>View More Sparepart
                </Button>
              </div>
            </Grid> */}
        </div>
      </div>
    );
}

export default DataService;