website refactor

apps/website/ui/Surface.tsx

@@ -1,87 +0,0 @@
-import React, { ReactNode, ElementType, ComponentPropsWithoutRef } from 'react';
-import { Box, BoxProps } from './Box';
-
-interface SurfaceProps<T extends ElementType = 'div'> extends Omit<BoxProps<T>, 'children' | 'className' | 'display'> {
-  as?: T;
-  children: ReactNode;
-  variant?: 'default' | 'muted' | 'dark' | 'glass' | 'gradient-blue' | 'gradient-gold' | 'gradient-purple' | 'gradient-green' | 'discord' | 'discord-inner';
-  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
-  border?: boolean;
-  padding?: number;
-  className?: string;
-  display?: 'block' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none';
-  shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'discord' | string;
-}
-
-export function Surface<T extends ElementType = 'div'>({ 
-  as,
-  children, 
-  variant = 'default',
-  rounded = 'none',
-  border = false,
-  padding = 0,
-  className = '',
-  display,
-  shadow = 'none',
-  ...props 
-}: SurfaceProps<T> & ComponentPropsWithoutRef<T>) {
-  const variantClasses: Record<string, string> = {
-    default: 'bg-panel-gray',
-    muted: 'bg-panel-gray/40',
-    dark: 'bg-graphite-black',
-    glass: 'bg-graphite-black/60 backdrop-blur-md',
-    'gradient-blue': 'bg-gradient-to-br from-primary-accent/10 via-panel-gray/80 to-graphite-black',
-    'gradient-gold': 'bg-gradient-to-br from-warning-amber/10 via-panel-gray/80 to-graphite-black',
-    'gradient-purple': 'bg-gradient-to-br from-purple-600/10 via-panel-gray/80 to-graphite-black',
-    'gradient-green': 'bg-gradient-to-br from-success-green/10 via-panel-gray/80 to-graphite-black',
-    'discord': 'bg-gradient-to-b from-graphite-black to-panel-gray',
-    'discord-inner': 'bg-gradient-to-br from-panel-gray via-graphite-black to-panel-gray'
-  };
-
-  const shadowClasses: Record<string, string> = {
-    none: '',
-    sm: 'shadow-sm',
-    md: 'shadow-md',
-    lg: 'shadow-lg',
-    xl: 'shadow-xl',
-    discord: 'shadow-[0_0_80px_rgba(88,101,242,0.15)]'
-  };
-
-  const roundedClasses: Record<string, string> = {
-    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-border-gray' : '',
-    paddingClasses[padding] || 'p-0',
-    shadowClasses[shadow],
-    display ? display : '',
-    className
-  ].filter(Boolean).join(' ');
-
-  return (
-    <Box as={as} className={classes} {...props}>
-      {children}
-    </Box>
-  );
-}