website refactor

apps/website/ui/Grid.tsx

@@ -0,0 +1,52 @@
+import React, { ReactNode, HTMLAttributes } from 'react';
+import { Box } from './Box';
+
+interface GridProps extends HTMLAttributes<HTMLElement> {
+  children: ReactNode;
+  cols?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
+  gap?: number;
+  className?: string;
+}
+
+export function Grid({ 
+  children, 
+  cols = 1, 
+  gap = 4,
+  className = '',
+  ...props 
+}: GridProps) {
+  const colClasses: Record<number, string> = {
+    1: 'grid-cols-1',
+    2: 'grid-cols-1 md:grid-cols-2',
+    3: 'grid-cols-1 md:grid-cols-3',
+    4: 'grid-cols-2 md:grid-cols-4',
+    5: 'grid-cols-2 md:grid-cols-3 lg:grid-cols-5',
+    6: 'grid-cols-2 md:grid-cols-3 lg:grid-cols-6',
+    12: 'grid-cols-12'
+  };
+
+  const gapClasses: Record<number, string> = {
+    0: 'gap-0',
+    1: 'gap-1',
+    2: 'gap-2',
+    3: 'gap-3',
+    4: 'gap-4',
+    6: 'gap-6',
+    8: 'gap-8',
+    12: 'gap-12',
+    16: 'gap-16'
+  };
+
+  const classes = [
+    'grid',
+    colClasses[cols] || 'grid-cols-1',
+    gapClasses[gap] || 'gap-4',
+    className
+  ].filter(Boolean).join(' ');
+
+  return (
+    <Box className={classes} {...props}>
+      {children}
+    </Box>
+  );
+}