tbg-ecomm-nextjs/pages-sections/SectionProductDetail.js

import React from "react";

// nodejs library that concatenates classes
import classNames from "classnames";

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

// @material-ui/icons
import Dashboard from "@material-ui/icons/Dashboard";
import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore";

// Component
import GridContainer from "components/Grid/GridContainer.js";
import Grid from '@material-ui/core/Grid';
import GridItem from "components/Grid/GridItem.js";
import NavPills from "components/NavPills/NavPills.js";
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import CardHeader from "components/Card/CardHeader.js";
import CardFooter from "components/Card/CardFooter.js";
import Button from "components/CustomButtons/Button.js";
import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
import Carousel from "react-slick";
import Paper from '@material-ui/core/Paper';


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

const useStyles = makeStyles(styles);

export default function ProfilePage(props) {
    const classes = useStyles();
    const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: false
    };
  const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
  return (
    <Card className={classes.textCenter}>
    <div align="center">
      <CardHeader color="info">Product Detail</CardHeader>
    </div>
    <CardBody>
        <GridContainer justify="center">
            <Grid align="center" className={classes.marginAuto}>
            <div className={classes.section}>
                <div className={classes.container}>
                    <Card carousel style={{width:"700px", height:"400px"}}>
                        <Carousel {...settings}>
                        <div>
                            <img src="https://www.yamaha-motor.co.id/uploads/products/2020020510350637523I93808.png" width="300px" height="400px" 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>
                </div>
            </div>
            </Grid>        
            <Grid style={{padding:"40px", marginTop:"-30px"}}>
                <h3>ALL NEW NMAX STANDART VERSION</h3>
                <h3>Rp.37.692.000,00</h3>
                <hr></hr>
                <GridContainer justify="center">
                    <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}>
                        <Card className={classes.marginAuto} style={{height: "125px", width: "125px"}}>
                            <img src="https://www.yamaha-motor.co.id/uploads/products/2zTfxFltlPOYe5sMFapR-BLUE-CORE-color.png"
                            />
                        </Card>
                    </Grid>
                    <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}>
                        <Card className={classes.marginAuto} style={{height: "125px", width: "125px"}}>
                            <img src="https://www.yamaha-motor.co.id/uploads/products/3JWFNLBpLj2ff7JgaSEC-VVA1.png"
                            />
                        </Card>
                    </Grid>
                    <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}>
                        <Card className={classes.marginAuto} style={{height: "125px", width: "125px"}}>
                            <img src="https://www.yamaha-motor.co.id/uploads/products/ku13WjySzEsj6LarGvlb-155-CC.png"
                            />
                        </Card>
                    </Grid>
                </GridContainer>
                <GridContainer justify="center">
                    <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-50px"}}>
                        <Card className={classes.marginAuto} style={{height: "125px", width: "125px"}}>
                            <img src="https://www.yamaha-motor.co.id/uploads/products/20200402085616smc40j.png"
                            />
                        </Card>
                    </Grid>
                    <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-50px"}}>
                        <Card className={classes.marginAuto} style={{height: "125px", width: "125px"}}>
                            <img src="https://www.yamaha-motor.co.id/uploads/products/amoV2O00jXseztcZ8ilV-smg.png"
                            />
                        </Card>
                    </Grid>
                    <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-50px"}}>
                        <Card className={classes.marginAuto} style={{height: "125px", width: "125px"}}>
                            <img src="https://www.yamaha-motor.co.id/uploads/products/201912031806276ll9i9.png"
                            />
                        </Card>
                    </Grid>
                </GridContainer>
            </Grid>
        </GridContainer>
        <GridContainer style={{marginTop:"-80px"}}>
        <GridItem>
          <NavPills
            color="primary"
            tabs={[
              {
                tabButton: "Overview",
                tabIcon: Dashboard,
                tabContent: (
                  <GridContainer justify="center">
                    <GridItem>
                    </GridItem>
                  </GridContainer>
                ),
              },
              {
                tabButton: "Specification",
                tabIcon: Dashboard,
                tabContent: (
                  <GridContainer justify="center">
                    <GridItem>
                    </GridItem>
                  </GridContainer>
                ),
              },
              {
                tabButton: "Accessories",
                tabIcon: Dashboard,
                tabContent: (
                  <GridContainer justify="center">
                    <GridItem>
                    </GridItem>
                  </GridContainer>
                ),
              },
              {
                tabButton: "Film",
                tabIcon: Dashboard,
                tabContent: (
                  <GridContainer justify="center">
                    <GridItem>
                    </GridItem>
                  </GridContainer>
                ),
              },
              {
                tabButton: "Credit Simulation",
                tabIcon: Dashboard,
                tabContent: (
                  <GridContainer justify="center">
                    <GridItem>
                    </GridItem>
                  </GridContainer>
                ),
              },
              {
                tabButton: "Test Drive",
                tabIcon: Dashboard,
                tabContent: (
                  <GridContainer justify="center">
                    <GridItem>
                    </GridItem>
                  </GridContainer>
                ),
              },
            ]}
          />
        </GridItem>
      </GridContainer>
    </CardBody>
    <CardFooter className={classes.textMuted} textAlign="center">
      © 2020 , All Right Reserved by @Thamrin Brother Company
    </CardFooter>
  </Card>
  );
}