diff --git a/app/page.tsx b/app/page.tsx index af65c52..cbe5537 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,4 +1,5 @@ import Link from 'next/link' +import Image from 'next/image' import { cookies } from 'next/headers' import { getIronSession } from 'iron-session' import { AppIcon } from '@/components/shared/app-icon' @@ -39,6 +40,12 @@ export default async function LandingPage() { > Producten + + Solo + + {/* ── Tour (screenshots) ─────────────────────────────────────── */} +
+
+

Bekijk Scrum4Me in actie

+

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

+ +
+ {[ + { + src: '/screenshots/sprint-board.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/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.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.', + }, + ].map((s) => ( +
+
+ {s.alt} +
+
+
{s.title}
+

{s.caption}

+
+
+ ))} +
+
+
+ {/* ── Wat is Scrum4Me ────────────────────────────────────────── */}
@@ -118,7 +181,7 @@ 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

@@ -127,10 +190,17 @@ export default async function LandingPage() {

-
Sprint-beheer
+
Sprint Board

- Start een Sprint met een doel, sleep stories naar de Sprint Backlog en - volg de voortgang per story via taken en statusupdates. + 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.

@@ -184,7 +254,9 @@ export default async function LandingPage() { { 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.' }, - { term: 'Sprint Planning', def: 'Scherm waar taken per story worden aangemaakt en geordend. Claude Code werkt vanuit dit niveau.' }, + { term: 'Sprint Board', def: 'Drie-panelen scherm op één view: Product Backlog, Sprint Backlog en taken per geselecteerde story. Vervangt het oude losse Sprint Planning-scherm.' }, + { term: 'Solo Paneel', def: 'Persoonlijk Kanban-bord per product. Toont taken van geclaimde stories in drie kolommen (To Do, Bezig, Klaar) — drag-and-drop wijzigt de status.' }, + { term: 'Story-claim', def: 'Een developer claimt een story uit de Sprint en wordt assignee. Pull-systeem (zelf-organisatie) — niet pushed door een Scrum Master.' }, { term: 'Story-status', def: 'OPEN → IN_SPRINT → DONE. Bepaalt zichtbaarheid in backlogs en Sprint-schermen.' }, { term: 'Taakstatus', def: 'TO_DO → IN_PROGRESS → DONE. Wordt bijgehouden via UI of REST API door Claude Code.' }, { term: 'Activiteitenlog', def: 'Per story worden implementatieplan, testresultaat en commit vastgelegd via de API of UI.' }, @@ -252,13 +324,13 @@ export default async function LandingPage() { }, { step: '5', - title: 'Sprint Backlog vullen', - desc: 'Ga naar het Sprint-scherm. Sleep stories vanuit de Product Backlog (rechterpaneel) naar de Sprint Backlog (linkerpaneel). Stories krijgen automatisch de status IN_SPRINT.', + 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.', }, { step: '6', - title: 'Taken aanmaken (Sprint Planning)', - desc: 'Ga naar Sprint Planning. Selecteer een story in het linkerpaneel om taken toe te voegen in het rechterpaneel. Maak concrete implementatiestappen als taken en orden ze met drag-and-drop.', + 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.', }, { step: '7', @@ -273,7 +345,7 @@ export default async function LandingPage() { { step: '9', title: 'Sprint afronden', - desc: 'Klik op "Sprint afronden" op het Sprint-scherm. Voor elke story kies je: markeer als Done of zet terug naar de Product Backlog. Daarna is een nieuwe Sprint aanmaakbaar.', + 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.', }, ].map(({ step, title, desc }) => (