extract components from website

apps/website/components/leagues/HeroSection.tsx

@@ -0,0 +1,85 @@
+import { Trophy, Plus } from 'lucide-react';
+import Heading from '@/components/ui/Heading';
+import Button from '@/components/ui/Button';
+
+interface StatItem {
+  value: number;
+  label: string;
+  color: string;
+  animate?: boolean;
+}
+
+interface HeroSectionProps {
+  icon?: React.ElementType;
+  title: string;
+  description: string;
+  stats?: StatItem[];
+  ctaLabel?: string;
+  ctaDescription?: string;
+  onCtaClick?: () => void;
+  className?: string;
+}
+
+export function HeroSection({
+  icon: Icon = Trophy,
+  title,
+  description,
+  stats = [],
+  ctaLabel = "Create League",
+  ctaDescription = "Set up your own racing series",
+  onCtaClick,
+  className,
+}: HeroSectionProps) {
+  return (
+    <div className={`relative mb-10 py-10 px-8 rounded-2xl bg-gradient-to-br from-iron-gray/80 via-deep-graphite to-iron-gray/60 border border-charcoal-outline/50 overflow-hidden ${className || ''}`}>
+      {/* Background decoration */}
+      <div className="absolute top-0 right-0 w-96 h-96 bg-primary-blue/5 rounded-full blur-3xl" />
+      <div className="absolute bottom-0 left-0 w-64 h-64 bg-neon-aqua/5 rounded-full blur-3xl" />
+
+      <div className="relative z-10 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8">
+        <div className="max-w-2xl">
+          <div className="flex items-center gap-3 mb-4">
+            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/20">
+              <Icon className="w-6 h-6 text-primary-blue" />
+            </div>
+            <Heading level={1} className="text-3xl lg:text-4xl">
+              {title}
+            </Heading>
+          </div>
+          <p className="text-gray-400 text-lg leading-relaxed mb-6">
+            {description}
+          </p>
+
+          {/* Stats */}
+          {stats.length > 0 && (
+            <div className="flex flex-wrap gap-6">
+              {stats.map((stat, index) => (
+                <div key={index} className="flex items-center gap-2">
+                  <div className={`w-2 h-2 rounded-full ${stat.color} ${stat.animate ? 'animate-pulse' : ''}`} />
+                  <span className="text-sm text-gray-400">
+                    <span className="text-white font-semibold">{stat.value}</span> {stat.label}
+                  </span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* CTA */}
+        {onCtaClick && (
+          <div className="flex flex-col gap-4">
+            <Button
+              variant="primary"
+              onClick={onCtaClick}
+              className="flex items-center gap-2 px-6 py-3"
+            >
+              <Plus className="w-5 h-5" />
+              <span>{ctaLabel}</span>
+            </Button>
+            <p className="text-xs text-gray-500 text-center">{ctaDescription}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}