website refactor

apps/website/components/achievements/AchievementCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
 import { Stack } from '@/ui/Stack';
+import { Card } from '@/ui/Card';
 
 interface AchievementCardProps {
   title: string;
@@ -26,13 +26,13 @@ export function AchievementCard({
   rarity,
 }: AchievementCardProps) {
   return (
-    <Box
+    <Card
       p={4}
       rounded="lg"
-      border
+      variant="outline"
       className={rarityColors[rarity]}
     >
-      <Box display="flex" alignItems="start" gap={3}>
+      <Stack direction="row" align="start" gap={3}>
         <Text size="3xl">{icon}</Text>
         <Stack gap={1} flexGrow={1}>
           <Text weight="medium" color="text-white">{title}</Text>
@@ -45,7 +45,7 @@ export function AchievementCard({
             })}
           </Text>
         </Stack>
-      </Box>
-    </Box>
+      </Stack>
+    </Card>
   );
 }