website refactor

apps/website/ui/HorizontalStatCard.tsx

@@ -0,0 +1,52 @@
+
+
+import { ReactNode } from 'react';
+import { Box } from './Box';
+import { Card } from './Card';
+import { Stack } from './Stack';
+import { Surface } from './Surface';
+import { Text } from './Text';
+
+interface HorizontalStatCardProps {
+  label: string;
+  value: string | number;
+  subValue?: string;
+  icon: ReactNode;
+  iconBgColor?: string;
+}
+
+export function HorizontalStatCard({
+  label,
+  value,
+  subValue,
+  icon,
+  iconBgColor,
+}: HorizontalStatCardProps) {
+  return (
+    <Card>
+      <Stack direction="row" align="center" gap={3}>
+        <Surface
+          variant="muted"
+          rounded="full"
+          padding={3}
+          style={{ backgroundColor: iconBgColor }}
+        >
+          {icon}
+        </Surface>
+        <Box>
+          <Text size="xs" color="text-gray-400" block mb={1}>
+            {label}
+          </Text>
+          <Text size="2xl" weight="bold" color="text-white" block>
+            {value}
+          </Text>
+          {subValue && (
+            <Text size="sm" color="text-gray-400">
+              {subValue}
+            </Text>
+          )}
+        </Box>
+      </Stack>
+    </Card>
+  );
+}