triqura-ecd/docs/specs/archive/fo-marketing-app-flow-v2.md

🧩 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)

// 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:

{
  "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 - Timeline component inspiratie
• Supabase Auth Docs - Authentication flows
• Next.js 15 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