From 0c988da6b9ba48b2af12e850549fc43c8662b998 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gabriele=20Vigan=C3=B2?= Date: Tue, 27 Oct 2026 15:44:26 +0000 Subject: [PATCH 1/7] feat(storia): de-cardify the history page and align it with Figma MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- src/app/storia/page.tsx | 75 +++---- src/components/storia/boards.tsx | 11 +- src/components/storia/constants.ts | 3 + src/components/storia/continuation.tsx | 93 ++++---- src/components/storia/hero.tsx | 88 ++------ src/components/storia/organization.tsx | 3 +- src/components/storia/projects.tsx | 35 ++-- src/components/storia/thanks.tsx | 15 +- src/components/storia/timeline.tsx | 280 ++++++++++++++----------- 9 files changed, 287 insertions(+), 316 deletions(-) diff --git a/src/app/storia/page.tsx b/src/app/storia/page.tsx index dc4fc1cf..a5b8d544 100644 --- a/src/app/storia/page.tsx +++ b/src/app/storia/page.tsx @@ -1,10 +1,9 @@ import type { Metadata } from "next" -import { FiMessageCircle, FiUserCheck } from "react-icons/fi" -import telegram from "@/assets/icons/telegram-gradient.svg" -import { CardCaption } from "@/components/card-caption" -import { CardIcon } from "@/components/card-icon" +import { FiMessageCircle } from "react-icons/fi" +import { GradientIcon } from "@/components/gradient-icon" import TextOnlyLayout from "@/components/layout/TextOnlySection" import { Boards } from "@/components/storia/boards" +import { CONTAINER } from "@/components/storia/constants" import { Continuation } from "@/components/storia/continuation" import { HistoryHero } from "@/components/storia/hero" import { Organization } from "@/components/storia/organization" @@ -20,10 +19,12 @@ export const metadata: Metadata = { export default function HistoryPage() { return ( -
+
-
+
+ {/* Figma reserves the right column for an archive photo that doesn't exist yet: until then the text stands alone. + The two milestone cards that filled it repeated the timeline right below. */} } classNames={{ - section: "mx-auto max-w-330 gap-12 px-6 md:px-6 xl:flex-row xl:items-center [&>div>h2]:typo-title-large", - textDiv: "min-w-0 xl:w-1/2 xl:items-start", - title: "text-balance text-blue-secondary xl:text-start", - descriptionDiv: "xl:text-start", - contentDiv: "min-w-0 xl:w-1/2", + section: `${CONTAINER} items-start [&>div>h2]:typo-title-large`, + textDiv: "max-w-180 items-start", + title: "text-balance text-start text-blue-secondary", + descriptionDiv: "text-start", + contentDiv: "hidden", }} - > -
- - -
- + /> @@ -92,25 +74,24 @@ export default function HistoryPage() { } classNames={{ - section: "mx-auto max-w-330 gap-12 px-6 md:px-6 xl:flex-row xl:items-center [&>div>h2]:typo-title-large", - title: "text-balance text-blue-secondary xl:text-start", - textDiv: "min-w-0 xl:w-1/2 xl:items-start", - descriptionDiv: "xl:text-start", + section: `${CONTAINER} gap-12 xl:flex-row xl:items-center xl:gap-16 [&>div>h2]:typo-title-large`, + title: "text-balance text-start text-blue-secondary", + textDiv: "min-w-0 items-start xl:w-1/2", + descriptionDiv: "text-start", contentDiv: "min-w-0 xl:w-1/2", }} > - - Se anche un solo studente ha trovato casa grazie a un nostro gruppo, o si è laureato in tempo perché - qualcuno gli ha risposto. -

- } - className="h-auto w-full gap-6 p-6 sm:p-10" - /> + {/* A closing statement, not a card: nothing here is clickable */} +
+ +

+ L’obiettivo è raggiunto. +

+

+ Se anche un solo studente ha trovato casa grazie a un nostro gruppo, o si è laureato in tempo perché + qualcuno gli ha risposto. +

+
diff --git a/src/components/storia/boards.tsx b/src/components/storia/boards.tsx index 1beca4d5..14e87ccf 100644 --- a/src/components/storia/boards.tsx +++ b/src/components/storia/boards.tsx @@ -1,17 +1,16 @@ "use client" import Image from "next/image" -import { Glass } from "@/components/glass" import TabsNavigation from "@/components/tabs" import { Tabs } from "@/components/tabs/tabs" import { TabsContent } from "@/components/tabs/tabs-content" import { Card, CardContent } from "@/components/ui/card" import { cn } from "@/lib/utils" -import { boardMembers, boardTerms } from "./constants" +import { boardMembers, boardTerms, CONTAINER } from "./constants" export function Boards() { return ( -
+

I nostri direttivi

Ogni mandato, un nuovo capitolo @@ -27,7 +26,7 @@ export function Boards() { {boardMembers.map((member) => (

- +

{term}

Il Direttivo

Si concentra sul rafforzamento della struttura, sull’evoluzione dei servizi e sullo sviluppo di nuovi progetti per la community.

- +
) : (
diff --git a/src/components/storia/constants.ts b/src/components/storia/constants.ts index 78b1325d..dd5eb8c1 100644 --- a/src/components/storia/constants.ts +++ b/src/components/storia/constants.ts @@ -6,6 +6,9 @@ import gabriele from "@/assets/images/storia/gabriele-vigano.jpg" import lorenzo from "@/assets/images/storia/lorenzo-corallo.jpg" import tommaso from "@/assets/images/storia/tommaso-morganti.jpg" +/** Shared section container: Figma's 1272px content column, with the homepage's 24/40/64px gutters (md:px-10 overrides TextOnlyLayout's md:px-36). */ +export const CONTAINER = "mx-auto w-full max-w-350 px-6 sm:px-10 md:px-10 lg:px-16" + // Contenuti del design Figma “La nostra storia”, nodo 5368:5885. export const milestones = [ { diff --git a/src/components/storia/continuation.tsx b/src/components/storia/continuation.tsx index 1b417174..9ce9b04c 100644 --- a/src/components/storia/continuation.tsx +++ b/src/components/storia/continuation.tsx @@ -1,53 +1,60 @@ import Link from "next/link" import { FiArrowUpRight } from "react-icons/fi" -import { Glass } from "@/components/glass" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" +import { CONTAINER } from "./constants" +const years = ["2016", "2022", "2026", "?"] + +// Figma: text on the left, the years on a line on the right. No panel or gradient behind it, and the "?" is a +// quiet open slot rather than a filled pill that looks like a button. export function Continuation() { return ( -
- -
-

- La storia continua. -

-

- Ogni anno qualcuno arriva, qualcuno si laurea e qualcun altro raccoglie il testimone. La missione rimane la - stessa: rendere la vita universitaria più semplice, accessibile e umana. -

- -
-
-
    - {["2016", "2022", "2026", "?"].map((year) => ( -
  1. - - {year} - -
    2. - ))} -
-

Nuove persone, nuove idee, nuovi progetti.

-

- Il prossimo capitolo lo scriviamo insieme. -

-
- +
+
+

+ La storia continua. +

+

+ Ogni anno qualcuno arriva, qualcuno si laurea e qualcun altro raccoglie il testimone. Nuove persone, nuove + idee, nuovi progetti. La missione rimane la stessa: rendere la vita universitaria più semplice, accessibile e + umana. +

+
+ +
+
    + {years.map((year, index) => ( +
  1. 0 && "flex-1")}> + {index > 0 && } + + {year} + +
    2. + ))} +
+

+ Il prossimo capitolo lo scriviamo insieme. +

+ +
) } diff --git a/src/components/storia/hero.tsx b/src/components/storia/hero.tsx index 6c260137..d35e2681 100644 --- a/src/components/storia/hero.tsx +++ b/src/components/storia/hero.tsx @@ -1,76 +1,30 @@ -import Image from "next/image" import Link from "next/link" -import { FiArrowDown, FiUsers } from "react-icons/fi" -import { Glass } from "@/components/glass" -import { GradientIcon } from "@/components/gradient-icon" +import { FiArrowDown } from "react-icons/fi" import { Button } from "@/components/ui/button" -import { Card, CardContent } from "@/components/ui/card" import { Hero } from "@/components/ui/hero" -import { cn } from "@/lib/utils" -import { boardMembers } from "./constants" - -const portraits = [ - { member: boardMembers[1], position: "top-12 left-0 -rotate-6" }, - { - member: boardMembers[0], - position: "-translate-x-1/2 top-0 left-1/2 z-10", - }, - { member: boardMembers[3], position: "top-12 right-0 rotate-6 sm:top-16" }, -] +import { CONTAINER } from "./constants" +// Figma: a centred XL title and nothing else. The board portraits appear further down, under "I nostri direttivi". export function HistoryHero() { return ( -
-
- -
- - -
-
-
-
- {portraits.map(({ member, position }) => ( - - {member.name} -
- - {member.role} - - - ))} -
- - -
-

200+

-

admin volontari, oggi

-
- +
+ +
+ +
) diff --git a/src/components/storia/organization.tsx b/src/components/storia/organization.tsx index 7780ee4c..639068a1 100644 --- a/src/components/storia/organization.tsx +++ b/src/components/storia/organization.tsx @@ -17,6 +17,7 @@ import { GradientIcon } from "@/components/gradient-icon" import { Button } from "@/components/ui/button" import { Card, CardTitle } from "@/components/ui/card" import { cn } from "@/lib/utils" +import { CONTAINER } from "./constants" const teamLeads = [ { title: "Team lead HR", icon: LuBookUser }, @@ -176,7 +177,7 @@ function MobileChart() { export function Organization() { return ( -
+

Come è organizzata PoliNetwork diff --git a/src/components/storia/projects.tsx b/src/components/storia/projects.tsx index ee42bc09..0a5a4019 100644 --- a/src/components/storia/projects.tsx +++ b/src/components/storia/projects.tsx @@ -4,9 +4,9 @@ import { FiAirplay, FiArrowUpRight, FiBarChart, FiBook, FiCheck, FiHeadphones } import telegram from "@/assets/icons/telegram-gradient.svg" import projectsImage from "@/assets/images/storia/progetti.png" import { CardIcon } from "@/components/card-icon" -import { Glass } from "@/components/glass" import TextOnlyLayout from "@/components/layout/TextOnlySection" import { Button } from "@/components/ui/button" +import { CONTAINER } from "./constants" const projects = [ { @@ -35,7 +35,7 @@ const projects = [ export function HistoryProjects() { return ( -
+
div>h2]:typo-title-large", - textDiv: "min-w-0 xl:w-1/2 xl:items-start", - title: "text-blue-secondary xl:text-start", - descriptionDiv: "xl:text-start", + textDiv: "min-w-0 items-start xl:w-1/2", + title: "text-start text-blue-secondary", + descriptionDiv: "text-start", contentDiv: "min-w-0 xl:w-1/2", }} > Il sito PoliNetwork su computer e smartphone -
-
+ {/* Figma: the six tools on the left, the note about where they come from beside them, without a panel */} +
+
{projects.map((project) => ( ))}
- -
-

- Molti dei progetti di PoliNetwork sono nati da idee individuali: studenti che hanno - creato autonomamente uno strumento utile e che, nel tempo, sono entrati a far parte del network. -

-

Da un’idea di uno studente a uno strumento per migliaia di studenti.

-
- - +
) diff --git a/src/components/storia/thanks.tsx b/src/components/storia/thanks.tsx index faf9b32e..73c6dbdd 100644 --- a/src/components/storia/thanks.tsx +++ b/src/components/storia/thanks.tsx @@ -2,13 +2,12 @@ import { useState } from "react" import { FiSearch } from "react-icons/fi" -import { Glass } from "@/components/glass" import TextOnlyLayout from "@/components/layout/TextOnlySection" import TabsNavigation from "@/components/tabs" import { Tabs } from "@/components/tabs/tabs" import { TabsContent } from "@/components/tabs/tabs-content" import { Input } from "@/components/ui/input" -import { contributors } from "./constants" +import { CONTAINER, contributors } from "./constants" const categories = ["Tutti", "Direttivi", "Admin", "Collaboratori"] @@ -35,14 +34,14 @@ export function Thanks() { } classNames={{ - section: "mx-auto max-w-330 gap-12 px-6 md:px-6 xl:flex-row [&>div>h2]:typo-title-large", - textDiv: "xl:w-1/2 xl:items-start xl:text-start", - title: "text-blue-secondary xl:text-start", - descriptionDiv: "xl:text-start", + section: `${CONTAINER} gap-12 xl:flex-row xl:gap-16 [&>div>h2]:typo-title-large`, + textDiv: "items-start text-start xl:w-1/2", + title: "text-start text-blue-secondary", + descriptionDiv: "text-start", contentDiv: "min-w-0 xl:w-1/2", }} > - +
} @@ -80,7 +79,7 @@ export function Thanks() { ) })} - +
) } diff --git a/src/components/storia/timeline.tsx b/src/components/storia/timeline.tsx index 63b93047..020d3974 100644 --- a/src/components/storia/timeline.tsx +++ b/src/components/storia/timeline.tsx @@ -1,48 +1,70 @@ +import Image from "next/image" import Link from "next/link" -import { - FiArrowDown, - FiCheckCircle, - FiClipboard, - FiClock, - FiLayers, - FiUser, - FiUserCheck, - FiUsers, -} from "react-icons/fi" +import type { ReactNode } from "react" +import { FiArrowDown, FiArrowRight, FiCheck, FiClipboard, FiClock, FiUser, FiUserCheck, FiUsers } from "react-icons/fi" import telegram from "@/assets/icons/telegram-gradient.svg" -import { CardCaption } from "@/components/card-caption" -import { CardIcon } from "@/components/card-icon" -import { Glass } from "@/components/glass" +import { GradientIcon, type GradientIconType } from "@/components/gradient-icon" import { Button } from "@/components/ui/button" -import { chapters, milestones } from "./constants" +import { cn } from "@/lib/utils" +import { CONTAINER, chapters, milestones } from "./constants" const milestoneLinks = ["#capitolo-1", "#capitolo-1", "#capitolo-5", "#direttivi"] const milestoneIcons = [FiUser, telegram.src, FiUserCheck, FiUsers] +/** The small icon tile Figma uses for timeline nodes and diagram steps. */ +function IconTile({ icon, className }: { icon: GradientIconType | string; className?: string }) { + return ( + + {typeof icon === "string" ? ( + + ) : ( + + )} + + ) +} + export function Timeline() { return ( -
+

Da un semplice gruppo a una rete costruita dagli studenti,{" "} per gli studenti.

-
    + + {/* Nodes on a line: vertical below lg, horizontal from lg (Figma) */} +
      {milestones.map((milestone, index) => ( -
    1. - +
    2. + + + {milestone.year} + +

      + {milestone.description} +

      3. ))}
    +

    Dieci anni di crescita, persone e progetti. La nostra storia{" "} @@ -58,122 +80,128 @@ export function Timeline() { ) } -const chapterVisuals = [ -

    - {[ - { icon: telegram.src, title: "Il primo gruppo" }, - { icon: FiUser, title: "I primi admin e volontari" }, - { icon: FiUserCheck, title: "Test su Informatica" }, - { icon: FiUsers, title: "Tutti i corsi" }, - ].map((item) => ( - - ))} -
    , -
    - {[ - { icon: FiClipboard, title: "Regole interne" }, - { icon: FiUserCheck, title: "Comunicazioni selezionate" }, - { icon: FiUsers, title: "Una community indipendente" }, - ].map((item) => ( - - ))} -
    , -
    +function Arrow({ className }: { className?: string }) { + return +} + +/** A left-to-right sequence of steps, joined by arrows. */ +function Steps({ items }: { items: { label: string; icon?: GradientIconType | string; value?: string }[] }) { + return ( +
      + {items.map((item, index) => ( +
    1. + {index > 0 && } +
      + {item.icon && } + {item.value && {item.value}} + {item.label} +
      +
      2. + ))} +
    + ) +} + +/** Two columns read as "before → after". */ +function BeforeAfter({ before, after }: { before: { title: string; items: string[] }; after: typeof before }) { + return ( +
    + {[before, after].map((column, index) => ( +
    +

    {column.title}

    +
      + {column.items.map((item) => ( +
    • {item}
      • + ))} +
    +
    + ))} + +
    + ) +} + +const chapterVisuals: ReactNode[] = [ + , + , + , + , + , +
      {[ - { title: "5", caption: "persone", icon: FiUser }, - { title: "~25", caption: "rappresentanti", icon: FiUsers }, - { title: "4", caption: "composizioni", icon: FiLayers }, + { title: "APS-ETS", status: "Riconosciuto dallo Stato", done: true }, + { title: "RUNTS", status: "Iscritta come ETS", done: true }, + { title: "Albo PoliMi", status: "Ancora da raggiungere", done: false }, ].map((item) => ( - +
    • + {item.done ? ( + + ) : ( + + )} + {item.title} + {item.status} +
      • ))} -
    , -
    - - -
    , -
    - - -
    , -
    - - - -
    , + , ] export function Chapters() { return ( -
    -
      +
      +
        {chapters.map((chapter, index) => (
      1. -
        - - {String(index + 1).padStart(2, "0")} - -

        - {chapter.title} -

        -

        + + {String(index + 1).padStart(2, "0")} + +

        +

        {chapter.title}

        +

        {chapter.subtitle}

        -

        +

        {chapter.description}

        -
        {chapterVisuals[index]}
        +
        + {chapterVisuals[index]} +
        2. ))}
      From 1e8fe67075571c87caf7e1130649c684a6b9f465 Mon Sep 17 00:00:00 2001 From: Bianca Roberta Ianosel Date: Mon, 2 Nov 2026 09:18:14 +0000 Subject: [PATCH 2/7] refactor(storia): keep milestone links and icons with their data 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. --- src/app/storia/page.tsx | 5 ++--- src/components/storia/constants.ts | 10 ++++++++++ src/components/storia/timeline.tsx | 12 ++++-------- 3 files changed, 16 insertions(+), 11 deletions(-) diff --git a/src/app/storia/page.tsx b/src/app/storia/page.tsx index a5b8d544..7846e788 100644 --- a/src/app/storia/page.tsx +++ b/src/app/storia/page.tsx @@ -81,8 +81,7 @@ export default function HistoryPage() { contentDiv: "min-w-0 xl:w-1/2", }} > - {/* A closing statement, not a card: nothing here is clickable */} -
      +

      L’obiettivo è raggiunto. @@ -91,7 +90,7 @@ export default function HistoryPage() { Se anche un solo studente ha trovato casa grazie a un nostro gruppo, o si è laureato in tempo perché qualcuno gli ha risposto.

      -
      +
    diff --git a/src/components/storia/constants.ts b/src/components/storia/constants.ts index dd5eb8c1..59dc9ab5 100644 --- a/src/components/storia/constants.ts +++ b/src/components/storia/constants.ts @@ -1,3 +1,5 @@ +import { FiUser, FiUserCheck, FiUsers } from "react-icons/fi" +import telegram from "@/assets/icons/telegram-gradient.svg" import ale from "@/assets/images/storia/ale-he.jpg" import alessandro from "@/assets/images/storia/alessandro-gabbini.jpg" import elia from "@/assets/images/storia/elia-falzoni.jpg" @@ -13,19 +15,27 @@ export const CONTAINER = "mx-auto w-full max-w-350 px-6 sm:px-10 md:px-10 lg:px- export const milestones = [ { year: "2016", + href: "#capitolo-1", + icon: FiUser, description: "Nasce il primo gruppo per rispondere a una necessità semplice: trovare informazioni e parlare con i compagni di corso.", }, { year: "2017", + href: "#capitolo-1", + icon: telegram.src, description: "I gruppi si moltiplicano su Telegram e WhatsApp e iniziamo a coprire tutti i corsi di laurea.", }, { year: "2022", + href: "#capitolo-5", + icon: FiUserCheck, description: "PoliNetwork diventa un’APS-ETS, con un direttivo eletto e una struttura ancora più democratica.", }, { year: "OGGI", + href: "#direttivi", + icon: FiUsers, description: "Oltre 200 admin volontari e una community che accompagna ogni giorno migliaia di studenti del Politecnico di Milano.", }, diff --git a/src/components/storia/timeline.tsx b/src/components/storia/timeline.tsx index 020d3974..0b56fc9e 100644 --- a/src/components/storia/timeline.tsx +++ b/src/components/storia/timeline.tsx @@ -8,10 +8,6 @@ import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" import { CONTAINER, chapters, milestones } from "./constants" -const milestoneLinks = ["#capitolo-1", "#capitolo-1", "#capitolo-5", "#direttivi"] - -const milestoneIcons = [FiUser, telegram.src, FiUserCheck, FiUsers] - /** The small icon tile Figma uses for timeline nodes and diagram steps. */ function IconTile({ icon, className }: { icon: GradientIconType | string; className?: string }) { return ( @@ -41,7 +37,7 @@ export function Timeline() { {/* Nodes on a line: vertical below lg, horizontal from lg (Figma) */}
      - {milestones.map((milestone, index) => ( + {milestones.map((milestone) => (
    1. - + {milestone.year} @@ -185,7 +181,7 @@ export function Chapters() { id={`capitolo-${index + 1}`} key={chapter.title} // A single vertical rule runs between the numerals and the text, across every chapter (Figma) - className="relative grid scroll-mt-36 grid-cols-[2.5rem_minmax(0,1fr)] gap-x-6 pb-16 before:absolute before:inset-y-0 before:left-[calc(2.5rem+0.75rem)] before:w-px before:bg-blue-primary/30 last:pb-0 sm:grid-cols-[3.5rem_minmax(0,1fr)] sm:gap-x-10 sm:pb-24 sm:before:left-[calc(3.5rem+1.25rem)] xl:grid-cols-[3.5rem_minmax(0,7fr)_minmax(0,5fr)] xl:gap-x-16 xl:before:left-[calc(3.5rem+2rem)]" + className="relative grid scroll-mt-36 grid-cols-[3rem_minmax(0,1fr)] gap-x-6 pb-16 before:absolute before:inset-y-0 before:left-[calc(3rem+0.75rem)] before:w-px before:bg-blue-primary/30 last:pb-0 sm:grid-cols-[3.5rem_minmax(0,1fr)] sm:gap-x-10 sm:pb-24 sm:before:left-[calc(3.5rem+1.25rem)] xl:grid-cols-[3.5rem_minmax(0,7fr)_minmax(0,5fr)] xl:gap-x-16 xl:before:left-[calc(3.5rem+2rem)]" > {String(index + 1).padStart(2, "0")} From 62f8a7d9f44a444aa9212fb440daa8cfc88de7ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gabriele=20Vigan=C3=B2?= Date: Tue, 27 Oct 2026 15:51:21 +0000 Subject: [PATCH 3/7] feat(chi-siamo): refine Su di noi layout within its current structure 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 --- src/app/chi-siamo/page.tsx | 2 +- src/components/chi-siamo/answer-section.tsx | 11 +++-- src/components/chi-siamo/constants.ts | 7 +++ src/components/chi-siamo/history-section.tsx | 21 ++++----- src/components/chi-siamo/numbers-section.tsx | 39 ++++++++--------- src/components/chi-siamo/path-section.tsx | 9 ++-- src/components/chi-siamo/problem-section.tsx | 29 ++++++------ src/components/chi-siamo/support-section.tsx | 46 +++++++++----------- src/components/chi-siamo/vision-section.tsx | 20 ++------- 9 files changed, 84 insertions(+), 100 deletions(-) create mode 100644 src/components/chi-siamo/constants.ts diff --git a/src/app/chi-siamo/page.tsx b/src/app/chi-siamo/page.tsx index 0fdae581..d96a6022 100644 --- a/src/app/chi-siamo/page.tsx +++ b/src/app/chi-siamo/page.tsx @@ -14,7 +14,7 @@ export const metadata: Metadata = { export default function ChiSiamoPage() { return ( -
      +
      diff --git a/src/components/chi-siamo/answer-section.tsx b/src/components/chi-siamo/answer-section.tsx index 0e718fc6..75beff48 100644 --- a/src/components/chi-siamo/answer-section.tsx +++ b/src/components/chi-siamo/answer-section.tsx @@ -1,5 +1,6 @@ import { FiAward, FiBookOpen, FiUsers } from "react-icons/fi" import { CardIcon } from "@/components/card-icon" +import { CONTAINER, SECTION_LEAD, SECTION_TITLE } from "./constants" const cards = [ { @@ -23,12 +24,10 @@ const cards = [ export function AnswerSection() { return ( -
      +
      -

      - La nostra risposta -

      -

      +

      La nostra risposta

      +

      Costruiamo e manteniamo la rete di comunicazione studentesca del Politecnico di Milano.

      @@ -40,7 +39,7 @@ export function AnswerSection() { {...card} size="compact" align="start" - className="h-full p-0 [&_h3]:text-balance" + className="h-full p-0 [&_h3]:text-balance [&_p]:max-w-none" /> ))}

diff --git a/src/components/chi-siamo/constants.ts b/src/components/chi-siamo/constants.ts new file mode 100644 index 00000000..9df0bebf --- /dev/null +++ b/src/components/chi-siamo/constants.ts @@ -0,0 +1,7 @@ +/** Same content column and gutters as /storia and the homepage. */ +export const CONTAINER = "mx-auto w-full max-w-350 px-6 sm:px-10 lg:px-16" + +export const SECTION_TITLE = + "typo-headline-medium sm:typo-display-medium text-balance bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent" + +export const SECTION_LEAD = "typo-body-large sm:typo-headline-extrasmall text-pretty" diff --git a/src/components/chi-siamo/history-section.tsx b/src/components/chi-siamo/history-section.tsx index 4a2fbf46..f698c4c3 100644 --- a/src/components/chi-siamo/history-section.tsx +++ b/src/components/chi-siamo/history-section.tsx @@ -1,43 +1,40 @@ import Link from "next/link" -import { FiArrowUpRight, FiClock, FiUsers } from "react-icons/fi" -import { Glass } from "@/components/glass" -import { GradientIcon } from "@/components/gradient-icon" +import { FiArrowUpRight } from "react-icons/fi" import { Button } from "@/components/ui/button" +import { CONTAINER } from "./constants" const blocks = [ { title: "Da dove veniamo", description: "Dal primo gruppo Telegram, nel 2016, a una rete costruita dagli studenti, per gli studenti.", - icon: FiClock, cta: "La nostra storia", href: "/storia", }, { title: "Come siamo organizzati", - icon: FiUsers, description: "Direttivo, team operativi, admin e soci. Guarda come funziona la macchina dall'interno.", cta: "La nostra struttura", href: "/about", }, ] as const +// Figma lays these out as two free columns: in glass cards each held a section title, and the hierarchy broke export function HistorySection() { return ( -
+
{blocks.map((block) => ( - - -

+
+

{block.title}

-

{block.description}

+

{block.description}

- +
))}

) diff --git a/src/components/chi-siamo/numbers-section.tsx b/src/components/chi-siamo/numbers-section.tsx index 947591b0..82a01d49 100644 --- a/src/components/chi-siamo/numbers-section.tsx +++ b/src/components/chi-siamo/numbers-section.tsx @@ -1,6 +1,7 @@ import { FiBook, FiBookOpen, FiHeadphones, FiSend, FiUser, FiUsers } from "react-icons/fi" import { GradientIcon } from "@/components/gradient-icon" -import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" +import { Card } from "@/components/ui/card" +import { CONTAINER, SECTION_LEAD, SECTION_TITLE } from "./constants" const stats = [ { value: "500+", label: "gruppi Telegram e WhatsApp attivi", icon: FiSend }, @@ -13,35 +14,31 @@ const stats = [ export function NumbersSection() { return ( -
+
-

- I numeri -

-

+

I numeri

+

Un network in continua crescita, costruito dagli studenti, per gli studenti.

-
+ {/* Figma sets the figures at headline size beside the icon: at 45px they outranked the section titles */} +
    {stats.map((stat) => ( - - - - {stat.value} - - - - {stat.label} - +
  • + + +
    +

    {stat.value}

    +

    {stat.label}

    +
    +     +
    • ))} -
+ -

+

Dal 2016 al fianco degli studenti del PoliMi

diff --git a/src/components/chi-siamo/path-section.tsx b/src/components/chi-siamo/path-section.tsx index 2b835347..d5d3fe97 100644 --- a/src/components/chi-siamo/path-section.tsx +++ b/src/components/chi-siamo/path-section.tsx @@ -2,6 +2,7 @@ import { FiBook, FiClipboard, FiFileText, FiGift, FiUser, FiUserCheck } from "re import { Glass } from "@/components/glass" import { GradientIcon } from "@/components/gradient-icon" import { cn } from "@/lib/utils" +import { CONTAINER, SECTION_LEAD, SECTION_TITLE } from "./constants" const steps = [ { title: "TOL", description: "Simulazioni, guide e consigli per affrontarlo al meglio.", icon: FiBook }, @@ -18,10 +19,8 @@ const steps = [ export function PathSection() { return ( -
-

- Il tuo percorso, sempre al tuo fianco -

+
+

Il tuo percorso, sempre al tuo fianco

    {steps.map((step, index) => ( @@ -46,7 +45,7 @@ export function PathSection() { ))}
-

+

Dalla prima simulazione del TOL fino alla laurea, ogni studente ha sempre{" "} una risposta a portata di mano e{" "} qualcuno a cui chiederla. diff --git a/src/components/chi-siamo/problem-section.tsx b/src/components/chi-siamo/problem-section.tsx index d2bb57df..c8097291 100644 --- a/src/components/chi-siamo/problem-section.tsx +++ b/src/components/chi-siamo/problem-section.tsx @@ -1,5 +1,6 @@ import { FiEdit, FiFileText, FiUsers } from "react-icons/fi" -import { Card, CardAction, CardContent } from "@/components/ui/card" +import { GradientIcon } from "@/components/gradient-icon" +import { CONTAINER, SECTION_LEAD, SECTION_TITLE } from "./constants" const questions = [ { text: "Dove trovo il gruppo del mio corso?", icon: FiUsers }, @@ -9,23 +10,23 @@ const questions = [ export function ProblemSection() { return ( -

+
-

- Il problema -

-

- Il PoliMi è complesso. Le informazioni non dovrebbero esserlo. -

+

Il problema

+

Il PoliMi è complesso. Le informazioni non dovrebbero esserlo.

-
+ {/* Questions students ask, not actions: compact chips, icon first, no hover */} +
    {questions.map((question) => ( - - {question.text} - - +
  • + + {question.text} +
    • ))} -
+
) } diff --git a/src/components/chi-siamo/support-section.tsx b/src/components/chi-siamo/support-section.tsx index 8f3493ca..a113fb5b 100644 --- a/src/components/chi-siamo/support-section.tsx +++ b/src/components/chi-siamo/support-section.tsx @@ -1,31 +1,27 @@ -import { FiHeart } from "react-icons/fi" -import { Glass } from "@/components/glass" -import { GradientIcon } from "@/components/gradient-icon" +import { CONTAINER, SECTION_TITLE } from "./constants" +// Figma: text on the left, the 5x1000 details on the right, both on the background. The nested glass panels, the +// 57px "5x1000" and the 36px tax code (bigger than the section title) are gone. export function SupportSection() { return ( -
- -
- -

Sostieni PoliNetwork

-

- Se vuoi supportare PoliNetwork economicamente, puoi destinarci il 5x1000 nella dichiarazione dei redditi. Si - tratta di una quota IRPEF che verseresti comunque, e che puoi scegliere di indirizzare a noi senza alcun - costo aggiuntivo. -

-
- -

5x1000

-

Il tuo sostegno può fare la differenza

-

- Nella sezione dedicata agli Enti del Terzo Settore, indica il nostro codice fiscale: -

-

- 97927490157 -

- - +
+
+

Sostieni PoliNetwork

+

+ Se vuoi supportare PoliNetwork economicamente, puoi destinarci il 5x1000 nella dichiarazione dei redditi. Si + tratta di una quota IRPEF che verseresti comunque, e che puoi scegliere di indirizzare a noi senza alcun costo + aggiuntivo. +

+
+
+

+ Il tuo 5x1000 può fare la differenza +

+

+ Nella sezione dedicata agli Enti del Terzo Settore, indica il nostro codice fiscale: +

+

97927490157

+
) } diff --git a/src/components/chi-siamo/vision-section.tsx b/src/components/chi-siamo/vision-section.tsx index ec6ba6d9..cd39d3ce 100644 --- a/src/components/chi-siamo/vision-section.tsx +++ b/src/components/chi-siamo/vision-section.tsx @@ -1,10 +1,10 @@ -import Link from "next/link" -import { FiArrowDown, FiArrowUpRight } from "react-icons/fi" -import { Button } from "@/components/ui/button" +import { CONTAINER } from "./constants" +// Both Figma versions open with the vision statement and no buttons: the two CTAs here existed in neither export function VisionSection() { return ( -
+
+

La nostra visione

Un Politecnico in cui nessuno studente resti indietro per mancanza di{" "} informazioni. @@ -12,18 +12,6 @@ export function VisionSection() {

Rendiamo le informazioni sul PoliMi più accessibili, comprensibili e facili da trovare.

-
- - -

) } From bb21321151aa850170bfa2b5f3ee71f1355040ca Mon Sep 17 00:00:00 2001 From: Bianca Roberta Ianosel Date: Mon, 2 Nov 2026 09:18:57 +0000 Subject: [PATCH 4/7] refactor(chi-siamo): reuse the section title and drop narrating comments 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. --- src/components/chi-siamo/answer-section.tsx | 2 +- src/components/chi-siamo/history-section.tsx | 7 ++----- src/components/chi-siamo/numbers-section.tsx | 1 - src/components/chi-siamo/problem-section.tsx | 1 - src/components/chi-siamo/support-section.tsx | 2 -- src/components/chi-siamo/vision-section.tsx | 1 - 6 files changed, 3 insertions(+), 11 deletions(-) diff --git a/src/components/chi-siamo/answer-section.tsx b/src/components/chi-siamo/answer-section.tsx index 75beff48..d87e0862 100644 --- a/src/components/chi-siamo/answer-section.tsx +++ b/src/components/chi-siamo/answer-section.tsx @@ -24,7 +24,7 @@ const cards = [ export function AnswerSection() { return ( -
+

La nostra risposta

diff --git a/src/components/chi-siamo/history-section.tsx b/src/components/chi-siamo/history-section.tsx index f698c4c3..f8ae3201 100644 --- a/src/components/chi-siamo/history-section.tsx +++ b/src/components/chi-siamo/history-section.tsx @@ -1,7 +1,7 @@ import Link from "next/link" import { FiArrowUpRight } from "react-icons/fi" import { Button } from "@/components/ui/button" -import { CONTAINER } from "./constants" +import { CONTAINER, SECTION_TITLE } from "./constants" const blocks = [ { @@ -18,15 +18,12 @@ const blocks = [ }, ] as const -// Figma lays these out as two free columns: in glass cards each held a section title, and the hierarchy broke export function HistorySection() { return (

{blocks.map((block) => (
-

- {block.title} -

+

{block.title}

{block.description}

- {/* Figma sets the figures at headline size beside the icon: at 45px they outranked the section titles */}
    {stats.map((stat) => (
  • diff --git a/src/components/chi-siamo/problem-section.tsx b/src/components/chi-siamo/problem-section.tsx index c8097291..2902a4ab 100644 --- a/src/components/chi-siamo/problem-section.tsx +++ b/src/components/chi-siamo/problem-section.tsx @@ -15,7 +15,6 @@ export function ProblemSection() {

    Il problema

    Il PoliMi è complesso. Le informazioni non dovrebbero esserlo.

- {/* Questions students ask, not actions: compact chips, icon first, no hover */}
    {questions.map((question) => (
  • diff --git a/src/components/chi-siamo/vision-section.tsx b/src/components/chi-siamo/vision-section.tsx index cd39d3ce..e3f522fd 100644 --- a/src/components/chi-siamo/vision-section.tsx +++ b/src/components/chi-siamo/vision-section.tsx @@ -1,6 +1,5 @@ import { CONTAINER } from "./constants" -// Both Figma versions open with the vision statement and no buttons: the two CTAs here existed in neither export function VisionSection() { return (
    From e576145bc99d25005d55d87464a3be4b9d9d60e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gabriele=20Vigan=C3=B2?= Date: Tue, 27 Oct 2026 16:07:54 +0000 Subject: [PATCH 5/7] feat(struttura): unify the organisation chart and align /about with Figma - 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 --- src/app/about/page.tsx | 11 +- src/components/storia/organization.tsx | 183 +----------- .../structure/association-bodies.tsx | 9 +- src/components/structure/board-gallery.tsx | 11 +- src/components/structure/constants.ts | 20 +- .../structure/organization-chart.tsx | 271 +++++++++--------- src/components/structure/participation.tsx | 5 +- 7 files changed, 166 insertions(+), 344 deletions(-) diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx index 8cab8cbf..d76c4391 100644 --- a/src/app/about/page.tsx +++ b/src/app/about/page.tsx @@ -3,6 +3,7 @@ import Link from "next/link" import { FiArrowUpRight } from "react-icons/fi" import { AssociationBodies } from "@/components/structure/association-bodies" import { BoardGallery } from "@/components/structure/board-gallery" +import { CONTAINER } from "@/components/structure/constants" import { LegalStatus } from "@/components/structure/legal-status" import { OrganizationChart } from "@/components/structure/organization-chart" import { Participation } from "@/components/structure/participation" @@ -15,14 +16,14 @@ export const metadata: Metadata = { "Un’organizzazione pensata per durare: scopri l’organigramma, il Direttivo, gli organi associativi e i ruoli di PoliNetwork APS.", } -const containerClass = "mx-auto flex w-full max-w-330 flex-col gap-10 px-6 md:gap-14" +const containerClass = `${CONTAINER} flex flex-col gap-10 md:gap-14` const titleClass = "typo-headline-medium sm:typo-display-medium text-balance bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-center text-transparent" export default function StructurePage() { return (
    -
    +
    @@ -49,8 +50,8 @@ export default function StructurePage() {
    -
    -

    +
    +

    Tutto ciò che c’è da sapere su PoliNetwork.

    @@ -63,7 +64,7 @@ export default function StructurePage() {

    -
    +

    diff --git a/src/components/storia/organization.tsx b/src/components/storia/organization.tsx index 639068a1..b661d3bf 100644 --- a/src/components/storia/organization.tsx +++ b/src/components/storia/organization.tsx @@ -1,180 +1,9 @@ import Link from "next/link" import { FiArrowDown } from "react-icons/fi" -import { - LuBookUser, - LuCodeXml, - LuCrown, - LuGlobe, - LuHandshake, - LuPencilRuler, - LuShield, - LuShieldCheck, - LuUserCog, - LuUsersRound, -} from "react-icons/lu" -import { CardIcon } from "@/components/card-icon" -import { GradientIcon } from "@/components/gradient-icon" +import { OrganizationDiagram } from "@/components/structure/organization-chart" import { Button } from "@/components/ui/button" -import { Card, CardTitle } from "@/components/ui/card" -import { cn } from "@/lib/utils" import { CONTAINER } from "./constants" -const teamLeads = [ - { title: "Team lead HR", icon: LuBookUser }, - { title: "Team lead IT", icon: LuCodeXml }, - { title: "Team lead Design & Marketing", icon: LuPencilRuler }, - { title: "Team lead International", icon: LuGlobe }, - { title: "Team lead Eventi & Partnership", icon: LuHandshake }, -] - -const nodeClassName = "[&_h3]:text-text-primary" -const mainNodeClassName = "[&_h3]:typo-title-large w-fit px-4 [&_h3]:whitespace-nowrap" - -type BranchPosition = "first" | "middle" | "last" | "only" - -/** Horizontal rail and arrow above one child of a branch: the rail runs from the first child's center to the last's. */ -function BranchArrow({ position }: { position: BranchPosition }) { - return ( -
    - {position !== "only" && ( - - )} - -
    - ) -} - -function branchPosition(index: number, count: number): BranchPosition { - if (count === 1) return "only" - if (index === 0) return "first" - return index === count - 1 ? "last" : "middle" -} - -function Stem() { - return -} - -function DesktopChart() { - return ( -
    - - -
    - {/* Rail from the center of the admin column (1/12) to the center of the Team growth columns (7/12) */} -
    - - - -
    -
    - - - -
    -
    - - -
      - {teamLeads.map((lead, index) => ( -
    • - -
      - -
      - -
      • - ))} -
    -
    - - - - Membri dei team - - -
    -
    -
    -
    - ) -} - -function MobileChart() { - return ( -
    - - -
    -
    - - - -
    -
    - - - -
    -
    - - -
      - {teamLeads.map((lead) => ( -
    • - - - - {lead.title} - - -
      • - ))} -
    - - -
    -
    -
    - ) -} - export function Organization() { return (
    @@ -191,15 +20,7 @@ export function Organization() {
- +
) } diff --git a/src/components/structure/association-bodies.tsx b/src/components/structure/association-bodies.tsx index 4249de00..ec0f6a75 100644 --- a/src/components/structure/association-bodies.tsx +++ b/src/components/structure/association-bodies.tsx @@ -4,7 +4,6 @@ import { Accordion } from "@/components/accordion-association/accordion" import { AccordionContent } from "@/components/accordion-association/accordion-content" import { AccordionItem } from "@/components/accordion-association/accordion-item" import { AccordionTrigger } from "@/components/accordion-association/accordion-trigger" -import { GradientIcon } from "@/components/gradient-icon" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { associationBodies } from "./constants" @@ -26,9 +25,11 @@ export function AssociationBodies() {
{associationBodies.map((body) => ( - - - {body.title} + {/* Definitions, not objects: plain title as in Figma, no icon */} + + + {body.title} + {body.description} diff --git a/src/components/structure/board-gallery.tsx b/src/components/structure/board-gallery.tsx index d28bd40a..b73e2363 100644 --- a/src/components/structure/board-gallery.tsx +++ b/src/components/structure/board-gallery.tsx @@ -7,13 +7,14 @@ import { cn } from "@/lib/utils" export function BoardGallery() { return ( - + {boardMembers.map((member) => ( - - + + {member.name} - -
+ + + {label} + ) } -const nodeClassName = "[&_h3]:text-text-primary" -// The admin column is one sixth of the chart: a smaller title and padding keep "Capi admin" on one line -const adminNodeClassName = "[&_h3]:typo-headline-small [&>*]:px-4 [&_h3]:whitespace-nowrap" +function LeadNode({ icon, label }: { icon: IconType; label: string }) { + return ( + + + {label} + + ) +} + +function Arrow({ className }: { className?: string }) { + return +} /** Horizontal rail and arrow above one child of a branch: the rail runs from the first child's center to the last's. */ function BranchArrow({ position }: { position: "first" | "middle" | "last" | "only" }) { return ( -
+
{position !== "only" && ( )} - +
) } @@ -48,58 +68,45 @@ function branchPosition(index: number, count: number) { } function Stem() { - return + return } function DesktopChart() { return ( -
- +
+ -
- {/* Rail from the center of the admin column (1/12) to the center of the Team Growth columns (7/12) */} -
- - - +
+ {/* Rail from the center of the admin column (1/12) to the center of the Team growth columns (7/12) */} +
+ + +
-
-
- - - -
+
+ + +
-
- +
+ -
    +
      {teamLeads.map((lead, index) => (
    • - +
      • ))}
    -
    - +
    + - - Membri Team - - + Membri Team +
@@ -107,92 +114,92 @@ function DesktopChart() { ) } -export function OrganizationChart() { +/** Figma mobile "Sezione organigramma": two columns, team leads hanging off a vertical rail, Membri Team balancing the admin column. */ +function MobileChart() { return ( -
- -
- -
-
- -
-
- -
+
+ + +
+
+ + +
-
-
- - - -
-
- - -
    - {teamLeads.map((lead) => ( -
  • - - - - {lead.title} - - -
    • - ))} -
- - +
+ + + +
+ + {/* Arrow from the team leads' rail, across the column gap */} + + + +
-
- -
- -

Soci

-
-
-

Soci

-

- Essere socio è una condizione trasversale, compatibile con qualsiasi ruolo all’interno di PoliNetwork. Ogni - persona può ricoprire più ruoli contemporaneamente. -

+
+ + +
    + {teamLeads.map((lead) => ( +
  • + + + + {lead.title} + +
    • + ))} +
- +
+
+ ) +} + +/** The organisation diagram, shared by /about and /storia. */ +export function OrganizationDiagram({ id, className }: { id?: string; className?: string }) { + return ( + + ) +} + +export function OrganizationChart() { + return ( +
+ {/* Chart and Soci share one column, as in Figma */} +
+ + + +
+
+

+ + Soci +

+ {/* A label, not an action: Figma's "Ruolo trasversale" tag */} + + Ruolo trasversale + +
+

+ Essere socio è una condizione trasversale, compatibile con qualsiasi ruolo all’interno di PoliNetwork. + Ogni persona può ricoprire più ruoli contemporaneamente. +

+
+ +
) } diff --git a/src/components/structure/participation.tsx b/src/components/structure/participation.tsx index e5331189..c8648b21 100644 --- a/src/components/structure/participation.tsx +++ b/src/components/structure/participation.tsx @@ -12,7 +12,10 @@ export function Participation() { - + {path.title} From b3fd927c55f7a705f8e221062e098188713bc69f Mon Sep 17 00:00:00 2001 From: Bianca Roberta Ianosel Date: Mon, 2 Nov 2026 09:20:23 +0000 Subject: [PATCH 6/7] fix(structure): connect the mobile Team growth branch and share the portrait card - Mobile chart: the stem under Team growth now turns left and meets the rail the team leads hang from; before it stopped in mid-air. - Node takes a `fill` flag instead of six call sites cancelling its min-width and padding. - The chart's accessible label lists the teams from teamLeads. - BoardMemberCard replaces the two copies of the Direttivo portrait in /about and /storia. - Comments that narrated Figma or the change are removed; the xl overlap on /storia gets one explaining why. --- src/components/storia/boards.tsx | 27 ++++----------- src/components/storia/organization.tsx | 1 + .../structure/association-bodies.tsx | 1 - src/components/structure/board-gallery.tsx | 27 ++++----------- .../structure/board-member-card.tsx | 34 +++++++++++++++++++ .../structure/organization-chart.tsx | 33 ++++++++++-------- 6 files changed, 66 insertions(+), 57 deletions(-) create mode 100644 src/components/structure/board-member-card.tsx diff --git a/src/components/storia/boards.tsx b/src/components/storia/boards.tsx index 14e87ccf..23a43fbe 100644 --- a/src/components/storia/boards.tsx +++ b/src/components/storia/boards.tsx @@ -1,11 +1,9 @@ "use client" -import Image from "next/image" +import { BoardMemberCard } from "@/components/structure/board-member-card" import TabsNavigation from "@/components/tabs" import { Tabs } from "@/components/tabs/tabs" import { TabsContent } from "@/components/tabs/tabs-content" -import { Card, CardContent } from "@/components/ui/card" -import { cn } from "@/lib/utils" import { boardMembers, boardTerms, CONTAINER } from "./constants" export function Boards() { @@ -24,25 +22,12 @@ export function Boards() {
{boardMembers.map((member) => ( - - {member.name} -
- -

{member.name}

- {member.role &&

{member.role}

} - - + member={member} + sizes="(max-width: 639px) 45vw, (max-width: 1279px) 30vw, 224px" + className="sm:w-[calc((100%-48px)/3)] xl:w-[calc((100%-72px)/4)] min-[360px]:w-[calc((100%-24px)/2)]" + /> ))}

diff --git a/src/components/storia/organization.tsx b/src/components/storia/organization.tsx index b661d3bf..3927b64e 100644 --- a/src/components/storia/organization.tsx +++ b/src/components/storia/organization.tsx @@ -20,6 +20,7 @@ export function Organization() {

+ {/* From xl the diagram rises beside the intro: its narrow top (the Direttivo node) fits next to the text */}
) diff --git a/src/components/structure/association-bodies.tsx b/src/components/structure/association-bodies.tsx index ec0f6a75..a808421e 100644 --- a/src/components/structure/association-bodies.tsx +++ b/src/components/structure/association-bodies.tsx @@ -25,7 +25,6 @@ export function AssociationBodies() {
{associationBodies.map((body) => ( - {/* Definitions, not objects: plain title as in Figma, no icon */} {body.title} diff --git a/src/components/structure/board-gallery.tsx b/src/components/structure/board-gallery.tsx index b73e2363..6193ba05 100644 --- a/src/components/structure/board-gallery.tsx +++ b/src/components/structure/board-gallery.tsx @@ -1,35 +1,22 @@ -import Image from "next/image" import { boardMembers } from "@/components/storia/constants" -import { Card, CardContent } from "@/components/ui/card" +import { BoardMemberCard } from "@/components/structure/board-member-card" import { Carousel, CarouselContent, CarouselDots, CarouselItem } from "@/components/ui/carousel" -import { cn } from "@/lib/utils" export function BoardGallery() { return ( {boardMembers.map((member) => ( - - {member.name} -
- -

{member.name}

- {member.role &&

{member.role}

} - - + ))} diff --git a/src/components/structure/board-member-card.tsx b/src/components/structure/board-member-card.tsx new file mode 100644 index 00000000..3d96b274 --- /dev/null +++ b/src/components/structure/board-member-card.tsx @@ -0,0 +1,34 @@ +import Image from "next/image" +import type { boardMembers } from "@/components/storia/constants" +import { Card, CardContent } from "@/components/ui/card" +import { cn } from "@/lib/utils" + +/** A Direttivo member's portrait, with name and role over a gradient. */ +export function BoardMemberCard({ + member, + sizes, + className, +}: { + member: (typeof boardMembers)[number] + sizes: string + className?: string +}) { + return ( + + {member.name} +
+ +

{member.name}

+ {member.role &&

{member.role}

} + + + ) +} diff --git a/src/components/structure/organization-chart.tsx b/src/components/structure/organization-chart.tsx index 1d9ef980..a10658f1 100644 --- a/src/components/structure/organization-chart.tsx +++ b/src/components/structure/organization-chart.tsx @@ -6,19 +6,20 @@ import { GradientIcon } from "@/components/gradient-icon" import { cn } from "@/lib/utils" import { CONTAINER, teamLeads } from "./constants" -const CHART_LABEL = - "Il Direttivo coordina i Capi admin e il Team growth. I Capi admin coordinano gli Admin. Il Team growth coordina i team lead HR, IT, Design & Marketing, International ed Eventi & Partnership, con i rispettivi membri." +const teamNames = new Intl.ListFormat("it").format(teamLeads.map((lead) => lead.title.replace("Team lead ", ""))) +const CHART_LABEL = `Il Direttivo coordina i Capi admin e il Team growth. I Capi admin coordinano gli Admin. Il Team growth coordina i team lead ${teamNames}, con i rispettivi membri.` -// Figma "Nodo organigramma": a glass tile with the icon above a 22px label. Nodes are not links, so no hover. +// Nodes are not links, so they have no hover state const tileClassName = "rounded-rectangles border-white/50 bg-background-blur text-text-primary" -function Node({ icon, label, className }: { icon: IconType; label: string; className?: string }) { +/** `fill` stretches the node to its column instead of sizing it by its label. */ +function Node({ icon, label, fill = false }: { icon: IconType; label: string; fill?: boolean }) { return ( @@ -84,9 +85,9 @@ function DesktopChart() {
- + - +
@@ -127,11 +128,11 @@ function MobileChart() {
- + - +
- + {/* Arrow from the team leads' rail, across the column gap */}
- - + + {/* Down from the node, then left to the rail the team leads hang from */} +
+ + +
    {teamLeads.map((lead) => (
  • @@ -177,7 +182,6 @@ export function OrganizationDiagram({ id, className }: { id?: string; className? export function OrganizationChart() { return (
    - {/* Chart and Soci share one column, as in Figma */}
    @@ -188,7 +192,6 @@ export function OrganizationChart() { Soci - {/* A label, not an action: Figma's "Ruolo trasversale" tag */} Ruolo trasversale From ff3f0c9d35109707973c4b468f97cae0deea04c3 Mon Sep 17 00:00:00 2001 From: Bianca Roberta Ianosel Date: Mon, 2 Nov 2026 14:54:41 +0000 Subject: [PATCH 7/7] fix(struttura): blue closing statement, statute heading on one line --- src/app/about/page.tsx | 2 +- src/components/structure/legal-status.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx index d76c4391..f3ec29e5 100644 --- a/src/app/about/page.tsx +++ b/src/app/about/page.tsx @@ -51,7 +51,7 @@ export default function StructurePage() {
    -

    +

    Tutto ciò che c’è da sapere su PoliNetwork.

    diff --git a/src/components/structure/legal-status.tsx b/src/components/structure/legal-status.tsx index 02df69a9..92da3e3d 100644 --- a/src/components/structure/legal-status.tsx +++ b/src/components/structure/legal-status.tsx @@ -24,7 +24,7 @@ export function LegalStatus() { ))}

-

+

Consulta Statuto e Regolamenti