[viganogabriele]

Stacked on #206 (/contact). The stack is #199 → #200 → #201 → #202 → #203 → #204 → #205 → #206 → this PR, so this diff only shows /projects and /projects/[id].

Figma: desktop 317:521, mobile 1948:4657. The detail page has no Figma frame.

What changes

One project card for the three lists (ProjectCard)

• Placeholder icons removed. The crop icon on "Le novità" and the upload icon on the other lists were Figma's placeholder icons, and they said nothing about the project. The project's own logo now replaces them when it exists; otherwise the card has no icon.
• Footer. Figma puts a "Label" pill in the bottom-right corner. The card now uses that corner to say what the project page offers, derived from the project's real link: "Codice sorgente" (GitHub/GitLab) or "Web". A → arrow marks the card as a link.
  • Projects without a link show only the arrow.
  • No action is promised that the project page doesn't have.
• Title. Title-large (22 px) instead of headline-medium (28 px), which wrapped to 3 lines in a 300 px card and collided with the icon. The gradient is drawn per line, so a two-line title no longer fades into a paler second line.
• Height and hover.
  • The description is clamped to 4 lines and the height follows the content, instead of the fixed 312 × 264 box with 40–60 % empty space.
  • The card is a link, so it keeps the hover background, plus a keyboard focus ring.

One list (ProjectList)

• Grid. The grid uses repeat(auto-fill, minmax(min(100%, 16rem), 1fr)) inside the shared container. Cards stay between 256 and about 370 px, and the column count follows the available space: 2 at 768, 3 at 1024, 4 from about 1312. Before, the layout jumped between fixed 2 and 4 columns, with cards centred in their cells.
• Mobile. A carousel where the next card peeks in, as on the homepage.
• "Mostra di più" becomes "Mostra tutti (n)", so the count is visible.

The search box now works

• The collection's "Search by name" input had no handler: it was a fake control.
• It now filters by name and description. The match ignores case and accents ("universita" finds "Università").
• It shows an explicit "Nessun progetto corrisponde a …" state.
• The placeholder is in Italian, like the rest of the page.

Empty states

• Each empty list shows a dashed placeholder block instead of a stray centred sentence.
• The novelties and collection placeholders link to #proponi, the "Hai un'idea?" section on the same page.
• Locally (backend unreachable) the page now reads as intentional, not broken; see the last screenshot.

"Hai un'idea?"

• The text and the two reference cards sit side by side within 1024 px, as in Figma's narrow centred block.
• The lead is 20 px, where the text used to be 14 px.
• The email is a real mailto: link.
• "Proponila qui!" uses blue-secondary instead of blue-primary, which was below AA on the light background.
• The two cards are not links, so they have no hover.

Layout

• Both pages use the shared CONTAINER, PAGE_MAIN, PAGE_HERO, SECTION_TITLE and SECTION_LEAD from feat(team): calmer team sections with non-interactive specialisms #203/feat(collabora): hold the page together between the Figma frames; share one page rhythm #205. The min-h-screen and py-49 blocks are gone.
• Section headings are h2; they used to be h3 directly under the hero.
• "Le novità" and "Progetti deprecati" are left-aligned like the other pages. The collection keeps Figma's centred heading and search, because it's the page's tool.
• At 1440 px the page goes from 4750 to 4106 px with the same content.

Detail page (/projects/[id], kept, not redesigned)

• It uses the shared container and rhythm.
• The header panel keeps its glass but loses the gradient fill.
• "Scopri gli altri progetti" closes on the background, as the other pages do, instead of in a gradient panel.

Shared changes

None. CardCaption, Card and the carousel are used as they are. The new ProjectCard, ProjectList and section.ts live in components/projects/.

Screenshots

These use a local fixture. The backend isn't reachable locally, so before and after were both captured with a temporary fixture of 18 projects (4 news, 11 general, 3 deprecated), with mixed description lengths and link types. The fixture was not committed. The last screenshot shows the real empty state.

Desktop 1440

Tablet 1024 and 768

Mobile 390

Detail page 1440

Card hover

Empty state (no backend)

Verification

• pnpm check: clean.
• pnpm build: passes.
• pnpm typecheck: clean after the build.
• node --test tests/*.test.mjs: 2/2 pass.
• /projects, /projects/1 and /projects/12 were checked at 320, 390, 768, 1024, 1279, 1280, 1440, 1728 and 1920 px, with no horizontal overflow.
• Search, "Mostra tutti" and hover were checked in the browser with Playwright:
  • 8 → 11 cards when expanded;
  • "campus" → 2 results;
  • a nonsense query → the no-match state;
  • no console errors.

Trade-offs

• Orphan cards. With auto-fill, 4 news cards at 1024 px land as 3 + 1. The column count is data-independent, so a short list can end on a lone card. It's preferable to fixed columns squeezing cards to 200 px.
• Deprecated projects look like active ones apart from their section heading, as in Figma. The audit suggested a muted variant. It's a designer call, so it's left out.
• The mobile collection is still a carousel, as in Figma. With many projects the dots get numerous; a list would scale better, which is a design decision.

Deliberately left out

• Telegram handles in the "Contatti" card. Figma lists two personal Telegram handles there; adding them is a content decision.
• Per-platform downloads on the detail page. They wait for the backend field, already noted in resources.ts.
• The "Projects" title in English. Copy is unchanged.

Housekeeping

The screenshots live on pr-assets/projects-visual-refinement, 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: 4d140013-722a-4781-abac-e5e6ff422044

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