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

apps/website/components/achievements/AchievementGrid.tsx

@@ -1,13 +1,9 @@
-
-
 import { AchievementDisplay } from '@/lib/display-objects/AchievementDisplay';
-import { Box } from '@/ui/Box';
 import { Card } from '@/ui/Card';
 import { Grid } from '@/ui/Grid';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Stack } from '@/ui/Stack';
-import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { Award, Crown, Medal, Star, Target, Trophy, Zap } from 'lucide-react';
 
@@ -39,31 +35,31 @@ function getAchievementIcon(icon: string) {
 export function AchievementGrid({ achievements }: AchievementGridProps) {
   return (
     <Card>
-      <Box mb={4}>
+      <Stack mb={4}>
         <Stack direction="row" align="center" justify="between">
           <Heading level={2} icon={<Icon icon={Award} size={5} color="#facc15" />}>
             Achievements
           </Heading>
           <Text size="sm" color="text-gray-500" weight="normal">{achievements.length} earned</Text>
         </Stack>
-      </Box>
+      </Stack>
       <Grid cols={1} gap={4}>
         {achievements.map((achievement) => {
           const AchievementIcon = getAchievementIcon(achievement.icon);
           const rarity = AchievementDisplay.getRarityColor(achievement.rarity);
           return (
-            <Surface
+            <Card
               key={achievement.id}
-              variant={rarity.surface}
+              variant="outline"
+              p={4}
               rounded="xl"
-              border
-              padding={4}
+              className={rarity.surface === 'muted' ? 'bg-panel-gray/40' : ''}
             >
               <Stack direction="row" align="start" gap={3}>
-                <Surface variant="muted" rounded="lg" padding={3}>
+                <Stack bg="panel-gray/40" rounded="lg" p={3} align="center" justify="center">
                   <Icon icon={AchievementIcon} size={5} color={rarity.icon} />
-                </Surface>
-                <Box>
+                </Stack>
+                <Stack flex={1}>
                   <Text weight="semibold" size="sm" color="text-white" block>{achievement.title}</Text>
                   <Text size="xs" color="text-gray-400" block mt={1}>{achievement.description}</Text>
                   <Stack direction="row" align="center" gap={2} mt={2}>
@@ -75,9 +71,9 @@ export function AchievementGrid({ achievements }: AchievementGridProps) {
                       {AchievementDisplay.formatDate(achievement.earnedAt)}
                     </Text>
                   </Stack>
-                </Box>
+                </Stack>
               </Stack>
-            </Surface>
+            </Card>
           );
         })}
       </Grid>

apps/website/components/achievements/MilestoneItem.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
 
 interface MilestoneItemProps {
   label: string;
@@ -10,12 +10,12 @@ interface MilestoneItemProps {
 
 export function MilestoneItem({ label, value, icon }: MilestoneItemProps) {
   return (
-    <Box display="flex" alignItems="center" justifyContent="between" p={3} rounded="md" bg="bg-deep-graphite" border borderColor="border-charcoal-outline">
-      <Box display="flex" alignItems="center" gap={3}>
+    <Stack direction="row" align="center" justify="between" p={3} rounded="md" bg="bg-deep-graphite" border borderColor="border-charcoal-outline">
+      <Stack direction="row" align="center" gap={3}>
         <Text size="xl">{icon}</Text>
         <Text size="sm" color="text-gray-400">{label}</Text>
-      </Box>
+      </Stack>
       <Text size="sm" weight="medium" color="text-white">{value}</Text>
-    </Box>
+    </Stack>
   );
 }