website refactor

apps/website/ui/QuickStatCard.tsx

@@ -0,0 +1,35 @@
+import React, { ReactNode } from 'react';
+import { Card } from './Card';
+import { Box } from './primitives/Box';
+import { Text } from './Text';
+
+export interface QuickStatItemProps {
+  label: string;
+  value: string | number;
+}
+
+export const QuickStatItem = ({ label, value }: QuickStatItemProps) => (
+  <Box textAlign="center" paddingX={4}>
+    <Text size="2xl" weight="bold" variant="high">{value}</Text>
+    <Text size="xs" variant="low" uppercase>{label}</Text>
+  </Box>
+);
+
+export interface QuickStatCardProps {
+  children: ReactNode;
+}
+
+export const QuickStatCard = ({ children }: QuickStatCardProps) => {
+  return (
+    <Card variant="glass">
+      <Box display="flex" alignItems="center" padding={6}>
+        {React.Children.map(children, (child, index) => (
+          <React.Fragment key={index}>
+            {index > 0 && <Box width="1px" height="2.5rem" bg="var(--ui-color-border-muted)" style={{ opacity: 0.2 }} />}
+            {child}
+          </React.Fragment>
+        ))}
+      </Box>
+    </Card>
+  );
+};