Skip to content

feat(chi-siamo): refine Su di noi layout within its current structure - #201

Merged
BIA3IA merged 4 commits into
feat/home-visual-refinementfrom
feat/chi-siamo-visual-refinement
Nov 2, 2026
Merged

feat(chi-siamo): refine Su di noi layout within its current structure#201
BIA3IA merged 4 commits into
feat/home-visual-refinementfrom
feat/chi-siamo-visual-refinement

Conversation

@viganogabriele

@viganogabriele viganogabriele commented Oct 27, 2026

Copy link
Copy Markdown
Contributor

Third page of the visual refinement, stacked on #200 (/storia) → #199 (homepage). This PR's diff only touches /chi-siamo ("Su di noi").

Open decision this PR does not take

Figma has two versions of this page:

  • v1 5183:17012 is the one implemented.
  • v2 5297:12476 is newer: "Su di noi" title, photo strip, timeline, org chart and the rail layout everywhere.

Which one is current is a designers' call, so the structure stays v1. I only changed what both versions agree on, and removed elements that exist in neither. When v2 is confirmed, it can be built on top of this: the container and title roles are already shared.

What changes

Hero

  • The "Scopri cosa facciamo" and "Entra nel network" buttons are removed: they exist in neither version.
  • The "La nostra visione" label is added. v1 uses it above the statement; v2 uses it as the section name.
  • The top spacing matches /storia.

Il problema

  • The three questions were tall glass cards with an icon on the right. They read as buttons but did nothing.
  • They are now compact chips, icon first and sized to the text, with no hover, in a 5/7 rail next to the title. Both versions place them there.

La nostra risposta

  • The card descriptions were capped at 240 px inside cards about 400 px wide, leaving a ragged empty right side. They now use the card's width.

I numeri

  • Figures went from 45 px to the 32 px headline size, set beside a 40 px icon as in v1.
  • At 45 px they were as large as the section titles and dominated the page.

Da dove veniamo / Come siamo organizzati

  • These were glass cards with an icon, each containing a section h2, so the hierarchy jumped.
  • Figma has two free columns: title, text and CTA on the background. Implemented as such, with no icons, which neither version has.

Sostieni PoliNetwork

  • Before: a glass panel inside a glass panel, with "5x1000" at 57 px and the tax code at 36 px, both larger than the section title.
  • Now: two free columns. On the left, the title and text. On the right, "Il tuo 5x1000 può fare la differenza" (v1 copy), the instruction, and the tax code in blue-secondary at 24 px. The heart icon (in neither version) is gone.

Layout

  • The page uses the same container and gutters as /storia: max 1400 px, 24/40/64 px.
  • Section titles and leads share the same type roles (constants in chi-siamo/constants.ts).
  • Text is left-aligned on mobile. The path's closing sentence and "Dal 2016…" are centred only from lg, under the horizontal row they close.

Shared changes

