From 7d41e6f483dbcb350f983c3e18863b5ebf6a407d Mon Sep 17 00:00:00 2001 From: Tommaso Morganti Date: Thu, 15 Oct 2026 13:31:28 +0200 Subject: [PATCH 1/4] feat(chi-siamo): add "Su di noi" page Implement the "Su di noi" Figma page at /chi-siamo, the route the header already links to. The page is composed of existing components only (CardIcon, Card primitives, Glass, GradientIcon, Button, Shape/ShapeLayer) and uses the shared fluid spacing tokens (page-container, page-top, gap-section, gap-block). Sections: vision, problem, our answer, student path timeline, numbers, history/structure links and 5x1000 support. Background shapes follow the desktop Figma frame and are anchored per section; there is no mobile frame yet, so mobile has no shapes. --- src/app/chi-siamo/page.tsx | 53 ++++++++++++ src/app/chi-siamo/shapes.tsx | 88 ++++++++++++++++++++ src/components/chi-siamo/answer-section.tsx | 44 ++++++++++ src/components/chi-siamo/history-section.tsx | 39 +++++++++ src/components/chi-siamo/numbers-section.tsx | 47 +++++++++++ src/components/chi-siamo/path-section.tsx | 56 +++++++++++++ src/components/chi-siamo/problem-section.tsx | 34 ++++++++ src/components/chi-siamo/support-section.tsx | 31 +++++++ src/components/chi-siamo/vision-section.tsx | 16 ++++ 9 files changed, 408 insertions(+) create mode 100644 src/app/chi-siamo/page.tsx create mode 100644 src/app/chi-siamo/shapes.tsx create mode 100644 src/components/chi-siamo/answer-section.tsx create mode 100644 src/components/chi-siamo/history-section.tsx create mode 100644 src/components/chi-siamo/numbers-section.tsx create mode 100644 src/components/chi-siamo/path-section.tsx create mode 100644 src/components/chi-siamo/problem-section.tsx create mode 100644 src/components/chi-siamo/support-section.tsx create mode 100644 src/components/chi-siamo/vision-section.tsx diff --git a/src/app/chi-siamo/page.tsx b/src/app/chi-siamo/page.tsx new file mode 100644 index 0000000..e68af5a --- /dev/null +++ b/src/app/chi-siamo/page.tsx @@ -0,0 +1,53 @@ +import type { Metadata } from "next" +import { AnswerSection } from "@/components/chi-siamo/answer-section" +import { HistorySection } from "@/components/chi-siamo/history-section" +import { NumbersSection } from "@/components/chi-siamo/numbers-section" +import { PathSection } from "@/components/chi-siamo/path-section" +import { ProblemSection } from "@/components/chi-siamo/problem-section" +import { SupportSection } from "@/components/chi-siamo/support-section" +import { VisionSection } from "@/components/chi-siamo/vision-section" +import { + ChiSiamoAnswerShapes, + ChiSiamoHistoryShapes, + ChiSiamoNumbersShapes, + ChiSiamoPathShapes, + ChiSiamoProblemShapes, + ChiSiamoVisionShapes, +} from "./shapes" + +export const metadata: Metadata = { + title: "Su di noi", + description: "Rendiamo le informazioni sul PoliMi più accessibili, comprensibili e facili da trovare.", +} + +export default function ChiSiamoPage() { + return ( +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+ ) +} diff --git a/src/app/chi-siamo/shapes.tsx b/src/app/chi-siamo/shapes.tsx new file mode 100644 index 0000000..3c16ff8 --- /dev/null +++ b/src/app/chi-siamo/shapes.tsx @@ -0,0 +1,88 @@ +import { Shape, ShapeLayer } from "@/components/shapes" + +/** + * `left` offsets are `calc(50% + Npx)`, relative to the horizontal center of + * the 1728px (desktop) Figma frame — see src/components/home/shapes.tsx. + * + * Each section's shapes are `top`-anchored to that section's heading (the + * section's top edge): `top = figmaY - figmaHeadingY`. The vision shapes are + * instead anchored to the page top, since that section starts at the top of + * `
`, where page y = Figma y. + * + * The Figma file only has a desktop frame for this page, so there are no + * mobile shapes yet. + */ + +export function ChiSiamoVisionShapes() { + return ( + + {/* Desktop Shapes */} + + + + + + ) +} + +export function ChiSiamoProblemShapes() { + return ( + + {/* Desktop Shapes */} + + + + ) +} + +export function ChiSiamoAnswerShapes() { + return ( + + {/* Desktop Shapes */} + + + ) +} + +export function ChiSiamoPathShapes() { + return ( + + {/* Desktop Shapes */} + + + + + ) +} + +export function ChiSiamoNumbersShapes() { + return ( + + {/* Desktop Shapes */} + + + + + ) +} + +export function ChiSiamoHistoryShapes() { + return ( + + {/* Desktop Shapes */} + + + ) +} diff --git a/src/components/chi-siamo/answer-section.tsx b/src/components/chi-siamo/answer-section.tsx new file mode 100644 index 0000000..437469f --- /dev/null +++ b/src/components/chi-siamo/answer-section.tsx @@ -0,0 +1,44 @@ +import { FiAward, FiBookOpen, FiUsers } from "react-icons/fi" +import { CardIcon } from "@/components/card-icon" + +const cards = [ + { + title: "Community", + description: + "Lo facciamo attraverso una community di gruppi Telegram e WhatsApp organizzati per tematiche, corsi, scaglioni e sedi, moderati ogni giorno da admin volontari.", + icon: FiUsers, + }, + { + title: "Strumenti", + description: + "Lo facciamo con strumenti digitali gratuiti e open source: dalle graduatorie TOL navigabili al simulatore del test d’ingresso, dal bot per trovare il proprio gruppo agli archivi di appunti e temi d’esame.", + icon: FiBookOpen, + }, + { + title: "Eventi", + description: + "E lo facciamo di persona, con eventi che aggregano la community e collaborazioni che portano valore concreto agli studenti.", + icon: FiAward, + }, +] as const + +export function AnswerSection() { + return ( +
+
+

+ La nostra risposta +

+

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

+
+ +
+ {cards.map((card) => ( + + ))} +
+
+ ) +} diff --git a/src/components/chi-siamo/history-section.tsx b/src/components/chi-siamo/history-section.tsx new file mode 100644 index 0000000..074244a --- /dev/null +++ b/src/components/chi-siamo/history-section.tsx @@ -0,0 +1,39 @@ +import Link from "next/link" +import { FiArrowUpRight } from "react-icons/fi" +import { Button } from "@/components/ui/button" + +const blocks = [ + { + title: "Da dove veniamo", + description: "Dieci anni fa eravamo ....", + cta: "La nostra storia", + href: "/storia", + }, + { + title: "Come siamo organizzati", + description: "Direttivo, team operativi, admin e soci. Guarda come funziona la macchina dall'interno.", + cta: "La nostra struttura", + href: "/about", + }, +] as const + +export function HistorySection() { + return ( +
+ {blocks.map((block) => ( +
+

+ {block.title} +

+

{block.description}

+ +
+ ))} +
+ ) +} diff --git a/src/components/chi-siamo/numbers-section.tsx b/src/components/chi-siamo/numbers-section.tsx new file mode 100644 index 0000000..2b7c9a9 --- /dev/null +++ b/src/components/chi-siamo/numbers-section.tsx @@ -0,0 +1,47 @@ +import { FiBook, FiBookOpen, FiHeadphones, FiSend, FiUser, FiUsers } from "react-icons/fi" +import { GradientIcon } from "@/components/gradient-icon" +import { Card, CardContent, CardTitle } from "@/components/ui/card" + +const stats = [ + { value: "500+", label: "gruppi Telegram e WhatsApp attivi", icon: FiSend }, + { value: "30+", label: "corsi di laurea coperti", icon: FiBook }, + { value: "45k+", label: "studenti raggiunti ogni anno", icon: FiUser }, + { value: "100+", label: "admin volontari su tutte le sedi", icon: FiUsers }, + { value: "5", label: "team operativi", icon: FiHeadphones }, + { value: "100%", label: "progetti tecnici rilasciati open source", icon: FiBookOpen }, +] as const + +export function NumbersSection() { + return ( +
+
+

+ I numeri +

+

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

+
+ +
+
+ {stats.map((stat) => ( + + +
+ + {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 new file mode 100644 index 0000000..74e80bf --- /dev/null +++ b/src/components/chi-siamo/path-section.tsx @@ -0,0 +1,56 @@ +import { FiBook, FiClipboard, FiFileText, FiGift, FiUser, FiUserCheck } from "react-icons/fi" +import { Glass } from "@/components/glass" +import { GradientIcon } from "@/components/gradient-icon" +import { cn } from "@/lib/utils" + +const steps = [ + { title: "TOL", description: "Simulazioni, guide e consigli per affrontarlo al meglio.", icon: FiBook }, + { title: "Ammissione", description: "Graduatorie, scadenze e tutto ciò che serve per iniziare.", icon: FiClipboard }, + { title: "Primo anno", description: "Orientamento, gruppi, risorse e supporto tra studenti.", icon: FiUser }, + { title: "Esami", description: "Appunti, temi, consigli e strumenti per prepararti meglio.", icon: FiFileText }, + { + title: "Scelta del percorso", + description: "Informazioni chiare per decidere il tuo futuro al PoliMi.", + icon: FiUserCheck, + }, + { title: "Laurea", description: "Fino al traguardo, insieme.", icon: FiGift }, +] as const + +export function PathSection() { + return ( +
+

+ Il tuo percorso, sempre al tuo fianco +

+ +
    + {steps.map((step, index) => ( +
  1. + + + +
    +

    + {step.title} +

    +

    {step.description}

    +
    +
    2. + ))} +
+ +

+ 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 new file mode 100644 index 0000000..e7705dc --- /dev/null +++ b/src/components/chi-siamo/problem-section.tsx @@ -0,0 +1,34 @@ +import { FiEdit, FiFileText, FiUsers } from "react-icons/fi" +import { Card, CardAction, CardContent } from "@/components/ui/card" + +const questions = [ + { text: "Dove trovo il gruppo del mio corso?", icon: FiUsers }, + { text: "Come funziona il piano degli studi?", icon: FiFileText }, + { text: "Cosa succede se non passo l’OFA di inglese?", icon: FiEdit }, +] as const + +export function ProblemSection() { + return ( +
+
+

+ Il problema +

+

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

+
+ +
+ {questions.map((question) => ( + + + {question.text} + + ))} +
+
+ ) +} diff --git a/src/components/chi-siamo/support-section.tsx b/src/components/chi-siamo/support-section.tsx new file mode 100644 index 0000000..446f1d1 --- /dev/null +++ b/src/components/chi-siamo/support-section.tsx @@ -0,0 +1,31 @@ +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. +

+
+ +
+

+ 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 new file mode 100644 index 0000000..9364d06 --- /dev/null +++ b/src/components/chi-siamo/vision-section.tsx @@ -0,0 +1,16 @@ +export function VisionSection() { + return ( +
+

+ La nostra visione +

+

+ Un Politecnico in cui nessuno studente resti indietro per mancanza di{" "} + informazioni. +

+

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

+
+ ) +} From bacf02ad214a6103fe715dd48d399e1616101d30 Mon Sep 17 00:00:00 2001 From: Tommaso Morganti Date: Thu, 15 Oct 2026 13:36:28 +0200 Subject: [PATCH 2/4] fix(chi-siamo): narrow the content column to the Figma width Content spanned up to 1440px, leaving only the fluid gutter (~50-60px on laptop screens) between it and the page edges. Override --container-page on this page so page-container caps it at 1200px like in Figma (262px margins on the 1728px frame). Adapt the number cards to the narrower column: tighter padding, Figma's unequal column proportions from xl, and the large icon only from 1xl, so labels stay on two lines. --- src/app/chi-siamo/page.tsx | 3 ++- src/components/chi-siamo/numbers-section.tsx | 7 ++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/app/chi-siamo/page.tsx b/src/app/chi-siamo/page.tsx index e68af5a..5f60553 100644 --- a/src/app/chi-siamo/page.tsx +++ b/src/app/chi-siamo/page.tsx @@ -22,7 +22,8 @@ export const metadata: Metadata = { export default function ChiSiamoPage() { return ( -
+ // Narrower content column (1200px, as in Figma): `page-container` caps its padding on this variable +
diff --git a/src/components/chi-siamo/numbers-section.tsx b/src/components/chi-siamo/numbers-section.tsx index 2b7c9a9..1aafff1 100644 --- a/src/components/chi-siamo/numbers-section.tsx +++ b/src/components/chi-siamo/numbers-section.tsx @@ -24,10 +24,11 @@ export function NumbersSection() {
-
+ {/* Column proportions from Figma: the middle column has the shortest labels */} +
{stats.map((stat) => ( - - + +
{stat.value} From 48b827da1adcde8390110d31639f0162921fad8a Mon Sep 17 00:00:00 2001 From: Bianca Roberta Ianosel Date: Thu, 15 Oct 2026 12:59:31 +0000 Subject: [PATCH 3/4] style(chi-siamo): refine hierarchy cards and responsive layout --- src/components/chi-siamo/answer-section.tsx | 23 +++++---- src/components/chi-siamo/history-section.tsx | 23 +++++---- src/components/chi-siamo/numbers-section.tsx | 26 +++++----- src/components/chi-siamo/path-section.tsx | 6 +-- src/components/chi-siamo/problem-section.tsx | 23 ++++----- src/components/chi-siamo/support-section.tsx | 52 ++++++++++---------- src/components/chi-siamo/vision-section.tsx | 28 ++++++++--- 7 files changed, 101 insertions(+), 80 deletions(-) diff --git a/src/components/chi-siamo/answer-section.tsx b/src/components/chi-siamo/answer-section.tsx index 437469f..84fd5ef 100644 --- a/src/components/chi-siamo/answer-section.tsx +++ b/src/components/chi-siamo/answer-section.tsx @@ -5,38 +5,43 @@ const cards = [ { title: "Community", description: - "Lo facciamo attraverso una community di gruppi Telegram e WhatsApp organizzati per tematiche, corsi, scaglioni e sedi, moderati ogni giorno da admin volontari.", + "Gruppi Telegram e WhatsApp per corsi, scaglioni, sedi e interessi. Una rete moderata ogni giorno da admin volontari.", icon: FiUsers, }, { title: "Strumenti", description: - "Lo facciamo con strumenti digitali gratuiti e open source: dalle graduatorie TOL navigabili al simulatore del test d’ingresso, dal bot per trovare il proprio gruppo agli archivi di appunti e temi d’esame.", + "Strumenti gratuiti e open source: graduatorie e simulazioni TOL, bot per trovare il tuo gruppo, appunti e temi d’esame.", icon: FiBookOpen, }, { title: "Eventi", - description: - "E lo facciamo di persona, con eventi che aggregano la community e collaborazioni che portano valore concreto agli studenti.", + description: "Eventi per incontrarsi e fare community. Collaborazioni che portano valore concreto agli studenti.", icon: FiAward, }, ] as const export function AnswerSection() { return ( -
-
+
+

La nostra risposta

-

+

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

-
+
{cards.map((card) => ( - + ))}
diff --git a/src/components/chi-siamo/history-section.tsx b/src/components/chi-siamo/history-section.tsx index 074244a..7212a28 100644 --- a/src/components/chi-siamo/history-section.tsx +++ b/src/components/chi-siamo/history-section.tsx @@ -1,16 +1,20 @@ import Link from "next/link" -import { FiArrowUpRight } from "react-icons/fi" +import { FiArrowUpRight, FiClock, FiUsers } from "react-icons/fi" +import { Glass } from "@/components/glass" +import { GradientIcon } from "@/components/gradient-icon" import { Button } from "@/components/ui/button" const blocks = [ { title: "Da dove veniamo", - description: "Dieci anni fa eravamo ....", + 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", @@ -19,20 +23,21 @@ const blocks = [ export function HistorySection() { return ( -
+
{blocks.map((block) => ( -
-

+ + +

{block.title}

-

{block.description}

- -

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

I numeri

-

+

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

- {/* Column proportions from Figma: the middle column has the shortest labels */} -
+
{stats.map((stat) => ( - - -
- + + + {stat.value} - {stat.label} -
+ + + {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 74e80bf..3967c25 100644 --- a/src/components/chi-siamo/path-section.tsx +++ b/src/components/chi-siamo/path-section.tsx @@ -19,7 +19,7 @@ const steps = [ export function PathSection() { return (
-

+

Il tuo percorso, sempre al tuo fianco

@@ -37,7 +37,7 @@ export function PathSection() {
-

+

{step.title}

{step.description}

@@ -46,7 +46,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 e7705dc..e1a84be 100644 --- a/src/components/chi-siamo/problem-section.tsx +++ b/src/components/chi-siamo/problem-section.tsx @@ -9,23 +9,18 @@ const questions = [ export function ProblemSection() { return ( -

-
-

- Il problema +
+
+

Il problema

+

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

-

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

- -
+
{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 446f1d1..3d099ef 100644 --- a/src/components/chi-siamo/support-section.tsx +++ b/src/components/chi-siamo/support-section.tsx @@ -1,31 +1,31 @@ +import { FiHeart } from "react-icons/fi" +import { Glass } from "@/components/glass" +import { GradientIcon } from "@/components/gradient-icon" + 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. -

-
- -
-

- Il tuo 5x1000 -
- 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. +

+
+ +

5x1000

+

Il tuo sostegno 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 9364d06..d4e6344 100644 --- a/src/components/chi-siamo/vision-section.tsx +++ b/src/components/chi-siamo/vision-section.tsx @@ -1,16 +1,30 @@ +import Link from "next/link" +import { FiArrowDown, FiArrowUpRight } from "react-icons/fi" +import { Button } from "@/components/ui/button" + export function VisionSection() { return ( -
-

- La nostra visione -

-

+

+

Su di noi

+

Un Politecnico in cui nessuno studente resti indietro per mancanza di{" "} informazioni. -

-

+

+

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

+
+ + +
) } From b1edb8ebb314e540ec1ce6d586ce7fee7ace50da Mon Sep 17 00:00:00 2001 From: Bianca Roberta Ianosel Date: Thu, 15 Oct 2026 13:02:16 +0000 Subject: [PATCH 4/4] style(chi-siamo): remove eyebrows and restore section hierarchy --- src/components/chi-siamo/problem-section.tsx | 6 ++++-- src/components/chi-siamo/vision-section.tsx | 1 - 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/chi-siamo/problem-section.tsx b/src/components/chi-siamo/problem-section.tsx index e1a84be..85daeee 100644 --- a/src/components/chi-siamo/problem-section.tsx +++ b/src/components/chi-siamo/problem-section.tsx @@ -11,10 +11,12 @@ 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.map((question) => ( diff --git a/src/components/chi-siamo/vision-section.tsx b/src/components/chi-siamo/vision-section.tsx index d4e6344..895b233 100644 --- a/src/components/chi-siamo/vision-section.tsx +++ b/src/components/chi-siamo/vision-section.tsx @@ -5,7 +5,6 @@ import { Button } from "@/components/ui/button" export function VisionSection() { return (
-

Su di noi

Un Politecnico in cui nessuno studente resti indietro per mancanza di{" "} informazioni.