website refactor

apps/website/ui/ProfileStatGrid.tsx

@@ -1,8 +1,7 @@
-
-
-import { Box } from '@/ui/primitives/Box';
-import { Grid } from '@/ui/primitives/Grid';
-import { Text } from '@/ui/Text';
+import React from 'react';
+import { Box } from './primitives/Box';
+import { Text } from './Text';
+import { Grid } from './primitives/Grid';
 
 interface Stat {
   label: string;
@@ -16,11 +15,19 @@ interface ProfileStatGridProps {
 
 export function ProfileStatGrid({ stats }: ProfileStatGridProps) {
   return (
-    <Grid cols={2} gap={4}>
+    <Grid cols={2} mdCols={4} gap={4}>
       {stats.map((stat, idx) => (
-        <Box key={idx} p={4} style={{ backgroundColor: '#0f1115', borderRadius: '0.75rem', border: '1px solid #262626', textAlign: 'center' }}>
+        <Box 
+          key={idx} 
+          p={4} 
+          bg="bg-[#0f1115]" 
+          rounded="xl" 
+          border 
+          borderColor="border-[#262626]" 
+          textAlign="center"
+        >
           <Text size="3xl" weight="bold" color={stat.color} block mb={1}>{stat.value}</Text>
-          <Text size="xs" color="text-gray-500" style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }}>{stat.label}</Text>
+          <Text size="xs" color="text-gray-500" uppercase letterSpacing="0.05em">{stat.label}</Text>
         </Box>
       ))}
     </Grid>