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>
This commit is contained in:
Janpeter Visser
GitHub
parent
a28f0249e5
commit
3a61a8ddc1
16 changed files with 363 additions and 39 deletions
|
|
@ -43,6 +43,7 @@ Auto-generated on 2026-05-06 from front-matter and headings.
|
|||
| [Docs-restructuur — geoptimaliseerd voor AI-lookup](./plans/docs-restructure-ai-lookup.md) | proposal | 2026-05-02 |
|
||||
| [PBI Bulk-Create Spec — Docs-Restructure for AI-Optimized Lookup](./plans/docs-restructure-pbi-spec.md) | done | 2026-05-03 |
|
||||
| [Landing v2 — lokaal & veilig + architectuurdiagram](./plans/landing-local-first.md) | active | 2026-05-03 |
|
||||
| [Landing v3 — van idee tot pull request](./plans/landing-v3-idea-flow.md) | active | 2026-05-04 |
|
||||
| [M10 — Password-loze inlog via QR-pairing](./plans/M10-qr-pairing-login.md) | active | 2026-05-03 |
|
||||
| [M11 — Claude vraagt, gebruiker antwoordt](./plans/M11-claude-questions.md) | active | 2026-05-03 |
|
||||
| [M12 — Idea entity + Grill/Plan Claude jobs](./plans/M12-ideas.md) | planned | — |
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ flowchart LR
|
|||
|
||||
subgraph Yours["Jouw kant (lokaal)"]
|
||||
direction TB
|
||||
Worker["Lokale worker<br/>laptop / NAS / VM<br/>Claude Code + MCP"]
|
||||
Worker["Lokale worker<br/>laptop / NAS / VM<br/>Claude Code + MCP<br/>jobs: GRILL · PLAN · IMPL"]
|
||||
GitHub[("GitHub<br/>jouw repo")]
|
||||
Worker -->|git push| GitHub
|
||||
end
|
||||
|
|
|
|||
161
docs/plans/landing-v3-idea-flow.md
Normal file
161
docs/plans/landing-v3-idea-flow.md
Normal file
|
|
@ -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).
|
||||
Loading…
Add table
Add a link
Reference in a new issue