website poc

apps/website/components/ui/Section.tsx

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+
+interface SectionProps {
+  variant?: 'default' | 'dark' | 'light';
+  children: ReactNode;
+  className?: string;
+  id?: string;
+}
+
+export default function Section({
+  variant = 'default',
+  children,
+  className = '',
+  id
+}: SectionProps) {
+  const variantStyles = {
+    default: 'bg-deep-graphite',
+    dark: 'bg-iron-gray',
+    light: 'bg-charcoal-outline'
+  };
+
+  return (
+    <section
+      id={id}
+      className={`${variantStyles[variant]} px-6 py-32 sm:py-40 lg:px-8 ${className}`}
+    >
+      {children}
+    </section>
+  );
+}