tbg-ecomm-nextjs/pages-sections/yamaha/home/feature.js

import React, { Component } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Button from "components/CustomButtons/Button.js";
import Icon from "@material-ui/core/Icon";

import GridContainer from "components/Grid/GridContainer.js";
import Grid from '@material-ui/core/Grid';
import Card from "components/Card/Card.js";
import SnackbarContent from "components/Snackbar/SnackbarContent.js";

import imagesStyles from "assets/jss/nextjs-material-kit/imagesStyles.js";
import { cardTitle } from "assets/jss/nextjs-material-kit.js";

import Motor from "assets/img/feature/1.jpg";
import YGP from "assets/img/feature/2.jpg";
import Yamalube from "assets/img/feature/3.jpg";
import Apparel from "assets/img/feature/4.jpg";
import Helmet from "assets/img/feature/5.jpg";
import Accessories from "assets/img/feature/6.jpg";

const styles = {
    ...imagesStyles,
    cardTitle,
};

const useStyles = makeStyles(styles);
const DataFeature = function ({ backend, service, ...props })  {
    const classes = useStyles();
    return (
        <div className={classes.section} id="notifications">
            <div align="center" className={classes.section} id="notifications">
                <SnackbarContent
                message={
                    <h4>Feature Product</h4>
                }
                align="center"
                color="info"
                />
            </div>
            <GridContainer justify="center" style={{padding:"50px", marginTop:"-30px"}}>
                <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}>
                    <Card style={{width: "19rem"}}>
                    <div align="center">
                        <img
                        style={{height: "180px", width: "300px", display: "block"}} className={classes.imgCardTop} src={Motor}/>
                    </div>
                    </Card>
                </Grid>
                <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}>
                    <Card style={{width: "19rem"}}>
                    <div align="center">
                        <img
                        style={{height: "180px", width: "300px", display: "block"}} className={classes.imgCardTop} src={YGP}/>
                    </div>
                    </Card>
                </Grid>
                <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}>
                    <Card style={{width: "19rem"}}>
                    <div align="center">
                        <img
                        style={{height: "180px", width: "300px", display: "block"}} className={classes.imgCardTop} src={Yamalube}/>
                    </div>
                    </Card>
                </Grid>
                <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}>
                    <Card style={{width: "19rem"}}>
                    <div align="center">
                        <img
                        style={{height: "180px", width: "200px", display: "block"}} className={classes.imgCardTop} src={Apparel}/>
                    </div>
                    </Card>
                </Grid>
                <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}>
                    <Card style={{width: "19rem"}}>
                    <div align="center">
                        <img
                        style={{height: "180px", width: "200px", display: "block"}} className={classes.imgCardTop} src={Helmet}/>
                    </div>
                    </Card>
                </Grid>
                <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}>
                    <Card style={{width: "19rem"}}>
                    <div align="center">
                        <img
                        style={{height: "180px", width: "300px", display: "block"}} className={classes.imgCardTop} src={Accessories}/>
                    </div>
                    </Card>
                </Grid>
            </GridContainer>
        </div>
    );
}

export default DataFeature;