website refactor

apps/website/components/errors/NotFoundScreen.tsx

@@ -1,12 +1,13 @@
 'use client';
 
-import { Card } from '@/ui/Card';
+import { ErrorPageContainer } from '@/ui/ErrorPageContainer';
 import { Glow } from '@/ui/Glow';
-import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
+import { FooterSection } from '@/ui/FooterSection';
 import { NotFoundActions } from './NotFoundActions';
 import { NotFoundDiagnostics } from './NotFoundDiagnostics';
 import { NotFoundHelpLinks } from './NotFoundHelpLinks';
+import React from 'react';
 
 interface NotFoundScreenProps {
   errorCode: string;
@@ -37,105 +38,44 @@ export function NotFoundScreen({
   ];
 
   return (
-    <Stack 
-      as="main" 
-      minHeight="screen" 
-      align="center" 
-      justify="center" 
-      bg="graphite-black" 
-      position="relative"
-      overflow="hidden"
-      fullWidth
-    >
+    <ErrorPageContainer size="lg" variant="glass">
       {/* Background Glow Accent */}
       <Glow color="primary" size="xl" opacity={0.1} position="center" />
       
-      <Card 
-        variant="outline"
-        p={12} 
-        rounded="none" 
-        maxWidth="2xl"
-        fullWidth
-        mx={6}
-        position="relative"
-        zIndex={10}
-        className="bg-white/5 backdrop-blur-md"
+      <NotFoundDiagnostics errorCode={errorCode} />
+      
+      <Text 
+        as="h1"
+        size="4xl" 
+        weight="bold"
+        variant="high"
+        uppercase
+        block
+        align="center"
+        style={{ marginTop: '1rem', marginBottom: '2rem' }}
       >
-        <Stack gap={12} align="center">
-          {/* Header Section */}
-          <Stack gap={4} align="center">
-            <NotFoundDiagnostics errorCode={errorCode} />
-            
-            <Text 
-              as="h1"
-              size="4xl" 
-              weight="bold"
-              color="text-white"
-              letterSpacing="tighter"
-              uppercase
-              block
-              leading="none"
-              textAlign="center"
-            >
-              {title}
-            </Text>
-          </Stack>
+        {title}
+      </Text>
 
-          {/* Visual Separator */}
-          <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" 
-            >{null}</Stack>
-          </Stack>
+      <Text 
+        size="xl" 
+        variant="med" 
+        block
+        weight="medium"
+        align="center"
+        style={{ marginBottom: '3rem' }}
+      >
+        {message}
+      </Text>
 
-          {/* Message Section */}
-          <Text 
-            size="xl" 
-            color="text-gray-400" 
-            maxWidth="lg"
-            leading="relaxed"
-            block
-            weight="medium"
-            textAlign="center"
-          >
-            {message}
-          </Text>
+      <NotFoundActions 
+        primaryLabel={actionLabel} 
+        onPrimaryClick={onActionClick} 
+      />
 
-          {/* Actions Section */}
-          <NotFoundActions 
-            primaryLabel={actionLabel} 
-            onPrimaryClick={onActionClick} 
-          />
-
-          {/* Footer Section */}
-          <Stack pt={8} width="full">
-            <Stack height="1px" width="full" bg="border-gray" opacity={0.1} mb={8}>{null}</Stack>
-            <NotFoundHelpLinks links={helpLinks} />
-          </Stack>
-        </Stack>
-      </Card>
-
-      {/* Subtle Edge Details */}
-      <Stack 
-        position="absolute" 
-        top={0} 
-        left={0} 
-        right={0} 
-        h="2px" 
-        bg="primary-accent"
-        opacity={0.1}
-      >{null}</Stack>
-      <Stack 
-        position="absolute" 
-        bottom={0} 
-        left={0} 
-        right={0} 
-        h="2px" 
-        bg="primary-accent"
-        opacity={0.1}
-      >{null}</Stack>
-    </Stack>
+      <FooterSection>
+        <NotFoundHelpLinks links={helpLinks} />
+      </FooterSection>
+    </ErrorPageContainer>
   );
 }