website refactor

apps/website/components/errors/AppErrorBoundaryView.tsx

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