website refactor

apps/website/ui/Section.tsx

@@ -4,13 +4,12 @@ import { Box } from './Box';
 export interface SectionProps {
   children: ReactNode;
   variant?: 'default' | 'dark' | 'muted';
-  padding?: 'none' | 'sm' | 'md' | 'lg';
+  padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
   id?: string;
   minHeight?: string;
-  py?: number;
   fullWidth?: boolean;
   maxWidth?: string;
-  /** @deprecated DO NOT USE. Use semantic props instead. */
+  /** @deprecated Use semantic props instead. */
   className?: string;
 }
 
@@ -20,10 +19,9 @@ export const Section = ({
   padding = 'md',
   id,
   minHeight,
-  py,
-  className,
   fullWidth = false,
-  maxWidth = '80rem'
+  maxWidth = '80rem',
+  className,
 }: SectionProps) => {
   const variantClasses = {
     default: 'bg-[var(--ui-color-bg-base)]',
@@ -36,18 +34,18 @@ export const Section = ({
     sm: 'py-8',
     md: 'py-16',
     lg: 'py-24',
+    xl: 'py-32',
   };
 
   const classes = [
     variantClasses[variant],
-    py !== undefined ? '' : paddingClasses[padding],
+    paddingClasses[padding],
     className,
   ].join(' ');
 
   return (
     <section id={id} className={classes} style={{ 
       ...(minHeight ? { minHeight } : {}),
-      ...(py !== undefined ? { paddingTop: `${py * 0.25}rem`, paddingBottom: `${py * 0.25}rem` } : {})
     }}>
       {fullWidth ? (
         children