website refactor

apps/website/ui/Card.tsx

@@ -13,7 +13,7 @@ interface CardProps extends Omit<BoxProps<'div'>, 'children' | 'className' | 'on
   children: ReactNode;
   className?: string;
   onClick?: MouseEventHandler<HTMLDivElement>;
-  variant?: 'default' | 'highlight';
+  variant?: 'default' | 'outline' | 'ghost';
   p?: Spacing | ResponsiveSpacing;
   px?: Spacing | ResponsiveSpacing;
   py?: Spacing | ResponsiveSpacing;
@@ -30,17 +30,18 @@ export function Card({
   variant = 'default',
   ...props
 }: CardProps) {
-  const baseClasses = 'rounded-lg shadow-card border duration-200';
+  const baseClasses = 'rounded-none transition-all duration-150 ease-smooth';
   
   const variantClasses = {
-    default: 'bg-iron-gray border-charcoal-outline',
-    highlight: 'bg-gradient-to-r from-blue-900/20 to-blue-700/10 border-blue-500/30'
+    default: 'bg-panel-gray border border-border-gray shadow-card',
+    outline: 'bg-transparent border border-border-gray',
+    ghost: 'bg-transparent border-none'
   };
 
   const classes = [
     baseClasses,
     variantClasses[variant],
-    onClick ? 'cursor-pointer hover:scale-[1.02]' : '',
+    onClick ? 'cursor-pointer hover:bg-border-gray/30' : '',
     className
   ].filter(Boolean).join(' ');
   
@@ -52,7 +53,7 @@ export function Card({
     <Box 
       className={classes} 
       onClick={onClick} 
-      p={hasPadding ? undefined : 6}
+      p={hasPadding ? undefined : 4}
       {...props}
     >
       {children}