From 84a40acddec802e8daf51ab1aecf755511b548b5 Mon Sep 17 00:00:00 2001
From: Alberto Defendi <1369-ahl-berto@users.noreply.gitlab.inf.unibz.it>
Date: Sun, 23 May 2021 17:54:18 +0200
Subject: [PATCH] Insert @fmazzini homepage.
---
.../AuthUser/Dashboard/HomePage/HomePage.tsx | 197 +++++++++---------
1 file changed, 100 insertions(+), 97 deletions(-)
diff --git a/src/components/AuthUser/Dashboard/HomePage/HomePage.tsx b/src/components/AuthUser/Dashboard/HomePage/HomePage.tsx
index 972aa96..4643fc4 100644
--- a/src/components/AuthUser/Dashboard/HomePage/HomePage.tsx
+++ b/src/components/AuthUser/Dashboard/HomePage/HomePage.tsx
@@ -1,111 +1,114 @@
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';
-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" 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>
);
};
--
GitLab