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";

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="https://images.tokopedia.net/img/BgtCLw/2020/6/23/d7ff56cc-6c77-4259-b4c4-f36da093d591.jpg?ect=4g" 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="https://www.suzukithamrin.com/wp-content/uploads/2020/11/ertiga_dekstop-scaled.jpg" 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="https://automotive.thamrin.co.id/wp-content/uploads/2019/07/hino-slider.jpg" 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="http://automotive.thamrin.co.id/wp-content/uploads/2020/06/Promotion_1.jpg" 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="https://cdn.infobrand.id/images/img/posts/2018/08/24/siap-memperluas-jaringan-dealer-resmi-mercedes-benz-indonesia-perkenalkan-dealer-terbarunya-pt-thamrin-citra-abadi-di-palembang.jpg" 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="https://hallo.palembang.go.id/petalokasi/login/assets/file/gambar/pim.jpg" 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="https://s-light.tiket.photos/t/01E25EBZS3W0FY9GTG6C42E1SE/rsfit00gsm/tix-hotel/images-web/2020/11/15/78227b37-5913-433d-8fb1-0e614e8fb8f6-1605456088844-950925dd50353815a9937ed196ffea3e.jpg" 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="https://orator.id/wp-content/uploads/2018/10/IMG_20181030_045630.jpg" 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="https://homes.thamrin.co.id/wp-content/uploads/2020/02/Palembang-Villa-2.jpg" 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>
    );
}