tbg-ecomm-nextjs/pages-sections/home/sosmed.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";

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

const useStyles = makeStyles(styles);
const DataService = function ({ backend, service, ...props })  {
    const classes = useStyles();
    const settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        time: 5
    };
    return (
        <div className={classes.section} id="notifications">
            <div align="center" className={classes.section} id="notifications">
                <SnackbarContent
                message={
                    <h4>Follow Us On</h4>
                }
                align="center"
                color="danger"
                />
            </div>
            <GridContainer justify="center" style={{padding:"50px", marginTop:"-50px"}}>
                <Grid>
                    <Card>
                        <img className={classes.imgCard} src="https://cdn.hipwallpaper.com/i/4/66/Me0Bbc.jpg" alt="Card-img" style={{height: "400px", width: "600px", display: "block"}}/>
                        <div className={classes.imgCardOverlay}>
                            <div align="center" style={{marginTop:"300px"}}>
                            <Button color="white" href="https://www.facebook.com/yamaholigan" target="_blank">
                                <Icon className={classes.icons}>open_in_new</Icon>For More Info
                            </Button>
                            </div>
                        </div>
                    </Card>
                </Grid>
                <Grid>
                    <Card>
                        <img className={classes.imgCard} src="https://www.devidia.net/wp-content/uploads/bfi_thumb/youtube-logo-34ec4yxwi0ab51015sqxorxcg1ycqmqxyfutkbpxe4wbnl436.jpg" alt="Card-img" style={{height: "400px", width: "600px", display: "block"}}/>
                        <div className={classes.imgCardOverlay}>
                            <div align="center" style={{marginTop:"300px"}}>
                            <Button color="white" href="https://www.youtube.com/user/yamahamotorindonesia" target="_blank">
                                <Icon className={classes.icons}>open_in_new</Icon>For More Info
                            </Button>
                            </div>
                        </div>
                    </Card>
                </Grid>
            </GridContainer>
            <GridContainer justify="center" style={{marginTop:"-110px"}}>
                <Grid>
                    <Card>
                        <img className={classes.imgCard} src="https://en.instagram-brand.com/wp-content/uploads/2016/11/Glyph-Icon-hero.png" alt="Card-img" style={{height: "400px", width: "600px", display: "block"}}/>
                        <div className={classes.imgCardOverlay}>
                            <div align="center" style={{marginTop:"300px"}}>
                            <Button color="white" href="https://www.instagram.com/yamahaindonesia/" target="_blank">
                                <Icon className={classes.icons}>open_in_new</Icon>For More Info
                            </Button>
                            </div>
                        </div>
                    </Card>
                </Grid>
                <Grid>
                    <Card>
                        <img className={classes.imgCard} src="https://acmconnect.com/wp-content/uploads/2015/07/Screenshot-1276-1024x576.png" alt="Card-img" style={{height: "400px", width: "600px", display: "block"}}/>
                        <div className={classes.imgCardOverlay}>
                            <div align="center" style={{marginTop:"300px"}}>
                            <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank">
                                <Icon className={classes.icons}>open_in_new</Icon>For More Info
                            </Button>
                            </div>
                        </div>
                    </Card>
                </Grid>
            </GridContainer>
        </div>
    );
}

export default DataService;