51 lines
1.3 KiB
JavaScript
51 lines
1.3 KiB
JavaScript
import React from 'react';
|
|
import { Box, Typography, Link } from '@mui/material';
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
|
const NotFound = () => {
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
height: '100vh',
|
|
backgroundColor: '#f5f5f5',
|
|
textAlign: 'center',
|
|
}}
|
|
>
|
|
<Typography variant="h1" sx={{ fontSize: '8em', color: '#4a4a4a' }}>
|
|
404
|
|
</Typography>
|
|
<Typography variant="body1" sx={{ fontSize: '1.5em', color: '#4a4a4a' }}>
|
|
Oops! The page you're looking for doesn't exist.
|
|
</Typography>
|
|
<Link
|
|
href="/"
|
|
underline="none"
|
|
sx={{
|
|
color: '#4a4a4a',
|
|
fontSize: '1.2em',
|
|
borderBottom: '1px solid #4a4a4a',
|
|
paddingBottom: '2px',
|
|
transition: 'all 0.3s ease',
|
|
'&:hover': {
|
|
color: '#2e2e2e',
|
|
borderBottomColor: '#2e2e2e',
|
|
},
|
|
}}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
navigate('/');
|
|
}}
|
|
>
|
|
Go Home
|
|
</Link>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default NotFound; |