Material-Ui Team Components

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';
import Typography from '@material-ui/core/Typography';
import Avatar from '@material-ui/core/Avatar';

const useStyles = makeStyles((theme) => ({
  avatar: {
    width: theme.spacing(12),
    height: theme.spacing(12),
    marginLeft: 'auto',
    marginRight: 'auto',
    marginBottom: theme.spacing(2)
  },
}));

export default function Team(props) {
  const classes = useStyles();
  
  const content = {
    'badge': 'LOREM IPSUM',
    'header-p1': 'Donec lacinia',
    'header-p2': 'turpis non sapien lobortis pretium',
    'description': 'Integer feugiat massa sapien, vitae tristique metus suscipit nec.',
    '01_image': 'https://images.unsplash.com/photo-1557862921-37829c790f19?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd91&w=256&ah=256&q=80',
    '01_name': 'Danny Bailey',
    '01_job': 'CEO & Founder',

    '02_image': 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&w=256&ah=256&q=80',
    '02_name': 'Alice Bradley',
    '02_job': 'Head of Operations',

    '03_image': 'https://images.unsplash.com/photo-1560298803-1d998f6b5249?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd91&w=256&ah=256&q=80',
    '03_name': 'Ian Brown',
    '03_job': 'Head of Development',

    '04_image': 'https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd91&w=256&ah=256&q=80',
    '04_name': 'Daisy Carter',
    '04_job': 'Sales Director',

    '05_image': 'https://images.unsplash.com/photo-1557862921-37829c790f19?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd91&w=256&ah=256&q=80',
    '05_name': 'Danny Bailey',
    '05_job': 'CEO & Founder',

    '06_image': 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&w=256&ah=256&q=80',
    '06_name': 'Alice Bradley',
    '06_job': 'Head of Operations',

    '07_image': 'https://images.unsplash.com/photo-1560298803-1d998f6b5249?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd91&w=256&ah=256&q=80',
    '07_name': 'Ian Brown',
    '07_job': 'Head of Development',

    '08_image': 'https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd91&w=256&ah=256&q=80',
    '08_name': 'Daisy Carter',
    '08_job': 'Sales Director',
    ...props.content
  };

  return (
    <section>
      <Container maxWidth="lg">
        <Box pt={8} pb={12} textAlign="center">
          <Box mb={9}>
            <Container maxWidth="sm">
              <Typography variant="overline" color="textSecondary" paragraph={true}>{content['badge']}</Typography>
              <Typography variant="h3" component="h2" gutterBottom={true}>
                <Typography variant="h3" component="span" color="primary">{content['header-p1']} </Typography>
                <Typography variant="h3" component="span">{content['header-p2']}</Typography>
              </Typography>
              <Typography variant="subtitle1" color="textSecondary" paragraph={true}>{content['description']}</Typography>
            </Container>
          </Box>
          <Grid container spacing={6}>
            <Grid item xs={12} sm={6} md={3}>
              <Avatar alt="" src={content['01_image']} className={classes.avatar} />
              <Typography variant="h6" component="h6" gutterBottom={true}>{content['01_name']}</Typography>
              <Typography variant="body1" color="textSecondary" component="span">{content['01_job']}</Typography>
            </Grid>
            <Grid item xs={12} sm={6} md={3}>
              <Avatar alt="" src={content['02_image']} className={classes.avatar} />
              <Typography variant="h6" component="h6" gutterBottom={true}>{content['02_name']}</Typography>
              <Typography variant="body1" color="textSecondary" component="span">{content['02_job']}</Typography>
            </Grid>
            <Grid item xs={12} sm={6} md={3}>
              <Avatar alt="" src={content['03_image']} className={classes.avatar} />
              <Typography variant="h6" component="h6" gutterBottom={true}>{content['03_name']}</Typography>
              <Typography variant="body1" color="textSecondary" component="span">{content['03_job']}</Typography>
            </Grid>
            <Grid item xs={12} sm={6} md={3}>
              <Avatar alt="" src={content['04_image']} className={classes.avatar} />
              <Typography variant="h6" component="h6" gutterBottom={true}>{content['04_name']}</Typography>
              <Typography variant="body1" color="textSecondary" component="span">{content['04_job']}</Typography>
            </Grid>
            <Grid item xs={12} sm={6} md={3}>
              <Avatar alt="" src={content['05_image']} className={classes.avatar} />
              <Typography variant="h6" component="h6" gutterBottom={true}>{content['05_name']}</Typography>
              <Typography variant="body1" color="textSecondary" component="span">{content['05_job']}</Typography>
            </Grid>
            <Grid item xs={12} sm={6} md={3}>
              <Avatar alt="" src={content['06_image']} className={classes.avatar} />
              <Typography variant="h6" component="h6" gutterBottom={true}>{content['06_name']}</Typography>
              <Typography variant="body1" color="textSecondary" component="span">{content['06_job']}</Typography>
            </Grid>
            <Grid item xs={12} sm={6} md={3}>
              <Avatar alt="" src={content['07_image']} className={classes.avatar} />
              <Typography variant="h6" component="h6" gutterBottom={true}>{content['07_name']}</Typography>
              <Typography variant="body1" color="textSecondary" component="span">{content['07_job']}</Typography>
            </Grid>
            <Grid item xs={12} sm={6} md={3}>
              <Avatar alt="" src={content['08_image']} className={classes.avatar} />
              <Typography variant="h6" component="h6" gutterBottom={true}>{content['08_name']}</Typography>
              <Typography variant="body1" color="textSecondary" component="span">{content['08_job']}</Typography>
            </Grid>
          </Grid>
        </Box>
      </Container>
    </section>
  );
}