Material-Ui Testimonials Components in Nereus library

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';

const useStyles = makeStyles((theme) => ({
  logoWrapper: {
    backgroundColor: theme.palette.background.emphasis,
  },
  logo: {
    height: 48,
    marginTop: theme.spacing(4),
    marginBottom: theme.spacing(4)
  }
}));

export default function Testimonials(props) {
  const classes = useStyles();

  const content = {
    'header': 'LOREM IPSUM DOLOR SIT AMET CONSECTUTAR',
    'logo1': 'nereus-assets/img/logos/apple.svg',
    'logo2': 'nereus-assets/img/logos/facebook.svg',
    'logo3': 'nereus-assets/img/logos/marvel.svg',
    'logo4': 'nereus-assets/img/logos/react.svg',
    'logo5': 'nereus-assets/img/logos/nike.svg',
    'logo6': 'nereus-assets/img/logos/airbnb.svg',
    'logo7': 'nereus-assets/img/logos/php.svg',
    'logo8': 'nereus-assets/img/logos/tesla.svg',
    ...props.content
  };

  return (
    <section>
      <Container maxWidth="lg">
        <Box py={3}>
          <Box mb={2}>
            <Typography variant="overline" component="h3" color="textSecondary" align="center">{content['header']}</Typography>
          </Box>
          <Grid container spacing={2}>
            <Grid item xs={6} sm={3}>
              <Box display="flex" justifyContent="center" className={classes.logoWrapper}>
                <img src={content['logo1']} alt="" className={classes.logo} />
              </Box>
            </Grid>
            <Grid item xs={6} sm={3}>
              <Box display="flex" justifyContent="center" className={classes.logoWrapper}>
                <img src={content['logo2']} alt="" className={classes.logo} />
              </Box>
            </Grid>
            <Grid item xs={6} sm={3}>
              <Box display="flex" justifyContent="center" className={classes.logoWrapper}>
                <img src={content['logo3']} alt="" className={classes.logo} />
              </Box>
            </Grid>
            <Grid item xs={6} sm={3}>
              <Box display="flex" justifyContent="center" className={classes.logoWrapper}>
                <img src={content['logo4']} alt="" className={classes.logo} />
              </Box>
            </Grid>
            <Grid item xs={6} sm={3}>
              <Box display="flex" justifyContent="center" className={classes.logoWrapper}>
                <img src={content['logo5']} alt="" className={classes.logo} />
              </Box>
            </Grid>
            <Grid item xs={6} sm={3}>
              <Box display="flex" justifyContent="center" className={classes.logoWrapper}>
                <img src={content['logo6']} alt="" className={classes.logo} />
              </Box>
            </Grid>
            <Grid item xs={6} sm={3}>
              <Box display="flex" justifyContent="center" className={classes.logoWrapper}>
                <img src={content['logo7']} alt="" className={classes.logo} />
              </Box>
            </Grid>
            <Grid item xs={6} sm={3}>
              <Box display="flex" justifyContent="center" className={classes.logoWrapper}>
                <img src={content['logo8']} alt="" className={classes.logo} />
              </Box>
            </Grid>
          </Grid>
        </Box>
      </Container>
    </section>
  );
}