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

const useStyles = makeStyles(styles);

export default function ProfilePage(props) {
  const classes = useStyles();
  const { ...rest } = props;
  const imageClasses = classNames(
    classes.imgRaised,
    classes.imgRoundedCircle,
    classes.imgFluid
  );
  const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
  return (
    <Card className={classes.textCenter}>
      <div align="center">
        <CardHeader color="info">Product</CardHeader>
      </div>
      <CardBody>
        <div align="center">
          <h2>Product & Facilities</h2>
        </div>
        <GridContainer justify="center">
          <GridItem>
            <NavPills
              alignCenter
              color="primary"
              tabs={[
                {
                  tabButton: "Yamaha",
                  tabIcon: Dashboard,
                  tabContent: (
                    <GridContainer justify="center">
                      <GridItem xs={12} sm={12} md={4}>
                        <img
                          alt="..."
                          style={{ height: "350px", display: "block" }}
                          src="https://www.yamaha-motor.co.id/uploads/products/2020020510350637523I93808.png"
                          className={navImageClasses}
                        />
                        <div align="center">
                          <h2><a href="/product_detail">ALL NEW NMAX STANDART VERSION</a></h2>
                          <h4>Rp.30.000.000,00 – Rp.37.692.000,00</h4>
                          <Button color="info" round>
                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
                            Buy
                          </Button>
                        </div>
                      </GridItem>
                      <GridItem xs={12} sm={12} md={4}>
                        <img
                          alt="..."
                          style={{ height: "350px", display: "block" }}
                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-Std-Htm.png"
                          className={navImageClasses}
                        />
                        <div align="center">
                          <h2>AEROX 155 VVA</h2>
                          <h4>Rp.25.927.000,00</h4>
                          <Button color="info" round>
                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
                            Buy
                          </Button>
                        </div>
                      </GridItem>
                      <GridItem xs={12} sm={12} md={4}>
                        <img
                          alt="..."
                          style={{
                            height: "350px",
                            width: "100%",
                            display: "block",
                          }}
                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-R-Version.png"
                          className={navImageClasses}
                        />
                        <div align="center">
                          <h2>AEROX 155 VVA R – VERSION</h2>
                          <h4>Rp.27.110.000,00</h4>
                          <Button color="info" round>
                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
                            Buy
                          </Button>
                        </div>
                      </GridItem>
                      <GridItem xs={12} sm={12} md={4}>
                        <img
                          alt="..."
                          style={{
                            height: "350px",
                            width: "100%",
                            display: "block",
                          }}
                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-S-Ver-Red.png"
                          className={navImageClasses}
                        />
                        <div align="center">
                          <h2>AEROX 155 VVA S – VERSION</h2>
                          <h4>Rp.29.744.000,00</h4>
                          <Button color="info" round>
                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
                            Buy
                          </Button>
                        </div>
                      </GridItem>
                      <GridItem xs={12} sm={12} md={4}>
                        <img
                          alt="..."
                          style={{
                            height: "350px",
                            width: "100%",
                            display: "block",
                          }}
                          src="https://i0.wp.com/warungasep.net/wp-content/uploads/2020/02/view-1.png"
                          className={navImageClasses}
                        />
                        <div align="center">
                          <h2>NMAX ABS / NON ABS 155</h2>
                          <h4>Rp.29.571.000,00 – Rp.33.267.000,00</h4>
                          <Button color="info" round>
                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
                            Buy
                          </Button>
                        </div>
                      </GridItem>
                      <GridItem xs={12} sm={12} md={4}>
                        <img
                          alt="..."
                          style={{
                            height: "350px",
                            width: "100%",
                            display: "block",
                          }}
                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Fino-Sporty-Blue-768x744.png"
                          className={navImageClasses}
                        />
                        <div align="center">
                          <h2>FINO 125 SPORTY / PREMIUM</h2>
                          <h4>Rp.19.335.000,00</h4>
                          <Button color="info" round>
                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
                            Buy
                          </Button>
                        </div>
                      </GridItem>
                      <GridItem xs={12} sm={12} md={4}>
                        <img
                          alt="..."
                          style={{
                            height: "350px",
                            width: "100%",
                            display: "block",
                          }}
                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Fino-Grande-Blue-768x744.png"
                          className={navImageClasses}
                        />
                        <div align="center">
                          <h2>FINO GRANDE 125</h2>
                          <h4>Rp.20.155.000,00</h4>
                          <Button color="info" round>
                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
                            Buy
                          </Button>
                        </div>
                      </GridItem>
                      <GridItem xs={12} sm={12} md={4}>
                        <img
                          alt="..."
                          style={{
                            height: "350px",
                            width: "100%",
                            display: "block",
                          }}
                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Mio-S-Green-768x703.png"
                          className={navImageClasses}
                        />
                        <div align="center">
                          <h2>MIO S</h2>
                          <h4>Rp.18.472.000,00</h4>
                          <Button color="info" round>
                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
                            Buy
                          </Button>
                        </div>
                      </GridItem>
                      <GridItem xs={12} sm={12} md={4}>
                        <img
                          alt="..."
                          style={{
                            height: "350px",
                            width: "100%",
                            display: "block",
                          }}
                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Mio-M3-CW-Black-768x649.png"
                          className={navImageClasses}
                        />
                        <div align="center">
                          <h2>NEW MIO M3 125 CW</h2>
                          <h4>Rp.17.903.000,00</h4>
                          <Button color="info" round>
                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
                            Buy
                          </Button>
                        </div>
                      </GridItem>
                      <GridItem xs={12} sm={12} md={4}>
                        <img
                          alt="..."
                          style={{ height: "350px", display: "block" }}
                          src="https://motor.jasasitus.com/wp-content/uploads/2018/11/mio-m3-black.png"
                          className={navImageClasses}
                        />
                        <div align="center">
                          <h2>NEW MIO M3 AKS SSS</h2>
                          <h4>Rp. 18.000.000,00</h4>
                          <Button color="info" round>
                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
                            Buy
                          </Button>
                        </div>
                      </GridItem>
                      <GridItem xs={12} sm={12} md={4}>
                        <img
                          alt="..."
                          style={{ height: "350px", display: "block" }}
                          src="https://yamaha-berlian-merdeka.com/wp-content/uploads/2018/12/5-1.png"
                          className={navImageClasses}
                        />
                        <div align="center">
                          <h2>ALL NEW X-RIDE 125</h2>
                          <h4>Rp. 19.250.000,00</h4>
                          <Button color="info" round>
                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
                            Buy
                          </Button>
                        </div>
                      </GridItem>
                      <GridItem xs={12} sm={12} md={4}>
                        <img
                          alt="..."
                          style={{
                            height: "350px",
                            width: "100%",
                            display: "block",
                          }}
                          src="https://www.yamaha-motor.co.id/uploads/products/HqVh2xkCTQ2NsYoo3O0M.png"
                          className={navImageClasses}
                        />
                        <div align="center">
                          <h2>MIO Z</h2>
                          <h4>Rp. 17.570.000,00</h4>
                          <Button color="info" round>
                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
                            Buy
                          </Button>
                        </div>
                      </GridItem>
                      <GridItem xs={12} sm={12} md={4}>
                        <img
                          alt="..."
                          style={{ height: "350px", display: "block" }}
                          src="https://image.cermati.com/v1553589176/f2xpfpfmjf2vnpoesrgf.png"
                          className={navImageClasses}
                        />
                        <div align="center">
                          <h2>MX KING 150</h2>
                          <h4>Rp. 23.425.000,00</h4>
                          <Button color="info" round>
                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
                            Buy
                          </Button>
                        </div>
                      </GridItem>
                      <GridItem xs={12} sm={12} md={4}>
                        <img
                          alt="..."
                          style={{ height: "350px", display: "block" }}
                          src="https://www.yamaha-motor.co.id/uploads/products/ih2AfZY3h4qhAdKQonpJ.png"
                          className={navImageClasses}
                        />
                        <div align="center">
                          <h2>NEW JUPITER MX 150</h2>
                          <h4>Rp. 20.825.000,00</h4>
                          <Button color="info" round>
                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
                            Buy
                          </Button>
                        </div>
                      </GridItem>
                      <GridItem xs={12} sm={12} md={4}>
                        <img
                          alt="..."
                          style={{
                            height: "350px",
                            width: "100%",
                            display: "block",
                          }}
                          src="https://d2pa5gi5n2e1an.cloudfront.net/id/images/article/10721_ID/2.jpg"
                          className={navImageClasses}
                        />
                        <div align="center">
                          <h2>JUPITER Z1</h2>
                          <h4>Rp. 18.600.000,00</h4>
                          <Button color="info" round>
                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
                            Buy
                          </Button>
                        </div>
                      </GridItem>
                      <GridItem xs={12} sm={12} md={4}>
                        <img
                          alt="..."
                          style={{
                            height: "350px",
                            width: "100%",
                            display: "block",
                          }}
                          src="https://yamaha-deta.co.id/assets/themes/default/extra-images/detailproduk/ENERGETIC_WHITE.png"
                          className={navImageClasses}
                        />
                        <div align="center">
                          <h2>VEGA FORCE CW</h2>
                          <h4>Rp. 16.825.000,00</h4>
                          <Button color="info" round>
                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
                            Buy
                          </Button>
                        </div>
                      </GridItem>
                      <GridItem xs={12} sm={12} md={4}>
                        <img
                          alt="..."
                          style={{ height: "350px", display: "block" }}
                          src="https://www.yamaha-motor.co.id/uploads/products/2020020510350637523I93808.png"
                          className={navImageClasses}
                        />
                      </GridItem>
                      <GridItem xs={12} sm={12} md={4}>
                        <img
                          alt="..."
                          style={{ height: "350px", display: "block" }}
                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-Std-Htm.png"
                          className={navImageClasses}
                        />
                      </GridItem>
                      <GridItem xs={12} sm={12} md={4}>
                        <img
                          alt="..."
                          style={{
                            height: "350px",
                            width: "100%",
                            display: "block",
                          }}
                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-R-Version.png"
                          className={navImageClasses}
                        />
                      </GridItem>
                      <GridItem xs={12} sm={12} md={4}>
                        <img
                          alt="..."
                          style={{
                            height: "350px",
                            width: "100%",
                            display: "block",
                          }}
                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-S-Ver-Red.png"
                          className={navImageClasses}
                        />
                      </GridItem>
                      <GridItem xs={12} sm={12} md={4}>
                        <img
                          alt="..."
                          style={{
                            height: "350px",
                            width: "100%",
                            display: "block",
                          }}
                          src="https://i0.wp.com/warungasep.net/wp-content/uploads/2020/02/view-1.png"
                          className={navImageClasses}
                        />
                      </GridItem>
                      <GridItem xs={12} sm={12} md={4}>
                        <img
                          alt="..."
                          style={{
                            height: "350px",
                            width: "100%",
                            display: "block",
                          }}
                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Fino-Sporty-Blue-768x744.png"
                          className={navImageClasses}
                        />
                      </GridItem>
                      <GridItem xs={12} sm={12} md={4}>
                        <img
                          alt="..."
                          style={{
                            height: "350px",
                            width: "100%",
                            display: "block",
                          }}
                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Fino-Grande-Blue-768x744.png"
                          className={navImageClasses}
                        />
                      </GridItem>
                      <GridItem xs={12} sm={12} md={4}>
                        <img
                          alt="..."
                          style={{
                            height: "350px",
                            width: "100%",
                            display: "block",
                          }}
                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Mio-S-Green-768x703.png"
                          className={navImageClasses}
                        />
                      </GridItem>
                      <GridItem xs={12} sm={12} md={4}>
                        <img
                          alt="..."
                          style={{
                            height: "350px",
                            width: "100%",
                            display: "block",
                          }}
                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Mio-M3-CW-Black-768x649.png"
                          className={navImageClasses}
                        />
                      </GridItem>
                    </GridContainer>
                  ),
                },
                {
                  tabButton: "Suzuki",
                  tabIcon: Dashboard,
                  tabContent: (
                    <GridContainer justify="center">
                      
                    </GridContainer>
                  ),
                },
                {
                  tabButton: "Honda",
                  tabIcon: Dashboard,
                  tabContent: (
                    <GridContainer justify="center">

                    </GridContainer>
                  ),
                },
                {
                  tabButton: "Mercedes Benz",
                  tabIcon: Dashboard,
                  tabContent: (
                    <GridContainer justify="center">
                      
                    </GridContainer>
                  ),
                },
              ]}
            />
          </GridItem>
        </GridContainer>
      </CardBody>
      <CardFooter className={classes.textMuted} textAlign="center">
        © 2020 , All Right Reserved by @Thamrin Brother Company
      </CardFooter>
    </Card>
  );
}