tbg-ecomm-nextjs/components/Footer/Footer.js

/*eslint-disable*/
import React from "react";
// nodejs library to set properties for components
import PropTypes from "prop-types";
// nodejs library that concatenates classes
import classNames from "classnames";
// material-ui core components
import { List, ListItem } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

// @material-ui/icons
import Favorite from "@material-ui/icons/Favorite";

import GridContainer from "components/Grid/GridContainer.js";
import Grid from '@material-ui/core/Grid';
import GridItem from "components/Grid/GridItem.js";
import Paper from '@material-ui/core/Paper';
import Card from "components/Card/Card.js";
import styles from "assets/jss/nextjs-material-kit/components/footerStyle.js";

// import iconfb from "assets/img/sosmed/iconfb.png";
// import iconig from "assets/img/sosmed/iconig.png";
// import icontwt from "assets/img/sosmed/icontwt.png";
// import iconyt from "assets/img/sosmed/iconyt.png";

const useStyles = makeStyles(styles);

export default function Footer(props) {
  const classes = useStyles();
  const { whiteFont } = props;
  const footerClasses = classNames({
    [classes.footer]: true,
    [classes.footerWhiteFont]: whiteFont
  });
  const aClasses = classNames({
    [classes.a]: true,
    [classes.footerWhiteFont]: whiteFont
  });
  return (
    <div>
    <GridContainer style={{padding: "40px"}} justify="center">
      <Grid>
        <div align="center" style={{marginTop:"-20px"}}>
          <img className={classes.imgCard} src="https://1.bp.blogspot.com/-GTTVvnJ9x0c/Wn70CJxGoYI/AAAAAAAACRY/GSv1ehPFOPQZcvOfiALy_p7Xa7GOBRHKgCLcBGAs/s320/TB.pn" style={{width:"350px"}}/>
          <img className={classes.imgCard} src="https://belimotoryuk.com/wp-content/uploads/2017/03/cropped-logo-yamaha.png" style={{width:"350px"}}/>
        </div>
      </Grid>
      <Grid>
        <div>
          <footer className={footerClasses}>
            <div className={classes.container}>
              <div className={classes.left}>
                <List className={classes.list}>
                  <ListItem className={classes.inlineBlock}>
                    <a href="/yamaha/home" className={classes.block} > Home </a>
                  </ListItem>
                  <ListItem className={classes.inlineBlock}>
                    <a href="/yamaha/product/product" className={classes.block}> Motor </a>
                  </ListItem>
                  <ListItem className={classes.inlineBlock}>
                    <a href="/yamaha/product/ygp" className={classes.block}> YGP </a>
                  </ListItem>
                  <ListItem className={classes.inlineBlock}>
                    <a href="/yamaha/product/yamalube" className={classes.block}> Yamalube </a>
                  </ListItem>
                  <ListItem className={classes.inlineBlock}>
                    <a href="/yamaha/product/apparel" className={classes.block}> Apparel </a>
                  </ListItem>
                  <ListItem className={classes.inlineBlock}>
                    <a href="/yamaha/product/helmet" className={classes.block}> Helmet </a>
                  </ListItem>
                  <ListItem className={classes.inlineBlock}>
                    <a href="/yamaha/product/accessories" className={classes.block}> Accessories </a>
                  </ListItem>
                  <ListItem className={classes.inlineBlock}>
                    <a href="/yamaha/product/service" className={classes.block}> Service </a>
                  </ListItem>
                  <ListItem className={classes.inlineBlock}>
                    <a href="/yamaha/product/dealer" className={classes.block}> Dealer </a>
                  </ListItem>
                  <ListItem className={classes.inlineBlock}>
                    <a href="/yamaha/latestsnews" className={classes.block}> Latest News </a>
                  </ListItem>
                  <ListItem className={classes.inlineBlock}>
                    <a href="/yamaha/carrer" className={classes.block}> Carrer </a>
                  </ListItem>
                  <ListItem className={classes.inlineBlock}>
                    <a href="/yamaha/about_us/aboutus" className={classes.block}> About Us </a>
                  </ListItem>
                </List>
              </div>
            </div>
          </footer>
        </div>
      </Grid>
    </GridContainer>
    <GridContainer style={{marginTop: "-100px", padding:"50px"}} justify="center">
      <Grid>
        <div>
          <footer className={footerClasses}>
            <div className={classes.container}>
              <div className={classes.left}>
              <List className={classes.list}>
                  <ListItem className={classes.inlineBlock}>
                    <a href="/yamaha/home" className={classes.block} >Facebook</a>
                  </ListItem>
                  <ListItem className={classes.inlineBlock}>
                    <a href="/yamaha/product/product" className={classes.block}>Instagram</a>
                  </ListItem>
                  <ListItem className={classes.inlineBlock}>
                    <a href="/yamaha/product/ygp" className={classes.block}>Twitter</a>
                  </ListItem>
                  <ListItem className={classes.inlineBlock}>
                    <a href="/yamaha/product/yamalube" className={classes.block}>Youtube</a>
                  </ListItem>
                </List>
              </div>
            </div>
          </footer>
        </div>
      </Grid>
    </GridContainer>
    <GridContainer style={{marginTop: "-40px"}} justify="center">
    <Grid>
      <div align="center">
      <div className={classes.right}>
              &copy; {1900 + new Date().getYear()} , All Right Reserved{" "} by{" "} @Thamrin Group Company
          </div>
      </div>
    </Grid>
  </GridContainer>
  </div>
  );
}

Footer.propTypes = {
  whiteFont: PropTypes.bool
};