Reset.j

src/components/AuthUser/HomePage/HomePage.tsx

-import React, { FC } from 'react';
-import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
-import Drawer from '@material-ui/core/Drawer';
-import AppBar from '@material-ui/core/AppBar';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import Toolbar from '@material-ui/core/Toolbar';
-import List from '@material-ui/core/List';
-import Typography from '@material-ui/core/Typography';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
-
-const drawerWidth = 240;
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      display: 'flex',
-    },
-    appBar: {
-      zIndex: theme.zIndex.drawer + 1,
-    },
-    drawer: {
-      width: drawerWidth,
-      flexShrink: 0,
-    },
-    drawerPaper: {
-      width: drawerWidth,
-    },
-    drawerContainer: {
-      overflow: 'auto',
-    },
-    content: {
-      flexGrow: 1,
-      padding: theme.spacing(3),
-    },
-  }),
-);
-
-export const HomePage: FC = () => {
-  const classes = useStyles();
-
-  return (
-    <div className={classes.root}>
-      <CssBaseline />
-      <AppBar position="fixed" className={classes.appBar}>
-        <Toolbar>
-          <Typography variant="h6" noWrap>
-            Moveaid
-          </Typography>
-        </Toolbar>
-      </AppBar>
-      <Drawer
-        className={classes.drawer}
-        variant="permanent"
-        classes={{
-          paper: classes.drawerPaper,
-        }}
-      >
-        <Toolbar />
-        <div className={classes.drawerContainer}>
-          <List>
-            {['Reservation'].map((text) => (
-              <ListItem button key={text}>
-                <ListItemText primary={text} />
-              </ListItem>
-            ))}
-          </List>
-        </div>
-      </Drawer>
-      <main className={classes.content}>
-        <Toolbar />
-        <Typography paragraph>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus
-          dolor purus non enim praesent elementum facilisis leo vel. Risus at
-          ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum
-          quisque non tellus. Convallis convallis tellus id interdum velit
-          laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed
-          adipiscing. Amet nisl suscipit adipiscing bibendum est ultricies
-          integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate
-          eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo
-          quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat
-          vivamus at augue. At augue eget arcu dictum varius duis at consectetur
-          lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa sapien
-          faucibus et molestie ac.
-        </Typography>
-        <Typography paragraph>
-          Consequat mauris nunc congue nisi vitae suscipit. Fringilla est
-          ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar
-          elementum integer enim neque volutpat ac tincidunt. Ornare suspendisse
-          sed nisi lacus sed viverra tellus. Purus sit amet volutpat consequat
-          mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis
-          risus sed vulputate odio. Morbi tincidunt ornare massa eget egestas
-          purus viverra accumsan in. In hendrerit gravida rutrum quisque non
-          tellus orci ac. Pellentesque nec nam aliquam sem et tortor. Habitant
-          morbi tristique senectus et. Adipiscing elit duis tristique
-          sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis
-          eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla
-          posuere sollicitudin aliquam ultrices sagittis orci a.
-        </Typography>
-      </main>
-    </div>
-  );
-};

src/components/AuthUser/Homepage/HomePage.tsx

-import React, { FC } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import {
-  CssBaseline,
-  Grid,
-  Typography,
-  Hidden,
-  createMuiTheme,
-  responsiveFontSizes,
-  MuiThemeProvider,
-  Container,
-} from '@material-ui/core';
-
-import { MapElement } from 'components/AuthUser/HomePage/MapElement';
-import { NavBar } from 'components/AuthUser/HomePage/NavBar';
-import { NavBarLogin } from 'components/AuthUser/HomePage/NavBarLogin';
-import { Steps } from 'components/AuthUser/HomePage/Steps';
-import { Reservation } from 'components/AuthUser/ReservationPage/Reservation/Reservation';
-import { Numbers } from 'components/AuthUser/HomePage/Numbers';
-
-let themeResp = createMuiTheme();
-themeResp = responsiveFontSizes(themeResp);
-
-const useStyles = makeStyles(() => ({
-  root: {
-    minHeight: '100vh',
-    backgroundImage: `url(${'/assets/bg3.png'})`,
-    backgroundRepeat: 'no-repeat',
-    backgroundSize: 'cover',
-  },
-  rightAlign: {
-    marginLeft: 'auto',
-  },
-  whiteText: {
-    color: 'white',
-  },
-  imageIcon: {
-    maxHeight: '50%',
-  },
-  paddingBottom: {
-    paddingBottom: '65px',
-  },
-  paddingTop: {
-    paddingTop: '65px',
-  },
-  bodyIcon: {
-    fontSize: '90px',
-    paddingBottom: '10px',
-    paddingTop: '10px',
-  },
-  contIcon: {
-    width: '100%',
-    left: '0',
-    right: '0',
-  },
-  noShadow: {
-    border: 'none',
-    boxShadow: 'none',
-    backgroundColor: 'transparent',
-  },
-}));
-
-export const HomePage: FC = () => {
-  const classes = useStyles();
-
-  return (
-    <Grid container direction="column" className={classes.paddingBottom}>
-      <div className={classes.root}>
-        <CssBaseline />
-
-        <Grid item>
-          <NavBar />
-        </Grid>
-
-        <MuiThemeProvider theme={themeResp}>
-          <Grid item container className={classes.paddingBottom}>
-            <Grid item xs={1} md={2} lg={2} />
-
-            <Grid item xs={10} md={6} lg={4}>
-              <Typography variant="h2" className={classes.whiteText}>
-                Book Free Rides Now With
-              </Typography>
-              <Typography variant="h1" className={classes.whiteText}>
-                MOVE AID
-              </Typography>
-            </Grid>
-
-            <Grid item xs={false} md={3} lg={5}>
-              <Hidden mdDown>
-                <Container>
-                  <MapElement />
-                </Container>
-              </Hidden>
-            </Grid>
-
-            <Grid item xs={1} />
-          </Grid>
-
-          <Steps />
-        </MuiThemeProvider>
-      </div>
-
-      <Grid item container className={classes.paddingTop}>
-        <Grid item xs={2} />
-        <Grid item xs={8}>
-          <Typography variant="h3">Your Next Reservation</Typography>
-        </Grid>
-        <Grid item xs={2} />
-      </Grid>
-
-      <Grid item container style={{ paddingTop: '20px' }}>
-        <Grid item xs={1} lg={2} />
-        <Grid item xs={10} lg={8}>
-          <Reservation />
-        </Grid>
-        <Grid item xs={1} lg={2} />
-      </Grid>
-
-      <Grid item container className={classes.paddingTop}>
-        <Grid item xs={2} />
-        <Grid item xs={8}>
-          <Typography variant="h3" align="right">
-            Some Our Numbers
-          </Typography>
-        </Grid>
-        <Grid item xs={2} />
-      </Grid>
-
-      <Numbers />
-    </Grid>
-  );
-};