first commit

src/pages/maintenance/Error404.jsx

@@ -0,0 +1,34 @@
+import { useNavigate } from 'react-router-dom';
+import { Box, Stack, Typography, Button } from '@mui/material';
+import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined';
+
+export default function Error404() {
+  const navigate = useNavigate();
+
+  return (
+    <Box
+      sx={{
+        minHeight: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        p: 3,
+        textAlign: 'center'
+      }}
+    >
+      <Stack spacing={2} alignItems="center">
+        <Typography sx={{ fontWeight: 900, fontSize: { xs: '6rem', md: '9rem' }, lineHeight: 1, color: 'primary.main' }}>
+          404
+        </Typography>
+        <Box sx={{ width: 64, height: 4, borderRadius: 2, bgcolor: 'primary.main' }} />
+        <Typography variant="h3" sx={{ fontWeight: 700, color: 'grey.800' }}>Page Not Found</Typography>
+        <Typography variant="body1" color="text.secondary" sx={{ maxWidth: 460 }}>
+          The page you are looking for was moved, removed, renamed, or might never exist!
+        </Typography>
+        <Button variant="contained" size="large" startIcon={<HomeOutlinedIcon />} onClick={() => navigate('/dashboard')} sx={{ mt: 1 }}>
+          Back To Home
+        </Button>
+      </Stack>
+    </Box>
+  );
+}