[viganogabriele]

Seventh step of the visual refinement. This PR is stacked on #204 (Unisciti), which is stacked on #203 → #202 → #201 → #200 → #199. Review and merge them in order. The diff below is relative to feat/join-visual-refinement.

Two commits:

1. a shared vertical rhythm for the pages redesigned so far;
2. /collabora (Figma desktop 5248:13597, mobile 5246:13012).

1. Shared rhythm (refactor(layout))

Each earlier PR spaced its page differently:

• 144 to 288 px between sections at 1728 px;
• hero titles anywhere between y=224 and y=282.

components/layout/page.ts now exports PAGE_MAIN and PAGE_HERO. Their values come from the Figma frames:

	Phone	Tablet (md)	Desktop (xl)	Figma reference
Gap between sections	96	128	180	180 px between section blocks in Su di noi and Storia at 1728
Extra air after the hero	+32	+48	+96 (≈ 276)	first section title 577 px below the hero title on every frame
Hero title (desktop)			y = 286	same on every frame
Space before the footer	96	128	180

The rhythm is applied to Storia, Su di noi, Struttura, Team, Unisciti and Collabora.

• Unisciti and Team: they had stretched their gaps (224–288 px) to make up for sections that are shorter than in Figma, mostly because the photo galleries are missing. Under the shared rule Unisciti is 300 px shorter at 1728.
• Unisciti's first section: it now lands at y=806, against 863 in Figma.
• Storia and Su di noi: they land within 10 px of Figma: "Come è nato tutto" at 856 against 865, "Il problema" at 863.

2. Collabora

At 1728 the page matched Figma, but it broke at every width Figma doesn't draw:

• below 1440 px everything stacked into a 719 px column with half the screen empty;
• the contact steps stayed vertical up to 1615 px;
• tablets showed paragraphs of 24 px Poppins.

Container, titles and rhythm

• The page uses the same container, section titles and rhythm as the other redesigned pages. It no longer has its own frame with 145 px gutters and per-section paddings.
• At 1728 the text column now starts at 228 px instead of 145, like Storia, Su di noi and Struttura. The audit had flagged the 145 / 225 px discrepancy as a design-system issue (R6).

Copy

• Body text steps 16 → 20 → 24 px; 24 px, the Figma size, applies from 3xl (1440). It is left-aligned at every width, like the other pages; the Figma mobile frame centres it.
• The wide "Cosa possiamo fare insieme?" paragraph narrows to about 65 characters a line below 3xl. At 20 px it would have run to about 90.
• Line breaks hard-coded for the 1728 frame are removed: the <br> tags that only showed from 1728, and the one inside "1000+".

Figures (18k+, 45k+…)

• One row of four on laptops and two per row on tablets.
• From xl, Figma's 2×2 block next to the copy.
• Cards size to their content instead of a fixed 245 px height, with tighter padding until 3xl.

Photo sections

• Side by side from lg, keeping Figma's 719:611 ratio, and vertically centred so a taller text column doesn't leave the photo hanging.
• Stacked below lg, with the photo as wide as the copy instead of a narrower 611 px block.

Contact steps

• A row from lg with flexible cards. Titles are 24 px and may wrap; the address breaks after the "@".
• Below lg the steps stay stacked at Figma's card width.
• The e-mail step is now a mailto: link. It is the only card on the page that leads somewhere, so it is the only one with hover and focus.

Unchanged

• The mobile carousel, the photos and their crops, the shapes drawn over the photos, and the copy.
• Which Collabora version is current is still an open designer decision; this PR doesn't switch versions.

Shared changes and their reach

Change	Affects
PAGE_MAIN / PAGE_HERO in layout/page.ts	Storia, Su di noi, Struttura, Team, Unisciti and Collabora: spacing only
SectionTitle uses SECTION_TITLE; sectionContainerClass removed	only Collabora: Unisciti imports just Highlight from this module
InfoCard: optional titleClassName	none unless set. Unisciti's height at 1440 is unchanged (4751 px with and without this commit)

Screenshots

Each image shows before and after, full page.

Collabora

E-mail step on hover (1440)

Shared rhythm

Verification

• pnpm check: clean.
• pnpm build: passes.
• pnpm typecheck: passes.
• node --test tests/*.test.mjs: 2/2 pass.
• Collabora: checked in the browser at 320, 390, 768, 1024, 1180, 1279, 1280, 1440, 1728 and 1920 px, with no horizontal overflow.
• The five other pages: checked at 390, 1024, 1440 and 1728 px.

Trade-offs

• Collabora at 1728 is no longer pixel-identical to Figma. The column is 1272 px instead of 1438, so the association title wraps onto two lines and the copy wraps differently. Consistency between pages wins over matching this one frame.
• Unisciti gets shorter. It had stretched its gaps to imitate Figma's height. The real fix is the missing gallery content, not larger gaps.
• The figure cards at lg are about 220 px wide, so descriptions run to 3–4 short lines.
• Mobile hero title: at y≈224 instead of the 262 of Figma's 402 px Collabora frame, to match the other pages.

Deliberately left out

• The choice between Collabora versions.
• The photo-gallery content that Unisciti and Team are missing.
• Copy and decorations.

Housekeeping

The screenshots live on the pr-assets/collabora-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: 66f10e60-e2d9-4d37-b0a8-c2f1164f404b

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