tbg-ecomm-nextjs/pages-sections/home/Businees-Partner.js

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

// core components
import GridContainer from "components/Grid/GridContainer.js";
import Button from "components/CustomButtons/Button.js";
import GridItem from "components/Grid/GridItem.js";
import Card from "components/Card/Card.js";
import Icon from "@material-ui/core/Icon";
import styles from "assets/jss/nextjs-material-kit/pages/landingPageSections/workStyle.js";

import yamaha from 'assets/img/home/yamaha.jpg';
import suzuki from 'assets/img/home/suzuki.jpg';
import mercedes from 'assets/img/home/mercedes.jpg';
import hino from 'assets/img/home/hino.jpg';
import honda from 'assets/img/home/honda.jpg';
import pim from 'assets/img/home/pim.jpg';
import emilia from 'assets/img/home/emilia.jpg';
import bpr from 'assets/img/home/bpr.jpg';
import home from 'assets/img/home/home.jpg';

const useStyles = makeStyles(styles);
export default function WorkSection() {
    const classes = useStyles();
    return (
        <div>
            <GridContainer justify="center">
                <GridItem xs={12} sm={12} md={8}>
                <h2 className={classes.title}>Thamrin Group Businees Partner</h2>
                </GridItem>
            </GridContainer>
            <div className={classes.section} id="notifications" style={{marginTop:"-150px"}}>
                <div className={classes.section}>
                    <div className={classes.container}>
                        <GridContainer>
                            <GridItem className={classes.marginAuto}>
                                <Card carousel style={{width:"1290px", marginLeft:"-90px"}}>
                                    <img src={yamaha} alt="First slide" className="slick-image" />
                                </Card>
                                <div align="center">
                                    <Button color="info" round href="/yamaha/home" style={{width:"200px", marginTop:"-150px"}}>
                                        <Icon className={classes.icons}>open_in_new</Icon>Visit Page
                                    </Button>
                                </div>
                                <Card carousel style={{width:"1290px", marginTop:"-55px", marginLeft:"-90px"}}>
                                    <img src={suzuki} alt="First slide" className="slick-image" />
                                </Card>
                                <div align="center">
                                    <Button color="info" round href="/suzuki/home" style={{width:"200px", marginTop:"-150px"}}>
                                        <Icon className={classes.icons}>open_in_new</Icon>Visit Page
                                    </Button>
                                </div>
                                <Card carousel style={{width:"1290px", marginTop:"-55px", marginLeft:"-90px"}}>
                                    <img src={hino} alt="First slide" className="slick-image" />
                                </Card>
                                <div align="center">
                                    <Button color="info" round href={"#"} style={{width:"200px", marginTop:"-150px"}}>
                                        <Icon className={classes.icons}>open_in_new</Icon>Visit Page
                                    </Button>
                                </div>
                                <Card carousel style={{width:"1290px", marginTop:"-55px", marginLeft:"-90px"}}>
                                    <img src={honda} alt="First slide" className="slick-image" />
                                </Card>
                                <div align="center">
                                    <Button color="info" round href={"#"} style={{width:"200px", marginTop:"-150px"}}>
                                        <Icon className={classes.icons}>open_in_new</Icon>Visit Page
                                    </Button>
                                </div>
                                <Card carousel style={{width:"1290px", marginTop:"-55px", marginLeft:"-90px"}}>
                                    <img src={mercedes} alt="First slide" className="slick-image" />
                                </Card>
                                <div align="center">
                                    <Button color="info" round href={"#"} style={{width:"200px", marginTop:"-150px"}}>
                                        <Icon className={classes.icons}>open_in_new</Icon>Visit Page
                                    </Button>
                                </div>
                                <Card carousel style={{width:"1290px", marginTop:"-55px", marginLeft:"-90px"}}>
                                    <img src={pim} alt="First slide" className="slick-image" />
                                </Card>
                                <div align="center">
                                    <Button color="info" round href={"#"} style={{width:"200px", marginTop:"-150px"}}>
                                        <Icon className={classes.icons}>open_in_new</Icon>Visit Page
                                    </Button>
                                </div>
                                <Card carousel style={{width:"1290px", marginTop:"-55px", marginLeft:"-90px"}}>
                                    <img src={emilia} alt="First slide" className="slick-image" />
                                </Card>
                                <div align="center">
                                    <Button color="info" round href={"#"} style={{width:"200px", marginTop:"-150px"}}>
                                        <Icon className={classes.icons}>open_in_new</Icon>Visit Page
                                    </Button>
                                </div>
                                <Card carousel style={{width:"1290px", marginTop:"-55px", marginLeft:"-90px"}}>
                                    <img src={bpr} alt="First slide" className="slick-image" />
                                </Card>
                                <div align="center">
                                    <Button color="info" round href={"#"} style={{width:"200px", marginTop:"-150px"}}>
                                        <Icon className={classes.icons}>open_in_new</Icon>Visit Page
                                    </Button>
                                </div>
                                <Card carousel style={{width:"1290px", marginTop:"-55px", marginLeft:"-90px"}}>
                                    <img src={home} alt="First slide" className="slick-image" />
                                </Card>
                                <div align="center">
                                    <Button color="info" round href={"#"} style={{width:"200px", marginTop:"-150px"}}>
                                        <Icon className={classes.icons}>open_in_new</Icon>Visit Page
                                    </Button>
                                </div>
                            </GridItem>
                        </GridContainer>
                    </div>
                </div>
            </div>
        </div>
    );
}