website refactor

apps/website/ui/primitives/Grid.tsx

@@ -1,12 +1,41 @@
 import React, { ReactNode } from 'react';
-import { Box, BoxProps } from './Box';
+import { Box, BoxProps, ResponsiveValue } from './Box';
 
-export interface GridProps extends Omit<BoxProps<'div'>, 'children' | 'display'> {
+/**
+ * WARNING: DO NOT VIOLATE THE PURPOSE OF THIS PRIMITIVE.
+ * 
+ * Grid is for CSS Grid-based layouts.
+ * 
+ * - DO NOT add positioning props (absolute, top, zIndex).
+ * - DO NOT add flex props.
+ * - DO NOT add background/border props unless it's a specific styled grid.
+ * 
+ * If you need a more specific layout, create a new component in apps/website/components.
+ */
+
+export interface GridProps {
   children: ReactNode;
   cols?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
   mdCols?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
   lgCols?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
   gap?: 0 | 1 | 2 | 3 | 4 | 6 | 8 | 12 | 16;
+  className?: string;
+  // Spacing
+  m?: number;
+  mt?: number;
+  mb?: number;
+  ml?: number;
+  mr?: number;
+  p?: number;
+  pt?: number;
+  pb?: number;
+  pl?: number;
+  pr?: number;
+  px?: number;
+  py?: number;
+  // Sizing
+  w?: string | ResponsiveValue<string>;
+  h?: string | ResponsiveValue<string>;
 }
 
 export function Grid({