None. Only src/app/chi-siamo/page.tsx and src/components/chi-siamo/* are touched.

Screenshots

All captures are full pages from the production build.

Desktop 1440
desktop 1440

Tablet 1024 and 768
tablet 1024
tablet 768

Mobile 390
mobile 390

Verification

  • pnpm check: clean.
  • pnpm build: passes.
  • pnpm typecheck: passes.
  • node --test tests/*.test.mjs: 2/2 pass.
  • Browser check at 320, 390, 768, 1024, 1180, 1279, 1280, 1440, 1728 and 1920 px: no horizontal overflow.
  • Page height at 1440 drops from 4854 to 4270 px, with the same content.

Trade-offs

  • The hero stays centred, as in v2 and on the other pages; v1 has it left-aligned.
  • "La nostra risposta" stays as three stacked full-width cards between 640 and 1023 px. Three columns are too narrow there for their descriptions.
  • The question chips keep a light glass background, as both versions do. Only their size, icon position and lack of hover tell them apart from buttons.

Deliberately left out

  • The v2 structure: "Su di noi" title, photo strip, timeline, org chart, rail everywhere, and the fourth question "Dove trovo l'orario delle lezioni?". This waits for the designers' decision, and the photos depend on the association.
  • The path icon tiles: v1 draws the icons free, v2 inside tiles. The versions disagree, so they are unchanged.

Housekeeping

The screenshots are on the pr-assets/chi-siamo-visual-refinement branch; delete it after review. This PR is stacked: merge #199, then #200, then this one.

🤖 Generated with Claude Code

@coderabbitai

coderabbitai Bot commented Oct 27, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

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: 2ec0a2c2-8e32-4caf-9450-b42f2e7a76ec

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

This was referenced Oct 27, 2026
Merged
Merged
Merged
Merged
Merged
Draft
@viganogabriele
viganogabriele marked this pull request as ready for review October 31, 2026 17:54
@BIA3IA
BIA3IA force-pushed the feat/chi-siamo-visual-refinement branch from c0076fd to ac36921 Compare November 2, 2026 13:53
@BIA3IA
BIA3IA force-pushed the feat/storia-visual-refinement branch from 265bded to 403905f Compare November 2, 2026 14:20
@BIA3IA
BIA3IA force-pushed the feat/chi-siamo-visual-refinement branch from ac36921 to 0c8a2ae Compare November 2, 2026 14:20
@BIA3IA
BIA3IA force-pushed the feat/storia-visual-refinement branch from 403905f to e1e26e2 Compare November 2, 2026 14:32
@BIA3IA
BIA3IA force-pushed the feat/chi-siamo-visual-refinement branch from 0c8a2ae to 24b822c Compare November 2, 2026 14:32
viganogabriele and others added 4 commits November 2, 2026 14:35
@viganogabriele @claude @BIA3IA
feat(storia): de-cardify the history page and align it with Figma
0c988da 
- Hero: Figma's centred XL title (fluid) with the two anchor actions; the
  rotated portrait collage and floating "200+" chip are gone (the board
  portraits already appear under "I nostri direttivi").
- "Come è nato tutto": the two 2016/2022 cards that repeated the timeline
  right below are removed; the text stands alone until the archive photo
  Figma reserves exists.
- Timeline: nodes on a line (vertical below lg, horizontal from lg) instead
  of four hoverable glass cards; the year is the link to its chapter.
- Chapters: numeral in the margin and one continuous vertical rule across
  all six; diagrams drawn without containers (icon chains, 5 → ~25 → 4,
  before → after columns, status list) instead of stacks of glass cards.
- No hover on things that are not links (board portraits, the closing
  statement); "L'obiettivo è raggiunto" is a statement, not a card.
- Projects note, thanks list, board summary and "La storia continua" lose
  their glass panels; the closing gradient panel and the filled "?" pill
  (which read as a button) become years on a line with an open slot.
- One container for every section (Figma's 1272px column, 24/40/64px
  gutters) and left alignment at every width for this long reading page.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@BIA3IA
refactor(storia): keep milestone links and icons with their data
1e8fe67 
Each milestone carries its own anchor and icon instead of two arrays
kept in step by position. The chapter numeral column is 3rem, wide
enough for "02" at 36px. The closing statement is a div: a figure
without a caption has no meaning here.
@viganogabriele @claude @BIA3IA
feat(chi-siamo): refine Su di noi layout within its current structure
62f8a7d 
Improve the page where Figma v1 (implemented) and v2 agree, without
switching to v2, which is still an open design decision.

- Hero: drop the two CTAs (in neither version), add the "La nostra
  visione" label both versions use, same top spacing as /storia.
- Il problema: questions become compact non-interactive chips (icon first)
  in a 5/7 rail, instead of three tall button-like cards.
- I numeri: figures at headline size beside the icon (they were 45px and
  outranked the section titles).
- Da dove veniamo / Come siamo organizzati and Sostieni: free columns on
  the background; no glass cards holding section titles, no nested panel,
  no 57px "5x1000" and 36px tax code.
- One container, gutters and title/lead roles shared with /storia and
  the homepage; text left-aligned on mobile.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@BIA3IA
refactor(chi-siamo): reuse the section title and drop narrating comments
bb21321 
The history blocks use SECTION_TITLE like every other section on the
page. The #cosa-facciamo anchor lost its only link in this PR, so it
goes too.
@BIA3IA
BIA3IA force-pushed the feat/chi-siamo-visual-refinement branch from 24b822c to bb21321 Compare November 2, 2026 14:35
Base automatically changed from feat/storia-visual-refinement to feat/home-visual-refinement November 2, 2026 14:39
@BIA3IA
BIA3IA merged commit 57dda2d into feat/home-visual-refinement Nov 2, 2026
2 checks passed
@BIA3IA
BIA3IA deleted the feat/chi-siamo-visual-refinement branch November 2, 2026 14:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@BIA3IA BIA3IA BIA3IA approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@viganogabriele @BIA3IA