fix: resolve MDX type imports for release notes

Fixed runtime error in release notes pages: - Removed unused MDXRemote import from lib/mdx/releases.ts - Fixed MDXComponents type import in mdx-components.tsx - Added @types/mdx as dev dependency Pages now load correctly: - /releases (overview) - /releases/authentication - /releases/release-notes-system 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-19 21:16:45 +01:00
parent bae2737bd5
commit f8904db3e9
15 changed files with 1072 additions and 202 deletions
--- a/docs/specs/archive/fo-marketing-app-flow-v2.md
+++ b/docs/specs/archive/fo-marketing-app-flow-v2.md
@@ -0,0 +1,699 @@
+# 🧩 Functioneel Ontwerp (FO) – Marketing & App Flow v2.1
+
+**Projectnaam:** AI Speedrun - Mini-EPD Prototype
+**Versie:** v2.1 (Vereenvoudigde User Journey)
+**Datum:** 17-11-2024
+**Auteur:** Colin Lit
+
+---
+
+## 1. Doel en relatie met het PRD
+
+🎯 **Doel van dit document:**
+Dit Functioneel Ontwerp beschrijft de **vereenvoudigde user journey** voor de AI Speedrun marketing website en EPD applicatie. Het lost de huidige UX problemen op (broken links, onduidelijke navigatie) en introduceert een heldere scheiding tussen marketing en applicatie.
+
+📘 **Toelichting aan de lezer:**
+Versie 2.0 is een refactor van de huidige implementatie (v1.2). De belangrijkste wijzigingen:
+- **Marketing vereenvoudigd**: Van lange manifesto naar compacte statement + timeline met features
+- **Geen separate EPD demo pagina**: Features worden getoond in timeline op homepage en op login pagina
+- **Duidelijke app routing**: `/epd/*` namespace voor alle EPD functionaliteit
+- **Werkende flows**: Alle CTA's en login links gaan naar bestaande pagina's
+- **Coming Soon strategie**: Eerlijke communicatie tijdens Week 2 development
+
+Dit document is niet-technisch en beschrijft wat gebruikers zien en kunnen doen.
+
+---
+
+## 2. Overzicht van de belangrijkste onderdelen
+
+🎯 **Doel:** De 4 kernmodules van de applicatie
+
+**Marketing Modules (Publiek):**
+1. **Marketing Homepage** (`/`) - Vereenvoudigde landing met hero, statement en timeline (met features)
+2. **Contact & Leads** (`/contact`) - Lead capture formulier
+
+**Auth & App Modules (Protected/Semi-Protected):**
+3. **Login & Authentication** (`/login`) - Magic link + demo credentials + features showcase
+4. **EPD App Dashboard** (`/epd/clients`) - Coming Soon placeholder (Week 2+)
+
+---
+
+## 3. User Stories
+
+🎯 **Doel:** Wat gebruikers kunnen en willen doen
+
+### Prioriteit: Hoog (MVP Critical)
+
+| ID | Rol | Doel / Actie | Verwachte waarde | Status |
+|----|-----|--------------|------------------|--------|
+| US-01 | Marketing bezoeker | Homepage bekijken met project statement en voortgang | Begrijpen wat AI Speedrun doet en volgen van build progress + features zien | ✅ Te implementeren |
+| US-02 | Marketing bezoeker | EPD features bekijken in timeline | Zien wat het prototype kan (features getoond in timeline op homepage) | ✅ Te implementeren |
+| US-03 | Marketing bezoeker | Contact opnemen voor lead | Interesse tonen in Software on Demand services | ✅ Bestaand |
+| US-04 | Demo gebruiker | Inloggen met demo credentials | Toegang tot EPD app prototype | ✅ Bestaand (fix redirect) |
+| US-05 | Demo gebruiker | Coming Soon dashboard zien | Weten dat app in Week 2 komt + verwachtingen managen | ✅ Te implementeren |
+| US-06 | Terugkerende gebruiker | Direct naar login navigeren | Snel inloggen zonder homepage te moeten bezoeken | ✅ Te implementeren (nav link) |
+
+### Prioriteit: Middel (Nice to Have)
+
+| ID | Rol | Doel / Actie | Verwachte waarde | Status |
+|----|-----|--------------|------------------|--------|
+| US-07 | Ingelogde gebruiker | Uitloggen | Sessie beëindigen en terug naar marketing | 🔄 Toekomstig |
+| US-08 | Marketing bezoeker | Wekelijkse updates volgen via timeline | Build in public transparantie ervaren | ✅ Te implementeren |
+| US-09 | Stakeholder | ROI vergelijking zien | Business case begrijpen (traditioneel vs AI) | ⏸️ On hold |
+
+### Prioriteit: Laag (Future Enhancement)
+
+| ID | Rol | Doel / Actie | Verwachte waarde | Status |
+|----|-----|--------------|------------------|--------|
+| US-10 | Developer | Interactieve ROI calculator gebruiken | Eigen business case berekenen | ⏸️ On hold |
+| US-11 | LinkedIn volger | Build metrics dashboard zien | Real-time tracking van uren en kosten | ⏸️ On hold |
+
+---
+
+## 4. Functionele werking per onderdel
+
+🎯 **Doel:** Per module beschrijven wat gebruikers kunnen doen
+
+### 4.1 Marketing Homepage (`/`)
+
+**Doel:** Compacte, krachtige introductie van Software on Demand concept met build-in-public transparantie.
+
+**Secties (van boven naar beneden):**
+
+1. **Hero Section** (behouden zoals nu)
+   - Full-viewport quote van Jensen Huang: "Software is eating the world"
+   - Dot-shader achtergrond (subtiel, opacity 0.02)
+   - Scroll indicator
+
+2. **Statement Section** (NIEUW - vervangt lange manifesto)
+   - **Heading**: "Software on Demand: Van €100k naar €200"
+   - **3-4 Paragrafen** in problem → solution → proof format:
+     - *Problem*: Enterprise software kost €100.000+ en duurt 12-24 maanden
+     - *Solution*: AI-powered development verkort dit naar 4 weken en €200
+     - *Proof*: Dit EPD is het bewijs - gebouwd in 4 weken, build in public
+     - *CTA*: Volg de voortgang hieronder
+   - **Visueel**: Clean, serif typography (Crimson Text), breathing room
+
+3. **Timeline Section** (NIEUW - build in public met features showcase)
+   - **Component**: Aceternity UI Timeline (21st.dev)
+   - **Content structure** per week:
+     - Week nummer + datum range (bijv. "Week 1 • Nov 11-17")
+     - Status badge: Completed / In Progress / Planned
+     - Korte beschrijving (3-4 zinnen): wat is er gebouwd
+     - **Features showcase** (NIEUW): 
+       - Per week worden relevante EPD features getoond
+       - Feature cards met: Titel, beschrijving, tijdswinst (bijv. "30 min → 5 sec")
+       - Icons per feature type (Brain voor AI, Zap voor snelheid, etc.)
+       - Visuele highlight van wat er die week gebouwd is
+     - Metrics cards: Development hours, Infrastructure cost
+     - Achievements lijst: Bullets met voltooide features
+     - Optioneel: Screenshot of visual van die week
+   - **Interactie**: Scroll-based animation (timeline ontvouwt)
+   - **Data source**: `content/nl/timeline.json` (met features array per week)
+
+4. **CTA Section** (vereenvoudigd)
+   - **Primary CTA**: "Probeer het prototype" → `/login` (direct naar login met features)
+   - **Secondary CTA**: "Volg voortgang" → Scroll to timeline (anchor link `#timeline`)
+   - **Tertiary**: "Contact" → `/contact`
+   - **Visueel**: Button hierarchy duidelijk (primary = green, secondary = outline)
+
+**Verwijderd uit v1.2:**
+- Lange manifesto content (8000+ woorden)
+- Separate EPD demo pagina (`/epd`) - features nu in timeline
+- Comparison table (verwijderd - niet meer nodig)
+- Multiple insight boxes
+- Statement sections met dark backgrounds
+
+**States:**
+- **Normal**: Alle content zichtbaar
+- **Loading**: Skeleton voor timeline items
+- **Empty state**: (niet van toepassing - statische content)
+
+**Navigatie:**
+- Top: MinimalNav (Home, Contact, Login) - EPD Prototype link verwijderd
+- Footer: Copyright + link naar ikbenlit.nl
+
+---
+
+### 4.2 ~~EPD Demo Info Pagina (`/epd`)~~ VERWIJDERD
+
+**Status:** Deze pagina is verwijderd in v2.1. Features worden nu getoond in:
+- Timeline op homepage (`/`)
+- Features showcase op login pagina (`/login`)
+
+**Reden:** Vereenvoudiging van user journey - gebruikers zien features direct in context van build progress en kunnen direct naar login gaan.
+
+---
+
+### 4.3 Contact & Lead Capture (`/contact`)
+
+**Doel:** Lead acquisition voor Software on Demand consultancy.
+
+**Functionaliteit:** (behouden zoals nu - werkt al)
+- Form fields: Naam, Email, Bericht
+- Client-side validation (Zod)
+- Submit → API `/api/leads` → Supabase `leads` table
+- Success state: "Bedankt! We nemen contact op"
+- Error state: "Er ging iets mis. Probeer opnieuw"
+
+**Navigatie:**
+- Terug naar homepage via nav
+
+---
+
+### 4.4 Login & Authentication (`/login`)
+
+**Doel:** Flexibele auth met magic link (productie) en demo credentials (MVP), inclusief features showcase.
+
+**Layout:** Split-screen design (zoals `sign-in.tsx` component)
+- **Links (60%)**: Features showcase met visuals
+- **Rechts (40%)**: Login formulier
+
+**Features Showcase Sectie (Links):**
+- **Grid layout** met feature cards:
+  - AI-Gestuurde Intake (30 min → 5 sec)
+  - Automatische DSM Classificatie (15 min → 3 sec)
+  - Behandelplan Generatie (45 min → 10 sec)
+  - B1 Readability (30 min → 3 sec)
+- **Visuals**: Icons, stat cards, of screenshots per feature
+- **Metrics**: Tijdswinst per feature prominent getoond
+- **Design**: Inspiratie van `components/ui/sign-in.tsx` collage layout
+
+**Login Form Sectie (Rechts):**
+
+**Twee tabs/modes:**
+
+1. **Magic Link Login** (voor productie users)
+   - Email input
+   - "Stuur Magic Link" button
+   - Success: "Check je email voor login link"
+   - Nieuwe users: Account wordt automatisch aangemaakt
+   - Callback: `/auth/callback` → redirect naar `/epd/clients`
+
+2. **Demo Credentials Login** (voor demo)
+   - Email + Password inputs
+   - Toggle show/hide password
+   - "Login" button
+   - Quick demo button: Auto-fill + submit
+   - Success: Redirect naar `/epd/clients`
+   - Error: "Ongeldige credentials"
+
+**Demo credentials info box:**
+- Gele achtergrond
+- Credentials in monospace font
+- Copy-paste friendly
+
+**States:**
+- Loading: "Inloggen..." spinner
+- Error: Red error message
+- Success: Green message + redirect
+- Mobile: Features sectie wordt boven login form getoond (stack layout)
+
+**Navigatie:**
+- Link in MinimalNav: "Login"
+- Logo → terug naar `/`
+
+---
+
+### 4.5 EPD App - Coming Soon Dashboard (`/epd/clients`)
+
+**Doel:** Eerlijke communicatie dat app in Week 2 gebouwd wordt, manage expectations.
+
+**Functionaliteit:** (NIEUW - te bouwen)
+
+**Layout:**
+```
+┌────────────────────────────────────────────┐
+│ Header: Logo | "EPD Dashboard" | Logout    │
+├────────────────────────────────────────────┤
+│                                            │
+│   [Icon] Coming Soon                       │
+│                                            │
+│   EPD Dashboard - In Ontwikkeling          │
+│                                            │
+│   Week 2 (Nov 18-24): Client management    │
+│   Week 3 (Nov 25-Dec 1): AI integrations   │
+│                                            │
+│   [Mockup screenshot placeholder]          │
+│                                            │
+│   [Button: Terug naar Info] [Logout]       │
+│                                            │
+└────────────────────────────────────────────┘
+```
+
+**Content:**
+- **Heading**: "EPD Dashboard - Coming Week 2"
+- **Beschrijving**:
+  - "De EPD applicatie wordt momenteel gebouwd."
+  - "Bekijk de voortgang op de homepage (timeline sectie)"
+- **Timeline preview**:
+  - Week 2: Client management & CRUD
+  - Week 3: AI integrations (intake, profiel, plan)
+  - Week 4: Polish & onboarding
+- **Mockup/Screenshot**: Wireframe of visual preview van wat komt
+- **Actions**:
+  - Button: "Terug naar Prototype Info" → `/epd`
+  - Button: "Logout" → `/auth/logout` → redirect `/`
+
+**States:**
+- **Authenticated**: Normale weergave
+- **Not authenticated**: Redirect naar `/login` (middleware)
+
+**Navigatie:**
+- Logo → `/epd/clients` (blijf in app context)
+- "Terug naar Info" → `/epd` (exit app)
+- Logout → `/` (marketing)
+
+**Future states (Week 2+):**
+- Replace Coming Soon met werkende client lijst
+- Zelfde layout, andere content
+
+---
+
+## 5. UI-overzicht (visuele structuur)
+
+🎯 **Doel:** Globale schermopbouw voor developers en designers
+
+### 5.1 Marketing Layout (alle publieke paginas)
+
+```
+┌─────────────────────────────────────────────────────┐
+│ MinimalNav (fixed top)                              │
+│ [Logo] Home | Contact | Login                      │
+├─────────────────────────────────────────────────────┤
+│ ReadingProgress (scroll-based bar)                  │
+├─────────────────────────────────────────────────────┤
+│                                                     │
+│               Page Content                          │
+│          (hero, statement, timeline,                │
+│           features, forms, etc.)                    │
+│                                                     │
+├─────────────────────────────────────────────────────┤
+│ Footer: © AI Speedrun | ikbenlit.nl                │
+└─────────────────────────────────────────────────────┘
+```
+
+**Features:**
+- Minimal navigation: scroll-based color change
+- Reading progress bar (client component)
+- No sidebar
+- Full-width content
+- Mobile: Hamburger menu
+
+### 5.2 EPD App Layout (protected paginas)
+
+```
+┌─────────────────────────────────────────────────────┐
+│ App Header                                          │
+│ [Logo: EPD] EPD Dashboard          [User] [Logout] │
+├─────────────────────────────────────────────────────┤
+│                                                     │
+│                  Main Content                       │
+│             (coming soon state                      │
+│              of client list future)                 │
+│                                                     │
+├─────────────────────────────────────────────────────┤
+│ Footer: Terug naar Info | ikbenlit.nl              │
+└─────────────────────────────────────────────────────┘
+```
+
+**Features:**
+- Separate header (geen MinimalNav)
+- User state visible
+- Logout prominent
+- Exit to marketing link
+- Future: Sidebar toevoegen voor app nav
+
+---
+
+## 6. Navigatie Flows & User Journeys
+
+🎯 **Doel:** Visualiseren hoe gebruikers door de applicatie bewegen
+
+### Flow 1: Marketing Bezoeker → Lead
+
+```
+Landing (/)
+  ↓
+Lees Statement + Timeline (met features)
+  ↓
+Decision Point:
+  ├─→ "Probeer het prototype" → /login
+  │     ↓
+  │   Zie features showcase + login form
+  │     ↓
+  │   Login met demo credentials
+  │     ↓
+  │   /epd/clients (Coming Soon)
+  │
+  └─→ "Contact" → /contact
+        ↓
+      Vul formulier in
+        ↓
+      Lead opgeslagen ✓
+```
+
+### Flow 2: Demo Gebruiker → EPD App
+
+```
+Direct naar /login (nav link)
+  ↓
+Kies: Magic Link OF Demo Credentials
+  ↓
+[Demo pad]
+Fill demo@mini-ecd.demo + Demo2024!
+  ↓
+Submit
+  ↓
+Auth success → Middleware redirect
+  ↓
+/epd/clients (Coming Soon)
+  ↓
+Options:
+  ├─→ "Terug naar Info" → /epd
+  └─→ "Logout" → /
+```
+
+### Flow 3: Terugkerende Gebruiker (Week 2+)
+
+```
+Homepage / or direct /login
+  ↓
+Login (magic link of credentials)
+  ↓
+/epd/clients (werkende app)
+  ↓
+Client lijst → Client detail
+  ↓
+Intake → AI → Profiel → Plan
+  ↓
+Logout → terug naar marketing
+```
+
+### Flow 4: Build-in-Public Volger
+
+```
+LinkedIn post → Homepage
+  ↓
+Scroll naar Timeline (met features per week)
+  ↓
+Lees weekly updates + zie features
+  ↓
+Decision:
+  ├─→ "Probeer demo" → /login (met features showcase)
+  ├─→ "Contact" → /contact
+  └─→ Exit (volg op LinkedIn)
+```
+
+---
+
+## 7. Interacties met AI (functionele beschrijving)
+
+🎯 **Doel:** Waar AI voorkomt in toekomstige EPD app (Week 3+)
+
+📘 **Toelichting:** Deze sectie beschrijft toekomstige AI features die nog niet in Coming Soon state zitten.
+
+| Locatie | AI-actie | Trigger | Input | Output | Timing |
+|---------|----------|---------|-------|--------|--------|
+| Intake Editor | Samenvatten | Button "AI Samenvatten" | TipTap editor content (max 20k chars) | 5-8 bullets in rechterpaneel | ~3-5 sec |
+| Intake Editor | B1 Leesbaarheid | Button "Vereenvoudig taal" | Selected text of hele intake | Herschreven versie in B1 Nederlands | ~5 sec |
+| Profiel Tab | Extract Problemen | Button "AI Analyse" | Intake content | DSM-light categorie + severity + rationale | ~5-8 sec |
+| Plan Tab | Genereer Plan | Button "Genereer Behandelplan" | Profiel + intake data | 4 secties: Doelen, Interventies, Freq/Duur, Meetmomenten | ~10-15 sec |
+
+**AI-rail (rechterpaneel) gedrag:**
+- Slides in vanaf rechts bij AI actie
+- Loading state: Spinner + "AI analyseert..."
+- Result state: Content + bronverwijzingen
+- Actions: "Invoegen", "Regenereer", "Annuleer"
+- Preview mode: Highlight waar content ingevoegd wordt
+
+**Cost tracking** (toekomstig):
+- Alle AI calls worden gelogd in `ai_events` table
+- Dashboard toont: Aantal calls, tokens gebruikt, geschatte kosten
+- Target: <€5/maand voor MVP demo use
+
+---
+
+## 8. Routes & Toegangsrechten
+
+🎯 **Doel:** Duidelijk overzicht welke routes publiek of protected zijn
+
+### Publieke Routes (geen auth vereist)
+
+| Route | Naam | Functie | Status |
+|-------|------|---------|--------|
+| `/` | Marketing Homepage | Statement + Timeline (met features) | ✅ Refactor |
+| `/contact` | Contact Form | Lead capture | ✅ Bestaand |
+| `/login` | Login Pagina | Auth flow + features showcase | ✅ Refactor |
+| `/auth/callback` | OAuth Callback | Magic link handler | ✅ Bestaand |
+
+**Verwijderd:**
+- `/epd` - EPD Demo Info pagina (features nu in timeline en login)
+
+### Protected Routes (auth vereist)
+
+| Route | Naam | Functie | Status |
+|-------|------|---------|--------|
+| `/epd/clients` | EPD Dashboard | Coming Soon (Week 2: Client lijst) | ⏳ Te bouwen |
+| `/epd/clients/[id]` | Client Detail | Client dossier (Week 2) | 🔄 Toekomstig |
+| `/epd/clients/[id]/intake` | Intake Editor | TipTap + AI (Week 3) | 🔄 Toekomstig |
+| `/epd/clients/[id]/profile` | Probleem Profiel | DSM-light + AI (Week 3) | 🔄 Toekomstig |
+| `/epd/clients/[id]/plan` | Behandelplan | SMART doelen + AI (Week 3) | 🔄 Toekomstig |
+
+### API Routes
+
+| Route | Naam | Functie | Auth | Status |
+|-------|------|---------|------|--------|
+| `/api/leads` | Lead Submission | POST contact form data | No | ✅ Bestaand |
+| `/api/ai/summarize` | AI Summarize | POST intake → bullets | Yes | 🔄 Week 3 |
+| `/api/ai/categorize` | AI Categorize | POST intake → DSM profile | Yes | 🔄 Week 3 |
+| `/api/ai/plan` | AI Plan Generator | POST profile → treatment plan | Yes | 🔄 Week 3 |
+| `/auth/logout` | Logout | Supabase signOut | Yes | ✅ Bestaand |
+
+### Middleware Logic (simplified)
+
+```typescript
+// Public routes (no redirect)
+const publicRoutes = [
+  '/', '/contact', '/login',
+  '/auth/callback', '/auth/logout'
+]
+
+// Logic
+if (!user && !isPublicRoute) {
+  redirect('/login?redirect=' + pathname)
+}
+
+if (user && pathname === '/login') {
+  redirect('/epd/clients')
+}
+```
+
+---
+
+## 9. Content Management Strategie
+
+🎯 **Doel:** Hoe content beheerd en bijgewerkt wordt
+
+### Timeline Content (Build-in-Public updates)
+
+**Locatie**: `content/timeline/` of `content/nl/timeline.json`
+
+**Structuur per week**:
+```json
+{
+  "weekNumber": 1,
+  "title": "Week 1 • Nov 11-17",
+  "status": "completed", // completed | in_progress | planned
+  "description": "Marketing site foundation. Hero, statement setup, database schema aangemaakt.",
+  "features": [
+    {
+      "title": "AI-Gestuurde Intake",
+      "description": "Schrijf een intakeverslag en krijg binnen seconden een gestructureerde samenvatting",
+      "time": "< 5 seconden",
+      "traditional": "15-20 minuten handmatig",
+      "icon": "Brain"
+    },
+    {
+      "title": "Automatische DSM Classificatie",
+      "description": "Het systeem analyseert de intake en stelt DSM-categorieën voor",
+      "time": "< 3 seconden",
+      "traditional": "10-15 minuten analyse",
+      "icon": "Zap"
+    }
+  ],
+  "metrics": {
+    "developmentHours": 30,
+    "infrastructureCost": 50,
+    "totalCost": 50
+  },
+  "achievements": [
+    "Landing page met hero + statement",
+    "Timeline component met features",
+    "Contact form + lead capture API",
+    "Database schema (5 core tables)",
+    "Supabase Auth + RLS policies"
+  ],
+  "visual": "/timeline/week-1-screenshot.png" // optional
+}
+```
+
+**Update frequency**: Einde van elke week (zaterdag/zondag)
+
+**Ownership**: Handmatig door Colin via JSON edit
+
+**Alternative**: MDX files met frontmatter voor meer flexibiliteit
+
+### Static Content (niet-timeline)
+
+| Content Type | Locatie | Format | Update Freq |
+|--------------|---------|--------|-------------|
+| Navigation | `content/nl/navigation.json` | JSON | Ad-hoc |
+| Timeline (met features) | `content/nl/timeline.json` | JSON | Weekly |
+| EPD Features (voor login) | `content/nl/epd.json` | JSON | Rarely |
+| Metadata (SEO) | `content/nl/metadata.json` | JSON | Once |
+
+---
+
+## 10. Gebruikersrollen en rechten
+
+🎯 **Doel:** Wie kan wat binnen de applicatie
+
+| Rol | Toegang tot | Beperkingen | Auth Method |
+|-----|-------------|-------------|-------------|
+| **Anonymous Visitor** | Marketing pages (/, /contact, /login) | Geen EPD app toegang | - |
+| **Demo User** | Alles (marketing + EPD app) | Fictieve data only, geen wijzigingen persistent | Email/password (demo credentials) |
+| **Magic Link User** | Marketing + EPD app (toekomstig) | Eigen dossiers (RLS) | Magic link email |
+| **Admin** (toekomstig) | Alle dossiers + metrics | - | Special credentials |
+
+**RLS (Row Level Security) in Supabase:**
+- Elke gebruiker ziet alleen eigen clients/notes/profiles/plans
+- Policy: `auth.uid() = created_by`
+- Demo users delen fictieve dataset
+- Real users: isolated per user_id
+
+---
+
+## 11. States & Edge Cases
+
+🎯 **Doel:** Hoe systeem omgaat met uitzonderlijke situaties
+
+### Marketing Website
+
+| Scenario | Gedrag |
+|----------|--------|
+| Timeline data niet beschikbaar | Toon skeleton loading + "Updates coming soon" |
+| Image load failure | Fallback naar placeholder met initials |
+| Form submission error | Retry optie + error message + support email |
+| Slow network | Progressive loading, defer non-critical content |
+
+### Login Flow
+
+| Scenario | Gedrag |
+|----------|--------|
+| Ongeldige demo credentials | Error: "Credentials incorrect. Gebruik demo@mini-ecd.demo" |
+| Magic link expired | Error + "Request new link" button |
+| Already logged in | Direct redirect naar `/epd/clients` |
+| Network error tijdens auth | Error message + retry button |
+
+### EPD App (Coming Soon)
+
+| Scenario | Gedrag |
+|----------|--------|
+| User bezoekt direct `/epd/clients` | Middleware check → redirect `/login` als niet ingelogd |
+| Logout tijdens session | Redirect naar `/` + success toast |
+| Session expired | Redirect naar `/login` + "Session verlopen, log opnieuw in" |
+
+### Week 2+ (Toekomstig - Client CRUD)
+
+| Scenario | Gedrag |
+|----------|--------|
+| Lege state (geen clients) | "Voeg je eerste cliënt toe" + CTA button |
+| Delete confirmation | Modal: "Weet je zeker? Alle dossiers worden verwijderd" |
+| Concurrent edit conflict | Toast: "Data is veranderd, herlaad pagina" |
+| AI API failure | Retry 3x, dan error + support contact |
+
+---
+
+## 12. Bijlagen & Referenties
+
+🎯 **Doel:** Linken naar gerelateerde documenten
+
+**Mission Control Documents:**
+- **PRD v1.2** (`docs/specs/prd-mini-ecd-v2.md`) - Product Requirements & Business Case
+- **TO v1.2** (`docs/specs/to-mini-ecd-v1_2.md`) - Technische Architectuur & Database Schema
+- **Bouwplan v1.6** (`docs/specs/bouwplan-ai-speedrun-marketing-first-v1.1.md`) - Epic & Story Planning
+- **UX Stylesheet** (`docs/specs/ux-stylesheet.md`) - Design System & Tailwind Config
+- **API Specs** (`docs/specs/api-acces-mini-ecd.md`) - Endpoint Documentation
+
+**External Resources:**
+- [Aceternity UI Timeline](https://21st.dev/r/timeline) - Timeline component inspiratie
+- [Supabase Auth Docs](https://supabase.com/docs/guides/auth) - Authentication flows
+- [Next.js 15 Routing](https://nextjs.org/docs/app/building-your-application/routing) - App Router patterns
+
+**Design References:**
+- `docs/design/timeline-comp.tsx` - Timeline component voorbeeld
+- Bestaande marketing components in `app/(marketing)/components/`
+
+---
+
+## 13. Implementatie Prioriteiten (voor Developers)
+
+🎯 **Doel:** Volgorde van bouwen voor maximale impact
+
+### 🔴 Critical (Week 1 fixes - nu)
+
+1. **Verwijder EPD demo pagina** (15 min)
+   - Delete `/app/(marketing)/epd/page.tsx`
+   - Update navigation (verwijder "EPD Prototype" link)
+   - Update middleware (verwijder `/epd` uit public routes)
+
+2. **Coming Soon page** (30 min)
+   - Create `/epd/clients/page.tsx`
+   - Simple layout + logout
+   - Middleware redirect update
+
+### 🟡 High Priority (Week 1-2 refactor)
+
+3. **Timeline component met features** (3-4 uur)
+   - Install/copy Aceternity timeline
+   - Create timeline content JSON met features array
+   - Add features showcase per week item
+   - Add to homepage
+
+4. **Homepage vereenvoudiging** (2-3 uur)
+   - Remove manifesto long-form
+   - Add statement section
+   - Integrate timeline (met features)
+   - Update CTA: "Probeer het prototype" → `/login`
+
+5. **Login pagina met features showcase** (2-3 uur)
+   - Split-screen layout (features links, login rechts)
+   - Features grid component (hergebruik van EPD features)
+   - Mobile responsive (stack layout)
+   - Integreer bestaande login functionaliteit
+
+### 🟢 Medium Priority (Week 2 app build)
+
+5. **EPD App foundation** (Week 2)
+   - Client CRUD
+   - App layout met sidebar
+   - Navigation tussen contexts
+
+6. **AI integrations** (Week 3)
+   - API endpoints
+   - TipTap editor
+   - AI-rail components
+
+---
+
+## Changelog
+
+| Versie | Datum | Auteur | Wijzigingen |
+|--------|-------|--------|-------------|
+| v2.0 | 17-11-2024 | Colin | Initiële versie - Refactor van v1.2 implementatie. Nieuwe timeline approach, vereenvoudigde marketing, /epd/* routing, coming soon strategie |
+| v2.1 | 17-11-2024 | Colin | Verwijderd: Separate EPD demo pagina (/epd). Features nu in timeline op homepage en features showcase op login pagina. Vereenvoudigde user journey. |
+
+---
+
+**Einde Functioneel Ontwerp v2.1**