website refactor

apps/website/components/sponsors/SponsorTierCard.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import React from 'react';
+import { Trophy, Star, CheckCircle2 } from 'lucide-react';
+import { Card } from '@/ui/Card';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Badge } from '@/ui/Badge';
+import { Icon } from '@/ui/Icon';
+import { Surface } from '@/ui/Surface';
+
+interface SponsorTierCardProps {
+  type: 'main' | 'secondary';
+  available: boolean;
+  availableCount?: number;
+  totalCount?: number;
+  price: number;
+  benefits: string[];
+  isSelected: boolean;
+  onClick: () => void;
+}
+
+export function SponsorTierCard({
+  type,
+  available,
+  availableCount,
+  totalCount,
+  price,
+  benefits,
+  isSelected,
+  onClick,
+}: SponsorTierCardProps) {
+  const isMain = type === 'main';
+  const TierIcon = isMain ? Trophy : Star;
+  const iconColor = isMain ? '#facc15' : '#a78bfa';
+
+  return (
+    <Surface
+      variant="muted"
+      rounded="xl"
+      border
+      padding={5}
+      style={{ 
+        cursor: available ? 'pointer' : 'default',
+        opacity: available ? 1 : 0.6,
+        borderColor: isSelected ? '#3b82f6' : '#262626',
+        boxShadow: isSelected ? '0 0 0 2px rgba(59, 130, 246, 0.2)' : 'none'
+      }}
+      onClick={available ? onClick : undefined}
+    >
+      <Stack direction="row" align="start" justify="between" mb={4}>
+        <Box>
+          <Stack direction="row" align="center" gap={2} mb={1}>
+            <Icon icon={TierIcon} size={5} color={iconColor} />
+            <Heading level={3}>{isMain ? 'Main Sponsor' : 'Secondary Sponsor'}</Heading>
+          </Stack>
+          <Text size="sm" color="text-gray-400">
+            {isMain ? 'Primary branding position' : 'Supporting branding position'}
+          </Text>
+        </Box>
+        <Badge variant={available ? 'success' : 'default'}>
+          {isMain 
+            ? (available ? 'Available' : 'Filled')
+            : (available ? `${availableCount}/${totalCount} Available` : 'Full')
+          }
+        </Badge>
+      </Stack>
+      
+      <Box mb={4}>
+        <Text size="3xl" weight="bold" color="text-white">
+          ${price}
+          <Text size="sm" weight="normal" color="text-gray-500">/season</Text>
+        </Text>
+      </Box>
+
+      <Stack gap={2} mb={4}>
+        {benefits.map((benefit, i) => (
+          <Stack key={i} direction="row" align="center" gap={2}>
+            <Icon icon={CheckCircle2} size={4} color="#10b981" />
+            <Text size="sm" color="text-gray-300">{benefit}</Text>
+          </Stack>
+        ))}
+      </Stack>
+
+      {isSelected && available && (
+        <Box style={{ position: 'absolute', top: '1rem', right: '1rem' }}>
+          <Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: '#3b82f6', width: '1rem', height: '1rem', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <Icon icon={CheckCircle2} size={3} color="white" />
+          </Surface>
+        </Box>
+      )}
+    </Surface>
+  );
+}