feat(ST-611): add tour with screenshots, Solo Paneel and Sprint Board to landing page
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
767476aa8e
commit
3977b89ca7
1 changed files with 82 additions and 10 deletions
92
app/page.tsx
92
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
|
||||
</Link>
|
||||
<Link
|
||||
href="/solo"
|
||||
className="px-3 py-1.5 rounded-md text-sm text-muted-foreground hover:text-foreground hover:bg-surface-container transition-colors"
|
||||
>
|
||||
Solo
|
||||
</Link>
|
||||
<Link
|
||||
href="/todos"
|
||||
className="px-3 py-1.5 rounded-md text-sm text-muted-foreground hover:text-foreground hover:bg-surface-container transition-colors"
|
||||
|
|
@ -109,6 +116,62 @@ export default async function LandingPage() {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── Tour (screenshots) ─────────────────────────────────────── */}
|
||||
<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">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.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{[
|
||||
{
|
||||
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) => (
|
||||
<figure
|
||||
key={s.src}
|
||||
className="bg-surface-container-low border border-border rounded-xl overflow-hidden flex flex-col"
|
||||
>
|
||||
<div className="relative aspect-[16/10] bg-surface-container">
|
||||
<Image
|
||||
src={s.src}
|
||||
alt={s.alt}
|
||||
fill
|
||||
sizes="(max-width: 1024px) 100vw, 33vw"
|
||||
className="object-cover object-top"
|
||||
/>
|
||||
</div>
|
||||
<figcaption className="p-5 space-y-2">
|
||||
<div className="text-sm font-medium text-primary">{s.title}</div>
|
||||
<p className="text-sm text-muted-foreground leading-relaxed">{s.caption}</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── Wat is Scrum4Me ────────────────────────────────────────── */}
|
||||
<section className="px-6 py-14 bg-background">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
|
|
@ -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.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div className="bg-surface-container-low border border-border rounded-xl p-5 space-y-2">
|
||||
<div className="text-sm font-medium text-primary">Hiërarchisch plannen</div>
|
||||
<p className="text-sm text-muted-foreground leading-relaxed">
|
||||
|
|
@ -127,10 +190,17 @@ export default async function LandingPage() {
|
|||
</p>
|
||||
</div>
|
||||
<div className="bg-surface-container-low border border-border rounded-xl p-5 space-y-2">
|
||||
<div className="text-sm font-medium text-primary">Sprint-beheer</div>
|
||||
<div className="text-sm font-medium text-primary">Sprint Board</div>
|
||||
<p className="text-sm text-muted-foreground leading-relaxed">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-surface-container-low border border-border rounded-xl p-5 space-y-2">
|
||||
<div className="text-sm font-medium text-primary">Solo Paneel</div>
|
||||
<p className="text-sm text-muted-foreground leading-relaxed">
|
||||
Persoonlijk Kanban-bord per product. Claim stories vanuit de Sprint en werk
|
||||
je taken af in drie kolommen — To Do, Bezig, Klaar.
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-surface-container-low border border-border rounded-xl p-5 space-y-2">
|
||||
|
|
@ -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 }) => (
|
||||
<div key={step} className="flex gap-4 bg-surface-container-low border border-border rounded-xl p-5">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue