website refactor

apps/website/ui/Grid.tsx

@@ -1,16 +1,19 @@
-import React, { ReactNode, HTMLAttributes } from 'react';
-import { Box } from './Box';
+import React, { ReactNode } from 'react';
+import { Box, BoxProps } from './Box';
 
-interface GridProps extends HTMLAttributes<HTMLElement> {
+interface GridProps extends Omit<BoxProps<'div'>, 'children' | 'display'> {
   children: ReactNode;
   cols?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
-  gap?: number;
-  className?: string;
+  mdCols?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
+  lgCols?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
+  gap?: any;
 }
 
 export function Grid({ 
   children, 
   cols = 1, 
+  mdCols,
+  lgCols,
   gap = 4,
   className = '',
   ...props 
@@ -40,6 +43,8 @@ export function Grid({
   const classes = [
     'grid',
     colClasses[cols] || 'grid-cols-1',
+    mdCols ? `md:grid-cols-${mdCols}` : '',
+    lgCols ? `lg:grid-cols-${lgCols}` : '',
     gapClasses[gap] || 'gap-4',
     className
   ].filter(Boolean).join(' ');