diff --git a/public/assets/bg4.png b/public/assets/bg4.png
new file mode 100644
index 0000000000000000000000000000000000000000..abc5e7942705ff1ccb5352b2d52276a52b2faa66
Binary files /dev/null and b/public/assets/bg4.png differ
diff --git a/public/assets/bg5.png b/public/assets/bg5.png
new file mode 100644
index 0000000000000000000000000000000000000000..abc5e7942705ff1ccb5352b2d52276a52b2faa66
Binary files /dev/null and b/public/assets/bg5.png differ
diff --git a/public/assets/bg6.png b/public/assets/bg6.png
new file mode 100644
index 0000000000000000000000000000000000000000..63f99a7c5f63917da0b749fc439c6f2e2c4a1d64
Binary files /dev/null and b/public/assets/bg6.png differ
diff --git a/public/assets/bg7.png b/public/assets/bg7.png
new file mode 100644
index 0000000000000000000000000000000000000000..d078ffeb4176c17f762c9cdd3ec929f6bd812b8b
Binary files /dev/null and b/public/assets/bg7.png differ
diff --git a/src/App.tsx b/src/App.tsx
index 764d4a2d8217af99e92f5a868993044834c51f94..39679e5d88a6011ac4c39f9b7c0e66bf99a7497e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,6 +2,7 @@ import React, { FC } from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import { HomePage2 } from './components/AuthUser/HomePage2/HomePage2';
+import { ReservationPage } from './components/AuthUser/Reservation/ReservationPage';
const theme = createMuiTheme({
palette: {
@@ -37,7 +38,7 @@ export const App: FC = () => (
<Route path="/">
<div data-testid="App">
<ThemeProvider theme={theme}>
- <HomePage2 />
+ <ReservationPage />
</ThemeProvider>
</div>
</Route>
diff --git a/src/components/AuthUser/HomePage2/HomePage2.tsx b/src/components/AuthUser/HomePage2/HomePage2.tsx
index 32a48a1cdd60743be693f76a74aba71ec1358bc5..96e84546494a8ce4e99695578a67836058e4eeb7 100644
--- a/src/components/AuthUser/HomePage2/HomePage2.tsx
+++ b/src/components/AuthUser/HomePage2/HomePage2.tsx
@@ -69,7 +69,7 @@ export const HomePage2: FC = () => {
<CssBaseline />
<Grid item>
- <NavBarLogin />
+ <NavBar />
</Grid>
<MuiThemeProvider theme={themeResp}>
diff --git a/src/components/AuthUser/HomePage2/NavBar.tsx b/src/components/AuthUser/HomePage2/NavBar.tsx
index dd794e706bdb2c3837c051a07f92bb11055940c5..1bc3cce61bc2b5bf11a849a6d0943de84fe6664e 100644
--- a/src/components/AuthUser/HomePage2/NavBar.tsx
+++ b/src/components/AuthUser/HomePage2/NavBar.tsx
@@ -1,6 +1,6 @@
import React, { FC } from 'react';
import { makeStyles } from '@material-ui/core/styles';
-import { Tabs, Tab } from '@material-ui/core';
+import { Tabs, Tab, AppBar } 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';
@@ -12,6 +12,8 @@ const useStyles = makeStyles(() => ({
paddingRight: '25px',
paddingTop: '8px',
paddingBottom: '35px',
+ width: '100%',
+ flexWrap: 'wrap',
},
tabPan: {
paddingLeft: '56px',
@@ -40,6 +42,8 @@ export const NavBar: FC = () => {
return (
<Tabs
+ variant="scrollable"
+ scrollButtons="on"
onChange={handleChange}
value={value}
className={classes.tabs}
diff --git a/src/components/AuthUser/HomePage2/Numbers.tsx b/src/components/AuthUser/HomePage2/Numbers.tsx
index 7d66ea267b09690ce8e7a63c3cf73fdd794f4f85..20f38c870d04171411e355d21afe7ca52efba788 100644
--- a/src/components/AuthUser/HomePage2/Numbers.tsx
+++ b/src/components/AuthUser/HomePage2/Numbers.tsx
@@ -1,6 +1,6 @@
import React, { FC } from 'react';
import { makeStyles } from '@material-ui/core/styles';
-import { Grid, Typography, CardContent, Card } from '@material-ui/core';
+import { Grid, Typography, CardContent, Card, Hidden } 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';
@@ -49,9 +49,9 @@ export const Numbers: FC = () => {
return (
<Grid item container alignItems="stretch" style={{ paddingTop: '20px' }}>
- <Grid item xs={2} />
+ <Grid item xs={1} lg={2} />
- <Grid item xs={2} component={Card} className={classes.noShadow}>
+ <Grid item xs={4} lg={2} component={Card} className={classes.noShadow}>
<CardContent>
<Grid
container
@@ -75,9 +75,9 @@ export const Numbers: FC = () => {
</CardContent>
</Grid>
- <Grid item xs={1} />
+ <Grid item xs={2} lg={1} />
- <Grid item xs={2} component={Card} className={classes.noShadow}>
+ <Grid item xs={4} lg={2} component={Card} className={classes.noShadow}>
<CardContent>
<Grid
container
@@ -103,7 +103,11 @@ export const Numbers: FC = () => {
<Grid item xs={1} />
- <Grid item xs={2} component={Card} className={classes.noShadow}>
+ <Hidden lgUp>
+ <Grid item xs={4} />
+ </Hidden>
+
+ <Grid item xs={4} lg={2} component={Card} className={classes.noShadow}>
<CardContent>
<Grid
container
@@ -127,7 +131,7 @@ export const Numbers: FC = () => {
</CardContent>
</Grid>
- <Grid item xs={2} />
+ <Grid item xs={4} lg={2} />
</Grid>
);
};
diff --git a/src/components/AuthUser/HomePage2/Steps.tsx b/src/components/AuthUser/HomePage2/Steps.tsx
index c7881dae63faf4f7a291e4f402dce73b3adc86ba..2452c59d93467d111e979526541d69f24e409410 100644
--- a/src/components/AuthUser/HomePage2/Steps.tsx
+++ b/src/components/AuthUser/HomePage2/Steps.tsx
@@ -12,7 +12,12 @@ const useStyles = makeStyles(() => ({
paddingTop: '10px',
},
paddingBot: {
- paddingBottom: '20px',
+ paddingBottom: '40px',
+ },
+ noShadow: {
+ border: 'none',
+ boxShadow: 'none',
+ backgroundColor: 'transparent',
},
}));
@@ -51,6 +56,12 @@ export const Steps: FC = () => {
<Grid item xs={1} />
<Hidden lgUp>
+ <Grid
+ item
+ xs={12}
+ component={Card}
+ className={`${classes.paddingBot} ${classes.noShadow}`}
+ />
<Grid item xs={1} />
</Hidden>
@@ -81,6 +92,12 @@ export const Steps: FC = () => {
<Grid item xs={1} />
<Hidden lgUp>
+ <Grid
+ item
+ xs={12}
+ component={Card}
+ className={`${classes.paddingBot} ${classes.noShadow}`}
+ />
<Grid item xs={1} />
</Hidden>
diff --git a/src/components/AuthUser/Reservation/ReservationPage.tsx b/src/components/AuthUser/Reservation/ReservationPage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..174881d6f944049c2a4bb5ef6591ec1e09e438bf
--- /dev/null
+++ b/src/components/AuthUser/Reservation/ReservationPage.tsx
@@ -0,0 +1,163 @@
+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 AddIcon from '@material-ui/icons/Add';
+import Fab from '@material-ui/core/Fab';
+
+import { NavBar } from '../HomePage2/NavBar';
+import { Steps } from '../HomePage2/Steps';
+import { Numbers } from '../HomePage2/Numbers';
+import { Reservation } from '../HomePage2/Reservation';
+
+let themeResp = createMuiTheme();
+themeResp = responsiveFontSizes(themeResp);
+
+const useStyles = makeStyles(() => ({
+ root: {
+ minHeight: '36vh',
+ backgroundImage: `url(${'/assets/bg7.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',
+ },
+ extendedIcon: {
+ fontSize: '50px',
+ },
+ fab: {
+ margin: '10px 90px 80px 10px',
+ bottom: '0',
+ right: '0',
+ position: 'fixed',
+ padding: '45px',
+ },
+}));
+
+export const ReservationPage: 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}>
+ Plan Here Your
+ </Typography>
+ <Typography variant="h1" className={classes.whiteText}>
+ RESERVATIONS
+ </Typography>
+ </Grid>
+
+ <Grid item xs={1} />
+ </Grid>
+ </MuiThemeProvider>
+ </div>
+
+ <Fab
+ color="primary"
+ size="large"
+ aria-label="add"
+ className={classes.fab}
+ >
+ <AddIcon className={classes.extendedIcon} />
+ </Fab>
+
+ <Grid item container className={classes.paddingTop}>
+ <Grid item xs={2} />
+ <Grid item xs={8}>
+ <Typography variant="h3">Your Next Reservations</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 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 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">
+ Your Past Reservations
+ </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>
+ );
+};