extract components from website

apps/website/components/sponsors/ActivityItem.tsx

@@ -0,0 +1,29 @@
+interface ActivityItemProps {
+  activity: {
+    id: string;
+    message: string;
+    time: string;
+    typeColor: string;
+    formattedImpressions?: string | null;
+  };
+}
+
+export default function ActivityItem({ activity }: ActivityItemProps) {
+  return (
+    <div className="flex items-start gap-3 py-3 border-b border-charcoal-outline/50 last:border-b-0">
+      <div className={`w-2 h-2 rounded-full mt-2 ${activity.typeColor}`} />
+      <div className="flex-1 min-w-0">
+        <p className="text-sm text-white truncate">{activity.message}</p>
+        <div className="flex items-center gap-2 mt-1">
+          <span className="text-xs text-gray-500">{activity.time}</span>
+          {activity.formattedImpressions && (
+            <>
+              <span className="text-xs text-gray-600">•</span>
+              <span className="text-xs text-gray-400">{activity.formattedImpressions} views</span>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

apps/website/components/sponsors/MetricCard.tsx

@@ -0,0 +1,55 @@
+import { motion, useReducedMotion } from 'framer-motion';
+import { ArrowUpRight, ArrowDownRight } from 'lucide-react';
+import Card from '@/components/ui/Card';
+
+interface MetricCardProps {
+  title: string;
+  value: number | string;
+  change?: number;
+  icon: React.ElementType;
+  suffix?: string;
+  prefix?: string;
+  delay?: number;
+}
+
+export default function MetricCard({
+  title,
+  value,
+  change,
+  icon: Icon,
+  suffix = '',
+  prefix = '',
+  delay = 0,
+}: MetricCardProps) {
+  const shouldReduceMotion = useReducedMotion();
+  const isPositive = change && change > 0;
+  const isNegative = change && change < 0;
+
+  return (
+    <motion.div
+      initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay }}
+    >
+      <Card className="p-5 h-full">
+        <div className="flex items-start justify-between mb-3">
+          <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-primary-blue/10">
+            <Icon className="w-5 h-5 text-primary-blue" />
+          </div>
+          {change !== undefined && (
+            <div className={`flex items-center gap-1 text-sm font-medium ${
+              isPositive ? 'text-performance-green' : isNegative ? 'text-racing-red' : 'text-gray-400'
+            }`}>
+              {isPositive ? <ArrowUpRight className="w-4 h-4" /> : isNegative ? <ArrowDownRight className="w-4 h-4" /> : null}
+              {Math.abs(change)}%
+            </div>
+          )}
+        </div>
+        <div className="text-2xl font-bold text-white mb-1">
+          {prefix}{typeof value === 'number' ? value.toLocaleString() : value}{suffix}
+        </div>
+        <div className="text-sm text-gray-400">{title}</div>
+      </Card>
+    </motion.div>
+  );
+}

apps/website/components/sponsors/RenewalAlert.tsx

@@ -0,0 +1,41 @@
+import { Trophy, Users, Car, Flag, Megaphone } from 'lucide-react';
+import Button from '@/components/ui/Button';
+
+interface RenewalAlertProps {
+  renewal: {
+    id: string;
+    type: 'league' | 'team' | 'driver' | 'race' | 'platform';
+    name: string;
+    formattedRenewDate: string;
+    formattedPrice: string;
+  };
+}
+
+export default function RenewalAlert({ renewal }: RenewalAlertProps) {
+  const typeIcons = {
+    league: Trophy,
+    team: Users,
+    driver: Car,
+    race: Flag,
+    platform: Megaphone,
+  };
+  const Icon = typeIcons[renewal.type] || Trophy;
+
+  return (
+    <div className="flex items-center justify-between p-3 rounded-lg bg-warning-amber/10 border border-warning-amber/30">
+      <div className="flex items-center gap-3">
+        <Icon className="w-4 h-4 text-warning-amber" />
+        <div>
+          <p className="text-sm text-white">{renewal.name}</p>
+          <p className="text-xs text-gray-400">Renews {renewal.formattedRenewDate}</p>
+        </div>
+      </div>
+      <div className="text-right">
+        <p className="text-sm font-semibold text-white">{renewal.formattedPrice}</p>
+        <Button variant="secondary" className="text-xs mt-1 py-1 px-2 min-h-0">
+          Renew
+        </Button>
+      </div>
+    </div>
+  );
+}

apps/website/components/sponsors/SponsorshipCategoryCard.tsx

@@ -0,0 +1,42 @@
+import Link from 'next/link';
+import Card from '@/components/ui/Card';
+
+interface SponsorshipCategoryCardProps {
+  icon: React.ElementType;
+  title: string;
+  count: number;
+  impressions: number;
+  color: string;
+  href: string;
+}
+
+export default function SponsorshipCategoryCard({
+  icon: Icon,
+  title,
+  count,
+  impressions,
+  color,
+  href
+}: SponsorshipCategoryCardProps) {
+  return (
+    <Link href={href}>
+      <Card className="p-4 hover:border-primary-blue/50 transition-all duration-300 cursor-pointer group">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className={`w-10 h-10 rounded-lg bg-iron-gray flex items-center justify-center group-hover:bg-primary-blue/10 transition-colors`}>
+              <Icon className={`w-5 h-5 ${color}`} />
+            </div>
+            <div>
+              <p className="text-white font-medium">{title}</p>
+              <p className="text-sm text-gray-500">{count} active</p>
+            </div>
+          </div>
+          <div className="text-right">
+            <p className="text-white font-semibold">{impressions.toLocaleString()}</p>
+            <p className="text-xs text-gray-500">impressions</p>
+          </div>
+        </div>
+      </Card>
+    </Link>
+  );
+}