RLS policies implementeren, Demo auth flow

app/(marketing)/components/comparison-table.tsx

@@ -0,0 +1,104 @@
+/**
+ * Comparison Table Component
+ * 
+ * Visual comparison between Traditional and AI Speedrun approaches.
+ * Responsive: table on desktop, stacked cards on mobile.
+ */
+
+import type { ComparisonContent } from '@/content/schemas/manifesto'
+
+interface ComparisonTableProps {
+  content: ComparisonContent
+}
+
+export function ComparisonTable({ content }: ComparisonTableProps) {
+  return (
+    <section className="my-8 md:my-12" aria-labelledby="comparison-heading">
+      <h2 
+        id="comparison-heading"
+        className="text-2xl md:text-3xl font-bold text-slate-900 mb-4 md:mb-6 text-center font-sans"
+      >
+        {content.heading}
+      </h2>
+      
+      {/* Desktop: Table view */}
+      <div 
+        className="hidden md:block overflow-hidden rounded-lg border"
+        style={{ borderColor: '#E2E8F0' }}
+      >
+        <table className="w-full" role="table" aria-labelledby="comparison-heading">
+          <thead>
+            <tr 
+              className="bg-slate-50 border-b"
+              style={{ borderColor: '#E2E8F0' }}
+            >
+              <th scope="col" className="px-6 py-4 text-left font-semibold text-slate-900 font-sans">
+                Aspect
+              </th>
+              <th scope="col" className="px-6 py-4 text-left font-semibold text-slate-900 font-sans">
+                Traditioneel
+              </th>
+              <th scope="col" className="px-6 py-4 text-left font-semibold text-slate-900 font-sans">
+                AI Speedrun
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {content.items.map((item, index) => (
+              <tr
+                key={item.label}
+                className={`border-b ${
+                  index % 2 === 0 ? 'bg-white' : 'bg-slate-50'
+                }`}
+                style={{ borderColor: '#E2E8F0' }}
+              >
+                <th scope="row" className="px-6 py-4 font-medium text-slate-900 font-sans">
+                  {item.label}
+                </th>
+                <td className="px-6 py-4 text-slate-700 font-serif">
+                  {item.traditional}
+                </td>
+                <td className="px-6 py-4 text-slate-900 font-semibold font-serif">
+                  {item.aiSpeedrun}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Mobile: Stacked cards */}
+      <div className="md:hidden space-y-4" role="list" aria-label="Vergelijking items">
+        {content.items.map((item) => (
+          <div
+            key={item.label}
+            className="bg-white border rounded-lg p-4 shadow-sm"
+            style={{ borderColor: '#E2E8F0' }}
+            role="listitem"
+          >
+            <h3 className="font-semibold text-slate-900 mb-3 font-sans">
+              {item.label}
+            </h3>
+            <dl className="space-y-2">
+              <div className="flex justify-between items-start">
+                <dt className="text-sm text-slate-600 font-sans">Traditioneel:</dt>
+                <dd className="text-sm text-slate-700 font-serif text-right ml-4">
+                  {item.traditional}
+                </dd>
+              </div>
+              <div className="flex justify-between items-start">
+                <dt className="text-sm font-semibold text-slate-900 font-sans">
+                  AI Speedrun:
+                </dt>
+                <dd className="text-sm font-semibold text-slate-900 font-serif text-right ml-4">
+                  {item.aiSpeedrun}
+                </dd>
+              </div>
+            </dl>
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}
+

app/(marketing)/components/experiment-cta.tsx

@@ -0,0 +1,56 @@
+/**
+ * Experiment CTA Component
+ * 
+ * Call-to-action section at the end of the manifesto.
+ * Subtle buttons, no aggressive colors or fake urgency.
+ * Follows design specs: large typography, centered, minimal styling.
+ */
+
+import Link from 'next/link'
+import type { CTAContent } from '@/content/schemas/manifesto'
+
+interface ExperimentCTAProps {
+  content: CTAContent
+}
+
+export function ExperimentCTA({ content }: ExperimentCTAProps) {
+  return (
+    <section className="py-12 md:py-16 px-4 text-center bg-white" aria-labelledby="cta-heading">
+      <div className="max-w-4xl mx-auto">
+        <h2 
+          id="cta-heading"
+          className="text-5xl md:text-7xl font-black mb-3 md:mb-6 text-slate-900 font-sans"
+        >
+          {content.heading}
+        </h2>
+        
+        {content.subheading && (
+          <p className="text-xl md:text-2xl text-slate-600 mb-6 md:mb-8 font-serif max-w-2xl mx-auto">
+            {content.subheading}
+          </p>
+        )}
+        
+        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center" role="group" aria-label="Actie knoppen">
+          {/* Primary Button - Subtle dark background */}
+          <Link
+            href={content.primaryButton.href}
+            className="px-8 py-4 bg-slate-900 text-white font-semibold text-base font-sans rounded-md hover:bg-slate-800 transition-colors focus-visible:outline-2 focus-visible:outline-slate-900 focus-visible:outline-offset-2 min-w-[200px] text-center"
+            aria-label={content.primaryButton.text}
+          >
+            {content.primaryButton.text}
+          </Link>
+          
+          {/* Secondary Button - Subtle outline */}
+          <Link
+            href={content.secondaryButton.href}
+            className="px-8 py-4 bg-white text-slate-900 font-semibold text-base font-sans border-2 border-slate-900 rounded-md hover:bg-slate-50 transition-colors focus-visible:outline-2 focus-visible:outline-slate-900 focus-visible:outline-offset-2 min-w-[200px] text-center"
+            aria-label={content.secondaryButton.text}
+          >
+            {content.secondaryButton.text}
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}
+

app/(marketing)/components/hero-quote.tsx

@@ -0,0 +1,59 @@
+/**
+ * Hero Quote Component
+ * 
+ * Full-viewport hero section with Jensen Huang quote.
+ * Displays quote, attribution, and subtitle from content.
+ */
+
+import type { HeroContent } from '@/content/schemas/manifesto'
+import { MarketingShader } from './marketing-shader'
+
+interface HeroQuoteProps {
+  content: HeroContent
+}
+
+export function HeroQuote({ content }: HeroQuoteProps) {
+  return (
+    <section 
+      className="relative min-h-screen flex items-center justify-center bg-slate-900"
+      style={{ backgroundColor: '#0F172A' }} // Expliciet donkere achtergrond voor maximum contrast
+      aria-label="Hero quote sectie"
+    >
+      {/* Shader Background - zeer subtiel (opacity 0.02) */}
+      {/* Op mobile: donkere fallback, op desktop: subtiele shader */}
+      <MarketingShader variant="hero" className="z-0" />
+      
+      {/* Content Overlay */}
+      <div className="relative z-10 w-full max-w-4xl px-4 md:px-8 text-center pt-20 md:pt-0">
+        <blockquote 
+          className="text-white font-serif italic mb-4 md:mb-6" 
+          style={{ 
+            fontSize: 'clamp(1.5rem, 5vw, 4rem)', // Mobile: smaller, Desktop: larger
+            lineHeight: 'var(--line-height-tight)',
+            textShadow: '0 2px 8px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3)', // Sterkere shadow voor beter contrast
+            color: '#FFFFFF', // Expliciet wit voor maximum contrast
+          }}
+          cite={content.attribution}
+        >
+          "{content.quote}"
+        </blockquote>
+        
+        <div className="text-white font-sans text-sm md:text-base" style={{ textShadow: '0 1px 3px rgba(0, 0, 0, 0.4)' }}>
+          <cite className="not-italic font-semibold text-base md:text-lg text-white">
+            {content.attribution}
+          </cite>
+          {content.attributionContext && (
+            <span className="text-slate-200 text-sm md:text-base ml-2" aria-hidden="true">
+              {content.attributionContext}
+            </span>
+          )}
+        </div>
+        
+        <p className="text-white mt-4 md:mt-6 text-base md:text-xl font-sans" style={{ textShadow: '0 1px 3px rgba(0, 0, 0, 0.4)' }}>
+          {content.subtitle}
+        </p>
+      </div>
+    </section>
+  )
+}
+

app/(marketing)/components/insight-box.tsx

@@ -0,0 +1,32 @@
+/**
+ * Insight Box Component
+ * 
+ * Visual anchor for key takeaways with yellow left border.
+ * Used to highlight important insights in the manifesto content.
+ */
+
+interface InsightBoxProps {
+  children: React.ReactNode
+  variant?: 'default' | 'highlight'
+}
+
+export function InsightBox({ children, variant = 'default' }: InsightBoxProps) {
+  const borderColor = variant === 'highlight' ? '#D97706' : '#F59E0B'
+  
+  return (
+    <div
+      className="bg-white shadow-sm my-6 md:my-8 p-6 border-t-4 md:border-t-0 md:border-l-4"
+      style={{
+        borderLeftColor: borderColor,
+        borderTopColor: borderColor,
+        borderLeftWidth: '3px',
+        borderTopWidth: '3px',
+      }}
+    >
+      <p className="text-base md:text-lg font-serif text-slate-900 leading-relaxed">
+        {children}
+      </p>
+    </div>
+  )
+}
+

app/(marketing)/components/manifesto-content.tsx

@@ -0,0 +1,95 @@
+/**
+ * Manifesto Content Component
+ * 
+ * Long-form reading experience with manifesto text.
+ * Renders paragraphs with proper typography for optimal reading.
+ */
+
+import type { ManifestoSection } from '@/content/schemas/manifesto'
+import { InsightBox } from './insight-box'
+import { StatementSection } from './statement-section'
+
+interface ManifestoContentProps {
+  sections: ManifestoSection[]
+}
+
+export function ManifestoContent({ sections }: ManifestoContentProps) {
+  // Group consecutive non-statement sections into article blocks
+  const blocks: Array<{ start: number; end: number }> = []
+  let blockStart = 0
+  
+  sections.forEach((section, index) => {
+    if (section.type === 'statement') {
+      if (blockStart < index) {
+        blocks.push({ start: blockStart, end: index - 1 })
+      }
+      blockStart = index + 1
+    }
+  })
+  
+  // Add final block if needed
+  if (blockStart < sections.length) {
+    blocks.push({ start: blockStart, end: sections.length - 1 })
+  }
+  
+  let blockIndex = 0
+  
+  return (
+    <>
+      {sections.map((section, index) => {
+        // Statement sections are full-width
+        if (section.type === 'statement') {
+          return <StatementSection key={section.id} section={section} />
+        }
+        
+        // Check if this is the start of a new article block
+        const currentBlock = blocks[blockIndex]
+        const isBlockStart = currentBlock && index === currentBlock.start
+        
+        if (isBlockStart) {
+          const blockSections = sections.slice(currentBlock.start, currentBlock.end + 1)
+          blockIndex++
+          
+          return (
+            <article
+              key={`block-${currentBlock.start}`}
+              className="w-full md:max-w-[750px] mx-auto px-4 py-6 md:px-16 md:py-16 bg-white"
+            >
+              <div className="prose prose-lg max-w-none">
+                {blockSections.map((blockSection) => {
+                  if (blockSection.type === 'paragraph') {
+                    return (
+                      <p
+                        key={blockSection.id}
+                        className="font-serif text-slate-900 mb-4 md:mb-6"
+                        style={{
+                          fontSize: 'clamp(1.125rem, 2vw, 1.25rem)',
+                          lineHeight: 'var(--line-height-relaxed)',
+                        }}
+                      >
+                        {blockSection.content}
+                      </p>
+                    )
+                  }
+                  
+                  if (blockSection.type === 'insight') {
+                    return (
+                      <InsightBox key={blockSection.id}>
+                        {blockSection.content}
+                      </InsightBox>
+                    )
+                  }
+                  
+                  return null
+                })}
+              </div>
+            </article>
+          )
+        }
+        
+        return null
+      })}
+    </>
+  )
+}
+

app/(marketing)/components/marketing-shader.tsx

@@ -0,0 +1,83 @@
+'use client'
+
+/**
+ * Marketing Shader Component
+ * 
+ * Wrapper around DotScreenShader for marketing pages.
+ * Very subtle opacity (0.02) for hero sections.
+ * Includes mobile fallback and reduced motion support.
+ */
+
+import dynamic from 'next/dynamic'
+import { useEffect, useState } from 'react'
+
+// Lazy load the shader component (heavy, only load when needed)
+const DotScreenShader = dynamic(
+  () => import('@/components/ui/dot-shader-background').then((mod) => ({ default: mod.DotScreenShader })),
+  { 
+    ssr: false,
+    loading: () => null
+  }
+)
+
+interface MarketingShaderProps {
+  variant?: 'hero' | 'section'
+  className?: string
+}
+
+export function MarketingShader({ variant = 'hero', className = '' }: MarketingShaderProps) {
+  const [mounted, setMounted] = useState(false)
+  const [reducedMotion, setReducedMotion] = useState(false)
+  const [isMobile, setIsMobile] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+    
+    // Check for reduced motion preference
+    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
+    setReducedMotion(mediaQuery.matches)
+    
+    const handleChange = (e: MediaQueryListEvent) => setReducedMotion(e.matches)
+    mediaQuery.addEventListener('change', handleChange)
+    
+    // Check for mobile (simple check)
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768)
+    }
+    checkMobile()
+    window.addEventListener('resize', checkMobile)
+    
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange)
+      window.removeEventListener('resize', checkMobile)
+    }
+  }, [])
+
+  // Fallback voor mobile of reduced motion
+  // Voor hero variant: donkere achtergrond, voor section variant: lichte achtergrond
+  if (!mounted || reducedMotion || isMobile) {
+    const fallbackBg = variant === 'hero' 
+      ? 'bg-slate-900' // Donkere achtergrond voor hero
+      : 'bg-gradient-to-br from-slate-50 to-slate-100' // Lichte achtergrond voor sections
+    
+    return (
+      <div 
+        className={`absolute inset-0 ${fallbackBg} ${className}`}
+        aria-hidden="true"
+      />
+    )
+  }
+
+  // Desktop: shader component met zeer subtiele opacity
+  // Opacity 0.02 is zeer subtiel - bijna onzichtbaar maar aanwezig
+  return (
+    <div 
+      className={`absolute inset-0 overflow-hidden ${className}`} 
+      aria-hidden="true"
+      style={{ opacity: variant === 'hero' ? 0.02 : 0.03 }}
+    >
+      <DotScreenShader />
+    </div>
+  )
+}
+

app/(marketing)/components/minimal-nav.tsx

@@ -0,0 +1,147 @@
+'use client'
+
+/**
+ * Minimal Navigation Component
+ * 
+ * Fixed top navigation with logo and links.
+ * Mobile-friendly with hamburger menu.
+ * Adaptive styling based on scroll position (hero vs content).
+ */
+
+import { useState, useEffect } from 'react'
+import Link from 'next/link'
+import { Menu, X } from 'lucide-react'
+import type { NavigationContent } from '@/content/schemas/manifesto'
+
+interface MinimalNavProps {
+  content: NavigationContent
+}
+
+export function MinimalNav({ content }: MinimalNavProps) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const [isScrolled, setIsScrolled] = useState(false)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      // Check if scrolled past hero section (approximately 100vh)
+      setIsScrolled(window.scrollY > window.innerHeight * 0.8)
+    }
+
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    handleScroll() // Initial check
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [])
+
+  // Close menu when clicking outside or on link
+  useEffect(() => {
+    if (isMenuOpen) {
+      const handleClickOutside = () => setIsMenuOpen(false)
+      document.addEventListener('click', handleClickOutside)
+      return () => document.removeEventListener('click', handleClickOutside)
+    }
+  }, [isMenuOpen])
+
+  // Determine nav styling based on scroll position
+  // On hero: dark nav with light text, on content: light nav with dark text
+  const navClasses = isScrolled
+    ? 'bg-white/95 backdrop-blur-sm shadow-sm'
+    : 'bg-slate-900/80 backdrop-blur-sm md:bg-white/80 md:backdrop-blur-sm'
+
+  const logoClasses = isScrolled
+    ? 'text-slate-900'
+    : 'text-white md:mix-blend-difference md:text-white'
+
+  const linkClasses = isScrolled
+    ? 'text-slate-900 hover:text-slate-700'
+    : 'text-white hover:text-slate-200 md:mix-blend-difference md:text-white md:hover:opacity-80'
+
+  const menuButtonClasses = isScrolled
+    ? 'text-slate-900 focus-visible:outline-slate-900'
+    : 'text-white focus-visible:outline-white'
+
+  return (
+    <nav 
+      className={`fixed top-0 left-0 right-0 z-[60] transition-colors duration-200 ${navClasses}`}
+      role="navigation"
+      aria-label="Hoofdnavigatie"
+    >
+      <div className="max-w-7xl mx-auto px-4 md:px-8 py-4 flex justify-between items-center h-16">
+        {/* Logo */}
+        <Link 
+          href="/"
+          className={`font-black text-xl uppercase font-sans transition-colors hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:rounded ${logoClasses}`}
+          aria-label="AI Speedrun Home"
+          onClick={() => setIsMenuOpen(false)}
+        >
+          {content.logo}
+        </Link>
+
+        {/* Desktop Navigation Links */}
+        <div className="hidden md:flex gap-6 items-center" role="list">
+          {content.links.map((link) => (
+            <Link
+              key={link.href}
+              href={link.href}
+              className={`font-semibold text-base font-sans transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:rounded ${linkClasses}`}
+              role="listitem"
+            >
+              {link.label}
+            </Link>
+          ))}
+        </div>
+
+        {/* Mobile Menu Button */}
+        <button
+          className={`md:hidden p-2 -mr-2 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:rounded ${menuButtonClasses}`}
+          onClick={(e) => {
+            e.stopPropagation()
+            setIsMenuOpen(!isMenuOpen)
+          }}
+          aria-label="Menu"
+          aria-expanded={isMenuOpen}
+          aria-controls="mobile-menu"
+        >
+          {isMenuOpen ? (
+            <X className="w-6 h-6" />
+          ) : (
+            <Menu className="w-6 h-6" />
+          )}
+        </button>
+      </div>
+
+      {/* Mobile Menu */}
+      {isMenuOpen && (
+        <div
+          id="mobile-menu"
+          className={`md:hidden border-t ${
+            isScrolled 
+              ? 'bg-white border-slate-200' 
+              : 'bg-slate-900 border-slate-800'
+          }`}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <div className="px-4 py-4 space-y-3">
+            {content.links.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                className={`block font-semibold text-base py-2 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:rounded ${
+                  isScrolled
+                    ? 'text-slate-900 hover:text-slate-700 focus-visible:outline-slate-900'
+                    : 'text-white hover:text-slate-200 focus-visible:outline-white'
+                }`}
+                onClick={() => setIsMenuOpen(false)}
+              >
+                {link.label}
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
+    </nav>
+  )
+}
+

app/(marketing)/components/reading-progress.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+/**
+ * Reading Progress Bar Component
+ * 
+ * Fixed top progress indicator that shows scroll progress through the page.
+ * Smooth animation, 2px height, accent blue color.
+ * Respects prefers-reduced-motion for accessibility.
+ */
+
+import { useEffect, useState } from 'react'
+
+export function ReadingProgress() {
+  const [progress, setProgress] = useState(0)
+  const [reducedMotion, setReducedMotion] = useState(false)
+
+  useEffect(() => {
+    // Check for reduced motion preference
+    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
+    setReducedMotion(mediaQuery.matches)
+    
+    const handleChange = (e: MediaQueryListEvent) => setReducedMotion(e.matches)
+    mediaQuery.addEventListener('change', handleChange)
+
+    const updateProgress = () => {
+      const windowHeight = window.innerHeight
+      const documentHeight = document.documentElement.scrollHeight
+      const scrollTop = window.scrollY || document.documentElement.scrollTop
+      
+      // Calculate scroll progress percentage
+      const scrollableHeight = documentHeight - windowHeight
+      const currentProgress = scrollableHeight > 0 
+        ? (scrollTop / scrollableHeight) * 100 
+        : 0
+      
+      setProgress(Math.min(100, Math.max(0, currentProgress)))
+    }
+
+    // Initial calculation
+    updateProgress()
+
+    // Update on scroll
+    window.addEventListener('scroll', updateProgress, { passive: true })
+    window.addEventListener('resize', updateProgress, { passive: true })
+
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange)
+      window.removeEventListener('scroll', updateProgress)
+      window.removeEventListener('resize', updateProgress)
+    }
+  }, [])
+
+  return (
+    <div
+      className="fixed top-[64px] left-0 right-0 z-50 h-0.5 bg-slate-200"
+      role="progressbar"
+      aria-valuenow={Math.round(progress)}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-label="Leesvoortgang"
+    >
+      <div
+        className={`h-full bg-blue-500 ${reducedMotion ? '' : 'transition-all duration-150 ease-out'}`}
+        style={{ width: `${progress}%` }}
+      />
+    </div>
+  )
+}
+

