extract components from website

2025-12-21 13:55:31 +01:00
parent 13d8563feb
commit b52474d792
65 changed files with 3234 additions and 1361 deletions
--- a/apps/website/components/drivers/HeroSection.tsx
+++ b/apps/website/components/drivers/HeroSection.tsx
@@ -0,0 +1,84 @@
+import { Users, Trophy, ChevronRight } from 'lucide-react';
+import Heading from '@/components/ui/Heading';
+import Button from '@/components/ui/Button';
+
+interface HeroSectionProps {
+  icon?: React.ElementType;
+  title: string;
+  description: string;
+  stats: Array<{
+    value: number | string;
+    label: string;
+    color: string;
+    animate?: boolean;
+  }>;
+  ctaLabel?: string;
+  ctaDescription?: string;
+  onCtaClick?: () => void;
+  className?: string;
+}
+
+export function HeroSection({
+  icon: Icon = Users,
+  title,
+  description,
+  stats,
+  ctaLabel = "View Leaderboard",
+  ctaDescription = "See full driver rankings",
+  onCtaClick,
+  className,
+}: HeroSectionProps) {
+  return (
+    <div className={`relative mb-10 py-10 px-8 rounded-2xl bg-gradient-to-br from-primary-blue/20 via-iron-gray/80 to-deep-graphite border border-primary-blue/30 overflow-hidden ${className || ''}`}>
+      {/* Background decoration */}
+      <div className="absolute top-0 right-0 w-96 h-96 bg-primary-blue/10 rounded-full blur-3xl" />
+      <div className="absolute bottom-0 left-0 w-64 h-64 bg-yellow-400/5 rounded-full blur-3xl" />
+      <div className="absolute top-1/2 right-1/4 w-48 h-48 bg-performance-green/5 rounded-full blur-2xl" />
+
+      <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>
+
+          {/* Quick Stats */}
+          <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">
+                    {typeof stat.value === 'number' ? stat.value.toLocaleString() : 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"
+            >
+              <Trophy className="w-5 h-5" />
+              {ctaLabel}
+            </Button>
+            <p className="text-xs text-gray-500 text-center">{ctaDescription}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}