website refactor

apps/website/ui/ErrorPageContainer.tsx

@@ -4,9 +4,17 @@ import { Surface } from './primitives/Surface';
 
 export interface ErrorPageContainerProps {
   children: ReactNode;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'glass';
 }
 
-export const ErrorPageContainer = ({ children }: ErrorPageContainerProps) => {
+export const ErrorPageContainer = ({ children, size = 'md', variant = 'default' }: ErrorPageContainerProps) => {
+  const sizeMap = {
+    sm: '24rem',
+    md: '32rem',
+    lg: '42rem',
+  };
+
   return (
     <Box 
       minHeight="100vh" 
@@ -15,8 +23,10 @@ export const ErrorPageContainer = ({ children }: ErrorPageContainerProps) => {
       justifyContent="center" 
       padding={4} 
       bg="var(--ui-color-bg-base)"
+      position="relative"
+      overflow="hidden"
     >
-      <Surface variant="default" rounded="xl" padding={8} style={{ maxWidth: '32rem', width: '100%', border: '1px solid var(--ui-color-border-default)' }}>
+      <Surface variant={variant} rounded="xl" padding={8} style={{ maxWidth: sizeMap[size], width: '100%', border: '1px solid var(--ui-color-border-default)', position: 'relative', zIndex: 10 }}>
         {children}
       </Surface>
     </Box>