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..2902a4ab 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,22 @@ 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.
+
)
}
diff --git a/src/components/chi-siamo/support-section.tsx b/src/components/chi-siamo/support-section.tsx
index 8f3493ca..46423793 100644
--- a/src/components/chi-siamo/support-section.tsx
+++ b/src/components/chi-siamo/support-section.tsx
@@ -1,31 +1,25 @@
-import { FiHeart } from "react-icons/fi"
-import { Glass } from "@/components/glass"
-import { GradientIcon } from "@/components/gradient-icon"
+import { CONTAINER, SECTION_TITLE } from "./constants"
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..e3f522fd 100644
--- a/src/components/chi-siamo/vision-section.tsx
+++ b/src/components/chi-siamo/vision-section.tsx
@@ -1,10 +1,9 @@
-import Link from "next/link"
-import { FiArrowDown, FiArrowUpRight } from "react-icons/fi"
-import { Button } from "@/components/ui/button"
+import { CONTAINER } from "./constants"
export function VisionSection() {
return (
-
+
+
La nostra visione
Un Politecnico in cui nessuno studente resti indietro per mancanza di{" "}
informazioni.
@@ -12,18 +11,6 @@ export function VisionSection() {
Rendiamo le informazioni sul PoliMi più accessibili, comprensibili e facili da trovare.
-
-
-
-
)
}
diff --git a/src/components/storia/boards.tsx b/src/components/storia/boards.tsx
index 1beca4d5..23a43fbe 100644
--- a/src/components/storia/boards.tsx
+++ b/src/components/storia/boards.tsx
@@ -1,17 +1,14 @@
"use client"
-import Image from "next/image"
-import { Glass } from "@/components/glass"
+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 } from "./constants"
+import { boardMembers, boardTerms, CONTAINER } from "./constants"
export function Boards() {
return (
-
+
I nostri direttivi
Ogni mandato, un nuovo capitolo
@@ -25,39 +22,26 @@ export function Boards() {
Il Direttivo viene eletto ogni due anni dall’Assemblea dei Soci tra i soci dell’associazione.
-
+
{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..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"
@@ -6,23 +8,34 @@ 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 = [
{
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/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.
-
+ 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) => (
+
0 && "flex-1")}>
+ {index > 0 && }
+
+ {year}
+
+
+ ))}
+
+
+ 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 (
-
-
- {/* 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}
-
-
-
- ))}
-
-
-
-
-
-
- )
-}
+import { CONTAINER } from "./constants"
export function Organization() {
return (
-
+
Come è organizzata PoliNetwork
@@ -190,15 +20,8 @@ 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/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",
}}
>
-
-
+ {/* 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/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.role &&
{member.role}
}
+
+
+ )
+}
diff --git a/src/components/structure/constants.ts b/src/components/structure/constants.ts
index 716ce349..36bf0edb 100644
--- a/src/components/structure/constants.ts
+++ b/src/components/structure/constants.ts
@@ -1,42 +1,30 @@
import { FiBriefcase, FiCompass, FiFlag, FiUsers } from "react-icons/fi"
-import {
- LuBookUser,
- LuCodeXml,
- LuCrown,
- LuGlobe,
- LuHandshake,
- LuPencilRuler,
- LuScale,
- LuShield,
- LuUserCog,
- LuUsersRound,
-} from "react-icons/lu"
+import { LuBookUser, LuCodeXml, LuGlobe, LuHandshake, LuPencilRuler, LuShield, LuUsersRound } from "react-icons/lu"
+
+/** Same content column and 24/40/64px gutters as /storia and /chi-siamo. */
+export const CONTAINER = "mx-auto w-full max-w-350 px-6 sm:px-10 lg:px-16"
export const associationBodies = [
{
id: "assemblea",
- icon: FiUsers,
title: "Assemblea dei Soci",
description:
"È l’organo sovrano di PoliNetwork. Si riunisce almeno una volta l’anno per approvare il bilancio consuntivo e, ogni due anni, per eleggere il Consiglio Direttivo e il Collegio dei Probiviri. Approva eventuali modifiche allo Statuto. Ogni socio ha diritto di voto e può candidarsi direttamente a entrambi gli organi.",
},
{
id: "consiglio",
- icon: LuCrown,
title: "Consiglio Direttivo",
description:
"È l’organo esecutivo e di garanzia dell’associazione. Vigila sulle attività di PoliNetwork per preservare i valori dello Statuto, gestisce le finanze e i rapporti istituzionali con partner esterni, emana i regolamenti interni. Approva o respinge le linee d’azione proposte dai singoli team e le strategie delineate dal Team Growth, senza gestire direttamente le attività quotidiane dei team.",
},
{
id: "probiviri",
- icon: LuScale,
title: "Collegio dei Probiviri",
description:
"È l’organo di garanzia interna, indipendente dal Consiglio Direttivo. Interviene in caso di controversie tra membri o organi dell’associazione, contestazioni sulle elezioni, e vigila sul rispetto dello Statuto e dei regolamenti quando è in gioco l’imparzialità del Direttivo stesso. Viene eletto dall’Assemblea dei Soci con lo stesso mandato biennale del Direttivo, in modo indipendente da esso.",
},
{
id: "growth",
- icon: LuUserCog,
title: "Team Growth",
description:
"È il livello di coordinamento tra i cinque team operativi: riunisce i Capi Dipartimento e alcuni membri del Direttivo per allineare le priorità comuni, le nomine, il recruiting e le decisioni che coinvolgono più team contemporaneamente. Non è un team a sé e non si aprono candidature dirette: si entra in Team Growth diventando Capo Dipartimento di uno dei cinque team.",
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
diff --git a/src/components/structure/organization-chart.tsx b/src/components/structure/organization-chart.tsx
index 917b6a05..a10658f1 100644
--- a/src/components/structure/organization-chart.tsx
+++ b/src/components/structure/organization-chart.tsx
@@ -1,42 +1,63 @@
-import Image from "next/image"
-import { FiArrowDown, FiUsers } from "react-icons/fi"
+import type { IconType } from "react-icons"
+import { FiArrowDown, FiArrowLeft, FiUsers } from "react-icons/fi"
import { LuCrown, LuShield, LuShieldCheck, LuUserCog, LuUsersRound } from "react-icons/lu"
-import arrow from "@/assets/icons/structure/arrow.svg"
-import branch from "@/assets/icons/structure/branch.svg"
-import { CardIcon } from "@/components/card-icon"
import { Glass } from "@/components/glass"
import { GradientIcon } from "@/components/gradient-icon"
-import { Card, CardTitle } from "@/components/ui/card"
import { cn } from "@/lib/utils"
-import { teamLeads } from "./constants"
+import { CONTAINER, teamLeads } from "./constants"
-function DownArrow() {
+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.`
+
+// Nodes are not links, so they have no hover state
+const tileClassName = "rounded-rectangles border-white/50 bg-background-blur text-text-primary"
+
+/** `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 (
-
-
-
+
+
+ {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 +69,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 +115,94 @@ 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 (
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
-
-
-
-
-
+
+
+
+
+
+
+ {/* Arrow from the team leads' rail, across the column gap */}
+
+
+
+
-
-
-
-
- {teamLeads.map((lead) => (
-
-
-
-
- {lead.title}
-
-
-
- ))}
-
-
-
+
+
+
+ {/* Down from the node, then left to the rail the team leads hang from */}
+
+
+
+
+ {teamLeads.map((lead) => (
+
+
+
+
+ {lead.title}
+
+
+ ))}
+
-
-
-
-
Soci
-
-
-
Soci
-
- Essere socio è una condizione trasversale, compatibile con qualsiasi ruolo all’interno di PoliNetwork. Ogni
- persona può ricoprire più ruoli contemporaneamente.
-
-
-
+
+ )
+}
+
+/** The organisation diagram, shared by /about and /storia. */
+export function OrganizationDiagram({ id, className }: { id?: string; className?: string }) {
+ return (
+
+ Essere socio è una condizione trasversale, compatibile con qualsiasi ruolo all’interno di PoliNetwork.
+ Ogni persona può ricoprire più ruoli contemporaneamente.
+