diff --git a/CHANGELOG.md b/CHANGELOG.md
index f9b0404..7ef1f82 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,18 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ## [Unreleased]
 
+### Added — WCAG Contrast Checker Project
+- Color contrast accessibility tool for analyzing WCAG AA/AAA compliance
+- Interactive prototype with CSV upload, manual input, and Danish municipal sample palettes
+
+### Added — Deltag Aarhus Projekttidslinje Project
+- Interactive citizen engagement timeline for "Stationspladsen i Hjortshøj"
+- Responsive vertical/horizontal layout with milestone navigation
+
+### Added — Book Aarhus Project
+- Resource booking application prototype for rooms and facilities in Aarhus Kommune
+- Search, filtering, favorites, and responsive room cards
+
 ### Added — deltag.aarhus.dk Project
 - Hearing detail page prototype for Aarhus Kommune's citizen participation platform
 - Interactive mock with 784 simulated hearing responses, filtering, sorting, MitID login, submission form
diff --git a/docs/.vitepress/sidebar.mts b/docs/.vitepress/sidebar.mts
index ae640dd..d45fc7e 100644
--- a/docs/.vitepress/sidebar.mts
+++ b/docs/.vitepress/sidebar.mts
@@ -48,12 +48,45 @@ const deltagAarhus: DefaultTheme.SidebarItem[] = [
   },
 ]
 
+const wcagContrastChecker: DefaultTheme.SidebarItem[] = [
+  {
+    text: 'WCAG Contrast Checker',
+    items: [
+      { text: 'Overview', link: '/projects/wcag-contrast-checker/' },
+      { text: 'Interactive Mocks', link: '/projects/wcag-contrast-checker/mocks' },
+    ],
+  },
+]
+
+const deltagAarhusTimeline: DefaultTheme.SidebarItem[] = [
+  {
+    text: 'Deltag Aarhus — Projekttidslinje',
+    items: [
+      { text: 'Overview', link: '/projects/deltag-aarhus-timeline/' },
+      { text: 'Interactive Mocks', link: '/projects/deltag-aarhus-timeline/mocks' },
+    ],
+  },
+]
+
+const bookAarhus: DefaultTheme.SidebarItem[] = [
+  {
+    text: 'Book Aarhus',
+    items: [
+      { text: 'Overview', link: '/projects/book-aarhus/' },
+      { text: 'Interactive Mocks', link: '/projects/book-aarhus/mocks' },
+    ],
+  },
+]
+
 export function sidebar(): DefaultTheme.Sidebar {
   return {
     '/projects/climate-nudging/': climateNudging,
     '/projects/salary-negotiation/': salaryNegotiation,
     '/projects/agentic-orchestration/': agenticOrchestration,
     '/projects/deltag-aarhus/': deltagAarhus,
+    '/projects/wcag-contrast-checker/': wcagContrastChecker,
+    '/projects/deltag-aarhus-timeline/': deltagAarhusTimeline,
+    '/projects/book-aarhus/': bookAarhus,
   }
 }
 
diff --git a/docs/index.md b/docs/index.md
index 8bcd234..68d075b 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -22,4 +22,16 @@ features:
     details: Prototype af en høringsdetalje-side til Aarhus Kommunes borgerdeltagelsesplatform — med 784 simulerede høringssvar, MitID-login og variantskift.
     link: /projects/deltag-aarhus/
     linkText: View project
+  - title: WCAG Contrast Checker
+    details: Accessibility tool for analyzing color contrast ratios against WCAG AA/AAA standards. Upload CSV, add colors manually, or test with Danish municipal palettes.
+    link: /projects/wcag-contrast-checker/
+    linkText: View project
+  - title: Deltag Aarhus — Projekttidslinje
+    details: Interaktiv tidslinjeskabelon til borgerinddragelsesprojekter. Demonstrerer forløbet for "Stationspladsen i Hjortshøj" med milepæle fra 2023 til 2027.
+    link: /projects/deltag-aarhus-timeline/
+    linkText: View project
+  - title: Book Aarhus
+    details: Prototype af en responsiv bookingapplikation til lokaler og faciliteter i Aarhus Kommune med søgning, filtrering og favoritter.
+    link: /projects/book-aarhus/
+    linkText: View project
 ---
