website refactor

apps/website/components/errors/ErrorScreen.tsx

@@ -1,13 +1,13 @@
 'use client';
 
 import React from 'react';
-import { Box } from '@/ui/Box';
-import { Surface } from '@/ui/Surface';
 import { Glow } from '@/ui/Glow';
 import { Text } from '@/ui/Text';
 import { AppErrorBoundaryView } from './AppErrorBoundaryView';
 import { ErrorRecoveryActions } from './ErrorRecoveryActions';
 import { ErrorDetailsBlock } from './ErrorDetailsBlock';
+import { Stack } from '@/ui/Stack';
+import { Card } from '@/ui/Card';
 
 interface ErrorScreenProps {
   error: Error & { digest?: string };
@@ -23,13 +23,12 @@ interface ErrorScreenProps {
  */
 export function ErrorScreen({ error, reset, onHome }: ErrorScreenProps) {
   return (
-    <Box 
+    <Stack 
       as="main" 
       minHeight="screen"
       fullWidth
-      display="flex"
-      alignItems="center"
-      justifyContent="center"
+      align="center"
+      justify="center"
       bg="bg-deep-graphite"
       position="relative"
       overflow="hidden"
@@ -38,43 +37,40 @@ export function ErrorScreen({ error, reset, onHome }: ErrorScreenProps) {
       {/* Background Accents */}
       <Glow color="primary" size="xl" position="center" opacity={0.05} />
       
-      <Surface 
-        variant="glass" 
-        border 
+      <Card 
+        variant="outline"
         rounded="lg" 
-        padding={8} 
+        p={8} 
         maxWidth="2xl"
         fullWidth
         position="relative"
         zIndex={10}
-        shadow="xl"
         borderColor="border-white"
-        bgOpacity={0.05}
+        className="bg-white/5 backdrop-blur-md"
       >
         <AppErrorBoundaryView 
           title="System Malfunction"
           description="The application encountered an unexpected state. Our telemetry has logged the incident."
         >
           {/* Error Message Summary */}
-          <Surface 
-            variant="dark" 
+          <Card 
+            variant="outline"
             rounded="md" 
-            padding={4} 
+            p={4} 
             fullWidth 
-            border 
             borderColor="border-white" 
-            bgOpacity={0.2}
+            className="bg-graphite-black/20"
           >
             <Text font="mono" size="sm" color="text-warning-amber" block>
               {error.message || 'Unknown execution error'}
             </Text>
-          </Surface>
+          </Card>
 
           <ErrorRecoveryActions onRetry={reset} onHome={onHome} />
           
           <ErrorDetailsBlock error={error} />
         </AppErrorBoundaryView>
-      </Surface>
-    </Box>
+      </Card>
+    </Stack>
   );
 }