website refactor

apps/website/components/layout/MainContent.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { Box } from '@/ui/Box';
+import { ReactNode } from 'react';
+
+interface MainContentProps {
+  children: ReactNode;
+  hasSidebar: boolean;
+}
+
+export function MainContent({ children, hasSidebar }: MainContentProps) {
+  return (
+    <Box
+      as="main"
+      display="flex"
+      flexDirection="col"
+      flexGrow={1}
+      style={{
+        paddingTop: '56px', // Header height
+        marginLeft: hasSidebar ? '260px' : '0',
+        transition: 'margin-left 0.2s ease-in-out',
+      }}
+    >
+      <Box
+        position="relative"
+        width="full"
+        maxWidth="full"
+        flexGrow={1}
+        display="flex"
+        flexDirection="col"
+      >
+        {/* Background Grid */}
+        <Box
+          position="absolute"
+          inset={0}
+          pointerEvents="none"
+          zIndex={0}
+          style={{
+            backgroundImage:
+              'radial-gradient(circle at 2px 2px, rgba(255,255,255,0.018) 1px, transparent 0)',
+            backgroundSize: '32px 32px',
+            opacity: 0.5,
+            backgroundAttachment: 'fixed',
+          }}
+        />
+
+        {/* Content */}
+        <Box position="relative" zIndex={1} flexGrow={1} display="flex" flexDirection="col">
+          {children}
+        </Box>
+      </Box>
+    </Box>
+  );
+}