website refactor

apps/website/ui/MedalBadge.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Crown } from 'lucide-react';
+import { Box } from './Box';
+import { Icon } from './Icon';
+import { Text } from './Text';
+
+interface MedalBadgeProps {
+  position: number;
+}
+
+export function MedalBadge({ position }: MedalBadgeProps) {
+  const getMedalColor = (pos: number) => {
+    switch (pos) {
+      case 1: return 'var(--warning-amber)';
+      case 2: return 'var(--iron-gray)';
+      case 3: return 'var(--amber-600)';
+      default: return 'var(--charcoal-outline)';
+    }
+  };
+
+  const isMedal = position <= 3;
+
+  return (
+    <Box 
+      display="flex" 
+      h="10" 
+      w="10" 
+      alignItems="center" 
+      justifyContent="center" 
+      rounded="full" 
+      bg={isMedal ? 'bg-gradient-to-br from-yellow-400/20 to-amber-600/10' : 'bg-iron-gray'}
+    >
+      {isMedal ? (
+        <Icon icon={Crown} size={5} color={getMedalColor(position)} />
+      ) : (
+        <Text size="lg" weight="bold" color="text-gray-400">#{position}</Text>
+      )}
+    </Box>
+  );
+}