tbg-ecomm-nextjs/pages-sections/home/gallery.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 Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';

//image
import img1 from "assets/img/gallery/1.jpg";
import img2 from "assets/img/gallery/2.jpg";
import img3 from "assets/img/gallery/3.jpg";
import img4 from "assets/img/gallery/4.jpg";
import img5 from "assets/img/gallery/5.jpg";
import img6 from "assets/img/gallery/6.jpg";
import img7 from "assets/img/gallery/7.jpg";
import img8 from "assets/img/gallery/8.jpg";

const useStyles = makeStyles(styles);
export default function WorkSection() {
    const classes = useStyles();
    return (
        <div>
            <GridContainer justify="center" style={{marginTop:"-100px"}}>
                <GridItem xs={12} sm={12} md={8}>
                <h2 className={classes.title}>Thamrin Group Gallery</h2>
                </GridItem>
            </GridContainer>
            <div className={classes.section} id="notifications" style={{marginTop:"-150px"}}>
                <div className={classes.section}>
                    <div className={classes.container} align="center">
                        <Grid container spacing={3}>
                            <Grid item xs={3}>
                                <Card style={{width:"250px"}}>
                                    <img src={img1} alt="First slide" className="slick-image" width="250px"/>
                                </Card>
                            </Grid>
                            <Grid item xs={3}>
                                <Card style={{width:"250px"}}>
                                    <img src={img2} alt="First slide" className="slick-image" width="250px"/>
                                </Card>
                            </Grid>
                            <Grid item xs={3}>
                                <Card style={{width:"250px"}}>
                                    <img src={img3} alt="First slide" className="slick-image" width="250px" height="188px"/>
                                </Card>
                            </Grid>
                            <Grid item xs={3}>
                                <Card style={{width:"250px"}}>
                                    <img src={img4} alt="First slide" className="slick-image" width="250px"/>
                                </Card>
                            </Grid>
                        </Grid>
                        <Grid container spacing={3}>
                            <Grid item xs={3}>
                                <Card style={{width:"250px"}}>
                                    <img src={img8} alt="First slide" className="slick-image" width="250px" height="188px"/>
                                </Card>
                            </Grid>
                            <Grid item xs={3}>
                                <Card style={{width:"250px"}}>
                                    <img src={img5} alt="First slide" className="slick-image" width="250px" height="188px"/>
                                </Card>
                            </Grid>
                            <Grid item xs={3}>
                                <Card style={{width:"250px"}}>
                                    <img src={img6} alt="First slide" className="slick-image" width="250px" height="188px"/>
                                </Card>
                            </Grid>
                            <Grid item xs={3}>
                                <Card style={{width:"250px"}}>
                                    <img src={img7} alt="First slide" className="slick-image" width="250px" height="188px"/>
                                </Card>
                            </Grid>
                        </Grid>
                        <Grid container spacing={3}>
                            <Grid item xs={3}>
                                <Card style={{width:"250px"}}>
                                    <img src={img1} alt="First slide" className="slick-image" width="250px" height="188px"/>
                                </Card>
                            </Grid>
                            <Grid item xs={3}>
                                <Card style={{width:"250px"}}>
                                    <img src={img2} alt="First slide" className="slick-image" width="250px" height="188px"/>
                                </Card>
                            </Grid>
                            <Grid item xs={3}>
                                <Card style={{width:"250px"}}>
                                    <img src={img3} alt="First slide" className="slick-image" width="250px" height="188px"/>
                                </Card>
                            </Grid>
                            <Grid item xs={3}>
                                <Card style={{width:"250px"}}>
                                    <img src={img4} alt="First slide" className="slick-image" width="250px" height="188px"/>
                                </Card>
                            </Grid>
                        </Grid>
                    </div>
                </div>
            </div>
        </div>
    );
}