[viganogabriele]

Stacked on #214 (header): feat/chrome-visual-refinement. This is the footer part of the shared site chrome.

Starting point

The site implemented the official Figma component (5107:12889) as is: a 57 px blue-gradient "Keep in touch!", 24 px icon targets, and two link columns spread about 320 px apart with no shared axis. Three of the links ("Terms", "Privacy", "Cookie") pointed to #, and the copyright sat 144 px below the rest.

The Figma pages themselves, however, almost all use the designers' richer exploration, "footer-francesca" (593:2123). This footer is built on that version, using only content that already exists.

What the footer contains now

• One glass panel: the whole footer sits in a single rounded glass panel (32/36/48 px radius) inside the page gutters. It closes the page as one object, the way the header pill opens it.
  • The blur works here: the footer is not affected by the wrapper issue fixed for the header in feat(header): readable glass menus, mobile menu fixes and a single h1 #214.
  • Inside the panel nothing else is glass, to avoid glass on glass: the social pill keeps its own light surface, and the 5x1000 card becomes a lighter white tile.
• "Keep in touch!" and the social pill, from both Figma versions.
  • The title uses the grey section-title gradient at display-small → display-medium.
  • Each icon is a 40 px target (36 px below sm) with hover and focus states, on one row down to 320 px.
• Visita il sito: site links (Gruppi, Matricole, Progetti, Appunti ↗, Su di noi, Contatti) with a smaller grey column for the association's documents (Statuto ↗, Regolamento interno ↗). The documents replace the dead policy links and are the same ones linked from /join.
• 5x1000 card (from Figma): "5x1000 · Sostienici! · C.F. 97927490157". It stacks wherever its column is narrow: on phones, and in the two columns at md.
  • The C.F. is the one already shown on Su di noi and Struttura.
  • The card links to /chi-siamo#sostienici, the support section, which gets that id.
• Talk with us (from Figma): the Figma labels with the site's real addresses.
  • events@ for "collaborazioni ed eventi". Figma has eventi@, but the site uses events@ everywhere.
  • info@ for "domande e richieste", matching /contact.
• Sei interessato? → Unisciti a noi! and Qualche problema? → Segnalalo (GitHub issues), as the two Figma calls to action (primary and tertiary buttons).
• Legal row: a 1 px rule, then "PoliNetwork APS 2016–2026" and "All rights reserved". The small print uses slate-600, so it passes AA.

Left out of the Figma exploration on purpose

• TikTok: as requested.
• Language selector: the site has no translations.
• "Last website update": it would be a hand-maintained date.
• Privacy, cookie and terms links: those pages don't exist. ⚠️ That is for the association.

Screenshots (before | after)

Verification

• Overflow: none at 320, 360, 402, 768, 1024, 1280, 1440 and 1920 px.
• Long labels: they wrap with the ↗ arrow following the last word.
• Checks: pnpm check, pnpm build, pnpm typecheck and the tests (3/3) all pass.

Open decision

The designers should confirm this version over the bare component, since the component and the Figma pages disagree. Changing back is a single file, footer/index.tsx.

Merge order

#214 → this → the 404/lang PR. The pr-assets/footer-visual-refinement branch only holds the screenshots.

🤖 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: 25e0632e-bfb3-4906-ae5c-b06e7e7c4428

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