app/(marketing)/components/statement-section.tsx

@@ -0,0 +1,51 @@
+/**
+ * Statement Section Component
+ * 
+ * Full-width section with dark background for impactful statements.
+ * Used to highlight key messages in the manifesto.
+ */
+
+import type { StatementSection as StatementSectionType } from '@/content/schemas/manifesto'
+
+interface StatementSectionProps {
+  section: StatementSectionType
+}
+
+export function StatementSection({ section }: StatementSectionProps) {
+  const isDark = section.variant === 'dark' || !section.variant
+  
+  return (
+    <section
+      className={`w-full ${
+        isDark ? 'bg-slate-900' : 'bg-slate-50'
+      }`}
+      style={{
+        padding: '4rem 2rem',
+      }}
+      aria-labelledby={`statement-${section.id}`}
+    >
+      <div className="max-w-4xl mx-auto text-center">
+        <h2
+          id={`statement-${section.id}`}
+          className={`font-bold mb-4 md:mb-6 font-serif ${
+            isDark ? 'text-white' : 'text-slate-900'
+          }`}
+          style={{
+            fontSize: 'clamp(2rem, 5vw, 4rem)',
+            lineHeight: 'var(--line-height-tight)',
+          }}
+        >
+          {section.heading}
+        </h2>
+        <p
+          className={`text-lg md:text-xl font-serif leading-relaxed ${
+            isDark ? 'text-slate-300' : 'text-slate-700'
+          }`}
+        >
+          {section.content}
+        </p>
+      </div>
+    </section>
+  )
+}
+

