84 lines
3.0 KiB
TypeScript
84 lines
3.0 KiB
TypeScript
import Heading from '@/components/ui/Heading';
|
|
import { Trophy, Users } from 'lucide-react';
|
|
import Button from '../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>
|
|
);
|
|
} |