website refactor

apps/website/ui/Container.tsx

@@ -1,32 +1,59 @@
 import { ReactNode } from 'react';
-import { Box } from './Box';
 
 export interface ContainerProps {
   children: ReactNode;
-  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
-  py?: number;
-  position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
-  zIndex?: number;
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full' | any;
+  padding?: 'none' | 'sm' | 'md' | 'lg' | any;
+  py?: number | any;
+  position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky' | any;
+  zIndex?: number | any;
+  paddingX?: number | any;
+  fullWidth?: boolean | any;
 }
 
+/**
+ * Container - Redesigned for "Modern Precision" theme.
+ * Includes compatibility props to prevent app-wide breakage.
+ */
 export const Container = ({ 
   children, 
   size = 'lg',
+  padding = 'md',
   py,
   position,
-  zIndex
+  zIndex,
+  paddingX,
+  fullWidth,
 }: ContainerProps) => {
   const sizeMap = {
-    sm: '40rem',
-    md: '48rem',
-    lg: '64rem',
-    xl: '80rem',
-    full: '100%',
+    sm: 'max-w-[40rem]',
+    md: 'max-w-[48rem]',
+    lg: 'max-w-[64rem]',
+    xl: 'max-w-[80rem]',
+    full: 'max-w-full',
+  };
+
+  const paddingMap = {
+    none: 'px-0',
+    sm: 'px-2',
+    md: 'px-4',
+    lg: 'px-8',
+  };
+
+  const combinedStyle: React.CSSProperties = {
+    ...(py !== undefined ? { paddingTop: `${py * 0.25}rem`, paddingBottom: `${py * 0.25}rem` } : {}),
+    ...(paddingX !== undefined ? { paddingLeft: `${paddingX * 0.25}rem`, paddingRight: `${paddingX * 0.25}rem` } : {}),
+    ...(position ? { position } : {}),
+    ...(zIndex !== undefined ? { zIndex } : {}),
+    ...(fullWidth ? { width: '100%' } : {}),
   };
 
   return (
-    <Box marginX="auto" maxWidth={sizeMap[size]} paddingX={4} py={py as any} fullWidth position={position} zIndex={zIndex}>
+    <div 
+      className={`mx-auto w-full ${sizeMap[size as keyof typeof sizeMap] || sizeMap.lg} ${paddingMap[padding as keyof typeof paddingMap] || paddingMap.md}`}
+      style={combinedStyle}
+    >
       {children}
-    </Box>
+    </div>
   );
 };