Steps.tsx

import React, { FC } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Grid, Typography, CardContent, Card, Hidden } from '@material-ui/core';
import VpnKeyIcon from '@material-ui/icons/VpnKey';
import BookmarkIcon from '@material-ui/icons/Bookmark';
import RoomIcon from '@material-ui/icons/Room';
import { stepsStyle } from './Steps.style';

export const Steps: FC = () => {
  const classes = stepsStyle();

  return (
    <Grid item container alignItems="stretch">
      <Grid item xs={1} lg={2} />

      <Grid item xs={10} lg={2} component={Card} className={classes.paddingBot}>
        <CardContent>
          <Typography
            variant="h2"
            className={classes.bodyTextLarger}
            align="center"
          >
            STEP 1
          </Typography>

          <Grid
            container
            spacing={0}
            direction="column"
            alignItems="center"
            justify="center"
          >
            <Grid item xs={12}>
              <VpnKeyIcon color="primary" className={classes.bodyIcon} />
            </Grid>
          </Grid>

          <Typography variant="body1" className={classes.bodyText}>
            Log In or Register an account on the site. Fill all the fields
            related to your personal information.
          </Typography>
        </CardContent>
      </Grid>

      <Grid item xs={1} />

      <Hidden lgUp>
        <Grid
          item
          xs={12}
          component={Card}
          className={`${classes.paddingBot} ${classes.noShadow}`}
        />
        <Grid item xs={1} />
      </Hidden>

      <Grid item xs={10} lg={2} component={Card} className={classes.paddingBot}>
        <CardContent>
          <Typography
            variant="h2"
            className={classes.bodyTextLarger}
            align="center"
          >
            STEP 2
          </Typography>

          <Grid
            container
            spacing={0}
            direction="column"
            alignItems="center"
            justify="center"
          >
            <Grid item xs={12}>
              <BookmarkIcon color="primary" className={classes.bodyIcon} />
            </Grid>
          </Grid>

          <Typography variant="body1" className={classes.bodyText}>
            Book in the reservation section a free ride at least 48h than your
            appointment
          </Typography>
        </CardContent>
      </Grid>

      <Grid item xs={1} />
      <Hidden lgUp>
        <Grid
          item
          xs={12}
          component={Card}
          className={`${classes.paddingBot} ${classes.noShadow}`}
        />
        <Grid item xs={1} />
      </Hidden>

      <Grid item xs={10} lg={2} component={Card} className={classes.paddingBot}>
        <CardContent>
          <Typography
            variant="h2"
            className={classes.bodyTextLarger}
            align="center"
          >
            STEP 3
          </Typography>

          <Grid
            container
            spacing={0}
            direction="column"
            alignItems="center"
            justify="center"
          >
            <Grid item xs={12}>
              <RoomIcon color="primary" className={classes.bodyIcon} />
            </Grid>
          </Grid>

          <Typography variant="body1" className={classes.bodyText}>
            Wait your free drive compfortably at home and reach the place you
            have booked in the reservation easily!
          </Typography>
        </CardContent>
      </Grid>

      <Grid item xs={1} lg={2} />
    </Grid>
  );
};