website refactor

apps/website/components/sponsors/MetricCard.tsx

@@ -1,18 +1,22 @@
+import React from 'react';
 import { motion, useReducedMotion } from 'framer-motion';
-import { ArrowUpRight, ArrowDownRight } from 'lucide-react';
-import Card from '@/components/ui/Card';
+import { ArrowUpRight, ArrowDownRight, LucideIcon } from 'lucide-react';
+import { Card } from '@/ui/Card';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
 
 interface MetricCardProps {
   title: string;
   value: number | string;
   change?: number;
-  icon: React.ElementType;
+  icon: LucideIcon;
   suffix?: string;
   prefix?: string;
   delay?: number;
 }
 
-export default function MetricCard({
+export function MetricCard({
   title,
   value,
   change,
@@ -30,26 +34,29 @@ export default function MetricCard({
       initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ delay }}
+      style={{ height: '100%' }}
     >
-      <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 style={{ height: '100%', padding: '1.25rem' }}>
+        <Stack gap={3}>
+          <Stack direction="row" align="start" justify="between">
+            <Box style={{ display: 'flex', height: '2.75rem', width: '2.75rem', alignItems: 'center', justifyContent: 'center', borderRadius: '0.75rem', backgroundColor: 'rgba(59, 130, 246, 0.1)' }}>
+              <Icon style={{ width: '1.25rem', height: '1.25rem', color: '#3b82f6' }} />
+            </Box>
+            {change !== undefined && (
+              <Stack direction="row" align="center" gap={1} style={{ fontSize: '0.875rem', fontWeight: 500, color: isPositive ? '#10b981' : isNegative ? '#ef4444' : '#9ca3af' }}>
+                {isPositive ? <ArrowUpRight style={{ width: '1rem', height: '1rem' }} /> : isNegative ? <ArrowDownRight style={{ width: '1rem', height: '1rem' }} /> : null}
+                <Text size="sm" weight="medium">{Math.abs(change)}%</Text>
+              </Stack>
+            )}
+          </Stack>
+          <Box>
+            <Text size="2xl" weight="bold" color="text-white" style={{ marginBottom: '0.25rem', display: 'block' }}>
+              {prefix}{typeof value === 'number' ? value.toLocaleString() : value}{suffix}
+            </Text>
+            <Text size="sm" color="text-gray-400">{title}</Text>
+          </Box>
+        </Stack>
       </Card>
     </motion.div>
   );
-}
+}