🧩 Functioneel Ontwerp (FO) — Mini-ECD Prototype
Projectnaam: Mini-ECD Prototype
Versie: v2.0 (MVP + Onboarding + Marketing Site)
Datum: 15-11-2025
Auteur: Ontwikkelteam AI Speedrun

1. Doel en relatie met het PRD
🎯 Doel van dit document:
Het Functioneel Ontwerp (FO) beschrijft hoe de Mini-ECD applicatie functioneel werkt — wat de gebruiker ziet, doet en ervaart tijdens de AI-inspiratiesessie én de LinkedIn Build Serie. Waar het PRD uitlegt wat en waarom, laat het FO zien hoe dit in de praktijk werkt.
📘 Context:
Dit FO ondersteunt twee hoofddoelen:

EPD Demo: Kernflow intake → probleemclassificatie → behandelplan met AI-ondersteuning
Build in Public: Marketing website die het development proces transparant toont voor LinkedIn audience

Nieuw in v2.0:

Onboarding systeem (walkthrough + context-aware tooltips)
Marketing website routes (landing, build-log, demo info, contact)
UX-guidance systeem dat onderscheidt van legacy EPD's

Relatie met andere documenten:

PRD v1.2: definieert de vereisten en scope (inclusief Software on Demand strategie)
TO (Technisch Ontwerp): beschrijft de technische implementatie
UX Stylesheet: specificeert kleuren en styling
Bouwplan: phased development plan


2. Overzicht van de belangrijkste onderdelen
De applicatie bestaat uit twee hoofdsecties:
A. Marketing Website (Public)

Landing Page — Software on Demand pitch met live build metrics
Build Log — Week-by-week transparant development proces
Live Demo Info — Demo credentials en walkthrough video
How It Works — Software on Demand explainer + ROI calculator
Contact/Request — Lead generation met intake form

B. EPD Application (Protected)

Cliëntenlijst — overzicht met zoek/filter
Cliëntdossier / Dashboard — configureerbare tegels
Intakeverslag — rich text editor met AI-ondersteuning
Probleemprofiel (DSM-light) — categorisatie en severity
Behandelplan — gestructureerd plan met SMART-doelen
Onboarding System — walkthrough + tooltips + help-iconen
(Stretch) Mini-agenda — afspraken
(Stretch) Rapportage — PDF export


3. User Stories
Marketing Website User Stories
IDRolDoel / ActieVerwachte waardePrioriteitUS-12BezoekerLanding page bekijken met live build metricsBegrijpen Software on Demand conceptHoogUS-13BezoekerBuild-log doorlopenTransparantie over development procesHoogUS-14BezoekerDemo info en credentials vindenKunnen proberen zonder accountMiddelUS-15LeadContact formulier invullenSoftware on Demand project aanvragenHoogUS-16LezerHow It Works lezen met ROI calculatorBeslissen of geschikt voor eigen caseMiddel
EPD User Stories (Primair)
IDRolDoel / ActieVerwachte waardePrioriteitUS-01BehandelaarNieuwe cliënt aanmaken met basisgegevensKan direct starten met intakeHoogUS-02BehandelaarIntakeverslag schrijven in rich text editorFlexibel notuleren met opmaakHoogUS-03BehandelaarIntakeverslag samenvatten met AITijdbesparing, sneller overzichtHoogUS-04BehandelaarLeesbaarheid verbeteren naar B1-niveau met AICliëntvriendelijke communicatieMiddelUS-05BehandelaarAI-suggestie krijgen voor DSM-light categorie en severitySnellere en consistentere classificatieHoogUS-06BehandelaarBehandelplan genereren op basis van intake/profielEfficiënter plannen, SMART-doelenHoogUS-07BehandelaarGegenereerd plan bewerken en publicerenControle over eindresultaatHoogUS-08BehandelaarDashboard-tegels configurerenPersonalisatie werkruimteLaagUS-17GebruikerOnboarding walkthrough doorlopenSnel werkend zonder handleidingHoogUS-18GebruikerContext-aware help zien bij complexe featuresBegrijpen zonder documentatieMiddelUS-19GebruikerHelp-iconen gebruiken voor uitlegOn-demand informatieLaag
Secundaire User Stories (Stakeholders)
IDRolDoel / ActieVerwachte waardePrioriteitUS-20Product OwnerDemo-flow doorlopen tijdens workshopBegrijpt AI-toegevoegde waardeHoogUS-21DeveloperZien hoe AI in ECD-proces geïntegreerd isInspiratie voor eigen implementatiesMiddelUS-22LinkedIn FollowerBuild progress volgenLeren van transparant developmentHoog

4. Functionele werking per onderdeel
SECTIE A: MARKETING WEBSITE
4.1 Landing Page (/)
Doel: Software on Demand concept verkopen via EPD build als proof.
Structuur:
┌─────────────────────────────────────────────────────────────┐
│ Header: Logo | Build Log | Demo | Contact                   │
├─────────────────────────────────────────────────────────────┤
│ HERO SECTION                                                │
│ ┌───────────────────────────────────────────────────────┐   │
│ │ "Software on Demand: Van idee naar product in weken" │   │
│ │                                                       │   │
│ │ Live Counter:                                         │   │
│ │ Week 3 van 4 | 65 uur development | €135 kosten      │   │
│ │                                                       │   │
│ │ [Volg op LinkedIn] [Probeer Live Demo]               │   │
│ └───────────────────────────────────────────────────────┘   │
│                                                             │
│ COMPARISON TABLE                                            │
│ ┌───────────────┬─────────────────┬──────────────────────┐  │
│ │               │ Traditioneel    │ Software on Demand   │  │
│ ├───────────────┼─────────────────┼──────────────────────┤  │
│ │ Tijd          │ 12-24 maanden   │ 4 weken              │  │
│ │ Kosten        │ €100.000+       │ €200 (build)         │  │
│ │ Team          │ 5+ developers   │ 1 dev + AI tools     │  │
│ │ Run costs     │ €5.000+/mnd     │ €50/mnd              │  │
│ └───────────────┴─────────────────┴──────────────────────┘  │
│                                                             │
│ THE PROBLEM                                                 │
│ • Enterprise software: onbetaalbaar voor MKB               │
│ • Vendor lock-in en rigide roadmaps                        │
│ • 2 jaar wachten op custom features                        │
│                                                             │
│ THE SOLUTION                                                │
│ • AI-assisted development: 10x sneller                     │
│ • One-dev teams = enterprise quality                       │
│ • Pay-as-you-grow vanaf €50/mnd                            │
│                                                             │
│ LIVE PROOF: EPD BUILD                                       │
│ ┌─────────────────────────────────────────────────────┐     │
│ │ Week 1: Foundation ✓      8 uur    €0              │     │
│ │ Week 2: AI Integration ✓  12 uur   €25             │     │
│ │ Week 3: Core Features →   15 uur   €35             │     │
│ │ Week 4: Polish & Launch   10 uur   €15 (estimate)  │     │
│ └─────────────────────────────────────────────────────┘     │
│                                                             │
│ STACK SHOWCASE                                              │
│ [Next.js] [Claude AI] [Supabase] [Vercel]                  │
│ "Same tools big tech uses, now for small business"         │
│                                                             │
│ CTA SECTION                                                 │
│ [Volg de build op LinkedIn] (Primary)                      │
│ [Bespreek jouw project] (Secondary)                        │
│ [Probeer live demo] (Tertiary)                             │
└─────────────────────────────────────────────────────────────┘
Functionaliteit:

