Merge branch 'feature/privateroute/role' into 'dev'

Merge @fmazzini components.

See merge request !47

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

@@ -3,6 +3,9 @@ import { makeStyles } from '@material-ui/core/styles';
 import { Tabs, Tab } from '@material-ui/core';
 import LockIcon from '@material-ui/icons/Lock';
 
+import { Link, useHistory } from 'react-router-dom';
+import { NonAuthRoutes } from 'api/routes';
+
 const useStyles = makeStyles(() => ({
   tabs: {
     color: 'white',
@@ -26,15 +29,19 @@ const useStyles = makeStyles(() => ({
 }));
 
 export const NavBarLogin: FC = () => {
+  const history = useHistory();
+
   const classes = useStyles();
 
-  const [value, setValue] = React.useState(0);
+  const [value, setValue] = React.useState('');
 
   const handleChange = (
     event: React.ChangeEvent<unknown>,
-    newValue: number,
+    newValue: string,
   ): void => {
     setValue(newValue);
+    history.replace(newValue);
+    console.log(newValue);
   };
 
   return (
@@ -45,8 +52,8 @@ export const NavBarLogin: FC = () => {
       className={classes.tabs}
       TabIndicatorProps={{ style: { display: 'none' } }}
     >
-      <Tab label="" className={classes.tabPan} />
       <Tab
+        value={`/auth${NonAuthRoutes.signIn}`}
         label="Login"
         icon={<LockIcon className={classes.tabIcon} />}
         className={`${classes.tabPan} ${classes.rightAlign}`}

src/components/NonAuthUser/LandingPage/LandingPage.tsx

 import React, { FC } from 'react';
-import Button from '@material-ui/core/Button';
-import { Link } from 'react-router-dom';
-import { NonAuthRoutes } from 'api/routes';
-
-export const LandingPage: FC = () => (
-  <>
-    <Button variant="contained">
-      <Link to={`/auth${NonAuthRoutes.signIn}`}>Log in</Link>
-    </Button>
-    <Button variant="contained">
-      <Link to={`/auth${NonAuthRoutes.signUp}`}>Sign up</Link>
-    </Button>
-    <section>
-      <h2>What is MoveAid?</h2>
-
-      <p>
-        MoveAid is a project born in order to satisfy a specific problem. There
-        are many senior citizens who are not able to drive and move from a place
-        to another easily, because of this they sometimes need to take private
-        Taxis or public means of transport which could be expensive and not
-        simple. MoveAid wants to be the solution to this problem offering free
-        drives (carried out by voulunteers) for those who need them to reach
-        medical visit, to go to the supermarket or to satisfy any other need.
-      </p>
-    </section>
-
-    <section>
-      <h2>How will MoveAid work?</h2>
-
-      <p>
-        MoveAid will be the platform that will allow people to ask for a drive
-        (either by phone or online) and organizations of voulenteers to organise
-        and accept drives.
-      </p>
-    </section>
-
-    <p>
-      <br />
-    </p>
-
-    <footer>
-      <p>
-        Authors: Alberto Defendi, Andrea Esposito, Marco Marinello, Francesco
-        Mazzini
-      </p>
-      <p>&copy 2021 - All right reserved</p>
-    </footer>
-  </>
-);
+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/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';
+
+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 LandingPage: FC = () => {
+  const classes = useStyles();
+
+  return (
+    <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" align="right">
+            Some Our Numbers
+          </Typography>
+        </Grid>
+        <Grid item xs={2} />
+      </Grid>
+
+      <Numbers />
+    </Grid>
+  );
+};