app/(marketing)/components/structured-data.tsx

@@ -0,0 +1,52 @@
+/**
+ * Structured Data Component
+ * 
+ * Adds JSON-LD structured data for Article schema to improve SEO.
+ * Helps search engines understand the content structure.
+ */
+
+import type { ManifestoContent } from '@/content/schemas/manifesto'
+
+interface StructuredDataProps {
+  content: ManifestoContent
+}
+
+export function StructuredData({ content }: StructuredDataProps) {
+  const siteUrl = process.env.NEXT_PUBLIC_APP_URL || 'https://aispeedrun.vercel.app'
+  const publishedDate = '2024-11-15' // Launch date
+  const modifiedDate = new Date().toISOString().split('T')[0]
+  
+  const structuredData = {
+    '@context': 'https://schema.org',
+    '@type': 'Article',
+    headline: content.hero.quote,
+    description: content.hero.subtitle,
+    author: {
+      '@type': 'Person',
+      name: 'Colin van der Heijden',
+      url: 'https://ikbenlit.nl',
+    },
+    publisher: {
+      '@type': 'Organization',
+      name: 'AI Speedrun',
+      url: siteUrl,
+    },
+    datePublished: publishedDate,
+    dateModified: modifiedDate,
+    mainEntityOfPage: {
+      '@type': 'WebPage',
+      '@id': siteUrl,
+    },
+    articleSection: 'Technology',
+    keywords: ['AI', 'Software on Demand', 'EPD', 'Development', 'Build in Public'],
+    inLanguage: 'nl-NL',
+  }
+  
+  return (
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
+    />
+  )
+}
+

