feat: Integrate Mantine UI library, establish a theme provider, and refactor core UI components.

packages/ui/src/components/system-pages/maintenance.tsx

@@ -2,36 +2,33 @@ interface MaintenanceProps {
   showActions?: boolean;
 }
 
-export function Maintenance(props: MaintenanceProps) {
-  const { showActions = false } = props;
+import { Title, Text, Button, Container, Stack, Center } from '@mantine/core';
 
+export function Maintenance({ showActions = false }: MaintenanceProps) {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-white px-4">
-      <div className="w-full max-w-md text-center">
-        {/* Code */}
-        <p className="text-sm font-medium uppercase tracking-widest text-gray-400">Maintenance</p>
+    <Container size="sm" h="100vh" pos="relative">
+      <Center h="100%">
+        <Stack align="center" ta="center" gap="md">
+          <Text size="sm" fw={500} tt="uppercase" c="dimmed" lts="var(--mantine-spacing-xs)">
+            Maintenance
+          </Text>
 
-        {/* Title */}
-        <h1 className="mt-3 text-6xl font-extrabold text-brand-900">We'll Be Back Soon</h1>
+          <Title order={1} fw={900} c="brand">
+            We'll Be Back Soon
+          </Title>
 
-        {/* Description */}
-        <p className="mt-4 text-base text-gray-500">
-          Our system is currently undergoing scheduled maintenance. We are working hard to bring it back online as soon
-          as possible.
-        </p>
+          <Text size="md" c="dimmed">
+            Our system is currently undergoing scheduled maintenance. We are working hard to bring it back online as
+            soon as possible.
+          </Text>
 
-        {/* Optional Actions */}
-        {showActions && (
-          <div className="mt-8 flex justify-center gap-3">
-            <a
-              href="/"
-              className="rounded-md bg-brand-500 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-400"
-            >
+          {showActions && (
+            <Button component="a" href="/" color="brand" size="md" mt="xl">
               Back to Home
-            </a>
-          </div>
-        )}
-      </div>
-    </div>
+            </Button>
+          )}
+        </Stack>
+      </Center>
+    </Container>
   );
 }