website refactor

apps/website/ui/Hero.tsx

@@ -3,28 +3,21 @@ import { Box } from './Box';
 
 interface HeroProps {
   children: ReactNode;
-  className?: string;
-  variant?: 'default' | 'primary' | 'secondary';
+  variant?: 'primary' | 'secondary';
 }
 
-export function Hero({ children, className = '', variant = 'default' }: HeroProps) {
-  const baseClasses = 'relative overflow-hidden rounded-2xl border p-8';
-  
-  const variantClasses = {
-    default: 'bg-iron-gray border-charcoal-outline',
-    primary: 'bg-gradient-to-br from-iron-gray via-iron-gray to-charcoal-outline border-charcoal-outline',
-    secondary: 'bg-gradient-to-br from-primary-blue/10 to-purple-600/10 border-primary-blue/20'
-  };
-
-  const classes = [baseClasses, variantClasses[variant], className].filter(Boolean).join(' ');
-
+export function Hero({ children, variant = 'primary' }: HeroProps) {
   return (
-    <Box className={classes}>
-      <Box className="absolute top-0 right-0 w-64 h-64 bg-primary-blue/5 rounded-full blur-3xl" />
-      <Box className="absolute bottom-0 left-0 w-48 h-48 bg-performance-green/5 rounded-full blur-3xl" />
-      <Box className="relative z-10">
-        {children}
-      </Box>
+    <Box 
+      position="relative" 
+      rounded="2xl" 
+      overflow="hidden" 
+      p={{ base: 6, md: 8 }}
+      bg={variant === 'primary' ? 'bg-iron-gray/40' : 'bg-deep-graphite'}
+      border
+      borderColor="border-charcoal-outline"
+    >
+      {children}
     </Box>
   );
 }