website refactor

apps/website/ui/Section.tsx

@@ -8,6 +8,9 @@ export interface SectionProps {
   id?: string;
   minHeight?: string;
   py?: number;
+  fullWidth?: boolean;
+  maxWidth?: string;
+  /** @deprecated DO NOT USE. Use semantic props instead. */
   className?: string;
 }
 
@@ -18,7 +21,9 @@ export const Section = ({
   id,
   minHeight,
   py,
-  className
+  className,
+  fullWidth = false,
+  maxWidth = '80rem'
 }: SectionProps) => {
   const variantClasses = {
     default: 'bg-[var(--ui-color-bg-base)]',
@@ -44,9 +49,13 @@ export const Section = ({
       ...(minHeight ? { minHeight } : {}),
       ...(py !== undefined ? { paddingTop: `${py * 0.25}rem`, paddingBottom: `${py * 0.25}rem` } : {})
     }}>
-      <Box marginX="auto" maxWidth="80rem" paddingX={4}>
-        {children}
-      </Box>
+      {fullWidth ? (
+        children
+      ) : (
+        <Box marginX="auto" maxWidth={maxWidth} paddingX={4}>
+          {children}
+        </Box>
+      )}
     </section>
   );
 };