Live Counter: Updates wekelijks (hardcoded, geen real-time)
Comparison Table: Visual emphasis op contrast (rood vs groen)
CTA tracking: Click events naar analytics
Responsive: Mobile-first design
Scroll animations: Subtle fade-ins voor engagement

States:

Loading: Skeleton voor counter area
Mobile: Stack vertically, simplified table
No JS: Graceful degradation, static content


4.2 Build Log (/build-log)
Doel: Transparant week-by-week development proces tonen.
Layout:
┌─────────────────────────────────────────────────────────────┐
│ Breadcrumb: Home > Build Log                                │
├─────────────────────────────────────────────────────────────┤
│ RUNNING TOTALS DASHBOARD                                    │
│ ┌──────────┬──────────┬──────────┬──────────────────────┐   │
│ │ 45 uur   │ €160     │ 8 feat.  │ vs 500h traditional │   │
│ │ totaal   │ kosten   │ done     │ (9x sneller)        │   │
│ └──────────┴──────────┴──────────┴──────────────────────┘   │
│                                                             │
│ TIMELINE (newest first)                                     │
│ ┌─────────────────────────────────────────────────────┐     │
│ │ WEEK 3: CORE FEATURES (Nov 11-15)                   │     │
│ │ ───────────────────────────────────────────────      │     │
│ │ Status: In Progress | 15 uur | €35 API kosten       │     │
│ │                                                      │     │
│ │ What we built:                                       │     │
│ │ ✓ Treatment plan generation                         │     │
│ │ ✓ SMART goals formulation                           │     │
│ │ ✓ Versioning & publish flow                         │     │
│ │ → Dashboard with tiles (in progress)                │     │
│ │                                                      │     │
│ │ How we built it:                                     │     │
│ │ • Claude AI prompt voor SMART-doelen:               │     │
│ │   [Code snippet collapsed - click to expand]        │     │
│ │ • Supabase JSONB voor plan storage                  │     │
│ │ • Optimistic UI updates met Zustand                 │     │
│ │                                                      │     │
│ │ Time vs Traditional:                                 │     │
│ │ [Chart: 15h actual vs 80h traditional estimate]     │     │
│ │                                                      │     │
│ │ Challenges & Solutions:                              │     │
│ │ • Challenge: SMART criteria validation              │     │
│ │   Solution: Zod schema + AI double-check            │     │
│ │ • Challenge: Version conflicts                      │     │
│ │   Solution: Optimistic locking met updated_at       │     │
│ │                                                      │     │
│ │ [Embedded LinkedIn Post]                            │     │
│ │ [View on LinkedIn →]                                │     │
│ └─────────────────────────────────────────────────────┘     │
│                                                             │
│ ┌─────────────────────────────────────────────────────┐     │
│ │ WEEK 2: AI INTEGRATION (Nov 4-8)                    │     │
│ │ [Similar structure, collapsed by default]           │     │
│ └─────────────────────────────────────────────────────┘     │
│                                                             │
│ ┌─────────────────────────────────────────────────────┐     │
│ │ WEEK 1: FOUNDATION (Oct 28 - Nov 1)                 │     │
│ │ [Similar structure, collapsed by default]           │     │
│ └─────────────────────────────────────────────────────┘     │
└─────────────────────────────────────────────────────────────┘
Functionaliteit:

Accordion per week: Expand/collapse voor leesbaarheid
Code snippets: Syntax highlighting met copy button
Charts: Simple bar charts (Chart.js) voor tijd vergelijking
LinkedIn embeds: iframe voor posts (fallback: screenshot + link)
Share buttons: Per week delen op social media
RSS feed: Voor developers die updates willen volgen

Per Entry bevat:

Status badge (Done ✓ | In Progress → | Planned ○)
Uren besteed + API kosten
Features delivered (checkmarks)
Technical implementation details
Time comparison chart
Challenges & solutions (leer-aspect)
Embedded LinkedIn post

States:

Loading: Skeleton voor timeline entries
No entries yet: "Week 1 starting soon..." placeholder
Error loading embed: Fallback naar screenshot


4.3 Live Demo Info (/demo)
Doel: Bezoekers informeren over demo + credentials geven.
Layout:
┌─────────────────────────────────────────────────────────────┐
│ "Probeer het zelf" HERO                                     │
│ ┌───────────────────────────────────────────────────────┐   │
│ │ Video Walkthrough (2 min)                             │   │
│ │ [▶ Play]                                              │   │
│ │                                                       │   │
│ │ Demo Credentials:                                     │   │
│ │ Email: demo@aispeedrun.nl                            │   │
│ │ Password: Demo2025!                                   │   │
│ │ [Copy] [Launch Demo →]                               │   │
│ └───────────────────────────────────────────────────────┘   │
│                                                             │
│ WHAT YOU'LL SEE                                             │
│ ┌─────────────────────────────────────────────────────┐     │
│ │ 1. Onboarding walkthrough (3 min)                    │     │
│ │ 2. Create new client                                 │     │
│ │ 3. Write intake + AI summarize                       │     │
│ │ 4. AI problem extraction                             │     │
│ │ 5. Generate treatment plan                           │     │
│ │ 6. Publish & dashboard view                          │     │
│ └─────────────────────────────────────────────────────┘     │
│                                                             │
│ FEATURE COMPARISON                                          │
│ ┌───────────────────┬──────────────┬─────────────────────┐  │
│ │ Feature           │ Enterprise   │ AI Speedrun (4wks)  │  │
│ ├───────────────────┼──────────────┼─────────────────────┤  │
│ │ Intake editor     │ ✓ Basic      │ ✓ Rich text         │  │
│ │ AI summarize      │ ✗            │ ✓ 5 sec             │  │
│ │ DSM classification│ ✓ Manual     │ ✓ AI-assisted       │  │
│ │ Treatment plans   │ ✓ Templates  │ ✓ AI-generated      │  │
│ │ Onboarding        │ ✗ PDF manual │ ✓ Interactive 3min  │  │
│ │ Setup time        │ 6 months     │ Instant (demo)      │  │
│ └───────────────────┴──────────────┴─────────────────────┘  │
│                                                             │
│ "This took 4 weeks. Traditional build: 24 months."          │
│                                                             │
│ [Start Demo] [Contact voor eigen build]                    │
└─────────────────────────────────────────────────────────────┘
Functionaliteit:

