website refactor

apps/website/ui/Section.tsx

@@ -6,13 +6,19 @@ export interface SectionProps {
   variant?: 'default' | 'dark' | 'muted';
   padding?: 'none' | 'sm' | 'md' | 'lg';
   id?: string;
+  minHeight?: string;
+  py?: number;
+  className?: string;
 }
 
 export const Section = ({ 
   children, 
   variant = 'default',
   padding = 'md',
-  id 
+  id,
+  minHeight,
+  py,
+  className
 }: SectionProps) => {
   const variantClasses = {
     default: 'bg-[var(--ui-color-bg-base)]',
@@ -29,11 +35,15 @@ export const Section = ({
 
   const classes = [
     variantClasses[variant],
-    paddingClasses[padding],
+    py !== undefined ? '' : paddingClasses[padding],
+    className,
   ].join(' ');
 
   return (
-    <section id={id} className={classes}>
+    <section id={id} className={classes} style={{ 
+      ...(minHeight ? { minHeight } : {}),
+      ...(py !== undefined ? { paddingTop: `${py * 0.25}rem`, paddingBottom: `${py * 0.25}rem` } : {})
+    }}>
       <Box marginX="auto" maxWidth="80rem" paddingX={4}>
         {children}
       </Box>