60 lines
2.4 KiB
TypeScript
60 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Award, Trophy, Users } from 'lucide-react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Button } from '@/ui/Button';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { DecorativeBlur } from '@/ui/DecorativeBlur';
|
|
|
|
interface LeaderboardsHeroProps {
|
|
onNavigateToDrivers: () => void;
|
|
onNavigateToTeams: () => void;
|
|
}
|
|
|
|
export function LeaderboardsHero({ onNavigateToDrivers, onNavigateToTeams }: LeaderboardsHeroProps) {
|
|
return (
|
|
<Surface variant="muted" rounded="2xl" border padding={8} style={{ position: 'relative', overflow: 'hidden', background: 'linear-gradient(to bottom right, rgba(202, 138, 4, 0.2), rgba(38, 38, 38, 0.8), #0f1115)', borderColor: 'rgba(234, 179, 8, 0.2)' }}>
|
|
<DecorativeBlur color="yellow" size="lg" position="top-right" opacity={10} />
|
|
<DecorativeBlur color="blue" size="md" position="bottom-left" opacity={5} />
|
|
|
|
<Box style={{ position: 'relative', zIndex: 10 }}>
|
|
<Stack direction="row" align="center" gap={4} mb={4}>
|
|
<Surface variant="muted" rounded="xl" padding={3} style={{ background: 'linear-gradient(to bottom right, rgba(250, 204, 21, 0.2), rgba(217, 119, 6, 0.1))', border: '1px solid rgba(250, 204, 21, 0.3)' }}>
|
|
<Icon icon={Award} size={7} color="#facc15" />
|
|
</Surface>
|
|
<Box>
|
|
<Heading level={1}>Leaderboards</Heading>
|
|
<Text color="text-gray-400" block mt={1}>Where champions rise and legends are made</Text>
|
|
</Box>
|
|
</Stack>
|
|
|
|
<Text size="lg" color="text-gray-400" block mb={6} style={{ lineHeight: 1.625, maxWidth: '42rem' }}>
|
|
Track the best drivers and teams across all competitions. Every race counts. Every position matters. Who will claim the throne?
|
|
</Text>
|
|
|
|
<Stack direction="row" gap={3} wrap>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={onNavigateToDrivers}
|
|
icon={<Icon icon={Trophy} size={4} color="#3b82f6" />}
|
|
>
|
|
Driver Rankings
|
|
</Button>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={onNavigateToTeams}
|
|
icon={<Icon icon={Users} size={4} color="#a855f7" />}
|
|
>
|
|
Team Rankings
|
|
</Button>
|
|
</Stack>
|
|
</Box>
|
|
</Surface>
|
|
);
|
|
}
|