59 lines
No EOL
1.6 KiB
JavaScript
59 lines
No EOL
1.6 KiB
JavaScript
import React from 'react';
|
|
import { Box, Typography, Button, Container } from '@mui/material';
|
|
import { Link as RouterLink } from 'react-router-dom';
|
|
import SentimentDissatisfiedIcon from '@mui/icons-material/SentimentDissatisfied';
|
|
|
|
const NotFoundPage = () => {
|
|
return (
|
|
<Container maxWidth="md">
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
minHeight: '50vh',
|
|
textAlign: 'center',
|
|
py: 4,
|
|
}}
|
|
>
|
|
<SentimentDissatisfiedIcon sx={{ fontSize: 100, color: 'text.secondary', mb: 2 }} />
|
|
|
|
<Typography variant="h3" component="h1" gutterBottom>
|
|
404 - Page Not Found
|
|
</Typography>
|
|
|
|
<Typography variant="h5" color="text.secondary" paragraph>
|
|
Oops! The page you are looking for does not exist.
|
|
</Typography>
|
|
|
|
<Typography variant="body1" color="text.secondary" paragraph>
|
|
It seems you've ventured too far into the wilderness.
|
|
This natural specimen hasn't been discovered yet.
|
|
</Typography>
|
|
|
|
<Box sx={{ mt: 3 }}>
|
|
<Button
|
|
variant="contained"
|
|
component={RouterLink}
|
|
to="/"
|
|
size="large"
|
|
sx={{ mr: 2 }}
|
|
>
|
|
Back to Home
|
|
</Button>
|
|
|
|
<Button
|
|
variant="outlined"
|
|
component={RouterLink}
|
|
to="/products"
|
|
>
|
|
Browse Products
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</Container>
|
|
);
|
|
};
|
|
|
|
export default NotFoundPage; |