tbg-ecomm-nextjs/pages-sections/home/CoreValue.js

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";

// @material-ui/icons
import Chat from "@material-ui/icons/Chat";
import VerifiedUser from "@material-ui/icons/VerifiedUser";
import Fingerprint from "@material-ui/icons/Fingerprint";
// core components
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import InfoArea from "components/InfoArea/InfoArea.js";
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';

import styles from "assets/jss/nextjs-material-kit/pages/landingPageSections/productStyle.js";
import Card from "components/Card/Card.js";

import core1 from "assets/img/core/core1.png";
import core2 from "assets/img/core/core2.png";
import core3 from "assets/img/core/core3.png";
import core4 from "assets/img/core/core4.png";
import core5 from "assets/img/core/core5.png";
import { SignalCellularConnectedNoInternet1BarSharp } from "@material-ui/icons";

const useStyles = makeStyles(styles);

export default function ProductSection() {
  const classes = useStyles();
  return (
    <div className={classes.section}>
      <h2 className={classes.title}>Thamrin Group Core Value</h2>
      <div align="center">
        <Grid container>
          <GridItem xs={4}>
            <br/>
            <div align="center">
              <img src={core1}/>
              <InfoArea
                title="TRUST"
                iconColor="success"
                vertical
              />
            </div>
          </GridItem>
          <GridItem xs={4}>
            <br/>
            <div align="center">
              <img src={core2}/>
              <InfoArea
                title="CUSTOMER FOCUS"
                iconColor="success"
                vertical
              />
            </div>
          </GridItem>
          <GridItem xs={4}>
            <br/>
            <div align="center">
              <img src={core3}/>
              <InfoArea
                title="COMMUNICATION"
                iconColor="success"
                vertical
              />
            </div>
          </GridItem>
          </Grid>
          <Grid container>
          <GridItem xs={6}>
            <br/>
            <div align="center">
              <img src={core4}/>
              <InfoArea
                title="CONTINUOUS IMPROVEMENT"
                iconColor="success"
                vertical
              />
            </div>
          </GridItem>
          <GridItem xs={6}>
            <br/>
            <div align="center">
              <img src={core5}/>
              <InfoArea
                title="TEAMWORK"
                iconColor="success"
                vertical
              />
            </div>
          </GridItem>
          </Grid>
        </div>
    </div>
  );
}