84 lines
2.4 KiB
TypeScript
84 lines
2.4 KiB
TypeScript
|
|
|
|
import { Users } from 'lucide-react';
|
|
import { ReactNode } from 'react';
|
|
import { Badge } from './Badge';
|
|
import { Box } from './Box';
|
|
import { Heading } from './Heading';
|
|
import { Stack } from './Stack';
|
|
import { Text } from './Text';
|
|
|
|
interface TeamHeroSectionProps {
|
|
title: ReactNode;
|
|
description: string;
|
|
statsContent: ReactNode;
|
|
actionsContent: ReactNode;
|
|
sideContent: ReactNode;
|
|
}
|
|
|
|
export function TeamHeroSection({
|
|
title,
|
|
description,
|
|
statsContent,
|
|
actionsContent,
|
|
sideContent,
|
|
}: TeamHeroSectionProps) {
|
|
return (
|
|
<Box position="relative" mb={10} overflow="hidden">
|
|
{/* Main Hero Card */}
|
|
<Box
|
|
position="relative"
|
|
py={12}
|
|
px={8}
|
|
rounded="2xl"
|
|
style={{
|
|
background: 'linear-gradient(to bottom right, rgba(147, 51, 234, 0.3), rgba(38, 38, 38, 0.8), #0f1115)',
|
|
borderColor: 'rgba(147, 51, 234, 0.2)',
|
|
}}
|
|
border
|
|
>
|
|
{/* Background decorations */}
|
|
<Box position="absolute" top="0" right="0" w="80" h="80" bg="bg-purple-500" bgOpacity={0.1} rounded="full" blur="3xl" />
|
|
<Box position="absolute" bottom="0" left="1/4" w="64" h="64" bg="bg-neon-aqua" bgOpacity={0.05} rounded="full" blur="3xl" />
|
|
<Box position="absolute" top="1/2" right="1/4" w="48" h="48" bg="bg-yellow-400" bgOpacity={0.05} rounded="full" blur="2xl" />
|
|
|
|
<Box position="relative" zIndex={10}>
|
|
<Stack direction={{ base: 'col', lg: 'row' }} align="start" justify="between" gap={8}>
|
|
<Box maxWidth="xl">
|
|
{/* Badge */}
|
|
<Box mb={4}>
|
|
<Badge variant="primary" icon={Users}>
|
|
Team Racing
|
|
</Badge>
|
|
</Box>
|
|
|
|
<Heading level={1}>
|
|
{title}
|
|
</Heading>
|
|
|
|
<Text size="lg" color="text-gray-400" leading="relaxed" block mt={4} mb={6}>
|
|
{description}
|
|
</Text>
|
|
|
|
{/* Quick Stats */}
|
|
<Stack direction="row" gap={4} mb={6} wrap>
|
|
{statsContent}
|
|
</Stack>
|
|
|
|
{/* CTA Buttons */}
|
|
<Stack direction="row" gap={3} wrap>
|
|
{actionsContent}
|
|
</Stack>
|
|
</Box>
|
|
|
|
{/* Side Content */}
|
|
<Box w={{ base: 'full', lg: '72' }}>
|
|
{sideContent}
|
|
</Box>
|
|
</Stack>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|