website refactor

apps/website/ui/Section.tsx

@@ -1,11 +1,18 @@
+'use client';
+
 import React, { ReactNode } from 'react';
+import { Box } from './Box';
+import { Heading } from './Heading';
+import { Text } from './Text';
 
 interface SectionProps {
   children: ReactNode;
   className?: string;
   title?: string;
   description?: string;
-  variant?: 'default' | 'card' | 'highlight';
+  variant?: 'default' | 'card' | 'highlight' | 'dark' | 'light';
+  id?: string;
+  py?: number;
 }
 
 export function Section({ 
@@ -13,31 +20,34 @@ export function Section({
   className = '',
   title,
   description,
-  variant = 'default'
+  variant = 'default',
+  id,
+  py = 16
 }: SectionProps) {
-  const baseClasses = 'space-y-4';
-  
   const variantClasses = {
     default: '',
     card: 'bg-iron-gray rounded-lg p-6 border border-charcoal-outline',
-    highlight: 'bg-gradient-to-r from-blue-900/20 to-blue-700/10 rounded-lg p-6 border border-blue-500/30'
+    highlight: 'bg-gradient-to-r from-blue-900/20 to-blue-700/10 rounded-lg p-6 border border-blue-500/30',
+    dark: 'bg-iron-gray',
+    light: 'bg-charcoal-outline'
   };
   
   const classes = [
-    baseClasses,
     variantClasses[variant],
     className
   ].filter(Boolean).join(' ');
   
   return (
-    <section className={classes}>
-      {title && (
-        <h2 className="text-xl font-semibold text-white">{title}</h2>
-      )}
-      {description && (
-        <p className="text-sm text-gray-400">{description}</p>
-      )}
-      {children}
-    </section>
+    <Box as="section" id={id} className={classes} py={py as 0} px={4}>
+      <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>
+        )}
+        {children}
+      </Box>
+    </Box>
   );
-}
+}