[viganogabriele]

Second page of the visual refinement, stacked on #199 (it uses the fluid display utilities added there). Figma: 5368:5885.

The page is an archive, so its length is fine. The problem was that every element had the same visual weight: timeline, chapters, diagrams, closing statements and panels were all glass cards. The six chapters lost the structure that makes a long sequence readable. This PR restores Figma's editorial structure and removes containers and hover where nothing is clickable.

What changes

Hero

• Figma's centred XL title (typo-display-fluid-extralarge) with the gradient subtitle and the two anchor actions.
• Removed the collage of three rotated portraits and the floating "200+ admin" chip. They were not in Figma, they read as a generated landing page, and the same portraits appear further down under I nostri direttivi.

Come è nato tutto

• Removed the two cards "2016 / 2022". They repeated the timeline that follows immediately.
• Figma's right column holds an archive photo that doesn't exist yet. Until it does, the text stands alone on a comfortable measure, left-aligned.

Timeline 2016 → oggi

• Nodes on a line (icon tile, year, caption) instead of four hoverable glass cards: vertical below lg, horizontal from lg as in Figma.
• The year is the link to its chapter, with an underline on hover and focus. The rest of the node no longer pretends to be a button.

Chapters 01–06, the biggest change (see the close-up below)

• The numeral sits in the margin (display-small, blue-secondary).
• One continuous 1 px rule runs between the numerals and the text across all six chapters. This is Figma's device for reading a long sequence.
• The diagrams are drawn without containers, as in Figma:
  • icon chains with arrows (01, 02);
  • 5 → ~25 → 4 (03);
  • before → after columns (04, 05). These lose their meaning when split into stacked cards;
  • a status list with check and clock icons (06).
• Before: up to three glass cards per chapter, 14 cards in total.

Other sections

• I nostri direttivi:
  • the portraits no longer lift on hover, because they aren't links;
  • the "Il Direttivo" summary is plain text instead of a glass panel.
• I nostri progetti:
  • the note about where the projects come from sits beside the 3 × 2 tools as in Figma, instead of in a glass panel under them;
  • the device mockup is capped at 672 px on tablets.
• Un grazie speciale: the search, tabs and names lose their glass panel.
• Essere lì quando serve: "L'obiettivo è raggiunto" was a card with a hover effect. It is now a closing statement with a single left rule.
• La storia continua:
  • the gradient glass panel is gone;
  • the years sit on a line;
  • "?" is a dashed open slot instead of a filled primary pill that looked like a button.
  • Also fixed: the sentence "Nuove persone, nuove idee, nuovi progetti." is kept, moved into the paragraph where Figma has it.

Layout

• One container for every section: max-w-350 with 24/40/64 px gutters, which is Figma's 1272 px column at 1728.
• The page's max-w-700/px-4 wrapper and the per-section max-w-330 px-6 are gone.
• Left alignment at every width. Before, mobile mixed centred and left-aligned sections.
• Longer top spacing under the header.

Shared changes and their reach

None. Every change is in src/app/storia and src/components/storia.

• ui/hero is reused as is, with a className override.
• TextOnlyLayout is only configured through classNames. CONTAINER adds md:px-10 to neutralise its md:px-36 default.

Screenshots

Chapters, 1440 px

Desktop 1440 (full page)

Tablet 1024

Mobile 390

Verification

• pnpm check: clean.
• pnpm build: passes.
• pnpm typecheck: clean.
• node --test tests/*.test.mjs: 2/2 pass.
• I checked the page in the browser at 320, 390, 768, 1024, 1180, 1279, 1280, 1440, 1728 and 1920 px, with no horizontal overflow.
• Page height at 1440 drops from 10 000 to 9 225 px.

Trade-offs

• The chapter diagrams are lighter than the old cards. The step labels are 12–14 px, as in Figma. This is deliberate: the text is the content and the diagrams summarise it. If they feel too faint, the next step is a larger label size, not containers.
• "Come è nato tutto" leaves the right half empty from xl. This holds until a photo is provided. I preferred that to filling the space with duplicated content.
• The 1279 → 1280 switch to two columns remains for the chapters, projects and closing sections. The timeline already switches at lg.

Deliberately left out

• The organisation chart is unchanged. It is duplicated in /about; unifying the two charts in one component belongs in the Struttura PR.
• The empty board terms (2016–2023: "non ancora disponibile") are content to provide. Hiding those tabs is the association's call.
• No sticky chapter index (VISUAL_AUDIT, navigabilità): it is a new pattern, worth its own small PR.
• No new photos or content.

Housekeeping

The screenshots live on pr-assets/storia-visual-refinement, which can be deleted after review. This PR is stacked on #199: merge that one first, and GitHub retargets this PR to main.

🤖 Generated with Claude Code

[coderabbitai]

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

• Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

• 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

_{Comment @coderabbitai help to get the list of available commands.}