extract components from website

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>
+  );
+}