[viganogabriele]

This PR covers /about (Struttura): Figma 5625:7108 for desktop, 6210:11694 for mobile. It also unifies the organisation chart with /storia.

Stacked PR: the base is #201 (/chi-siamo), which sits on #200 (/storia) and #199 (home). Review the diff against feat/chi-siamo-visual-refinement.

What changes

One organisation chart instead of two

• /about and /storia each had their own copy of the chart, around 200 lines each. Both now render OrganizationDiagram from components/structure/organization-chart.tsx.
• The /storia PR (feat(storia): de-cardify the history page and align it with Figma #200) left the chart for this one on purpose, to avoid unifying it twice.

Desktop: nodes as in Figma

• Correction to the audit: in Figma (5625:7108) the nodes are glass tiles, with a 40 % fill and the GLASS effect. The audit said they were free-standing, which was wrong. The tiles stay.
• Nodes are rebuilt as one small component instead of CardIcon with [&_h3]:… overrides.
  • Main nodes: 48 px gradient icon above a 28 px label.
  • Team-lead nodes: 24 → 32 px icon above a 14 → 16 px label.
  • This keeps Figma's proportions at a 1120 px chart width.
• Connectors are 1 px instead of 2 px, with smaller arrows. In Figma they are hairlines.
• Below xl, labels may wrap instead of overflowing the narrow admin column.
• Before, the /storia chart at 1280 px squeezed "Capi admin" against the tile edges.

Mobile: Figma's vertical "Sezione organigramma"

• Team leads hang off a vertical rail, with a tick into each row.
• "Membri Team" sits at the bottom of the admin column, with an arrow from the rail. This balances the two columns as in Figma.
• Before, the five leads and Membri Team were stacked in the right-hand column only, which left the left column half empty.
• At 320 px the lead rows tighten their padding so "International" still fits.

Soci

• Gets Figma's "Ruolo trasversale" tag. It is a label, not an action: no link, no hover.
• It shares the chart's column width. Before, it was wider than the chart above it.

Il Direttivo in carica

• Portraits no longer lift on hover. They are not links, and hover means clickable (rule from feat(home): refine homepage layout, proportions and card states #199).
• On mobile the carousel bleeds to the screen edge and starts aligned, so the next portrait peeks in. Before, one centred portrait gave no hint that the row scrolls.

Come funziona l'associazione

• Titles are text-primary with no icon, as in Figma. Before, they had a blue gradient title and an icon.
• These are definitions, not objects to pick.

Trova il tuo posto

• Card titles are text-primary, as in Figma. Icons and CTAs are unchanged.

Closing "Tutto ciò che c'è da sapere"

• The title uses the grey gradient, like the closing sections in feat(home): refine homepage layout, proportions and card states #199 and feat(storia): de-cardify the history page and align it with Figma #200 (style guide 159:200: decorated background or coloured text).

Container

• The page uses the same container as /storia and /chi-siamo: max 1400 px, gutters 24/40/64 px. Before, it was 1320 px with a fixed 24 px gutter.

Shared changes and their reach

Change	Other pages affected
OrganizationDiagram (in components/structure) now renders the chart in /storia too	/storia "Come è organizzata PoliNetwork": same structure, Figma node sizes, new mobile layout. Checked at 320–1920 px.
No changes to components/ui, card-icon, glass or the carousel	—

Screenshots

Chart, 1440 px (before → after)

Chart, 390 px (before → after)

The same chart in /storia, 1280 px

Full page

Verification

• pnpm check, pnpm build, pnpm typecheck and node --test tests/*.test.mjs (2/2) all pass.
• /about and /storia were checked in the browser at 320, 390, 768, 1024, 1279, 1280, 1440, 1728 and 1920 px.
• No horizontal overflow, and no node wider than its column.

Trade-offs

• Labels wrap below xl. At 1024–1279 px, and in /storia's narrower chart, "Capi admin" wraps to two lines. Shrinking the label to fit would undo Figma's hierarchy.
• Mobile lead labels are 12 px, as in Figma's mobile frame. At 320 px some wrap to two lines.
• The container constant is now copied three times: storia/constants, chi-siamo/constants and structure/constants. Hoisting it into a shared layout primitive belongs with the container/rhythm foundation, not this page PR.

Deliberately left out

• The "Trova il tuo posto" repetition. The same three paths (team, soci, admin) also appear in /join. Removing one is a content and IA decision.
• The Soci CTA. Figma has no CTA on Soci, only the "Ruolo trasversale" tag. The audit's mention of a CTA was mistaken.
• "Forma giuridica" is already faithful and is unchanged.
• The ui/hero title is shared with other pages and is unchanged.
• The navigation architecture (Struttura under "Collabora") is an open decision (VISUAL_AUDIT §9).

Housekeeping

The screenshots live on the pr-assets/struttura-visual-refinement branch, which 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: 46d42b72-4342-4df7-88ea-2a94d1e7383f

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