website refactor

apps/website/app/not-found.tsx

@@ -1,22 +1,35 @@
-import Link from 'next/link';
+'use client';
+
+import { Link } from '@/ui/Link';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Stack } from '@/ui/Stack';
 
 export default function NotFound() {
   return (
-    <main className="min-h-screen flex items-center justify-center bg-deep-graphite text-white px-6">
-      <div className="max-w-md text-center space-y-4">
-        <h1 className="text-3xl font-semibold">Page not found</h1>
-        <p className="text-sm text-gray-400">
-          The page you requested doesn't exist (or isn't available in this mode).
-        </p>
-        <div className="pt-2">
-          <Link
-            href="/"
-            className="inline-flex items-center justify-center rounded-md bg-primary-blue px-4 py-2 text-sm font-medium text-white hover:bg-primary-blue/80 transition-colors"
-          >
-            Drive home
-          </Link>
-        </div>
-      </div>
-    </main>
+    <Box as="main" minHeight="100vh" display="flex" alignItems="center" justifyContent="center" bg="bg-deep-graphite" color="text-white" px={6}>
+      <Box maxWidth="md" textAlign="center">
+        <Stack gap={4}>
+          <Heading level={1} fontSize="3xl" weight="semibold">Page not found</Heading>
+          <Text size="sm" color="text-gray-400" block>
+            The page you requested doesn&apos;t exist (or isn&apos;t available in this mode).
+          </Text>
+          <Box pt={2}>
+            <Link
+              href="/"
+              variant="primary"
+              size="sm"
+              weight="medium"
+              rounded="md"
+              px={4}
+              py={2}
+            >
+              Drive home
+            </Link>
+          </Box>
+        </Stack>
+      </Box>
+    </Box>
   );
 }