Repository navigation
chore: collect visual refinement changes for review - #217
Draft
viganogabriele wants to merge 22 commits into
Draft
viganogabriele wants to merge 22 commits into
viganogabriele wants to merge 22 commits into
Conversation
- Hero: fluid title (36→72px) back on two lines on desktop, freshman link grouped with the primary action instead of floating in the corner, shorter hero so Materials is reachable. - Materials and Projects: one container (max 1536px, 24/40/64px gutters), Figma's mirrored title/cards composition from xl, a centred stacked layout below it, and content-sized cards in min/max-bounded grids so card widths no longer halve across breakpoints. - Project cards show where they lead (domain + arrow) in the corner Figma reserves for an action; the mobile carousel peeks the next card. - Only cards with a destination react to hover; linked cards get a keyboard focus ring. "Carica" no longer links to "#", the material shortcuts open the real archive. - About us: section-sized instead of full screen, h2, grey gradient per the style guide rule (decorated background or coloured text, not both). - Shared: fluid display utilities, CardCaption footer slot, visible carousel dots. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- 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>
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>
…igma - One OrganizationDiagram shared by /about and /storia instead of two copies. Nodes follow Figma's "Nodo organigramma" (glass tile, icon above a 22px label, 1px connectors); no CardIcon className overrides. - Mobile chart follows Figma's vertical "Sezione organigramma": team leads hang off a rail, Membri Team balances the admin column. - Soci box gets Figma's "Ruolo trasversale" tag and shares the chart's column width. - Board portraits no longer lift on hover (they are not links); the mobile carousel bleeds to the edge so the next portrait peeks in. - "Come funziona" and "Trova il tuo posto": plain text-primary titles as in Figma, no icon on the definitions. - Same container as /storia and /chi-siamo; the closing title uses the grey gradient (style guide: decorated background or coloured text). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
/storia, /chi-siamo and /about each defined the same content column and section title classes. They now come from components/layout/page. The two TextOnlyLayout sections in /storia keep their md:px-10 override explicitly; layouts are unchanged. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- Specialisms are a plain icon + label list on hairlines instead of button-like pills: they are not links, and which of Figma's four tile variants becomes standard is still open. - Figma's alternating composition: text left, right for HR, and title and text side by side with the specialisms underneath for Events. - More space between teams on desktop, shared container and title styles, descriptions at the section-lead size, left-aligned on every width. - The closing call to action sits on the background instead of a panel with its own gradient. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…join - Same container, section titles and copy style as the other refined pages; copy is left-aligned at every width instead of centred on mobile. - The three "ways in" cards (not in Figma) are gone: the intro paragraph that already lists them now links to their sections. - Section spacing grows on large screens (224px from xl, 288px from 2xl), so the 1728px title positions sit within ~6% of Figma instead of -18%. - Team cards link to their team on /team and are the only cards that react to hover; InfoCard gains an optional href for this. - The members photo uses object-cover anchored to the bottom instead of Figma's percentage offsets, so the crop survives a different photo or box. - Mobile: the admin-task carousel runs to the screen edges so the next card peeks in; membership step titles are 20px and their notes 14px. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Storia, Su di noi, Struttura, Team and Unisciti each spaced their sections differently (144 to 288px between sections at 1728, hero titles between y=224 and y=282). They now share PAGE_MAIN and PAGE_HERO from components/layout/page.ts, measured on the Figma frames: - 180px between section blocks from xl (Figma, Su di noi and Storia), 128px on tablets, 96px on phones; the same space before the footer. - Hero title at y=286 on desktop as in every Figma frame, with ~270px of air after the hero instead of the regular gap. Unisciti and Team had stretched their gaps (224-288px) to make up for sections that are shorter than in Figma; that space now follows the shared rule instead. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
/collabora matched Figma at 1728px but fell apart elsewhere: everything stacked below 1440px with a 719px column and half the screen empty, the contact steps stayed vertical up to 1615px, and the copy ran in 24px Poppins on tablets. - Shared container, section titles and rhythm (PAGE_MAIN/PAGE_HERO) of the other redesigned pages instead of the page's own 145px-gutter frame and per-section paddings. - Copy steps 16 → 20 → 24px (Figma size from 3xl) and stays left-aligned; the wide "Cosa possiamo fare insieme?" paragraph narrows to ~65 characters below 3xl. Line breaks forced for the 1728px frame are gone. - Figures: one row of four on laptops, two on tablets, Figma's 2×2 beside the copy from xl; cards size to their content. - Photo sections side by side from lg (Figma's 719:611 ratio, centred); stacked below with the photo as wide as the copy. - Contact steps in a row from lg with flexible cards; the e-mail step is a mailto link and the only card that reacts to hover. - InfoCard: optional titleClassName. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…rd grid - Page uses the shared container, title/lead styles and vertical rhythm of the other redesigned pages instead of ad-hoc paddings and a 1616px breakpoint. - Email cards: four in a row from xl as in Figma, 2×2 below, one column on phones, so a card is never left alone on a row; cards size to content instead of the fixed 264×312 box. - "Trova il tuo gruppo" had no action: it now links to /groups, like the inline link in the same paragraph. - Group photo keeps Figma's crop next to the text from xl and is capped when stacked; text is left-aligned at every width. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…search - One ProjectCard for the three lists: the project's logo replaces Figma's placeholder icons (crop / upload), the title gets a per-line gradient, and the footer says what the project page offers (web app or source code). - One ProjectList: cards in a min/max-bounded auto-fill grid instead of fixed 312x264 boxes at fixed breakpoints; on phones a carousel with the next card peeking in. - The collection search box now filters by name and description (it had no handler), with an explicit "no match" state. - Empty lists render a dashed placeholder that points to "Hai un'idea?". - "Hai un'idea?" sits as text + two reference cards side by side, with a readable lead and a real mailto link. - /projects and /projects/[id] use the shared container, titles and rhythm; the detail page drops its gradient panels and closes on the background like the other pages. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- Results and extra pages: one ~1024px column (Figma's list width) with a shared header component (back, centred title, close) laid out on a three-column grid, so long course names no longer run under the buttons on phones. - The general groups (site, school, level, course) were squeezed four per row with their names overlapping the platform buttons; they now sit one per row, two per row from lg, as in Figma. - Group rows: name and buttons share a row; when the card is narrower than 20rem the name gets its own line instead of breaking word by word. The `stacked` variant is gone. - Hover only where there is a link: the platform buttons darken, the report flags darken, course rows lighten and nudge their chevron, the landing cards get the identity hover. Keyboard focus rings on all of them. - Wizard: no wasted 16px inset on phones, where the glass panel is invisible, so the step labels fit at 320px. - Landing title uses the fluid display size and is the page's h1. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
CardIcon's responsive `size` ({ base, sm, md, lg }) builds "sm:…" classes at
runtime, so Tailwind never generated the ones not written literally elsewhere
(e.g. sm:px-8 for the homepage material shortcuts). Generate every prefixed
variant of the size maps with @source inline(), and add a test that fails if
classes.ts gains a class missing from that list.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…rids - Hero, sections and FAQ use the shared container, hero offset, rhythm and section titles; the featured resources close the hero. - "Guide e Utility" is a section title (it was 22px on phones, smaller than the Telegram Hub card title) and sits closer to its own content. - Large resource cards: descriptions capped at 448px instead of 240px. - The large guide sits beside the 2x2 small guides only from xl, on a 5/7 split repeated by Materiali / Tech Tools, so "Mappa Microonde" no longer wraps; the four small guides use 20px titles. - Telegram Hub: two columns until xl (four columns clipped "Mercatino" at 1024px); the group has 24px padding on phones instead of 48px, so its links span the width as in the Figma mobile frame. - Resources with a link react to hover, the others don't. - Resources hidden on phones stay hidden: that's the Figma mobile frame, an open design decision. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- Associations without a logo show their initials instead of ESN's logo, which came from the Figma example; the unused placeholder asset is gone. - Page on the shared container, hero and rhythm; the list keeps Figma's 1200px column. - Accordion: constant padding open or closed (the name no longer jumps), description aligned with the name from md and capped at a readable measure, names at 20/22/28px instead of 22/45px, smaller logos on phones. - The clickable header brightens on hover and rings the item on keyboard focus; social links get accessible names, 40px targets and rel=noopener; "Segui l'associazione" drops its blue gradient and only shows with links. - Empty or unreachable list: a dashed placeholder like /projects. - Shared Hero: the title size is capped so its longest word fits the content width; "Associazioni" and "Contattaci" overflowed phones and tablets. Titles that already fit keep the Figma sizes. - /about association bodies keep their look on the new accordion padding. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- Default to the first category that has answers: live data opens on "Generale", which is empty, so the page showed a blank band. - Empty categories show an intentional dashed empty state instead of nothing; answers keep the editors' line breaks. - Shared container and hero rhythm; the tabs follow the hero closely (they are its content, not a new section) and the list column is Figma's 900px; the callout sits 64/96px under the list instead of 272/316px. - Phones: the tab strip bleeds to the screen edges, the callout title is readable (14px instead of 11px). - Accordion (shared with /matricole and /guides): answers capped at ~70 characters per line, only the header reacts to hover, 2px focus ring. - Tabs (shared with /storia): hover tint on inactive tabs, focus ring. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…ders
- /guides uses the shared container, rhythm and Hero, with Figma's subtitle
("Una raccolta di guide realizzate dai membri del Network"); the two
entry cards sit in an equal-height grid and react to hover, since they
are links.
- /guides/generali and the course result page drop the lorem ipsum guides
that were served in production and show their existing empty state
instead. GENERAL_GUIDES / COURSE_GUIDES are empty until the guide model
and content are decided.
- The back/close header and column of the wizard's end pages move from
groups/page-header to layout/flow-header (FlowHeader, FLOW_MAIN), shared
by groups and guides; the top padding on phones grows from 144 to 176px
so the title no longer sits 16px under the fixed header.
- EMPTY_STATE (the dashed placeholder) moves to layout/page and is used by
projects, associations, faqs, groups and guides.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
… layout The standalone download page kept its own title steps (45px up to 1023px, then 120px) and 48px side margins. It now uses the fluid display scale and the shared container gutters, stays centered with padding for short screens, and its title is the page's h1 (header and footer are hidden here). CardSplit, used only by this page, tightens its stacked phone layout. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The header sat inside the page wrapper (isolate + overflow-clip), where Chromium skipped its backdrop: the glass never blurred, so the page titles read sharp through the open menus. It now renders outside the wrapper and the open panels use a stronger blur, keeping the glass. The mobile menu closes on navigation and on Escape, exposes aria-expanded and uses 40px rows without the blue gradient labels. The current page and its section are marked, "Appunti" gets the external arrow, and the language and theme buttons, which only logged to the console, are removed. The logo is no longer an h1: the page Hero is, so every route has exactly one. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The footer was the official component's bare layout: a 57px blue gradient title, 24px icon targets, two link columns ~320px apart and three "#" policy links. It now follows "footer-francesca" (593:2123), the version used across the Figma pages: "Keep in touch!" with the social pill, a site map with the association's documents and the 5x1000 card, the contact addresses, the join and report-a-bug calls to action, and a hairline legal row. Only existing content is used: no TikTok, no language selector, and the Statuto and Regolamento interno in place of policy pages that don't exist. The Su di noi support section gets an anchor for the 5x1000 card. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The footer content now sits in one rounded glass panel inside the page gutters, closing the page as a single object like the header pill opens it. The 5x1000 card becomes a lighter tile instead of glass on glass and stacks where its column is narrow; the social targets go to 36px below `sm` so the row stays whole at 320px. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The 404 message was 32px with no side padding, so it ran edge to edge at 320px: it gets the page gutters, a smaller size on phones and balanced lines. `<html lang>` was "en" on an Italian site, so screen readers and hyphenation used English rules; it is now "it". Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Contributor
|
Important Draft PR not reviewedDraft PRs are not automatically reviewed by default.
To automatically review draft PRs, update your CodeRabbit configuration: reviews:
auto_review:
drafts: true
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. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Purpose
This draft provides a single overview of the complete visual refinement stack against
main. It is a review index and an integrated diff; the individual pull requests remain the place to review each change, screenshots, trade-offs and open decisions.Do not merge this overview directly. Review the individual pull requests and decide which changes to accept. Each targets the preceding branch, so their diffs are incremental. If accepted as currently structured, merge them in order from #199 to #216; GitHub will retarget the next PR as its base is merged.
Review checklist
How to review
Use the individual PRs for focused diffs and their recorded verification. This PR shows the combined result and overlaps with all of them. The stack has shared components and dependencies; changes to an earlier PR can affect later ones and should be checked through the stack. Draft status signals that the work is still under review.