website refactor

apps/website/ui/Hero.tsx

@@ -0,0 +1,30 @@
+import React, { ReactNode } from 'react';
+import { Box } from './Box';
+
+interface HeroProps {
+  children: ReactNode;
+  className?: string;
+  variant?: 'default' | '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(' ');
+
+  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>
+  );
+}