website refactor

apps/website/ui/MainContent.tsx

@@ -1,14 +1,20 @@
 import React, { ReactNode } from 'react';
 import { Box } from './primitives/Box';
+import { Container } from './Container';
 
 export interface MainContentProps {
   children: ReactNode;
+  maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | 'full' | '7xl';
 }
 
-export const MainContent = ({ children }: MainContentProps) => {
+export const MainContent = ({ children, maxWidth = 'xl' }: MainContentProps) => {
   return (
-    <Box as="main" flex={1} display="flex" flexDirection="col" minHeight="0">
-      {children}
+    <Box as="main" flex={1} style={{ overflowY: 'auto' }} padding={6}>
+      <Container size={maxWidth === '7xl' ? 'xl' : maxWidth as any}>
+        <Box display="flex" flexDirection="col" gap={6} fullWidth>
+          {children}
+        </Box>
+      </Container>
     </Box>
   );
 };