website refactor

apps/website/ui/SponsorshipCard.tsx

@@ -0,0 +1,52 @@
+import React, { ReactNode } from 'react';
+import { Card } from './Card';
+import { Box } from './primitives/Box';
+import { Text } from './Text';
+import { Heading } from './Heading';
+import { Badge } from './Badge';
+import { Icon } from './Icon';
+import { DollarSign } from 'lucide-react';
+
+export interface SponsorshipCardProps {
+  name: string;
+  description: string;
+  price: string;
+  isAvailable: boolean;
+  sponsoredBy?: string;
+}
+
+export const SponsorshipCard = ({ 
+  name, 
+  description, 
+  price, 
+  isAvailable, 
+  sponsoredBy 
+}: SponsorshipCardProps) => {
+  return (
+    <Card 
+      variant={isAvailable ? 'default' : 'dark'} 
+      style={isAvailable ? { border: '1px solid var(--ui-color-intent-success)' } : {}}
+    >
+      <Box display="flex" alignItems="start" justifyContent="between" marginBottom={4}>
+        <Heading level={4}>{name}</Heading>
+        <Badge variant={isAvailable ? 'success' : 'default'}>
+          {isAvailable ? 'Available' : 'Taken'}
+        </Badge>
+      </Box>
+
+      <Text size="sm" variant="med" block marginBottom={4}>{description}</Text>
+
+      <Box display="flex" alignItems="center" gap={2} marginBottom={sponsoredBy ? 4 : 0}>
+        <Icon icon={DollarSign} size={4} intent="low" />
+        <Text weight="bold" variant="high">{price}</Text>
+      </Box>
+
+      {sponsoredBy && (
+        <Box paddingTop={3} style={{ borderTop: '1px solid var(--ui-color-border-muted)' }}>
+          <Text size="xs" variant="low" block marginBottom={1}>Sponsored by</Text>
+          <Text size="sm" weight="medium" variant="high">{sponsoredBy}</Text>
+        </Box>
+      )}
+    </Card>
+  );
+};