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

packages/ui/src/components/system-pages/coming-soon.tsx

@@ -2,35 +2,32 @@ interface ComingSoonProps {
   showActions?: boolean;
 }
 
-export function ComingSoon(props: ComingSoonProps) {
-  const { showActions = false } = props;
+import { Title, Text, Button, Container, Stack, Center } from '@mantine/core';
 
+export function ComingSoon({ showActions = false }: ComingSoonProps) {
   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">Coming Soon</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)">
+            Coming Soon
+          </Text>
 
-        {/* Title */}
-        <h1 className="mt-3 text-6xl font-extrabold text-brand-900">Feature in Progress</h1>
+          <Title order={1} fw={900} c="brand">
+            Feature in Progress
+          </Title>
 
-        {/* Description */}
-        <p className="mt-4 text-base text-gray-500">
-          This feature is currently under development. Stay tuned! We'll have it ready for you very soon.
-        </p>
+          <Text size="md" c="dimmed">
+            This feature is currently under development. Stay tuned! We'll have it ready for you very soon.
+          </Text>
 
-        {/* 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>
   );
 }