diff --git a/docs/projects/book-aarhus/index.md b/docs/projects/book-aarhus/index.md
new file mode 100644
index 0000000..ae8c1ea
--- /dev/null
+++ b/docs/projects/book-aarhus/index.md
@@ -0,0 +1,39 @@
+<small>**Project:** Book Aarhus · **Status:** Prototype · **Date:** January 2026</small>
+
+# Book Aarhus
+
+**Prototype af en responsiv bookingapplikation til lokaler og faciliteter i Aarhus Kommune.**
+
+---
+
+## Hvad prototypen viser
+
+En bookingplatform hvor brugere kan søge, filtrere og booke lokaler og faciliteter på tværs af Aarhus Kommunes bygninger. Prototypen demonstrerer søgeoplevelsen, filtreringssystemet og lokalevisningen.
+
+---
+
+## Features
+
+- **Søg og filtrer:**
+  - Fritekstsøgning
+  - Filtertyper: lokaletype, faciliteter, siddepladser, pris, tilgængelighed
+  - Responsivt filtermodul (modal på mobil)
+
+- **Lokalekort:**
+  - Billede, kapacitet, tilgængelighedsinfo
+  - Udstyrsliste, adresse, beskrivelse
+  - Eksempler fra Dokk1, Blixen, Aarhus Kunstmuseum, Aarhus Universitet
+
+- **Brugeroplevelse:**
+  - Fanebaseret navigation: "Find ressourcer", "Dine bookinger", "Dine favoritter", "Samarbejdspartner"
+  - Favoritsystem til hyppigt bookede lokaler
+  - Populære lokaler-sektion
+  - Responsivt design med hamburger-menu på mobil
+
+---
+
+## Interaktiv prototype
+
+<a href="/research-projects/projects/book-aarhus/mocks/index.html" class="mock-button" target="_blank">Åbn Book Aarhus ↗</a>
+
+Prøv at skifte mellem fanerne og ændre browservinduets bredde for at se det responsive layout.
diff --git a/docs/projects/book-aarhus/mocks.md b/docs/projects/book-aarhus/mocks.md
new file mode 100644
index 0000000..6fad8e2
--- /dev/null
+++ b/docs/projects/book-aarhus/mocks.md
@@ -0,0 +1,8 @@
+<small>**Project:** Book Aarhus</small>
+
+# Interaktive Mocks
+
+---
+
+**<a href="/research-projects/projects/book-aarhus/mocks/index.html" target="_blank">Book Aarhus — Lokale- og facilitetsbooking ↗</a>**
+Responsiv bookingapplikation med søgning, filtrering, lokalekort, favoritter og fanebaseret navigation. Eksempler fra Dokk1, Blixen, Aarhus Kunstmuseum m.fl.
diff --git a/docs/projects/deltag-aarhus-timeline/index.md b/docs/projects/deltag-aarhus-timeline/index.md
new file mode 100644
index 0000000..bd46f0a
--- /dev/null
+++ b/docs/projects/deltag-aarhus-timeline/index.md
@@ -0,0 +1,42 @@
+<small>**Project:** Deltag Aarhus — Projekttidslinje · **Status:** Prototype · **Date:** January 2026</small>
+
+# Deltag Aarhus — Projekttidslinje
+
+**Interaktiv tidslinjeskabelon til borgerinddragelsesprojekter på deltag.aarhus.dk.**
+
+---
+
+## Hvad prototypen viser
+
+En tidslinje for borgerinddragelsesprojektet "Stationspladsen i Hjortshøj" der viser projektets forløb fra august 2023 til januar 2027. Tidslinjen demonstrerer hvordan borgere kan følge et projekts udvikling over tid.
+
+---
+
+## Features
+
+- **Responsivt layout:**
+  - Vertikal tidslinje med vekslende venstre/højre-placering (desktop)
+  - Horisontal tidslinje med kort-baseret design (mobil)
+
+- **Milepæle og statusser:**
+  - Afsluttede aktiviteter (grøn)
+  - Igangværende aktiviteter (blå)
+  - Kommende aktiviteter (grå)
+  - Redaktørnoter (særlig markering)
+
+- **Navigation:**
+  - Mini-tidslinje i højre side (desktop) til hurtig navigation
+  - Klikbare milepæle med scroll-to-section
+
+- **Realistisk indhold:**
+  - Dialogmøder, workshops, pop-up events, digitale høringer
+  - Links til faktiske deltag.aarhus.dk-sider
+  - Billeder fra Aarhus Kommunes hjemmeside
+
+---
+
+## Interaktiv prototype
+
+<a href="/research-projects/projects/deltag-aarhus-timeline/mocks/index.html" class="mock-button" target="_blank">Åbn tidslinjen ↗</a>
+
+Prøv at ændre browservinduets bredde for at se det responsive layout skifte mellem desktop og mobil.
diff --git a/docs/projects/deltag-aarhus-timeline/mocks.md b/docs/projects/deltag-aarhus-timeline/mocks.md
new file mode 100644
index 0000000..c9a3a9a
--- /dev/null
+++ b/docs/projects/deltag-aarhus-timeline/mocks.md
@@ -0,0 +1,8 @@
+<small>**Project:** Deltag Aarhus — Projekttidslinje</small>
+
+# Interaktive Mocks
+
+---
+
+**<a href="/research-projects/projects/deltag-aarhus-timeline/mocks/index.html" target="_blank">Projekttidslinje — Stationspladsen i Hjortshøj ↗</a>**
+Interaktiv tidslinje for et borgerinddragelsesprojekt med milepæle fra 2023 til 2027. Responsivt layout med vertikal (desktop) og horisontal (mobil) visning, statusfarver og navigerbar mini-tidslinje.
diff --git a/docs/projects/wcag-contrast-checker/index.md b/docs/projects/wcag-contrast-checker/index.md
new file mode 100644
index 0000000..d29a805
--- /dev/null
+++ b/docs/projects/wcag-contrast-checker/index.md
@@ -0,0 +1,41 @@
+<small>**Project:** WCAG Contrast Checker · **Status:** Prototype · **Date:** January 2026</small>
+
+# WCAG Contrast Checker
+
+**Accessibility tool for analyzing color contrast ratios against WCAG AA and AAA standards.**
+
+---
+
+## What it does
+
+The WCAG Contrast Checker helps designers and developers verify that their color combinations meet accessibility requirements. It calculates contrast ratios between foreground and background colors and checks compliance against both WCAG AA (4.5:1 for normal text) and AAA (7:1 for normal text) levels.
+
+---
+
+## Features
+
+- **Three input modes:**
+  - Upload a CSV file with color definitions (name, background hex, foreground hex)
+  - Add colors manually via the UI
+  - Load sample data with Danish municipal color palettes (Aarhus, Aalborg, Viborg, etc.)
+
+- **Contrast analysis:**
+  - Real-time contrast ratio calculation
+  - WCAG AA and AAA compliance indicators
+  - Visual preview of each color combination
+
+- **Brightness adjustment:**
+  - Expandable detail rows with brightness sliders
+  - Test variations of each color to find compliant alternatives
+  - See how small adjustments affect compliance
+
+- **Export:**
+  - Download results as CSV for documentation
+
+---
+
+## Interactive prototype
+
+<a href="/research-projects/projects/wcag-contrast-checker/mocks/index.html" class="mock-button" target="_blank">Open WCAG Contrast Checker ↗</a>
+
+Try loading the sample data to see Danish municipal color palettes analyzed against WCAG standards.
diff --git a/docs/projects/wcag-contrast-checker/mocks.md b/docs/projects/wcag-contrast-checker/mocks.md
new file mode 100644
index 0000000..9aedeaf
--- /dev/null
+++ b/docs/projects/wcag-contrast-checker/mocks.md
@@ -0,0 +1,8 @@
+<small>**Project:** WCAG Contrast Checker</small>
+
+# Interactive Mocks
+
+---
+
+**<a href="/research-projects/projects/wcag-contrast-checker/mocks/index.html" target="_blank">WCAG Contrast Checker ↗</a>**
+Accessibility tool for analyzing color contrast ratios. Upload CSV, add colors manually, or load sample data with Danish municipal color palettes. Shows WCAG AA/AAA compliance with brightness adjustment sliders.
diff --git a/docs/public/projects/book-aarhus/mocks/index.html b/docs/public/projects/book-aarhus/mocks/index.html
new file mode 100644
index 0000000..ba1f373
--- /dev/null
+++ b/docs/public/projects/book-aarhus/mocks/index.html
@@ -0,0 +1,717 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Book Aarhus - Ressource Booking</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap');
+    body { font-family: 'Inter', sans-serif; }
+    @keyframes slide-up { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+    @keyframes slide-down { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+    @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
+    @keyframes scale-in { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
+    .animate-slide-up { animation: slide-up 0.3s ease-out; }
+    .animate-slide-down { animation: slide-down 0.2s ease-out; }
+    .animate-fade-in { animation: fade-in 0.2s ease-out; }
+    .animate-scale-in { animation: scale-in 0.2s ease-out; }
+  </style>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            brand: { primary: '#2d3e4f' },
+            slate: { 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b' }
+          }
+        }
+      }
+    }
+  </script>
+</head>
+<body>
+  <div id="root"></div>
+
+  <script type="text/babel">
+    const { useState, useEffect, createContext, useContext } = React;
+
+    // ============================================================
+    // CONTEXT - App State Management
+    // ============================================================
+    const AppContext = createContext();
+    
+    const useApp = () => useContext(AppContext);
+
+    // ============================================================
+    // DATA - Sample booking data
+    // ============================================================
+    const FAVORITES_DATA = [
+      { id: 1, name: 'Storesal', location: 'Dokk1', date: 'Fre 5. sep', fullDate: 'Fredag 5. september', time: '14:00', image: 'https://images.unsplash.com/photo-1497366216548-37526070297c?w=100&h=100&fit=crop', capacity: 150, accessibility: 'Adgang m. kørestol, Teleslynge', equipment: 'Projector, Højtalersystem, Trådløs mikofon', address: 'Dokk1, Niveau 1, Hack Kampmanns plads 2, 8000 Aarhus C', description: 'Nulla imperdiet odio eros, eget euismod neque ullamcorper at. Aliquam eu diam in eros hendrerit aliquet.', isFavorite: true },
+      { id: 2, name: 'Lillesal', location: 'Dokk1', date: 'Fre 5. sep', fullDate: 'Fredag 5. september', time: '15:00', image: 'https://images.unsplash.com/photo-1524758631624-e2822e304c36?w=100&h=100&fit=crop', capacity: 50, accessibility: 'Adgang m. kørestol', equipment: 'Projector, Whiteboard', address: 'Dokk1, Niveau 2, Hack Kampmanns plads 2, 8000 Aarhus C', description: 'Et stort og lyst lokale med plads til møder og workshops.', isFavorite: true },
+      { id: 3, name: 'Auditoriet', location: 'Blixen', date: 'Fre 5. sep', fullDate: 'Fredag 5. september', time: '14:00', image: 'https://images.unsplash.com/photo-1497366216548-37526070297c?w=100&h=100&fit=crop', capacity: 200, accessibility: 'Adgang m. kørestol, Teleslynge', equipment: 'Projector, Højtalersystem, Scene', address: 'Karen Blixens Boulevard 7, 8220 Brabrand', description: 'Professionelt auditorium med scene og moderne AV-udstyr.', isFavorite: false },
+    ];
+
+    const POPULAR_DATA = [
+      { id: 4, name: 'Creativa', location: 'Aarhus Art Museum', date: 'Lør 6. sep', fullDate: 'Lørdag 6. september', time: '10:00', image: 'https://images.unsplash.com/photo-1497366216548-37526070297c?w=100&h=100&fit=crop', capacity: 80, accessibility: 'Adgang m. kørestol', equipment: 'Projector, Kunstbelysning', address: 'Aros Allé 2, 8000 Aarhus C', description: 'Kreativt lokale i hjertet af Aarhus kunstmuseum.', isFavorite: false },
+      { id: 5, name: 'TechZone', location: 'Aarhus University', date: 'Søn 7. sep', fullDate: 'Søndag 7. september', time: '09:00', image: 'https://images.unsplash.com/photo-1524758631624-e2822e304c36?w=100&h=100&fit=crop', capacity: 100, accessibility: 'Adgang m. kørestol, Teleslynge', equipment: 'Projector, Smartboard, Video konference', address: 'Nordre Ringgade 1, 8000 Aarhus C', description: 'Moderne teknologilokale med avanceret udstyr.', isFavorite: false },
+      { id: 6, name: 'InnoHub', location: 'VIA University College', date: 'Man 8. sep', fullDate: 'Mandag 8. september', time: '13:00', image: 'https://images.unsplash.com/photo-1497366216548-37526070297c?w=100&h=100&fit=crop', capacity: 60, accessibility: 'Adgang m. kørestol', equipment: 'Projector, Whiteboard, Video konference', address: 'Chr. M. Østergaards Vej 4, 8700 Horsens', description: 'Innovationshub med fleksible mødefaciliteter.', isFavorite: false },
+    ];
+
+    const FILTER_OPTIONS = {
+      type: ['Mødelokale', 'Sal', 'Undervisningslokale'],
+      facilities: ['Projector', 'Skærm', 'Lydsystem', 'Trådløsmikrofon'],
+      seats: ['1-10', '11-50', '100', '100+'],
+      price: ['Gratis', '0-500', '501-1500', '1501+'],
+      accessibility: ['Adgang m. kørestol', 'Teleslynge']
+    };
+
+    // ============================================================
+    // ICONS - SVG Icon Components
+    // ============================================================
+    const Icons = {
+      Menu: () => <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>,
+      Close: () => <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>,
+      MapPin: () => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>,
+      Calendar: () => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>,
+      CalendarWeek: () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>,
+      Clock: () => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>,
+      Timer: () => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12"/></svg>,
+      Sliders: () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/></svg>,
+      ChevronDown: () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="6 9 12 15 18 9"/></svg>,
+      ChevronUp: () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="18 15 12 9 6 15"/></svg>,
+      Star: ({ filled }) => <svg width="20" height="20" viewBox="0 0 24 24" fill={filled ? '#facc15' : 'none'} stroke={filled ? '#facc15' : '#94a3b8'} strokeWidth="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>,
+      Map: () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/></svg>,
+      CalendarDays: () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><rect x="8" y="14" width="3" height="3"/></svg>,
+      Check: () => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg>,
+      Sort: () => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>,
+    };
+
+    // ============================================================
+    // COMPONENT: MobileHeader
+    // ============================================================
+    const MobileHeader = ({ onMenuClick }) => (
+      <header className="lg:hidden bg-slate-700 h-16 flex items-center justify-between px-4 sticky top-0 z-40">
+        <h1 className="text-2xl font-medium text-white">Booking</h1>
+        <button onClick={onMenuClick} className="text-white p-2">
+          <Icons.Menu />
+        </button>
+      </header>
+    );
+
+    // ============================================================
+    // COMPONENT: DesktopHeader
+    // ============================================================
+    const DesktopHeader = () => (
+      <header className="hidden lg:flex px-20 py-6 items-center justify-between">
+        <h1 className="text-4xl font-medium text-gray-900">Booking</h1>
+        <div className="flex items-center gap-4">
+          <button className="text-blue-600 text-sm font-medium hover:underline">Log ud</button>
+          <div className="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center text-white font-medium shadow-sm">JP</div>
+        </div>
+      </header>
+    );
+
+    // ============================================================
+    // COMPONENT: NavigationBar
+    // ============================================================
+    const NavigationBar = ({ activeTab, onTabChange }) => {
+      const tabs = ['Find ressourcer', 'Dine bookinger', 'Dine favoritter', 'Samarbejdspartner'];
+      return (
+        <nav className="hidden lg:block mx-20 bg-brand-primary rounded-lg px-6 shadow-md">
+          <div className="flex gap-12">
+            {tabs.map((tab) => (
+              <button
+                key={tab}
+                onClick={() => onTabChange(tab)}
+                className={`py-4 text-base font-medium transition-colors relative ${activeTab === tab ? 'text-gray-300' : 'text-white hover:text-gray-300'}`}
+              >
+                {tab}
+                {activeTab === tab && <div className="absolute bottom-0 left-0 right-0 h-[3px] bg-blue-500 rounded-t" />}
+              </button>
+            ))}
+          </div>
+        </nav>
+      );
+    };
+
+    // ============================================================
+    // COMPONENT: MobileMenu (Drawer)
+    // ============================================================
+    const MobileMenu = ({ isOpen, onClose, activeTab, onTabChange }) => {
+      const tabs = ['Find ressourcer', 'Dine bookinger', 'Dine favoritter', 'Samarbejdspartner'];
+      if (!isOpen) return null;
+      return (
+        <div className="fixed inset-0 z-50 lg:hidden">
+          <div className="absolute inset-0 bg-black/50" onClick={onClose} />
+          <div className="absolute right-0 top-0 h-full w-72 bg-white shadow-xl animate-slide-down">
+            <div className="p-4 border-b flex justify-between items-center">
+              <span className="font-medium">Menu</span>
+              <button onClick={onClose} className="p-2"><Icons.Close /></button>
+            </div>
+            <div className="p-4">
+              <div className="flex items-center gap-3 mb-6">
+                <div className="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center text-white font-medium">JP</div>
+                <div>
+                  <p className="font-medium">John Pedersen</p>
+                  <button className="text-blue-600 text-sm">Log ud</button>
+                </div>
+              </div>
+              {tabs.map((tab) => (
+                <button
+                  key={tab}
+                  onClick={() => { onTabChange(tab); onClose(); }}
+                  className={`w-full text-left py-3 px-4 rounded-lg mb-1 ${activeTab === tab ? 'bg-blue-50 text-blue-600 font-medium' : 'hover:bg-slate-50'}`}
+                >
+                  {tab}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      );
+    };
+
+    // ============================================================
+    // COMPONENT: Checkbox
+    // ============================================================
+    const Checkbox = ({ checked, onChange, label }) => (
+      <label className="flex items-center gap-2 cursor-pointer py-1">
+        <div className={`w-4 h-4 rounded-sm border ${checked ? 'bg-blue-600 border-blue-600' : 'bg-slate-50 border-slate-400'} flex items-center justify-center transition-colors`}>
+          {checked && <Icons.Check />}
+        </div>
+        <span className="text-base text-gray-900">{label}</span>
+      </label>
+    );
+
+    // ============================================================
+    // COMPONENT: OverlayFilters (Alle filtre)
+    // ============================================================
+    const OverlayFilters = ({ isOpen, onClose, filters, onFilterChange }) => {
+      if (!isOpen) return null;
+      return (
+        <div className="fixed inset-0 z-50 flex items-start justify-center pt-20 lg:pt-32 px-4">
+          <div className="absolute inset-0 bg-black/50" onClick={onClose} />
+          <div className="relative bg-white rounded-lg shadow-xl w-full max-w-md max-h-[80vh] overflow-y-auto animate-scale-in">
+            <div className="sticky top-0 bg-white p-4 border-b flex justify-between items-center">
+              <h3 className="text-xl font-medium text-slate-800">Filtre</h3>
+              <button onClick={onClose} className="p-1 hover:bg-slate-100 rounded"><Icons.Close /></button>
+            </div>
+            <div className="p-4 space-y-5">
+              <div>
+                <h4 className="font-medium text-base text-slate-800 mb-2">Type</h4>
+                <div className="pl-4 space-y-1">
+                  {FILTER_OPTIONS.type.map(opt => (
+                    <Checkbox key={opt} label={opt} checked={filters.type?.includes(opt)} onChange={() => onFilterChange('type', opt)} />
+                  ))}
+                </div>
+              </div>
+              <div>
+                <h4 className="font-medium text-base text-slate-800 mb-2">Faciliteter</h4>
+                <div className="pl-4 space-y-1">
+                  {FILTER_OPTIONS.facilities.map(opt => (
+                    <Checkbox key={opt} label={opt} checked={filters.facilities?.includes(opt)} onChange={() => onFilterChange('facilities', opt)} />
+                  ))}
+                </div>
+              </div>
+              <div>
+                <h4 className="font-medium text-base text-slate-800 mb-2">Siddepladser</h4>
+                <div className="pl-4 space-y-1">
+                  {FILTER_OPTIONS.seats.map(opt => (
+                    <Checkbox key={opt} label={opt} checked={filters.seats?.includes(opt)} onChange={() => onFilterChange('seats', opt)} />
+                  ))}
+                </div>
+              </div>
+              <div>
+                <h4 className="font-medium text-base text-slate-800 mb-2">Pris</h4>
+                <div className="pl-4 space-y-1">
+                  {FILTER_OPTIONS.price.map(opt => (
+                    <Checkbox key={opt} label={opt} checked={filters.price?.includes(opt)} onChange={() => onFilterChange('price', opt)} />
+                  ))}
+                </div>
+              </div>
+              <div>
+                <h4 className="font-medium text-base text-slate-800 mb-2">Tilgængelighed</h4>
+                <div className="pl-4 space-y-1">
+                  {FILTER_OPTIONS.accessibility.map(opt => (
+                    <Checkbox key={opt} label={opt} checked={filters.accessibility?.includes(opt)} onChange={() => onFilterChange('accessibility', opt)} />
+                  ))}
+                </div>
+              </div>
+            </div>
+            <div className="sticky bottom-0 bg-white p-4 border-t">
+              <button onClick={onClose} className="w-full py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors">
+                Anvend filtre
+              </button>
+            </div>
+          </div>
+        </div>
+      );
+    };
+
+    // ============================================================
+    // COMPONENT: OverlayLocation (Hvor vil du booke)
+    // ============================================================
+    const OverlayLocation = ({ isOpen, onClose, onSelect }) => {
+      const suggestions = [
+        { text: 'Find lokaler i dit lokal område ved at indtaste ', bold: 'postnummer', text2: ' eller ', bold2: 'bynavn' },
+        { text: 'Find ', bold: 'folkehuse', text2: ' til sociale begivenheder' },
+        { text: 'Find ', bold: 'auditorier', text2: ' til forelæsninger' },
+        { text: 'Find ', bold: 'sale', text2: ' til store arrangementer' },
+      ];
+      if (!isOpen) return null;
+      return (
+        <div className="fixed inset-0 z-50 flex items-start justify-center pt-20 lg:pt-32 px-4">
+          <div className="absolute inset-0 bg-black/50" onClick={onClose} />
+          <div className="relative bg-white rounded-lg shadow-xl w-full max-w-xl animate-scale-in">
+            <div className="p-4 border-b flex justify-between items-center">
+              <h3 className="text-xl font-medium text-slate-800">Forslåede lokationer</h3>
+              <button onClick={onClose} className="p-1 hover:bg-slate-100 rounded"><Icons.Close /></button>
+            </div>
+            <div className="p-4 space-y-3">
+              {suggestions.map((s, i) => (
+                <button key={i} onClick={() => { onSelect(s.bold); onClose(); }} className="w-full text-left p-3 bg-slate-50 border border-slate-400 rounded hover:bg-slate-100 transition-colors">
+                  <span className="text-sm text-gray-900">{s.text}<strong>{s.bold}</strong>{s.text2}{s.bold2 && <strong>{s.bold2}</strong>}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      );
+    };
+
+    // ============================================================
+    // COMPONENT: OverlayDatePicker (Calendar/Flexible)
+    // ============================================================
+    const OverlayDatePicker = ({ isOpen, onClose }) => {
+      const [tab, setTab] = useState('flexible');
+      const [duration, setDuration] = useState(null);
+      const [selectedWeeks, setSelectedWeeks] = useState([]);
+      const weeks = [{ num: 37, month: 'Sep' }, { num: 38, month: 'Sep' }, { num: 39, month: 'Sep' }, { num: 40, month: 'Okt' }, { num: 41, month: 'Okt' }];
+      
+      const toggleWeek = (num) => {
+        if (selectedWeeks.includes(num)) setSelectedWeeks(selectedWeeks.filter(w => w !== num));
+        else if (selectedWeeks.length < 3) setSelectedWeeks([...selectedWeeks, num]);
+      };
+      
+      if (!isOpen) return null;
+      return (
+        <div className="fixed inset-0 z-50 flex items-start justify-center pt-20 lg:pt-32 px-4">
+          <div className="absolute inset-0 bg-black/50" onClick={onClose} />
+          <div className="relative bg-white rounded-lg shadow-xl w-full max-w-xl animate-scale-in">
+            <div className="p-4 border-b flex justify-between items-center">
+              <h3 className="text-xl font-medium text-slate-800">Hvornår vil det passe</h3>
+              <button onClick={onClose} className="p-1 hover:bg-slate-100 rounded"><Icons.Close /></button>
+            </div>
+            <div className="flex border-b border-slate-300">
+              <button onClick={() => setTab('calendar')} className={`flex-1 py-3 text-sm text-center ${tab === 'calendar' ? 'font-semibold text-blue-600 border-b-2 border-blue-600' : 'text-slate-800'}`}>Kalender</button>
+              <button onClick={() => setTab('flexible')} className={`flex-1 py-3 text-sm text-center ${tab === 'flexible' ? 'font-semibold text-blue-600 border-b-2 border-blue-600' : 'text-slate-800'}`}>Jeg er fleksibel</button>
+            </div>
+            <div className="p-4 space-y-4">
+              {tab === 'flexible' ? (
+                <>
+                  <div>
+                    <h4 className="font-medium text-base text-slate-800 mb-3">Hvor lang tid vare dit arrangement?</h4>
+                    <div className="grid grid-cols-3 gap-3">
+                      {['Mindre end 2 timer', '2 til 7 timer', 'En hel dag'].map(d => (
+                        <button key={d} onClick={() => setDuration(d)} className={`p-3 text-sm rounded border ${duration === d ? 'border-blue-600 bg-blue-50 text-blue-600' : 'border-slate-400 bg-slate-50 text-slate-800 hover:bg-slate-100'}`}>{d}</button>
+                      ))}
+                    </div>
+                  </div>
+                  <div>
+                    <h4 className="font-medium text-base text-slate-800">Hvilke uger vil passe dig?</h4>
+                    <p className="text-sm text-slate-600 mb-3">Vælg op til 3</p>
+                    <div className="grid grid-cols-5 gap-3">
+                      {weeks.map(w => (
+                        <button key={w.num} onClick={() => toggleWeek(w.num)} className={`p-3 rounded border text-center ${selectedWeeks.includes(w.num) ? 'border-blue-600 bg-blue-50' : 'border-slate-400 bg-slate-50 hover:bg-slate-100'}`}>
+                          <Icons.CalendarWeek />
+                          <div className="text-lg font-medium text-slate-800">{w.num}</div>
+                          <div className="text-xs text-slate-600">{w.month}</div>
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                  <div className="flex items-center justify-end gap-4 pt-2">
+                    <span className="text-sm text-slate-600">Vælg varighed og uger</span>
+                    <button disabled={!duration || selectedWeeks.length === 0} className={`px-4 py-2 rounded font-medium ${duration && selectedWeeks.length > 0 ? 'bg-blue-600 text-white hover:bg-blue-700' : 'bg-slate-300 text-slate-500 cursor-not-allowed'}`}>Søg med disse valg</button>
+                  </div>
+                </>
+              ) : (
+                <div className="text-center py-8 text-slate-500">Kalender visning kommer snart...</div>
+              )}
+            </div>
+          </div>
+        </div>
+      );
+    };
+
+    // ============================================================
+    // COMPONENT: FilterDropdown (Small dropdowns)
+    // ============================================================
+    const FilterDropdown = ({ label, options }) => {
+      const [isOpen, setIsOpen] = useState(false);
+      return (
+        <div className="relative">
+          <button onClick={() => setIsOpen(!isOpen)} className="flex items-center gap-2 px-4 py-1.5 bg-white border border-slate-400 rounded text-sm font-medium text-slate-800 hover:bg-slate-50 transition-colors">
+            <span>{label}</span>
+            <Icons.ChevronDown />
+          </button>
+          {isOpen && (
+            <>
+              <div className="fixed inset-0 z-10" onClick={() => setIsOpen(false)} />
+              <div className="absolute top-full left-0 mt-1 bg-white border border-slate-300 rounded-lg shadow-lg z-20 min-w-[160px] animate-fade-in overflow-hidden">
+                {options.map((opt, i) => (
+                  <button key={i} onClick={() => setIsOpen(false)} className="w-full px-4 py-2.5 text-left text-sm hover:bg-blue-50 hover:text-blue-600 transition-colors">{opt}</button>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+      );
+    };
+
+    // ============================================================
+    // COMPONENT: SearchWrapper
+    // ============================================================
+    const SearchWrapper = ({ onLocationClick, onDateClick, onFiltersClick }) => (
+      <section className="mx-4 lg:mx-20 mt-0 lg:mt-5 bg-white border border-slate-200 lg:rounded-lg p-4 lg:p-5 shadow-sm">
+        {/* Category Selector */}
+        <div className="mb-3">
+          <button className="inline-flex items-center gap-2 px-4 py-2 hover:bg-slate-50 rounded transition-colors">
+            <span className="text-sm font-medium text-slate-800">Lokaler</span>
+            <Icons.ChevronDown />
+          </button>
+        </div>
+        
+        {/* Primary Search Fields */}
+        <div className="flex flex-col lg:flex-row gap-3 mb-3">
+          <button onClick={onLocationClick} className="flex-1 flex items-center gap-3 px-4 py-3 bg-white border border-slate-400 rounded-lg hover:border-slate-500 transition-colors text-left">
+            <span className="text-slate-500"><Icons.MapPin /></span>
+            <span className="font-medium text-slate-800">Hvor vil du booke?</span>
+          </button>
+          
+          <div className="flex">
+            <button onClick={onDateClick} className="flex-1 lg:flex-none flex items-center gap-3 px-4 py-3 bg-white border border-slate-400 lg:border-r-0 rounded-l-lg hover:bg-slate-50 transition-colors lg:min-w-[170px]">
+              <span className="text-slate-500"><Icons.Calendar /></span>
+              <span className="text-slate-800">fre, 5 sep</span>
+            </button>
+            <button onClick={onDateClick} className="flex-1 lg:flex-none flex items-center gap-3 px-4 py-3 bg-white border border-slate-400 rounded-r-lg hover:bg-slate-50 transition-colors lg:min-w-[150px]">
+              <span className="text-slate-800">fre, 5 sep</span>
+            </button>
+          </div>
+          
+          <div className="flex gap-3">
+            <button className="flex-1 lg:flex-none flex items-center gap-3 px-4 py-3 bg-white border border-slate-400 rounded-lg hover:bg-slate-50 transition-colors lg:w-[130px]">
+              <span className="text-slate-500"><Icons.Clock /></span>
+              <span className="text-slate-800">14:00</span>
+            </button>
+            <button className="flex-1 lg:flex-none flex items-center gap-3 px-4 py-3 bg-white border border-slate-400 rounded-lg hover:bg-slate-50 transition-colors lg:w-[130px]">
+              <span className="text-slate-500"><Icons.Timer /></span>
+              <span className="text-slate-800">1 time</span>
+            </button>
+          </div>
+        </div>
+        
+        {/* Filters */}
+        <div className="flex flex-wrap items-center gap-3">
+          <button onClick={onFiltersClick} className="flex items-center gap-2 px-4 py-2 text-blue-600 font-semibold text-sm hover:bg-blue-50 rounded-lg transition-colors">
+            <Icons.Sliders />
+            <span>Alle filtre</span>
+          </button>
+          <div className="hidden lg:flex flex-wrap gap-2">
+            <FilterDropdown label="Type" options={FILTER_OPTIONS.type} />
+            <FilterDropdown label="Faciliteter" options={FILTER_OPTIONS.facilities} />
+            <FilterDropdown label="Siddepladser" options={FILTER_OPTIONS.seats} />
+            <FilterDropdown label="Pris" options={FILTER_OPTIONS.price} />
+            <FilterDropdown label="Tilgængelighed" options={FILTER_OPTIONS.accessibility} />
+          </div>
+          <div className="lg:hidden">
+            <FilterDropdown label="Type" options={FILTER_OPTIONS.type} />
+          </div>
+        </div>
+      </section>
+    );
+
+    // ============================================================
+    // COMPONENT: SectionHeader
+    // ============================================================
+    const SectionHeader = ({ title, subtitle }) => (
+      <div className="flex flex-wrap items-start justify-between mb-2">
+        <div>
+          <h2 className="text-xl font-medium text-gray-900">{title}</h2>
+          <p className="text-sm text-gray-600">{subtitle}</p>
+        </div>
+        <button className="flex items-center gap-2 text-blue-600 font-semibold text-sm hover:underline">
+          <span>Sorteret efter bedste match</span>
+          <Icons.Sort />
+        </button>
+      </div>
+    );
+
+    // ============================================================
+    // COMPONENT: ResultRowDesktop
+    // ============================================================
+    const ResultRowDesktop = ({ item, isExpanded, onToggle, onBook, onToggleFavorite }) => (
+      <div className={`border-t border-slate-300 first:border-t-0 transition-colors ${isExpanded ? 'bg-white' : 'hover:bg-slate-50'}`}>
+        <div className="flex items-center justify-between px-5 py-4">
+          <div className="flex items-center gap-4">
+            <img src={item.image} alt={item.name} className="w-12 h-12 rounded object-cover bg-gray-200" />
+            <div className="min-w-[130px]">
+              <p className="font-medium text-lg text-gray-900">{item.name}</p>
+              <p className="text-sm text-slate-500">{item.location}</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-16 flex-1 px-8">
+            <div className="min-w-[200px]">
+              <p className="font-medium text-lg text-gray-900">{item.fullDate}</p>
+              <p className="text-sm text-slate-500">Bookingdato</p>
+            </div>
+            <div className="min-w-[80px]">
+              <p className="font-medium text-lg text-gray-900">{item.time}</p>
+              <p className="text-sm text-slate-500">Start-tid</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-3">
+            <button onClick={() => onToggleFavorite(item.id)} className="p-2 hover:bg-slate-100 rounded-full transition-colors">
+              <Icons.Star filled={item.isFavorite} />
+            </button>
+            <button onClick={() => onBook(item)} className="px-5 py-2 bg-blue-600 text-white rounded text-sm font-medium hover:bg-blue-700 transition-colors shadow-sm">Book</button>
+            <button onClick={() => onToggle(item.id)} className="p-2 hover:bg-slate-100 rounded-full transition-colors">
+              {isExpanded ? <Icons.ChevronUp /> : <Icons.ChevronDown />}
+            </button>
+          </div>
+        </div>
+        {isExpanded && (
+          <div className="px-5 py-6 border-t border-slate-200 bg-slate-50 animate-fade-in">
+            <div className="flex gap-12 mb-4">
+              <div><p className="font-semibold text-gray-900 text-lg">{item.capacity}</p><p className="text-sm text-slate-500">Personer</p></div>
+              <div><p className="font-medium text-gray-900">{item.accessibility}</p><p className="text-sm text-slate-500">Tilgængelighed</p></div>
+              <div><p className="font-medium text-gray-900">{item.equipment}</p><p className="text-sm text-slate-500">A/V Udstyr</p></div>
+            </div>
+            <p className="text-gray-700 mb-3 flex items-center gap-2"><Icons.MapPin />{item.address}</p>
+            <p className="text-gray-600 leading-relaxed">{item.description}</p>
+          </div>
+        )}
+      </div>
+    );
+
+    // ============================================================
+    // COMPONENT: ResultRowMobile
+    // ============================================================
+    const ResultRowMobile = ({ item, onBook, onToggleFavorite }) => (
+      <div className="border-t border-slate-300 first:border-t-0 px-4 py-3">
+        <div className="flex items-center gap-3">
+          <img src={item.image} alt={item.name} className="w-8 h-8 rounded object-cover bg-gray-200" />
+          <div className="flex-1 min-w-0">
+            <p className="font-medium text-base text-gray-900 truncate">{item.name}</p>
+            <p className="text-sm text-slate-500 truncate">{item.location}</p>
+          </div>
+          <button onClick={() => onToggleFavorite(item.id)} className="p-1">
+            <Icons.Star filled={item.isFavorite} />
+          </button>
+          <button onClick={() => onBook(item)} className="px-3 py-1 bg-blue-600 text-white rounded text-sm font-medium">Book</button>
+          <button className="p-1 text-slate-500"><Icons.ChevronDown /></button>
+        </div>
+        <div className="flex gap-4 mt-2 pl-11 text-sm">
+          <div><p className="font-medium text-gray-900">{item.date}</p><p className="text-slate-500">Bookingdato</p></div>
+          <div><p className="font-medium text-gray-900">{item.time}</p><p className="text-slate-500">Start-tid</p></div>
+        </div>
+      </div>
+    );
+
+    // ============================================================
+    // COMPONENT: ResultsList
+    // ============================================================
+    const ResultsList = ({ items, expandedId, onToggle, onBook, onToggleFavorite }) => (
+      <div className="border border-slate-300 rounded-lg overflow-hidden bg-white shadow-sm">
+        {/* Desktop View */}
+        <div className="hidden lg:block">
+          {items.map(item => (
+            <ResultRowDesktop key={item.id} item={item} isExpanded={expandedId === item.id} onToggle={onToggle} onBook={onBook} onToggleFavorite={onToggleFavorite} />
+          ))}
+        </div>
+        {/* Mobile View */}
+        <div className="lg:hidden">
+          {items.map(item => (
+            <ResultRowMobile key={item.id} item={item} onBook={onBook} onToggleFavorite={onToggleFavorite} />
+          ))}
+        </div>
+      </div>
+    );
+
+    // ============================================================
+    // COMPONENT: ViewToggle
+    // ============================================================
+    const ViewToggle = ({ viewMode, onViewChange }) => (
+      <div className="flex justify-end">
+        <div className="inline-flex border border-slate-300 rounded-lg overflow-hidden shadow-sm">
+          <button onClick={() => onViewChange('map')} className={`flex items-center gap-2 px-4 py-2 text-sm font-medium transition-colors ${viewMode === 'map' ? 'bg-slate-100 text-slate-900' : 'bg-white text-slate-700 hover:bg-slate-50'}`}>
+            <Icons.Map /><span>Kortvisning</span>
+          </button>
+          <button onClick={() => onViewChange('calendar')} className={`flex items-center gap-2 px-4 py-2 text-sm font-medium border-l border-slate-300 transition-colors ${viewMode === 'calendar' ? 'bg-slate-100 text-slate-900' : 'bg-white text-slate-700 hover:bg-slate-50'}`}>
+            <Icons.CalendarDays /><span>Dato oversigt</span>
+          </button>
+        </div>
+      </div>
+    );
+
+    // ============================================================
+    // COMPONENT: Footer
+    // ============================================================
+    const Footer = () => (
+      <footer className="mx-4 lg:mx-20 mt-12 mb-8 border border-slate-200 rounded-lg p-6 lg:p-8 bg-white shadow-sm">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <div>
+            <h3 className="font-bold text-lg text-gray-800 mb-2">Booking</h3>
+            <p className="text-gray-600">Ressource booking er leveret af Aarhus Kommune</p>
+          </div>
+          <div>
+            <h3 className="font-bold text-lg text-gray-800 mb-2">Samarbejdspartner</h3>
+            <p className="text-gray-600"><a href="#" className="text-blue-600 hover:underline">Log ind</a> for at få adgang til dine ressourcer.</p>
+          </div>
+        </div>
+        <div className="mt-6 pt-6 border-t border-slate-200">
+          <h3 className="font-bold text-lg text-gray-800 mb-2">Brug for hjælp?</h3>
+          <p className="text-gray-600">Ring på 86 40 20 10 (Åben hverdage 10 - 18)</p>
+        </div>
+      </footer>
+    );
+
+    // ============================================================
+    // COMPONENT: BookingModal
+    // ============================================================
+    const BookingModal = ({ item, onClose, onConfirm }) => {
+      if (!item) return null;
+      return (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 animate-fade-in p-4">
+          <div className="bg-white rounded-xl p-6 lg:p-8 max-w-md w-full shadow-2xl">
+            <div className="flex items-center gap-3 mb-6">
+              <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600"><Icons.Calendar /></div>
+              <h3 className="text-xl font-semibold text-gray-900">Bekræft booking</h3>
+            </div>
+            <div className="space-y-3 mb-6 bg-slate-50 rounded-lg p-4">
+              <div className="flex justify-between"><span className="text-slate-600">Lokale</span><span className="font-semibold text-gray-900">{item.name}</span></div>
+              <div className="flex justify-between"><span className="text-slate-600">Sted</span><span className="font-medium text-gray-900">{item.location}</span></div>
+              <div className="flex justify-between"><span className="text-slate-600">Dato</span><span className="font-medium text-gray-900">{item.fullDate}</span></div>
+              <div className="flex justify-between"><span className="text-slate-600">Tidspunkt</span><span className="font-medium text-gray-900">{item.time}</span></div>
+            </div>
+            <div className="flex gap-3">
+              <button onClick={onClose} className="flex-1 px-5 py-3 border border-slate-300 rounded-lg font-medium text-gray-700 hover:bg-slate-50 transition-colors">Annuller</button>
+              <button onClick={() => onConfirm(item)} className="flex-1 px-5 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors shadow-sm">Bekræft booking</button>
+            </div>
+          </div>
+        </div>
+      );
+    };
+
+    // ============================================================
+    // COMPONENT: SuccessToast
+    // ============================================================
+    const SuccessToast = ({ message, onClose }) => {
+      useEffect(() => { const t = setTimeout(onClose, 4000); return () => clearTimeout(t); }, [onClose]);
+      return (
+        <div className="fixed bottom-4 right-4 left-4 lg:left-auto lg:w-auto bg-green-600 text-white px-6 py-4 rounded-xl shadow-lg flex items-center gap-3 z-50 animate-slide-up">
+          <div className="w-6 h-6 bg-white/20 rounded-full flex items-center justify-center"><Icons.Check /></div>
+          <span className="font-medium">{message}</span>
+        </div>
+      );
+    };
+
+    // ============================================================
+    // MAIN APP
+    // ============================================================
+    function BookAarhusApp() {
+      const [activeTab, setActiveTab] = useState('Find ressourcer');
+      const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+      const [expandedId, setExpandedId] = useState(1);
+      const [favorites, setFavorites] = useState(FAVORITES_DATA);
+      const [popular, setPopular] = useState(POPULAR_DATA);
+      const [bookingItem, setBookingItem] = useState(null);
+      const [successMessage, setSuccessMessage] = useState('');
+      const [viewMode, setViewMode] = useState('list');
+      
+      // Overlay states
+      const [showFilters, setShowFilters] = useState(false);
+      const [showLocation, setShowLocation] = useState(false);
+      const [showDatePicker, setShowDatePicker] = useState(false);
+      const [filters, setFilters] = useState({ type: [], facilities: [], seats: [], price: [], accessibility: [] });
+      
+      const handleFilterChange = (category, value) => {
+        setFilters(prev => ({
+          ...prev,
+          [category]: prev[category].includes(value) 
+            ? prev[category].filter(v => v !== value)
+            : [...prev[category], value]
+        }));
+      };
+      
+      const handleToggleFavorite = (id) => {
+        setFavorites(favorites.map(i => i.id === id ? { ...i, isFavorite: !i.isFavorite } : i));
+        setPopular(popular.map(i => i.id === id ? { ...i, isFavorite: !i.isFavorite } : i));
+      };
+      
+      const handleConfirmBooking = (item) => {
+        setBookingItem(null);
+        setSuccessMessage(`Booking bekræftet: ${item.name} - ${item.fullDate} kl. ${item.time}`);
+      };
+
+      return (
+        <div className="min-h-screen bg-slate-100">
+          {/* Headers */}
+          <MobileHeader onMenuClick={() => setMobileMenuOpen(true)} />
+          <DesktopHeader />
+          
+          {/* Navigation */}
+          <NavigationBar activeTab={activeTab} onTabChange={setActiveTab} />
+          
+          {/* Mobile Menu */}
+          <MobileMenu isOpen={mobileMenuOpen} onClose={() => setMobileMenuOpen(false)} activeTab={activeTab} onTabChange={setActiveTab} />
+          
+          {/* Search */}
+          <SearchWrapper 
+            onLocationClick={() => setShowLocation(true)}
+            onDateClick={() => setShowDatePicker(true)}
+            onFiltersClick={() => setShowFilters(true)}
+          />
+          
+          {/* Favorites Section */}
+          <section className="mx-4 lg:mx-20 mt-6 lg:mt-8">
+            <SectionHeader title="Dine favoritter" subtitle="Dine senest valgte favoritter" />
+            <ResultsList items={favorites} expandedId={expandedId} onToggle={id => setExpandedId(expandedId === id ? null : id)} onBook={setBookingItem} onToggleFavorite={handleToggleFavorite} />
+          </section>
+          
+          {/* Popular Section */}
+          <section className="mx-4 lg:mx-20 mt-8 lg:mt-10">
+            <SectionHeader title="Populære lokaler" subtitle="Ofte brugte og udvalgte lokaler" />
+            <ResultsList items={popular} expandedId={expandedId} onToggle={id => setExpandedId(expandedId === id ? null : id)} onBook={setBookingItem} onToggleFavorite={handleToggleFavorite} />
+          </section>
+          
+          {/* View Toggle */}
+          <div className="mx-4 lg:mx-20 mt-6 lg:mt-8">
+            <ViewToggle viewMode={viewMode} onViewChange={setViewMode} />
+          </div>
+          
+          {/* Footer */}
+          <Footer />
+          
+          {/* Overlays */}
+          <OverlayFilters isOpen={showFilters} onClose={() => setShowFilters(false)} filters={filters} onFilterChange={handleFilterChange} />
+          <OverlayLocation isOpen={showLocation} onClose={() => setShowLocation(false)} onSelect={() => {}} />
+          <OverlayDatePicker isOpen={showDatePicker} onClose={() => setShowDatePicker(false)} />
+          <BookingModal item={bookingItem} onClose={() => setBookingItem(null)} onConfirm={handleConfirmBooking} />
+          
+          {/* Toast */}
+          {successMessage && <SuccessToast message={successMessage} onClose={() => setSuccessMessage('')} />}
+        </div>
+      );
+    }
+
+    // Render
+    const root = ReactDOM.createRoot(document.getElementById('root'));
+    root.render(<BookAarhusApp />);
+  </script>
+</body>
+</html>
diff --git a/docs/public/projects/book-aarhus/mocks/styles.css b/docs/public/projects/book-aarhus/mocks/styles.css
new file mode 100644
index 0000000..e862af7
--- /dev/null
+++ b/docs/public/projects/book-aarhus/mocks/styles.css
@@ -0,0 +1 @@
+/* Additional styles for Book Aarhus */
diff --git a/docs/public/projects/deltag-aarhus-timeline/mocks/index.html b/docs/public/projects/deltag-aarhus-timeline/mocks/index.html
new file mode 100644
index 0000000..3a10705
--- /dev/null
+++ b/docs/public/projects/deltag-aarhus-timeline/mocks/index.html
@@ -0,0 +1,1319 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Stationspladsen i Hjortshøj - Deltag Aarhus</title>
+  <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+  <link rel="stylesheet" href="./styles.css">
+</head>
+<body>
+  <div id="root"></div>
+  <script type="text/babel">
+    const { useState, useRef, useEffect, Fragment } = React;
+
+    const DeltagAarhusProjectPage = () => {
+      const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
+      const [viewMode, setViewMode] = useState(window.innerWidth < 768 ? 'horizontal' : 'vertical');
+      const [activeIndex, setActiveIndex] = useState(null);
+      const [hoveredIndex, setHoveredIndex] = useState(null);
+      const itemRefs = useRef([]);
+
+      // Color tokens from deltag.aarhus.dk
+      const colors = {
+        petroleum500: '#008486',
+        petroleum800: '#3d6d6d',
+        petroleum900: '#2a4a4a',
+        petroleum100: '#e5eef0',
+        petroleum200: '#cfe0e2',
+        peach100: '#f7f0e8',
+        peach200: '#e8dfd4',
+        gray100: '#f6f6f6',
+        gray200: '#eaeaea',
+        gray300: '#e6e6e6',
+        gray400: '#dfdfdf',
+        gray600: '#9d9d9d',
+        gray700: '#858585',
+        gray800: '#525252',
+        gray900: '#333',
+        white: '#fff',
+        black: '#333',
+        orange500: '#ff5f31',
+        orange200: '#ffcfc1',
+        pink500: '#e91e63',
+        pink200: '#f8bbd9',
+        pink100: '#fce4ec',
+        note500: '#3661D8',    // Editor annotation blue
+        note200: '#c4d4f5',    // Light blue for backgrounds
+      };
+
+      // Using placeholder images - in production these would be actual URLs
+      const images = {
+        logo: 'https://deltag.aarhus.dk/themes/custom/hoeringsportal/static/images/AAK_02_venstrejusteret_sh.svg',
+        logoWhite: 'https://deltag.aarhus.dk/themes/custom/hoeringsportal/static/images/AAK_02_venstrejusteret_hvid.svg',
+        hero: 'https://deltag.aarhus.dk/sites/default/files/images/IMG_1251_cropped_0.jpg',
+        gaatur: 'https://deltag.aarhus.dk/sites/default/files/styles/responsive_small_teaser/public/images/IMG_1064_cropped.jpg',
+        workshop: 'https://deltag.aarhus.dk/sites/default/files/styles/responsive_small_teaser/public/images/IMG_1227%20%281%29%20-%20cropped.jpg',
+        popup: 'https://deltag.aarhus.dk/sites/default/files/styles/responsive_small_teaser/public/images/Billede3.jpg',
+        digital: 'https://deltag.aarhus.dk/sites/default/files/styles/responsive_small_teaser/public/images/Kategorier_stor_0.png',
+      };
+
+      const baseUrl = 'https://deltag.aarhus.dk';
+
+      const timelineData = [
+        {
+          id: 1,
+          date: '2023',
+          month: 'August',
+          title: 'Udpegning',
+          subtitle: 'Dialog',
+          description: 'Hjortshøj Stationsplads udpeges som ét af 13 byrum i Aarhus Kommunes Strategiske Byrumsplan.',
+          type: 'milestone',
+          status: 'completed',
+          icon: '📍',
+          image: null,
+          link: 'https://aarhus.dk/nyt/teknik-og-miljoe/2023/august-2023/raadmand-vil-puste-nyt-liv-i-13-af-byens-rum',
+          linkText: 'Læs om byrumsplanen'
+        },
+        {
+          id: 2,
+          date: '2025',
+          month: 'April',
+          title: 'Dialog med Fællesråd',
+          subtitle: 'Dialog',
+          description: 'Gåtur på Stationspladsen og efterfølgende møde om stedets identitet og potentialer med fællesrådet.',
+          type: 'meeting',
+          status: 'completed',
+          icon: '🚶',
+          image: images.gaatur,
+          link: `${baseUrl}/public_meeting/1296`,
+          linkText: 'Se detaljer om mødet'
+        },
+        {
+          id: 3,
+          date: '2025',
+          month: 'August',
+          title: 'Workshop med Virupskolen',
+          subtitle: 'Begivenhed',
+          description: 'Formiddag sammen med skoleelever fra Virupskolen om fremtidens stationsplads.',
+          type: 'workshop',
+          status: 'completed',
+          icon: '🎨',
+          image: images.workshop,
+          link: `${baseUrl}/public_meeting/1298`,
+          linkText: 'Se workshoppen',
+          accentColor: 'pink'
+        },
+        {
+          id: 4,
+          date: '2025',
+          month: 'August',
+          title: 'Pop-up Dialog',
+          subtitle: 'Dialog',
+          description: 'Pop-up og kaffe på Stationspladsen med borgere. Mange gode input fra det brede lokale borgerperspektiv.',
+          type: 'event',
+          status: 'completed',
+          icon: '☕',
+          image: images.popup,
+          link: `${baseUrl}/public_meeting/1212`,
+          linkText: 'Se pop-up dialogen'
+        },
+        {
+          id: 5,
+          date: '2025',
+          month: 'September',
+          title: 'Digital Dialog',
+          subtitle: 'Høring',
+          description: 'Mulighed for at berige og kvalificere de identificerede temaer, samt komme med supplerende nye input.',
+          type: 'digital',
+          status: 'completed',
+          icon: '💬',
+          image: images.digital,
+          link: `${baseUrl}/public_meeting/1299`,
+          linkText: 'Se den digitale dialog'
+        },
+        {
+          id: 6,
+          date: '2025',
+          month: 'Oktober',
+          title: 'Udarbejdelse af Forslag',
+          subtitle: 'Dialog',
+          description: 'De mange input danner fundament for udarbejdelse af et forslag til omdannelsen af Hjortshøj Stationsplads.',
+          type: 'planning',
+          status: 'current',
+          icon: '📐',
+          image: null,
+          link: null,
+          linkText: null
+        },
+        {
+          id: 9,
+          date: '2025',
+          month: 'Oktober',
+          title: 'Redaktionel bemærkning',
+          subtitle: 'Note',
+          description: 'Dette er en redaktionel note fra projektteamet med vigtig information om projektet.',
+          type: 'note',
+          status: 'note',
+          icon: '📝',
+          image: null,
+          link: null,
+          linkText: null,
+          accentColor: 'blue'
+        },
+        {
+          id: 7,
+          date: '2026',
+          month: 'Januar',
+          title: 'Offentlig Høring',
+          subtitle: 'Høring',
+          description: 'Forslaget til omdannelse af Stationspladsen sendes i offentlig høring.',
+          type: 'hearing',
+          status: 'upcoming',
+          icon: '📢',
+          image: null,
+          link: null,
+          linkText: null
+        },
+        {
+          id: 8,
+          date: '2027',
+          month: 'Januar',
+          title: 'Realisering',
+          subtitle: 'Note',
+          description: 'Omdannelsen af Hjortshøj Stationsplads realiseres.',
+          type: 'construction',
+          status: 'upcoming',
+          icon: '🏗️',
+          image: null,
+          link: null,
+          linkText: null
+        }
+      ];
+
+      const currentItemIndex = timelineData.findIndex(item => item.status === 'current');
+
+      const getStatusColor = (status, accentColor) => {
+        if (accentColor === 'pink') return colors.pink500;
+        if (accentColor === 'blue') return colors.note500;
+        switch (status) {
+          case 'completed': return colors.petroleum500;
+          case 'current': return colors.orange500;
+          case 'upcoming': return colors.gray600;
+          case 'note': return colors.note500;
+          default: return colors.gray600;
+        }
+      };
+
+      const getStatusBg = (status, accentColor) => {
+        if (accentColor === 'pink') return colors.pink100;
+        if (accentColor === 'blue') return colors.note200;
+        switch (status) {
+          case 'completed': return colors.petroleum100;
+          case 'current': return colors.gray100;
+          case 'upcoming': return colors.gray200;
+          case 'note': return colors.note200;
+          default: return colors.gray200;
+        }
+      };
+
+      const scrollToItem = (index) => {
+        if (itemRefs.current[index]) {
+          itemRefs.current[index].scrollIntoView({ behavior: 'smooth', block: 'center' });
+          setActiveIndex(index);
+        }
+      };
+
+      // Track which timeline item is visible on scroll
+      useEffect(() => {
+        const handleScroll = () => {
+          const viewportCenter = window.innerHeight / 2;
+          let closestIndex = null;
+          let closestDistance = Infinity;
+
+          itemRefs.current.forEach((ref, index) => {
+            if (ref) {
+              const rect = ref.getBoundingClientRect();
+              const itemCenter = rect.top + rect.height / 2;
+              const distance = Math.abs(itemCenter - viewportCenter);
+
+              if (distance < closestDistance) {
+                closestDistance = distance;
+                closestIndex = index;
+              }
+            }
+          });
+
+          if (closestIndex !== null && closestDistance < window.innerHeight) {
+            setActiveIndex(closestIndex);
+          }
+        };
+
+        window.addEventListener('scroll', handleScroll);
+        return () => window.removeEventListener('scroll', handleScroll);
+      }, []);
+
+      // Handle window resize for mobile detection
+      useEffect(() => {
+        const handleResize = () => {
+          setIsMobile(window.innerWidth < 768);
+        };
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+      }, []);
+
+      // Mini Timeline Navigation
+      const MiniTimeline = () => (
+        <div style={{
+          position: 'fixed',
+          right: '20px',
+          top: '50%',
+          transform: 'translateY(-50%)',
+          zIndex: 100,
+          display: viewMode === 'vertical' && !isMobile ? 'flex' : 'none',
+          flexDirection: 'column',
+          alignItems: 'center',
+          padding: '16px 10px',
+          background: colors.white,
+          boxShadow: '0 2px 12px rgba(0, 0, 0, 0.12)',
+          border: `1px solid ${colors.gray300}`
+        }}>
+          <div style={{
+            fontSize: '9px',
+            fontWeight: '600',
+            color: colors.petroleum500,
+            letterSpacing: '0.08em',
+            textTransform: 'uppercase',
+            marginBottom: '12px',
+            writingMode: 'vertical-rl',
+            transform: 'rotate(180deg)'
+          }}>
+            Tidslinje
+          </div>
+
+          {timelineData.map((item, index) => (
+            <Fragment key={item.id}>
+              <button
+                onClick={() => scrollToItem(index)}
+                onMouseEnter={() => setHoveredIndex(index)}
+                onMouseLeave={() => setHoveredIndex(null)}
+                style={{
+                  width: '10px',
+                  height: '10px',
+                  borderRadius: '50%',
+                  border: item.status === 'current'
+                    ? `2px solid ${colors.orange500}`
+                    : activeIndex === index
+                    ? `2px solid ${getStatusColor(item.status, item.accentColor)}`
+                    : 'none',
+                  background: item.status === 'current'
+                    ? colors.white
+                    : activeIndex === index
+                    ? colors.white
+                    : getStatusColor(item.status, item.accentColor),
+                  cursor: 'pointer',
+                  transition: 'all 0.2s ease',
+                  transform: hoveredIndex === index ? 'scale(1.3)' : 'scale(1)',
+                  position: 'relative',
+                  outline: activeIndex === index
+                    ? `2px solid ${item.status === 'current' ? colors.orange200 : (item.status === 'note' ? colors.note200 : colors.petroleum200)}`
+                    : 'none',
+                  outlineOffset: '2px'
+                }}
+                title={item.title}
+              >
+                {hoveredIndex === index && (
+                  <div style={{
+                    position: 'absolute',
+                    right: '20px',
+                    top: '50%',
+                    transform: 'translateY(-50%)',
+                    background: colors.gray900,
+                    color: colors.white,
+                    padding: '6px 10px',
+                    fontSize: '11px',
+                    fontWeight: '500',
+                    whiteSpace: 'nowrap'
+                  }}>
+                    {item.title}
+                  </div>
+                )}
+              </button>
+              {index < timelineData.length - 1 && (
+                <div style={{
+                  width: '2px',
+                  height: '16px',
+                  background: index < currentItemIndex
+                    ? colors.gray800
+                    : index === currentItemIndex
+                    ? `linear-gradient(180deg, ${colors.gray800} 0%, ${colors.gray300} 100%)`
+                    : colors.gray300
+                }} />
+              )}
+            </Fragment>
+          ))}
+
+          <div style={{
+            marginTop: '12px',
+            fontSize: '9px',
+            color: colors.gray700,
+            textAlign: 'center'
+          }}>
+            <div style={{
+              width: '10px',
+              height: '10px',
+              borderRadius: '50%',
+              border: `2px solid ${colors.orange500}`,
+              background: colors.white,
+              margin: '0 auto 4px'
+            }} />
+            <div>I dag</div>
+          </div>
+        </div>
+      );
+
+      // Vertical Timeline
+      const VerticalTimeline = () => (
+        <div style={{
+          position: 'relative',
+          padding: isMobile ? '24px 0' : '40px 0 120px',
+          maxWidth: '900px',
+          margin: '0 auto'
+        }}>
+          {/* Timeline line */}
+          <div style={{
+            position: 'absolute',
+            left: isMobile ? '16px' : '50%',
+            top: '0',
+            bottom: '0',
+            width: '2px',
+            background: `linear-gradient(180deg, ${colors.gray800} 0%, ${colors.gray800} 72%, ${colors.gray300} 80%, ${colors.gray300} 100%)`,
+            transform: isMobile ? 'none' : 'translateX(-50%)'
+          }} />
+
+          {timelineData.map((item, index) => {
+            const isLeft = !isMobile && index % 2 === 0;
+            const isFirst = index === 0;
+            const isLast = index === timelineData.length - 1;
+
+            return (
+              <div
+                key={item.id}
+                ref={el => itemRefs.current[index] = el}
+                style={{
+                  display: 'flex',
+                  justifyContent: isMobile ? 'flex-end' : (isLeft ? 'flex-start' : 'flex-end'),
+                  position: 'relative',
+                  marginBottom: isMobile ? '24px' : (isLast ? '0' : '-60px'),
+                  marginTop: isMobile ? '0' : (isFirst ? '0' : '0'),
+                  opacity: item.status === 'upcoming' ? 0.6 : 1,
+                  paddingLeft: isMobile ? '40px' : 0,
+                  zIndex: timelineData.length - index
+                }}
+              >
+                {/* Timeline dot */}
+                <div style={{
+                  position: 'absolute',
+                  left: isMobile ? '10px' : '50%',
+                  top: item.image ? '60px' : '24px',
+                  transform: isMobile ? 'none' : 'translateX(-50%)',
+                  width: '12px',
+                  height: '12px',
+                  borderRadius: '50%',
+                  background: item.status === 'current' ? colors.white : getStatusColor(item.status, item.accentColor),
+                  border: item.status === 'current' ? `2px solid ${colors.orange500}` : `3px solid ${colors.white}`,
+                  boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
+                  zIndex: 10
+                }} />
+
+                {/* Card */}
+                <div style={{
+                  width: isMobile ? '100%' : 'calc(50% - 32px)',
+                  background: colors.white,
+                  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
+                  border: `1px solid ${colors.gray300}`,
+                  transition: 'all 0.2s ease',
+                  position: 'relative',
+                  overflow: 'hidden'
+                }}
+                onMouseEnter={(e) => e.currentTarget.style.boxShadow = '0 4px 16px rgba(0, 0, 0, 0.12)'}
+                onMouseLeave={(e) => e.currentTarget.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.08)'}
+                >
+                  {item.image && (
+                    <div style={{
+                      width: '100%',
+                      height: isMobile ? '120px' : '140px',
+                      background: `url(${item.image}) center center / cover no-repeat`,
+                      borderBottom: `1px solid ${colors.gray200}`
+                    }} />
+                  )}
+
+                  {/* Accent bar */}
+                  <div style={{
+                    position: 'absolute',
+                    top: item.image ? (isMobile ? '120px' : '140px') : 0,
+                    [isMobile ? 'left' : (isLeft ? 'right' : 'left')]: 0,
+                    width: '4px',
+                    height: item.image ? (isMobile ? 'calc(100% - 120px)' : 'calc(100% - 140px)') : '100%',
+                    background: getStatusColor(item.status, item.accentColor)
+                  }} />
+
+                  <div style={{ padding: isMobile ? '16px' : '20px 24px' }}>
+                    <div style={{
+                      display: 'inline-flex',
+                      alignItems: 'center',
+                      gap: '6px',
+                      padding: '4px 10px',
+                      background: getStatusBg(item.status, item.accentColor),
+                      color: item.accentColor === 'pink' ? colors.pink500 : (item.accentColor === 'blue' ? colors.note500 : colors.petroleum800),
+                      fontSize: isMobile ? '11px' : '12px',
+                      fontWeight: '600',
+                      marginBottom: '12px'
+                    }}>
+                      <span>{item.month ? `${item.month} ${item.date}` : item.date}</span>
+                    </div>
+
+                    {item.status === 'current' && (
+                      <div style={{
+                        position: 'absolute',
+                        top: item.image ? (isMobile ? '128px' : '148px') : '8px',
+                        right: '12px',
+                        padding: '3px 8px',
+                        background: colors.orange500,
+                        border: 'none',
+                        color: colors.white,
+                        fontSize: '10px',
+                        fontWeight: '600',
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.04em'
+                      }}>
+                        I gang
+                      </div>
+                    )}
+
+                    {item.status === 'note' && (
+                      <div style={{
+                        position: 'absolute',
+                        top: item.image ? (isMobile ? '128px' : '148px') : '8px',
+                        right: '12px',
+                        padding: '3px 8px',
+                        background: colors.note500,
+                        border: 'none',
+                        color: colors.white,
+                        fontSize: '10px',
+                        fontWeight: '600',
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.04em'
+                      }}>
+                        Note
+                      </div>
+                    )}
+
+                    {item.status === 'completed' && (
+                      <div style={{
+                        position: 'absolute',
+                        top: item.image ? (isMobile ? '128px' : '148px') : '8px',
+                        right: '12px',
+                        padding: '3px 8px',
+                        background: getStatusColor(item.status, item.accentColor),
+                        border: 'none',
+                        color: colors.white,
+                        fontSize: '10px',
+                        fontWeight: '600',
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.04em'
+                      }}>
+                        ✓ Afsluttet
+                      </div>
+                    )}
+
+                    <h3 style={{
+                      margin: '0 0 4px 0',
+                      fontSize: isMobile ? '15px' : '17px',
+                      fontWeight: '700',
+                      color: colors.black
+                    }}>
+                      {item.title}
+                    </h3>
+
+                    <p style={{
+                      margin: '0 0 10px 0',
+                      fontSize: isMobile ? '11px' : '12px',
+                      fontWeight: '600',
+                      color: getStatusColor(item.status, item.accentColor),
+                      textTransform: 'uppercase',
+                      letterSpacing: '0.03em'
+                    }}>
+                      {item.subtitle}
+                    </p>
+
+                    <p style={{
+                      margin: 0,
+                      fontSize: isMobile ? '13px' : '14px',
+                      lineHeight: '1.55',
+                      color: colors.gray800
+                    }}>
+                      {item.description}
+                    </p>
+
+                    {item.link && (
+                      <a
+                        href={item.link}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        style={{
+                          display: 'inline-flex',
+                          alignItems: 'center',
+                          gap: '6px',
+                          marginTop: '16px',
+                          padding: isMobile ? '6px 12px' : '8px 14px',
+                          background: getStatusColor(item.status, item.accentColor),
+                          color: colors.white,
+                          fontSize: isMobile ? '12px' : '13px',
+                          fontWeight: '600',
+                          textDecoration: 'none',
+                          transition: 'background 0.2s ease'
+                        }}
+                        onMouseEnter={(e) => e.currentTarget.style.background = item.accentColor === 'pink' ? '#c2185b' : (item.accentColor === 'blue' ? '#2a4db5' : colors.petroleum800)}
+                        onMouseLeave={(e) => e.currentTarget.style.background = getStatusColor(item.status, item.accentColor)}
+                      >
+                        {item.linkText}
+                        <span>→</span>
+                      </a>
+                    )}
+                  </div>
+                </div>
+
+                {/* Connector line from card to dot */}
+                {!isMobile && (
+                  <div style={{
+                    position: 'absolute',
+                    top: item.image ? '65px' : '29px',
+                    left: isLeft ? 'calc(50% - 32px)' : '50%',
+                    width: '32px',
+                    height: '2px',
+                    background: item.status === 'current' ? colors.orange500 : getStatusColor(item.status, item.accentColor)
+                  }} />
+                )}
+              </div>
+            );
+          })}
+        </div>
+      );
+
+      // Horizontal Timeline
+      const HorizontalTimeline = () => {
+        const [currentSlide, setCurrentSlide] = useState(currentItemIndex);
+        const nextSlide = () => setCurrentSlide(prev => Math.min(prev + 1, timelineData.length - 1));
+        const prevSlide = () => setCurrentSlide(prev => Math.max(prev - 1, 0));
+
+        return (
+          <div style={{ maxWidth: '900px', margin: '0 auto', padding: '24px 0' }}>
+            <div style={{
+              position: 'relative',
+              height: '4px',
+              background: colors.gray300,
+              marginBottom: '24px'
+            }}>
+              <div style={{
+                position: 'absolute',
+                left: 0,
+                top: 0,
+                height: '100%',
+                width: `${((currentSlide + 1) / timelineData.length) * 100}%`,
+                background: colors.petroleum500,
+                transition: 'width 0.4s ease'
+              }} />
+            </div>
+
+            <div style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              marginBottom: '32px',
+              padding: '0 8px'
+            }}>
+              {timelineData.map((item, index) => (
+                <button
+                  key={item.id}
+                  onClick={() => setCurrentSlide(index)}
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: '6px',
+                    background: 'none',
+                    border: 'none',
+                    cursor: 'pointer',
+                    opacity: currentSlide === index ? 1 : 0.4,
+                    transition: 'all 0.2s ease'
+                  }}
+                >
+                  <div style={{
+                    width: item.status === 'current' ? '12px' : '10px',
+                    height: item.status === 'current' ? '12px' : '10px',
+                    borderRadius: '50%',
+                    background: item.status === 'current' ? colors.white : (currentSlide === index ? getStatusColor(item.status) : colors.gray400),
+                    border: item.status === 'current' ? `2px solid ${colors.orange500}` : 'none',
+                    transition: 'all 0.2s ease'
+                  }} />
+                  <span style={{
+                    fontSize: '10px',
+                    fontWeight: '600',
+                    color: currentSlide === index ? colors.black : colors.gray600,
+                    whiteSpace: 'nowrap'
+                  }}>
+                    {item.date}
+                  </span>
+                </button>
+              ))}
+            </div>
+
+            <div style={{ overflow: 'hidden' }}>
+              <div style={{
+                display: 'flex',
+                transition: 'transform 0.4s ease',
+                transform: `translateX(-${currentSlide * 100}%)`
+              }}>
+                {timelineData.map((item) => (
+                  <div key={item.id} style={{ minWidth: '100%', padding: '0 8px', boxSizing: 'border-box' }}>
+                    <div style={{
+                      display: 'flex',
+                      flexDirection: isMobile ? 'column' : 'row',
+                      background: colors.white,
+                      border: `1px solid ${colors.gray300}`,
+                      minHeight: isMobile ? 'auto' : '280px',
+                      position: 'relative',
+                      overflow: 'hidden'
+                    }}>
+                      {item.status === 'current' && (
+                        <div style={{
+                          position: 'absolute',
+                          top: 0,
+                          left: 0,
+                          width: isMobile ? '100%' : '4px',
+                          height: isMobile ? '4px' : '100%',
+                          background: colors.orange500
+                        }} />
+                      )}
+
+                      {item.image && (
+                        <div style={{
+                          width: isMobile ? '100%' : '40%',
+                          height: isMobile ? '160px' : 'auto',
+                          minHeight: isMobile ? '160px' : '280px',
+                          background: `url(${item.image}) center center / cover no-repeat`
+                        }} />
+                      )}
+
+                      <div style={{
+                        width: isMobile ? '100%' : (item.image ? '60%' : '100%'),
+                        padding: isMobile ? '16px' : '48px 36px 32px',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'center'
+                      }}>
+                        <div style={{
+                          position: 'absolute',
+                          top: isMobile ? (item.image ? '168px' : '8px') : '16px',
+                          right: isMobile ? '12px' : '20px',
+                          padding: isMobile ? '3px 8px' : '5px 12px',
+                          background: item.status === 'current' ? colors.orange500
+                            : item.status === 'completed' ? colors.petroleum500
+                            : item.status === 'note' ? colors.note500
+                            : colors.gray600,
+                          border: 'none',
+                          color: colors.white,
+                          fontSize: isMobile ? '10px' : '11px',
+                          fontWeight: '600',
+                          textTransform: 'uppercase',
+                          letterSpacing: '0.04em'
+                        }}>
+                          {item.status === 'current' ? 'I gang'
+                            : item.status === 'completed' ? '✓ Afsluttet'
+                            : item.status === 'note' ? 'Note'
+                            : 'Kommende'}
+                        </div>
+
+                        <div style={{
+                          marginBottom: isMobile ? '8px' : '14px'
+                        }}>
+                          <span style={{
+                            fontSize: isMobile ? '11px' : '13px',
+                            fontWeight: '600',
+                            color: getStatusColor(item.status),
+                            textTransform: 'uppercase',
+                            letterSpacing: '0.05em'
+                          }}>
+                            {item.month ? `${item.month} ${item.date}` : item.date}
+                          </span>
+                        </div>
+
+                        <h2 style={{
+                          margin: '0 0 6px 0',
+                          fontSize: isMobile ? '18px' : '26px',
+                          fontWeight: '700',
+                          color: colors.black
+                        }}>
+                          {item.title}
+                        </h2>
+
+                        <p style={{
+                          margin: '0 0 12px 0',
+                          fontSize: isMobile ? '11px' : '14px',
+                          fontWeight: '600',
+                          color: getStatusColor(item.status),
+                          textTransform: 'uppercase',
+                          letterSpacing: '0.03em'
+                        }}>
+                          {item.subtitle}
+                        </p>
+
+                        <p style={{
+                          margin: 0,
+                          fontSize: isMobile ? '13px' : '15px',
+                          lineHeight: '1.6',
+                          color: colors.gray800
+                        }}>
+                          {item.description}
+                        </p>
+
+                        {item.link && (
+                          <a
+                            href={item.link}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            style={{
+                              display: 'inline-flex',
+                              alignItems: 'center',
+                              gap: '6px',
+                              marginTop: isMobile ? '12px' : '20px',
+                              padding: isMobile ? '8px 14px' : '10px 18px',
+                              background: colors.petroleum500,
+                              color: colors.white,
+                              fontSize: isMobile ? '13px' : '14px',
+                              fontWeight: '600',
+                              textDecoration: 'none',
+                              alignSelf: 'flex-start',
+                              transition: 'background 0.2s ease'
+                            }}
+                            onMouseEnter={(e) => e.currentTarget.style.background = colors.petroleum800}
+                            onMouseLeave={(e) => e.currentTarget.style.background = colors.petroleum500}
+                          >
+                            {item.linkText}
+                            <span>→</span>
+                          </a>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div style={{
+              display: 'flex',
+              justifyContent: 'center',
+              gap: '16px',
+              marginTop: '28px'
+            }}>
+              <button
+                onClick={prevSlide}
+                disabled={currentSlide === 0}
+                style={{
+                  width: '48px',
+                  height: '48px',
+                  border: 'none',
+                  background: currentSlide === 0 ? colors.gray200 : colors.petroleum500,
+                  color: currentSlide === 0 ? colors.gray600 : colors.white,
+                  cursor: currentSlide === 0 ? 'not-allowed' : 'pointer',
+                  fontSize: '20px',
+                  transition: 'all 0.2s ease'
+                }}
+              >
+                ←
+              </button>
+
+              <div style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '6px',
+                color: colors.gray700,
+                fontSize: '14px',
+                fontWeight: '500'
+              }}>
+                <span style={{ fontWeight: '700', color: colors.black }}>{currentSlide + 1}</span>
+                <span>/</span>
+                <span>{timelineData.length}</span>
+              </div>
+
+              <button
+                onClick={nextSlide}
+                disabled={currentSlide === timelineData.length - 1}
+                style={{
+                  width: '48px',
+                  height: '48px',
+                  border: 'none',
+                  background: currentSlide === timelineData.length - 1 ? colors.gray200 : colors.petroleum500,
+                  color: currentSlide === timelineData.length - 1 ? colors.gray600 : colors.white,
+                  cursor: currentSlide === timelineData.length - 1 ? 'not-allowed' : 'pointer',
+                  fontSize: '20px',
+                  transition: 'all 0.2s ease'
+                }}
+              >
+                →
+              </button>
+            </div>
+          </div>
+        );
+      };
+
+      return (
+        <div style={{ fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, sans-serif', background: colors.white }}>
+          <style>{`
+            * { box-sizing: border-box; margin: 0; padding: 0; }
+            a { text-decoration: none; }
+            a:hover { text-decoration: underline; }
+          `}</style>
+
+          {/* Header - exact match to deltag.aarhus.dk */}
+          <header style={{
+            position: 'relative',
+            zIndex: 10,
+            background: colors.white
+          }}>
+            {/* Top bar with secondary nav */}
+            <div style={{
+              display: 'flex',
+              justifyContent: 'flex-end',
+              padding: '10px 40px',
+              gap: '24px',
+              fontSize: '14px'
+            }}>
+              <a href="https://aarhus.dk/borgerinddragelse" style={{ color: colors.black, textDecoration: 'none' }}>
+                Om inddragelse i byudvikling
+              </a>
+              <a href="/nyhedsbrev" style={{ color: colors.black, textDecoration: 'none' }}>
+                Nyhedsbrev
+              </a>
+            </div>
+
+            {/* Main navigation bar */}
+            <div style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              padding: '12px 40px 20px'
+            }}>
+              {/* Logo */}
+              <a href="/" style={{ display: 'block' }}>
+                <img
+                  src={images.logo}
+                  alt="Aarhus Kommune"
+                  style={{ height: '50px', width: 'auto' }}
+                />
+              </a>
+
+              {/* Primary navigation */}
+              <nav style={{ display: 'flex', alignItems: 'center', gap: '28px' }}>
+                <a href="/hoering" style={{ color: colors.black, fontSize: '16px', fontWeight: '500', textDecoration: 'none' }}>
+                  Høringer
+                </a>
+                <a href="/begivenheder" style={{ color: colors.black, fontSize: '16px', fontWeight: '500', textDecoration: 'none' }}>
+                  Begivenheder
+                </a>
+                <a href="/borgerforslag" style={{ color: colors.black, fontSize: '16px', fontWeight: '500', textDecoration: 'none' }}>
+                  Borgerforslag
+                </a>
+                <a href="/afgoerelser" style={{ color: colors.black, fontSize: '16px', fontWeight: '500', textDecoration: 'none' }}>
+                  Afgørelser <span style={{ fontSize: '12px', fontWeight: '400' }}>(ny)</span>
+                </a>
+                <a href="/dialogforum" style={{ color: colors.black, fontSize: '16px', fontWeight: '500', textDecoration: 'none' }}>
+                  Dialogforum <span style={{ fontSize: '12px', fontWeight: '400' }}>(ny)</span>
+                </a>
+                <a href="/projektsider" style={{ color: colors.black, fontSize: '16px', fontWeight: '500', textDecoration: 'none' }}>
+                  Projektsider
+                </a>
+                <a href="/search" style={{ color: colors.petroleum500, textDecoration: 'none', marginLeft: '8px' }}>
+                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                    <circle cx="11" cy="11" r="8"/>
+                    <path d="m21 21-4.35-4.35"/>
+                  </svg>
+                </a>
+              </nav>
+            </div>
+          </header>
+
+          {/* Hero section with overlapping content card */}
+          <div style={{ position: 'relative' }}>
+            {/* Hero image */}
+            <div style={{
+              width: '100%',
+              height: '380px',
+              background: `url(${images.hero}) center center / cover no-repeat`
+            }} />
+
+            {/* Content card overlapping the hero */}
+            <div style={{
+              position: 'relative',
+              maxWidth: '1100px',
+              margin: '-120px auto 0',
+              padding: isMobile ? '0 16px' : '0 40px'
+            }}>
+              <div style={{
+                background: colors.peach100,
+                padding: isMobile ? '32px 20px' : '48px 56px 56px'
+              }}>
+                <div style={{
+                  fontSize: '14px',
+                  color: colors.gray800,
+                  marginBottom: '16px'
+                }}>
+                  Udviklingsprojekter
+                </div>
+
+                <h1 style={{
+                  fontSize: '42px',
+                  fontWeight: '700',
+                  color: colors.black,
+                  margin: '0 0 28px 0',
+                  lineHeight: '1.15'
+                }}>
+                  Stationspladsen i Hjortshøj
+                </h1>
+
+                <div style={{
+                  fontSize: '17px',
+                  lineHeight: '1.7',
+                  color: colors.black,
+                  maxWidth: '680px'
+                }}>
+                  <p style={{ margin: '0 0 20px 0' }}>
+                    I 2023 blev Hjortshøj Stationsplads udpeget som et af 13 byrum i Aarhus Kommunes Strategiske Byrumsplan, og i 2025 gik startskuddet til, at vi i Teknik og Miljø kunne gå i gang med en proces om omdannelse af Stationspladsen i Hjortshøj.
+                  </p>
+                  <p style={{ margin: 0 }}>
+                    På baggrund af dette, har vi i løbet af 2025 kørt en borgerdialog, som skal være fundament for at udarbejde et forslag til omdannelse af stationspladsen.
+                  </p>
+                </div>
+
+                <div style={{
+                  marginTop: '40px',
+                  fontSize: '15px',
+                  color: colors.gray800
+                }}>
+                  Hjortshøj
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Main content */}
+          <main style={{ maxWidth: '1100px', margin: '0 auto', padding: isMobile ? '32px 16px' : '48px 40px' }}>
+            {/* Status section */}
+            <section style={{ marginBottom: '48px' }}>
+              <h2 style={{
+                fontSize: '24px',
+                fontWeight: '700',
+                color: colors.black,
+                margin: '0 0 20px 0'
+              }}>
+                Status
+              </h2>
+              <div style={{ display: 'flex', gap: '40px', alignItems: 'flex-start' }}>
+                <div style={{ flex: '1', fontSize: '16px', lineHeight: '1.75', color: colors.gray800 }}>
+                  <p style={{ margin: '0 0 16px 0' }}>
+                    I foråret 2025 påbegyndte vi dialogen med fællesrådet (Hjortshøj Landsbyforum) - en god gåtur på Stationspladsen og et efterfølgende møde om stedets identitet og potentialer har været afsættet til en bredere dialog i Hjortshøj.
+                  </p>
+                  <p style={{ margin: '0 0 16px 0' }}>
+                    I august 2025 havde vi en rigtig god formiddag sammen med skoleelever fra Virupskolen samt efterfølgende 'pop-up og kaffe' på Stationspladsen, hvor vi fik rigtig mange gode input med os hjem - både fra et børne- og unge perspektiv, men også fra det brede lokale borgerperspektiv.
+                  </p>
+                  <p style={{ margin: '0 0 16px 0' }}>
+                    Vi har efterfølgende samlet sammen på de mange gode input, vi har fået på tværs af dialogerne, og her ud fra skabt nogle opsamlende temaer. Disse temaer har været sat i spil i en digital dialog, hvor der i september 2025 har været mulighed for at berige og kvalificere de identificerede temaer, samt komme med supplerende nye input.
+                  </p>
+                  <p style={{ margin: '0 0 16px 0' }}>
+                    Vi siger mange tak for de rigtig mange gode input!
+                  </p>
+                  <p style={{ margin: 0 }}>
+                    Nu tager vi de mange input med os videre som fundament for udarbejdelse af et forslag til omdannelsen af Hjortshøj Stationsplads.
+                  </p>
+                </div>
+                <div style={{
+                  flexShrink: 0,
+                  width: '280px',
+                  background: colors.petroleum100,
+                  padding: '24px 28px',
+                  fontSize: '15px',
+                  color: colors.gray800,
+                  lineHeight: '1.6'
+                }}>
+                  <div style={{ color: colors.petroleum500, marginBottom: '8px' }}>Teknik og Miljø</div>
+                  <div style={{ fontWeight: '700', color: colors.black, marginBottom: '12px' }}>Medborgerskab</div>
+                  <div>E-mail: <a href="mailto:medborgerskab@mtm.aarhus.dk" style={{ color: colors.petroleum500 }}>medborgerskab@mtm.aarhus.dk</a></div>
+                </div>
+              </div>
+            </section>
+
+            {/* TIMELINE SECTION */}
+            <section style={{ marginBottom: '48px' }}>
+              <div style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                marginBottom: '20px',
+                flexWrap: 'wrap',
+                gap: '16px'
+              }}>
+                <h2 style={{
+                  fontSize: '24px',
+                  fontWeight: '700',
+                  color: colors.black,
+                  margin: 0
+                }}>
+                  Projektets tidslinje
+                </h2>
+
+                <div style={{
+                  display: 'inline-flex',
+                  background: colors.gray100,
+                  padding: '4px'
+                }}>
+                  <button
+                    onClick={() => setViewMode('vertical')}
+                    style={{
+                      padding: '8px 16px',
+                      border: 'none',
+                      background: viewMode === 'vertical' ? colors.petroleum500 : 'transparent',
+                      color: viewMode === 'vertical' ? colors.white : colors.gray800,
+                      cursor: 'pointer',
+                      fontSize: '13px',
+                      fontWeight: '600',
+                      transition: 'all 0.2s ease',
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '6px'
+                    }}
+                  >
+                    <span style={{ lineHeight: 1, fontSize: '14px' }}>↕</span>
+                    <span>Vertikal</span>
+                  </button>
+                  <button
+                    onClick={() => setViewMode('horizontal')}
+                    style={{
+                      padding: '8px 16px',
+                      border: 'none',
+                      background: viewMode === 'horizontal' ? colors.petroleum500 : 'transparent',
+                      color: viewMode === 'horizontal' ? colors.white : colors.gray800,
+                      cursor: 'pointer',
+                      fontSize: '13px',
+                      fontWeight: '600',
+                      transition: 'all 0.2s ease',
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '6px'
+                    }}
+                  >
+                    <span style={{ lineHeight: 1, fontSize: '14px' }}>↔</span>
+                    <span>Horisontal</span>
+                  </button>
+                </div>
+              </div>
+
+              <p style={{
+                fontSize: '16px',
+                color: colors.gray700,
+                marginBottom: '24px',
+                maxWidth: '600px'
+              }}>
+                Følg med i inddragelsesprocessen og se hvordan dit input former fremtidens stationsplads.
+              </p>
+
+              {viewMode === 'horizontal' && (
+                <div style={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: '8px',
+                  padding: '8px 14px',
+                  background: colors.gray100,
+                  border: `1px solid ${colors.gray300}`,
+                  marginBottom: '24px'
+                }}>
+                  <div style={{
+                    width: '10px',
+                    height: '10px',
+                    borderRadius: '50%',
+                    border: `2px solid ${colors.orange500}`,
+                    background: colors.white
+                  }} />
+                  <span style={{ fontSize: '13px', color: colors.gray800 }}>
+                    <strong>Dags dato:</strong> {new Date().toLocaleDateString('da-DK', { day: 'numeric', month: 'long', year: 'numeric' })}
+                  </span>
+                </div>
+              )}
+
+              {viewMode === 'vertical' ? <VerticalTimeline /> : <HorizontalTimeline />}
+
+              <div style={{
+                maxWidth: '500px',
+                margin: '32px auto 0',
+                padding: '20px 24px',
+                background: colors.gray100
+              }}>
+                <h3 style={{
+                  margin: '0 0 14px 0',
+                  fontSize: '12px',
+                  fontWeight: '700',
+                  color: colors.black,
+                  textTransform: 'uppercase',
+                  letterSpacing: '0.06em'
+                }}>
+                  Forklaring
+                </h3>
+                <div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px' }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                    <div style={{ width: '12px', height: '12px', borderRadius: '50%', background: colors.petroleum500 }} />
+                    <span style={{ fontSize: '13px', color: colors.gray800 }}>Afsluttet</span>
+                  </div>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                    <div style={{
+                      width: '12px',
+                      height: '12px',
+                      borderRadius: '50%',
+                      background: colors.white,
+                      border: `2px solid ${colors.orange500}`
+                    }} />
+                    <span style={{ fontSize: '13px', color: colors.gray800 }}>I gang nu</span>
+                  </div>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                    <div style={{ width: '12px', height: '12px', borderRadius: '50%', background: colors.gray600 }} />
+                    <span style={{ fontSize: '13px', color: colors.gray800 }}>Kommende</span>
+                  </div>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                    <div style={{ width: '12px', height: '12px', borderRadius: '50%', background: colors.note500 }} />
+                    <span style={{ fontSize: '13px', color: colors.gray800 }}>Note</span>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            {/* Strategisk byrumsplan section */}
+            <section style={{
+              background: colors.petroleum100,
+              padding: '32px 40px'
+            }}>
+              <h2 style={{
+                fontSize: '24px',
+                fontWeight: '700',
+                color: colors.black,
+                margin: '0 0 16px 0'
+              }}>
+                Strategisk byrumsplan
+              </h2>
+              <p style={{
+                fontSize: '16px',
+                fontWeight: '700',
+                color: colors.black,
+                margin: '0 0 4px 0'
+              }}>
+                Aarhus giver rum til liv
+              </p>
+              <p style={{
+                fontSize: '16px',
+                fontWeight: '700',
+                color: colors.black,
+                margin: '0 0 16px 0'
+              }}>
+                Strategisk byrumsplan for flere og bedre byrum i Aarhus
+              </p>
+              <p style={{
+                fontSize: '15px',
+                lineHeight: '1.65',
+                color: colors.gray800,
+                margin: '0 0 16px 0'
+              }}>
+                Udarbejdet af Teknik og Miljø som grundlag for udvikling af byrum i Aarhus.
+              </p>
+              <p style={{
+                fontSize: '15px',
+                lineHeight: '1.7',
+                color: colors.gray800,
+                margin: '0 0 16px 0',
+                fontStyle: 'italic'
+              }}>
+                "Smukke omgivelser giver en helt grundlæggende glæde. Det skal vi have meget mere af i Aarhus. De nye byrum skal være en udvidet dagligstue i det fri, hvor vi har lyst til at slå os ned, nyde området og mødes med dem, vi holder af. Jeg har udpeget 13 steder, som kan blive til hjertet i vores bykvarterer, forstæder og opland, og som løfter byrådets visioner for Aarhus", siger Nicolaj Bang, rådmand for Teknik og Miljø.
+              </p>
+              <p style={{
+                fontSize: '14px',
+                color: colors.gray700,
+                margin: '0 0 16px 0'
+              }}>
+                Vedtaget 2023.
+              </p>
+              <a href="https://aarhus.dk/nyt/teknik-og-miljoe/2023/august-2023/raadmand-vil-puste-nyt-liv-i-13-af-byens-rum" style={{
+                fontSize: '15px',
+                color: colors.petroleum500
+              }}>
+                Læs mere her: Rådmand vil puste nyt liv i 13 af byens rum
+              </a>
+            </section>
+          </main>
+
+          {/* Footer */}
+          <footer style={{
+            background: colors.gray900,
+            color: colors.white,
+            padding: '48px 40px',
+            marginTop: '64px'
+          }}>
+            <div style={{ maxWidth: '1100px', margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+              <div>
+                <h4 style={{
+                  fontSize: '14px',
+                  fontWeight: '700',
+                  margin: '0 0 16px 0',
+                  textTransform: 'uppercase',
+                  letterSpacing: '0.04em'
+                }}>
+                  AARHUS KOMMUNE
+                </h4>
+                <div style={{ fontSize: '14px', color: '#999', lineHeight: '1.7' }}>
+                  Hack Kampmanns Plads 2<br />
+                  8000 Aarhus C<br /><br />
+                  TLF. 89 40 22 22
+                </div>
+              </div>
+              <div>
+                <img
+                  src={images.logoWhite}
+                  alt="Aarhus Kommune"
+                  style={{ height: '48px', width: 'auto', opacity: 0.7 }}
+                />
+              </div>
+            </div>
+            <div style={{
+              maxWidth: '1100px',
+              margin: '32px auto 0',
+              paddingTop: '24px',
+              borderTop: '1px solid #555',
+              display: 'flex',
+              gap: '24px'
+            }}>
+              <a href="https://www.was.digst.dk/deltag-aarhus-dk" style={{ fontSize: '13px', color: '#999', textDecoration: 'none' }}>
+                Webtilgængelighedserklæring
+              </a>
+              <a href="http://adgangforalle.dk/" style={{ fontSize: '13px', color: '#999', textDecoration: 'none' }}>
+                Læs højt
+              </a>
+            </div>
+          </footer>
+
+          <MiniTimeline />
+        </div>
+      );
+    };
+
+    const root = ReactDOM.createRoot(document.getElementById('root'));
+    root.render(<DeltagAarhusProjectPage />);
+  </script>
+</body>
+</html>
diff --git a/docs/public/projects/deltag-aarhus-timeline/mocks/styles.css b/docs/public/projects/deltag-aarhus-timeline/mocks/styles.css
new file mode 100644
index 0000000..6151446
--- /dev/null
+++ b/docs/public/projects/deltag-aarhus-timeline/mocks/styles.css
@@ -0,0 +1 @@
+/* Custom styles for Deltag Aarhus Hjortshøj */
diff --git a/docs/public/projects/wcag-contrast-checker/mocks/index.html b/docs/public/projects/wcag-contrast-checker/mocks/index.html
new file mode 100644
index 0000000..8bce481
--- /dev/null
+++ b/docs/public/projects/wcag-contrast-checker/mocks/index.html
@@ -0,0 +1,880 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>WCAG Contrast Checker</title>
+  <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="stylesheet" href="./styles.css">
+</head>
+<body>
+  <div id="root"></div>
+  <script type="text/babel">
+    const { useState, useEffect } = React;
+
+    // Simple SVG Icon components
+    const Download = ({ className }) => (
+      <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
+      </svg>
+    );
+    const CheckCircle = ({ className }) => (
+      <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>
+      </svg>
+    );
+    const XCircle = ({ className }) => (
+      <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/>
+      </svg>
+    );
+    const AlertCircle = ({ className }) => (
+      <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
+      </svg>
+    );
+    const X = ({ className }) => (
+      <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+      </svg>
+    );
+    const Upload = ({ className }) => (
+      <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>
+      </svg>
+    );
+    const TestTube2 = ({ className }) => (
+      <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M21 7 6.82 21.18a2.83 2.83 0 0 1-3.99-.01v0a2.83 2.83 0 0 1 0-4L17 3"/><path d="m16 2 6 6"/><path d="M12 16H4"/>
+      </svg>
+    );
+    const ChevronDown = ({ className }) => (
+      <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <polyline points="6 9 12 15 18 9"/>
+      </svg>
+    );
+    const ChevronUp = ({ className }) => (
+      <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <polyline points="18 15 12 9 6 15"/>
+      </svg>
+    );
+    const ChevronRight = ({ className }) => (
+      <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <polyline points="9 18 15 12 9 6"/>
+      </svg>
+    );
+    const Plus = ({ className }) => (
+      <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
+      </svg>
+    );
+    const Trash2 = ({ className }) => (
+      <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/>
+      </svg>
+    );
+
+    const ContrastChecker = () => {
+      const [results, setResults] = useState([]);
+      const [editingColor, setEditingColor] = useState(null);
+      const [customColors, setCustomColors] = useState({});
+      const [colorData, setColorData] = useState(null);
+      const [isInitialState, setIsInitialState] = useState(true);
+      const [showStandards, setShowStandards] = useState(false);
+      const [manualColors, setManualColors] = useState([]);
+      const [isManualMode, setIsManualMode] = useState(false);
+      const [duplicateError, setDuplicateError] = useState(null);
+      const [isFromManualInput, setIsFromManualInput] = useState(false);
+      const [expandedRows, setExpandedRows] = useState(new Set());
+      const [nuanceStepSize, setNuanceStepSize] = useState(10);
+      const [editingNuance, setEditingNuance] = useState(null);
+
+      const testColorData = [
+        { name: 'Aarhus', primary: ['#297f78', '#ffffff'], secondary: ['#fbd800', '#000000'], tertiary: ['#40362e', '#ffffff'] },
+        { name: 'Aalborg', primary: ['#224430', '#fff'], secondary: ['#5cc4b7', '#000'], tertiary: ['#3A3A3C', '#ffffff'] },
+        { name: 'Viborg', primary: ['#004036', '#fff'], secondary: ['#6cbe9d', '#000'], tertiary: ['#cc3A48', '#fff'] },
+        { name: 'Randers', primary: ['#1B365D', '#fff'], secondary: ['#49C5B1', '#000'], tertiary: null },
+        { name: 'Skive', primary: ['#0c2951', '#fff'], secondary: ['#e6e4da', '#0c2951'], tertiary: ['#4a8311', '#fff'] },
+        { name: 'Thisted', primary: ['#84a6b8', '#212121'], secondary: ['#86b0a6', '#000'], tertiary: ['#94b5c5', '#000'] },
+        { name: 'Esbjerg', primary: ['#0C4168', '#fff'], secondary: ['#C44052', '#fff'], tertiary: ['#006838', '#fff'] },
+        { name: 'Vejle', primary: ['#57256e', '#fff'], secondary: ['#d1e8e1', '#000'], tertiary: ['#F5AA35', '#000'] },
+        { name: 'Aarhus-EP', primary: ['#4C687D', '#fff'], secondary: ['#63887f', '#fff'], tertiary: ['#5C4F43', '#fff'] }
+      ];
+
+      const hexToRgb = (hex) => {
+        hex = hex.replace('#', '').toLowerCase();
+        if (hex.length === 3) {
+          hex = hex.split('').map(c => c + c).join('');
+        }
+        if (hex.length === 6) {
+          return {
+            r: parseInt(hex.substr(0, 2), 16),
+            g: parseInt(hex.substr(2, 2), 16),
+            b: parseInt(hex.substr(4, 2), 16)
+          };
+        }
+        return null;
+      };
+
+      const rgbToHex = (r, g, b) => {
+        return '#' + [r, g, b].map(x => {
+          const hex = Math.round(x).toString(16);
+          return hex.length === 1 ? '0' + hex : hex;
+        }).join('');
+      };
+
+      const adjustBrightness = (hex, percent) => {
+        const rgb = hexToRgb(hex);
+        if (!rgb) return hex;
+        const factor = percent / 100;
+        let { r, g, b } = rgb;
+        if (factor > 0) {
+          r = r + (255 - r) * factor;
+          g = g + (255 - g) * factor;
+          b = b + (255 - b) * factor;
+        } else {
+          r = r + r * factor;
+          g = g + g * factor;
+          b = b + b * factor;
+        }
+        return rgbToHex(r, g, b);
+      };
+
+      const getLuminance = (r, g, b) => {
+        const [rs, gs, bs] = [r, g, b].map(c => {
+          c = c / 255;
+          return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+        });
+        return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+      };
+
+      const getContrastRatio = (color1, color2) => {
+        const rgb1 = hexToRgb(color1);
+        const rgb2 = hexToRgb(color2);
+        if (!rgb1 || !rgb2) return null;
+        const lum1 = getLuminance(rgb1.r, rgb1.g, rgb1.b);
+        const lum2 = getLuminance(rgb2.r, rgb2.g, rgb2.b);
+        const lighter = Math.max(lum1, lum2);
+        const darker = Math.min(lum1, lum2);
+        return (lighter + 0.05) / (darker + 0.05);
+      };
+
+      const checkCompliance = (ratio) => {
+        return {
+          aa_normal: ratio >= 4.5,
+          aa_large: ratio >= 3,
+          aaa_normal: ratio >= 7,
+          aaa_large: ratio >= 4.5
+        };
+      };
+
+      const getColorKey = (name, type, position) => {
+        return `${name}-${type}-${position}`;
+      };
+
+      const getColor = (name, type, position, originalColor) => {
+        const key = getColorKey(name, type, position);
+        return customColors[key] || originalColor;
+      };
+
+      const parseCSV = (csvText) => {
+        const lines = csvText.trim().split('\n');
+        const headers = lines[0].split(',').map(h => h.trim().replace(/"/g, ''));
+        const data = [];
+        for (let i = 1; i < lines.length; i++) {
+          const values = lines[i].split(',').map(v => v.trim().replace(/"/g, ''));
+          if (values.length >= 4) {
+            const name = values[0];
+            const existingItem = data.find(d => d.name === name);
+            if (existingItem) {
+              if (values[1].toLowerCase().includes('secondary')) {
+                existingItem.secondary = [values[2], values[3]];
+              } else if (values[1].toLowerCase().includes('tertiary')) {
+                existingItem.tertiary = [values[2], values[3]];
+              }
+            } else {
+              data.push({
+                name: name,
+                primary: [values[2], values[3]],
+                secondary: null,
+                tertiary: null
+              });
+            }
+          }
+        }
+        return data;
+      };
+
+      const handleFileUpload = (event) => {
+        const file = event.target.files[0];
+        if (file) {
+          const reader = new FileReader();
+          reader.onload = (e) => {
+            try {
+              const csvData = parseCSV(e.target.result);
+              setColorData(csvData);
+              setIsInitialState(false);
+              setCustomColors({});
+            } catch (error) {
+              alert('Error parsing CSV file. Please ensure it follows the correct format.');
+            }
+          };
+          reader.readAsText(file);
+        }
+      };
+
+      const downloadTemplate = () => {
+        const headers = ['Name', 'Color Set', 'Background', 'Foreground', 'Contrast Ratio', 'WCAG AA Normal', 'WCAG AA Large', 'WCAG AAA Normal', 'WCAG AAA Large'];
+        const exampleRows = [
+          ['Example City', 'Primary', '#297f78', '#ffffff', '', '', '', '', ''],
+          ['Example City', 'Secondary', '#fbd800', '#000000', '', '', '', '', ''],
+          ['Example City', 'Tertiary', '#40362e', '#ffffff', '', '', '', '', '']
+        ];
+        const csvContent = [
+          headers.join(','),
+          ...exampleRows.map(row => row.map(cell => `"${cell}"`).join(','))
+        ].join('\n');
+        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+        const url = window.URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.setAttribute('href', url);
+        link.setAttribute('download', 'wcag_template.csv');
+        link.style.visibility = 'hidden';
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(url);
+      };
+
+      const loadTestData = () => {
+        setColorData(testColorData);
+        setIsInitialState(false);
+        setIsManualMode(false);
+        setIsFromManualInput(false);
+        setCustomColors({});
+      };
+
+      const startManualMode = () => {
+        setManualColors([{ id: Date.now(), name: '', background: '', foreground: '' }]);
+        setIsManualMode(true);
+        setIsInitialState(false);
+      };
+
+      const editManualColors = () => {
+        const converted = [];
+        colorData.forEach((item) => {
+          if (item.primary && item.primary[0] && item.primary[1]) {
+            converted.push({ id: Date.now() + converted.length, name: item.name, background: item.primary[0], foreground: item.primary[1] });
+          }
+          if (item.secondary && item.secondary[0] && item.secondary[1]) {
+            converted.push({ id: Date.now() + converted.length, name: `${item.name} Secondary`, background: item.secondary[0], foreground: item.secondary[1] });
+          }
+          if (item.tertiary && item.tertiary[0] && item.tertiary[1]) {
+            converted.push({ id: Date.now() + converted.length, name: `${item.name} Tertiary`, background: item.tertiary[0], foreground: item.tertiary[1] });
+          }
+        });
+        setManualColors(converted);
+        setIsManualMode(true);
+      };
+
+      const addManualColor = () => {
+        setManualColors([...manualColors, { id: Date.now(), name: '', background: '', foreground: '' }]);
+      };
+
+      const removeManualColor = (id) => {
+        setManualColors(manualColors.filter(c => c.id !== id));
+      };
+
+      const updateManualColor = (id, field, value) => {
+        setManualColors(manualColors.map(c => c.id === id ? { ...c, [field]: value } : c));
+      };
+
+      const normalizeHexColor = (hex) => {
+        if (!hex) return hex;
+        hex = hex.trim();
+        if (hex && !hex.startsWith('#')) {
+          hex = '#' + hex;
+        }
+        return hex;
+      };
+
+      const handleColorBlur = (id, field) => {
+        const color = manualColors.find(c => c.id === id);
+        if (color && color[field]) {
+          const normalized = normalizeHexColor(color[field]);
+          if (normalized !== color[field]) {
+            updateManualColor(id, field, normalized);
+          }
+        }
+      };
+
+      const validateAndAnalyze = () => {
+        const hasEmptyName = manualColors.some(c => !c.name.trim());
+        if (hasEmptyName) {
+          alert('Please provide a name for all colors before analyzing.');
+          return;
+        }
+        const filledColors = manualColors.map(c => ({
+          ...c,
+          background: c.background.trim() || '#ffffff',
+          foreground: c.foreground.trim() || '#000000'
+        }));
+        const hasInvalidHex = filledColors.some(c => {
+          const bgValid = hexToRgb(c.background);
+          const fgValid = hexToRgb(c.foreground);
+          return !bgValid || !fgValid;
+        });
+        if (hasInvalidHex) {
+          alert('Please enter valid hex colors (e.g., #ffffff or #fff).');
+          return;
+        }
+        const names = filledColors.map(c => c.name.trim().toLowerCase());
+        const seenNames = new Set();
+        let duplicateName = null;
+        for (const name of names) {
+          if (seenNames.has(name)) {
+            duplicateName = name;
+            break;
+          }
+          seenNames.add(name);
+        }
+        if (duplicateName) {
+          const originalName = filledColors.find(c => c.name.trim().toLowerCase() === duplicateName).name;
+          const count = names.filter(n => n === duplicateName).length;
+          const suggestedName = `${originalName} ${count}`;
+          setDuplicateError({ original: originalName, suggested: suggestedName });
+          return;
+        }
+        const converted = filledColors.map(c => ({
+          name: c.name.trim(),
+          primary: [c.background, c.foreground],
+          secondary: null,
+          tertiary: null
+        }));
+        setColorData(converted);
+        setIsManualMode(false);
+        setIsFromManualInput(true);
+        setCustomColors({});
+      };
+
+      const acceptSuggestion = () => {
+        const duplicate = manualColors.find(c => c.name.trim() === duplicateError.original);
+        updateManualColor(duplicate.id, 'name', duplicateError.suggested);
+        setDuplicateError(null);
+      };
+
+      const toggleRowExpansion = (rowKey) => {
+        const newExpanded = new Set(expandedRows);
+        if (newExpanded.has(rowKey)) {
+          newExpanded.delete(rowKey);
+        } else {
+          newExpanded.add(rowKey);
+        }
+        setExpandedRows(newExpanded);
+      };
+
+      const generateNuances = (result) => {
+        const nuances = [];
+        const steps = [-50, -40, -30, -20, -10, 10, 20, 30, 40, 50];
+        const filteredSteps = steps.filter(step => Math.abs(step) % nuanceStepSize === 0);
+        filteredSteps.forEach(step => {
+          const adjustedBg = adjustBrightness(result.originalBackground, step);
+          const ratio = getContrastRatio(adjustedBg, result.foreground);
+          const compliance = checkCompliance(ratio);
+          nuances.push({ type: 'background', step, background: adjustedBg, foreground: result.foreground, ratio: ratio ? ratio.toFixed(2) : 'N/A', ...compliance });
+        });
+        filteredSteps.forEach(step => {
+          const adjustedFg = adjustBrightness(result.originalForeground, step);
+          const ratio = getContrastRatio(result.background, adjustedFg);
+          const compliance = checkCompliance(ratio);
+          nuances.push({ type: 'foreground', step, background: result.background, foreground: adjustedFg, ratio: ratio ? ratio.toFixed(2) : 'N/A', ...compliance });
+        });
+        return nuances;
+      };
+
+      const calculateResults = () => {
+        if (!colorData) return [];
+        const calculatedResults = [];
+        colorData.forEach(({ name, primary, secondary, tertiary }) => {
+          ['primary', 'secondary', 'tertiary'].forEach((type) => {
+            const colors = type === 'primary' ? primary : type === 'secondary' ? secondary : tertiary;
+            if (colors && colors[0] && colors[1]) {
+              const typeCapitalized = type.charAt(0).toUpperCase() + type.slice(1);
+              const bgKey = getColorKey(name, typeCapitalized, 'bg');
+              const fgKey = getColorKey(name, typeCapitalized, 'fg');
+              const bg = customColors[bgKey] || colors[0];
+              const fg = customColors[fgKey] || colors[1];
+              const ratio = getContrastRatio(bg, fg);
+              const compliance = checkCompliance(ratio);
+              calculatedResults.push({
+                name, type: typeCapitalized, background: bg, foreground: fg,
+                originalBackground: colors[0], originalForeground: colors[1],
+                ratio: ratio ? ratio.toFixed(2) : 'N/A',
+                aa_normal: compliance.aa_normal, aa_large: compliance.aa_large,
+                aaa_normal: compliance.aaa_normal, aaa_large: compliance.aaa_large
+              });
+            }
+          });
+        });
+        return calculatedResults;
+      };
+
+      useEffect(() => {
+        const newResults = calculateResults();
+        setResults([...newResults]);
+      }, [colorData, customColors]);
+
+      const calculateBrightnessFromColors = (originalHex, adjustedHex) => {
+        const origRgb = hexToRgb(originalHex);
+        const adjRgb = hexToRgb(adjustedHex);
+        if (!origRgb || !adjRgb) return 0;
+        const origAvg = (origRgb.r + origRgb.g + origRgb.b) / 3;
+        const adjAvg = (adjRgb.r + adjRgb.g + adjRgb.b) / 3;
+        if (adjAvg > origAvg) {
+          return ((adjAvg - origAvg) / (255 - origAvg)) * 100;
+        } else if (adjAvg < origAvg) {
+          return ((adjAvg - origAvg) / origAvg) * 100;
+        }
+        return 0;
+      };
+
+      const handleColorClick = (name, type, position, currentColor, originalColor) => {
+        const key = getColorKey(name, type, position);
+        const storedColor = customColors[key];
+        const colorToUse = storedColor || originalColor;
+        const brightness = storedColor ? calculateBrightnessFromColors(originalColor, storedColor) : 0;
+        setEditingColor({ name, type, position, color: colorToUse, originalColor, brightness: Math.round(brightness) });
+      };
+
+      const handleBrightnessChange = (value) => {
+        const newBrightness = parseFloat(value);
+        const newColor = adjustBrightness(editingColor.originalColor, newBrightness);
+        setEditingColor({ ...editingColor, brightness: newBrightness, color: newColor });
+      };
+
+      const applyColorChange = () => {
+        const key = getColorKey(editingColor.name, editingColor.type, editingColor.position);
+        if (editingColor.brightness === 0) {
+          setCustomColors(prev => { const newColors = { ...prev }; delete newColors[key]; return newColors; });
+        } else {
+          setCustomColors(prev => ({ ...prev, [key]: editingColor.color }));
+        }
+        setEditingColor(null);
+      };
+
+      const resetColor = () => {
+        const key = getColorKey(editingColor.name, editingColor.type, editingColor.position);
+        setCustomColors(prev => { const newColors = { ...prev }; delete newColors[key]; return newColors; });
+        setEditingColor(null);
+      };
+
+      const downloadCSV = () => {
+        const headers = ['Name', 'Color Set', 'Background', 'Foreground', 'Contrast Ratio', 'WCAG AA Normal', 'WCAG AA Large', 'WCAG AAA Normal', 'WCAG AAA Large'];
+        const csvRows = results.map(r => [
+          `"${r.name}"`, `"${r.type}"`, `"${r.background}"`, `"${r.foreground}"`, `"${r.ratio}"`,
+          r.aa_normal ? 'Pass' : 'Fail', r.aa_large ? 'Pass' : 'Fail',
+          r.aaa_normal ? 'Pass' : 'Fail', r.aaa_large ? 'Pass' : 'Fail'
+        ].join(','));
+        const csvContent = [headers.join(','), ...csvRows].join('\n');
+        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+        const url = window.URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.setAttribute('href', url);
+        link.setAttribute('download', 'wcag_contrast_ratios.csv');
+        link.style.visibility = 'hidden';
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(url);
+      };
+
+      const ComplianceIcon = ({ pass }) => {
+        if (pass) return <CheckCircle className="w-4 h-4 text-green-600" />;
+        return <XCircle className="w-4 h-4 text-red-600" />;
+      };
+
+      if (isManualMode) {
+        return (
+          <div className="min-h-screen bg-gray-50 p-6">
+            <div className="max-w-5xl mx-auto">
+              <div className="bg-white rounded-lg shadow-lg p-8">
+                <div className="flex justify-between items-center mb-6">
+                  <div>
+                    <h1 className="text-3xl font-bold text-gray-900 mb-2">Add Colors Manually</h1>
+                    <p className="text-gray-600">Enter your colors below to analyze their contrast ratios</p>
+                  </div>
+                  <button onClick={() => { setIsManualMode(false); setIsInitialState(true); setManualColors([]); }} className="text-gray-500 hover:text-gray-700">
+                    <X className="w-6 h-6" />
+                  </button>
+                </div>
+                <div className="overflow-x-auto">
+                  <table className="w-full">
+                    <thead className="bg-gray-50 border-b border-gray-200">
+                      <tr>
+                        <th className="px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase min-w-[150px]">Name</th>
+                        <th className="px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase min-w-[200px]">Background Color</th>
+                        <th className="px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase min-w-[200px]">Foreground Color</th>
+                        <th className="px-4 py-3 text-center text-xs font-semibold text-gray-700 uppercase w-20">Actions</th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-gray-200">
+                      {manualColors.map((color) => (
+                        <tr key={color.id}>
+                          <td className="px-4 py-3">
+                            <input type="text" value={color.name} onChange={(e) => updateManualColor(color.id, 'name', e.target.value)} placeholder="e.g., Button Primary" className="w-full min-w-[120px] px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
+                          </td>
+                          <td className="px-4 py-3">
+                            <div className="flex items-center gap-2">
+                              <input type="color" value={color.background || '#000000'} onChange={(e) => updateManualColor(color.id, 'background', e.target.value)} className="w-10 h-10 rounded border border-gray-300 cursor-pointer flex-shrink-0" />
+                              <input type="text" value={color.background} onChange={(e) => updateManualColor(color.id, 'background', e.target.value)} onBlur={() => handleColorBlur(color.id, 'background')} placeholder="#ffffff" className="flex-1 min-w-[100px] px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono text-sm" />
+                            </div>
+                          </td>
+                          <td className="px-4 py-3">
+                            <div className="flex items-center gap-2">
+                              <input type="color" value={color.foreground || '#000000'} onChange={(e) => updateManualColor(color.id, 'foreground', e.target.value)} className="w-10 h-10 rounded border border-gray-300 cursor-pointer flex-shrink-0" />
+                              <input type="text" value={color.foreground} onChange={(e) => updateManualColor(color.id, 'foreground', e.target.value)} onBlur={() => handleColorBlur(color.id, 'foreground')} placeholder="#000000" className="flex-1 min-w-[100px] px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono text-sm" />
+                            </div>
+                          </td>
+                          <td className="px-4 py-3 text-center">
+                            <button onClick={() => removeManualColor(color.id)} disabled={manualColors.length === 1} className="text-red-600 hover:text-red-700 disabled:text-gray-300 disabled:cursor-not-allowed">
+                              <Trash2 className="w-5 h-5" />
+                            </button>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+                <div className="flex gap-3 mt-6">
+                  <button onClick={addManualColor} className="flex items-center gap-2 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
+                    <Plus className="w-4 h-4" />Add Color
+                  </button>
+                  <button onClick={validateAndAnalyze} className="flex-1 bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors font-medium">
+                    Analyze Colors
+                  </button>
+                </div>
+              </div>
+            </div>
+            {duplicateError && (
+              <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+                <div className="bg-white rounded-lg shadow-xl p-6 max-w-md w-full mx-4">
+                  <div className="flex items-start gap-3 mb-4">
+                    <AlertCircle className="w-6 h-6 text-orange-500 flex-shrink-0 mt-0.5" />
+                    <div>
+                      <h3 className="text-lg font-bold text-gray-900 mb-2">Duplicate Name Detected</h3>
+                      <p className="text-gray-600 text-sm">
+                        The name <strong>"{duplicateError.original}"</strong> already exists. Would you like to use <strong>"{duplicateError.suggested}"</strong> instead?
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex gap-2">
+                    <button onClick={() => setDuplicateError(null)} className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">Go Back</button>
+                    <button onClick={acceptSuggestion} className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">Use "{duplicateError.suggested}"</button>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        );
+      }
+
+      if (isInitialState) {
+        return (
+          <div className="min-h-screen bg-gray-50 flex items-center justify-center p-6">
+            <div className="max-w-2xl w-full">
+              <div className="bg-white rounded-lg shadow-lg p-8">
+                <div className="text-center mb-8">
+                  <h1 className="text-3xl font-bold text-gray-900 mb-2">WCAG Contrast Ratio Checker</h1>
+                  <p className="text-gray-600">Analyze color accessibility compliance for your design system</p>
+                </div>
+                <div className="space-y-4">
+                  <div>
+                    <label htmlFor="csv-upload" className="block w-full">
+                      <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-blue-500 hover:bg-blue-50 transition-all cursor-pointer">
+                        <Upload className="w-12 h-12 text-gray-400 mx-auto mb-4" />
+                        <p className="text-lg font-medium text-gray-700 mb-2">Upload CSV File</p>
+                        <p className="text-sm text-gray-500">Click to browse or drag and drop your CSV file here</p>
+                      </div>
+                    </label>
+                    <input id="csv-upload" type="file" accept=".csv" onChange={handleFileUpload} className="hidden" />
+                  </div>
+                  <div className="relative">
+                    <div className="absolute inset-0 flex items-center"><div className="w-full border-t border-gray-300"></div></div>
+                    <div className="relative flex justify-center text-sm"><span className="px-4 bg-white text-gray-500">or</span></div>
+                  </div>
+                  <button onClick={startManualMode} className="w-full flex items-center justify-center gap-3 bg-gradient-to-r from-green-600 to-green-700 text-white px-6 py-4 rounded-lg hover:from-green-700 hover:to-green-800 transition-all shadow-md">
+                    <Plus className="w-5 h-5" /><span className="font-medium">Add Colors Manually</span>
+                  </button>
+                  <div className="relative">
+                    <div className="absolute inset-0 flex items-center"><div className="w-full border-t border-gray-300"></div></div>
+                    <div className="relative flex justify-center text-sm"><span className="px-4 bg-white text-gray-500">or</span></div>
+                  </div>
+                  <button onClick={loadTestData} className="w-full flex items-center justify-center gap-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white px-6 py-4 rounded-lg hover:from-blue-700 hover:to-blue-800 transition-all shadow-md">
+                    <TestTube2 className="w-5 h-5" /><span className="font-medium">Show Test Data</span>
+                  </button>
+                </div>
+                <div className="mt-8 bg-gray-50 rounded-lg p-6">
+                  <div className="flex justify-between items-center mb-3">
+                    <h3 className="font-semibold text-gray-900">CSV Format Requirements:</h3>
+                    <button onClick={downloadTemplate} className="flex items-center gap-2 text-sm text-blue-600 hover:text-blue-700 font-medium">
+                      <Download className="w-4 h-4" />Download Template
+                    </button>
+                  </div>
+                  <div className="text-sm text-gray-600 space-y-2">
+                    <p>Your CSV should have the following columns:</p>
+                    <code className="block bg-white p-3 rounded border border-gray-200 text-xs overflow-x-auto">Name, Color Set, Background, Foreground, Contrast Ratio, ...</code>
+                    <p className="mt-2">Example row:</p>
+                    <code className="block bg-white p-3 rounded border border-gray-200 text-xs overflow-x-auto">Aarhus, Primary, #297f78, #ffffff, ...</code>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+      }
+
+      return (
+        <div className="min-h-screen bg-gray-50 p-6">
+          <div className="max-w-7xl mx-auto">
+            <div className="bg-white rounded-lg shadow-sm p-6 mb-6">
+              <div className="flex flex-wrap justify-between items-center gap-4 mb-4">
+                <div>
+                  <h1 className="text-2xl font-bold text-gray-900">WCAG Contrast Ratio Analysis</h1>
+                  <p className="text-gray-600 mt-1">Color accessibility compliance analysis</p>
+                </div>
+                <div className="flex flex-wrap gap-2">
+                  <button onClick={() => { setIsInitialState(true); setColorData(null); setCustomColors({}); setResults([]); setIsFromManualInput(false); }} className="flex items-center gap-2 bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 transition-colors">
+                    <Upload className="w-4 h-4" />Start New Analysis
+                  </button>
+                  <button onClick={editManualColors} className="flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors">
+                    <Plus className="w-4 h-4" />Edit Colors
+                  </button>
+                  <button onClick={downloadCSV} className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
+                    <Download className="w-4 h-4" />Download CSV
+                  </button>
+                </div>
+              </div>
+              <div className="bg-blue-50 border border-blue-200 rounded-lg overflow-hidden">
+                <button onClick={() => setShowStandards(!showStandards)} className="w-full flex items-center justify-between p-4 hover:bg-blue-100 transition-colors">
+                  <div className="flex items-center gap-2">
+                    <AlertCircle className="w-5 h-5 text-blue-600 flex-shrink-0" />
+                    <span className="font-semibold text-blue-900">WCAG Compliance Standards</span>
+                  </div>
+                  {showStandards ? <ChevronUp className="w-5 h-5 text-blue-600" /> : <ChevronDown className="w-5 h-5 text-blue-600" />}
+                </button>
+                {showStandards && (
+                  <div className="px-4 pb-4 text-sm text-blue-900">
+                    <ul className="list-disc list-inside space-y-1">
+                      <li><strong>AA Normal:</strong> 4.5:1 (for text smaller than 18pt or 14pt bold)</li>
+                      <li><strong>AA Large:</strong> 3:1 (for text 18pt+ or 14pt+ bold)</li>
+                      <li><strong>AAA Normal:</strong> 7:1 (enhanced for normal text)</li>
+                      <li><strong>AAA Large:</strong> 4.5:1 (enhanced for large text)</li>
+                    </ul>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <div className="bg-white rounded-lg shadow-sm overflow-hidden">
+              <div className="overflow-x-auto">
+                <table className="w-full">
+                  <thead className="bg-gray-50 border-b border-gray-200">
+                    <tr>
+                      <th className="px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase align-top w-12"></th>
+                      <th className="px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase align-top">Name</th>
+                      <th className="px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase align-top">Color Set</th>
+                      <th className="px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase align-top">
+                        <div>Background / Foreground</div>
+                        <div className="text-xs font-normal text-gray-500 normal-case mt-0.5">(Click to adjust)</div>
+                      </th>
+                      <th className="px-4 py-3 text-center text-xs font-semibold text-gray-700 uppercase align-top">Ratio</th>
+                      <th className="px-4 py-3 text-center text-xs font-semibold text-gray-700 uppercase align-top">AA Normal</th>
+                      <th className="px-4 py-3 text-center text-xs font-semibold text-gray-700 uppercase align-top">AA Large</th>
+                      <th className="px-4 py-3 text-center text-xs font-semibold text-gray-700 uppercase align-top">AAA Normal</th>
+                      <th className="px-4 py-3 text-center text-xs font-semibold text-gray-700 uppercase align-top">AAA Large</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-gray-200">
+                    {results.map((result, index) => {
+                      const rowKey = `${result.name}-${result.type}-${result.background}-${result.foreground}`;
+                      const isExpanded = expandedRows.has(rowKey);
+                      const nuances = isExpanded ? generateNuances(result) : [];
+                      return (
+                        <React.Fragment key={rowKey}>
+                          <tr className="hover:bg-gray-50">
+                            <td className="px-4 py-3">
+                              <button onClick={() => toggleRowExpansion(rowKey)} className="text-gray-500 hover:text-gray-700">
+                                {isExpanded ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
+                              </button>
+                            </td>
+                            <td className="px-4 py-3 text-sm font-medium text-gray-900">{result.name}</td>
+                            <td className="px-4 py-3 text-sm text-gray-600">{result.type}</td>
+                            <td className="px-4 py-3">
+                              <div className="flex items-center gap-2">
+                                <div className="flex items-center gap-1">
+                                  <button onClick={() => handleColorClick(result.name, result.type, 'bg', result.background, result.originalBackground)} className="w-8 h-8 rounded border-2 border-gray-300 hover:border-blue-500 cursor-pointer transition-all hover:scale-110" style={{ backgroundColor: result.background }} title="Click to adjust brightness" />
+                                  <span className="text-xs text-gray-500">{result.background}</span>
+                                </div>
+                                <span className="text-gray-400">→</span>
+                                <div className="flex items-center gap-1">
+                                  <button onClick={() => handleColorClick(result.name, result.type, 'fg', result.foreground, result.originalForeground)} className="w-8 h-8 rounded border-2 border-gray-300 hover:border-blue-500 cursor-pointer transition-all hover:scale-110" style={{ backgroundColor: result.foreground }} title="Click to adjust brightness" />
+                                  <span className="text-xs text-gray-500">{result.foreground}</span>
+                                </div>
+                              </div>
+                            </td>
+                            <td className="px-4 py-3 text-center"><span className="text-sm font-semibold text-gray-900">{result.ratio}:1</span></td>
+                            <td className="px-4 py-3 text-center"><div className="flex justify-center"><ComplianceIcon pass={result.aa_normal} /></div></td>
+                            <td className="px-4 py-3 text-center"><div className="flex justify-center"><ComplianceIcon pass={result.aa_large} /></div></td>
+                            <td className="px-4 py-3 text-center"><div className="flex justify-center"><ComplianceIcon pass={result.aaa_normal} /></div></td>
+                            <td className="px-4 py-3 text-center"><div className="flex justify-center"><ComplianceIcon pass={result.aaa_large} /></div></td>
+                          </tr>
+                          {isExpanded && (
+                            <>
+                              <tr className="bg-blue-50">
+                                <td colSpan="9" className="px-4 py-2"><div className="text-xs font-semibold text-blue-900 uppercase">Background Nuances</div></td>
+                              </tr>
+                              {nuances.filter(n => n.type === 'background').map((nuance, nIdx) => (
+                                <tr key={`bg-${nIdx}`} className="bg-blue-50 hover:bg-blue-100">
+                                  <td className="px-4 py-2"></td>
+                                  <td className="px-4 py-2 text-sm text-gray-600" colSpan="2"><span className="ml-4">BG {nuance.step > 0 ? '+' : ''}{nuance.step}%</span></td>
+                                  <td className="px-4 py-2">
+                                    <div className="flex items-center gap-2">
+                                      <div className="flex items-center gap-1">
+                                        <button onClick={() => handleColorClick(result.name, result.type, 'bg', nuance.background, result.originalBackground)} className="w-8 h-8 rounded border-2 border-gray-300 hover:border-blue-500 cursor-pointer transition-all hover:scale-110" style={{ backgroundColor: nuance.background }} title="Click to adjust brightness" />
+                                        <span className="text-xs text-gray-500">{nuance.background}</span>
+                                      </div>
+                                      <span className="text-gray-400">→</span>
+                                      <div className="flex items-center gap-1">
+                                        <div className="w-8 h-8 rounded border-2 border-gray-300" style={{ backgroundColor: nuance.foreground }} />
+                                        <span className="text-xs text-gray-500">{nuance.foreground}</span>
+                                      </div>
+                                    </div>
+                                  </td>
+                                  <td className="px-4 py-2 text-center"><span className="text-sm font-semibold text-gray-900">{nuance.ratio}:1</span></td>
+                                  <td className="px-4 py-2 text-center"><div className="flex justify-center"><ComplianceIcon pass={nuance.aa_normal} /></div></td>
+                                  <td className="px-4 py-2 text-center"><div className="flex justify-center"><ComplianceIcon pass={nuance.aa_large} /></div></td>
+                                  <td className="px-4 py-2 text-center"><div className="flex justify-center"><ComplianceIcon pass={nuance.aaa_normal} /></div></td>
+                                  <td className="px-4 py-2 text-center"><div className="flex justify-center"><ComplianceIcon pass={nuance.aaa_large} /></div></td>
+                                </tr>
+                              ))}
+                              <tr className="bg-green-50">
+                                <td colSpan="9" className="px-4 py-2"><div className="text-xs font-semibold text-green-900 uppercase">Foreground Nuances</div></td>
+                              </tr>
+                              {nuances.filter(n => n.type === 'foreground').map((nuance, nIdx) => (
+                                <tr key={`fg-${nIdx}`} className="bg-green-50 hover:bg-green-100">
+                                  <td className="px-4 py-2"></td>
+                                  <td className="px-4 py-2 text-sm text-gray-600" colSpan="2"><span className="ml-4">FG {nuance.step > 0 ? '+' : ''}{nuance.step}%</span></td>
+                                  <td className="px-4 py-2">
+                                    <div className="flex items-center gap-2">
+                                      <div className="flex items-center gap-1">
+                                        <div className="w-8 h-8 rounded border-2 border-gray-300" style={{ backgroundColor: nuance.background }} />
+                                        <span className="text-xs text-gray-500">{nuance.background}</span>
+                                      </div>
+                                      <span className="text-gray-400">→</span>
+                                      <div className="flex items-center gap-1">
+                                        <button onClick={() => handleColorClick(result.name, result.type, 'fg', nuance.foreground, result.originalForeground)} className="w-8 h-8 rounded border-2 border-gray-300 hover:border-blue-500 cursor-pointer transition-all hover:scale-110" style={{ backgroundColor: nuance.foreground }} title="Click to adjust brightness" />
+                                        <span className="text-xs text-gray-500">{nuance.foreground}</span>
+                                      </div>
+                                    </div>
+                                  </td>
+                                  <td className="px-4 py-2 text-center"><span className="text-sm font-semibold text-gray-900">{nuance.ratio}:1</span></td>
+                                  <td className="px-4 py-2 text-center"><div className="flex justify-center"><ComplianceIcon pass={nuance.aa_normal} /></div></td>
+                                  <td className="px-4 py-2 text-center"><div className="flex justify-center"><ComplianceIcon pass={nuance.aa_large} /></div></td>
+                                  <td className="px-4 py-2 text-center"><div className="flex justify-center"><ComplianceIcon pass={nuance.aaa_normal} /></div></td>
+                                  <td className="px-4 py-2 text-center"><div className="flex justify-center"><ComplianceIcon pass={nuance.aaa_large} /></div></td>
+                                </tr>
+                              ))}
+                            </>
+                          )}
+                        </React.Fragment>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+
+          {editingColor && (() => {
+            const result = results.find(r => r.name === editingColor.name && r.type === editingColor.type);
+            const isEditingBackground = editingColor.position === 'bg';
+            const currentBg = isEditingBackground ? editingColor.color : result?.background;
+            const currentFg = isEditingBackground ? result?.foreground : editingColor.color;
+            const originalBg = isEditingBackground ? editingColor.originalColor : result?.originalBackground;
+            const originalFg = isEditingBackground ? result?.originalForeground : editingColor.originalColor;
+            const currentRatio = getContrastRatio(currentBg, currentFg);
+            const originalRatio = getContrastRatio(originalBg, originalFg);
+            return (
+              <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+                <div className="bg-white rounded-lg shadow-xl p-6 max-w-md w-full mx-4">
+                  <div className="flex justify-between items-center mb-4">
+                    <h3 className="text-lg font-bold text-gray-900">Adjust Color Brightness</h3>
+                    <button onClick={() => setEditingColor(null)} className="text-gray-400 hover:text-gray-600"><X className="w-5 h-5" /></button>
+                  </div>
+                  <div className="space-y-4">
+                    <div><p className="text-sm text-gray-600 mb-2"><strong>{editingColor.name}</strong> - {editingColor.type} - {editingColor.position === 'bg' ? 'Background' : 'Foreground'}</p></div>
+                    <div>
+                      <div className="flex items-center justify-center gap-4 mb-3">
+                        <div className="text-center">
+                          <div className="w-20 h-20 rounded border-2 border-gray-300 flex items-center justify-center relative" style={{ backgroundColor: originalBg }}>
+                            <span className="text-4xl font-bold" style={{ color: originalFg }}>A</span>
+                          </div>
+                          <p className="text-xs text-gray-500 mt-1">Original</p>
+                        </div>
+                        <div className="text-2xl text-gray-400">→</div>
+                        <div className="text-center">
+                          <div className="w-20 h-20 rounded border-2 border-blue-500 flex items-center justify-center relative" style={{ backgroundColor: currentBg }}>
+                            <span className="text-4xl font-bold" style={{ color: currentFg }}>A</span>
+                          </div>
+                          <p className="text-xs text-gray-500 mt-1">Adjusted</p>
+                        </div>
+                      </div>
+                      <div className="grid grid-cols-2 gap-3 text-center">
+                        <div className="bg-gray-50 rounded p-2">
+                          <p className="text-xs text-gray-500 mb-1">Original Ratio</p>
+                          <p className="text-lg font-bold text-gray-900">{originalRatio ? originalRatio.toFixed(2) : 'N/A'}:1</p>
+                          <div className="flex justify-center gap-2 mt-1">
+                            <div className="flex items-center gap-0.5">{originalRatio >= 4.5 ? <CheckCircle className="w-3 h-3 text-green-600" /> : <XCircle className="w-3 h-3 text-red-600" />}<span className="text-xs text-gray-600">AA</span></div>
+                            <div className="flex items-center gap-0.5">{originalRatio >= 7 ? <CheckCircle className="w-3 h-3 text-green-600" /> : <XCircle className="w-3 h-3 text-red-600" />}<span className="text-xs text-gray-600">AAA</span></div>
+                          </div>
+                        </div>
+                        <div className="bg-blue-50 rounded p-2">
+                          <p className="text-xs text-blue-600 mb-1">New Ratio</p>
+                          <p className="text-lg font-bold text-blue-900">{currentRatio ? currentRatio.toFixed(2) : 'N/A'}:1</p>
+                          <div className="flex justify-center gap-2 mt-1">
+                            <div className="flex items-center gap-0.5">{currentRatio >= 4.5 ? <CheckCircle className="w-3 h-3 text-green-600" /> : <XCircle className="w-3 h-3 text-red-600" />}<span className="text-xs text-blue-900">AA</span></div>
+                            <div className="flex items-center gap-0.5">{currentRatio >= 7 ? <CheckCircle className="w-3 h-3 text-green-600" /> : <XCircle className="w-3 h-3 text-red-600" />}<span className="text-xs text-blue-900">AAA</span></div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-2">Brightness: {editingColor.brightness > 0 ? '+' : ''}{editingColor.brightness}%</label>
+                      <input type="range" min="-100" max="100" value={editingColor.brightness} onChange={(e) => handleBrightnessChange(e.target.value)} className="w-full" />
+                      <div className="flex justify-between text-xs text-gray-500 mt-1"><span>Darker</span><span>Lighter</span></div>
+                    </div>
+                    <div className="bg-gray-50 rounded p-3">
+                      <p className="text-sm text-gray-600"><strong>Original:</strong> {editingColor.originalColor}</p>
+                      <p className="text-sm text-gray-600"><strong>Adjusted:</strong> {editingColor.color}</p>
+                    </div>
+                    <div className="flex gap-2">
+                      <button onClick={resetColor} className="flex-1 px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors">Reset</button>
+                      <button onClick={applyColorChange} className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">Done</button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            );
+          })()}
+        </div>
+      );
+    };
+
+    const root = ReactDOM.createRoot(document.getElementById('root'));
+    root.render(<ContrastChecker />);
+  </script>
+</body>
+</html>
diff --git a/docs/public/projects/wcag-contrast-checker/mocks/styles.css b/docs/public/projects/wcag-contrast-checker/mocks/styles.css
new file mode 100644
index 0000000..8b5a171
--- /dev/null
+++ b/docs/public/projects/wcag-contrast-checker/mocks/styles.css
@@ -0,0 +1 @@
+/* Additional styles for WCAG Contrast Checker */