Merge personal area.

src/components/AuthUser/Dashboard/HomePage/HomePage.tsx

 import React, { FC } from 'react';
-import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
-
-import { AuthRoutes } from 'api/routes';
+import { makeStyles } from '@material-ui/core/styles';
 import {
-  AppBar,
-  Toolbar,
+  CssBaseline,
+  Grid,
   Typography,
-  Button,
-  Drawer,
-  List,
-  ListItem,
-  ListItemText,
+  Hidden,
+  createMuiTheme,
+  responsiveFontSizes,
+  MuiThemeProvider,
+  Container,
 } from '@material-ui/core';
-import { Link } from 'react-router-dom';
+import { MapElement } from 'components/AuthUser/Dashboard/HomePage/MapElement';
+import { NavBarLogin } from 'components/AuthUser/Dashboard/HomePage/NavBarLogin';
+import { Numbers } from 'components/AuthUser/Dashboard/HomePage/Numbers';
+import { Steps } from 'components/AuthUser/Dashboard/HomePage/Steps';
+import { NavBar } from 'components/AuthUser/Dashboard/HomePage/NavBar';
+import { Reservation } from 'components/AuthUser/Dashboard/ReservationPage/Reservation/Reservation';
 
-const drawerWidth = 240;
+let themeResp = createMuiTheme();
+themeResp = responsiveFontSizes(themeResp);
 
-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),
-    },
-  }),
-);
+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 (
-    <div className={classes.root}>
-      <AppBar position="fixed" className={classes.appBar}>
-        <Toolbar>
-          <Typography variant="h6" noWrap>
-            Moveaid
+    <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>
-          <Button variant="contained">
-            <Link to={`/dashboard${AuthRoutes.profile}`}>Profile</Link>
-          </Button>
-        </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>
+        </Grid>
+        <Grid item xs={2} />
+      </Grid>
+
+      <Numbers />
+    </Grid>
   );
 };