Landing v3: van idee tot pull request + 6 nieuwe screenshots (#127)

* feat(landing): tour uitbreiden naar 6 screenshots incl. Ideas/Insights

Vervangt de oude 3 .jpg-screenshots door 6 nieuwe .png's met de huidige
visuele staat van de app. Volgorde toont de hele flow: ideeën binnen →
producten → backlog → sprint → solo → insights.

- Tour-array van 3 naar 6 figures, grid blijft lg:grid-cols-3 (2x2-rijen)
- Intro-tekst aangepast: "Zes weergaven van Scrum4Me — van inkomende
  ideeën tot persoonlijk Kanban-bord en voortgangs-inzichten"
- Bestandsnamen gehernoemd naar lowercase-dash-conventie:
  Sprint.png → sprint.png, Solo.png → solo.png, "Product Backlog.png" →
  product-backlog.png, Producten.png → producten.png, Insights.png →
  insights.png, Ideas-table.png → ideas-table.png,
  Ideas-detail.png → ideas-detail.png (alleen voorbereiding, nog niet in
  tour gebruikt)
- Oude .jpg-bestanden verwijderd

Niet onderdeel: hero/architectuur/handleiding-rewrite voor v3 — die staan
gepland onder ST-1224 en blijven open.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* feat(landing): v3 — van idee tot pull request, met procesflow + Idea-laag

Verbreedt de landing-propositie van "executie lokaal" (v2) naar de
volledige cyclus idee → grill → plan → execute → PR. Eert M12 Ideas dat
sinds 2026-05-04 het kernconcept van het product is, plus auto-PR en
Sync-tab.

Hero:
- H1 "Van idee tot pull request — op je eigen hardware."
- Subhead benoemt grill→plan→materialise→agent→PR-cyclus en houdt het
  lokaal-anker uit v2 vast.

Nieuw §3 "Van idee tot pull request":
- 4 procesflow-kaarten (Idee/Grill/Plan/Execute) met status-chips
  (DRAFT/GRILLING/PLAN_READY/DONE→PR) en pijlen tussen kaarten op md+.
- Samenvattende paragraaf over state-machine, materializeIdeaPlanAction
  en auto-PR.

Architectuur:
- docs/diagrams/architecture.mmd Worker-label uitgebreid met
  "jobs: GRILL · PLAN · IMPL"; beide SVG's geregenereerd.
- Callout "Lokale worker" benoemt nu de drie jobsoorten expliciet.

Feature-grid (set D, 6 kaarten):
- Vervang "Hiërarchisch plannen" door "Ideas — Grill & Plan" op positie 1.
- Lokale Claude-agents: + auto-PR/SQUASH-merge zin.
- Realtime updates: + Sync-tab zin.
- Async vraagkanaal: + Grill-vragen zin.

Quickstart:
- Extra regel over UI-route (/ideas → Nieuw idee → Grill me) onder de
  bestaande MCP-installatie code-block.

Scrum-samenvatting:
- Hiërarchie wordt twee-rij-systeem: Idea (DRAFT → GRILLED → PLAN_READY)
  als bovenste rij, daaronder Product → PBI → Story → Taak met
  "materialiseert ↓"-pijl.
- Terminologie krijgt 2 nieuwe tegels (Idea, Grill/Plan).

Handleiding (10 → 12 stappen):
- Nieuwe stappen 3-5 voor Idea-route (vastleggen, grillen, plan + materialiseren),
  visueel gemarkeerd met tertiary-border en chip "Idea-route".
- Oude 7+8 (token + MCP-koppeling) samengevoegd tot stap 10.
- Stap 11 uitgebreid met Sync-tab-volgen.
- Stap 6 hernoemd "opbouwen" → "finetunen".

Plan-doc + grilling-context vastgelegd in docs/plans/landing-v3-idea-flow.md.

Tracked: ST-1224 onder PBI Marketing & Landingspagina.

Verified: lint 0 errors / 7 warnings (alle pre-existing), 564/564 tests,
productie-build slaagt.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

docs/plans/landing-v3-idea-flow.md

@@ -0,0 +1,161 @@
+---
+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
+---
+
+# 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).