website refactor

apps/website/components/sponsors/SponsorTierCard.tsx

@@ -1,8 +1,13 @@
-'use client';
 
-import React from 'react';
-import { Trophy, Star } from 'lucide-react';
-import { SponsorTierCard as UiSponsorTierCard } from '@/ui/SponsorTierCard';
+
+import { CheckCircle2, LucideIcon } from 'lucide-react';
+import { Badge } from '@/ui/Badge';
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
+import { Text } from '@/ui/Text';
 
 interface SponsorTierCardProps {
   type: 'main' | 'secondary';
@@ -13,6 +18,8 @@ interface SponsorTierCardProps {
   benefits: string[];
   isSelected: boolean;
   onClick: () => void;
+  icon: LucideIcon;
+  iconColor: string;
 }
 
 export function SponsorTierCard({
@@ -24,23 +31,69 @@ export function SponsorTierCard({
   benefits,
   isSelected,
   onClick,
+  icon,
+  iconColor,
 }: SponsorTierCardProps) {
   const isMain = type === 'main';
-  const TierIcon = isMain ? Trophy : Star;
-  const iconColor = isMain ? 'text-yellow-400' : 'text-purple-400';
 
   return (
-    <UiSponsorTierCard
-      type={type}
-      available={available}
-      availableCount={availableCount}
-      totalCount={totalCount}
-      price={price}
-      benefits={benefits}
-      isSelected={isSelected}
-      onClick={onClick}
-      icon={TierIcon}
-      iconColor={iconColor}
-    />
+    <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>
   );
 }