website refactor

apps/website/components/leaderboards/MedalBadge.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Crown } from 'lucide-react';
-import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Icon } from '@/ui/Icon';
 import { Text } from '@/ui/Text';
 
@@ -21,12 +21,11 @@ export function MedalBadge({ position }: MedalBadgeProps) {
   const isMedal = position <= 3;
 
   return (
-    <Box 
-      display="flex" 
+    <Stack 
       h="10" 
       w="10" 
-      alignItems="center" 
-      justifyContent="center" 
+      align="center" 
+      justify="center" 
       rounded="full" 
       bg={isMedal ? 'bg-gradient-to-br from-yellow-400/20 to-amber-600/10' : 'bg-iron-gray'}
     >
@@ -35,6 +34,6 @@ export function MedalBadge({ position }: MedalBadgeProps) {
       ) : (
         <Text size="lg" weight="bold" color="text-gray-400">#{position}</Text>
       )}
-    </Box>
+    </Stack>
   );
 }