From 4ff50cb87e052e8f2013e2d396f44f246434d6eb Mon Sep 17 00:00:00 2001 From: Madhura68 Date: Sun, 3 May 2026 20:24:10 +0200 Subject: [PATCH] feat(landing): rewrite around local-first proposition + architecture diagram MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Reframe the landing page around what makes Scrum4Me unique: code execution stays on the developer's own hardware (laptop, NAS or VM). The Vercel UI and Neon DB are a metadata coordination layer; source code never leaves the local worker. Adds a mermaid-rendered architecture diagram (two-zone: Scrum4Me-stack vs Jouw kant) with light/dark variants generated via mmdc. Page changes (app/page.tsx): - Hero: H1 "Plannen in de cloud. Uitvoeren op je eigen machine." + new subhead; CTA "Hoe het werkt" replaces "Demo bekijken" (anchors to #architectuur). - New section §3 "Architectuur" with light/dark SVG and 4 callout-cards (Vercel · Neon · Lokale worker · GitHub) honestly describing what each component stores or runs. - Feature grid: 6 cards (set C) — combines Sprint Board + Solo Paneel, adds Lokale Claude-agents, Realtime updates, Async vraagkanaal, Todo's. LIVE callout removed (folded into Realtime card). - "Twee manieren"-section replaced by a Quickstart with concrete git-clone snippet for the MCP-server. - Handleiding: 9 → 10 steps; MCP recommended in step 8; new step 9 "Story laten uitvoeren" describing the Voer-uit / job-queue flow; step 1 mentions QR-pairing as alternative login. - Footer: adds link to madhura68/scrum4me-mcp alongside the app repo. Tooling: - New docs/diagrams/architecture.mmd (mermaid source). - New npm script "diagrams" generates light + dark SVG via mmdc; output committed to public/diagrams/. No prebuild hook (manual regenerate, like prisma generate / docs:index). - Plan + grilling outcomes captured in docs/plans/landing-local-first.md. Tracked under Scrum4Me story cmoq2qoik0001qa175iynfnaa (PBI Marketing & Landingspagina, cmoq2q50s0000qa174rmrjove). Verified: npm run lint (0 new errors), npm test (379/379), npm run build OK. Co-Authored-By: Claude Opus 4.7 (1M context) --- app/page.tsx | 244 +++++++++++++++---------- docs/INDEX.md | 1 + docs/diagrams/architecture.mmd | 24 +++ docs/plans/landing-local-first.md | 221 ++++++++++++++++++++++ package.json | 3 +- public/diagrams/architecture-dark.svg | 1 + public/diagrams/architecture-light.svg | 1 + 7 files changed, 395 insertions(+), 100 deletions(-) create mode 100644 docs/diagrams/architecture.mmd create mode 100644 docs/plans/landing-local-first.md create mode 100644 public/diagrams/architecture-dark.svg create mode 100644 public/diagrams/architecture-light.svg diff --git a/app/page.tsx b/app/page.tsx index c01924f..78d65d5 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -82,11 +82,12 @@ export default async function LandingPage() {

- Scrum planner voor solo developers en kleine teams + Plannen in de cloud. Uitvoeren op je eigen machine.

- Houd meerdere projecten bij in één overzicht. Plan Product Backlogs, beheer Sprints - met drag-and-drop en laat Claude Code taken oppakken via een REST API. + 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.

Account aanmaken - - Demo bekijken - + Hoe het werkt +

Demo-login: gebruikersnaam demo · wachtwoord demo1234 @@ -117,6 +118,65 @@ export default async function LandingPage() {

+ {/* ── Architectuur ───────────────────────────────────────────── */} +
+
+

Architectuur — hoe Scrum4Me draait

+

+ Vier componenten in twee zones. De Scrum4Me-stack (Vercel + Neon) houdt alleen + metadata bij. Jouw kant (lokale worker + GitHub) houdt de code en de uitvoering. + Het enige verkeer over de zonegrens is de job-queue zelf — agents claimen werk en + rapporteren status terug. +

+ +
+ Scrum4Me-architectuur: Vercel en Neon Postgres in de Scrum4Me-stack; lokale worker en GitHub aan jouw kant; job-queue verbindt de twee. + Scrum4Me-architectuur: Vercel en Neon Postgres in de Scrum4Me-stack; lokale worker en GitHub aan jouw kant; job-queue verbindt de twee. +
+ +

Wat draait waar?

+
+ {[ + { + title: 'Vercel', + desc: 'Alleen UI, Server Actions en cron-jobs. Geen sourcecode, geen build-artefacten van klanten — Vercel weet niet hoe jouw code eruit ziet.', + }, + { + title: 'Neon Postgres', + desc: 'Scrum-metadata: titels, statussen, plan-tekstvelden, logs en commit-hashes. Geen volledige diffs, geen broncodebestanden. Wat jij of de agent zelf in een plan of log schrijft, staat hier wel.', + }, + { + 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.', + }, + { + title: 'GitHub', + desc: 'Jouw eigen repo. Scrum4Me kent alleen de repo_url-string en de commit-hashes uit het story-log. Code en historie blijven onder jouw account.', + }, + ].map(({ title, desc }) => ( +
+
{title}
+

{desc}

+
+ ))} +
+
+
+ {/* ── Tour (screenshots) ─────────────────────────────────────── */}
@@ -182,93 +242,64 @@ export default async function LandingPage() { de overhead van grote tools als Jira of Linear. Ontworpen voor developers die zelf de regie willen houden over hun planning.

-
-
-
Hiërarchisch plannen
-

- Organiseer werk in producten, Product Backlog Items, stories en taken. - Alles op één plek, gegroepeerd op prioriteit. -

-
-
-
Sprint Board
-

- Drie-panelen layout: Product Backlog, Sprint Backlog en taken per story op - één scherm. Slepen, sorteren en statussen wisselen via dnd-kit. -

-
-
-
Solo Paneel
-

- Persoonlijk Kanban-bord per product. Claim stories vanuit de Sprint en werk - je taken af in drie kolommen — To Do, Bezig, Klaar. -

-
-
-
Claude Code-integratie
-

- Twee opties: native MCP-server (aanbevolen) of REST API met Bearer-token. - Beide laten Claude Code stories ophalen, taken bijwerken en resultaten vastleggen. -

-
-
-
-
- LIVE -
-
-
Realtime Solo Paneel
-

- Wijzigingen vanuit andere tabs of Claude Code verschijnen binnen 1–2 seconden in je - Solo Paneel. Geen refresh nodig — gebouwd op Postgres LISTEN/NOTIFY en Server-Sent Events. -

-
+
+ {[ + { + 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: 'Sprint Board + Solo Paneel', + desc: 'Twee weergaven van dezelfde data: een team-bord (Product Backlog · Sprint Backlog · taken) en een persoonlijk Kanban met geclaimde stories.', + }, + { + 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.', + }, + { + 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.', + }, + { + 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.', + }, + { + title: "Todo's", + desc: 'Lichtgewicht notities los van de sprint-hiërarchie. Filter, sorteer en archiveer via een tabel-weergave — handig voor invallen die nog geen story zijn.', + }, + ].map(({ title, desc }) => ( +
+
{title}
+

{desc}

+
+ ))}
- {/* ── Twee manieren om Claude Code te koppelen ─────────────── */} + {/* ── Quickstart ──────────────────────────────────────────── */}
-

Twee manieren om Claude Code te koppelen

-

- Kies de aansluiting die bij je workflow past. Beide werken naast elkaar. +

Quickstart — lokale agent in 3 stappen

+

+ De aanbevolen route: installeer de MCP-server lokaal en laat Claude Code de + Scrum4Me-tools native gebruiken. +

+ 
+              {`# 1. Clone en installeer de MCP-server
+git clone https://github.com/madhura68/scrum4me-mcp
+cd scrum4me-mcp && npm install
+
+# 2. Voeg toe aan Claude Code config (zie repo-README)
+# 3. Start Claude Code en vraag:
+#    "pak de volgende job uit de Scrum4Me-queue"`}
+
+

+ Liever zonder MCP? Gebruik de{' '} + REST API met een Bearer-token + {' '}— werkt ook vanuit Codex, eigen scripts of CI-pipelines.

-
-
-
-
MCP-server
- - Aanbevolen - -
-

- Native Model Context Protocol-tools voor Claude Code. Geen REST-configuratie — - Claude ziet producten, stories en taken als ingebouwde commando's. Eén prompt - orkestreert de hele implementatieflow: story ophalen, status updaten, plan loggen, - commit vastleggen. -

- - github.com/madhura68/scrum4me-mcp → - -
-
-
REST API
-

- Universele HTTP-API met Bearer-token. Werkt vanuit Claude Code, Codex, eigen - scripts of CI-pipelines. Zelfde rechten als de MCP-server, maar je beheert - tokens en aanroepen zelf. -

- - API-endpoints bekijken ↓ - -
-
@@ -363,7 +394,7 @@ export default async function LandingPage() { { step: '1', title: 'Account aanmaken', - desc: 'Ga naar Registreren en kies een gebruikersnaam en wachtwoord. Na registratie word je direct doorgestuurd naar het dashboard. Wil je eerst rondkijken? Log in met de demo-account (alleen leesrechten).', + 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).', }, { step: '2', @@ -392,16 +423,21 @@ export default async function LandingPage() { }, { step: '7', - title: 'API-token aanmaken voor Claude Code', - desc: 'Ga naar Instellingen → Tokens. Maak een nieuw token aan en kopieer de waarde direct — die is daarna niet meer zichtbaar. Gebruik het token als Bearer-token in Claude Code of je eigen scripts.', + 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.', }, { step: '8', title: 'Claude Code koppelen', - desc: 'Configureer Claude Code met je API-token. Claude haalt via GET /api/products/:id/next-story de hoogst geprioriteerde open story op, werkt taken bij via PATCH /api/tasks/:id en legt het implementatieplan, testresultaten en commits vast via POST /api/stories/:id/log.', + 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.', }, { 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.', + }, + { + step: '10', 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.', }, @@ -464,14 +500,24 @@ curl -H "Authorization: Bearer $TOKEN" \\ {/* ── Footer ─────────────────────────────────────────────────── */} diff --git a/docs/INDEX.md b/docs/INDEX.md index 9d930f1..2aede36 100644 --- a/docs/INDEX.md +++ b/docs/INDEX.md @@ -34,6 +34,7 @@ Auto-generated on 2026-05-03 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 | | [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 | | [M9 — Actief Product Backlog](./plans/M9-active-product-backlog.md) | active | 2026-05-03 | diff --git a/docs/diagrams/architecture.mmd b/docs/diagrams/architecture.mmd new file mode 100644 index 0000000..31ed0f8 --- /dev/null +++ b/docs/diagrams/architecture.mmd @@ -0,0 +1,24 @@ +--- +title: Scrum4Me — architectuur (lokaal & veilig) +--- +flowchart LR + User([Jij in je browser]):::user + + subgraph Scrum["Scrum4Me-stack (managed)"] + direction TB + Vercel["Vercel
UI · Server Actions · cron"] + Neon[("Neon Postgres
metadata · jobs · logs")] + Vercel <-->|Prisma + SSE| Neon + end + + subgraph Yours["Jouw kant (lokaal)"] + direction TB + Worker["Lokale worker
laptop / NAS / VM
Claude Code + MCP"] + GitHub[("GitHub
jouw repo")] + Worker -->|git push| GitHub + end + + User -->|HTTPS| Vercel + Neon <-.->|job claim + LISTEN/NOTIFY| Worker + + classDef user fill:transparent,stroke-dasharray:3 3 diff --git a/docs/plans/landing-local-first.md b/docs/plans/landing-local-first.md new file mode 100644 index 0000000..96092aa --- /dev/null +++ b/docs/plans/landing-local-first.md @@ -0,0 +1,221 @@ +--- +title: "Landing v2 — lokaal & veilig + architectuurdiagram" +status: active +audience: [maintainer, contributor] +language: nl +last_updated: 2026-05-03 +applies_to: [SCRUM4ME] +story_id: cmoq2qoik0001qa175iynfnaa +pbi_id: cmoq2q50s0000qa174rmrjove +--- + +# Landing v2 — lokaal & veilig + architectuurdiagram + +**Story:** Als bezoeker van de landingspagina wil ik direct begrijpen dat Scrum4Me's unieke propositie is dat code-uitvoering lokaal blijft op mijn eigen hardware, zodat ik weet of dit product bij mijn werkwijze past. + +**Branch:** `feat/landing-local-first` + +## Context + +Sinds de laatste landingspagina-update (commit `feat(landing): highlight realtime updates and beta/desktop-first notice`, 2026-04-27, app v0.4.0) zijn meerdere milestones afgerond of in uitvoering die niet op de pagina staan: + +- **M5** — Todo's +- **M8** — Realtime Solo Paneel (Postgres LISTEN/NOTIFY + SSE) +- **M9** — Active Product selectie +- **M10** — QR-pairing passwordless login +- **M11** — Claude question channel +- **M13** — Claude job queue + worker mode +- **MCP-server** in losse repo `madhura68/scrum4me-mcp` met 18 tools + +Belangrijker: het echte unieke aspect — dat **code-uitvoering lokaal blijft op de developer's eigen hardware** — staat nergens prominent op de huidige pagina. De Vercel-app + Neon-DB zijn een coördinatielaag voor metadata; klantcode draait nooit in de cloud. Dat is dé propositie en moet bovenaan staan, ondersteund door een architectuurdiagram dat GitHub + Neon Postgres + Vercel + Lokale worker in samenhang toont. + +**Genuanceerde claim (geen overpromise).** In Neon staan wél: `Task.implementation_plan`, `StoryLog.content/commit_message`, `ClaudeJob.plan_snapshot/summary/error`, `ClaudeQuestion.question` — vrije-tekstvelden die agents/users zelf invullen. Wat **niet** in de cloud belandt: broncodebestanden, diffs/patches, build-artefacten. De hero claimt dit voorzichtig ("executie + code blijven aan jouw kant"); de architectuur-sectie legt per box uit wat er wél staat. + +## Doelgroep + +Mix met zwaartepunt op (a) privacy-bewuste indie devs en (c) kleine teams met homelab/NAS. Compliance-publiek (b) wordt niet expliciet aangesproken (geen SOC2-claims), maar ook niet uitgesloten. + +## Aanpak — sectievolgorde + +| # | Sectie | Wijziging | +|---|---|---| +| 1 | Header | ongewijzigd | +| 2 | Hero | herschreven (B+Z, zie hieronder) | +| 3 | **Architectuur** | **nieuw** — twee-zone mermaid-diagram + 4 callouts | +| 4 | Tour (screenshots) | ongewijzigd | +| 5 | Wat is Scrum4Me? | 6 kaarten (set C, zie hieronder) | +| 6 | **Quickstart: lokale agent in 3 stappen** | **vervangt** "Twee manieren om Claude te koppelen" | +| 7 | Scrum in Scrum4Me | ongewijzigd | +| 8 | Gebruikershandleiding | uitgebreid naar 10 stappen, MCP als hoofdroute | +| 9 | REST API | ongewijzigd | +| 10 | Footer | + link naar `madhura68/scrum4me-mcp` | + +LIVE-callout onder de feature-grid vervalt (gaat op in feature-card "Realtime updates"). + +## Sectie-detail + +### §2 Hero + +- **H1**: *"Plannen in de cloud. Uitvoeren op je eigen machine."* +- **Subhead**: *"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."* +- **CTA's**: *"Account aanmaken"* (primary) · *"Hoe het werkt"* (secondary, anchor naar `#architectuur`). De oude *"Demo bekijken"* vervalt; demo-credentials staan al in de body-tekst eronder. +- **Beta-notice blok**: ongewijzigd. + +### §3 Architectuur (nieuw) + +**Diagrambron**: `docs/diagrams/architecture.mmd` (mermaid). Twee zones via `subgraph`: + +```mermaid +flowchart LR + User([Jij in je browser]):::user + + subgraph Scrum["Scrum4Me-stack (managed)"] + direction TB + Vercel["Vercel
UI · Server Actions · cron"] + Neon[("Neon Postgres
metadata · jobs · logs")] + Vercel <-->|Prisma + SSE| Neon + end + + subgraph Yours["Jouw kant (lokaal)"] + direction TB + Worker["Lokale worker
laptop / NAS / VM
Claude Code + MCP"] + GitHub[("GitHub
jouw repo")] + Worker -->|git push| GitHub + end + + User -->|HTTPS| Vercel + Neon <-.->|job claim
+ LISTEN/NOTIFY| Worker + + classDef user fill:none,stroke-dasharray:3 3 +``` + +**Renderpijp**: +- Bron in `docs/diagrams/architecture.mmd`. +- Output naar `public/diagrams/architecture-light.svg` + `architecture-dark.svg` (gecommit in git). +- Nieuw npm-script: `"diagrams": "mmdc -i docs/diagrams/architecture.mmd -t default -b transparent -o public/diagrams/architecture-light.svg && mmdc -i docs/diagrams/architecture.mmd -t dark -b transparent -o public/diagrams/architecture-dark.svg"`. +- **Geen** `prebuild`-hook — handmatig draaien bij wijziging. +- In `page.tsx`: twee ``-tags, één met `className="dark:hidden"` en één met `className="hidden dark:block"`. + +**Onder het diagram**, 4 callout-cards "Wat draait waar?": + +1. **Vercel** — alleen UI, Server Actions en cron. Geen sourcecode, geen build-artefacten. +2. **Neon Postgres** — Scrum-metadata, plan-tekstvelden, logs en commit-hashes. Geen volledige diffs, geen broncodebestanden. +3. **Lokale worker** — jouw machine. Claude Code via stdio-MCP, claimt jobs (`FOR UPDATE SKIP LOCKED`), executeert lokaal, commit lokaal, push lokaal. Multi-worker (laptop + NAS) parallel veilig. +4. **GitHub** — jouw eigen repo. Scrum4Me kent alleen de `repo_url`-string en commit-hashes uit logs. + +### §5 Feature-kaarten (6 stuks, set C) + +1. **Hiërarchisch plannen** — Product → PBI → Story → Taak. +2. **Sprint Board + Solo Paneel** — twee weergaven van dezelfde data: team-bord en persoonlijk Kanban. +3. **Lokale Claude-agents** — job-queue, "Voer uit"-knop, atomic claim, multi-worker. +4. **Realtime updates** — SSE + Postgres LISTEN/NOTIFY; UI binnen 1–2s in sync (vervangt LIVE-callout). +5. **Async vraagkanaal** — Claude vraagt input via bel-icoon zodra plan-ambiguïteit optreedt. +6. **Todo's** — lichtgewicht notities los van sprint-hiërarchie. + +QR-login en Active Product selection krijgen géén kaart (QR-login wel genoemd in handleiding stap 1). + +### §6 Quickstart (vervangt "Twee manieren") + +Activerende sectie met code-snippet: + +```bash +# 1. Clone en installeer de MCP-server +git clone https://github.com/madhura68/scrum4me-mcp +cd scrum4me-mcp && npm install + +# 2. Voeg toe aan Claude Code config (zie repo-README) +# 3. Start Claude Code en vraag: +# "pak de volgende job uit de Scrum4Me-queue" +``` + +Daarnaast korte tekst-bullet: *"Liever zonder MCP? Gebruik de REST API met een Bearer-token (zie API-overzicht hieronder)."* + +### §8 Handleiding — 10 stappen + +1. Account aanmaken (+ bijzin: *"of paar je telefoon één keer en log voortaan in via QR"*) +2. Product aanmaken +3. Product Backlog opbouwen +4. Sprint starten +5. Sprint Board +6. Solo Paneel +7. **API-token aanmaken** (nodig voor MCP én REST) +8. **Claude Code koppelen** — installeer `scrum4me-mcp` (aanbevolen) of gebruik REST API +9. **Story laten uitvoeren** — klik "Voer uit", lokale agent pakt 'm op via `wait_for_job`, commit + status-update gaan automatisch; NavBar toont actieve workers +10. Sprint afronden + +### §10 Footer + +Voeg link toe naar `https://github.com/madhura68/scrum4me-mcp` naast bestaande Scrum4Me-repo-link. Geen drie-kolommen-layout. + +## Bestanden + +**Wijzigen:** +- `app/page.tsx` — alle sectie-aanpassingen +- `package.json` — nieuwe `diagrams`-script + +**Nieuw:** +- `docs/diagrams/architecture.mmd` — mermaid-bron +- `public/diagrams/architecture-light.svg` — gegenereerd +- `public/diagrams/architecture-dark.svg` — gegenereerd + +**Referentie (geen edits):** +- `docs/runbooks/mcp-integration.md` +- `docs/architecture/claude-question-channel.md` +- `docs/plans/ST-1111-claude-job-trigger.md` + +## Wat we niet doen + +- Geen losse `/architecture`-route — diagram blijft op homepage. +- Geen extracted components onder `components/landing/`. +- Geen runtime-mermaid (zou ~350KB bundle-impact zijn). +- Geen `prebuild`-hook. +- Geen Engelse vertaling. +- Geen wijziging aan `theme.css` of shadcn-config. +- Geen LIVE-callout meer onder feature-grid. +- Geen drie CTA's in hero. + +## Verificatie + +```bash +npm install +npm run diagrams +npm run dev # http://localhost:3000 in 1024px+ +``` + +Visueel checken: +- Hero leest *"Plannen in de cloud. Uitvoeren op je eigen machine."* +- Architectuur-sectie toont diagram met twee zones; in dark-mode switcht automatisch. +- Anchor-link `#architectuur` werkt vanuit hero-CTA. +- Feature-grid toont 6 kaarten in `lg:grid-cols-3` over 2 rijen. +- Quickstart-codeblock leesbaar en kopieerbaar. +- Handleiding heeft 10 stappen, MCP staat in stap 8 als aanbevolen. +- Footer toont MCP-repo én Scrum4Me-repo. +- Demo-credentials nog steeds zichtbaar onder hero-CTA's. + +```bash +npm run lint && npm test && npm run build +``` + +Daarna pas commit. Niet pushen zonder bevestiging (CLAUDE.md hardstop). + +## Grilling-uitkomsten (samenvatting) + +15 vragen via `/grill-me` op 2026-05-03 hebben volgende beslissingen vastgelegd: + +| # | Onderwerp | Beslissing | +|---|---|---| +| 1 | Veiligheidsclaim | Genuanceerd: hero zacht, architectuur-sectie eerlijk over plan-tekstvelden in DB | +| 2 | Doelgroep | Mix (D), zwaartepunt op privacy-bewuste indie + homelab-team | +| 3 | Diagram-nodes | 4 boxen + label *"Lokale worker (laptop / NAS / VM)"* | +| 4 | Renderkeuze | Mermaid via mmdc (al in repo) | +| 5 | Diagram-zonering | Twee subgraphs (Scrum4Me-stack vs Jouw kant) | +| 6 | Embedding | `` x2, light + dark SVG, switch via Tailwind | +| 7 | Hero-copy | H1 "Plannen in de cloud. Uitvoeren op je eigen machine." + subhead Z | +| 8 | Sectievolgorde | Architectuur op #3, Tour op #4 | +| 9 | Feature-cards | Set C: 6 stuks, Sprint+Solo gecombineerd, Todo's erbij | +| 10 | Handleiding | 10 stappen, MCP als hoofdroute, "Voer uit" als stap 9 | +| 11 | Diagram-bron | `docs/diagrams/architecture.mmd`, output gecommit | +| 12 | Twee manieren → Quickstart | Vervangen door code-snippet | +| 13 | Hero-CTA's | "Account aanmaken" + "Hoe het werkt" (anchor) | +| 14 | Plan-bestand | Story aangemaakt, plan in `docs/plans/landing-local-first.md` | +| 15 | Beta + LIVE + Footer | Beta-notice behouden, LIVE-callout schrappen, één extra footer-link | diff --git a/package.json b/package.json index d1a1928..4eb6e75 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,8 @@ "seed": "prisma db seed", "docs:index": "node scripts/generate-docs-index.mjs", "docs:check-links": "node scripts/check-doc-links.mjs", - "docs": "npm run docs:index && npm run docs:check-links" + "docs": "npm run docs:index && npm run docs:check-links", + "diagrams": "mmdc -i docs/diagrams/architecture.mmd -t default -b transparent -o public/diagrams/architecture-light.svg && mmdc -i docs/diagrams/architecture.mmd -t dark -b transparent -o public/diagrams/architecture-dark.svg" }, "dependencies": { "@base-ui/react": "^1.4.1", diff --git a/public/diagrams/architecture-dark.svg b/public/diagrams/architecture-dark.svg new file mode 100644 index 0000000..ca9fada --- /dev/null +++ b/public/diagrams/architecture-dark.svg @@ -0,0 +1 @@ +

Jouw kant (lokaal)

Scrum4Me-stack (managed)

Prisma + SSE

git push

HTTPS

job claim + LISTEN/NOTIFY

Jij in je browser

Vercel
UI · Server Actions · cron

Neon Postgres
metadata · jobs · logs

Lokale worker
laptop / NAS / VM
Claude Code + MCP

GitHub
jouw repo

Scrum4Me — architectuur (lokaal & veilig) \ No newline at end of file diff --git a/public/diagrams/architecture-light.svg b/public/diagrams/architecture-light.svg new file mode 100644 index 0000000..02691d1 --- /dev/null +++ b/public/diagrams/architecture-light.svg @@ -0,0 +1 @@ +

Jouw kant (lokaal)

Scrum4Me-stack (managed)

Prisma + SSE

git push

HTTPS

job claim + LISTEN/NOTIFY

Jij in je browser

Vercel
UI · Server Actions · cron

Neon Postgres
metadata · jobs · logs

Lokale worker
laptop / NAS / VM
Claude Code + MCP

GitHub
jouw repo

Scrum4Me — architectuur (lokaal & veilig) \ No newline at end of file