feat(demo): add Demo Guide (8-step guided tour) and scenario overview

Adds a compact "Probeer een demonstratiescenario" page listing the 5 named
scenarios with live readiness from the manifest, plus a Demo Guide side
panel (bottom sheet on mobile) that walks an Operations Manager through
all 8 steps with per-step context, live-resolved routes, sessionStorage
progress, and a "Demo opnieuw voorbereiden" restart. Login's guided-demo
CTA now actually opens the guide. Fixes a real mobile topbar overflow the
new guide trigger introduced.
This commit is contained in:
NuklearRabbit
2026-08-03 14:15:15 +02:00
parent c63903cc94
commit 9fff84dc68
11 changed files with 647 additions and 29 deletions
+4
View File
@@ -5,6 +5,7 @@ import { useAuth } from "../context/AuthContext";
import type { Role, SearchResultItem } from "../api/types";
import { BrandMark, Icon, type IconName } from "./Icons";
import { DemoBadge } from "./DemoBadge";
import { DemoGuide, DemoGuideTrigger } from "./DemoGuide";
import { useDemoManifest } from "../context/DemoManifestContext";
const SEARCH_ICON: Record<SearchResultItem["type"], IconName> = {
@@ -277,6 +278,7 @@ export function Layout() {
)}
</div>
<div className="topbar-meta">
<DemoGuideTrigger />
<DemoBadge />
<span className="timezone"><Icon name="clock" /> Europe/Brussels</span>
{user && (
@@ -307,6 +309,8 @@ export function Layout() {
<span>More</span>
</button>
</nav>
<DemoGuide />
</div>
);
}