website refactor

apps/website/ui/SponsorTierCard.tsx

@@ -0,0 +1,99 @@
+
+
+import { CheckCircle2, LucideIcon } from 'lucide-react';
+import { Badge } from './Badge';
+import { Box } from './Box';
+import { Heading } from './Heading';
+import { Icon } from './Icon';
+import { Stack } from './Stack';
+import { Surface } from './Surface';
+import { Text } from './Text';
+
+interface SponsorTierCardProps {
+  type: 'main' | 'secondary';
+  available: boolean;
+  availableCount?: number;
+  totalCount?: number;
+  price: number;
+  benefits: string[];
+  isSelected: boolean;
+  onClick: () => void;
+  icon: LucideIcon;
+  iconColor: string;
+}
+
+export function SponsorTierCard({
+  type,
+  available,
+  availableCount,
+  totalCount,
+  price,
+  benefits,
+  isSelected,
+  onClick,
+  icon,
+  iconColor,
+}: SponsorTierCardProps) {
+  const isMain = type === 'main';
+
+  return (
+    <Surface
+      variant="muted"
+      rounded="xl"
+      border={true}
+      padding={5}
+      className={`transition-all duration-200 ${available ? 'cursor-pointer' : 'opacity-60 cursor-default'} ${isSelected ? 'border-primary-blue ring-2 ring-primary-blue/20' : 'border-charcoal-outline'}`}
+      onClick={available ? onClick : undefined}
+      position="relative"
+    >
+      <Stack direction="row" align="start" justify="between" mb={4}>
+        <Box>
+          <Stack direction="row" align="center" gap={2} mb={1}>
+            <Icon icon={icon} size={5} className={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="text-performance-green" />
+            <Text size="sm" color="text-gray-300">{benefit}</Text>
+          </Stack>
+        ))}
+      </Stack>
+
+      {isSelected && available && (
+        <Box position="absolute" top="4" right="4">
+          <Box 
+            width="4" 
+            height="4" 
+            rounded="full" 
+            bg="bg-primary-blue" 
+            display="flex" 
+            center
+          >
+            <Icon icon={CheckCircle2} size={3} color="text-white" />
+          </Box>
+        </Box>
+      )}
+    </Surface>
+  );
+}