website refactor

apps/website/ui/Grid.tsx

@@ -0,0 +1,38 @@
+import React, { ReactNode } from 'react';
+import { Box } from './primitives/Box';
+
+export interface GridProps {
+  children: ReactNode;
+  cols?: number | { base?: number; sm?: number; md?: number; lg?: number; xl?: number };
+  gap?: number;
+  fullWidth?: boolean;
+}
+
+export const Grid = ({ 
+  children, 
+  cols = 1, 
+  gap = 0,
+  fullWidth = false
+}: GridProps) => {
+  const getGridColsClass = (value: number | { base?: number; sm?: number; md?: number; lg?: number; xl?: number }) => {
+    if (typeof value === 'number') return `grid-cols-${value}`;
+    const classes = [];
+    if (value.base) classes.push(`grid-cols-${value.base}`);
+    if (value.sm) classes.push(`sm:grid-cols-${value.sm}`);
+    if (value.md) classes.push(`md:grid-cols-${value.md}`);
+    if (value.lg) classes.push(`lg:grid-cols-${value.lg}`);
+    if (value.xl) classes.push(`xl:grid-cols-${value.xl}`);
+    return classes.join(' ');
+  };
+
+  return (
+    <Box 
+      display="grid" 
+      className={getGridColsClass(cols)}
+      gap={gap} 
+      fullWidth={fullWidth}
+    >
+      {children}
+    </Box>
+  );
+};