website refactor

apps/website/components/achievements/MilestoneItem.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+
+interface MilestoneItemProps {
+  label: string;
+  value: string;
+  icon: string;
+}
+
+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}>
+        <Text size="xl">{icon}</Text>
+        <Text size="sm" color="text-gray-400">{label}</Text>
+      </Box>
+      <Text size="sm" weight="medium" color="text-white">{value}</Text>
+    </Box>
+  );
+}