website refactor

apps/website/ui/Container.tsx

@@ -2,28 +2,27 @@ import { ReactNode } from 'react';
 
 export interface ContainerProps {
   children: ReactNode;
-  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;
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+  spacing?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+  position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
+  zIndex?: number;
+  /** @deprecated Use semantic props instead. */
+  py?: number;
 }
 
 /**
  * Container - Redesigned for "Modern Precision" theme.
- * Includes compatibility props to prevent app-wide breakage.
+ * Enforces semantic props.
  */
 export const Container = ({ 
   children, 
   size = 'lg',
   padding = 'md',
-  py,
+  spacing = 'none',
   position,
   zIndex,
-  paddingX,
-  fullWidth,
+  py,
 }: ContainerProps) => {
   const sizeMap = {
     sm: 'max-w-[40rem]',
@@ -40,17 +39,23 @@ export const Container = ({
     lg: 'px-8',
   };
 
+  const spacingMap = {
+    none: 'py-0',
+    sm: 'py-4',
+    md: 'py-8',
+    lg: 'py-12',
+    xl: 'py-16',
+  };
+
   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%' } : {}),
+    ...(py !== undefined ? { paddingTop: `${py * 0.25}rem`, paddingBottom: `${py * 0.25}rem` } : {}),
   };
 
   return (
     <div 
-      className={`mx-auto w-full ${sizeMap[size as keyof typeof sizeMap] || sizeMap.lg} ${paddingMap[padding as keyof typeof paddingMap] || paddingMap.md}`}
+      className={`mx-auto w-full ${sizeMap[size]} ${paddingMap[padding]} ${spacingMap[spacing]}`}
       style={combinedStyle}
     >
       {children}