website refactor

apps/website/components/profile/ProfileStatGrid.tsx

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