[feat](insights): group the landing into four lenses + three activities

[programmerShinobi]

The finding

The Insights tab renders seven cards in one flat grid — and that is the main reason it reads as daunting.

Four of those cards (Catalog, Playbook, Review, Library) are the same 21 architectures seen from four angles. Every architecture appears in all four, and each page already carries a switcher to jump between them. The other three (Roadmap, Academy, Lab) are activities you do.

Flattened into seven peers, that reads as seven separate libraries to work through — both wrong and discouraging.

The codebase already knew this. src/config/sections.ts says "the four architecture lenses plus Roadmap, Academy, Lab" — in a comment. The UI never said it.

What changed

Two labelled groups, each stating what the group is:

Read about the architectures — Four ways of reading the same 21 architectures — not four separate libraries. Pick the angle that matches your question; every architecture appears in all four.

Build the skill — Things you do rather than read: a route through the material, questions to test yourself against, and a sandbox that runs the real scoring engine.

An "Open this when…" line on every card. The existing desc fields say what a section contains — not the question someone facing seven cards is asking. They are asking which to click, decided by what they are trying to do right now. So these are phrased as circumstances:

Section	Open this when…
Catalog	you do not yet know what an architecture is or where it is used
Playbook	you have decided and now have to build it
Review	you are weighing two options against each other
Library	you hit a term you do not recognise
Roadmap	you want a route instead of choosing where to start
Academy	you want to find out what you actually retained
Lab	you want to see a trade-off move instead of reading about it

Guide §8 rewritten from a one-sentence list of seven names into four paragraphs: the 4+3 split and why it matters, each lens by the question it answers, the three practice sections, and two things worth knowing first — that Guided/Expert changes reading depth across the whole tab, and that the articles are in English by product decision while the navigation follows your language.

Bundle — stated plainly

Initial JS 121→122kB. Those 11 dict keys are only read on a lazy tab, but dict is a single object literal, so Vite cannot tree-shake properties — every key costs first paint wherever it is used. That is a known, accepted property of this i18n design rather than something introduced here; recorded inline so the next raise is judged on the same terms. Total 284, NFR cap 300.

Gates

tsc clean · lint 0 warnings · 241/241 unit (2 new, pinning the grouping and one routing line per section) · 14/14 E2E · 7/7 guards.

Landing verified in both languages at 390px and 1440px: correct group headings, 7 cards, 7 routing lines, 0 axe violations (WCAG 2.0/2.1 A+AA), no horizontal overflow.

🤖 Generated with Claude Code