Source: pages-sections/LandingPage-Sections/ProductSection.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";
import DirectionsBikeIcon from "@material-ui/icons/DirectionsBike";
import WcIcon from "@material-ui/icons/Wc";
import FastfoodIcon from "@material-ui/icons/Fastfood";

// core components
import GridContainer from "/components/Grid/GridContainer.js";
import GridItem from "/components/Grid/GridItem.js";
import InfoArea from "/components/InfoArea/InfoArea.js";

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

const useStyles = makeStyles(styles);

/**
 * The ProductSection function renders a section displaying information about routes, toilets, and food
 * options for exercise activities in Singapore.
 * @returns The `ProductSection` function is returning a JSX element that represents a section of a
 * product page. It includes a title, description, and three `InfoArea` components displaying
 * information about routes, toilets, and food options.
 */
export function ProductSection() {
  const classes = useStyles();
  return (
    <div className={classes.section}>
      <GridContainer justify="center">
        <GridItem xs={12} sm={12} md={8}>
          <h2 className={classes.title}>What can you do here?</h2>
          <h5 className={classes.description}>
            Ever wonder where what routes you can run or cycle in Singapore?
            What about the various points of interests you can see during your
            exercise? Sign up to learn more now!
          </h5>
        </GridItem>
      </GridContainer>
      <div>
        <GridContainer>
          <GridItem xs={12} sm={12} md={4}>
            <InfoArea
              title="Routes"
              description="Where to ride?"
              icon={DirectionsBikeIcon}
              iconColor="info"
              vertical
            />
          </GridItem>
          <GridItem xs={12} sm={12} md={4}>
            <InfoArea
              title="Toilets"
              description="Where are the washrooms?"
              icon={WcIcon}
              iconColor="success"
              vertical
            />
          </GridItem>
          <GridItem xs={12} sm={12} md={4}>
            <InfoArea
              title="Food"
              description="What to eat?"
              icon={FastfoodIcon}
              iconColor="danger"
              vertical
            />
          </GridItem>
        </GridContainer>
      </div>
    </div>
  );
}