website refactor

apps/website/components/errors/AppErrorBoundaryView.tsx

@@ -3,6 +3,8 @@
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { AlertTriangle } from 'lucide-react';
 import React from 'react';
 
@@ -20,30 +22,31 @@ interface AppErrorBoundaryViewProps {
  */
 export function AppErrorBoundaryView({ title, description, children }: AppErrorBoundaryViewProps) {
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1.5rem', width: '100%' }}>
+    <Stack alignItems="center" gap={6} fullWidth>
       {/* Header Icon */}
-      <div 
-        style={{ 
-          padding: '1rem', 
-          borderRadius: '9999px', 
-          backgroundColor: 'rgba(255, 190, 77, 0.1)', 
-          border: '1px solid rgba(255, 190, 77, 0.3)' 
-        }}
+      <Surface 
+        padding={4} 
+        rounded="full" 
+        bg="rgba(255, 190, 77, 0.1)" 
+        border="1px solid rgba(255, 190, 77, 0.3)"
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
       >
         <Icon icon={AlertTriangle} size={8} intent="warning" />
-      </div>
+      </Surface>
 
       {/* Typography */}
-      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.5rem' }}>
+      <Stack alignItems="center" gap={2}>
         <Heading level={1} weight="bold">
           {title}
         </Heading>
         <Text variant="low" align="center" style={{ maxWidth: '32rem' }} leading="relaxed">
           {description}
         </Text>
-      </div>
+      </Stack>
 
       {children}
-    </div>
+    </Stack>
   );
 }