Reapply "updates on the ui changes"

This reverts commit d2f264460a.

src/pages/maintenance/Error404.jsx

@@ -1,34 +1,37 @@
 import { useNavigate } from 'react-router-dom';
-import { Box, Stack, Typography, Button } from '@mui/material';
-import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined';
+import { Button } from '@astryxdesign/core/Button';
+import { Text, Heading } from '@astryxdesign/core/Text';
+import { Home } from 'lucide-react';
 
 export default function Error404() {
   const navigate = useNavigate();
 
   return (
-    <Box
-      sx={{
+    <div
+      style={{
         minHeight: '100vh',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        p: 3,
-        textAlign: 'center'
+        padding: '24px',
+        textAlign: 'center',
+        backgroundColor: '#f8fafc',
+        fontFamily: 'system-ui, sans-serif'
       }}
     >
-      <Stack spacing={2} alignItems="center">
-        <Typography sx={{ fontWeight: 900, fontSize: { xs: '6rem', md: '9rem' }, lineHeight: 1, color: 'primary.main' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', alignItems: 'center' }}>
+        <span style={{ fontWeight: 900, fontSize: 'clamp(3.5rem, 18vw, 8rem)', lineHeight: 1, color: '#C01227' }}>
           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>
+        </span>
+        <div style={{ width: '64px', height: '4px', borderRadius: '2px', backgroundColor: '#C01227' }} />
+        <Heading level={2}>Page Not Found</Heading>
+        <div style={{ maxWidth: '460px' }}>
+          <Text type="body" color="secondary">
+            The page you are looking for was moved, removed, renamed, or might never exist!
+          </Text>
+        </div>
+        <Button variant="primary" icon={<Home size={16} />} onClick={() => navigate('/dashboard')} label="Back To Home" />
+      </div>
+    </div>
   );
 }