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

apps/web/src/apps/index.tsx

@@ -1,5 +1,6 @@
-import { lazy, Suspense } from 'react';
+import { lazy, Suspense, useState } from 'react';
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
+import { ThemeProvider, ColorSchemeType, DensityType } from '@repo/ui/provider';
 import { NotFound } from '@repo/ui/components/system-pages/not-found';
 import { Forbidden } from '@repo/ui/components/system-pages/forbidden';
 import { Maintenance } from '@repo/ui/components/system-pages/maintenance';
@@ -7,22 +8,39 @@ import { ComingSoon } from '@repo/ui/components/system-pages/coming-soon';
 
 const AuthModule = lazy(() => import('./auth'));
 const AppModule = lazy(() => import('./modules'));
+const ShowcaseView = lazy(() => import('./showcase/showcase-view'));
 
 export default function App() {
+  const [colorScheme, setColorScheme] = useState<ColorSchemeType>('light');
+  const [density, setDensity] = useState<DensityType>('standard');
+
   return (
-    <BrowserRouter>
-      <Suspense fallback={<div>Loading...</div>}>
-        <Routes>
-          <Route path="/auth/*" element={<AuthModule />} />
-          <Route path="/app/*" element={<AppModule />} />
-          <Route path="/404" element={<NotFound />} />
-          <Route path="/403" element={<Forbidden />} />
-          <Route path="/maintenance" element={<Maintenance />} />
-          <Route path="/coming-soon" element={<ComingSoon />} />
-          <Route path="/" element={<Navigate to="/app" />} />
-          <Route path="*" element={<Navigate to="/404" />} />
-        </Routes>
-      </Suspense>
-    </BrowserRouter>
+    <ThemeProvider colorScheme={colorScheme} density={density}>
+      <BrowserRouter>
+        <Suspense fallback={<div>Loading...</div>}>
+          <Routes>
+            <Route path="/auth/*" element={<AuthModule />} />
+            <Route path="/app/*" element={<AppModule />} />
+            <Route
+              path="/showcase"
+              element={
+                <ShowcaseView
+                  colorScheme={colorScheme}
+                  setColorScheme={setColorScheme}
+                  density={density}
+                  setDensity={setDensity}
+                />
+              }
+            />
+            <Route path="/404" element={<NotFound />} />
+            <Route path="/403" element={<Forbidden />} />
+            <Route path="/maintenance" element={<Maintenance />} />
+            <Route path="/coming-soon" element={<ComingSoon />} />
+            <Route path="/" element={<Navigate to="/showcase" />} />
+            <Route path="*" element={<Navigate to="/404" />} />
+          </Routes>
+        </Suspense>
+      </BrowserRouter>
+    </ThemeProvider>
   );
 }

apps/web/src/apps/showcase/showcase-view.tsx

@@ -0,0 +1,84 @@
+import { ColorSchemeType, DensityType } from '@repo/ui/provider';
+import { Button } from '@repo/ui/components/button';
+import { Card } from '@repo/ui/components/card';
+import { Container } from '@repo/ui/components/container';
+import { Select } from '@repo/ui/components/select';
+import { Group, Stack } from '@repo/ui/components/group';
+import { Text, Title } from '@repo/ui/components/text';
+import { TextInput } from '@repo/ui/components/input';
+import { Checkbox } from '@repo/ui/components/checkbox';
+
+interface ShowcaseViewProps {
+  colorScheme: ColorSchemeType;
+  setColorScheme: (val: ColorSchemeType) => void;
+  density: DensityType;
+  setDensity: (val: DensityType) => void;
+}
+
+export default function ShowcaseView({ colorScheme, setColorScheme, density, setDensity }: ShowcaseViewProps) {
+  return (
+    <Container size="md" py="xl">
+      <Stack gap="xl">
+        <Title order={1}>UI Gateway Showcase</Title>
+
+        {/* Control Panel */}
+        <Card withBorder shadow="sm" radius="md" p="md">
+          <Title order={3} mb="md">Control Panel</Title>
+          <Group grow align="flex-end">
+            <Select
+              label="Color Scheme"
+              value={colorScheme}
+              onChange={(val: string | null) => setColorScheme((val as ColorSchemeType) || 'light')}
+              data={[
+                { value: 'light', label: 'Light' },
+                { value: 'dark', label: 'Dark' },
+                { value: 'dracula', label: 'Dracula' },
+                { value: 'blue', label: 'Blue' },
+              ]}
+            />
+            <Select
+              label="Density"
+              value={density}
+              onChange={(val: string | null) => setDensity((val as DensityType) || 'standard')}
+              data={[
+                { value: 'compact', label: 'Compact' },
+                { value: 'standard', label: 'Standard' },
+                { value: 'spacious', label: 'Spacious' },
+              ]}
+            />
+          </Group>
+        </Card>
+
+        {/* Showcase Area */}
+        <Card withBorder shadow="sm" radius="md" p="md">
+          <Stack gap="lg">
+            <div>
+              <Title order={3} mb="sm">Typography</Title>
+              <Text size="sm" c="dimmed">This is dimmed small text.</Text>
+              <Text>This is standard text describing the components below.</Text>
+            </div>
+
+            <div>
+              <Title order={3} mb="sm">Buttons</Title>
+              <Group>
+                <Button variant="filled">Filled Button</Button>
+                <Button variant="outline">Outline Button</Button>
+                <Button variant="light">Light Button</Button>
+                <Button variant="subtle">Subtle Button</Button>
+              </Group>
+            </div>
+
+            <div>
+              <Title order={3} mb="md">Form Elements</Title>
+              <Group grow>
+                <TextInput label="First Name" placeholder="John" />
+                <TextInput label="Last Name" placeholder="Doe" />
+              </Group>
+              <Checkbox label="I agree to the terms and conditions" mt="md" defaultChecked />
+            </div>
+          </Stack>
+        </Card>
+      </Stack>
+    </Container>
+  );
+}