Video player: YouTube embed of custom player
Copy credentials: One-click copy buttons
Launch demo: Direct link naar /clients (auto-login indien credentials gekopieerd)
Feature comparison: Toggle voor meer details per feature
CTA tracking: Conversie naar contact form

States:

Demo offline: "Temporarily unavailable" message + contact CTA
Video loading: Poster image met play overlay
Mobile: Video full-width, credentials in expandable card


4.4 How It Works (/how-it-works)
Doel: Software on Demand concept uitleggen + interactive ROI calculator.
Structuur:
┌─────────────────────────────────────────────────────────────┐
│ WHAT IS SOFTWARE ON DEMAND                                  │
│ • Custom software zonder vast dev team                      │
│ • AI-assisted development = 10x sneller                     │
│ • Pay-as-you-grow pricing model                             │
│ • Same quality as enterprise, fraction of cost              │
│                                                             │
│ WHEN IT MAKES SENSE                                         │
│ ┌──────────────┬────────────────┬─────────────────────┐     │
│ │ Use Case     │ SaaS           │ Software on Demand  │     │
│ ├──────────────┼────────────────┼─────────────────────┤     │
│ │ Generic need │ ✓ Best choice  │ Overkill            │     │
│ │ Custom flow  │ Limited        │ ✓ Perfect fit       │     │
│ │ Integration  │ Via APIs       │ ✓ Native            │     │
│ │ Control      │ Vendor decides │ ✓ You decide        │     │
│ │ Cost (year1) │ €5-50k         │ €200 + €600/yr      │     │
│ └──────────────┴────────────────┴─────────────────────┘     │
│                                                             │
│ PRICING MODEL TRANSPARENCY                                  │
│ One-time build: €150-500 (depends on complexity)           │
│ Monthly run: €50-150 (infrastructure + AI usage)            │
│ Updates: €50/hour on-demand                                 │
│                                                             │
│ CASE STUDY: EPD BUILD BREAKDOWN                             │
│ [Interactive expandable sections per week]                  │
│ Week 1: €0 (setup) | Week 2: €25 (AI) | etc.               │
│                                                             │
│ ROI CALCULATOR (INTERACTIVE)                                │
│ ┌─────────────────────────────────────────────────────┐     │
│ │ Hoeveel uur per week bespaar je? [____] uur         │     │
│ │ Wat is je uurtarief? €[____]                        │     │
│ │ Hoeveel gebruikers? [____]                          │     │
│ │                                                      │     │
│ │ ══ RESULTATEN ══                                     │     │
│ │ Besparing per maand: €[calculated]                  │     │
│ │ Break-even: [X] maanden                             │     │
│ │ ROI jaar 1: [Y]%                                     │     │
│ │                                                      │     │
│ │ [Download rapport] [Bespreek met expert]            │     │
│ └─────────────────────────────────────────────────────┘     │
└─────────────────────────────────────────────────────────────┘
Functionaliteit:

Interactive calculator: Real-time berekening bij input change
Download rapport: PDF met calculation details
Comparison toggles: Show/hide details per scenario
CTA: Calculator results → contact form pre-filled

