website refactor

apps/website/ui/ErrorPageContainer.tsx

@@ -1,29 +1,24 @@
 import React, { ReactNode } from 'react';
+import { Box } from './primitives/Box';
+import { Surface } from './primitives/Surface';
 
-interface ErrorPageContainerProps {
+export interface ErrorPageContainerProps {
   children: ReactNode;
-  errorCode: string;
-  description: string;
 }
 
-/**
- * ErrorPageContainer
- *
- * A reusable container for error pages (404, 500, etc.)
- * Provides consistent styling and layout for error states.
- */
-export function ErrorPageContainer({
-  children,
-  errorCode,
-  description,
-}: ErrorPageContainerProps) {
+export const ErrorPageContainer = ({ children }: ErrorPageContainerProps) => {
   return (
-    <main className="min-h-screen flex items-center justify-center bg-deep-graphite text-white px-6">
-      <div className="max-w-md text-center space-y-4">
-        <h1 className="text-3xl font-semibold">{errorCode}</h1>
-        <p className="text-sm text-gray-400">{description}</p>
+    <Box 
+      minHeight="100vh" 
+      display="flex" 
+      alignItems="center" 
+      justifyContent="center" 
+      padding={4} 
+      bg="var(--ui-color-bg-base)"
+    >
+      <Surface variant="default" rounded="xl" padding={8} style={{ maxWidth: '32rem', width: '100%', border: '1px solid var(--ui-color-border-default)' }}>
         {children}
-      </div>
-    </main>
+      </Surface>
+    </Box>
   );
-}
+};