website refactor

apps/website/components/errors/NotFoundScreen.tsx

@@ -1,14 +1,13 @@
 'use client';
 
 import React from 'react';
-import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/Stack';
-import { Surface } from '@/ui/Surface';
 import { Glow } from '@/ui/Glow';
 import { NotFoundActions } from './NotFoundActions';
 import { NotFoundHelpLinks } from './NotFoundHelpLinks';
 import { NotFoundDiagnostics } from './NotFoundDiagnostics';
+import { Stack } from '@/ui/Stack';
+import { Card } from '@/ui/Card';
 
 interface NotFoundScreenProps {
   errorCode: string;
@@ -39,31 +38,31 @@ export function NotFoundScreen({
   ];
 
   return (
-    <Box 
+    <Stack 
       as="main" 
-      minHeight="100vh" 
-      display="flex" 
-      alignItems="center" 
-      justifyContent="center" 
+      minHeight="screen" 
+      align="center" 
+      justify="center" 
       bg="graphite-black" 
       position="relative"
       overflow="hidden"
+      fullWidth
     >
       {/* Background Glow Accent */}
       <Glow color="primary" size="xl" opacity={0.1} position="center" />
       
-      <Surface 
-        variant="glass" 
-        border 
-        padding={12} 
+      <Card 
+        variant="outline"
+        p={12} 
         rounded="none" 
         maxWidth="2xl"
         fullWidth
         mx={6}
         position="relative"
         zIndex={10}
+        className="bg-white/5 backdrop-blur-md"
       >
-        <Stack gap={12} align="center" textAlign="center">
+        <Stack gap={12} align="center">
           {/* Header Section */}
           <Stack gap={4} align="center">
             <NotFoundDiagnostics errorCode={errorCode} />
@@ -77,19 +76,20 @@ export function NotFoundScreen({
               uppercase
               block
               leading="none"
+              textAlign="center"
             >
               {title}
             </Text>
           </Stack>
 
           {/* Visual Separator */}
-          <Box width="full" height="1px" bg="primary-accent" opacity={0.3} position="relative" display="flex" alignItems="center" justifyContent="center">
-            <Box 
-              width={3} 
-              height={3} 
+          <Stack width="full" height="1px" bg="primary-accent" opacity={0.3} position="relative" align="center" justify="center">
+            <Stack 
+              w="3" 
+              h="3" 
               bg="primary-accent" 
-            />
-          </Box>
+            >{null}</Stack>
+          </Stack>
 
           {/* Message Section */}
           <Text 
@@ -99,6 +99,7 @@ export function NotFoundScreen({
             leading="relaxed"
             block
             weight="medium"
+            textAlign="center"
           >
             {message}
           </Text>
@@ -110,32 +111,32 @@ export function NotFoundScreen({
           />
 
           {/* Footer Section */}
-          <Box pt={8} width="full">
-            <Box height="1px" width="full" bg="border-gray" opacity={0.1} mb={8} />
+          <Stack pt={8} width="full">
+            <Stack height="1px" width="full" bg="border-gray" opacity={0.1} mb={8}>{null}</Stack>
             <NotFoundHelpLinks links={helpLinks} />
-          </Box>
+          </Stack>
         </Stack>
-      </Surface>
+      </Card>
 
       {/* Subtle Edge Details */}
-      <Box 
+      <Stack 
         position="absolute" 
         top={0} 
         left={0} 
         right={0} 
-        height="2px" 
+        h="2px" 
         bg="primary-accent"
         opacity={0.1}
-      />
-      <Box 
+      >{null}</Stack>
+      <Stack 
         position="absolute" 
         bottom={0} 
         left={0} 
         right={0} 
-        height="2px" 
+        h="2px" 
         bg="primary-accent"
         opacity={0.1}
-      />
-    </Box>
+      >{null}</Stack>
+    </Stack>
   );
 }