text: // React js
  import * as React from 'react'
  
  // material ui
  import { styled } from '@mui/material/styles'
  import Box from '@mui/material/Box'
  import Paper from '@mui/material/Paper'
  import Grid from '@mui/material/Grid'
  
  // component styles
  import styles from '../../styles/homePresentation/videoPresentation.module.css'
  
  // component
  import PresentationComponent from './presentationComponent'
  import VideoPresentation from './videoPresentation'
  
  // constants
  const Item = styled(Paper)(({ theme }) => ({
      ...theme.typography.h4,
      marginBottom: 3,
      padding: theme.spacing(1),
      textAlign: 'center',
      color: theme.palette.text.secondary,
      fontWeight: 'bold',
  }))
  
  let BasicGrid = () => {
      return (
          <Box className={styles.box}>
              <Grid container spacing={2}>
                  <Grid item xs={12}>
                      <Item elevation={0}>JS WEB DEVELOPER</Item>
                  </Grid>
                  <Grid item xs={12} md={5}>
                      <Paper elevation={0}>
                          <PresentationComponent />
                      </Paper>
                  </Grid>
                  <Grid item xs={12} md={7}>
                      <Paper elevation={0} className={styles.media}>
                          <VideoPresentation />
                      </Paper>
                  </Grid>
              </Grid>
          </Box>
      )
  }
  
  export default BasicGrid
  