website refactor

apps/website/ui/Group.tsx

@@ -0,0 +1,36 @@
+import React, { ReactNode } from 'react';
+import { Box } from './Box';
+
+export interface GroupProps {
+  children: ReactNode;
+  direction?: 'row' | 'col';
+  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+  gap?: number;
+  wrap?: boolean;
+  fullWidth?: boolean;
+}
+
+export const Group = ({
+  children,
+  direction = 'row',
+  align = 'center',
+  justify = 'start',
+  gap = 3,
+  wrap = false,
+  fullWidth = false,
+}: GroupProps) => {
+  return (
+    <Box
+      display="flex"
+      flexDirection={direction}
+      alignItems={align}
+      justifyContent={justify}
+      gap={gap}
+      flexWrap={wrap ? 'wrap' : 'nowrap'}
+      fullWidth={fullWidth}
+    >
+      {children}
+    </Box>
+  );
+};

apps/website/ui/Logo.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Box } from './Box';
+import { Surface } from './Surface';
+import { Image } from './Image';
+import { Icon } from './Icon';
+import { LucideIcon } from 'lucide-react';
+
+export interface LogoProps {
+  src?: string;
+  alt: string;
+  size?: number | string;
+  icon?: LucideIcon;
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  variant?: 'default' | 'dark' | 'muted' | 'glass';
+  border?: boolean;
+}
+
+export const Logo = ({
+  src,
+  alt,
+  size = 48,
+  icon,
+  rounded = 'md',
+  variant = 'muted',
+  border = true,
+}: LogoProps) => {
+  return (
+    <Surface
+      variant={variant}
+      rounded={rounded}
+      border={border}
+      style={{ 
+        width: size, 
+        height: size, 
+        display: 'flex', 
+        alignItems: 'center', 
+        justifyContent: 'center', 
+        overflow: 'hidden',
+        flexShrink: 0
+      }}
+    >
+      {src ? (
+        <Image
+          src={src}
+          alt={alt}
+          style={{ width: '100%', height: '100%', objectFit: 'contain', padding: '10%' }}
+        />
+      ) : icon ? (
+        <Icon icon={icon} size={typeof size === 'number' ? (size > 32 ? 5 : 4) : 5} intent="low" />
+      ) : null}
+    </Surface>
+  );
+};

apps/website/ui/StatCard.tsx

@@ -9,7 +9,9 @@ export interface StatCardProps {
   label: string;
   value: string | number;
   icon?: LucideIcon;
-  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry' | 'low';
+  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry' | 'low' | 'high' | 'med';
+  variant?: 'default' | 'dark' | 'muted' | 'glass' | 'outline';
+  font?: 'sans' | 'mono';
   trend?: {
     value: number;
     isPositive: boolean;
@@ -22,17 +24,19 @@ export const StatCard = ({
   value, 
   icon, 
   intent = 'primary',
+  variant = 'default',
+  font = 'sans',
   trend,
   footer 
 }: StatCardProps) => {
   return (
-    <Card variant="default">
+    <Card variant={variant}>
       <Box display="flex" alignItems="start" justifyContent="between" marginBottom={4}>
         <Box>
           <Text size="xs" weight="bold" variant="low" uppercase>
             {label}
           </Text>
-          <Text size="2xl" weight="bold" variant="high" block marginTop={1}>
+          <Text size="2xl" weight="bold" variant={intent as any || 'high'} font={font} block marginTop={1}>
             {value}
           </Text>
         </Box>

apps/website/ui/StatGrid.tsx

@@ -7,12 +7,16 @@ export interface StatGridProps {
   stats: (StatBoxProps | StatCardProps)[];
   columns?: number | { base?: number; sm?: number; md?: number; lg?: number; xl?: number };
   variant?: 'box' | 'card';
+  cardVariant?: 'default' | 'dark' | 'muted' | 'glass' | 'outline';
+  font?: 'sans' | 'mono';
 }
 
 export const StatGrid = ({ 
   stats, 
   columns = 3,
-  variant = 'box'
+  variant = 'box',
+  cardVariant,
+  font
 }: StatGridProps) => {
   return (
     <Grid cols={columns} gap={4}>
@@ -20,7 +24,12 @@ export const StatGrid = ({
         variant === 'box' ? (
           <StatBox key={index} {...(stat as StatBoxProps)} />
         ) : (
-          <StatCard key={index} {...(stat as StatCardProps)} />
+          <StatCard 
+            key={index} 
+            variant={cardVariant} 
+            font={font} 
+            {...(stat as StatCardProps)} 
+          />
         )
       ))}
     </Grid>