From b1cfb339a2aada42ef39aa5fe52fdb9167aa1209 Mon Sep 17 00:00:00 2001
From: colinislit <colin@ikbenlit.nl>
Date: Sat, 15 Nov 2025 22:13:31 +0100
Subject: [PATCH] Marketing route group, layout, typography setup

---
 app/(marketing)/layout.tsx | 22 +++++++++++++
 app/(marketing)/page.tsx   | 22 +++++++++++++
 app/globals.css            | 27 ++++++++++++++--
 app/layout.tsx             | 27 ++++++++++++----
 app/page.tsx               | 65 --------------------------------------
 5 files changed, 89 insertions(+), 74 deletions(-)
 create mode 100644 app/(marketing)/layout.tsx
 create mode 100644 app/(marketing)/page.tsx
 delete mode 100644 app/page.tsx

diff --git a/app/(marketing)/layout.tsx b/app/(marketing)/layout.tsx
new file mode 100644
index 0000000..8a54e9b
--- /dev/null
+++ b/app/(marketing)/layout.tsx
@@ -0,0 +1,22 @@
+/**
+ * Marketing Layout
+ * 
+ * Full-width layout without sidebar for marketing pages.
+ * Navigation will be added in E1.M5.S1.
+ */
+
+import type { ReactNode } from 'react'
+
+interface MarketingLayoutProps {
+  children: ReactNode
+}
+
+export default function MarketingLayout({ children }: MarketingLayoutProps) {
+  return (
+    <div className="min-h-screen bg-white">
+      {/* Navigation will be added in E1.M5.S1 */}
+      {children}
+    </div>
+  )
+}
+
diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx
new file mode 100644
index 0000000..6b1c9b7
--- /dev/null
+++ b/app/(marketing)/page.tsx
@@ -0,0 +1,22 @@
+/**
+ * Manifesto Homepage
+ * 
+ * Main landing page for the AI Speedrun manifesto website.
+ * This page will display the long-form manifesto content.
+ */
+
+export default function ManifestoPage() {
+  return (
+    <main>
+      <div className="max-w-4xl mx-auto px-4 py-8">
+        <h1 className="text-4xl font-bold text-slate-900 mb-4">
+          Manifesto Page
+        </h1>
+        <p className="text-lg text-slate-600">
+          Marketing route group is working. Content will be loaded here.
+        </p>
+      </div>
+    </main>
+  )
+}
+
diff --git a/app/globals.css b/app/globals.css
index 563cdad..b797eff 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -75,9 +75,17 @@
   --shadow-md: 0 2px 6px rgba(15, 23, 42, 0.08);
   --shadow-lg: 0 8px 20px rgba(15, 23, 42, 0.10);
 
-  /* Fonts */
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  /* Fonts (injected by Next.js font loader) */
+  /* --font-serif, --font-sans, --font-mono are available via className in layout.tsx */
+  
+  /* Typography Scale (Manifesto) */
+  --text-hero: clamp(2.5rem, 6vw, 4rem);      /* Quote */
+  --text-h1: clamp(2rem, 5vw, 3rem);          /* Section headings */
+  --text-h2: clamp(1.5rem, 4vw, 2.5rem);     /* Subsections */
+  --text-body: 1.25rem;                       /* Content */
+  --text-small: 0.875rem;                     /* Metadata */
+  --line-height-tight: 1.2;                   /* Headings */
+  --line-height-relaxed: 1.8;                  /* Body */
   --radius: 0.625rem;
   --background: oklch(1 0 0);
   --foreground: oklch(0.129 0.042 264.695);
@@ -158,6 +166,19 @@ body {
   font-family: var(--font-sans), system-ui, -apple-system, sans-serif;
 }
 
+/* Typography utilities voor manifesto */
+.font-serif {
+  font-family: var(--font-serif), Georgia, serif;
+}
+
+.font-sans {
+  font-family: var(--font-sans), system-ui, -apple-system, sans-serif;
+}
+
+.font-mono {
+  font-family: var(--font-mono), 'Courier New', monospace;
+}
+
 /* Focus styles (toegankelijkheid) */
 *:focus-visible {
   outline: 2px solid var(--color-brand);
diff --git a/app/layout.tsx b/app/layout.tsx
index b04a6f7..e4065f6 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,15 +1,30 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Crimson_Text, Inter, JetBrains_Mono } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+// Serif font voor long-form content (manifesto)
+const crimsonText = Crimson_Text({
+  variable: "--font-serif",
   subsets: ["latin"],
+  weight: ["400", "600"],
+  display: "swap",
+  preload: true,
 });
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+// Sans-serif font voor UI, nav, metadata
+const inter = Inter({
+  variable: "--font-sans",
   subsets: ["latin"],
+  display: "swap",
+  preload: true,
+});
+
+// Mono font voor tech details, numbers
+const jetBrainsMono = JetBrains_Mono({
+  variable: "--font-mono",
+  subsets: ["latin"],
+  display: "swap",
+  preload: true,
 });
 
 export const metadata: Metadata = {
@@ -25,7 +40,7 @@ export default function RootLayout({
   return (
     <html lang="nl">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${crimsonText.variable} ${inter.variable} ${jetBrainsMono.variable} antialiased`}
       >
         {children}
       </body>
diff --git a/app/page.tsx b/app/page.tsx
deleted file mode 100644
index 295f8fd..0000000
--- a/app/page.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import Image from "next/image";
-
-export default function Home() {
-  return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
-  );
-}