first commit

src/pages/maintenance/UnderConstruction.jsx

@@ -0,0 +1,45 @@
+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';
+
+export default function UnderConstruction() {
+  const navigate = useNavigate();
+
+  return (
+    <Box
+      sx={{
+        minHeight: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        p: 3,
+        textAlign: 'center'
+      }}
+    >
+      <Stack spacing={2.5} alignItems="center">
+        <Box
+          sx={{
+            width: 110,
+            height: 110,
+            borderRadius: '50%',
+            bgcolor: 'primary.lighter',
+            color: 'primary.main',
+            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>
+  );
+}