app/(marketing)/contact/contact-form.tsx

@@ -0,0 +1,326 @@
+'use client'
+
+import { useState } from 'react'
+import { Send, CheckCircle, XCircle } from 'lucide-react'
+import type { FormSection } from '@/content/schemas/manifesto'
+import type { LeadFormData } from '@/app/api/leads/route'
+
+interface ContactFormProps {
+  content: FormSection
+}
+
+type FormStatus = 'idle' | 'submitting' | 'success' | 'error'
+
+export function ContactForm({ content }: ContactFormProps) {
+  const [status, setStatus] = useState<FormStatus>('idle')
+  const [errors, setErrors] = useState<Record<string, string>>({})
+  const [formData, setFormData] = useState<LeadFormData>({
+    name: '',
+    email: '',
+    company: '',
+    projectType: '',
+    budget: '',
+    message: '',
+  })
+
+  const validateField = (name: keyof LeadFormData, value: string): string | null => {
+    const field = content.fields[name]
+
+    if (field.required && !value.trim()) {
+      return field.error || `${field.label} is verplicht`
+    }
+
+    if (name === 'email' && value) {
+      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+      if (!emailRegex.test(value)) {
+        return 'Ongeldig email adres'
+      }
+    }
+
+    if (name === 'message' && value && field.minLength) {
+      if (value.length < field.minLength) {
+        return `Minimaal ${field.minLength} karakters vereist`
+      }
+    }
+
+    return null
+  }
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
+  ) => {
+    const { name, value } = e.target
+    setFormData(prev => ({ ...prev, [name]: value }))
+
+    // Clear error on change
+    if (errors[name]) {
+      setErrors(prev => {
+        const newErrors = { ...prev }
+        delete newErrors[name]
+        return newErrors
+      })
+    }
+  }
+
+  const handleBlur = (
+    e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
+  ) => {
+    const { name, value } = e.target
+    const error = validateField(name as keyof LeadFormData, value)
+
+    if (error) {
+      setErrors(prev => ({ ...prev, [name]: error }))
+    }
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+
+    // Validate all fields
+    const newErrors: Record<string, string> = {}
+    Object.keys(formData).forEach(key => {
+      const error = validateField(key as keyof LeadFormData, formData[key as keyof LeadFormData] || '')
+      if (error) {
+        newErrors[key] = error
+      }
+    })
+
+    if (Object.keys(newErrors).length > 0) {
+      setErrors(newErrors)
+      return
+    }
+
+    // Submit form
+    setStatus('submitting')
+
+    try {
+      const response = await fetch('/api/leads', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(formData),
+      })
+
+      const data = await response.json()
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Er ging iets mis')
+      }
+
+      setStatus('success')
+      // Reset form
+      setFormData({
+        name: '',
+        email: '',
+        company: '',
+        projectType: '',
+        budget: '',
+        message: '',
+      })
+    } catch (error) {
+      console.error('Form submission error:', error)
+      setStatus('error')
+    }
+  }
+
+  // Success state
+  if (status === 'success') {
+    return (
+      <div className="bg-green-50 border-2 border-green-200 rounded-lg p-8 text-center">
+        <CheckCircle className="w-16 h-16 text-green-600 mx-auto mb-4" />
+        <h3 className="text-2xl font-bold text-slate-900 mb-2">
+          {content.success.title}
+        </h3>
+        <p className="text-slate-600 mb-6">
+          {content.success.message}
+        </p>
+        <a
+          href="/"
+          className="inline-block px-6 py-3 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition-colors"
+        >
+          {content.success.cta}
+        </a>
+      </div>
+    )
+  }
+
+  // Error state
+  if (status === 'error') {
+    return (
+      <div className="bg-red-50 border-2 border-red-200 rounded-lg p-8 text-center">
+        <XCircle className="w-16 h-16 text-red-600 mx-auto mb-4" />
+        <h3 className="text-2xl font-bold text-slate-900 mb-2">
+          {content.error.title}
+        </h3>
+        <p className="text-slate-600 mb-6">
+          {content.error.message}
+        </p>
+        <button
+          onClick={() => setStatus('idle')}
+          className="inline-block px-6 py-3 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition-colors"
+        >
+          {content.error.retry}
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      {/* Name */}
+      <div>
+        <label htmlFor="name" className="block text-sm font-medium text-slate-700 mb-2">
+          {content.fields.name.label} {content.fields.name.required && <span className="text-red-500">*</span>}
+        </label>
+        <input
+          type="text"
+          id="name"
+          name="name"
+          value={formData.name}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          placeholder={content.fields.name.placeholder}
+          className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent transition-colors ${
+            errors.name ? 'border-red-500' : 'border-slate-300'
+          }`}
+          disabled={status === 'submitting'}
+        />
+        {errors.name && (
+          <p className="mt-1 text-sm text-red-600">{errors.name}</p>
+        )}
+      </div>
+
+      {/* Email */}
+      <div>
+        <label htmlFor="email" className="block text-sm font-medium text-slate-700 mb-2">
+          {content.fields.email.label} {content.fields.email.required && <span className="text-red-500">*</span>}
+        </label>
+        <input
+          type="email"
+          id="email"
+          name="email"
+          value={formData.email}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          placeholder={content.fields.email.placeholder}
+          className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent transition-colors ${
+            errors.email ? 'border-red-500' : 'border-slate-300'
+          }`}
+          disabled={status === 'submitting'}
+        />
+        {errors.email && (
+          <p className="mt-1 text-sm text-red-600">{errors.email}</p>
+        )}
+      </div>
+
+      {/* Company */}
+      <div>
+        <label htmlFor="company" className="block text-sm font-medium text-slate-700 mb-2">
+          {content.fields.company.label}
+        </label>
+        <input
+          type="text"
+          id="company"
+          name="company"
+          value={formData.company}
+          onChange={handleChange}
+          placeholder={content.fields.company.placeholder}
+          className="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent transition-colors"
+          disabled={status === 'submitting'}
+        />
+      </div>
+
+      {/* Project Type */}
+      <div>
+        <label htmlFor="projectType" className="block text-sm font-medium text-slate-700 mb-2">
+          {content.fields.projectType.label} {content.fields.projectType.required && <span className="text-red-500">*</span>}
+        </label>
+        <select
+          id="projectType"
+          name="projectType"
+          value={formData.projectType}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent transition-colors ${
+            errors.projectType ? 'border-red-500' : 'border-slate-300'
+          }`}
+          disabled={status === 'submitting'}
+        >
+          <option value="">{content.fields.projectType.placeholder}</option>
+          {content.fields.projectType.options?.map(option => (
+            <option key={option} value={option}>{option}</option>
+          ))}
+        </select>
+        {errors.projectType && (
+          <p className="mt-1 text-sm text-red-600">{errors.projectType}</p>
+        )}
+      </div>
+
+      {/* Budget */}
+      <div>
+        <label htmlFor="budget" className="block text-sm font-medium text-slate-700 mb-2">
+          {content.fields.budget.label}
+        </label>
+        <select
+          id="budget"
+          name="budget"
+          value={formData.budget}
+          onChange={handleChange}
+          className="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent transition-colors"
+          disabled={status === 'submitting'}
+        >
+          <option value="">{content.fields.budget.placeholder}</option>
+          {content.fields.budget.options?.map(option => (
+            <option key={option} value={option}>{option}</option>
+          ))}
+        </select>
+      </div>
+
+      {/* Message */}
+      <div>
+        <label htmlFor="message" className="block text-sm font-medium text-slate-700 mb-2">
+          {content.fields.message.label} {content.fields.message.required && <span className="text-red-500">*</span>}
+        </label>
+        <textarea
+          id="message"
+          name="message"
+          value={formData.message}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          placeholder={content.fields.message.placeholder}
+          rows={6}
+          className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent transition-colors ${
+            errors.message ? 'border-red-500' : 'border-slate-300'
+          }`}
+          disabled={status === 'submitting'}
+        />
+        {errors.message && (
+          <p className="mt-1 text-sm text-red-600">{errors.message}</p>
+        )}
+        <p className="mt-1 text-sm text-slate-500">
+          {formData.message.length} / {content.fields.message.minLength} minimum
+        </p>
+      </div>
+
+      {/* Submit Button */}
+      <button
+        type="submit"
+        disabled={status === 'submitting'}
+        className="w-full px-8 py-4 bg-green-600 hover:bg-green-700 disabled:bg-slate-400 text-white font-medium rounded-lg transition-colors flex items-center justify-center gap-2"
+      >
+        {status === 'submitting' ? (
+          <>
+            <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
+            {content.buttons.submitting}
+          </>
+        ) : (
+          <>
+            <Send className="w-5 h-5" />
+            {content.buttons.submit}
+          </>
+        )}
+      </button>
+    </form>
+  )
+}

