[viganogabriele]

Stacked on #211: feat/faqs-visual-refinement, the last layer of the stack that starts at #199. This is the last area of the page-by-page visual refinement: /guides, /guides/generali and /guides/corso/**. Figma frames: 1776:3073…1930:5103, mobile 3409:9532 / 3409:11418.

What changes

/guides hub

• The page uses the shared container, rhythm and Hero of the other redesigned pages.
• The hero gets Figma's subtitle, "Una raccolta di guide realizzate dai membri del Network". It is the Figma copy, not new content.
• The two entry cards were centred flex items with different heights and offsets. They now sit in an equal-height grid: one column on phones, two from sm, capped at 896 px.
• The cards are links but had no hover. They now use the same hover as every other link card.

/guides/generali and the course result page

• Lorem ipsum removed: both pages served four lorem-ipsum guides, and they are live on beta today. The data is replaced with empty GENERAL_GUIDES / COURSE_GUIDES, so the pages show the empty state that was already in the code ("Nessuna guida disponibile al momento").
• Shared empty state: it is drawn with the dashed placeholder used by projects, FAQ and associations.
• Same layout as the group results: both pages now use the column and back/close header of the group result pages (feat(groups): fix the results layout and give every link a hover state #208), because they are the end of the same wizard.
• Duplicate close button removed: on /guides/generali the back and close buttons both went to /guides, so only back remains.

/guides/corso wizard is unchanged: it shares WizardShell with /groups, already refined in #208. I re-checked it at every width.

Shared changes and their reach

Change	Other pages affected
groups/page-header.tsx → layout/flow-header.tsx (FlowHeader, FLOW_MAIN), now used by groups and guides	/groups/extra and the group result pages: on phones the top padding goes from 144 to 176 px. Before, the title sat 16 px under the fixed header pill. Desktop is unchanged.
EMPTY_STATE moved to layout/page.ts	/projects, /associations, /faqs: identical classes, no visual change. /groups result and extra pages: their plain empty message becomes the dashed placeholder, so the whole flow is consistent.

Screenshots

The course result page needs the groups list from the backend, which is unreachable locally. Both before and after use the same temporary fixture: one course group, never committed.

Hub

Guide Generali

Course result

Verification

• pnpm check, pnpm build and pnpm typecheck pass.
• node --test tests/*.test.mjs: 3/3 pass.
• Every /guides route was checked at 320, 390, 768, 1024, 1279, 1280, 1440, 1728 and 1920 px, with no horizontal overflow.
• Regression check at 390 and 1440 px on /groups/extra, the group result page, /faqs, /associations and /projects.

Trade-offs

• Empty pages behind a working wizard. /guides/corso now walks three wizard steps to end on "Nessuna guida disponibile". This is honest, unlike the lorem it replaces, but it is still a dead end for the user. See the decision below.
• Narrow card text. The hub cards keep CardIcon's compact text width (240 px), which leaves air on the right at desktop widths. Widening it would change the shared size map.

Deliberately left out / decisions needed

• The guide model. Figma explores per-course articles with expandable sections (1921:4177) and a "Nuova Guida" editor on mobile. Which model to build, and who writes the content, is an open product/association decision (VISUAL_AUDIT §6), so nothing is built here.
• Visibility of /guides (association). Until there is content, should /guides stay reachable from the navigation, or be hidden? The code change for either option is trivial; the choice is not mine.

Housekeeping

The screenshots live on pr-assets/guides-visual-refinement, so this PR's diff stays code-only. That branch can be deleted after review.

🤖 Generated with Claude Code

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

Run configuration

• Source mode: Auto
• Repository: Unavailable
• Branch: Unavailable
• File: No configuration file from this repository applied
• Commit: Unavailable
• Layers: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: aa6e71fc-b87b-42cc-b778-1228e2eedf25

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• Trigger review

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

Share

• X
• Mastodon
• Reddit
• LinkedIn