Reapply "updates on the ui changes"

This reverts commit d2f264460a.

src/pages/maintenance/UnderConstruction.jsx

@@ -1,45 +1,47 @@
 import { useNavigate } from 'react-router-dom';
-import { Box, Stack, Typography, Button } from '@mui/material';
-import ConstructionOutlinedIcon from '@mui/icons-material/ConstructionOutlined';
-import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined';
+import { Button } from '@astryxdesign/core/Button';
+import { Text, Heading } from '@astryxdesign/core/Text';
+import { Construction, Home } from 'lucide-react';
 
 export default function UnderConstruction() {
   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.5} alignItems="center">
-        <Box
-          sx={{
-            width: 110,
-            height: 110,
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', alignItems: 'center' }}>
+        <div
+          style={{
+            width: '110px',
+            height: '110px',
             borderRadius: '50%',
-            bgcolor: 'primary.lighter',
-            color: 'primary.main',
+            backgroundColor: 'rgba(192, 18, 39, 0.08)',
+            color: '#C01227',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center'
           }}
         >
-          <ConstructionOutlinedIcon sx={{ fontSize: 56 }} />
-        </Box>
-        <Typography variant="h3" sx={{ fontWeight: 700, color: 'grey.800' }}>Under Construction</Typography>
-        <Typography variant="body1" color="text.secondary" sx={{ maxWidth: 460 }}>
-          Hey! Please check out this site later. We are doing some maintenance on it right now.
-        </Typography>
-        <Button variant="contained" size="large" startIcon={<HomeOutlinedIcon />} onClick={() => navigate('/dashboard')} sx={{ mt: 1 }}>
-          Back To Home
-        </Button>
-      </Stack>
-    </Box>
+          <Construction size={56} />
+        </div>
+        <Heading level={2}>Under Construction</Heading>
+        <div style={{ maxWidth: '460px' }}>
+          <Text type="body" color="secondary">
+            Hey! Please check out this site later. We are doing some maintenance on it right now.
+          </Text>
+        </div>
+        <Button variant="primary" icon={<Home size={16} />} onClick={() => navigate('/dashboard')} label="Back To Home" />
+      </div>
+    </div>
   );
 }