chore: overhaul infrastructure and integrate @mintel packages

- Restructure to pnpm monorepo (site moved to apps/web)
- Integrate @mintel/tsconfig, @mintel/eslint-config, @mintel/husky-config
- Implement Docker service architecture (Varnish, Directus, Gatekeeper)
- Setup environment-aware Gitea Actions deployment

apps/web/src/components/Section.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { Reveal } from './Reveal';
+import { Label } from './Typography';
+import { cn } from '../utils/cn';
+
+interface SectionProps {
+  number?: string;
+  title?: string;
+  children: React.ReactNode;
+  className?: string;
+  delay?: number;
+  variant?: 'white' | 'gray';
+  borderTop?: boolean;
+  borderBottom?: boolean;
+  containerVariant?: 'narrow' | 'normal' | 'wide';
+  illustration?: React.ReactNode;
+}
+
+export const Section: React.FC<SectionProps> = ({
+  number,
+  title,
+  children,
+  className = "",
+  delay = 0,
+  variant = 'white',
+  borderTop = false,
+  borderBottom = false,
+  containerVariant = 'narrow',
+  illustration,
+}) => {
+  const bgClass = variant === 'gray' ? 'bg-slate-50/50' : 'bg-white';
+  const borderTopClass = borderTop ? 'border-t border-slate-100' : '';
+  const borderBottomClass = borderBottom ? 'border-b border-slate-100' : '';
+  const containerClass = containerVariant === 'wide' ? 'wide-container' : containerVariant === 'normal' ? 'container' : 'narrow-container';
+
+  return (
+    <section className={cn(
+      "relative py-24 md:py-40 group overflow-hidden",
+      bgClass,
+      borderTopClass,
+      borderBottomClass,
+      className
+    )}>
+      <div className={cn("relative z-10", containerClass)}>
+        <div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-24">
+          {/* Sidebar: Number & Title */}
+          <div className="md:col-span-3">
+            <div className="md:sticky md:top-40 space-y-8">
+              {number && (
+                <Reveal delay={delay}>
+                  <span className="block text-7xl md:text-8xl font-bold text-slate-100 leading-none select-none tracking-tighter">
+                    {number}
+                  </span>
+                </Reveal>
+              )}
+              {title && (
+                <Reveal delay={delay + 0.1}>
+                  <div className="flex items-center gap-4">
+                    <Label className="text-slate-900 text-[10px] tracking-[0.4em]">
+                      {title}
+                    </Label>
+                  </div>
+                </Reveal>
+              )}
+              {illustration && (
+                <Reveal delay={delay + 0.2}>
+                  <div className="pt-8 opacity-100 group-hover:scale-105 transition-transform duration-1000 ease-out origin-left grayscale hover:grayscale-0">
+                    {illustration}
+                  </div>
+                </Reveal>
+              )}
+            </div>
+          </div>
+
+          {/* Main Content */}
+          <div className="md:col-span-9">
+            {children}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};