Finish Homepage

public/assets/car1.svg:Zone.Identifier

+[ZoneTransfer]
+ZoneId=3
+HostUrl=about:internet

public/assets/map.svg

+<svg id="e937dd5c-1a88-46eb-b274-68931cd56025" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="923.8" height="753.71" viewBox="0 0 923.8 753.71"><title>map</title><ellipse cx="1007.29" cy="789.73" rx="19.99" ry="48.53" transform="translate(-401.49 870.42) rotate(-45)" fill="#ffffff" opacity="0.1"/><ellipse cx="872.63" cy="705.7" rx="10.73" ry="14.05" fill="#3f3d56"/><ellipse cx="872.63" cy="688.53" rx="10.73" ry="14.05" fill="#3f3d56"/><ellipse cx="872.63" cy="671.36" rx="10.73" ry="14.05" fill="#3f3d56"/><ellipse cx="872.63" cy="654.19" rx="10.73" ry="14.05" fill="#3f3d56"/><ellipse cx="872.63" cy="637.02" rx="10.73" ry="14.05" fill="#3f3d56"/><ellipse cx="872.63" cy="619.85" rx="10.73" ry="14.05" fill="#3f3d56"/><ellipse cx="872.63" cy="602.68" rx="10.73" ry="14.05" fill="#3f3d56"/><path d="M1050.9,558.33a51.13,51.13,0,0,0,4-5.88l-28.2-4.63,30.5.22a51.54,51.54,0,0,0,1-40.73l-40.91,21.23L1055,500.8a51.41,51.41,0,1,0-84.9,57.53,51.16,51.16,0,0,0-5.86,9.37l36.6,19-39-13.1a51.45,51.45,0,0,0,8.29,48.27,51.4,51.4,0,1,0,80.8,0,51.41,51.41,0,0,0,0-63.56Z" transform="translate(-138.1 -73.15)" fill="#ffffff"/><path d="M959.1,590.11a51.16,51.16,0,0,0,11,31.78,51.4,51.4,0,1,0,80.8,0C1057.79,613.15,959.1,584.34,959.1,590.11Z" transform="translate(-138.1 -73.15)" opacity="0.1"/><polygon points="846.97 0 846.97 720 602.97 686 306.36 746.51 303.97 747 67.97 682 67.97 56 312.97 0 580.97 56 591.16 53.85 846.97 0" fill="#444053"/><polygon points="805.97 39.32 805.97 683.53 587.66 653.11 322.27 707.25 320.13 707.68 108.97 649.53 108.97 89.42 328.19 39.32 567.97 89.42 577.09 87.5 805.97 39.32" fill="#fff"/><polygon points="602.97 686 306.36 746.51 312.97 0 580.97 56 591.16 53.85 602.97 686" opacity="0.1"/><g opacity="0.3"><polyline points="573.35 138 573.47 347.5 660.47 347.5 660.47 261.5 809.47 261.5 826.97 239.06" fill="none" stroke="#444053" stroke-miterlimit="10" stroke-width="3"/><polyline points="88.97 204.5 412.47 204.5 432.47 195.5 440.47 195.5 440.47 397.5 580.47 397.5 586.47 415.5 586.47 506.5 694.47 506.5 694.47 619" fill="none" stroke="#444053" stroke-miterlimit="10" stroke-width="3"/><line x1="483.2" y1="619" x2="483.2" y2="397.5" fill="none" stroke="#444053" stroke-miterlimit="10" stroke-width="3"/><line x1="826.97" y1="559.66" x2="483.2" y2="559.66" fill="none" stroke="#444053" stroke-miterlimit="10" stroke-width="3"/><line x1="740.87" y1="138" x2="740.87" y2="619" fill="none" stroke="#444053" stroke-miterlimit="10" stroke-width="3"/><line x1="87.97" y1="517.14" x2="826.97" y2="517.14" fill="none" stroke="#444053" stroke-miterlimit="10" stroke-width="3"/><line x1="177.91" y1="619" x2="177.91" y2="138" fill="none" stroke="#444053" stroke-miterlimit="10" stroke-width="3"/><line x1="349.69" y1="138" x2="349.69" y2="619" fill="none" stroke="#444053" stroke-miterlimit="10" stroke-width="3"/><line x1="88.97" y1="259.5" x2="660.47" y2="261.5" fill="none" stroke="#444053" stroke-miterlimit="10" stroke-width="3"/><line x1="255.3" y1="138.87" x2="255.3" y2="619" fill="none" stroke="#444053" stroke-miterlimit="10" stroke-width="3"/><polyline points="87.97 370.82 349.69 370.82 483.2 517.14" fill="none" stroke="#444053" stroke-miterlimit="10" stroke-width="3"/><line x1="512.12" y1="138" x2="512.12" y2="397.5" fill="none" stroke="#444053" stroke-miterlimit="10" stroke-width="3"/><line x1="483.2" y1="443.98" x2="826.97" y2="443.98" fill="none" stroke="#444053" stroke-miterlimit="10" stroke-width="3"/></g><polygon points="585.97 442 484.97 442 484.97 398 580.47 397.5 586.47 414.5 585.97 442" fill="#ffffff"/><path d="M674.07,287.15a55.28,55.28,0,0,0-55.28,55.28c0,30.53,55.28,129.72,55.28,129.72S729.35,373,729.35,342.43A55.28,55.28,0,0,0,674.07,287.15Zm0,78.86a24.32,24.32,0,1,1,24.32-24.32A24.32,24.32,0,0,1,674.07,366Z" transform="translate(-138.1 -73.15)" fill="#ffffff"/><path d="M674.07,287.15a55.28,55.28,0,0,0-55.28,55.28c0,30.53,55.28,129.72,55.28,129.72S729.35,373,729.35,342.43A55.28,55.28,0,0,0,674.07,287.15Zm0,78.86a24.32,24.32,0,1,1,24.32-24.32A24.32,24.32,0,0,1,674.07,366Z" transform="translate(-138.1 -73.15)" opacity="0.1"/><path d="M674.07,295.15a55.28,55.28,0,0,0-55.28,55.28c0,30.53,55.28,129.72,55.28,129.72S729.35,381,729.35,350.43A55.28,55.28,0,0,0,674.07,295.15Zm0,78.86a24.32,24.32,0,1,1,24.32-24.32A24.32,24.32,0,0,1,674.07,374Z" transform="translate(-138.1 -73.15)" fill="#ffffff"/><ellipse cx="649.86" cy="806.61" rx="33.45" ry="13.78" transform="translate(-404.13 249.64) rotate(-23.3)" fill="#ffffff" opacity="0.1"/><ellipse cx="511.39" cy="727.97" rx="7.4" ry="9.68" fill="#3f3d56"/><ellipse cx="511.39" cy="716.13" rx="7.4" ry="9.68" fill="#3f3d56"/><ellipse cx="511.39" cy="704.3" rx="7.4" ry="9.68" fill="#3f3d56"/><ellipse cx="511.39" cy="692.47" rx="7.4" ry="9.68" fill="#3f3d56"/><ellipse cx="511.39" cy="680.63" rx="7.4" ry="9.68" fill="#3f3d56"/><ellipse cx="511.39" cy="668.8" rx="7.4" ry="9.68" fill="#3f3d56"/><ellipse cx="511.39" cy="656.97" rx="7.4" ry="9.68" fill="#3f3d56"/><path d="M621.8,649.13a36.12,36.12,0,0,1-2.76-4l19.44-3.2-21,.16a35.54,35.54,0,0,1-.68-28.07L645,628.6l-26-19.12a35.43,35.43,0,1,1,58.51,39.65,35.55,35.55,0,0,1,4,6.46L656.3,668.7l26.9-9a35.45,35.45,0,0,1-5.71,33.27,35.43,35.43,0,1,1-55.69,0,35.44,35.44,0,0,1,0-43.81Z" transform="translate(-138.1 -73.15)" fill="#ffffff"/><path d="M685.07,671a35.28,35.28,0,0,1-7.58,21.91,35.43,35.43,0,1,1-55.69,0C617.05,686.91,685.07,667.06,685.07,671Z" transform="translate(-138.1 -73.15)" opacity="0.1"/><ellipse cx="186.29" cy="767.73" rx="19.99" ry="48.53" transform="translate(-626.4 283.44) rotate(-45)" fill="#ffffff" opacity="0.1"/><ellipse cx="51.63" cy="683.7" rx="10.73" ry="14.05" fill="#3f3d56"/><ellipse cx="51.63" cy="666.53" rx="10.73" ry="14.05" fill="#3f3d56"/><ellipse cx="51.63" cy="649.36" rx="10.73" ry="14.05" fill="#3f3d56"/><ellipse cx="51.63" cy="632.19" rx="10.73" ry="14.05" fill="#3f3d56"/><ellipse cx="51.63" cy="615.02" rx="10.73" ry="14.05" fill="#3f3d56"/><ellipse cx="51.63" cy="597.85" rx="10.73" ry="14.05" fill="#3f3d56"/><ellipse cx="51.63" cy="580.68" rx="10.73" ry="14.05" fill="#3f3d56"/><path d="M229.9,536.33a51.13,51.13,0,0,0,4-5.88l-28.2-4.63,30.5.22a51.54,51.54,0,0,0,1-40.73l-40.91,21.23L234,478.8a51.41,51.41,0,1,0-84.9,57.53,51.16,51.16,0,0,0-5.86,9.37l36.6,19-39-13.1a51.45,51.45,0,0,0,8.29,48.27,51.4,51.4,0,1,0,80.8,0,51.41,51.41,0,0,0,0-63.56Z" transform="translate(-138.1 -73.15)" fill="#ffffff"/><path d="M138.1,568.11a51.16,51.16,0,0,0,11,31.78,51.4,51.4,0,1,0,80.8,0C236.79,591.15,138.1,562.34,138.1,568.11Z" transform="translate(-138.1 -73.15)" opacity="0.1"/></svg>
\ No newline at end of file

