|
- 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>
- );
- }
|