website refactor

apps/website/ui/Container.tsx

@@ -0,0 +1,50 @@
+import React, { ReactNode, HTMLAttributes } from 'react';
+import { Box } from './Box';
+
+type Spacing = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
+
+interface ContainerProps extends HTMLAttributes<HTMLElement> {
+  children: ReactNode;
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  padding?: boolean;
+  className?: string;
+  py?: Spacing;
+}
+
+export function Container({ 
+  children, 
+  size = 'lg', 
+  padding = true,
+  className = '',
+  py,
+  ...props 
+}: ContainerProps) {
+  const sizeClasses = {
+    sm: 'max-w-2xl',
+    md: 'max-w-4xl',
+    lg: 'max-w-7xl',
+    xl: 'max-w-[1400px]',
+    full: 'max-w-full'
+  };
+
+  const spacingMap: Record<number, string> = {
+    0: '0', 0.5: '0.5', 1: '1', 1.5: '1.5', 2: '2', 2.5: '2.5', 3: '3', 3.5: '3.5', 4: '4',
+    5: '5', 6: '6', 7: '7', 8: '8', 9: '9', 10: '10', 11: '11', 12: '12', 14: '14',
+    16: '16', 20: '20', 24: '24', 28: '28', 32: '32', 36: '36', 40: '40', 44: '44',
+    48: '48', 52: '52', 56: '56', 60: '60', 64: '64', 72: '72', 80: '80', 96: '96'
+  };
+
+  const classes = [
+    'mx-auto',
+    sizeClasses[size],
+    padding ? 'px-4 sm:px-6 lg:px-8' : '',
+    py !== undefined ? `py-${spacingMap[py]}` : '',
+    className
+  ].filter(Boolean).join(' ');
+
+  return (
+    <Box className={classes} {...props}>
+      {children}
+    </Box>
+  );
+}