website refactor

apps/website/ui/MainContent.tsx

@@ -1,9 +1,14 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
+import { Box } from './primitives/Box';
 
-interface MainContentProps {
-  children: React.ReactNode;
+export interface MainContentProps {
+  children: ReactNode;
 }
 
-export function MainContent({ children }: MainContentProps) {
-  return <div className="pt-16 md:pt-20">{children}</div>;
-}
+export const MainContent = ({ children }: MainContentProps) => {
+  return (
+    <Box as="main" flex={1} display="flex" flexDirection="col" minHeight="0">
+      {children}
+    </Box>
+  );
+};