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>

app/page.tsx

@@ -82,12 +82,13 @@ export default async function LandingPage() {
         <section className="bg-primary-container px-6 py-16 text-center">
           <div className="max-w-2xl mx-auto space-y-4">
             <h1 className="text-3xl font-semibold text-primary-container-foreground">
-              Plannen in de cloud. Uitvoeren op je eigen machine.
+              Van idee tot pull request — op je eigen hardware.
             </h1>
             <p className="text-base text-primary-container-foreground/80 leading-relaxed">
-              De UI draait op Vercel, je code draait op jou. Een gedeelde job-queue laat lokale
-              Claude Code agents (laptop, NAS of VM) stories autonoom oppakken — zonder dat je
-              broncode ooit de cloud hoeft te raken.
+              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.
             </p>
             <div className="flex gap-3 justify-center pt-2">
               <Link
@@ -118,6 +119,85 @@ export default async function LandingPage() {
           </div>
         </section>
 
+        {/* ── Van idee tot PR ────────────────────────────────────────── */}
+        <section className="px-6 py-14 bg-background border-b border-border">
+          <div className="max-w-6xl mx-auto">
+            <h2 className="text-xl font-semibold mb-2">Van idee tot pull request</h2>
+            <p className="text-muted-foreground text-sm mb-10 max-w-2xl">
+              Vier stappen, één queue. Een idee groeit uit tot gemergde code zonder dat jij ertussen
+              hoeft.
+            </p>
+
+            <div className="grid grid-cols-1 md:grid-cols-[1fr_auto_1fr_auto_1fr_auto_1fr] gap-4 items-stretch">
+              {[
+                {
+                  step: '1',
+                  title: 'Idee',
+                  chip: 'DRAFT',
+                  chipClass: 'bg-tertiary-container text-tertiary-container-foreground',
+                  desc: 'Leg een idee vast in twee zinnen. Status: DRAFT.',
+                },
+                {
+                  step: '2',
+                  title: 'Grill',
+                  chip: 'GRILLING',
+                  chipClass: 'bg-warning-container text-warning-container-foreground',
+                  desc: 'Claude stelt kritische vragen via het belicoon; je antwoorden vormen de grill_md.',
+                },
+                {
+                  step: '3',
+                  title: 'Plan',
+                  chip: 'PLAN_READY',
+                  chipClass: 'bg-success-container text-success-container-foreground',
+                  desc: 'Claude schrijft een YAML-plan. Materialiseer en je hebt PBI + stories + tasks.',
+                },
+                {
+                  step: '4',
+                  title: 'Execute',
+                  chip: 'DONE → PR',
+                  chipClass: 'bg-primary-container text-primary-container-foreground',
+                  desc: 'Lokale agent claimt de jobs, commit, pusht en opent automatisch een PR.',
+                },
+              ].flatMap((s, i, arr) => {
+                const card = (
+                  <div
+                    key={s.step}
+                    className="bg-surface-container-low border border-border rounded-xl p-5 space-y-3 flex flex-col"
+                  >
+                    <div className="flex items-center gap-2">
+                      <div className="shrink-0 w-7 h-7 rounded-full bg-primary text-primary-foreground text-sm font-semibold flex items-center justify-center">
+                        {s.step}
+                      </div>
+                      <div className="text-sm font-medium text-primary">{s.title}</div>
+                      <span className={`text-[10px] font-mono font-semibold px-1.5 py-0.5 rounded ${s.chipClass}`}>
+                        {s.chip}
+                      </span>
+                    </div>
+                    <p className="text-sm text-muted-foreground leading-relaxed">{s.desc}</p>
+                  </div>
+                )
+                if (i === arr.length - 1) return [card]
+                return [
+                  card,
+                  <div
+                    key={`${s.step}-arrow`}
+                    className="hidden md:flex items-center justify-center text-muted-foreground text-2xl"
+                  >
+                    →
+                  </div>,
+                ]
+              })}
+            </div>
+
+            <p className="text-sm text-muted-foreground leading-relaxed max-w-3xl mt-8">
+              State-machine: <code className="font-mono text-xs bg-surface-container px-1 rounded">DRAFT → GRILLING → GRILLED → PLANNING → PLAN_READY → PLANNED</code>.
+              Bij materialiseren ontstaat in één atomaire transactie precies één PBI met N stories en M taken
+              uit het YAML-plan. Op de laatste taak van de laatste story pusht de worker automatisch een
+              branch en opent of mergt een pull request — geen handwerk meer tussen plan en deploy.
+            </p>
+          </div>
+        </section>
+
         {/* ── Architectuur ───────────────────────────────────────────── */}
         <section id="architectuur" className="px-6 py-14 bg-background border-b border-border">
           <div className="max-w-4xl mx-auto">
@@ -161,7 +241,7 @@ export default async function LandingPage() {
                 },
                 {
                   title: 'Lokale worker',
-                  desc: 'Jouw machine — laptop, NAS of VM. Claude Code via stdio-MCP, claimt jobs atomisch (FOR UPDATE SKIP LOCKED), executeert lokaal, commit lokaal, push lokaal. Meerdere workers parallel veilig.',
+                  desc: 'Jouw machine — laptop, NAS of VM. Claude Code via stdio-MCP, claimt jobs atomisch (FOR UPDATE SKIP LOCKED), executeert lokaal, commit lokaal, push lokaal. Doet drie soorten jobs: bevragen van een idee (GRILL), plan-generatie (PLAN), taak-implementatie (IMPL) — allemaal op dezelfde machine. Meerdere workers parallel veilig.',
                 },
                 {
                   title: 'GitHub',
@@ -182,33 +262,55 @@ export default async function LandingPage() {
           <div className="max-w-6xl mx-auto">
             <h2 className="text-xl font-semibold mb-2">Bekijk Scrum4Me in actie</h2>
             <p className="text-muted-foreground text-sm mb-10 max-w-2xl">
-              Drie schermen die de kern van Scrum4Me afdekken — van Product Backlog tot persoonlijk
-              Kanban-bord. Elke weergave is desktop-first en gebouwd op MD3-tokens en shadcn-componenten.
+              Zes weergaven van Scrum4Me — van inkomende ideeën tot persoonlijk Kanban-bord en
+              voortgangs-inzichten. Elke weergave is desktop-first en gebouwd op MD3-tokens en
+              shadcn-componenten.
             </p>
 
             <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
               {[
                 {
-                  src: '/screenshots/sprint-board.jpg',
-                  alt: 'Sprint Board met drie panelen: Product Backlog, Sprint Backlog en Taken',
-                  title: 'Sprint Board',
+                  src: '/screenshots/ideas-table.png',
+                  alt: 'Ideas-dashboard met idee-kaarten in DRAFT/GRILLED/PLAN_READY-statussen',
+                  title: 'Ideas-dashboard',
                   caption:
-                    'Drie panelen op één scherm: Product Backlog links, Sprint Backlog in het midden, taken van de geselecteerde story rechts. Stories slepen tussen panelen werkt via dnd-kit.',
+                    'Persoonlijk overzicht van je ideeën met status (DRAFT → GRILLED → PLAN_READY → PLANNED). Klik "Grill me" of "Make plan" om een lokale agent te starten; bij materialiseren ontstaat exact één PBI met stories en taken.',
                 },
                 {
-                  src: '/screenshots/product-backlog.jpg',
+                  src: '/screenshots/producten.png',
+                  alt: 'Producten-dashboard met overzicht van actieve projecten',
+                  title: 'Producten',
+                  caption:
+                    'Eén overzicht van alle producten waar je toegang toe hebt — eigen producten plus die waar je als developer bent toegevoegd. Vanaf hier spring je naar Backlog, Sprint of Solo.',
+                },
+                {
+                  src: '/screenshots/product-backlog.png',
                   alt: 'Product Backlog met PBIs gegroepeerd op prioriteit en stories per PBI',
                   title: 'Product Backlog',
                   caption:
                     'PBIs gegroepeerd op prioriteit (Kritiek → Laag) in het linkerpaneel. Klik op een PBI om de stories rechts te zien, gerangschikt per urgentie en versleepbaar.',
                 },
                 {
-                  src: '/screenshots/solo-paneel.jpg',
+                  src: '/screenshots/sprint.png',
+                  alt: 'Sprint Board met drie panelen: Product Backlog, Sprint Backlog en Taken',
+                  title: 'Sprint Board',
+                  caption:
+                    'Drie panelen op één scherm: Product Backlog links, Sprint Backlog in het midden, taken van de geselecteerde story rechts. Stories slepen tussen panelen werkt via dnd-kit.',
+                },
+                {
+                  src: '/screenshots/solo.png',
                   alt: 'Solo Paneel — persoonlijk Kanban-bord met drie statuskolommen',
                   title: 'Solo Paneel',
                   caption:
                     'Persoonlijk Kanban-bord per product. Toont alleen taken van stories die jij hebt geclaimd, in drie kolommen (To Do, Bezig, Klaar). Drag-and-drop tussen kolommen verandert de status.',
                 },
+                {
+                  src: '/screenshots/insights.png',
+                  alt: 'Insights-dashboard met voortgangsmetrics en agent-throughput',
+                  title: 'Insights',
+                  caption:
+                    'Voortgang per product: doorlooptijden, agent-throughput en sprintresultaten in één blik. Helpt patronen herkennen — welke stories liepen vast, welke gingen vlot.',
+                },
               ].map((s) => (
                 <figure
                   key={s.src}
@@ -245,8 +347,8 @@ export default async function LandingPage() {
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
               {[
                 {
-                  title: 'Hiërarchisch plannen',
-                  desc: 'Organiseer werk in producten, Product Backlog Items, stories en taken — gegroepeerd op prioriteit en herrangschikbaar via drag-and-drop.',
+                  title: 'Ideas — Grill & Plan',
+                  desc: 'Leg een idee vast in twee zinnen. Claude grilt het met kritische vragen, schrijft een YAML-plan en zet ’t om in PBI + stories + tasks. Alles via een job-queue, asynchroon.',
                 },
                 {
                   title: 'Sprint Board + Solo Paneel',
@@ -254,15 +356,15 @@ export default async function LandingPage() {
                 },
                 {
                   title: 'Lokale Claude-agents',
-                  desc: 'Een job-queue met "Voer uit"-knop. Lokale Claude Code agents claimen werk atomisch, draaien het op jouw hardware en rapporteren status terug. Meerdere workers (laptop + NAS) parallel veilig.',
+                  desc: 'Een job-queue met "Voer uit"-knop. Lokale Claude Code agents claimen werk atomisch, draaien het op jouw hardware en rapporteren status terug. Na de laatste task pusht de worker automatisch en opent een pull request via SQUASH-merge. Meerdere workers (laptop + NAS) parallel veilig.',
                 },
                 {
                   title: 'Realtime updates',
-                  desc: 'SSE bovenop Postgres LISTEN/NOTIFY. Wijzigingen vanuit andere tabs of een lokale agent verschijnen binnen 1–2 seconden in je Solo Paneel — geen refresh.',
+                  desc: 'SSE bovenop Postgres LISTEN/NOTIFY. Wijzigingen vanuit andere tabs of een lokale agent verschijnen binnen 1–2 seconden in je Solo Paneel — geen refresh. De Sync-tab toont per idee de live status van story → push → PR-merge.',
                 },
                 {
                   title: 'Async vraagkanaal',
-                  desc: 'Loopt een agent vast op een keuze? Hij plaatst een vraag via het bel-icoon. Jij beantwoordt hem wanneer het uitkomt; de agent pakt automatisch de draad weer op.',
+                  desc: 'Loopt een agent vast op een keuze? Hij plaatst een vraag via het bel-icoon. Jij beantwoordt hem wanneer het uitkomt; de agent pakt automatisch de draad weer op. Tijdens een Grill stelt Claude vragen via hetzelfde kanaal — antwoorden komen direct terug in de Idea-timeline.',
                 },
                 {
                   title: "Todo's",
@@ -295,6 +397,11 @@ cd scrum4me-mcp && npm install
 # 3. Start Claude Code en vraag:
 #    "pak de volgende job uit de Scrum4Me-queue"`}</code>
             </pre>
+            <p className="text-sm text-muted-foreground leading-relaxed max-w-2xl mb-3">
+              Liever in de UI beginnen? Open <code className="font-mono text-xs bg-surface-container px-1 rounded">/ideas</code>,
+              druk op &quot;Nieuw idee&quot; en klik &quot;Grill me&quot; — de eerste vraag verschijnt
+              binnen seconden in je belicoon.
+            </p>
             <p className="text-sm text-muted-foreground leading-relaxed max-w-2xl">
               Liever zonder MCP? Gebruik de{' '}
               <a href="#api" className="text-primary hover:underline">REST API met een Bearer-token</a>
@@ -315,6 +422,21 @@ cd scrum4me-mcp && npm install
             {/* Hiërarchie */}
             <div className="mb-10">
               <h3 className="text-sm font-semibold text-foreground mb-4 uppercase tracking-wide">Hiërarchie</h3>
+
+              {/* Idee-laag */}
+              <div className="mb-3">
+                <div className="bg-tertiary-container border border-tertiary/20 rounded-lg px-4 py-2.5 inline-block">
+                  <div className="text-sm font-medium text-tertiary-container-foreground">Idea</div>
+                  <div className="text-xs text-tertiary-container-foreground/70 leading-tight mt-0.5">
+                    DRAFT → GRILLED → PLAN_READY
+                  </div>
+                </div>
+                <div className="text-muted-foreground text-xs mt-1 ml-4">
+                  ↓ <span className="italic">materialiseert naar</span>
+                </div>
+              </div>
+
+              {/* Scrum-laag */}
               <div className="flex flex-col sm:flex-row items-start sm:items-center gap-2">
                 {[
                   { label: 'Product', sub: 'Een softwareproject of codebase' },
@@ -340,6 +462,8 @@ cd scrum4me-mcp && npm install
               <h3 className="text-sm font-semibold text-foreground mb-4 uppercase tracking-wide">Terminologie</h3>
               <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                 {[
+                  { term: 'Idea', def: 'Een voorstel of richting voordat ’t een PBI is. Heeft een grill-fase (Claude bevraagt ’t kritisch) en een plan-fase (Claude schrijft een YAML-plan met stories en tasks). Na materialiseren ontstaat exact één PBI.' },
+                  { term: 'Grill / Plan', def: 'Twee asynchrone Claude-jobsoorten op een idea. Grill produceert grill_md (Q&A-transcript). Plan produceert plan_md (YAML met PBI/stories/tasks-templates) dat strikt geparseerd wordt.' },
                   { term: 'Product Backlog', def: 'Geordende lijst van alle PBI\'s per product, gesorteerd op prioriteit (kritiek → laag) en positie.' },
                   { term: 'Sprint', def: 'Actief tijdblok met een Sprint Goal. Per product is er maximaal één actieve Sprint tegelijk.' },
                   { term: 'Sprint Backlog', def: 'De stories die voor deze Sprint zijn geselecteerd. Stories worden vanuit de Product Backlog gesleept.' },
@@ -395,59 +519,97 @@ cd scrum4me-mcp && npm install
                   step: '1',
                   title: 'Account aanmaken',
                   desc: 'Ga naar Registreren en kies een gebruikersnaam en wachtwoord. Na registratie word je direct doorgestuurd naar het dashboard. Liever passwordless? Paar je telefoon één keer en log voortaan in via QR. Of test eerst met de demo-account (alleen leesrechten).',
+                  ideaRoute: false,
                 },
                 {
                   step: '2',
                   title: 'Product aanmaken',
                   desc: 'Klik op "Nieuw product" op het dashboard. Vul naam, optionele beschrijving, repo-URL en je Definition of Done in. Het product wordt zichtbaar op het dashboard.',
+                  ideaRoute: false,
                 },
                 {
                   step: '3',
-                  title: 'Product Backlog opbouwen',
-                  desc: 'Open het product en voeg PBI\'s toe via het linkerpaneel. Geef elk PBI een prioriteit (Kritiek / Hoog / Gemiddeld / Laag). Klik op een PBI om in het rechterpaneel stories toe te voegen. Versleep PBI\'s en stories om de volgorde aan te passen.',
+                  title: 'Een idee vastleggen',
+                  desc: 'Open /ideas, klik "Nieuw idee", vul titel + één-alinea beschrijving in. Status: DRAFT.',
+                  ideaRoute: true,
                 },
                 {
                   step: '4',
-                  title: 'Sprint starten',
-                  desc: 'Klik op "Sprint starten" op de productpagina en voer een Sprint Goal in. Per product is er maximaal één actieve Sprint tegelijk. Het Sprint-scherm wordt zichtbaar via de navigatie.',
+                  title: 'Laat Claude grillen',
+                  desc: 'Klik "Grill me". Een lokale agent stelt kritische vragen via het belicoon. Beantwoord ze; Claude schrijft een gestructureerde grill_md. Status: GRILLED.',
+                  ideaRoute: true,
                 },
                 {
                   step: '5',
-                  title: 'Sprint Board — stories slepen en taken aanmaken',
-                  desc: 'Open het Sprint-scherm. Drie panelen verschijnen op één view: Product Backlog links, Sprint Backlog in het midden, taken rechts. Sleep stories vanuit links naar het midden om ze in de Sprint te plaatsen. Selecteer een story in het middenpaneel om de taken rechts te tonen en aan te maken.',
+                  title: 'Maak het plan + materialiseer',
+                  desc: 'Klik "Make plan". Claude genereert een YAML-plan (PBI + stories + tasks). Klik "Materialiseer" om ’t atomair om te zetten naar je product-backlog. Status: PLANNED.',
+                  ideaRoute: true,
                 },
                 {
                   step: '6',
-                  title: 'Solo Paneel — claim stories en werk persoonlijk',
-                  desc: 'Open Solo via de navigatie. Claim openstaande stories uit de actieve Sprint (knop "Toon openstaande stories") en werk je taken af in drie statuskolommen via drag-and-drop. Klik op een taak voor het detail-dialoog met implementatieplan.',
+                  title: 'Product Backlog finetunen',
+                  desc: 'Optioneel: herorden PBI\'s en stories handmatig via drag-and-drop. Het meeste werk heeft materialise al gedaan — dit is alleen voor bijsturen of toevoegen van werk dat niet uit een idee komt.',
+                  ideaRoute: false,
                 },
                 {
                   step: '7',
-                  title: 'API-token aanmaken',
-                  desc: 'Ga naar Instellingen → Tokens. Maak een nieuw token aan en kopieer de waarde direct — die is daarna niet meer zichtbaar. Hetzelfde token werkt voor de MCP-server én voor de REST API.',
+                  title: 'Sprint starten',
+                  desc: 'Klik op "Sprint starten" op de productpagina en voer een Sprint Goal in. Per product is er maximaal één actieve Sprint tegelijk. Het Sprint-scherm wordt zichtbaar via de navigatie.',
+                  ideaRoute: false,
                 },
                 {
                   step: '8',
-                  title: 'Claude Code koppelen',
-                  desc: 'Aanbevolen: installeer de scrum4me-mcp-server (zie Quickstart hierboven) zodat Claude Code de Scrum4Me-tools native ziet. Alternatief: gebruik de REST API direct vanuit Codex, eigen scripts of CI-pipelines met je Bearer-token.',
+                  title: 'Sprint Board — stories slepen en taken aanmaken',
+                  desc: 'Open het Sprint-scherm. Drie panelen verschijnen op één view: Product Backlog links, Sprint Backlog in het midden, taken rechts. Sleep stories vanuit links naar het midden om ze in de Sprint te plaatsen. Selecteer een story in het middenpaneel om de taken rechts te tonen en aan te maken.',
+                  ideaRoute: false,
                 },
                 {
                   step: '9',
-                  title: 'Story laten uitvoeren — "Voer uit"-knop',
-                  desc: 'Klik op "Voer uit" bij een story in het Solo Paneel. De story komt in de job-queue. Een lokale Claude-agent op je machine pakt \'m op via wait_for_job, werkt het implementatieplan af, commit naar je repo en zet de status op done. De NavBar toont live hoeveel workers actief zijn.',
+                  title: 'Solo Paneel — claim stories en werk persoonlijk',
+                  desc: 'Open Solo via de navigatie. Claim openstaande stories uit de actieve Sprint (knop "Toon openstaande stories") en werk je taken af in drie statuskolommen via drag-and-drop. Klik op een taak voor het detail-dialoog met implementatieplan.',
+                  ideaRoute: false,
                 },
                 {
                   step: '10',
+                  title: 'Claude Code koppelen',
+                  desc: 'Maak een API-token aan in Instellingen → Tokens — hetzelfde token werkt voor MCP en REST. Aanbevolen: installeer de scrum4me-mcp-server (zie Quickstart hierboven) zodat Claude Code de tools native ziet. Alternatief: gebruik de REST API direct vanuit Codex, eigen scripts of CI-pipelines.',
+                  ideaRoute: false,
+                },
+                {
+                  step: '11',
+                  title: 'Voer uit + Sync-tab volgen',
+                  desc: 'Klik op "Voer uit" bij een story in het Solo Paneel. De story komt in de job-queue. Een lokale agent claimt de jobs, werkt taken af, commit en — na de laatste task — pusht en mergt automatisch een PR via SQUASH. Volg de voortgang in de Sync-tab op het idea-detail.',
+                  ideaRoute: false,
+                },
+                {
+                  step: '12',
                   title: 'Sprint afronden',
                   desc: 'Klik op "Sprint afronden" op het Sprint Board. Voor elke story kies je: markeer als Done of zet terug naar de Product Backlog. Daarna is een nieuwe Sprint aanmaakbaar.',
+                  ideaRoute: false,
                 },
-              ].map(({ step, title, desc }) => (
-                <div key={step} className="flex gap-4 bg-surface-container-low border border-border rounded-xl p-5">
-                  <div className="shrink-0 w-8 h-8 rounded-full bg-primary text-primary-foreground text-sm font-semibold flex items-center justify-center">
+              ].map(({ step, title, desc, ideaRoute }) => (
+                <div
+                  key={step}
+                  className={`flex gap-4 bg-surface-container-low border rounded-xl p-5 ${
+                    ideaRoute ? 'border-l-4 border-l-tertiary border-y-border border-r-border' : 'border-border'
+                  }`}
+                >
+                  <div
+                    className={`shrink-0 w-8 h-8 rounded-full text-sm font-semibold flex items-center justify-center ${
+                      ideaRoute ? 'bg-tertiary text-tertiary-foreground' : 'bg-primary text-primary-foreground'
+                    }`}
+                  >
                     {step}
                   </div>
                   <div className="space-y-1">
-                    <div className="text-sm font-medium">{title}</div>
+                    <div className="text-sm font-medium flex items-center gap-2">
+                      {title}
+                      {ideaRoute && (
+                        <span className="text-[10px] font-mono font-semibold px-1.5 py-0.5 rounded bg-tertiary-container text-tertiary-container-foreground">
+                          Idea-route
+                        </span>
+                      )}
+                    </div>
                     <div className="text-sm text-muted-foreground leading-relaxed">{desc}</div>
                   </div>
                 </div>

docs/INDEX.md

@@ -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 | — |

docs/diagrams/architecture.mmd

@@ -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

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