website refactor

apps/website/ui/GridItem.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Box } from './Box';
+
+interface GridItemProps {
+  children: React.ReactNode;
+  colSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+  mdSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+  lgSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+  className?: string;
+}
+
+export function GridItem({ children, colSpan, mdSpan, lgSpan, className = '' }: GridItemProps) {
+  const spanClasses = [
+    colSpan ? `col-span-${colSpan}` : '',
+    mdSpan ? `md:col-span-${mdSpan}` : '',
+    lgSpan ? `lg:col-span-${lgSpan}` : '',
+    className
+  ].filter(Boolean).join(' ');
+
+  return (
+    <Box className={spanClasses}>
+      {children}
+    </Box>
+  );
+}