website refactor

apps/website/components/drivers/CareerHighlights.tsx

@@ -1,12 +1,10 @@
-
-
 import { AchievementCard } from '@/components/achievements/AchievementCard';
-import { Box } from '@/ui/Box';
 import { Card } from '@/ui/Card';
 import { GoalCard } from '@/ui/GoalCard';
 import { Heading } from '@/ui/Heading';
 import { MilestoneItem } from '@/components/achievements/MilestoneItem';
 import { Stack } from '@/ui/Stack';
+import { Grid } from '@/ui/Grid';
 
 interface Achievement {
   id: string;
@@ -69,7 +67,7 @@ export function CareerHighlights() {
       <Card>
         <Heading level={3} mb={4}>Achievements</Heading>
         
-        <Box display="grid" gridCols={{ base: 1, sm: 2 }} gap={3}>
+        <Grid cols={1} mdCols={2} gap={3}>
           {mockAchievements.map((achievement) => (
             <AchievementCard
               key={achievement.id}
@@ -80,7 +78,7 @@ export function CareerHighlights() {
               rarity={achievement.rarity}
             />
           ))}
-        </Box>
+        </Grid>
       </Card>
 
       <GoalCard