---
title: "Landing v3 — van idee tot pull request"
status: active
audience: [maintainer, contributor]
language: nl
last_updated: 2026-05-04
applies_to: [SCRUM4ME]
story_id: cmot8226500017h174z5qpphx
story_code: ST-1224
pbi_id: cmoq2q50s0000qa174rmrjove
archived: true
archived_reason: niet-uitgevoerd, uit standaard sessiecontext gehouden
archived_at: 2026-05-11
---

# Landing v3 — van idee tot pull request

**Story:** [ST-1224](../../docs/INDEX.md). Vervolg op Landing v2 (lokaal-first, PR #72).

**Branch:** `feat/landing-new-screenshots` — gestart als screenshot-update, uitgebreid met de volledige v3-rewrite.

## Context

Sinds Landing v2 (2026-05-03, commit `4ff50cb`, op main via merge `b47f629`) is M12 — *Ideas* — geland en is het **kernconcept** van het product geworden:

- Nieuw `/ideas`-dashboard per user. Idea staat **boven** Product/PBI in de hiërarchie en is de manier waarop nieuw werk binnenkomt.
- State-machine: `DRAFT → GRILLING → GRILLED → PLANNING → PLAN_READY → PLANNED` (+ `GRILL_FAILED`, `PLAN_FAILED` recovery-paden).
- Twee nieuwe `ClaudeJobKind`'s: `IDEA_GRILL` (Claude stelt kritische vragen via `ask_user_question`-loop) en `IDEA_MAKE_PLAN` (Claude genereert YAML-plan, geen vragen). Naast bestaande `TASK_IMPLEMENTATION`.
- `materializeIdeaPlanAction` is een atomaire transformatie: `plan_md` (YAML) → 1 PBI + N stories + M tasks.
- Job-flow voor IDEA_GRILL gebruikt het bestaande **async vraagkanaal**.

Daarnaast (kleiner maar zichtbaar):
- **Auto-PR + auto-merge (SQUASH)**: na `update_job_status('done')` op de laatste task pusht de worker automatisch en opent/mergt een PR.
- **Sync-tab**: realtime overzicht van Story-status / `ClaudeJob.pushed_at` / `Pbi.pr_url` / `pr_merged_at` per Idea.
- **Deploy-controle**: labels `skip-deploy` / `force-deploy` overrulen path-filter.

User's eigen formulering (relevant voor toon): *"het nadenken over een idee, plannen en dan laten uitvoeren. idee na idee kan omgezet worden in acties met resultaten"*.

## Doelgroep

Ongewijzigd t.o.v. v2 (mix met zwaartepunt op privacy-bewuste indie devs en homelab-teams). De Idea-laag versterkt vooral de aantrekkingskracht voor solo-devs die *"niet aan een ticket-fabriek willen"*.

## Doel

1. **Hero verbreden** van "executie lokaal" naar volledige cyclus: idee → grill → plan → execute → PR.
2. **Nieuwe sectie #3 "Van idee tot PR"** vóór de architectuur-sectie — toont de procesflow (4 stappen).
3. **Architectuur-diagram lichtjes uitbreiden** met de Idea-job-kinds in de Worker-box.
4. **Feature-grid herschikken**: vervang "Hiërarchisch plannen" door "Ideas — Grill & Plan"; werk auto-PR in als bullet onder "Lokale Claude-agents".
5. **Handleiding uitbreiden** van 10 → 12 stappen met de Idea-route ervoor.
6. **Quickstart** ongewijzigd; één regel toevoegen over UI-route (`/ideas`).
7. **Tour** al gedaan (commit 6ce12df) — 6 echte screenshots in plaats van 3.

## Sectievolgorde

| # | Sectie | Wijziging |
|---|---|---|
| 1 | Header | ongewijzigd |
| 2 | Hero | rewrite — H1 + subhead verbreden |
| 3 | **Van idee tot PR** | nieuw — 4-stappen procesflow |
| 4 | Architectuur | diagram regenereren; callout-card "Lokale worker" tekst aanvullen |
| 5 | Tour (screenshots) | **klaar** (commit 6ce12df) — 6 figures |
| 6 | Wat is Scrum4Me? | feature-grid herschikt (set D) |
| 7 | Quickstart | + één regel UI-route |
| 8 | Scrum in Scrum4Me | + 2 termen (Idea, Grill/Plan) + twee-rij-hiërarchie |
| 9 | Gebruikershandleiding | 10 → 12 stappen (Idea-route ervoor) |
| 10 | REST API | ongewijzigd |
| 11 | Footer | ongewijzigd |

## Sectie-detail

### §2 Hero — rewrite

- **H1**: *"Van idee tot pull request — op je eigen hardware."*
- **Subhead** (~45 woorden): *"Leg een idee vast, laat Claude het kritisch bevragen, accepteer het plan en zet het door een lokale agent uit. Code, executie en agents draaien op je eigen machine; alleen metadata loopt via Vercel + Neon. Idee na idee, automatisch omgezet in commits en pull requests."*
- **CTA's** ongewijzigd: *"Account aanmaken"* + *"Hoe het werkt"* (anchor `#architectuur`).

### §3 Van idee tot PR (nieuw)

Tussen Hero en Architectuur. Procesflow als 4 horizontaal geschakelde kaarten:

```
[1. Idee]  →  [2. Grill]  →  [3. Plan]  →  [4. Execute]
DRAFT         GRILLING       PLAN_READY    DONE → PR
```

Implementatie: `grid grid-cols-1 md:grid-cols-4 gap-4` met tussen kaarten een `→` op `hidden md:flex`. MD3-tokens. Status-chips matchen de PATCH/POST-badges in de API-sectie.

Onder de 4 kaarten één paragraaf van ~3 zinnen die de state-machine, `materializeIdeaPlanAction` en auto-PR samenvat.

### §4 Architectuur — diagram regenereren

`docs/diagrams/architecture.mmd` Worker-label uitbreiden:

```
Worker["Lokale worker
laptop / NAS / VM
Claude Code + MCP
jobs: GRILL · PLAN · IMPL"]
```

Daarna `npm run diagrams` om beide SVG's te regenereren.

Callout-card "Lokale worker" in `app/page.tsx` krijgt aanvullende zin: *"Doet drie soorten jobs: bevragen van een idee (GRILL), plan-generatie (PLAN), taak-implementatie (IMPL). Allemaal op dezelfde machine."*

### §6 Feature-grid — set D (6 kaarten)

Vervang **"Hiërarchisch plannen"** door **"Ideas — Grill & Plan"** (nieuwe entry-point):

1. **Ideas — Grill & Plan** *(nieuw)*
2. Sprint Board + Solo Paneel
3. **Lokale Claude-agents** *(uitbreiden — auto-PR)*
4. **Realtime updates** *(uitbreiden — Sync-tab)*
5. Async vraagkanaal *(uitbreiden — Grill-vragen)*
6. Todo's

### §7 Quickstart — kleine aanvulling

Onder de bestaande code-block één regel: *"Liever in de UI beginnen? Open `/ideas`, druk op 'Nieuw idee' en klik 'Grill me' — de eerste vraag verschijnt binnen seconden in je belicoon."*

### §8 Scrum in Scrum4Me — terminologie + hiërarchie

Twee tegels toevoegen aan terminologie-grid: **Idea** en **Grill / Plan**.

Hiërarchie-rij wordt twee-rij-systeem:
- Bovenste rij: één tegel "Idea (DRAFT → GRILLED → PLAN_READY)" met "materialiseert ↓" pijl
- Onderste rij: bestaande Product → PBI → Story → Taak

### §9 Handleiding — 10 → 12 stappen

1. Account aanmaken (+ QR-bijzin)
2. Product aanmaken
3. **Een idee vastleggen** *(nieuw)*
4. **Laat Claude grillen** *(nieuw)*
5. **Maak het plan + materialiseer** *(nieuw)*
6. Product Backlog finetunen *(was: opbouwen)*
7. Sprint starten
8. Sprint Board
9. Solo Paneel
10. Claude Code koppelen *(token + MCP gecombineerd)*
11. **Voer uit + Sync-tab volgen**
12. Sprint afronden

Stappen 3-5 markeren met visueel accent (`border-l-4 border-primary` of chip "Idea-route").

## Bestanden

**Wijzigen:**
- `app/page.tsx` — Hero, nieuwe §3, callout in §4, feature-grid (§6), Quickstart-regel (§7), terminologie + hiërarchie (§8), handleiding (§9)
- `docs/diagrams/architecture.mmd` — Worker-label uitbreiden
- `public/diagrams/architecture-light.svg` + `architecture-dark.svg` — regenereren

**Klaar (commit 6ce12df):**
- `public/screenshots/*` — 6 nieuwe screenshots vervangen oude 3
- Tour-array in `app/page.tsx`

## Verificatie

```bash
npm run diagrams           # regenereer SVG's
npm run dev                # http://localhost:3000 op 1024px+
npm run lint && npm test && npm run build
```

Niet pushen zonder bevestiging (CLAUDE.md hardstop).