website refactor

apps/website/ui/Section.tsx

@@ -1,74 +1,42 @@
-
-
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { Box } from './primitives/Box';
-import { Heading } from './Heading';
-import { Text } from './Text';
 
-interface SectionProps {
+export interface SectionProps {
   children: ReactNode;
-  className?: string;
-  title?: string;
-  description?: string;
-  variant?: 'default' | 'card' | 'highlight' | 'dark' | 'light';
+  variant?: 'default' | 'dark' | 'muted';
+  padding?: 'none' | 'sm' | 'md' | 'lg';
   id?: string;
-  py?: number;
-  minHeight?: string;
-  borderBottom?: boolean;
-  borderColor?: string;
-  overflow?: 'hidden' | 'visible' | 'auto' | 'scroll';
-  position?: 'relative' | 'absolute' | 'fixed' | 'sticky';
 }
 
-export function Section({ 
+export const Section = ({ 
   children, 
-  className = '',
-  title,
-  description,
   variant = 'default',
-  id,
-  py = 16,
-  minHeight,
-  borderBottom,
-  borderColor,
-  overflow,
-  position
-}: SectionProps) {
+  padding = 'md',
+  id 
+}: SectionProps) => {
   const variantClasses = {
-    default: '',
-    card: 'bg-panel-gray rounded-none p-6 border border-border-gray',
-    highlight: 'bg-gradient-to-r from-primary-accent/10 to-transparent rounded-none p-6 border border-primary-accent/30',
-    dark: 'bg-graphite-black',
-    light: 'bg-panel-gray'
+    default: 'bg-[var(--ui-color-bg-base)]',
+    dark: 'bg-black',
+    muted: 'bg-[var(--ui-color-bg-surface)]',
   };
-  
+
+  const paddingClasses = {
+    none: 'py-0',
+    sm: 'py-8',
+    md: 'py-16',
+    lg: 'py-24',
+  };
+
   const classes = [
     variantClasses[variant],
-    className
-  ].filter(Boolean).join(' ');
-  
+    paddingClasses[padding],
+  ].join(' ');
+
   return (
-    <Box 
-      as="section" 
-      id={id} 
-      className={classes} 
-      py={py as 0} 
-      px={4} 
-      minHeight={minHeight}
-      borderBottom={borderBottom}
-      borderColor={borderColor}
-      overflow={overflow}
-      position={position}
-    >
-      <Box className="mx-auto max-w-7xl">
-        {(title || description) && (
-          <Box mb={8}>
-            {title && <Heading level={2}>{title}</Heading>}
-            {description && <Text color="text-gray-400" block mt={2}>{description}</Text>}
-          </Box>
-        )}
+    <section id={id} className={classes}>
+      <Box marginX="auto" maxWidth="80rem" paddingX={4}>
         {children}
       </Box>
-    </Box>
+    </section>
   );
-}
+};