feat: replace UI mockups with real netOrk screenshots

The homepage showed seven hand-built JSX imitations of the netOrk UI. They
are gone; every image is now a screenshot of netOrk v0.28.0 itself, taken
from an anonymized copy of a production database (scripts/demo) with
scripts/screenshots/capture.py and published as WebP (~630 KB for all eight).

- Hero: the device inventory. Walkthrough: device detail, VLANs, the Security
  tab, the vulnerability triage queue (replacing the config-diff row), the
  dashboard and service checks (new row 6). NIS2: the audit log, filtered to
  what people did.
- Copy follows the images: row 3 describes the security assessment, row 4 the
  triage queue; row 2 no longer claims corrections are always automatic;
  18 widgets. Alt texts in both languages.
- Also fixed on the homepage: the NIS2 teaser for Art. 21 (2e) and the
  container list of a deployment (three worker pools, plus Flower, registry,
  APT cache and the Signal gateway).
- Demo tooling hardened on the real dump: secrets inside JSON (Wi-Fi keys),
  reverse DNS zones, glued identifiers, tens of thousands of CrowdSec
  addresses, a schema newer than the release (anonymize, then downgrade),
  MFA-enforcing roles, and click steps for view filters.
- DESIGN.md: real screenshots only. PAGES.md: the six rows as they are.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

docs/DESIGN.md

@@ -195,10 +195,16 @@ against the dark background:
 
 ```tsx
 <div className="rounded-xl border border-slate-700 overflow-hidden shadow-2xl">
-  <img src="/screenshots/device-list.png" alt="Device inventory" className="w-full" />
+  <img src="/screenshots/devices.webp" alt="Device inventory" className="w-full" />
 </div>
 ```
 
+**Only real screenshots of the running application.** No JSX mockups or
+drawn imitations of the UI. They come from an anonymized demo copy of a real
+installation and are taken with `scripts/screenshots/capture.py` (see
+`scripts/demo/README.md`), published as WebP in `public/screenshots/`.
+`Screenshot` in `src/pages/Home.tsx` is the frame.
+
 Optionally add a browser chrome header above the image:
 
 ```tsx
@@ -206,7 +212,7 @@ Optionally add a browser chrome header above the image:
   <span className="h-2.5 w-2.5 rounded-full bg-red-500/70" />
   <span className="h-2.5 w-2.5 rounded-full bg-yellow-500/70" />
   <span className="h-2.5 w-2.5 rounded-full bg-green-500/70" />
-  <span className="ml-4 text-xs text-slate-500 font-mono">netork.local</span>
+  <span className="ml-4 text-xs text-slate-500 font-mono">netork / devices</span>
 </div>
 ```
 

docs/PAGES.md

@@ -124,45 +124,21 @@ Each badge uses the `Driver / Integration Badge` component from DESIGN.md.
 
 ### Section 5 — Screenshot Walkthrough (alternating)
 
-**Purpose:** Show the UI concretely. Three alternating image + text rows.
+**Purpose:** Show the UI concretely. Six alternating image + text rows, each a
+real screenshot from `scripts/screenshots/shots.py`. Copy lives in
+`home.screenshot1`–`screenshot6` in `src/i18n/translations.ts`.
 
-**Row 1 — Left text, right screenshot**
-- Heading: `Device detail at a glance`
-- Copy: `Hostname, IP, vendor, OS version, last poll time, and active
-  warnings on one card. Tabbed detail view for interfaces, LLDP neighbors,
-  ARP table, VLAN membership, packages, services, and scheduled jobs.`
-- Screenshot: DeviceDetailPage
+| Row | Heading | Screenshot |
+|---|---|---|
+| 1 | Device detail at a glance | `device-detail` — an access point, Networking → Interfaces |
+| 2 | Intent-based VLAN and SSID management | `vlans` — VLAN list by site |
+| 3 | A security assessment for every device | `device-security` — a server, Security → Assessment |
+| 4 | One triage queue, decisions that hold | `vulnerabilities` — the triage queue |
+| 5 | Dashboards you actually build | `dashboard` — the home dashboard |
+| 6 | Service checks every minute | `service-checks` — Network → Service Checks |
 
-**Row 2 — Right text, left screenshot**
-- Heading: `Intent-based VLAN and SSID management`
-- Copy: `Define VLAN names and SSID settings once. netOrk compares them
-  against every polled device and pushes corrections automatically via
-  UCI (OpenWRT) or the device's native API.`
-- Screenshot: VlansPage or WirelessPage
-
-**Row 3 — Left text, right screenshot**
-- Heading: `Security visibility per device`
-- Copy: `Wazuh agent status, CVE counts by severity, and recent alerts
-  — all linked to the device record. One-click agent install if the
-  agent is missing. Graylog syslog forwarding status with auto-fix.`
-- Screenshot: SecurityTab inside DeviceDetailPage
-
-**Row 4 — Right text, left screenshot**
-- Heading: `Configuration backup and versioning`
-- Copy: `Every poll captures a config snapshot into a local Git
-  repository. The Config tab shows the full snapshot history, a
-  side-by-side diff between any two points in time, and — for
-  OPNsense — a Restore button. Unauthorized changes show up as a
-  device warning.`
-- Screenshot: ConfigTab inside DeviceDetailPage
-
-**Row 5 — Left text, right screenshot**
-- Heading: `Dashboards you actually build`
-- Copy: `Pick from 13 widgets and arrange them on a WYSIWYG grid — no
-  more fixed layout. Share a dashboard with a colleague, let them
-  subscribe to your live version or clone it into their own, and pin
-  favorites to the main menu.`
-- Screenshot: DashboardDetailPage (edit mode)
+Text sits left on odd rows and right on even rows; on mobile the text always
+comes first.
 
 ---
 
@@ -170,7 +146,7 @@ Each badge uses the `Driver / Integration Badge` component from DESIGN.md.
 
 **Purpose:** Hook for organizations evaluating netOrk in a NIS2 context.
 
-**Layout:** Left column — label + Art. 21 mapping list. Right column — mock compliance overview UI.
+**Layout:** Left column — label + Art. 21 mapping list. Right column — screenshot of the audit log (`audit-log`), the evidence the list refers to.
 
 **Label (eyebrow):** `NIS2 · Art. 21` (sky-500, uppercase, tracking-widest)