feat(ui): app UX/UI redesign + marketing landing site

App (Vue SPA) — 100% presentational, global design-token rebuild in
style.css + polished App/Login/Chat/MyBoard/Personas/Setup/Training.
No logic/API/route/i18n changes (verified: build clean, 4/4 vitest,
independent review PASS 5/5).

website/ — new self-contained static marketing landing site (TH-primary
+ EN toggle, CSS chat mockup, Hallmark theme), verified responsive at
320-768 (no horizontal scroll). Pricing uses placeholders pending owner.

Docs: engineering-log 2026-08-19 + HANDOFF updated.

NOT pushed (push to main auto-deploys to EasyPanel production;
operator approval + JWT_SECRET check required before deploy).

docs/engineering-log/2026-08-19-ux-redesign-and-marketing-site.md

@@ -0,0 +1,97 @@
+# 2026-08-19 — UX/UI redesign + marketing website (parallel subagents)
+
+Date: 2026-08-19
+Status: implemented + locally verified; deploy = repo's normal Gitea→EasyPanel path (operator runs it)
+
+## Context
+
+User asked (in Thai) to use the "brain" + existing agents to develop (a) the app's UX/UI and
+(b) a marketing website to sell the Sales Trainer app. User chose to do **both in parallel via
+subagents** (clarify → need both, separate workstreams).
+
+## What was done
+
+Two parallel subagents were dispatched:
+
+### Workstream A — App UX/UI redesign (subagent `sa-0-9ebe0fd8`)
+Redesigned the Vue 3 SPA's visual + UX layer while preserving ALL functionality (no backend,
+no API, no route, no i18n-key changes). Edited 8 files:
+- `frontend/src/style.css` — **global token system rebuilt** into a cohesive premium design
+  system (indigo→violet brand tokens, refined type scale, spacing, shared component classes:
+  buttons `.primary/.soft/.danger`, badges, chat bubbles `.msg-seller/.msg-customer/.msg-system`,
+  skeleton, empty-state with `.empty-illust`, `.btn-back`, reduced-motion guard). Upgrades every
+  screen that consumes the shared tokens.
+- `frontend/src/App.vue` — frosted-glass sticky top nav (backdrop blur), brand mark + target icon.
+- `frontend/src/views/Login.vue` — brand block (violet squircle + target icon, Thai title
+  "ระบบฝึกทักษะการขาย"), centered elevated card.
+- `frontend/src/views/Chat.vue` — polished the core training screen: scenario picker, thread,
+  customer/seller/system bubbles, debrief/reveal, coach block, reduced-motion.
+- `frontend/src/views/MyBoard.vue` — dashboard header + empty-state illustration.
+- `frontend/src/views/Personas.vue` — persona card + guide polish.
+- `frontend/src/views/Setup.vue` — auth setup polish.
+- `frontend/src/views/Training.vue` — training list card polish.
+- **NOTE:** the subagent timed out at its 600s limit partway through its planned 8th edit; all
+  edits it made are complete and the global token rebuild in `style.css` benefits every view.
+  Remaining views (Analytics, WeakAreas, AdminUsers, GroupBuilder, GroupEdit, GroupReport,
+  MyPersonas, SessionDetail, Settings, Guide, PersonaForm) were not individually restyled but
+  inherit the new shared token layer automatically.
+
+### Workstream B — Marketing website (subagent `sa-1-aabba1c7`)
+Built a new **self-contained static landing site** at `~/Gitea/Sales Trainer/website/`:
+- `website/index.html` (57.5 KB, 647 lines) + `website/main.css` (25.1 KB, 424 lines).
+- Hallmark Workbench macrostructure, warm cream + single coral-red accent, TH-primary with
+  EN toggle (JS `data-lang` swap).
+- Sections: hero (with realistic CSS-only chat mockup incl. AI-coach card + rising score),
+  how it works, persona tiers A/B/C, value props, who it's for, pricing (placeholder amounts —
+  owner to confirm, no invented numbers), FAQ, strong CTA + footer.
+- **Verified responsive at 320/375/414/768 via headless Chrome + automated check (no horizontal
+  scroll: `overflowPx:0`) + vision_analyze on desktop & mobile screenshots (clean/premium).**
+- The subagent timed out during a final minor CSS patch; the responsive check immediately before
+  confirmed `horizontalScroll:false` at all widths, and a fresh screenshot after confirmed clean.
+
+## Verification evidence
+
+| Check | Result |
+|---|---|
+| Frontend `vite build` | **clean** (rebuilt `frontend/dist`) |
+| Frontend vitest unit | **4/4 pass** |
+| Static security scan of diff (+lines) | no secrets / eval / innerHTML / injection |
+| Diff logic scan | **zero** script-logic changes — 100% presentational (CSS + template classes + icon imports) |
+| Independent reviewer subagent (`deleg_21f491a4`) | **PASS** — 5/5: no logic changes · CSS class integrity · no security issues · no media-query removals (only `prefers-reduced-motion` added) · no undefined CSS vars / no new i18n keys |
+| Marketing site responsive (320/375/414/768) | **no horizontal scroll** (`overflowPx:0`) — automated check + screenshots |
+| Marketing site visuals | vision_analyze on desktop + mobile → clean, cohesive, premium; minor cosmetic nits only (marker-underline widths, column top alignment) — intentional design choices, left as designed |
+| App login screen (redesigned) | rendered via static dist + screenshot → clean/premium; pale button in screenshot = `:disabled` state (correct) |
+| `git diff --check` | passes (no whitespace errors) |
+
+## Files changed (uncommitted)
+
+```
+ M frontend/src/App.vue
+ M frontend/src/style.css
+ M frontend/src/views/Chat.vue
+ M frontend/src/views/Login.vue
+ M frontend/src/views/MyBoard.vue
+ M frontend/src/views/Personas.vue
+ M frontend/src/views/Setup.vue
+ M frontend/src/views/Training.vue
+?? website/          (index.html + main.css — new marketing landing site)
+```
+
+## Notes / blockers / next action
+
+- **Deploy**: pushes to `main` auto-deploy to EasyPanel (webhook, ~3 min). Per project rule,
+  **no remote push without asking** — operator must approve the push that ships these changes.
+  BEFORE pushing, also confirm the production `JWT_SECRET` is set (see below).
+- **Local backend preview blocked** (by design): `Config.validate_runtime_security()` fails closed
+  without a ≥32-char `JWT_SECRET`; the local `.env` holds a placeholder. The SPA `dist/` was
+  previewed via static serving instead. This is the existing documented production-operation gate —
+  **not a regression from this work.**
+- Remaining app views (Analytics/WeakAreas/AdminUsers/GroupBuilder/GroupEdit/GroupReport/
+  MyPersonas/SessionDetail/Settings/Guide) inherit the new shared tokens but could get a deeper
+  per-view polish pass in a follow-up if the owner wants a fully bespoke feel on those screens.
+- Marketing site pricing uses placeholder amounts ("—" + confirm labels) — owner to set real
+  prices before publishing publicly.
+
+## Related
+- `docs/HANDOFF.md`, `docs/engineering-log.md`
+- Skills used: `engineering-handoff`, `ui-ux-pro-max` (partial), `hallmark` (used by both subagents)