website refactor

apps/website/ui/Section.tsx

@@ -0,0 +1,43 @@
+import React, { ReactNode } from 'react';
+
+interface SectionProps {
+  children: ReactNode;
+  className?: string;
+  title?: string;
+  description?: string;
+  variant?: 'default' | 'card' | 'highlight';
+}
+
+export function Section({ 
+  children, 
+  className = '',
+  title,
+  description,
+  variant = 'default'
+}: 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'
+  };
+  
+  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>
+  );
+}