website refactor

apps/website/ui/SponsorMetricCard.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Box } from './Box';
+import { Text } from './Text';
+import { Icon } from './Icon';
+
+interface SponsorMetricCardProps {
+  label: string;
+  value: string | number;
+  icon: React.ComponentType<{ className?: string }>;
+  color?: string;
+  trend?: {
+    value: number;
+    isPositive: boolean;
+  };
+}
+
+export function SponsorMetricCard({
+  label,
+  value,
+  icon,
+  color = 'text-primary-blue',
+  trend,
+}: SponsorMetricCardProps) {
+  return (
+    <Box
+      bg="bg-iron-gray/50"
+      rounded="lg"
+      p={3}
+      border={true}
+      borderColor="border-charcoal-outline"
+    >
+      <Box display="flex" alignItems="center" gap={1.5} className={color} mb={1}>
+        <Icon icon={icon as any} size={4} />
+        <Text size="xs" weight="medium">{label}</Text>
+      </Box>
+      <Box display="flex" alignItems="baseline" gap={2}>
+        <Text size="xl" weight="bold" color="text-white">
+          {typeof value === 'number' ? value.toLocaleString() : value}
+        </Text>
+        {trend && (
+          <Text size="xs" color={trend.isPositive ? 'text-performance-green' : 'text-red-400'}>
+            {trend.isPositive ? '+' : ''}{trend.value}%
+          </Text>
+        )}
+      </Box>
+    </Box>
+  );
+}