85 lines
2.7 KiB
TypeScript
85 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import { Button } from '@/ui/Button';
|
|
import { DecorativeBlur } from '@/ui/DecorativeBlur';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Stack } from '@/ui/primitives/Stack';
|
|
import { Surface } from '@/ui/primitives/Surface';
|
|
import { Text } from '@/ui/Text';
|
|
import { Award, Trophy, Users } from 'lucide-react';
|
|
|
|
interface LeaderboardsHeroProps {
|
|
onNavigateToDrivers: () => void;
|
|
onNavigateToTeams: () => void;
|
|
}
|
|
|
|
export function LeaderboardsHero({ onNavigateToDrivers, onNavigateToTeams }: LeaderboardsHeroProps) {
|
|
return (
|
|
<Surface
|
|
variant="muted"
|
|
rounded="2xl"
|
|
border
|
|
padding={8}
|
|
position="relative"
|
|
overflow="hidden"
|
|
bg="bg-gradient-to-br from-primary-blue/10 via-deep-charcoal to-graphite-black"
|
|
borderColor="border-primary-blue/20"
|
|
>
|
|
<DecorativeBlur color="blue" size="lg" position="top-right" opacity={10} />
|
|
<DecorativeBlur color="purple" size="md" position="bottom-left" opacity={5} />
|
|
|
|
<Stack position="relative" zIndex={10}>
|
|
<Stack direction="row" align="center" gap={4} mb={4}>
|
|
<Stack
|
|
p={3}
|
|
bg="linear-gradient(to bottom right, rgba(25, 140, 255, 0.2), rgba(25, 140, 255, 0.05))"
|
|
border
|
|
borderColor="border-primary-blue/30"
|
|
rounded="xl"
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
>
|
|
<Icon icon={Award} size={7} color="text-primary-blue" />
|
|
</Stack>
|
|
<Stack>
|
|
<Heading level={1} weight="bold" letterSpacing="tight">Leaderboards</Heading>
|
|
<Text color="text-gray-400" block mt={1} size="sm" uppercase letterSpacing="widest" weight="bold">Precision Performance Tracking</Text>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
<Text
|
|
size="lg"
|
|
color="text-gray-400"
|
|
block
|
|
mb={8}
|
|
leading="relaxed"
|
|
maxWidth="42rem"
|
|
>
|
|
Track the best drivers and teams across all competitions. Every race counts. Every position matters. Analyze telemetry-grade rankings and performance metrics.
|
|
</Text>
|
|
|
|
<Stack direction="row" gap={4} wrap>
|
|
<Button
|
|
variant="primary"
|
|
onClick={onNavigateToDrivers}
|
|
icon={<Icon icon={Trophy} size={4} />}
|
|
shadow="shadow-lg shadow-primary-blue/20"
|
|
>
|
|
Driver Rankings
|
|
</Button>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={onNavigateToTeams}
|
|
icon={<Icon icon={Users} size={4} />}
|
|
hoverBg="bg-white/5"
|
|
>
|
|
Team Rankings
|
|
</Button>
|
|
</Stack>
|
|
</Stack>
|
|
</Surface>
|
|
);
|
|
}
|