Calculator Logic:
typescriptsavings_per_month = hours_saved_per_week * 4 * hourly_rate * num_users
build_cost = 200 // simplified for demo
monthly_run = 50
break_even_months = build_cost / (savings_per_month - monthly_run)
roi_year1 = ((savings_per_month * 12 - build_cost - monthly_run * 12) / build_cost) * 100
```

---

### 4.5 Contact / Request (`/contact`)

**Doel:** Lead generation voor Software on Demand projecten.

**Layout:**
```
┌─────────────────────────────────────────────────────────────┐
│ "Beschrijf jouw software need in 3 zinnen"                  │
│                                                             │
│ INTAKE FORM                                                 │
│ ┌─────────────────────────────────────────────────────┐     │
│ │ Naam: [________________]                            │     │
│ │ Email: [________________]                           │     │
│ │ Bedrijf: [________________]                         │     │
│ │                                                      │     │
│ │ Wat wil je bouwen? (max 500 chars)                  │     │
│ │ [________________________________]                  │     │
│ │ [________________________________]                  │     │
│ │                                                      │     │
│ │ Voor hoeveel gebruikers? [____]                     │     │
│ │                                                      │     │
│ │ Budget indicatie:                                    │     │
│ │ ( ) €0-1k  ( ) €1-5k  ( ) €5-10k  ( ) >€10k         │     │
│ │                                                      │     │
│ │ ══ GESCHATTE TIMELINE & KOSTEN ══                    │     │
│ │ Gebaseerd op je input:                              │     │
│ │ • Bouwtijd: 3-6 weken                               │     │
│ │ • Kosten: €300-800                                  │     │
│ │ • Run: €50-100/mnd                                  │     │
│ │                                                      │     │
│ │ [Verstuur aanvraag]                                 │     │
│ └─────────────────────────────────────────────────────┘     │
│                                                             │
│ OF PLAN EEN GESPREK                                         │
│ [Calendly embed - 30min intake call]                       │
│                                                             │
│ TRUST SIGNALS                                               │
│ ┌──────────────┬──────────────┬──────────────────────┐      │
│ │ "Colin heeft │ "Binnen 3    │ "Van €100k project   │      │
│ │ ons AI-tool  │ weken live,  │ naar €500. Mind =    │      │
│ │ in 2 weken   │ werkt perfect│ blown."              │      │
│ │ gebouwd"     │ voor ons"    │                      │      │
│ │ - Jan, MKB   │ - Sarah, HR  │ - Tom, Startup       │      │
│ └──────────────┴──────────────┴──────────────────────┘      │
└─────────────────────────────────────────────────────────────┘
```

**Functionaliteit:**
- **Smart estimates**: Based on description length + user count
- **Form validation**: Zod schema, real-time feedback
- **Calendly integration**: Embedded booking widget
- **Pre-fill from calculator**: If coming from ROI page
- **Email notification**: To Colin + auto-reply to lead
- **CRM integration**: Store in database voor follow-up

**States:**
- **Validating**: Inline error messages
- **Submitting**: Loading spinner on button
- **Success**: "Thanks! We'll contact you within 24h" + confirmation email
- **Error**: "Something went wrong. Email directly: colin@ikbenlit.nl"

---

### SECTIE B: EPD APPLICATION

### 4.6 Cliëntenlijst

**Doel:** Overzicht van alle geregistreerde cliënten met mogelijkheid om nieuwe cliënten toe te voegen.

**Functionaliteit:**
- **Weergave:**
  - Tabel met kolommen: ClientID, Naam (Voornaam + Achternaam), Geboortedatum, Laatste update
  - Zoekbalk bovenaan voor filteren op naam of ClientID
  - Knop **+ Nieuwe cliënt** rechtsboven

- **Acties:**
  - Klik op rij → navigeert naar Cliëntdossier (Dashboard)
  - Klik **+ Nieuwe cliënt** → opent modal/drawer met formulier:
    - Velden: Voornaam (verplicht), Achternaam (verplicht), Geboortedatum (datum picker)
    - Knop **Annuleren** | **Opslaan**
    - Bij opslaan: ClientID wordt automatisch gegenereerd (UUID)

- **States:**
  - **Leeg-staat:** "Nog geen cliënten. Klik op '+ Nieuwe cliënt' om te starten."
  - **Laden:** Skeleton loaders voor tabelrijen
  - **Fout:** Toast-melding "Kon cliënten niet laden. Probeer opnieuw."

---

### 4.7 Cliëntdossier / Dashboard

**Doel:** Overzichtspagina per cliënt met configureerbare informatie-tegels.

**Structuur:**
- **Topbalk:**
  - Breadcrumb: Cliënten > [Naam cliënt]
  - Rechtsboven: Knop **Instellingen** (tandwiel-icoon) → opent tegel-configuratie modal

- **Linkernavigatie (verticaal):**
  - Menu-items: Overzicht (actief) | Intakes | Probleemprofiel | Behandelplan | *(Afspraken)*
  - Actieve item heeft blauwe accent-bar en lichte achtergrond

- **Middenpaneel (tegels):**
  - Configureerbare tegels (via instellingen aan/uit te zetten):
    1. **Basisgegevens** — ClientID, Naam, Geboortedatum
    2. **Laatste Intake** — titel, datum, eerste 3 regels + "Lees meer..."
    3. **Probleemprofiel** — DSM-light categorie badge + severity badge (Laag/Middel/Hoog)
    4. **Behandelplan** — status (Concept/Gepubliceerd), aantal doelen, laatst bijgewerkt
    5. **Afspraken** — laatste afspraak + eerstvolgende 3 afspraken (optioneel, stretch)

**Interacties:**
- Klik op tegel → navigeert naar desbetreffende sectie (bv. Intake-tegel → Intakes tab)
- **Instellingen modal:**
  - Checkboxes per tegel om zichtbaarheid in/uit te schakelen
  - Knop **Opslaan** → slaat voorkeur op (localStorage)

---

### 4.8 Intakeverslag

**Doel:** Creëren en bewerken van intake-notities met rich text en AI-ondersteuning.

**Layout:**
```
┌──────────────────────────────────────────────────────────────┐
│ Topbalk: Cliëntnaam | [Opslaan] [AI-acties ▼]                │
├───────────────┬──────────────────────────┬───────────────────┤
│ Linkernav     │  Editor (hoofdpaneel)    │ AI-rail           │
│ (tabs)        │  TipTap rich text        │ (rechts)          │
│               │                          │                   │
│ Overzicht     │ [Titel: ___________]     │ [AI-resultaat     │
│ Intakes ●     │ [Tag: Intake ▼]          │  area]            │
│ Profiel       │                          │                   │
│ Plan          │ Rich text toolbar:       │ [Preview]         │
│               │ [B][I][U][•][1.]["]      │                   │
│               │                          │ [Invoegen]        │
│               │ Editor content area...   │ [Kopiëren]        │
│               │                          │ [Annuleren]       │
│               │ [Opgeslagen om 14:32]    │                   │
├───────────────┴──────────────────────────┴───────────────────┤
│ Toast area (rechtsonder): meldingen                          │
└──────────────────────────────────────────────────────────────┘
```

**Hoofdpaneel (Editor):**
- **Formulier boven editor:**
  - Titel (optioneel): "Intake [datum]"
  - Tag dropdown: Intake | Evaluatie | Plan

- **TipTap rich text editor:**
  - Toolbar: Bold, Italic, Underline, Bullet list, Numbered list, Blockquote
  - Placeholder: "Noteer hier de intake-informatie..."
  - Auto-save indicator: "Opgeslagen om [tijd]" onder editor

- **Knoppen onder editor:**
  - **Opslaan** (primair, blauw) — slaat verslag op
  - **AI-acties** dropdown (secundair, grijs):
    - Samenvatten
    - Verbeter leesbaarheid (B1)
    - Extract problemen

**AI-rail (rechterpaneel):**
- **Initieel:** Leeg met prompt "Selecteer een AI-actie om te beginnen"

- **Na AI-actie:**
  - **Header:** "AI-resultaat: [actienaam]" + loading spinner tijdens verwerking
  - **Content area:**
    - Voor **Samenvatten**: Bulletpoints van samenvatting
    - Voor **Leesbaarheid**: Herschreven tekst (diff-weergave optioneel)
    - Voor **Extract**: Voorgestelde categorie + severity + bronzinnen (highlighted in editor)
  - **Acties:**
    - **Invoegen** (primair) — voegt resultaat in editor toe
    - **Kopiëren** (secundair) — kopieert naar clipboard
    - **Annuleren** (ghost) — verwerpt resultaat

**States & feedback:**
- **AI bezig:** Non-blocking spinner in AI-rail + "Genereren..." melding
- **AI fout:** Foutmelding in rail: "Kon niet verwerken. Probeer opnieuw." + retry-knop
- **Opslaan gelukt:** Groene toast "Verslag opgeslagen"
- **Opslaan mislukt:** Rode toast "Kon niet opslaan. Controleer verbinding."

**AI Source Highlighting (voor Extract):**
- Bronzinnen die AI gebruikt heeft worden gehighlight in de editor (lichtgele achtergrond)
- Highlights verdwijnen bij Invoegen, Annuleren of nieuwe AI-actie
- Implementatie: TipTap Decorations API

**Keyboard shortcuts:**
- `Ctrl/Cmd+S`: Opslaan
- `Ctrl/Cmd+K`: Zoeken in tekst
- `Ctrl/Cmd+N`: Nieuw verslag

---

### 4.9 Probleemprofiel (DSM-light)

**Doel:** Categoriseren van problematiek volgens vereenvoudigde DSM-classificatie met severity-bepaling.

**Layout:**
- **Formulier (links, 60%):**
  - **Categorie** (dropdown, verplicht):
    - Stemming / Depressieve klachten
    - Angststoornissen
    - Gedrags- en impulsstoornissen
    - Middelengebruik / Verslaving
    - Cognitieve stoornissen
    - Context / Psychosociaal
  - **Severity** (button group):
    - Laag (grijs badge)
    - Middel (geel badge)
    - Hoog (rood badge)
  - **Opmerkingen** (textarea, optioneel): vrij tekstveld voor notities
  - **Bronverslag** (readonly): "Gebaseerd op intake [titel] van [datum]"

- **AI-suggestie paneel (rechts, 40%):**
  - **Trigger:** Knop **AI › Analyseer intake**
  - **Output:**
    - Voorgestelde categorie (highlight)
    - Voorgestelde severity (highlight)
    - Rationale (korte uitleg, 2-3 zinnen)
    - Bronzinnen (quotes uit intake)
  - **Acties:**
    - **Accepteer suggestie** — vult formulier automatisch in
    - **Negeer** — sluit suggestie paneel

**States:**
- **Geen profiel:** "Nog geen probleemprofiel. Start met AI-analyse of vul handmatig in."
- **AI bezig:** Skeleton loader in suggestie-paneel
- **Opgeslagen:** Groene melding "Probleemprofiel opgeslagen" → activeert Behandelplan tab

---

### 4.10 Behandelplan

**Doel:** Genereren en bewerken van een gestructureerd behandelplan met SMART-doelen.

**Structuur:**
- **Header:**
  - Versie-indicator: "Concept" (oranje badge) of "Versie X — Gepubliceerd" (groene badge)
  - Publicatiedatum (indien gepubliceerd)

- **Vier secties (cards/accordions):**

  1. **Doelen**
     - Lijst van doelen (bullets, bewerkbaar)
     - Voorbeeld: "Cliënt ervaart minder angstklachten in sociale situaties binnen 3 maanden"
     - **Micro-AI-actie:** Knop **↻ Regenereer** per doel

  2. **Interventies**
     - Lijst van interventies
     - Voorbeeld: "Cognitieve gedragstherapie (CGT), 12 sessies"
     - **Micro-AI-actie:** Knop **↻ Regenereer** per interventie

  3. **Frequentie/Duur**
     - Tekstveld met suggestie
     - Voorbeeld: "Wekelijks, 12 weken, 50 minuten per sessie"

  4. **Meetmomenten**
     - Lijst van evaluatiemomenten
     - Voorbeeld: "Na 4 sessies, na 8 sessies, afsluiting na 12 sessies"

**Initiële generatie:**
- **Trigger:** Knop **AI › Genereer behandelplan** (alleen zichtbaar als probleemprofiel bestaat)
- **Input:** Gebruikt intake-notities + probleemprofiel als context
- **Output:** Vult alle vier secties met voorstellen
- **Feedback:** "Plan gegenereerd. Bekijk en bewerk indien nodig." (blauwe info-toast)

**Bewerken:**
- Alle velden/bullets zijn inline bewerkbaar (contentEditable of input fields)
- **Auto-save:** Elke wijziging wordt automatisch opgeslagen als concept

**Publiceren:**
- **Knop:** **Publiceer v[N]** (rechtsboven)
- **Validatie:** Controleer of alle secties gevuld zijn
- **Actie:**
  - Wijzigt status van "Concept" naar "Gepubliceerd"
  - Verhoogt versienummer
  - Timestamp van publicatie
  - Concept wordt read-only; nieuwe wijzigingen maken nieuwe versie aan
- **Feedback:** "Behandelplan v1 gepubliceerd" (groene toast)

**States:**
- **Geen plan:** "Nog geen behandelplan. Genereer met AI of start handmatig."
- **Concept:** Oranje badge, bewerkbaar
- **Gepubliceerd:** Groene badge, read-only met knop **Nieuwe versie**

---

### 4.11 Onboarding System (NIEUW)

**Doel:** Moderne, context-aware begeleiding die onderscheidt van legacy EPD's met PDF-handleidingen.

#### 4.11.1 Eenmalige Walkthrough

**Trigger:** Auto-start bij eerste login (check localStorage: `onboardingCompleted`)

**Flow (5 stappen, 3 minuten totaal):**
```
┌─────────────────────────────────────────────────────────────┐
│ STAP 1: WELKOM (15 sec)                                     │
│ ┌───────────────────────────────────────────────────────┐   │
│ │ [Spotlight op logo]                                   │   │
│ │                                                       │   │
│ │ 👋 Welkom bij AI Speedrun EPD                        │   │
│ │                                                       │   │
│ │ Deze tool bespaart je uren administratie per week    │   │
│ │ dankzij slimme AI-ondersteuning. Laten we je in 3    │   │
│ │ minuten laten zien hoe het werkt.                    │   │
│ │                                                       │   │
│ │ [Overslaan] [Volgende →]                             │   │
│ └───────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│ STAP 2: CLIËNT AANMAKEN (45 sec)                            │
│ ┌───────────────────────────────────────────────────────┐   │
│ │ [Spotlight op "+ Nieuwe cliënt" knop]                 │   │
│ │                                                       │   │
│ │ Eerst maken we een cliënt aan. Klik hier om te       │   │
│ │ beginnen. Het systeem genereert automatisch een      │   │
│ │ uniek ClientID.                                       │   │
│ │                                                       │   │
│ │ [Terug] [Volgende →]                                 │   │
│ └───────────────────────────────────────────────────────┘   │
│                                                             │
│ [Modal opens - form auto-filled with demo data]            │
│ ┌───────────────────────────────────────────────────────┐   │
│ │ Voornaam: Demo                                        │   │
│ │ Achternaam: Gebruiker                                 │   │
│ │ Geboortedatum: 01-01-1990                            │   │
│ │                                                       │   │
│ │ → Klik "Opslaan" om door te gaan                     │   │
│ └───────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│ STAP 3: INTAKE SCHRIJVEN + AI (60 sec)                      │
│ ┌───────────────────────────────────────────────────────┐   │
│ │ [Spotlight op Intakes tab]                            │   │
│ │                                                       │   │
│ │ Nu schrijven we een intake. Let op: de AI kan deze   │   │
│ │ automatisch samenvatten in seconden!                 │   │
│ │                                                       │   │
│ │ [Editor opens met voorbeeld tekst pre-filled]        │   │
│ │                                                       │   │
│ │ → Klik op "AI › Samenvatten" om magie te zien        │   │
│ └───────────────────────────────────────────────────────┘   │
│                                                             │
│ [AI rail shows result]                                      │
│ ┌───────────────────────────────────────────────────────┐   │
│ │ Zie je? In 3 seconden een overzichtelijke            │   │
│ │ samenvatting. Klik "Invoegen" om toe te voegen.      │   │
│ │                                                       │   │
│ │ [Terug] [Volgende →]                                 │   │
│ └───────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│ STAP 4: DASHBOARD (30 sec)                                  │
│ ┌───────────────────────────────────────────────────────┐   │
│ │ [Spotlight op Overzicht tab]                          │   │
│ │                                                       │   │
│ │ Het dashboard toont alle belangrijke info in          │   │
│ │ configureerbare tegels. Klik op het tandwiel-icoon   │   │
│ │ om te kiezen wat je wilt zien.                        │   │
│ │                                                       │   │
│ │ [Terug] [Volgende →]                                 │   │
│ └───────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│ STAP 5: KLAAR! (30 sec)                                     │
│ ┌───────────────────────────────────────────────────────┐   │
│ │ 🎉 Je bent klaar!                                     │   │
│ │                                                       │   │
│ │ Je weet nu hoe je:                                    │   │
│ │ ✓ Cliënten aanmaakt                                  │   │
│ │ ✓ Intakes schrijft met AI-hulp                       │   │
│ │ ✓ Het dashboard gebruikt                             │   │
│ │                                                       │   │
│ │ Volgende stappen:                                     │   │
│ │ • Probeer probleemclassificatie met AI              │   │
│ │ • Genereer een behandelplan                          │   │
│ │ • Bekijk de documentatie voor meer features          │   │
│ │                                                       │   │
│ │ [Documentatie] [Tour opnieuw] [Start werken!]       │   │
│ └───────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘
```

**Functionaliteit:**
- **Progress indicator**: "Stap 2 van 5" bovenaan
- **Skip at any time**: "Overslaan" knop altijd zichtbaar
- **Keyboard navigation**: Pijltjestoetsen voor vorige/volgende
- **Persistence**: `localStorage.setItem('onboardingCompleted', 'true')`
- **Restart optie**: In user menu "Tour opnieuw starten"
- **Implementation**: react-joyride library

**States:**
- **First-time user**: Auto-start walkthrough
- **Returning user**: No walkthrough, tooltips still active
- **Skipped**: Can restart from user menu
- **Completed**: Badge in user menu "✓ Onboarding voltooid"

#### 4.11.2 Context-aware Tooltips

**Doel:** Just-in-time hulp bij eerste gebruik van complexe features.

**Trigger voorbeelden:**

1. **Eerste keer AI-knop (Samenvatten)**
```
┌─────────────────────────────────────┐
│ [AI › Samenvatten]                  │
│  ↑                                  │
│ ┌─────────────────────────────────┐ │
│ │ 💡 AI kan je intake samenvatten │ │
│ │ in 5 seconden. Probeer het!     │ │
│ │                                 │ │
│ │ [Begrepen] [Toon niet meer]     │ │
│ └─────────────────────────────────┘ │
└─────────────────────────────────────┘
```

2. **Eerste keer DSM-dropdown**
```
┌─────────────────────────────────────┐
│ Categorie: [Selecteer... ▼]        │
│  ↑                                  │
│ ┌─────────────────────────────────┐ │
│ │ 💡 Onzeker? Klik "AI › Analyseer│ │
│ │ intake" voor een suggestie.     │ │
│ │                                 │ │
│ │ [Begrepen] [Toon niet meer]     │ │
│ └─────────────────────────────────┘ │
└─────────────────────────────────────┘
```

3. **Eerste keer publiceren**
```
┌─────────────────────────────────────┐
│ [Publiceer v1]                      │
│  ↑                                  │
│ ┌─────────────────────────────────┐ │
│ │ ⚠️  Dit maakt het plan definitief│ │
│ │ en verhoogt het versienummer.   │ │
│ │ Wijzigingen hierna maken v2.    │ │
│ │                                 │ │
│ │ [Begrepen] [Toon niet meer]     │ │
│ └─────────────────────────────────┘ │
└─────────────────────────────────────┘
Functionaliteit:

Trigger: First time element comes into view + user hovers/focuses
Dismissal: "Begrepen" → hide this tooltip
Permanent dismiss: "Toon niet meer" → add to tooltipsSeen array
Positioning: Smart positioning (above/below/left/right based on viewport)
Accessibility: aria-describedby, keyboard dismissible

State management:
typescriptlocalStorage.tooltipsSeen = [
  'ai-summarize-btn',
  'dsm-dropdown',
  'publish-btn',
  // etc.
]
```

#### 4.11.3 Help-iconen

**Doel:** On-demand uitleg voor complexe features.

**Locaties:**

1. **DSM-light categorieën**
```
┌──────────────────────────────────────────┐
│ Categorie: [Angststoornissen ▼] (?)     │
│                                ↑         │
│ [Hover tooltip:]                         │
│ Klik voor uitleg DSM-categorieën         │
│                                          │
│ [Click → expandable panel:]              │
│ ┌────────────────────────────────────┐   │
│ │ DSM-light Categorieën              │   │
│ │ ─────────────────────────────────  │   │
│ │ • Stemming/Depressie: [uitleg...]  │   │
│ │ • Angst: [uitleg...]               │   │
│ │ • Gedrag/Impuls: [uitleg...]       │   │
│ │ [etc.]                             │   │
│ │                                    │   │
│ │ [Sluiten]                          │   │
│ └────────────────────────────────────┘   │
└──────────────────────────────────────────┘
```

2. **SMART doelen criteria**
```
┌──────────────────────────────────────────┐
│ Doelen (?)                               │
│        ↑                                 │
│ [Panel toont SMART uitleg:]              │
│ S - Specifiek                            │
│ M - Meetbaar                             │
│ A - Acceptabel                           │
│ R - Realistisch                          │
│ T - Tijdgebonden                         │
└──────────────────────────────────────────┘
```

3. **Severity-bepaling richtlijnen**
```
┌──────────────────────────────────────────┐
│ Severity: ( ) Laag (?) ( ) Middel ( ) Hoog│
│                    ↑                      │
│ [Panel:]                                  │
│ Laag: Lichte symptomen, minimale impact   │
│ Middel: Matige symptomen, dagelijkse      │
│         impact                            │
│ Hoog: Ernstige symptomen, grote           │
│       beperkingen                         │
└──────────────────────────────────────────┘
Functionaliteit:

Icon: Small (?) naast labels
Hover: Korte 1-line tooltip
Click: Expandable panel met uitgebreide uitleg
Positioning: Panel appears as popover, auto-positioned
Accessibility: aria-label, keyboard accessible

Implementation:
typescript<HelpIcon topic="dsm-categories" />
// Fetches content from /lib/help-content.ts

const helpContent = {
  'dsm-categories': {
    hover: 'Klik voor uitleg DSM-categorieën',
    panel: '<detailed HTML content>'
  },
  'smart-goals': { ... },
  'severity': { ... }
}
```

---

### 4.12 Mini-agenda (stretch, optioneel)

**Doel:** Afspraken koppelen aan cliënt voor planning en follow-up.

**Functionaliteit:**
- Kalenderweergave (week of maand)
- **Nieuwe afspraak:**
  - Datum/tijd picker
  - Type afspraak (dropdown): Intake | Evaluatie | Behandeling
  - Locatie (optioneel)
  - Notities (optioneel)
- **Weergave in dashboard:** laatste + eerstvolgende 3 afspraken

---

### 4.13 Rapportage (stretch, optioneel)

**Doel:** PDF export van volledige cliëntdossier voor archivering of delen.

**Functionaliteit:**
- **Knop:** **Exporteer als PDF** in cliënt-menu
- **Inhoud:**
  - Basisgegevens
  - Alle intakes (chronologisch)
  - Probleemprofiel
  - Behandelplan (gepubliceerde versie)
  - *(Optioneel)* Afspraken
- **Output:** Downloads PDF met professionele opmaak (logo, headers, footers)

---

## 5. UI-overzicht (visuele structuur)

### Globale layout Marketing Site
```
┌──────────────────────────────────────────────────────────────┐
│ Header: Logo | Build Log | Demo | How It Works | Contact    │
├──────────────────────────────────────────────────────────────┤
│                                                              │
│ [Route-specific content area]                               │
│                                                              │
├──────────────────────────────────────────────────────────────┤
│ Footer: © 2025 | ikbenlit.nl | Privacy | LinkedIn           │
└──────────────────────────────────────────────────────────────┘
```

### Globale layout EPD App
```
┌──────────────────────────────────────────────────────────────┐
│ Topbalk: Logo | Breadcrumb | Zoeken | User menu             │
├───────────────┬──────────────────────────────────────────────┤
│ Linkernav     │  Middenpaneel (content area)                 │
│ (indien actief│  → Dashboard: tegels                         │
│  in dossier)  │  → Intake: editor + AI-rail                  │
│               │  → Profiel: formulier + suggestie            │
│ Overzicht     │  → Plan: secties met doelen/interventies     │
│ Intakes       │                                              │
│ Profiel       │                                              │
│ Plan          │                                              │
│ (Afspraken)   │                                              │
├───────────────┴──────────────────────────────────────────────┤
│ Toast area (rechtsonder): meldingen (success/error/info)    │
└──────────────────────────────────────────────────────────────┘

6. Interacties met AI (functionele beschrijving)
LocatieAI-actieTriggerInputOutputFeedbackIntake-editorSamenvattenKlik op AI › SamenvattenTipTap JSON (intake-tekst)5-8 bullets in NLPreview in AI-rail → Invoegen/AnnulerenIntake-editorLeesbaarheid (B1)Klik op AI › Verbeter leesbaarheidTipTap JSONHerschreven tekst (B1-niveau)Preview in AI-rail → Invoegen/AnnulerenIntake-editorExtract problemenKlik op AI › Extract problemenTipTap JSONCategorie + severity + rationale + bronzinnenSuggestie in AI-rail + highlights in editorProbleemprofielAnalyseer intakeKlik op AI › Analyseer intakeIntake-tekst (laatste verslag)Voorgestelde categorie + severity + rationaleSuggestie-paneel rechts → Accepteren/NegerenBehandelplanGenereer planKlik op AI › Genereer behandelplanIntake + probleemprofiel4 secties (doelen, interventies, frequentie, meetmomenten)Vult alle secties → bewerkbaarBehandelplanRegenereer doelKlik op ↻ bij specifiek doelContext (huidige doelen + intake)Nieuw geformuleerd doel (SMART)Vervangt huidige doel → bewerkbaar
AI-processing states:

Bezig: Non-blocking spinner + "Genereren..." tekst
Succes: Output verschijnt in preview/suggestie-area
Fout: Rode melding "Kon niet verwerken" + retry-knop
Timeout: "AI-actie duurde te lang. Probeer opnieuw."


7. Gebruikersrollen en rechten
MVP: Vereenvoudigde autorisatie — alle authenticated users hebben volledige toegang (demo-omgeving).
RolToegang totBeperkingenImplementatieDemo-user (MVP)Alle cliëntdossiers, alle functiesAlleen fictieve dataSupabase Auth, RLS policy: auth.uid() IS NOT NULLPublic visitorMarketing site onlyCannot access EPD appNo auth required for / routes
Post-MVP (Roadmap):
RolToegang totBeperkingenBehandelaarEigen cliëntdossiers + gedeelde dossiersKan alleen eigen dossiers bewerkenManagerAlle dossiers (read-only)Geen bewerkingen, alleen rapportagesAdminAllesVolledige CRUD + gebruikersbeheer

8. UX-specificaties (koppeling met stylesheet)
Kleurgebruik (zie /docs/ux-stylesheet.md):

Primary actions: #3B82F6 (blauw) — Opslaan, Publiceren, Invoegen
Secondary actions: #334155 (grijs) — Annuleren, Terug
Success feedback: #16A34A (groen) — toasts, badges
Warning/Concept: #EAB308 (geel) — concept-status
Error: #DC2626 (rood) — foutmeldingen

Module-accenten:

Afspraken: groen (#E8F8EF bg, #16A34A accent)
Medicatie/Herinneringen: geel (#FEF6DC bg, #F59E0B accent)
Lab/Resultaten: oranje (#FFEBDC bg, #F97316 accent)

Onboarding specifiek:

Walkthrough spotlight: Dark overlay rgba(0,0,0,0.5) + highlighted element
Tooltip background: #FFFFFF met shadow-lg
Progress dots: Active #3B82F6, inactive #E2E8F0

Toegankelijkheid:

Alle tekst voldoet aan WCAG AA contrast (min. 4.5:1)
Focus rings altijd zichtbaar (2px #3B82F6)
Keyboard navigation volledig ondersteund
Status niet alleen met kleur: iconen + labels combineren


9. Demo-scenario
Marketing Site Demo (5 min)
0:00-1:00: Landing Page

Scroll through hero → comparison table
Show live build counter
Click "Probeer Live Demo"

1:00-2:30: Build Log

Expand Week 2 entry
Show code snippet + time comparison chart
Emphasize transparency

2:30-3:30: How It Works

Interact with ROI calculator
Input: 5 uur/week, €75/uur, 3 gebruikers
Show: €900/mnd besparing, break-even 1 maand, ROI 5400%

3:30-5:00: Contact Form

Fill in demo lead
Show auto-estimate update
Submit → success message

EPD Demo (10 min)
Voorbereiding: Database seeden met 2-3 fictieve cliënten (1 met partial data, 1 leeg).
Flow A: Onboarding + Nieuwe cliënt → Intake → AI Samenvatten (5 min)

Start: Login met demo credentials (0:00)
Onboarding auto-start → doorloop 5 stappen (0:00-3:00)

Skip option getoond maar niet gebruikt
Live demo van walkthrough flow


Klik + Nieuwe cliënt → vul in: "Test Demo", "Testpersoon", "01-01-1990" → Opslaan (3:30)
Navigeer naar nieuwe cliënt → klik Intakes tab (3:45)
Context-aware tooltip verschijnt bij AI-knop (first-time) (4:00)
Klik + Nieuw verslag → typ demo-intake (vooraf geprepareerde tekst plakken) (4:30)
Klik AI › Samenvatten → toon preview in AI-rail (5:00)
Klik Invoegen → samenvatting verschijnt in editor (5:30)
Klik Opslaan → toast "Verslag opgeslagen" (6:00)

Flow B: Probleemprofiel genereren → AI suggestie (2 min)

Klik Probleemprofiel tab (6:15)
Help-icon tooltip bij DSM-dropdown (hover demo) (6:30)
Klik AI › Analyseer intake → toon suggestie (categorie, severity, rationale) (7:00)
Highlights verschijnen in editor (source highlighting demo) (7:30)
Klik Accepteer suggestie → vult formulier (7:45)
Klik Opslaan → groene toast + Behandelplan tab wordt actief (8:00)

Flow C: Behandelplan genereren → Publiceren (2 min)

Klik Behandelplan tab (8:15)
Klik AI › Genereer behandelplan → toon alle vier secties (8:45)
Bewerk één doel handmatig → auto-save indicator (9:15)
Tooltip bij publiceer-knop (first-time warning) (9:30)
Klik Publiceer v1 → status wijzigt naar "Gepubliceerd" (9:45)
Navigeer terug naar Overzicht → toon dashboard met tegels (10:00)

Afsluiting: Q&A + discussie AI-toegevoegde waarde (10:00-15:00)

10. Bijlagen & Referenties
Gerelateerde documenten:

PRD v1.2 (Product Requirements Document)
TO (Technisch Ontwerp)
UX/UI Stylesheet
API Access Document
Bouwplan

Externe referenties:

TipTap editor: https://tiptap.dev
Supabase documentatie: https://supabase.com/docs
Next.js App Router: https://nextjs.org/docs/app
Claude AI API: https://docs.anthropic.com/claude/reference
react-joyride (onboarding): https://docs.react-joyride.com/

Help content configuratie:

Centraal bestand: /src/lib/help-content.ts
Per topic: hover text + panel HTML
Makkelijk uitbreidbaar voor nieuwe features


11. Wijzigingen t.o.v. v1.0
Versie 2.0 toevoegingen:
Marketing Website (nieuw)

Landing page met live build metrics + comparison table
Build log met week-by-week transparency
Live demo info page met credentials
How It Works explainer + interactive ROI calculator
Contact/Request lead generation form

Onboarding System (nieuw)

Eenmalige walkthrough (5 stappen, 3 minuten)
Context-aware tooltips bij complexe features
Help-iconen met on-demand uitleg
localStorage state management
Restart optie via user menu

UX Improvements

Modern guidance vs legacy PDF-handleidingen
Just-in-time learning instead of upfront training
Progressive disclosure van complexiteit

Demo Scenario Update

Marketing site demo (5 min) toegevoegd
EPD demo nu inclusief onboarding flow
Totaal 15 minuten (was 10)

Technical Architecture

Route structuur: /(marketing) vs /(app)
Shared Next.js app voor beide
Public/protected route splitting
react-joyride library voor walkthrough


Wijzigingslog:

v2.0 (15-11-2025): Marketing website + onboarding system toegevoegd
v1.0 (09-11-2025): Initiële versie voor MVP demo
</document_content></document>

Perfect! Het herziene FO v2.0 integreert nu:
✅ Marketing website (5 nieuwe secties)
✅ Onboarding systeem (walkthrough + tooltips + help-iconen)
✅ Bijgewerkte user stories (US-12 t/m US-22)
✅ Uitgebreide demo-scenario's (15 min totaal)
✅ Route architectuur (marketing vs app split)
Alle nieuwe PRD v1.2 requirements zijn nu functioneel uitgewerkt. Klaar voor development volgens het bouwplan!