website refactor

apps/website/ui/GridItem.tsx

@@ -0,0 +1,35 @@
+import React, { ReactNode, ElementType, forwardRef, ForwardedRef } from 'react';
+import { Box, BoxProps, ResponsiveValue } from './Box';
+
+export interface GridItemProps<T extends ElementType> extends BoxProps<T> {
+  as?: T;
+  children?: ReactNode;
+  colSpan?: number | ResponsiveValue<number>;
+  rowSpan?: number | ResponsiveValue<number>;
+}
+
+export const GridItem = forwardRef(<T extends ElementType = 'div'>(
+  { 
+    children, 
+    colSpan,
+    rowSpan,
+    as,
+    ...props
+  }: GridItemProps<T>,
+  ref: ForwardedRef<HTMLElement>
+) => {
+  return (
+    <Box 
+      as={as} 
+      ref={ref}
+      colSpan={colSpan}
+      // rowSpan is not directly supported by Box yet, but we can add it if needed
+      // or use style
+      {...props}
+    >
+      {children}
+    </Box>
+  );
+});
+
+GridItem.displayName = 'GridItem';