website refactor

apps/website/ui/Surface.tsx

@@ -0,0 +1,70 @@
+import React, { ReactNode, HTMLAttributes } from 'react';
+import { Box } from './Box';
+
+interface SurfaceProps extends HTMLAttributes<HTMLElement> {
+  children: ReactNode;
+  variant?: 'default' | 'muted' | 'dark' | 'glass' | 'gradient-blue' | 'gradient-gold' | 'gradient-purple';
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+  border?: boolean;
+  padding?: number;
+  className?: string;
+  display?: 'block' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none';
+}
+
+export function Surface({ 
+  children, 
+  variant = 'default',
+  rounded = 'lg',
+  border = false,
+  padding = 0,
+  className = '',
+  display,
+  ...props 
+}: SurfaceProps) {
+  const variantClasses = {
+    default: 'bg-iron-gray',
+    muted: 'bg-iron-gray/50',
+    dark: 'bg-deep-graphite',
+    glass: 'bg-deep-graphite/60 backdrop-blur-md',
+    'gradient-blue': 'bg-gradient-to-br from-primary-blue/20 via-iron-gray/80 to-deep-graphite',
+    'gradient-gold': 'bg-gradient-to-br from-yellow-600/20 via-iron-gray/80 to-deep-graphite',
+    'gradient-purple': 'bg-gradient-to-br from-purple-600/20 via-iron-gray/80 to-deep-graphite'
+  };
+
+  const roundedClasses = {
+    none: 'rounded-none',
+    sm: 'rounded-sm',
+    md: 'rounded-md',
+    lg: 'rounded-lg',
+    xl: 'rounded-xl',
+    '2xl': 'rounded-2xl',
+    full: 'rounded-full'
+  };
+
+  const paddingClasses: Record<number, string> = {
+    0: 'p-0',
+    1: 'p-1',
+    2: 'p-2',
+    3: 'p-3',
+    4: 'p-4',
+    6: 'p-6',
+    8: 'p-8',
+    10: 'p-10',
+    12: 'p-12'
+  };
+
+  const classes = [
+    variantClasses[variant],
+    roundedClasses[rounded],
+    border ? 'border border-charcoal-outline' : '',
+    paddingClasses[padding] || 'p-0',
+    display ? display : '',
+    className
+  ].filter(Boolean).join(' ');
+
+  return (
+    <Box className={classes} {...props}>
+      {children}
+    </Box>
+  );
+}