app/(marketing)/contact/page.tsx

@@ -0,0 +1,146 @@
+/**
+ * Contact Page
+ *
+ * Lead capture form with benefits and FAQ
+ */
+
+import type { Metadata } from 'next'
+import { getContent } from '@/lib/content/loader'
+import type { ContactContent } from '@/content/schemas/manifesto'
+import { Clock, Euro, Code, Eye, ChevronDown } from 'lucide-react'
+import { ContactForm } from './contact-form'
+
+// Generate metadata for SEO
+export async function generateMetadata(): Promise<Metadata> {
+  const siteUrl = process.env.NEXT_PUBLIC_APP_URL || 'https://aispeedrun.vercel.app'
+
+  return {
+    title: 'Contact - AI Speedrun',
+    description: 'Van idee naar werkend prototype in 4 weken voor €200. Start je speedrun vandaag.',
+    openGraph: {
+      type: 'website',
+      title: 'Contact - AI Speedrun',
+      description: 'Van idee naar werkend prototype in 4 weken voor €200',
+      images: [`${siteUrl}/og-image.png`],
+      siteName: 'AI Speedrun',
+      locale: 'nl_NL',
+    },
+    alternates: {
+      canonical: `${siteUrl}/contact`,
+    },
+  }
+}
+
+export default async function ContactPage() {
+  const content = await getContent<ContactContent>('nl', 'contact')
+
+  const iconMap = {
+    clock: Clock,
+    euro: Euro,
+    code: Code,
+    eye: Eye,
+  }
+
+  return (
+    <>
+      {/* Hero Section */}
+      <section className="relative min-h-[40vh] flex items-center justify-center bg-gradient-to-br from-green-50 to-white px-4 pt-32 pb-16">
+        <div className="max-w-3xl mx-auto text-center">
+          <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
+            {content.hero.title}
+          </h1>
+          <p className="text-xl md:text-2xl text-green-600 font-medium mb-4">
+            {content.hero.subtitle}
+          </p>
+          <p className="text-lg text-slate-600 max-w-2xl mx-auto">
+            {content.hero.description}
+          </p>
+        </div>
+      </section>
+
+      {/* Main Content - Two Column Layout */}
+      <section className="py-16 px-4">
+        <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-12">
+          {/* Left Column - Form */}
+          <div>
+            <h2 className="text-3xl font-bold text-slate-900 mb-6">
+              {content.form.title}
+            </h2>
+            <ContactForm content={content.form} />
+          </div>
+
+          {/* Right Column - Benefits & FAQ */}
+          <div className="space-y-12">
+            {/* Benefits */}
+            <div>
+              <h3 className="text-2xl font-bold text-slate-900 mb-6">
+                {content.benefits.title}
+              </h3>
+              <div className="space-y-4">
+                {content.benefits.items.map((benefit, index) => {
+                  const Icon = iconMap[benefit.icon as keyof typeof iconMap] || Clock
+                  return (
+                    <div key={index} className="flex gap-4">
+                      <div className="flex-shrink-0 w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
+                        <Icon className="w-6 h-6 text-green-600" />
+                      </div>
+                      <div>
+                        <h4 className="font-semibold text-slate-900 mb-1">
+                          {benefit.title}
+                        </h4>
+                        <p className="text-slate-600 text-sm">
+                          {benefit.description}
+                        </p>
+                      </div>
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+
+            {/* FAQ */}
+            <div>
+              <h3 className="text-2xl font-bold text-slate-900 mb-6">
+                {content.faq.title}
+              </h3>
+              <div className="space-y-4">
+                {content.faq.items.map((item, index) => (
+                  <details
+                    key={index}
+                    className="group bg-slate-50 rounded-lg border border-slate-200 overflow-hidden"
+                  >
+                    <summary className="flex justify-between items-center cursor-pointer px-6 py-4 hover:bg-slate-100 transition-colors">
+                      <span className="font-medium text-slate-900">
+                        {item.question}
+                      </span>
+                      <ChevronDown className="w-5 h-5 text-slate-500 group-open:rotate-180 transition-transform" />
+                    </summary>
+                    <div className="px-6 py-4 border-t border-slate-200 text-slate-600">
+                      {item.answer}
+                    </div>
+                  </details>
+                ))}
+              </div>
+            </div>
+
+            {/* Additional CTA */}
+            <div className="bg-gradient-to-br from-green-50 to-white border-2 border-green-200 rounded-lg p-6 text-center">
+              <p className="text-slate-700 mb-4">
+                <strong>Nog vragen?</strong> Stuur een email naar{' '}
+                <a
+                  href="mailto:contact@speedrun.nl"
+                  className="text-green-600 hover:text-green-700 underline"
+                >
+                  contact@speedrun.nl
+                </a>
+              </p>
+              <p className="text-sm text-slate-600">
+                We reageren binnen 24 uur
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  )
+}

app/(marketing)/epd/credentials-box.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+import { useState } from 'react'
+import { Copy, Check } from 'lucide-react'
+import type { DemoCredentials } from '@/content/schemas/manifesto'
+
+interface CredentialsBoxProps {
+  credentials: DemoCredentials
+}
+
+export function CredentialsBox({ credentials }: CredentialsBoxProps) {
+  const [copiedEmail, setCopiedEmail] = useState(false)
+  const [copiedPassword, setCopiedPassword] = useState(false)
+
+  const copyToClipboard = async (text: string, type: 'email' | 'password') => {
+    try {
+      await navigator.clipboard.writeText(text)
+      if (type === 'email') {
+        setCopiedEmail(true)
+        setTimeout(() => setCopiedEmail(false), 2000)
+      } else {
+        setCopiedPassword(true)
+        setTimeout(() => setCopiedPassword(false), 2000)
+      }
+    } catch (err) {
+      console.error('Failed to copy:', err)
+    }
+  }
+
+  return (
+    <div className="bg-green-50 border-2 border-green-200 rounded-lg p-6 md:p-8">
+      <div className="space-y-4">
+        <div className="flex items-start gap-3">
+          <div className="flex-shrink-0 w-24 font-medium text-slate-700">
+            Email:
+          </div>
+          <div className="flex-1 font-mono text-slate-900 bg-white px-3 py-2 rounded border border-green-300">
+            {credentials.email}
+          </div>
+          <button
+            onClick={() => copyToClipboard(credentials.email, 'email')}
+            className="flex-shrink-0 p-2 hover:bg-green-100 rounded transition-colors"
+            aria-label="Kopieer email"
+          >
+            {copiedEmail ? (
+              <Check className="w-5 h-5 text-green-600" />
+            ) : (
+              <Copy className="w-5 h-5 text-slate-600" />
+            )}
+          </button>
+        </div>
+
+        <div className="flex items-start gap-3">
+          <div className="flex-shrink-0 w-24 font-medium text-slate-700">
+            Wachtwoord:
+          </div>
+          <div className="flex-1 font-mono text-slate-900 bg-white px-3 py-2 rounded border border-green-300">
+            {credentials.password}
+          </div>
+          <button
+            onClick={() => copyToClipboard(credentials.password, 'password')}
+            className="flex-shrink-0 p-2 hover:bg-green-100 rounded transition-colors"
+            aria-label="Kopieer wachtwoord"
+          >
+            {copiedPassword ? (
+              <Check className="w-5 h-5 text-green-600" />
+            ) : (
+              <Copy className="w-5 h-5 text-slate-600" />
+            )}
+          </button>
+        </div>
+      </div>
+
+      <p className="mt-6 text-sm text-slate-600 italic">
+        {credentials.note}
+      </p>
+
+      <div className="mt-6">
+        <a
+          href="/app/login"
+          className="inline-block w-full md:w-auto px-8 py-3 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition-colors text-center"
+        >
+          Log in op het prototype
+        </a>
+      </div>
+    </div>
+  )
+}

app/(marketing)/epd/page.tsx

@@ -0,0 +1,243 @@
+/**
+ * EPD Demo Page
+ *
+ * Showcases the EPD prototype with demo credentials,
+ * feature highlights, and comparison metrics.
+ */
+
+import type { Metadata } from 'next'
+import { getContent } from '@/lib/content/loader'
+import type { EPDContent, MetadataContent } from '@/content/schemas/manifesto'
+import { Clock, Zap, FileText, Brain } from 'lucide-react'
+import { CredentialsBox } from './credentials-box'
+
+// Generate metadata for SEO
+export async function generateMetadata(): Promise<Metadata> {
+  const metadataContent = await getContent<MetadataContent>('nl', 'metadata')
+  const siteUrl = process.env.NEXT_PUBLIC_APP_URL || 'https://aispeedrun.vercel.app'
+
+  return {
+    title: 'EPD Prototype - AI Speedrun',
+    description: 'Ervaar hoe AI de workflow van GGZ-professionals transformeert. Van intake tot behandelplan in seconden.',
+    openGraph: {
+      type: 'website',
+      title: 'EPD Prototype - AI Speedrun',
+      description: 'Van 30 minuten documentatie naar 3 minuten. Probeer het prototype.',
+      images: [`${siteUrl}/og-image.png`],
+      siteName: 'AI Speedrun',
+      locale: 'nl_NL',
+    },
+    alternates: {
+      canonical: `${siteUrl}/epd`,
+    },
+  }
+}
+
+export default async function EPDPage() {
+  const content = await getContent<EPDContent>('nl', 'epd')
+
+  return (
+    <>
+      {/* Hero Section */}
+      <section className="relative min-h-[40vh] flex items-center justify-center bg-gradient-to-br from-slate-50 to-white px-4 pt-32 pb-16">
+        <div className="max-w-3xl mx-auto text-center">
+          <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
+            {content.hero.title}
+          </h1>
+          <p className="text-xl md:text-2xl text-green-600 font-medium mb-4">
+            {content.hero.subtitle}
+          </p>
+          <p className="text-lg text-slate-600 max-w-2xl mx-auto">
+            {content.hero.description}
+          </p>
+        </div>
+      </section>
+
+      {/* Demo Credentials Section */}
+      <section id="demo-login" className="py-16 px-4 bg-white">
+        <div className="max-w-2xl mx-auto">
+          <h2 className="text-3xl font-bold text-slate-900 mb-4">
+            {content.demo.title}
+          </h2>
+          <p className="text-slate-600 mb-8">
+            {content.demo.description}
+          </p>
+
+          <CredentialsBox credentials={content.demo.credentials} />
+        </div>
+      </section>
+
+      {/* Features Section */}
+      <section className="py-16 px-4 bg-slate-50">
+        <div className="max-w-4xl mx-auto">
+          <h2 className="text-3xl font-bold text-slate-900 mb-12 text-center">
+            {content.features.title}
+          </h2>
+
+          <div className="grid md:grid-cols-2 gap-6">
+            {content.features.items.map((feature, index) => {
+              const icons = [Brain, Zap, FileText, Clock]
+              const Icon = icons[index % icons.length]
+
+              return (
+                <div key={index} className="bg-white rounded-lg p-6 shadow-sm border border-slate-200">
+                  <div className="flex items-start gap-4">
+                    <div className="flex-shrink-0 w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
+                      <Icon className="w-6 h-6 text-green-600" />
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="text-xl font-semibold text-slate-900 mb-2">
+                        {feature.title}
+                      </h3>
+                      <p className="text-slate-600 mb-4">
+                        {feature.description}
+                      </p>
+                      <div className="flex flex-col gap-1 text-sm">
+                        <div className="flex items-center gap-2">
+                          <span className="font-medium text-green-600">
+                            Met AI:
+                          </span>
+                          <span className="text-slate-900 font-semibold">
+                            {feature.time}
+                          </span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <span className="font-medium text-slate-500">
+                            Traditioneel:
+                          </span>
+                          <span className="text-slate-600 line-through">
+                            {feature.traditional}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      </section>
+
+      {/* Comparison Section */}
+      <section className="py-16 px-4 bg-white">
+        <div className="max-w-3xl mx-auto">
+          <h2 className="text-3xl font-bold text-slate-900 mb-8 text-center">
+            {content.comparison.title}
+          </h2>
+
+          <div className="bg-slate-50 rounded-lg p-6 md:p-8 border border-slate-200">
+            <div className="overflow-x-auto">
+              <table className="w-full">
+                <thead>
+                  <tr className="border-b border-slate-300">
+                    <th className="text-left pb-4 pr-4 font-semibold text-slate-700">
+                      Stap
+                    </th>
+                    <th className="text-right pb-4 px-4 font-semibold text-slate-700">
+                      {content.comparison.traditional.label}
+                    </th>
+                    <th className="text-right pb-4 pl-4 font-semibold text-green-700">
+                      {content.comparison.speedrun.label}
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-slate-200">
+                  <tr>
+                    <td className="py-3 pr-4 text-slate-900">Intake samenvatting</td>
+                    <td className="py-3 px-4 text-right text-slate-600">
+                      {content.comparison.traditional.intake}
+                    </td>
+                    <td className="py-3 pl-4 text-right font-semibold text-green-600">
+                      {content.comparison.speedrun.intake}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td className="py-3 pr-4 text-slate-900">Probleemprofiel</td>
+                    <td className="py-3 px-4 text-right text-slate-600">
+                      {content.comparison.traditional.profile}
+                    </td>
+                    <td className="py-3 pl-4 text-right font-semibold text-green-600">
+                      {content.comparison.speedrun.profile}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td className="py-3 pr-4 text-slate-900">Behandelplan</td>
+                    <td className="py-3 px-4 text-right text-slate-600">
+                      {content.comparison.traditional.plan}
+                    </td>
+                    <td className="py-3 pl-4 text-right font-semibold text-green-600">
+                      {content.comparison.speedrun.plan}
+                    </td>
+                  </tr>
+                  <tr className="font-bold border-t-2 border-slate-300">
+                    <td className="pt-4 pr-4 text-slate-900">Totaal</td>
+                    <td className="pt-4 px-4 text-right text-slate-700">
+                      {content.comparison.traditional.total}
+                    </td>
+                    <td className="pt-4 pl-4 text-right text-green-700">
+                      {content.comparison.speedrun.total}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+
+            <div className="mt-6 text-center">
+              <p className="text-2xl font-bold text-green-600">
+                {content.comparison.savings}
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Video Section */}
+      <section className="py-16 px-4 bg-slate-50">
+        <div className="max-w-3xl mx-auto text-center">
+          <h2 className="text-3xl font-bold text-slate-900 mb-4">
+            {content.video.title}
+          </h2>
+          <p className="text-slate-600 mb-8">
+            {content.video.description}
+          </p>
+
+          <div className="aspect-video bg-slate-200 rounded-lg flex items-center justify-center border border-slate-300">
+            <p className="text-slate-500 font-medium">
+              {content.video.placeholder}
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="py-24 px-4 bg-gradient-to-br from-green-50 to-white">
+        <div className="max-w-3xl mx-auto text-center">
+          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">
+            {content.cta.heading}
+          </h2>
+          {content.cta.subheading && (
+            <p className="text-lg text-slate-600 mb-8 max-w-2xl mx-auto">
+              {content.cta.subheading}
+            </p>
+          )}
+
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <a
+              href={content.cta.primaryButton.href}
+              className="inline-block px-8 py-3 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition-colors"
+            >
+              {content.cta.primaryButton.text}
+            </a>
+            <a
+              href={content.cta.secondaryButton.href}
+              className="inline-block px-8 py-3 bg-white hover:bg-slate-50 text-slate-700 font-medium rounded-lg border-2 border-slate-300 transition-colors"
+            >
+              {content.cta.secondaryButton.text}
+            </a>
+          </div>
+        </div>
+      </section>
+    </>
+  )
+}

app/(marketing)/layout.tsx

@@ -2,20 +2,43 @@
  * Marketing Layout
  * 
  * Full-width layout without sidebar for marketing pages.
- * Navigation will be added in E1.M5.S1.
+ * Includes minimal navigation and reading progress bar.
+ * 
+ * Performance optimizations:
+ * - ReadingProgress is a client component, automatically code-split by Next.js
  */
 
 import type { ReactNode } from 'react'
+import { getContent } from '@/lib/content/loader'
+import type { NavigationContent } from '@/content/schemas/manifesto'
+import { MinimalNav } from './components/minimal-nav'
+import { ReadingProgress } from './components/reading-progress'
 
 interface MarketingLayoutProps {
   children: ReactNode
 }
 
-export default function MarketingLayout({ children }: MarketingLayoutProps) {
+export default async function MarketingLayout({ children }: MarketingLayoutProps) {
+  // Load navigation content
+  const navigationContent = await getContent<NavigationContent>('nl', 'navigation')
+  
   return (
     <div className="min-h-screen bg-white">
-      {/* Navigation will be added in E1.M5.S1 */}
-      {children}
+      {/* Skip to main content link for accessibility */}
+      <a href="#main-content" className="skip-to-main">
+        Spring naar hoofdinhoud
+      </a>
+      
+      {/* Minimal Navigation - fixed top */}
+      <MinimalNav content={navigationContent} />
+      
+      {/* Reading progress bar - fixed top, below nav */}
+      {/* Client component, automatically code-split by Next.js */}
+      <ReadingProgress />
+      
+      <main id="main-content" tabIndex={-1}>
+        {children}
+      </main>
     </div>
   )
 }

app/(marketing)/page.tsx

@@ -3,20 +3,117 @@
  * 
  * Main landing page for the AI Speedrun manifesto website.
  * This page will display the long-form manifesto content.
+ * 
+ * Performance optimizations:
+ * - Lazy load components below the fold (ComparisonTable, ExperimentCTA)
+ * - Critical content (Hero, ManifestoContent) loads immediately
  */
 
-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>
+import type { Metadata } from 'next'
+import dynamic from 'next/dynamic'
+import { getContent } from '@/lib/content/loader'
+import type { ManifestoContent, MetadataContent } from '@/content/schemas/manifesto'
+import { HeroQuote } from './components/hero-quote'
+import { ManifestoContent as ManifestoContentComponent } from './components/manifesto-content'
+import { StructuredData } from './components/structured-data'
+
+// Generate metadata for SEO
+export async function generateMetadata(): Promise<Metadata> {
+  const metadataContent = await getContent<MetadataContent>('nl', 'metadata')
+  const meta = metadataContent.manifesto
+  
+  const siteUrl = process.env.NEXT_PUBLIC_APP_URL || 'https://aispeedrun.vercel.app'
+  const ogImageUrl = `${siteUrl}${meta.ogImage}`
+  
+  return {
+    title: meta.title,
+    description: meta.description,
+    keywords: meta.keywords,
+    authors: [{ name: 'Colin van der Heijden' }],
+    openGraph: {
+      type: 'article',
+      title: meta.ogTitle,
+      description: meta.ogDescription,
+      images: [
+        {
+          url: ogImageUrl,
+          width: 1200,
+          height: 630,
+          alt: meta.ogTitle,
+        },
+      ],
+      siteName: 'AI Speedrun',
+      locale: 'nl_NL',
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: meta.ogTitle,
+      description: meta.ogDescription,
+      images: [ogImageUrl],
+    },
+    alternates: {
+      canonical: siteUrl,
+    },
+    robots: {
+      index: true,
+      follow: true,
+      googleBot: {
+        index: true,
+        follow: true,
+        'max-video-preview': -1,
+        'max-image-preview': 'large',
+        'max-snippet': -1,
+      },
+    },
+  }
+}
+
+// Lazy load components below the fold for better initial load performance
+const ComparisonTable = dynamic(
+  () => import('./components/comparison-table').then((mod) => ({ default: mod.ComparisonTable })),
+  { 
+    ssr: true, // Still SSR for SEO, but code-split
+    loading: () => (
+      <div className="w-full md:max-w-[750px] mx-auto px-4 md:px-16 my-12 md:my-16">
+        <div className="h-64 bg-slate-50 animate-pulse rounded-lg" />
       </div>
-    </main>
+    )
+  }
+)
+
+const ExperimentCTA = dynamic(
+  () => import('./components/experiment-cta').then((mod) => ({ default: mod.ExperimentCTA })),
+  { 
+    ssr: true, // Still SSR for SEO, but code-split
+    loading: () => (
+      <section className="py-24 px-4 text-center bg-white">
+        <div className="max-w-4xl mx-auto">
+          <div className="h-16 bg-slate-100 animate-pulse rounded-lg mb-8" />
+          <div className="flex gap-4 justify-center">
+            <div className="h-12 w-48 bg-slate-200 animate-pulse rounded-md" />
+            <div className="h-12 w-48 bg-slate-200 animate-pulse rounded-md" />
+          </div>
+        </div>
+      </section>
+    )
+  }
+)
+
+export default async function ManifestoPage() {
+  const content = await getContent<ManifestoContent>('nl', 'manifesto')
+  
+  return (
+    <>
+      {/* Structured data for SEO */}
+      <StructuredData content={content} />
+      
+      <HeroQuote content={content.hero} />
+      <ManifestoContentComponent sections={content.sections} />
+      <div className="w-full md:max-w-[750px] mx-auto px-4 md:px-16">
+        <ComparisonTable content={content.comparison} />
+      </div>
+      <ExperimentCTA content={content.cta} />
+    </>
   )
 }