website refactor

apps/website/ui/SponsorshipCategoryCard.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { LucideIcon } from 'lucide-react';
+import { Link } from './Link';
+import { Card } from './Card';
+import { Box } from './Box';
+import { Stack } from './Stack';
+import { Text } from './Text';
+import { Icon } from './Icon';
+
+interface SponsorshipCategoryCardProps {
+  icon: LucideIcon;
+  title: string;
+  count: number;
+  impressions: number;
+  color: string;
+  href: string;
+}
+
+export function SponsorshipCategoryCard({
+  icon,
+  title,
+  count,
+  impressions,
+  color,
+  href
+}: SponsorshipCategoryCardProps) {
+  return (
+    <Link href={href} variant="ghost" block>
+      <Card p={4} className="hover:border-charcoal-outline/60 transition-all cursor-pointer">
+        <Stack direction="row" align="center" justify="between">
+          <Stack direction="row" align="center" gap={3}>
+            <Box 
+              width="10" 
+              height="10" 
+              rounded="lg" 
+              bg="bg-charcoal-outline" 
+              display="flex" 
+              center
+            >
+              <Icon icon={icon} size={5} className={color} />
+            </Box>
+            <Box>
+              <Text weight="medium" color="text-white" block>{title}</Text>
+              <Text size="sm" color="text-gray-500">{count} active</Text>
+            </Box>
+          </Stack>
+          <Box textAlign="right">
+            <Text weight="semibold" color="text-white" block>{impressions.toLocaleString()}</Text>
+            <Text size="xs" color="text-gray-500">impressions</Text>
+          </Box>
+        </Stack>
+      </Card>
+    </Link>
+  );
+}