website refactor

apps/website/components/dashboard/StatBox.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import React from 'react';
+import { Trophy, Medal, Target, Users, LucideIcon } from 'lucide-react';
+import { Card } from '@/ui/Card';
+import { Stack } from '@/ui/Stack';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+import { Surface } from '@/ui/Surface';
+
+interface StatBoxProps {
+  icon: LucideIcon;
+  label: string;
+  value: string | number;
+  color: string;
+}
+
+export function StatBox({ icon, label, value, color }: StatBoxProps) {
+  return (
+    <Surface variant="muted" rounded="xl" border padding={4} style={{ backgroundColor: 'rgba(38, 38, 38, 0.5)', borderColor: '#262626', backdropFilter: 'blur(4px)' }}>
+      <Stack direction="row" align="center" gap={3}>
+        <Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: `${color}20`, color }}>
+          <Icon icon={icon} size={5} />
+        </Surface>
+        <Box>
+          <Text size="2xl" weight="bold" color="text-white" block>{value}</Text>
+          <Text size="xs" color="text-gray-500" block>{label}</Text>
+        </Box>
+      </Stack>
+    </Surface>
+  );
+}