public/assets/map.svg:Zone.Identifier

+[ZoneTransfer]
+ZoneId=3
+HostUrl=about:internet

src/assets/car.svg:Zone.Identifier

+[ZoneTransfer]
+ZoneId=3
+HostUrl=about:internet

src/components/AuthUser/HomePage2/HomePage2.tsx

 import React, { FC } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import { CssBaseline, Tabs, Tab } from '@material-ui/core';
-import HomeIcon from '@material-ui/icons/Home';
-import ImportContactsIcon from '@material-ui/icons/ImportContacts';
-import AccountCircleIcon from '@material-ui/icons/AccountCircle';
+import {
+  CssBaseline,
+  Grid,
+  Typography,
+  Hidden,
+  createMuiTheme,
+  responsiveFontSizes,
+  MuiThemeProvider,
+  Container,
+} from '@material-ui/core';
 
-const useStyles = makeStyles((theme) => ({
+import { MapElement } from './MapElement';
+import { NavBar } from './NavBar';
+import { NavBarLogin } from './NavBarLogin';
+import { Steps } from './Steps';
+import { Reservation } from './Reservation';
+import { Numbers } from './Numbers';
+
+let themeResp = createMuiTheme();
+themeResp = responsiveFontSizes(themeResp);
+
+const useStyles = makeStyles(() => ({
   root: {
     minHeight: '100vh',
-    backgroundImage: `url(${'/assets/bg2.png'})`,
+    backgroundImage: `url(${'/assets/bg3.png'})`,
     backgroundRepeat: 'no-repeat',
     backgroundSize: 'cover',
   },
-  tabs: {
+  rightAlign: {
+    marginLeft: 'auto',
+  },
+  whiteText: {
     color: 'white',
-    paddingLeft: '25px',
-    paddingRight: '25px',
-    paddingTop: '8px',
   },
-  tabPan: {
-    paddingLeft: '56px',
-    paddingRight: '56px',
+  imageIcon: {
+    maxHeight: '50%',
   },
-  rightAlign: {
-    marginLeft: 'auto',
+  paddingBottom: {
+    paddingBottom: '65px',
+  },
+  paddingTop: {
+    paddingTop: '65px',
+  },
+  bodyIcon: {
+    fontSize: '90px',
+    paddingBottom: '10px',
+    paddingTop: '10px',
   },
-  tabIcon: {
-    paddingRight: '10px',
-    fontSize: '38px',
+  contIcon: {
+    width: '100%',
+    left: '0',
+    right: '0',
+  },
+  noShadow: {
+    border: 'none',
+    boxShadow: 'none',
+    backgroundColor: 'transparent',
   },
 }));
 
 export const HomePage2: FC = () => {
   const classes = useStyles();
 
-  const [selectedTab, setSelectedTab] = React.useState(0);
-
   return (
-    <div className={classes.root}>
-      <CssBaseline />
-      <Tabs
-        value={selectedTab}
-        className={classes.tabs}
-        TabIndicatorProps={{ style: { display: 'none' } }}
-      >
-        <Tab
-          label="HomePage"
-          icon={<HomeIcon className={classes.tabIcon} />}
-          className={classes.tabPan}
-        />
-        <Tab
-          label="Reservation"
-          icon={<ImportContactsIcon className={classes.tabIcon} />}
-          className={`${classes.tabPan} ${classes.rightAlign}`}
-        />
-        <Tab
-          label="Profile"
-          className={classes.tabPan}
-          icon={<AccountCircleIcon className={classes.tabIcon} />}
-        />
-      </Tabs>
-    </div>
+    <Grid container direction="column" className={classes.paddingBottom}>
+      <div className={classes.root}>
+        <CssBaseline />
+
+        <Grid item>
+          <NavBarLogin />
+        </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>
   );
 };

src/components/AuthUser/HomePage2/MapElement.tsx

+/* eslint-disable react/jsx-props-no-spreading */
+import * as React from 'react';
+
+export const MapElement: React.FC = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    data-name="Layer 1"
+    xmlns="http://www.w3.org/2000/svg"
+    width={425}
+    height={364.74}
+    viewBox="0 0 923.8 753.71"
+    {...props}
+  >
+    <title>map</title>
+    <ellipse
+      cx={1007.29}
+      cy={789.73}
+      rx={19.99}
+      ry={48.53}
+      transform="rotate(-45 849.945 919.851)"
+      fill="#fff"
+      opacity={0.1}
+    />
+    <ellipse cx={872.63} cy={705.7} rx={10.73} ry={14.05} fill="#3f3d56" />
+    <ellipse cx={872.63} cy={688.53} rx={10.73} ry={14.05} fill="#3f3d56" />
+    <ellipse cx={872.63} cy={671.36} rx={10.73} ry={14.05} fill="#3f3d56" />
+    <ellipse cx={872.63} cy={654.19} rx={10.73} ry={14.05} fill="#3f3d56" />
+    <ellipse cx={872.63} cy={637.02} rx={10.73} ry={14.05} fill="#3f3d56" />
+    <ellipse cx={872.63} cy={619.85} rx={10.73} ry={14.05} fill="#3f3d56" />
+    <ellipse cx={872.63} cy={602.68} rx={10.73} ry={14.05} fill="#3f3d56" />
+    <path
+      d="M912.8 485.18a51.13 51.13 0 004-5.88l-28.2-4.63 30.5.22a51.54 51.54 0 001-40.73l-40.91 21.23 37.71-27.74a51.41 51.41 0 10-84.9 57.53 51.16 51.16 0 00-5.86 9.37l36.6 19-39-13.1a51.45 51.45 0 008.29 48.27 51.4 51.4 0 1080.8 0 51.41 51.41 0 000-63.56z"
+      fill="#fff"
+    />
+    <path
+      d="M821 516.96a51.16 51.16 0 0011 31.78 51.4 51.4 0 1080.8 0c6.89-8.74-91.8-37.55-91.8-31.78z"
+      opacity={0.1}
+    />
+    <path
+      fill="#444053"
+      d="M846.97 0v720l-244-34-296.61 60.51-2.39.49-236-65V56l245-56 268 56 10.19-2.15L846.97 0z"
+    />
+    <path
+      fill="#fff"
+      d="M805.97 39.32v644.21l-218.31-30.42-265.39 54.14-2.14.43-211.16-58.15V89.42l219.22-50.1 239.78 50.1 9.12-1.92 228.88-48.18z"
+    />
+    <path
+      opacity={0.1}
+      d="M602.97 686l-296.61 60.51L312.97 0l268 56 10.19-2.15L602.97 686z"
+    />
+    <g
+      opacity={0.3}
+      fill="none"
+      stroke="#444053"
+      strokeMiterlimit={10}
+      strokeWidth={3}
+    >
+      <path d="M573.35 138l.12 209.5h87v-86h149l17.5-22.44M88.97 204.5h323.5l20-9h8v202h140l6 18v91h108V619M483.2 619V397.5M826.97 559.66H483.2M740.87 138v481M87.97 517.14h739M177.91 619V138M349.69 138v481M88.97 259.5l571.5 2M255.3 138.87V619" />
+      <path d="M87.97 370.82h261.72L483.2 517.14M512.12 138v259.5M483.2 443.98h343.77" />
+    </g>
+    <path fill="#fff" d="M585.97 442h-101v-44l95.5-.5 6 17-.5 27.5z" />
+    <path
+      d="M535.97 214a55.28 55.28 0 00-55.28 55.28c0 30.53 55.28 129.72 55.28 129.72s55.28-99.15 55.28-129.72A55.28 55.28 0 00535.97 214zm0 78.86a24.32 24.32 0 1124.32-24.32 24.32 24.32 0 01-24.32 24.31z"
+      fill="#fff"
+    />
+    <path
+      d="M535.97 214a55.28 55.28 0 00-55.28 55.28c0 30.53 55.28 129.72 55.28 129.72s55.28-99.15 55.28-129.72A55.28 55.28 0 00535.97 214zm0 78.86a24.32 24.32 0 1124.32-24.32 24.32 24.32 0 01-24.32 24.31z"
+      opacity={0.1}
+    />
+    <path
+      d="M535.97 222a55.28 55.28 0 00-55.28 55.28c0 30.53 55.28 129.72 55.28 129.72s55.28-99.15 55.28-129.72A55.28 55.28 0 00535.97 222zm0 78.86a24.32 24.32 0 1124.32-24.32 24.32 24.32 0 01-24.32 24.31z"
+      fill="#fff"
+    />
+    <ellipse
+      cx={649.86}
+      cy={806.61}
+      rx={33.45}
+      ry={13.78}
+      transform="rotate(-23.3 403.328 1104.861)"
+      fill="#fff"
+      opacity={0.1}
+    />
+    <ellipse cx={511.39} cy={727.97} rx={7.4} ry={9.68} fill="#3f3d56" />
+    <ellipse cx={511.39} cy={716.13} rx={7.4} ry={9.68} fill="#3f3d56" />
+    <ellipse cx={511.39} cy={704.3} rx={7.4} ry={9.68} fill="#3f3d56" />
+    <ellipse cx={511.39} cy={692.47} rx={7.4} ry={9.68} fill="#3f3d56" />
+    <ellipse cx={511.39} cy={680.63} rx={7.4} ry={9.68} fill="#3f3d56" />
+    <ellipse cx={511.39} cy={668.8} rx={7.4} ry={9.68} fill="#3f3d56" />
+    <ellipse cx={511.39} cy={656.97} rx={7.4} ry={9.68} fill="#3f3d56" />
+    <path
+      d="M483.7 575.98a36.12 36.12 0 01-2.76-4l19.44-3.2-21 .16a35.54 35.54 0 01-.68-28.07l28.2 14.58-26-19.12a35.43 35.43 0 1158.51 39.65 35.55 35.55 0 014 6.46l-25.21 13.11 26.9-9a35.45 35.45 0 01-5.71 33.27 35.43 35.43 0 11-55.69 0 35.44 35.44 0 010-43.81z"
+      fill="#fff"
+    />
+    <path
+      d="M546.97 597.85a35.28 35.28 0 01-7.58 21.91 35.43 35.43 0 11-55.69 0c-4.75-6 63.27-25.85 63.27-21.91z"
+      opacity={0.1}
+    />
+    <ellipse
+      cx={186.29}
+      cy={767.73}
+      rx={19.99}
+      ry={48.53}
+      transform="rotate(-45 28.942 897.852)"
+      fill="#fff"
+      opacity={0.1}
+    />
+    <ellipse cx={51.63} cy={683.7} rx={10.73} ry={14.05} fill="#3f3d56" />
+    <ellipse cx={51.63} cy={666.53} rx={10.73} ry={14.05} fill="#3f3d56" />
+    <ellipse cx={51.63} cy={649.36} rx={10.73} ry={14.05} fill="#3f3d56" />
+    <ellipse cx={51.63} cy={632.19} rx={10.73} ry={14.05} fill="#3f3d56" />
+    <ellipse cx={51.63} cy={615.02} rx={10.73} ry={14.05} fill="#3f3d56" />
+    <ellipse cx={51.63} cy={597.85} rx={10.73} ry={14.05} fill="#3f3d56" />
+    <ellipse cx={51.63} cy={580.68} rx={10.73} ry={14.05} fill="#3f3d56" />
+    <path
+      d="M91.8 463.18a51.13 51.13 0 004-5.88l-28.2-4.63 30.5.22a51.54 51.54 0 001-40.73l-40.91 21.23 37.71-27.74A51.41 51.41 0 1011 463.18a51.16 51.16 0 00-5.86 9.37l36.6 19-39-13.1a51.45 51.45 0 008.29 48.27 51.4 51.4 0 1080.8 0 51.41 51.41 0 000-63.56z"
+      fill="#fff"
+    />
+    <path
+      d="M0 494.96a51.16 51.16 0 0011 31.78 51.4 51.4 0 1080.8 0C98.69 518 0 489.19 0 494.96z"
+      opacity={0.1}
+    />
+  </svg>
+);

src/components/AuthUser/HomePage2/NavBar.tsx

+import React, { FC } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { Tabs, Tab } from '@material-ui/core';
+import HomeIcon from '@material-ui/icons/Home';
+import ImportContactsIcon from '@material-ui/icons/ImportContacts';
+import AccountCircleIcon from '@material-ui/icons/AccountCircle';
+
+const useStyles = makeStyles(() => ({
+  tabs: {
+    color: 'white',
+    paddingLeft: '25px',
+    paddingRight: '25px',
+    paddingTop: '8px',
+    paddingBottom: '35px',
+  },
+  tabPan: {
+    paddingLeft: '56px',
+    paddingRight: '56px',
+  },
+  tabIcon: {
+    paddingRight: '10px',
+    fontSize: '38px',
+  },
+  rightAlign: {
+    marginLeft: 'auto',
+  },
+}));
+
+export const NavBar: FC = () => {
+  const classes = useStyles();
+
+  const [value, setValue] = React.useState(0);
+
+  const handleChange = (
+    event: React.ChangeEvent<unknown>,
+    newValue: number,
+  ): void => {
+    setValue(newValue);
+  };
+
+  return (
+    <Tabs
+      onChange={handleChange}
+      value={value}
+      className={classes.tabs}
+      TabIndicatorProps={{ style: { display: 'none' } }}
+    >
+      <Tab
+        label="HomePage"
+        icon={<HomeIcon className={classes.tabIcon} />}
+        className={classes.tabPan}
+      />
+      <Tab
+        label="Reservation"
+        icon={<ImportContactsIcon className={classes.tabIcon} />}
+        className={`${classes.tabPan} ${classes.rightAlign}`}
+      />
+      <Tab
+        label="Profile"
+        className={classes.tabPan}
+        icon={<AccountCircleIcon className={classes.tabIcon} />}
+      />
+    </Tabs>
+  );
+};

src/components/AuthUser/HomePage2/NavBarLogin.tsx

+import React, { FC } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { Tabs, Tab } from '@material-ui/core';
+import LockIcon from '@material-ui/icons/Lock';
+
+const useStyles = makeStyles(() => ({
+  tabs: {
+    color: 'white',
+    paddingLeft: '25px',
+    paddingRight: '25px',
+    paddingTop: '8px',
+    paddingBottom: '35px',
+  },
+  tabPan: {
+    paddingLeft: '56px',
+    paddingRight: '56px',
+  },
+  tabIcon: {
+    paddingRight: '10px',
+    fontSize: '38px',
+  },
+  rightAlign: {
+    marginLeft: 'auto',
+    backgroundColor: '#FFFFFF',
+  },
+}));
+
+export const NavBarLogin: FC = () => {
+  const classes = useStyles();
+
+  const [value, setValue] = React.useState(0);
+
+  const handleChange = (
+    event: React.ChangeEvent<unknown>,
+    newValue: number,
+  ): void => {
+    setValue(newValue);
+  };
+
+  return (
+    <Tabs
+      textColor="primary"
+      onChange={handleChange}
+      value={value}
+      className={classes.tabs}
+      TabIndicatorProps={{ style: { display: 'none' } }}
+    >
+      <Tab label="" className={classes.tabPan} />
+      <Tab
+        label="Login"
+        icon={<LockIcon className={classes.tabIcon} />}
+        className={`${classes.tabPan} ${classes.rightAlign}`}
+      />
+    </Tabs>
+  );
+};

src/components/AuthUser/HomePage2/Numbers.tsx

+import React, { FC } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { Grid, Typography, CardContent, Card } from '@material-ui/core';
+import LocalTaxiIcon from '@material-ui/icons/LocalTaxi';
+import LocationCityIcon from '@material-ui/icons/LocationCity';
+import PeopleIcon from '@material-ui/icons/People';
+
+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 Numbers: FC = () => {
+  const classes = useStyles();
+
+  return (
+    <Grid item container alignItems="stretch" style={{ paddingTop: '20px' }}>
+      <Grid item xs={2} />
+
+      <Grid item xs={2} component={Card} className={classes.noShadow}>
+        <CardContent>
+          <Grid
+            container
+            spacing={0}
+            direction="column"
+            alignItems="center"
+            justify="center"
+          >
+            <Grid item xs={12}>
+              <LocalTaxiIcon color="primary" className={classes.bodyIcon} />
+            </Grid>
+          </Grid>
+
+          <Typography variant="h4" align="center">
+            300
+          </Typography>
+
+          <Typography variant="h6" align="center">
+            Rides Offered
+          </Typography>
+        </CardContent>
+      </Grid>
+
+      <Grid item xs={1} />
+
+      <Grid item xs={2} component={Card} className={classes.noShadow}>
+        <CardContent>
+          <Grid
+            container
+            spacing={0}
+            direction="column"
+            alignItems="center"
+            justify="center"
+          >
+            <Grid item xs={12}>
+              <LocationCityIcon color="primary" className={classes.bodyIcon} />
+            </Grid>
+          </Grid>
+
+          <Typography variant="h4" align="center">
+            25000
+          </Typography>
+
+          <Typography variant="h6" align="center">
+            Kilometers
+          </Typography>
+        </CardContent>
+      </Grid>
+
+      <Grid item xs={1} />
+
+      <Grid item xs={2} component={Card} className={classes.noShadow}>
+        <CardContent>
+          <Grid
+            container
+            spacing={0}
+            direction="column"
+            alignItems="center"
+            justify="center"
+          >
+            <Grid item xs={12}>
+              <PeopleIcon color="primary" className={classes.bodyIcon} />
+            </Grid>
+          </Grid>
+
+          <Typography variant="h4" align="center">
+            225
+          </Typography>
+
+          <Typography variant="h6" align="center">
+            People who used our service
+          </Typography>
+        </CardContent>
+      </Grid>
+
+      <Grid item xs={2} />
+    </Grid>
+  );
+};

src/components/AuthUser/HomePage2/Reservation.tsx

+import React, { FC } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from '@material-ui/core';
+
+const useStyles = makeStyles(() => ({
+  noShadow: {
+    border: 'none',
+    boxShadow: 'none',
+    backgroundColor: 'transparent',
+  },
+}));
+
+function createData(
+  name: string,
+  value: string,
+): { name: string; value: string } {
+  return { name, value };
+}
+
+const rows = [
+  createData('From:', 'Via Di Quel Bozen, 45, 39037'),
+  createData('Date:', '29 / 07 / 2021'),
+  createData('Time:', '12:15'),
+  createData('To:', 'Via del Krankenhaus, 7, 39037'),
+];
+
+export const Reservation: FC = () => {
+  const classes = useStyles();
+
+  return (
+    <TableContainer component={Paper}>
+      <Table aria-label="simple table">
+        <TableHead>
+          <TableRow>
+            <TableCell>DriveToHospital </TableCell>
+          </TableRow>
+        </TableHead>
+
+        <TableBody>
+          {rows.map((row) => (
+            <TableRow key={row.name}>
+              <TableCell component="th" scope="row">
+                {row.name}
+              </TableCell>
+              <TableCell align="right">{row.value}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};

src/components/AuthUser/HomePage2/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';
+
+const useStyles = makeStyles(() => ({
+  bodyIcon: {
+    fontSize: '90px',
+    paddingBottom: '10px',
+    paddingTop: '10px',
+  },
+  paddingBot: {
+    paddingBottom: '20px',
+  },
+}));
+
+export const Steps: FC = () => {
+  const classes = useStyles();
+
+  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="h4" 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="h6">
+            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={1} />
+      </Hidden>
+
+      <Grid item xs={10} lg={2} component={Card} className={classes.paddingBot}>
+        <CardContent>
+          <Typography variant="h4" 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="h6">
+            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={1} />
+      </Hidden>
+
+      <Grid item xs={10} lg={2} component={Card} className={classes.paddingBot}>
+        <CardContent>
+          <Typography variant="h4" 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="h6">
+            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>
+  );
+};