first
This commit is contained in:
56
src/pages/maintenance/404.js
Normal file
56
src/pages/maintenance/404.js
Normal file
@@ -0,0 +1,56 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
// project import
|
||||
import { APP_DEFAULT_PATH } from 'config';
|
||||
|
||||
// material-ui
|
||||
import { Box, Button, Grid, Stack, Typography } from '@mui/material';
|
||||
|
||||
// assets
|
||||
import error404 from 'assets/images/maintenance/Error404.png';
|
||||
import TwoCone from 'assets/images/maintenance/TwoCone.png';
|
||||
|
||||
// ==============================|| ERROR 404 - MAIN ||============================== //
|
||||
|
||||
function Error404() {
|
||||
return (
|
||||
<>
|
||||
<Grid
|
||||
container
|
||||
spacing={10}
|
||||
direction="column"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
sx={{ minHeight: '100vh', pt: 1.5, pb: 1, overflow: 'hidden' }}
|
||||
>
|
||||
<Grid item xs={12}>
|
||||
<Stack direction="row">
|
||||
<Grid item>
|
||||
<Box sx={{ width: { xs: 250, sm: 590 }, height: { xs: 130, sm: 300 } }}>
|
||||
<img src={error404} alt="mantis" style={{ width: '100%', height: '100%' }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item sx={{ position: 'relative' }}>
|
||||
<Box sx={{ position: 'absolute', top: 60, left: -40, width: { xs: 130, sm: 390 }, height: { xs: 115, sm: 330 } }}>
|
||||
<img src={TwoCone} alt="mantis" style={{ width: '100%', height: '100%' }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Stack spacing={2} justifyContent="center" alignItems="center">
|
||||
<Typography variant="h1">Page Not Found</Typography>
|
||||
<Typography color="textSecondary" align="center" sx={{ width: { xs: '73%', sm: '61%' } }}>
|
||||
The page you are looking was moved, removed, renamed, or might never exist!
|
||||
</Typography>
|
||||
<Button component={Link} to={APP_DEFAULT_PATH} variant="contained">
|
||||
Back To Home
|
||||
</Button>
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Error404;
|
||||
45
src/pages/maintenance/500.js
Normal file
45
src/pages/maintenance/500.js
Normal file
@@ -0,0 +1,45 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
// project import
|
||||
import { APP_DEFAULT_PATH } from 'config';
|
||||
|
||||
// material-ui
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import { useMediaQuery, Box, Button, Grid, Stack, Typography } from '@mui/material';
|
||||
|
||||
// assets
|
||||
import error500 from 'assets/images/maintenance/Error500.png';
|
||||
|
||||
// ==============================|| ERROR 500 - MAIN ||============================== //
|
||||
|
||||
function Error500() {
|
||||
const theme = useTheme();
|
||||
const matchDownSM = useMediaQuery(theme.breakpoints.down('sm'));
|
||||
|
||||
return (
|
||||
<>
|
||||
<Grid container direction="column" alignItems="center" justifyContent="center" sx={{ minHeight: '100vh' }}>
|
||||
<Grid item xs={12}>
|
||||
<Box sx={{ width: { xs: 350, sm: 396 } }}>
|
||||
<img src={error500} alt="mantis" style={{ height: '100%', width: '100%' }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Stack justifyContent="center" alignItems="center">
|
||||
<Typography align="center" variant={matchDownSM ? 'h2' : 'h1'}>
|
||||
Internal Server Error
|
||||
</Typography>
|
||||
<Typography color="textSecondary" variant="body2" align="center" sx={{ width: { xs: '73%', sm: '70%' }, mt: 1 }}>
|
||||
Server error 500. we fixing the problem. please try again at a later stage.
|
||||
</Typography>
|
||||
<Button component={Link} to={APP_DEFAULT_PATH} variant="contained" sx={{ textTransform: 'none', mt: 4 }}>
|
||||
Back To Home
|
||||
</Button>
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Error500;
|
||||
94
src/pages/maintenance/coming-soon.js
Normal file
94
src/pages/maintenance/coming-soon.js
Normal file
@@ -0,0 +1,94 @@
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
// material-ui
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import { useMediaQuery, Box, Button, Grid, Stack, TextField, Typography } from '@mui/material';
|
||||
|
||||
// third party
|
||||
import { useTimer } from 'react-timer-hook';
|
||||
|
||||
// assets
|
||||
import coming from 'assets/images/maintenance/coming-soon.png';
|
||||
import MainCard from 'components/MainCard';
|
||||
|
||||
// ==============================|| COMING SOON - MAIN ||============================== //
|
||||
|
||||
const TimerBox = ({ count, label }) => {
|
||||
const theme = useTheme();
|
||||
const matchDownSM = useMediaQuery(theme.breakpoints.down('sm'));
|
||||
|
||||
return (
|
||||
<MainCard content={false} sx={{ width: { xs: 60, sm: 80 } }}>
|
||||
<Stack justifyContent="center" alignItems="center">
|
||||
<Box sx={{ py: 1.75 }}>
|
||||
<Typography variant={matchDownSM ? 'h4' : 'h2'}>{count}</Typography>
|
||||
</Box>
|
||||
<Box sx={{ p: 0.5, bgcolor: 'secondary.lighter', width: '100%' }}>
|
||||
<Typography align="center" variant="subtitle2">
|
||||
{label}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Stack>
|
||||
</MainCard>
|
||||
);
|
||||
};
|
||||
|
||||
TimerBox.propTypes = {
|
||||
count: PropTypes.number,
|
||||
label: PropTypes.string
|
||||
};
|
||||
|
||||
function ComingSoon() {
|
||||
const time = new Date();
|
||||
time.setSeconds(time.getSeconds() + 3600 * 24 * 2 - 3600 * 15.5);
|
||||
|
||||
const { seconds, minutes, hours, days } = useTimer({ expiryTimestamp: time });
|
||||
|
||||
return (
|
||||
<>
|
||||
<Grid container spacing={4} direction="column" alignItems="center" justifyContent="center" sx={{ minHeight: '100vh', py: 2 }}>
|
||||
<Grid item xs={12}>
|
||||
<Box sx={{ height: { xs: 310, sm: 420 }, width: { xs: 360, sm: 'auto' } }}>
|
||||
<img src={coming} alt="mantis" style={{ height: '100%', width: '100%' }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Stack spacing={1} justifyContent="center" alignItems="center" sx={{ mt: -2 }}>
|
||||
<Typography align="center" variant="h1">
|
||||
Coming Soon
|
||||
</Typography>
|
||||
<Typography align="center" color="textSecondary">
|
||||
Something new is on its way
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item xs={12} sx={{ width: { xs: '95%', md: '40%' } }}>
|
||||
<Stack direction="row" alignItems="center" justifyContent="center" spacing={{ xs: 1, sm: 2 }}>
|
||||
<TimerBox count={days} label="day" />
|
||||
<Typography variant="h1"> : </Typography>
|
||||
<TimerBox count={hours} label="hour" />
|
||||
<Typography variant="h1"> : </Typography>
|
||||
<TimerBox count={minutes} label="min" />
|
||||
<Typography variant="h1"> : </Typography>
|
||||
<TimerBox count={seconds} label="sec" />
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item xs={12} sx={{ width: { xs: 380, md: '40%', lg: '30%' } }}>
|
||||
<Stack spacing={2} sx={{ mt: 2 }}>
|
||||
<Typography align="center" color="textSecondary">
|
||||
Be the first to be notified when Mantis launches.
|
||||
</Typography>
|
||||
<Stack direction="row" spacing={1}>
|
||||
<TextField fullWidth placeholder="Email Address" />
|
||||
<Button variant="contained" sx={{ width: '50%' }}>
|
||||
Notify Me
|
||||
</Button>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ComingSoon;
|
||||
39
src/pages/maintenance/under-construction.js
Normal file
39
src/pages/maintenance/under-construction.js
Normal file
@@ -0,0 +1,39 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
// project import
|
||||
import { APP_DEFAULT_PATH } from 'config';
|
||||
|
||||
// material-ui
|
||||
import { Box, Button, Grid, Stack, Typography } from '@mui/material';
|
||||
|
||||
// assets
|
||||
import construction from 'assets/images/maintenance/under-construction.svg';
|
||||
|
||||
// ==============================|| UNDER CONSTRUCTION - MAIN ||============================== //
|
||||
|
||||
function UnderConstruction() {
|
||||
return (
|
||||
<Grid container spacing={4} direction="column" alignItems="center" justifyContent="center" sx={{ minHeight: '100vh', py: 2 }}>
|
||||
<Grid item xs={12}>
|
||||
<Box sx={{ width: { xs: 300, sm: 480 } }}>
|
||||
<img src={construction} alt="mantis" style={{ width: '100%', height: 'auto' }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Stack spacing={2} justifyContent="center" alignItems="center">
|
||||
<Typography align="center" variant="h1">
|
||||
Under Construction
|
||||
</Typography>
|
||||
<Typography color="textSecondary" align="center" sx={{ width: '85%' }}>
|
||||
Hey! Please check out this site later. We are doing some maintenance on it right now.
|
||||
</Typography>
|
||||
<Button component={Link} to={APP_DEFAULT_PATH} variant="contained">
|
||||
Back To Home
|
||||
</Button>
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
|
||||
export default UnderConstruction;
|
||||
Reference in New Issue
Block a user