website refactor

apps/website/ui/SponsorSlotCard.tsx

@@ -0,0 +1,46 @@
+import React, { ReactNode } from 'react';
+import { Box } from './Box';
+import { Text } from './Text';
+import { Stack } from './Stack';
+
+interface SponsorSlotCardProps {
+  title: string;
+  status: string;
+  statusColor: string;
+  benefits: string;
+  price?: string;
+  action?: ReactNode;
+  available: boolean;
+  variant: 'main' | 'secondary';
+}
+
+export function SponsorSlotCard({
+  title,
+  status,
+  statusColor,
+  benefits,
+  price,
+  action,
+  available,
+  variant,
+}: SponsorSlotCardProps) {
+  const bgClass = available 
+    ? (variant === 'main' ? 'bg-performance-green/10 border-performance-green/30' : 'bg-purple-500/10 border-purple-500/30')
+    : 'bg-iron-gray/30 border-charcoal-outline';
+
+  return (
+    <Box p={3} rounded="lg" border={true} className={bgClass}>
+      <Box display="flex" alignItems="center" justifyContent="between" mb={1}>
+        <Text size="sm" weight="medium" color="text-white">{title}</Text>
+        <Text size="xs" className={statusColor}>{status}</Text>
+      </Box>
+      <Text size="xs" color="text-gray-400" block mb={2}>{benefits}</Text>
+      {available && price && (
+        <Box display="flex" alignItems="center" justifyContent="between">
+          <Text size="lg" weight="bold" color="text-white">{price}</Text>
+          {action}
+        </Box>
+      )}
+    </Box>
+  );
+}