website refactor

apps/website/ui/StatGrid.tsx

@@ -1,20 +1,27 @@
 import React from 'react';
 import { Grid } from './primitives/Grid';
 import { StatBox, StatBoxProps } from './StatBox';
+import { StatCard, StatCardProps } from './StatCard';
 
 export interface StatGridProps {
-  stats: StatBoxProps[];
-  columns?: number;
+  stats: (StatBoxProps | StatCardProps)[];
+  columns?: number | { base?: number; sm?: number; md?: number; lg?: number; xl?: number };
+  variant?: 'box' | 'card';
 }
 
 export const StatGrid = ({ 
   stats, 
-  columns = 3 
+  columns = 3,
+  variant = 'box'
 }: StatGridProps) => {
   return (
     <Grid columns={columns} gap={4}>
       {stats.map((stat, index) => (
-        <StatBox key={index} {...stat} />
+        variant === 'box' ? (
+          <StatBox key={index} {...(stat as StatBoxProps)} />
+        ) : (
+          <StatCard key={index} {...(stat as StatCardProps)} />
+        )
       ))}
     </Grid>
   );