website refactor

apps/website/ui/Card.tsx

@@ -0,0 +1,35 @@
+import React, { ReactNode, MouseEventHandler } from 'react';
+
+interface CardProps {
+  children: ReactNode;
+  className?: string;
+  onClick?: MouseEventHandler<HTMLDivElement>;
+  variant?: 'default' | 'highlight';
+}
+
+export function Card({ 
+  children, 
+  className = '', 
+  onClick,
+  variant = 'default'
+}: CardProps) {
+  const baseClasses = 'rounded-lg p-6 shadow-card border duration-200';
+  
+  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'
+  };
+  
+  const classes = [
+    baseClasses,
+    variantClasses[variant],
+    onClick ? 'cursor-pointer hover:scale-[1.02]' : '',
+    className
+  ].filter(Boolean).join(' ');
+  
+  return (
+    <div className={classes} onClick={onClick}>
+      {children}
+    </div>
+  );
+}