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 CardBody from "components/Card/CardBody.js";

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={{ padding: "40px", marginTop: "-50px" }} justify="center">
          <Grid align="center" style={{ padding: "30px", marginTop: "-50px" }}>
            <Card style={{ width: "20rem" }}>
              <img style={{width: "320px", display: "block" }} className="image" className={classes.imgCardTop} src={Selling} />
              <CardBody>
                <h4><strong>Yamaha Selling Product</strong></h4>
                <div align="center">
                  <Button color="info" round href="/yamaha/product/product" target="_blank">
                    <Icon className={classes.icons}>room</Icon>View More Selling
                  </Button>
                </div>
              </CardBody>
            </Card>
          </Grid>
          <Grid align="center" style={{ padding: "30px", marginTop: "-50px" }}>
            <Card style={{ width: "20rem" }}>
            <img style={{width: "320px", display: "block"}} className="image" className={classes.imgCardTop} src={Service}/>
              <CardBody>
                <h4><strong>Yamaha Service Product</strong></h4>
                <div align="center">
                  <Button color="info" round href="https://booking.thamrin.co.id/" target="_blank">
                    <Icon className={classes.icons}>room</Icon>View More Service
                  </Button>
                </div>
              </CardBody>
            </Card>
          </Grid>
          <Grid align="center" style={{ padding: "30px", marginTop: "-50px" }}>
            <Card style={{ width: "20rem" }}>
            <img style={{width: "320px", display: "block"}} className="image" className={classes.imgCardTop} src={Sparepart}/>
              <CardBody>
                <h4><strong>Yamaha Sparepart Product</strong></h4>
                <div align="center">
                  <Button color="info" round href="sparepart/sparepart" target="_blank">
                    <Icon className={classes.icons}>room</Icon>View More Sparepart
                  </Button>
                </div>
              </CardBody>
            </Card>
          </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;