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/Typography.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+
+interface TypographyProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const H1: React.FC<TypographyProps> = ({ children, className = "" }) => (
+  <h1 className={`text-5xl md:text-7xl font-bold text-slate-900 tracking-tighter leading-[1.1] ${className}`}>
+    {children}
+  </h1>
+);
+
+export const H2: React.FC<TypographyProps> = ({ children, className = "" }) => (
+  <h2 className={`text-3xl md:text-5xl font-bold text-slate-900 tracking-tighter leading-tight ${className}`}>
+    {children}
+  </h2>
+);
+
+export const H3: React.FC<TypographyProps> = ({ children, className = "" }) => (
+  <h3 className={`text-2xl md:text-4xl font-bold text-slate-900 tracking-tight leading-tight ${className}`}>
+    {children}
+  </h3>
+);
+
+export const H4: React.FC<TypographyProps> = ({ children, className = "" }) => (
+  <h4 className={`text-xl md:text-2xl font-bold text-slate-900 tracking-tight ${className}`}>
+    {children}
+  </h4>
+);
+
+export const LeadText: React.FC<TypographyProps> = ({ children, className = "" }) => (
+  <p className={`text-lg md:text-xl font-serif italic text-slate-500 leading-relaxed ${className}`}>
+    {children}
+  </p>
+);
+
+export const BodyText: React.FC<TypographyProps> = ({ children, className = "" }) => (
+  <p className={`text-base text-slate-500 leading-relaxed ${className}`}>
+    {children}
+  </p>
+);
+
+export const Label: React.FC<TypographyProps> = ({ children, className = "" }) => (
+  <span className={`text-[10px] font-bold uppercase tracking-[0.3em] text-slate-400 block ${className}`}>
+    {children}
+  </span>
+);
+
+export const MonoLabel: React.FC<TypographyProps> = ({ children, className = "" }) => (
+  <span className={`text-[10px] font-mono uppercase tracking-[0.2em] text-slate-400 block ${className}`}>
+    {children}
+  </span>
+);