website refactor

apps/website/components/errors/AppErrorBoundaryView.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import React from 'react';
+import { AlertTriangle } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Icon } from '@/ui/Icon';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+
+interface AppErrorBoundaryViewProps {
+  title: string;
+  description: string;
+  children?: React.ReactNode;
+}
+
+/**
+ * AppErrorBoundaryView
+ * 
+ * Semantic container for error boundary content.
+ * Follows "Precision Racing Minimal" theme.
+ */
+export function AppErrorBoundaryView({ title, description, children }: AppErrorBoundaryViewProps) {
+  return (
+    <Stack gap={6} align="center" fullWidth>
+      {/* Header Icon */}
+      <Box 
+        p={4} 
+        rounded="full" 
+        bg="bg-warning-amber" 
+        bgOpacity={0.1} 
+        border 
+        borderColor="border-warning-amber"
+      >
+        <Icon icon={AlertTriangle} size={8} color="var(--warning-amber)" />
+      </Box>
+
+      {/* Typography */}
+      <Stack gap={2} align="center">
+        <Heading level={1} weight="bold">
+          <Text uppercase letterSpacing="tighter">
+            {title}
+          </Text>
+        </Heading>
+        <Text color="text-gray-400" align="center" maxWidth="md" leading="relaxed">
+          {description}
+        </Text>
+      </Stack>
+
+      {children}
+    </Stack>
+  );
+}