[viganogabriele]

Stacked on #208 (/groups) → … → #199 (homepage). Merge in order. Two commits: a shared CardIcon fix and the /matricole page.

Figma: desktop 3222:8274, mobile 3351:13333. The page was already faithful to Figma on desktop. This PR brings it onto the layout the other redesigned pages share, and fixes the widths Figma doesn't cover.

1. fix(card-icon): responsive sizes were never generated

CardIcon accepts a responsive size ({ base, sm, md, lg }). The prefixed classes (sm:px-8, lg:h-44…) were built at runtime in card-icon/utils.ts. Tailwind never saw them in the source, so any variant not written literally elsewhere was silently missing.

• Fix: globals.css generates every prefixed variant of the classes.ts maps with @source inline("{sm:,md:,lg:}{…}"). The runtime API is unchanged.
• Guard: tests/card-icon-classes.test.mjs fails if classes.ts gains a class that is missing from that list.
• Reach: only two call sites use responsive sizes.
  • The homepage Materials shortcuts (feat(home): refine homepage layout, proportions and card states #199) now get the intended sm:px-8 (12 → 32 px horizontal padding). Their labels are centred, so nothing moves; at 640 px the 128 px label still fits the 169 px tile.
  • The /storia project list resolves to the same values it had before.
• Regression check: /, /storia, /groups and /guides at 390, 768 and 1440 px have identical page heights.

2. feat(matricole)

Layout

• Shared layout: hero, sections and FAQ use CONTAINER, PAGE_HERO, PAGE_MAIN and SECTION_TITLE from layout/page.ts, like the other redesigned pages. The hero uses the shared Hero.
• Featured resources (Graduatorie, TOL) close the hero, so the hero's extra bottom air is dropped.

Headings

• "Guide e Utility" is a real section title. It was 22 px on phones, smaller than the "Telegram Hub" card title inside it.
• The title now sits closer to its own content than to the cards above. Before, both gaps were about 52 px.

Cards and grids

• Large resource cards: the description cap goes from 240 px to 448 px, so one-sentence descriptions take one or two lines instead of four narrow ones in a card three times as wide.
• Guides grid:
  • The large guide sits beside the 2×2 small guides only from xl, on a 5/7 split. At 1:1 "Mappa Microonde" wrapped at 1280–1440 px.
  • The four small guides use the 20 px inline title (inline-sm).
  • The Materiali / Tech Tools row repeats the 5/7 split, so the columns line up.
  • Below xl the large guide spans the width, with the small ones in 2×2 underneath.
• Telegram Hub:
  • Two columns until xl; four columns clipped "Mercatino" and wrapped "Consigli PC" at 1024 px.
  • On phones the group has 24 px padding instead of 48. Its links now span the width, as in the Figma mobile frame, instead of a 244 px column.
  • CardGroup is only used on this page.

Interaction

• Resources with a link get the card hover; the others (e.g. "Mappa Microonde", which has no URL) don't.

Content source

/matricole reads from web.freshman.getContent (#193), which isn't reachable locally.

• Before and after screenshots both use the same temporary, uncommitted fixture, built from the static content the page had before feat(matricole): load freshman content from the backend #193.
• The real "unavailable" state is shown at the end.

Screenshots

Backend unavailable (real state, no fixture):

Verification

• pnpm check: clean.
• pnpm build: passes.
• pnpm typecheck: passes.
• node --test tests/*.test.mjs: 3/3 pass, including the new test.
• Checked in the browser at 320, 390, 768, 1024, 1279, 1280, 1440, 1728 and 1920 px, with no horizontal overflow.

Trade-offs

• The layout changes form at 1280 px (stacked → side by side), as on the other pages.
• Small guide titles are 20 px, 2 px smaller than the Telegram links.
• The 5/7 split makes the large guide narrower than the featured cards above it. The featured pair stays 1:1, separated by the section gap and title.

Deliberately left out

• Mobile omissions. Featured resources, "Guida della matricola" and "Materiali" are hidden on phones, exactly as in the Figma mobile frame. That omission is an open designer decision ("redo Matricole mobile"), so the mobile design is unchanged.
• Heading level. The hero title is now an h2 via the shared Hero, like every other page, because the header logo is the h1 site-wide. Fixing the heading outline is a separate cross-page change.

Housekeeping

Screenshots live on pr-assets/matricole-visual-refinement, which can be deleted after review.

🤖 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.}