text: import React from "react";
  
  // nodejs library that concatenates classes
  import classNames from "classnames";
  
  // core components
  import GridContainer from "components/Grid/GridContainer.js";
  import GridItem from "components/Grid/GridItem.js";
  
  // @material-ui/core components
  import { makeStyles } from "@material-ui/core/styles";
  
  import officeStyle from "assets/jss/material-kit-pro-react/views/aboutUsSections/officeStyle.js";
  
  // event photos
  import event1 from "assets/img/examples/event1.jpg";
  import event2 from "assets/img/examples/event2.JPG";
  import event3 from "assets/img/examples/event3.JPG";
  import event4 from "assets/img/examples/event4.JPG";
  import event5 from "assets/img/examples/event5.jpg";
  
  const useStyles = makeStyles(officeStyle);
  
  export default function SectionOffice() {
    const classes = useStyles();
    return (
      <div className={classes.office}>
        <GridContainer className={classes.textCenter}>
          <GridItem
            md={8}
            sm={8}
            className={classNames(classes.mrAuto, classes.mlAuto)}
          >
            <h2 className={classes.title}>We provide amazing events to our members</h2>
            <h4 className={classes.description}>
              Here are some pictures from our past events. You can see many students get help
              and make friends through our events. Our events have successfully helped over
              100 students who need help.
            </h4>
          </GridItem>
        </GridContainer>
        <GridContainer>
          <GridItem md={4} sm={4}>
            <img
              className={classNames(
                classes.imgRaised,
                classes.imgFluid,
                classes.rounded
              )}
              src={event1}
              alt="event1"
            />
          </GridItem>
          <GridItem md={4} sm={4}>
            <img
              className={classNames(
                classes.imgRaised,
                classes.imgFluid,
                classes.rounded
              )}
              src={event2}
              alt="event2"
            />
          </GridItem>
          <GridItem md={4} sm={4}>
            <img
              className={classNames(
                classes.imgRaised,
                classes.imgFluid,
                classes.rounded
              )}
              src={event3}
              alt="event3"
            />
          </GridItem>
          <GridItem md={6} sm={6}>
            <img
              className={classNames(
                classes.imgRaised,
                classes.imgFluid,
                classes.rounded
              )}
              src={event4}
              alt="event4"
            />
          </GridItem>
          <GridItem md={6} sm={6}>
            <img
              className={classNames(
                classes.imgRaised,
                classes.imgFluid,
                classes.rounded
              )}
              src={event5}
              alt="event5"
            />
          </GridItem>
        </GridContainer>
      </div>
    );
  }
  