diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 8cab8cbf..a2851a4e 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -1,6 +1,8 @@
 import type { Metadata } from "next"
 import Link from "next/link"
 import { FiArrowUpRight } from "react-icons/fi"
+import { ClosingCta } from "@/components/layout/closing-cta"
+import { CONTAINER, SECTION_TITLE } from "@/components/layout/page"
 import { AssociationBodies } from "@/components/structure/association-bodies"
 import { BoardGallery } from "@/components/structure/board-gallery"
 import { LegalStatus } from "@/components/structure/legal-status"
@@ -15,14 +17,13 @@ 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 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"
+const containerClass = `${CONTAINER} flex flex-col gap-10 md:gap-14`
+const titleClass = `${SECTION_TITLE} text-center`
 
 export default function StructurePage() {
   return (
     <main className="flex w-full flex-col gap-24 pb-24 md:gap-36 md:pb-36">
-      <section className="mx-auto w-full max-w-330 px-6 pt-52 md:pt-57.5">
+      <section className={`${CONTAINER} pt-52 md:pt-57.5`}>
         <Hero title="Struttura" description="Un’organizzazione pensata per durare" />
       </section>
       <OrganizationChart />
@@ -49,21 +50,19 @@ export default function StructurePage() {
         </h2>
         <Participation />
       </section>
-      <section className="mx-auto flex w-full max-w-330 flex-col items-center gap-8 px-6 py-10 text-center md:py-16">
-        <h2 className="typo-headline-medium md:typo-display-medium max-w-160 text-balance bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text text-transparent">
-          Tutto ciò che c’è da sapere su PoliNetwork.
-        </h2>
-        <p className="typo-body-large sm:typo-headline-extrasmall max-w-110 text-balance">
-          Scopri chi siamo, cosa facciamo e come entrare a far parte della nostra realtà.
-        </p>
-        <Button asChild size="lg">
-          <Link href="/join">
-            Unisciti a noi
-            <FiArrowUpRight aria-hidden />
-          </Link>
-        </Button>
-      </section>
-      <section aria-label="Forma giuridica e documenti associativi" className="mx-auto w-full max-w-330 px-6">
+      <ClosingCta
+        title="Tutto ciò che c’è da sapere su PoliNetwork."
+        lead="Scopri chi siamo, cosa facciamo e come entrare a far parte della nostra realtà."
+        action={
+          <Button asChild size="lg">
+            <Link href="/join">
+              Unisciti a noi
+              <FiArrowUpRight aria-hidden />
+            </Link>
+          </Button>
+        }
+      />
+      <section aria-label="Forma giuridica e documenti associativi" className={CONTAINER}>
         <LegalStatus />
       </section>
     </main>
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 (
-    <main className="flex w-full flex-col gap-24 pb-24 md:gap-36 md:pb-36">
+    <main className="flex w-full flex-col gap-24 pt-44 pb-24 sm:pt-56 md:gap-36 md:pb-36">
       <VisionSection />
       <ProblemSection />
       <AnswerSection />
diff --git a/src/app/projects/[id]/page.tsx b/src/app/projects/[id]/page.tsx
index 3e023664..8d1c623e 100644
--- a/src/app/projects/[id]/page.tsx
+++ b/src/app/projects/[id]/page.tsx
@@ -5,6 +5,7 @@ import { notFound } from "next/navigation"
 import { FiArrowLeft, FiArrowUpRight, FiUploadCloud } from "react-icons/fi"
 import { Glass } from "@/components/glass"
 import { GradientIcon } from "@/components/gradient-icon"
+import { SECTION_LEAD, SECTION_TITLE } from "@/components/layout/page"
 import { getProjectResources, resourceDetails } from "@/components/projects/resources"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardTitle } from "@/components/ui/card"
@@ -66,12 +67,8 @@ export default async function ProjectPage({ params }: Props) {
             {project.category in categoryLabels && (
               <p className="typo-label-large text-blue-secondary">{categoryLabels[project.category]}</p>
             )}
-            <h1 className="typo-headline-medium sm:typo-display-medium wrap-anywhere text-balance bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent">
-              {project.title}
-            </h1>
-            <p className="typo-body-large sm:typo-headline-extrasmall wrap-anywhere max-w-200 text-pretty">
-              {project.descriptionIt}
-            </p>
+            <h1 className={cn(SECTION_TITLE, "wrap-anywhere")}>{project.title}</h1>
+            <p className={cn(SECTION_LEAD, "wrap-anywhere max-w-200")}>{project.descriptionIt}</p>
           </div>
         </Glass>
       </section>
@@ -82,13 +79,10 @@ export default async function ProjectPage({ params }: Props) {
           className="mx-auto flex w-full max-w-330 flex-col gap-10 px-6 md:gap-14"
         >
           <div className="flex flex-col gap-4 text-center md:text-start">
-            <h2
-              id="risorse-title"
-              className="typo-headline-medium sm:typo-display-medium text-balance bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent"
-            >
+            <h2 id="risorse-title" className={SECTION_TITLE}>
               Come usarlo
             </h2>
-            <p className="typo-body-large sm:typo-headline-extrasmall text-pretty">
+            <p className={SECTION_LEAD}>
               {resources.length > 1
                 ? "Scegli la versione più adatta a te."
                 : "Apri il progetto e segui le istruzioni per iniziare."}
@@ -143,10 +137,8 @@ export default async function ProjectPage({ params }: Props) {
 
       <section className="mx-auto w-full max-w-330 px-6">
         <Glass className="flex flex-col items-center gap-6 rounded-rectangles border-white/50 bg-linear-to-br from-background-blur to-blue-tertiary/30 p-6 text-center sm:p-12">
-          <h2 className="typo-headline-medium sm:typo-display-medium text-balance bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent">
-            Scopri gli altri progetti
-          </h2>
-          <p className="typo-body-large sm:typo-headline-extrasmall max-w-200 text-balance">
+          <h2 className={SECTION_TITLE}>Scopri gli altri progetti</h2>
+          <p className={cn(SECTION_LEAD, "max-w-200 text-balance")}>
             Strumenti e app realizzati dagli studenti del Politecnico, per gli studenti del Politecnico.
           </p>
           <Button asChild size="lg" className="w-full sm:w-fit">
diff --git a/src/app/storia/page.tsx b/src/app/storia/page.tsx
index dc4fc1cf..9a972cd1 100644
--- a/src/app/storia/page.tsx
+++ b/src/app/storia/page.tsx
@@ -1,8 +1,7 @@
 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 { CONTAINER, SECTION_LEAD, SECTION_TITLE } from "@/components/layout/page"
 import TextOnlyLayout from "@/components/layout/TextOnlySection"
 import { Boards } from "@/components/storia/boards"
 import { Continuation } from "@/components/storia/continuation"
@@ -11,6 +10,7 @@ import { Organization } from "@/components/storia/organization"
 import { HistoryProjects } from "@/components/storia/projects"
 import { Thanks } from "@/components/storia/thanks"
 import { Chapters, Timeline } from "@/components/storia/timeline"
+import { cn } from "@/lib/utils"
 
 export const metadata: Metadata = {
   title: "La nostra storia",
@@ -20,54 +20,35 @@ export const metadata: Metadata = {
 
 export default function HistoryPage() {
   return (
-    <main className="mx-auto flex min-h-screen w-full max-w-700 flex-col gap-24 px-4 pt-44 pb-32 md:gap-32 md:pt-49 md:pb-49">
+    <main className="mx-auto flex min-h-screen w-full flex-col gap-24 pt-44 pb-32 sm:pt-56 md:gap-32 md:pb-48">
       <HistoryHero />
 
-      <div className="flex w-full flex-col gap-24 md:gap-36">
+      <div className="flex w-full flex-col gap-24 md:gap-40">
+        {/* 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. */}
         <TextOnlyLayout
           title="Come è nato tutto"
           description={
             <>
-              <h3 className="typo-headline-medium sm:typo-display-medium text-balance bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent">
-                Una domanda semplice, una grande idea.
-              </h3>
-              <p className="typo-body-large sm:typo-headline-extrasmall mt-3 text-pretty">
+              <h3 className={SECTION_TITLE}>Una domanda semplice, una grande idea.</h3>
+              <p className={cn(SECTION_LEAD, "mt-3")}>
                 Tutto è cominciato nel 2016, quando un futuro studente cercava uno spazio per entrare in contatto con i
                 propri compagni e trovare risposte alle prime domande sulla vita universitaria.
               </p>
-              <p className="typo-body-large sm:typo-headline-extrasmall mt-5 text-pretty">
+              <p className={cn(SECTION_LEAD, "mt-5")}>
                 Da questa esigenza è nato un progetto collettivo, che nel tempo si è trasformato in una{" "}
                 <strong>rete capillare costruita dagli studenti, per gli studenti.</strong>
               </p>
             </>
           }
           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",
           }}
-        >
-          <div className="grid w-full gap-6 sm:grid-cols-2">
-            <CardIcon
-              title="2016"
-              description="Il primo gruppo Telegram"
-              icon={telegram.src}
-              size="compact"
-              align="start"
-              className="h-full"
-            />
-            <CardIcon
-              title="2022"
-              description="Nasce PoliNetwork APS"
-              icon={FiUserCheck}
-              size="compact"
-              align="start"
-              className="h-full"
-            />
-          </div>
-        </TextOnlyLayout>
+        />
         <Timeline />
         <Chapters />
         <Boards />
@@ -78,39 +59,35 @@ export default function HistoryPage() {
           title="Quello che abbiamo fatto di più"
           description={
             <>
-              <h3 className="typo-headline-medium sm:typo-display-medium text-balance bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent">
-                Essere lì quando serve.
-              </h3>
-              <p className="typo-body-large sm:typo-headline-extrasmall mt-3 text-pretty">
+              <h3 className={SECTION_TITLE}>Essere lì quando serve.</h3>
+              <p className={cn(SECTION_LEAD, "mt-3")}>
                 Al di là dei progetti e dei team, PoliNetwork fa una cosa davvero importante: risponde alle domande
                 degli studenti.
               </p>
-              <p className="typo-body-large sm:typo-headline-extrasmall text-pretty">
+              <p className={SECTION_LEAD}>
                 Intorno ai gruppi dei corsi sono nati spazi per tutto ciò che riguarda la vita universitaria: dagli
                 esami ai piani di studio, dalla ricerca casa alla compravendita dei libri, fino al tempo libero.
               </p>
             </>
           }
           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",
           }}
         >
-          <CardCaption
-            title="L’obiettivo è raggiunto."
-            icon={FiMessageCircle}
-            iconPosition="top"
-            caption={
-              <p className="typo-body-large sm:typo-headline-extrasmall text-pretty">
-                Se anche un solo studente ha trovato casa grazie a un nostro gruppo, o si è laureato in tempo perché
-                qualcuno gli ha risposto.
-              </p>
-            }
-            className="h-auto w-full gap-6 p-6 sm:p-10"
-          />
+          <div className="flex flex-col gap-4 border-blue-primary/30 border-l pl-6 sm:pl-10">
+            <GradientIcon icon={FiMessageCircle} className="size-10 sm:size-14" />
+            <p className="typo-headline-small sm:typo-headline-medium text-balance text-blue-secondary">
+              L’obiettivo è raggiunto.
+            </p>
+            <p className={SECTION_LEAD}>
+              Se anche un solo studente ha trovato casa grazie a un nostro gruppo, o si è laureato in tempo perché
+              qualcuno gli ha risposto.
+            </p>
+          </div>
         </TextOnlyLayout>
 
         <Organization />
diff --git a/src/app/team/page.tsx b/src/app/team/page.tsx
index df966574..5489f290 100644
--- a/src/app/team/page.tsx
+++ b/src/app/team/page.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next"
 import { FiUsers } from "react-icons/fi"
-import { Glass } from "@/components/glass"
+import { ClosingCta } from "@/components/layout/closing-cta"
+import { CONTAINER } from "@/components/layout/page"
 import { applicationHref, teams } from "@/components/team/constants"
 import { TeamSection } from "@/components/team/team-section"
 import { Button } from "@/components/ui/button"
@@ -13,34 +14,28 @@ export const metadata: Metadata = {
 
 export default function TeamPage() {
   return (
-    <main className="flex w-full flex-col gap-24 pb-24 md:gap-36 md:pb-36">
-      <section className="mx-auto flex w-full max-w-330 flex-col items-center gap-6 px-6 pt-52 md:pt-64">
+    <main className="flex w-full flex-col gap-24 pb-24 md:gap-36 md:pb-36 xl:gap-48">
+      <section className={`${CONTAINER} pt-52 md:pt-57.5`}>
         <Hero
           title="I Team"
           description="PoliNetwork si muove grazie a quattro anime operative distinte, guidate dai rispettivi Capi Dipartimento."
           gradientDescription
         />
       </section>
-      {teams.map((team) => (
-        <TeamSection key={team.id} team={team} />
+      {teams.map((team, index) => (
+        <TeamSection key={team.id} team={team} reverse={index % 2 === 1} />
       ))}
-      <section className="mx-auto w-full max-w-330 px-6">
-        <Glass className="flex flex-col items-center gap-6 rounded-rectangles border-white/50 bg-linear-to-br from-background-blur to-blue-tertiary/30 p-6 text-center sm:p-12">
-          <h2 className="typo-headline-medium sm:typo-display-medium text-balance bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent">
-            Vuoi fare la differenza?
-          </h2>
-          <p className="typo-body-large sm:typo-headline-extrasmall max-w-200 text-balance">
-            Le porte di PoliNetwork sono aperte a tutti gli studenti del Politecnico di Milano. Segui i nostri social
-            per non perdere i periodi di recruiting ufficiali… ma se hai talento e motivazione, non aspettare: valutiamo
-            le candidature spontanee tutto l’anno.
-          </p>
+      <ClosingCta
+        title="Vuoi fare la differenza?"
+        lead="Le porte di PoliNetwork sono aperte a tutti gli studenti del Politecnico di Milano. Segui i nostri social per non perdere i periodi di recruiting ufficiali… ma se hai talento e motivazione, non aspettare: valutiamo le candidature spontanee tutto l’anno."
+        action={
           <Button asChild size="lg">
             <a href={applicationHref()}>
               Unisciti a noi <FiUsers aria-hidden />
             </a>
           </Button>
-        </Glass>
-      </section>
+        }
+      />
     </main>
   )
 }
diff --git a/src/components/chi-siamo/answer-section.tsx b/src/components/chi-siamo/answer-section.tsx
index 0e718fc6..45ffdb98 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 "@/components/layout/page"
 
 const cards = [
   {
@@ -23,12 +24,10 @@ const cards = [
 
 export function AnswerSection() {
   return (
-    <section id="cosa-facciamo" className="mx-auto flex w-full max-w-330 scroll-mt-32 flex-col gap-10 px-6 md:gap-14">
+    <section className={`${CONTAINER} flex flex-col gap-10 md:gap-14`}>
       <div className="flex flex-col gap-4">
-        <h2 className="typo-headline-medium md:typo-display-medium bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent">
-          La nostra risposta
-        </h2>
-        <p className="typo-body-large sm:typo-headline-extrasmall max-w-200 text-pretty">
+        <h2 className={SECTION_TITLE}>La nostra risposta</h2>
+        <p className={`${SECTION_LEAD} max-w-200`}>
           Costruiamo e manteniamo la rete di comunicazione studentesca del Politecnico di Milano.
         </p>
       </div>
@@ -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"
           />
         ))}
       </div>
diff --git a/src/components/chi-siamo/history-section.tsx b/src/components/chi-siamo/history-section.tsx
index 4a2fbf46..0ccd9923 100644
--- a/src/components/chi-siamo/history-section.tsx
+++ b/src/components/chi-siamo/history-section.tsx
@@ -1,20 +1,17 @@
 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 { CONTAINER, SECTION_TITLE } from "@/components/layout/page"
 import { Button } from "@/components/ui/button"
 
 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",
@@ -23,21 +20,18 @@ const blocks = [
 
 export function HistorySection() {
   return (
-    <section className="mx-auto grid w-full max-w-330 gap-6 px-6 md:grid-cols-2">
+    <section className={`${CONTAINER} grid gap-16 md:grid-cols-2 md:gap-10 lg:gap-16`}>
       {blocks.map((block) => (
-        <Glass key={block.title} className="flex flex-col items-start gap-6 rounded-rectangles p-6 sm:p-8">
-          <GradientIcon icon={block.icon} className="size-10" />
-          <h2 className="typo-headline-medium text-balance bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent">
-            {block.title}
-          </h2>
-          <p className="typo-body-large text-pretty">{block.description}</p>
+        <div key={block.title} className="flex flex-col items-start gap-5">
+          <h2 className={SECTION_TITLE}>{block.title}</h2>
+          <p className="typo-body-large max-w-120 text-pretty">{block.description}</p>
           <Button variant="primary" size="lg" className="mt-auto w-fit" asChild>
-            <Link href={block.href} className="flex items-center gap-2">
+            <Link href={block.href}>
               {block.cta}
               <FiArrowUpRight aria-hidden />
             </Link>
           </Button>
-        </Glass>
+        </div>
       ))}
     </section>
   )
diff --git a/src/components/chi-siamo/numbers-section.tsx b/src/components/chi-siamo/numbers-section.tsx
index 947591b0..4baa82a4 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 { CONTAINER, SECTION_LEAD, SECTION_TITLE } from "@/components/layout/page"
+import { Card } from "@/components/ui/card"
 
 const stats = [
   { value: "500+", label: "gruppi Telegram e WhatsApp attivi", icon: FiSend },
@@ -13,35 +14,30 @@ const stats = [
 
 export function NumbersSection() {
   return (
-    <section className="mx-auto flex w-full max-w-330 flex-col gap-10 px-6 md:gap-14">
+    <section className={`${CONTAINER} flex flex-col gap-10 md:gap-14`}>
       <div className="flex flex-col gap-4">
-        <h2 className="typo-headline-medium md:typo-display-medium bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent">
-          I numeri
-        </h2>
-        <p className="typo-body-large sm:typo-headline-extrasmall max-w-160 text-pretty">
+        <h2 className={SECTION_TITLE}>I numeri</h2>
+        <p className={`${SECTION_LEAD} max-w-160`}>
           Un network in continua crescita, costruito dagli studenti, per gli studenti.
         </p>
       </div>
 
       <div className="flex flex-col gap-8">
-        <div className="grid gap-6 sm:grid-cols-2 xl:grid-cols-3">
+        <ul className="grid gap-4 sm:grid-cols-2 sm:gap-6 xl:grid-cols-3">
           {stats.map((stat) => (
-            <Card key={stat.label} className="h-auto w-full gap-4 p-6 sm:p-8">
-              <CardHeader className="flex flex-row items-center justify-between gap-4">
-                <CardTitle
-                  gradient={false}
-                  className="typo-display-small sm:typo-display-medium text-blue-secondary tabular-nums"
-                >
-                  {stat.value}
-                </CardTitle>
-                <GradientIcon icon={stat.icon} className="size-8 shrink-0" />
-              </CardHeader>
-              <CardContent className="typo-body-large text-pretty">{stat.label}</CardContent>
-            </Card>
+            <li key={stat.label}>
+              <Card className="h-full w-full flex-row items-center gap-5 p-6">
+                <GradientIcon icon={stat.icon} className="size-10 shrink-0" />
+                <div className="flex min-w-0 flex-col gap-1">
+                  <p className="typo-headline-large text-blue-secondary tabular-nums">{stat.value}</p>
+                  <p className="typo-body-large text-pretty">{stat.label}</p>
+                </div>
+              </Card>
+            </li>
           ))}
-        </div>
+        </ul>
 
-        <p className="typo-body-large text-center">
+        <p className="typo-body-large lg:text-center">
           Dal <span className="text-blue-secondary">2016</span> al fianco degli studenti del PoliMi
         </p>
       </div>
diff --git a/src/components/chi-siamo/path-section.tsx b/src/components/chi-siamo/path-section.tsx
index 2b835347..263f4880 100644
--- a/src/components/chi-siamo/path-section.tsx
+++ b/src/components/chi-siamo/path-section.tsx
@@ -1,6 +1,7 @@
 import { FiBook, FiClipboard, FiFileText, FiGift, FiUser, FiUserCheck } from "react-icons/fi"
 import { Glass } from "@/components/glass"
 import { GradientIcon } from "@/components/gradient-icon"
+import { CONTAINER, SECTION_LEAD, SECTION_TITLE } from "@/components/layout/page"
 import { cn } from "@/lib/utils"
 
 const steps = [
@@ -18,10 +19,8 @@ const steps = [
 
 export function PathSection() {
   return (
-    <section className="mx-auto flex w-full max-w-330 flex-col gap-10 px-6 md:gap-14">
-      <h2 className="typo-headline-medium md:typo-display-medium text-balance bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-center text-transparent md:text-start">
-        Il tuo percorso, sempre al tuo fianco
-      </h2>
+    <section className={`${CONTAINER} flex flex-col gap-10 md:gap-14`}>
+      <h2 className={SECTION_TITLE}>Il tuo percorso, sempre al tuo fianco</h2>
 
       <ol className="grid gap-10 lg:grid-cols-6 lg:gap-6">
         {steps.map((step, index) => (
@@ -46,7 +45,7 @@ export function PathSection() {
         ))}
       </ol>
 
-      <p className="typo-body-large sm:typo-headline-extrasmall mx-auto max-w-215 text-balance text-center">
+      <p className={`${SECTION_LEAD} max-w-215 lg:mx-auto lg:text-balance lg:text-center`}>
         Dalla prima simulazione del TOL fino alla laurea, ogni studente ha sempre{" "}
         <span className="text-blue-secondary">una risposta</span> a portata di mano e{" "}
         <span className="text-blue-secondary">qualcuno</span> a cui chiederla.
diff --git a/src/components/chi-siamo/problem-section.tsx b/src/components/chi-siamo/problem-section.tsx
index d2bb57df..f1cd07e8 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 "@/components/layout/page"
 
 const questions = [
   { text: "Dove trovo il gruppo del mio corso?", icon: FiUsers },
@@ -9,23 +10,22 @@ const questions = [
 
 export function ProblemSection() {
   return (
-    <section className="mx-auto grid w-full max-w-330 items-center gap-10 px-6 lg:grid-cols-2 lg:gap-16">
+    <section className={`${CONTAINER} grid items-center gap-10 lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)] lg:gap-16`}>
       <div className="flex min-w-0 flex-col gap-6">
-        <h2 className="typo-headline-medium sm:typo-display-medium text-balance bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent">
-          Il problema
-        </h2>
-        <p className="typo-body-large sm:typo-headline-extrasmall text-pretty">
-          Il PoliMi è complesso. Le informazioni non dovrebbero esserlo.
-        </p>
+        <h2 className={SECTION_TITLE}>Il problema</h2>
+        <p className={SECTION_LEAD}>Il PoliMi è complesso. Le informazioni non dovrebbero esserlo.</p>
       </div>
-      <div className="grid min-w-0 gap-4">
+      <ul className="grid min-w-0 justify-items-start gap-3">
         {questions.map((question) => (
-          <Card key={question.text} className="h-auto w-full flex-row items-center justify-between gap-6 p-6">
-            <CardContent className="typo-body-large text-pretty">{question.text}</CardContent>
-            <CardAction icon={question.icon} className="shrink-0" />
-          </Card>
+          <li
+            key={question.text}
+            className="flex items-center gap-4 rounded-rectangles border border-white/50 bg-background-blur px-5 py-4 backdrop-blur-md"
+          >
+            <GradientIcon icon={question.icon} className="size-6 shrink-0" />
+            <span className="typo-body-large text-pretty">{question.text}</span>
+          </li>
         ))}
-      </div>
+      </ul>
     </section>
   )
 }
diff --git a/src/components/chi-siamo/support-section.tsx b/src/components/chi-siamo/support-section.tsx
index 8f3493ca..506a90fd 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 "@/components/layout/page"
 
 export function SupportSection() {
   return (
-    <section className="mx-auto w-full max-w-330 px-6">
-      <Glass className="grid items-center gap-10 rounded-rectangles border-white/50 bg-background-blur p-6 sm:p-10 lg:grid-cols-2 lg:gap-16">
-        <div className="flex min-w-0 flex-col gap-6">
-          <GradientIcon icon={FiHeart} className="size-10" />
-          <h2 className="typo-headline-medium sm:typo-display-medium text-balance">Sostieni PoliNetwork</h2>
-          <p className="typo-body-large text-pretty">
-            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.
-          </p>
-        </div>
-        <Glass className="flex min-w-0 flex-col gap-5 rounded-rectangles bg-background p-6 sm:p-8">
-          <p className="typo-display-medium sm:typo-display-large text-blue-secondary">5x1000</p>
-          <h3 className="typo-title-large text-balance">Il tuo sostegno può fare la differenza</h3>
-          <p className="typo-body-large text-pretty">
-            Nella sezione dedicata agli Enti del Terzo Settore, indica il nostro codice fiscale:
-          </p>
-          <p className="typo-title-large sm:typo-display-small whitespace-nowrap text-blue-secondary tabular-nums">
-            97927490157
-          </p>
-        </Glass>
-      </Glass>
+    <section className={`${CONTAINER} grid gap-10 lg:grid-cols-2 lg:gap-16`}>
+      <div className="flex min-w-0 flex-col gap-6">
+        <h2 className={SECTION_TITLE}>Sostieni PoliNetwork</h2>
+        <p className="typo-body-large max-w-140 text-pretty">
+          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.
+        </p>
+      </div>
+      <div className="flex min-w-0 flex-col gap-4 lg:pt-3">
+        <h3 className="typo-headline-medium text-balance">
+          Il tuo <span className="text-blue-secondary">5x1000</span> può fare la differenza
+        </h3>
+        <p className="typo-body-large max-w-120 text-pretty">
+          Nella sezione dedicata agli Enti del Terzo Settore, indica il nostro codice fiscale:
+        </p>
+        <p className="typo-headline-small text-blue-secondary tabular-nums tracking-wide">97927490157</p>
+      </div>
     </section>
   )
 }
diff --git a/src/components/chi-siamo/vision-section.tsx b/src/components/chi-siamo/vision-section.tsx
index ec6ba6d9..b95392ff 100644
--- a/src/components/chi-siamo/vision-section.tsx
+++ b/src/components/chi-siamo/vision-section.tsx
@@ -1,29 +1,17 @@
-import Link from "next/link"
-import { FiArrowDown, FiArrowUpRight } from "react-icons/fi"
-import { Button } from "@/components/ui/button"
+import { CONTAINER, SECTION_LEAD } from "@/components/layout/page"
+import { cn } from "@/lib/utils"
 
 export function VisionSection() {
   return (
-    <section className="mx-auto flex w-full max-w-330 flex-col items-center gap-6 px-6 pt-52 text-center md:pt-57.5">
+    <section className={`${CONTAINER} flex flex-col items-center gap-6 text-center`}>
+      <p className="typo-title-large text-blue-secondary">La nostra visione</p>
       <h1 className="typo-display-small sm:typo-display-medium lg:typo-display-large max-w-260 text-balance bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent">
         Un Politecnico in cui nessuno studente resti indietro per mancanza di{" "}
         <span className="text-blue-secondary">informazioni.</span>
       </h1>
-      <p className="typo-body-large sm:typo-headline-extrasmall max-w-180 text-balance">
+      <p className={cn(SECTION_LEAD, "max-w-180 text-balance")}>
         Rendiamo le informazioni sul PoliMi più accessibili, comprensibili e facili da trovare.
       </p>
-      <div className="mt-2 flex flex-wrap justify-center gap-3">
-        <Button asChild size="lg">
-          <Link href="#cosa-facciamo">
-            Scopri cosa facciamo <FiArrowDown aria-hidden />
-          </Link>
-        </Button>
-        <Button asChild size="lg" variant="glass">
-          <Link href="/collabora">
-            Entra nel network <FiArrowUpRight aria-hidden />
-          </Link>
-        </Button>
-      </div>
     </section>
   )
 }
diff --git a/src/components/home/materials.tsx b/src/components/home/materials.tsx
index 199c96f5..fff6659b 100644
--- a/src/components/home/materials.tsx
+++ b/src/components/home/materials.tsx
@@ -2,7 +2,9 @@ import Link from "next/link"
 import { Fragment } from "react"
 import { FiArrowUpRight, FiBook, FiBookOpen, FiClipboard, FiFileText, FiUploadCloud } from "react-icons/fi"
 import { CardIcon } from "@/components/card-icon"
+import { CONTAINER } from "@/components/layout/page"
 import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
 import { CardCaption } from "../card-caption"
 
 const MATERIALS_URL = "https://polinetwork.org/it/materials/view/"
@@ -33,7 +35,12 @@ const archiveTypes = [
 
 export function Materials() {
   return (
-    <section className="mx-auto grid w-full max-w-384 grid-cols-1 gap-y-6 px-6 py-20 sm:gap-y-8 sm:px-10 sm:py-24 lg:px-16 xl:grid-cols-[minmax(0,7fr)_minmax(0,5fr)] xl:gap-x-16 xl:gap-y-10 xl:py-32">
+    <section
+      className={cn(
+        CONTAINER,
+        "grid grid-cols-1 gap-y-6 py-20 sm:gap-y-8 sm:py-24 xl:grid-cols-[minmax(0,7fr)_minmax(0,5fr)] xl:gap-x-16 xl:gap-y-10 xl:py-32"
+      )}
+    >
       <h2 className="typo-display-fluid-extralarge bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-center text-transparent xl:col-start-2 xl:text-start">
         Materials
       </h2>
diff --git a/src/components/home/projects.tsx b/src/components/home/projects.tsx
index 4d67233f..d0078106 100644
--- a/src/components/home/projects.tsx
+++ b/src/components/home/projects.tsx
@@ -1,7 +1,9 @@
 import Link from "next/link"
 import { FiArrowUpRight } from "react-icons/fi"
 import { CardCaption } from "@/components/card-caption"
+import { CONTAINER } from "@/components/layout/page"
 import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
 import { Carousel, CarouselContent, CarouselDots, CarouselItem } from "../ui/carousel"
 
 const featuredCards = [
@@ -47,7 +49,12 @@ function ProjectCard({ className, ...card }: (typeof featuredCards)[number] & {
 
 export function Projects() {
   return (
-    <section className="mx-auto grid w-full max-w-384 grid-cols-1 gap-y-6 px-6 py-20 sm:gap-y-8 sm:px-10 sm:py-24 lg:px-16 xl:grid-cols-[minmax(0,5fr)_minmax(0,7fr)] xl:gap-x-16 xl:gap-y-10 xl:py-32">
+    <section
+      className={cn(
+        CONTAINER,
+        "grid grid-cols-1 gap-y-6 py-20 sm:gap-y-8 sm:py-24 xl:grid-cols-[minmax(0,5fr)_minmax(0,7fr)] xl:gap-x-16 xl:gap-y-10 xl:py-32"
+      )}
+    >
       <h2 className="typo-display-fluid-extralarge bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-center text-transparent xl:col-span-2 xl:text-start">
         15+ Projects
       </h2>
diff --git a/src/components/join/admin.tsx b/src/components/join/admin.tsx
index a41f66c4..cf27b697 100644
--- a/src/components/join/admin.tsx
+++ b/src/components/join/admin.tsx
@@ -3,6 +3,8 @@ import connectorFirst from "@/assets/icons/join/connector-first.svg"
 import connectorSecond from "@/assets/icons/join/connector-second.svg"
 import { InfoCard } from "@/components/collabora/info-card"
 import { Highlight, SectionTitle } from "@/components/collabora/section"
+import { SECTION_LEAD } from "@/components/layout/page"
+import { cn } from "@/lib/utils"
 import { JoinCards } from "./cards"
 import { adminCards, adminSteps } from "./constants"
 
@@ -14,7 +16,7 @@ export function AdminSection() {
       <div className="grid min-w-0 items-start gap-10 xl:grid-cols-2 xl:gap-16">
         <div className="flex min-w-0 flex-col gap-6 text-center md:text-start">
           <SectionTitle>Diventa Admin</SectionTitle>
-          <div className="typo-body-large sm:typo-headline-extrasmall flex flex-col gap-5 text-pretty">
+          <div className={cn(SECTION_LEAD, "flex flex-col gap-5")}>
             <p>Un admin è la presenza di PoliNetwork nei gruppi ogni giorno.</p>
             <p>
               Non servono competenze specifiche ma solamente{" "}
diff --git a/src/components/join/introduction.tsx b/src/components/join/introduction.tsx
index c464bcec..e49057a4 100644
--- a/src/components/join/introduction.tsx
+++ b/src/components/join/introduction.tsx
@@ -3,6 +3,8 @@ import { FiMessageCircle, FiUserCheck, FiUsers } from "react-icons/fi"
 import networkLogo from "@/assets/images/join/network-logo.png"
 import { CardIcon } from "@/components/card-icon"
 import { Highlight, SectionTitle } from "@/components/collabora/section"
+import { SECTION_LEAD } from "@/components/layout/page"
+import { cn } from "@/lib/utils"
 
 const paths = [
   { title: "Diventa Admin", icon: FiMessageCircle, href: "#admin" },
@@ -15,7 +17,7 @@ export function Introduction() {
     <section className="mx-auto grid w-full max-w-330 items-center gap-x-16 gap-y-10 px-6 xl:grid-cols-[minmax(0,3fr)_minmax(0,1fr)]">
       <div className="flex min-w-0 flex-col gap-6 text-center md:text-start">
         <SectionTitle>Cosa significa far parte di PoliNetwork</SectionTitle>
-        <div className="typo-body-large sm:typo-headline-extrasmall flex flex-col gap-5 text-pretty">
+        <div className={cn(SECTION_LEAD, "flex flex-col gap-5")}>
           <p>
             PoliNetwork è gestita interamente da <Highlight>studenti del Politecnico di Milano</Highlight>.
           </p>
diff --git a/src/components/join/membership.tsx b/src/components/join/membership.tsx
index 0d7a82ee..ecec0b21 100644
--- a/src/components/join/membership.tsx
+++ b/src/components/join/membership.tsx
@@ -2,6 +2,7 @@ import Image from "next/image"
 import externalLink from "@/assets/icons/join/external-link.svg"
 import membersPhoto from "@/assets/images/join/members.webp"
 import { Highlight, SectionTitle } from "@/components/collabora/section"
+import { SECTION_LEAD } from "@/components/layout/page"
 import { PhotoShapes } from "@/components/shapes"
 import { cn } from "@/lib/utils"
 import { membershipSteps } from "./constants"
@@ -17,7 +18,7 @@ export function MembershipSection() {
           <span className="md:hidden">Diventa Socio</span>
           <span className="hidden md:inline">Diventa Socio di PoliNetwork</span>
         </SectionTitle>
-        <div className="typo-body-large sm:typo-headline-extrasmall flex flex-col gap-5 text-pretty">
+        <div className={cn(SECTION_LEAD, "flex flex-col gap-5")}>
           <p>
             Il tesseramento è il modo per fare parte di PoliNetwork in modo formale, con{" "}
             <Highlight>diritto di voto</Highlight> nelle Assemblee dei Soci, di candidarsi alle elezioni del direttivo e{" "}
diff --git a/src/components/join/teams.tsx b/src/components/join/teams.tsx
index 82dbb24f..964b9659 100644
--- a/src/components/join/teams.tsx
+++ b/src/components/join/teams.tsx
@@ -1,7 +1,9 @@
 import Link from "next/link"
 import { FiArrowUpRight } from "react-icons/fi"
 import { Highlight, SectionTitle } from "@/components/collabora/section"
+import { SECTION_LEAD } from "@/components/layout/page"
 import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
 import { JoinCards } from "./cards"
 import { teamCards } from "./constants"
 
@@ -13,7 +15,7 @@ export function TeamsSection() {
     >
       <div className="flex min-w-0 flex-col items-center gap-6 text-center md:items-start md:text-start">
         <SectionTitle>Entra in un Team</SectionTitle>
-        <div className="typo-body-large sm:typo-headline-extrasmall flex flex-col gap-5 text-pretty">
+        <div className={cn(SECTION_LEAD, "flex flex-col gap-5")}>
           <p>
             Entrare in un team significa avere un <Highlight>ruolo operativo con deliverable reali</Highlight>, non
             essere osservatori di un progetto altrui.
diff --git a/src/components/layout/TextOnlySection.tsx b/src/components/layout/TextOnlySection.tsx
index da6cbbd8..0cd50606 100644
--- a/src/components/layout/TextOnlySection.tsx
+++ b/src/components/layout/TextOnlySection.tsx
@@ -60,7 +60,7 @@ export default function TextOnlyLayout({
   return (
     <section
       className={cn(
-        "flex w-full flex-col items-center gap-8 px-6 md:px-36 min-[1616px]:flex-row min-[1616px]:items-start",
+        "flex w-full flex-col items-center gap-8 min-[1616px]:flex-row min-[1616px]:items-start",
         classNames.section
       )}
     >
diff --git a/src/components/layout/closing-cta.tsx b/src/components/layout/closing-cta.tsx
new file mode 100644
index 00000000..34ca9cbe
--- /dev/null
+++ b/src/components/layout/closing-cta.tsx
@@ -0,0 +1,14 @@
+import type { ReactNode } from "react"
+import { CONTAINER, SECTION_LEAD, SECTION_TITLE } from "@/components/layout/page"
+import { cn } from "@/lib/utils"
+
+/** The centred call to action that closes a page: title, a short lead and one button. */
+export function ClosingCta({ title, lead, action }: { title: ReactNode; lead: ReactNode; action: ReactNode }) {
+  return (
+    <section className={cn(CONTAINER, "flex flex-col items-center gap-8 py-10 text-center md:py-16")}>
+      <h2 className={cn(SECTION_TITLE, "max-w-200 from-blue-secondary to-blue-primary")}>{title}</h2>
+      <p className={cn(SECTION_LEAD, "max-w-200 text-balance")}>{lead}</p>
+      {action}
+    </section>
+  )
+}
diff --git a/src/components/layout/page.ts b/src/components/layout/page.ts
new file mode 100644
index 00000000..1070c10c
--- /dev/null
+++ b/src/components/layout/page.ts
@@ -0,0 +1,8 @@
+/** Content column of the redesigned pages: Figma's ~1272px column with the homepage's 24/40/64px gutters. */
+export const CONTAINER = "mx-auto w-full max-w-350 px-6 sm:px-10 lg:px-16"
+
+/** Section title in the grey gradient. Closing statements (`ClosingCta`) switch it to blue. */
+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/storia/boards.tsx b/src/components/storia/boards.tsx
index 1beca4d5..f3b6bc17 100644
--- a/src/components/storia/boards.tsx
+++ b/src/components/storia/boards.tsx
@@ -1,21 +1,17 @@
 "use client"
 
-import Image from "next/image"
-import { Glass } from "@/components/glass"
+import { CONTAINER, SECTION_TITLE } from "@/components/layout/page"
+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"
 
 export function Boards() {
   return (
-    <section id="direttivi" className="mx-auto flex w-full max-w-330 scroll-mt-36 flex-col gap-6 px-6">
+    <section id="direttivi" className={`${CONTAINER} flex scroll-mt-36 flex-col gap-6`}>
       <h2 className="typo-title-large text-blue-secondary">I nostri direttivi</h2>
-      <p className="typo-headline-medium sm:typo-display-medium text-balance bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent">
-        Ogni mandato, un nuovo capitolo
-      </p>
+      <p className={SECTION_TITLE}>Ogni mandato, un nuovo capitolo</p>
       <Tabs defaultValue="2024-OGGI" className="mt-2 gap-12">
         <TabsNavigation items={boardTerms.map((term) => ({ value: term, label: term }))} />
         {boardTerms.map((term) => (
@@ -25,39 +21,26 @@ export function Boards() {
                 <div className="flex flex-col items-center gap-8">
                   <div className="flex w-full flex-wrap justify-center gap-6">
                     {boardMembers.map((member) => (
-                      <Card
+                      <BoardMemberCard
                         key={member.name}
-                        className="motion-safe:hover:-translate-y-1 relative aspect-[223.429/263] h-auto w-full max-w-56 rounded-rectangles border-white/50 p-0 shadow-sm transition-transform sm:w-[calc((100%-48px)/3)] xl:w-[calc((100%-72px)/4)] min-[360px]:w-[calc((100%-24px)/2)]"
-                      >
-                        <Image
-                          src={member.image}
-                          alt={member.name}
-                          sizes="(max-width: 639px) 45vw, (max-width: 1279px) 30vw, 224px"
-                          className={cn("absolute max-w-none", member.crop)}
-                        />
-                        <div
-                          aria-hidden
-                          className="absolute inset-0 bg-linear-to-t from-5% from-blue-secondary/70 to-60% to-transparent"
-                        />
-                        <CardContent className="absolute inset-x-4 bottom-5 text-white">
-                          <h3 className="typo-body-large font-poppins">{member.name}</h3>
-                          {member.role && <p className="typo-body-small">{member.role}</p>}
-                        </CardContent>
-                      </Card>
+                        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)]"
+                      />
                     ))}
                   </div>
                   <p className="typo-label-large max-w-145 text-center text-text-secondary">
                     Il Direttivo viene eletto ogni due anni dall’Assemblea dei Soci tra i soci dell’associazione.
                   </p>
                 </div>
-                <Glass className="order-first flex flex-col gap-4 rounded-rectangles border-white/50 bg-background-blur p-6 xl:order-last">
+                <div className="order-first flex flex-col gap-4 xl:order-last xl:pt-2">
                   <p className="typo-label-large text-blue-secondary">{term}</p>
                   <h3 className="typo-display-small text-balance">Il Direttivo</h3>
                   <p className="typo-body-large text-pretty">
                     Si concentra sul rafforzamento della struttura, sull’evoluzione dei servizi e sullo sviluppo di
                     nuovi progetti per la community.
                   </p>
-                </Glass>
+                </div>
               </div>
             ) : (
               <div className="flex min-h-70 flex-col items-center justify-center gap-4 text-center">
diff --git a/src/components/storia/constants.ts b/src/components/storia/constants.ts
index 78b1325d..dae96aad 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"
@@ -10,19 +12,27 @@ import tommaso from "@/assets/images/storia/tommaso-morganti.jpg"
 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..a4cd0d18 100644
--- a/src/components/storia/continuation.tsx
+++ b/src/components/storia/continuation.tsx
@@ -1,53 +1,57 @@
 import Link from "next/link"
 import { FiArrowUpRight } from "react-icons/fi"
-import { Glass } from "@/components/glass"
+import { CONTAINER, SECTION_LEAD, SECTION_TITLE } from "@/components/layout/page"
 import { Button } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
 
+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 (
-    <section className="mx-auto w-full max-w-330 px-6" aria-labelledby="continua-title">
-      <Glass className="grid items-center gap-10 rounded-rectangles border-white/50 bg-linear-to-br from-background-blur to-blue-tertiary/30 p-6 sm:p-12 lg:grid-cols-2 lg:gap-16">
-        <div className="flex min-w-0 flex-col items-start gap-6">
-          <h2
-            id="continua-title"
-            className="typo-headline-medium sm:typo-display-medium text-balance bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent"
-          >
-            La storia continua.
-          </h2>
-          <p className="typo-body-large sm:typo-headline-extrasmall text-pretty">
-            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.
-          </p>
-          <Button asChild size="lg">
-            <Link href="/collabora">
-              Unisciti a noi <FiArrowUpRight aria-hidden />
-            </Link>
-          </Button>
-        </div>
-        <div className="flex min-w-0 flex-col gap-6">
-          <ol className="grid grid-cols-4 gap-3" aria-label="Dal primo gruppo al prossimo capitolo">
-            {["2016", "2022", "2026", "?"].map((year) => (
-              <li key={year} className="min-w-0">
-                <Glass
-                  className={cn(
-                    "typo-body-medium sm:typo-headline-small flex h-14 items-center justify-center rounded-rectangles border-white/50 p-0 sm:h-18",
-                    year === "?"
-                      ? "bg-button-primary text-text-accent-lightbg"
-                      : "bg-background-blur text-blue-secondary"
-                  )}
-                >
-                  {year}
-                </Glass>
-              </li>
-            ))}
-          </ol>
-          <p className="typo-body-large text-pretty text-text-secondary">Nuove persone, nuove idee, nuovi progetti.</p>
-          <p className="typo-title-large sm:typo-headline-medium text-balance text-blue-secondary">
-            Il prossimo capitolo lo scriviamo insieme.
-          </p>
-        </div>
-      </Glass>
+    <section
+      className={`${CONTAINER} grid items-center gap-12 xl:grid-cols-2 xl:gap-16`}
+      aria-labelledby="continua-title"
+    >
+      <div className="flex min-w-0 flex-col items-start gap-6">
+        <h2 id="continua-title" className={SECTION_TITLE}>
+          La storia continua.
+        </h2>
+        <p className={cn(SECTION_LEAD, "max-w-145")}>
+          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.
+        </p>
+      </div>
+
+      <div className="flex min-w-0 flex-col items-start gap-8 xl:items-center">
+        <ol className="flex w-full max-w-120 items-center" aria-label="Dal primo gruppo al prossimo capitolo">
+          {years.map((year, index) => (
+            <li key={year} className={cn("flex items-center", index > 0 && "flex-1")}>
+              {index > 0 && <span aria-hidden className="mx-2 h-px flex-1 bg-blue-primary/40 sm:mx-3" />}
+              <span
+                className={cn(
+                  "typo-title-medium sm:typo-headline-small flex h-12 min-w-14 items-center justify-center rounded-rectangles border px-3 sm:h-16 sm:min-w-20",
+                  year === "?"
+                    ? "border-blue-primary/60 border-dashed text-blue-secondary"
+                    : "border-white/50 bg-background-blur text-blue-secondary"
+                )}
+              >
+                {year}
+              </span>
+            </li>
+          ))}
+        </ol>
+        <p className="typo-title-large sm:typo-headline-medium text-balance text-blue-secondary xl:text-center">
+          Il prossimo capitolo lo scriviamo insieme.
+        </p>
+        <Button asChild size="lg">
+          <Link href="/collabora">
+            Unisciti a noi <FiArrowUpRight aria-hidden />
+          </Link>
+        </Button>
+      </div>
     </section>
   )
 }
diff --git a/src/components/storia/hero.tsx b/src/components/storia/hero.tsx
index 6c260137..b13235ee 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 { CONTAINER } from "@/components/layout/page"
 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" },
-]
 
+// Figma: a centred XL title and nothing else. The board portraits appear further down, under "I nostri direttivi".
 export function HistoryHero() {
   return (
-    <section className="mx-auto grid w-full max-w-330 items-center gap-12 px-6 xl:grid-cols-2 xl:gap-16">
-      <div className="flex min-w-0 flex-col items-center gap-6 xl:items-start">
-        <Hero
-          title="La nostra storia"
-          description="Da un gruppo Telegram a una rete costruita dagli studenti, per gli studenti."
-          gradientDescription
-          className="lg:[&_h2]:typo-display-extralarge [&_h2]:typo-display-large w-full xl:items-start [&_h2]:py-0 xl:[&_h2]:text-start [&_p]:max-w-145 [&_p]:text-balance xl:[&_p]:text-start"
-        />
-        <div className="flex flex-wrap justify-center gap-3 xl:justify-start">
-          <Button asChild size="lg">
-            <Link href="#capitoli">
-              Leggi la nostra storia <FiArrowDown aria-hidden />
-            </Link>
-          </Button>
-          <Button asChild size="lg" variant="glass">
-            <Link href="#direttivi">
-              Conosci le persone <FiArrowDown aria-hidden />
-            </Link>
-          </Button>
-        </div>
-      </div>
-      <div className="relative mx-auto w-full max-w-140">
-        <div className="relative aspect-square w-full sm:aspect-4/3">
-          {portraits.map(({ member, position }) => (
-            <Card
-              key={member.name}
-              className={cn(
-                "absolute aspect-[223.429/263] h-auto w-2/5 rounded-rectangles border-white/50 p-0 shadow-lg",
-                position
-              )}
-            >
-              <Image
-                src={member.image}
-                alt={member.name}
-                sizes="(max-width: 639px) 40vw, 224px"
-                className={cn("absolute max-w-none", member.crop)}
-              />
-              <div className="absolute inset-0 bg-linear-to-t from-blue-secondary/80 to-60% to-transparent" />
-              <CardContent className="typo-label-tiny sm:typo-label-medium absolute inset-x-3 bottom-4 whitespace-nowrap text-center text-white sm:inset-x-4 sm:bottom-6">
-                {member.role}
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-        <Glass className="-translate-x-1/2 absolute bottom-0 left-1/2 z-20 flex w-max max-w-full items-center gap-4 rounded-rectangles border-white/50 bg-background-blur px-6 py-4 shadow-sm">
-          <GradientIcon icon={FiUsers} className="size-10 shrink-0" />
-          <div>
-            <p className="typo-headline-small text-blue-secondary">200+</p>
-            <p className="typo-body-medium">admin volontari, oggi</p>
-          </div>
-        </Glass>
+    <section className={`${CONTAINER} flex flex-col items-center gap-10`}>
+      <Hero
+        title="La nostra storia"
+        description="Da un gruppo Telegram a una rete costruita dagli studenti, per gli studenti."
+        gradientDescription
+        className="[&_h2]:typo-display-fluid-extralarge [&_h2]:py-0 [&_p]:max-w-145 [&_p]:text-balance"
+      />
+      <div className="flex flex-wrap justify-center gap-3">
+        <Button asChild size="lg">
+          <Link href="#capitoli">
+            Leggi la nostra storia <FiArrowDown aria-hidden />
+          </Link>
+        </Button>
+        <Button asChild size="lg" variant="glass">
+          <Link href="#direttivi">
+            Conosci le persone <FiArrowDown aria-hidden />
+          </Link>
+        </Button>
       </div>
     </section>
   )
diff --git a/src/components/storia/organization.tsx b/src/components/storia/organization.tsx
index 7780ee4c..969b1fd7 100644
--- a/src/components/storia/organization.tsx
+++ b/src/components/storia/organization.tsx
@@ -1,187 +1,18 @@
 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 { CONTAINER, SECTION_LEAD } from "@/components/layout/page"
+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"
 
-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 (
-    <div aria-hidden className="relative flex h-8 justify-center">
-      {position !== "only" && (
-        <span
-          className={cn(
-            "absolute top-0 h-0.5 bg-text-secondary",
-            position === "first" && "right-0 left-1/2",
-            position === "middle" && "inset-x-0",
-            position === "last" && "right-1/2 left-0"
-          )}
-        />
-      )}
-      <FiArrowDown className="size-6 text-text-secondary" />
-    </div>
-  )
-}
-
-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 <span aria-hidden className="mx-auto block h-6 w-0.5 bg-text-secondary" />
-}
-
-function DesktopChart() {
-  return (
-    <div className="hidden w-full flex-col lg:flex">
-      <CardIcon
-        title="Direttivo"
-        icon={LuCrown}
-        size="xs"
-        className={cn(nodeClassName, mainNodeClassName, "mx-auto")}
-      />
-      <Stem />
-      <div className="grid grid-cols-6">
-        {/* Rail from the center of the admin column (1/12) to the center of the Team growth columns (7/12) */}
-        <div aria-hidden className="relative col-span-6 h-8">
-          <span className="absolute top-0 right-[41.667%] left-[8.333%] h-0.5 bg-text-secondary" />
-          <FiArrowDown className="-translate-x-1/2 absolute top-0 left-[8.333%] size-6 text-text-secondary" />
-          <FiArrowDown className="-translate-x-1/2 absolute top-0 left-[58.333%] size-6 text-text-secondary" />
-        </div>
-        <div className="flex min-w-0 flex-col items-center px-2">
-          <CardIcon
-            title="Capi admin"
-            icon={LuShieldCheck}
-            size="xs"
-            className={cn(nodeClassName, mainNodeClassName)}
-          />
-          <BranchArrow position="only" />
-          <CardIcon title="Admin" icon={LuShield} size="xs" className={cn(nodeClassName, mainNodeClassName)} />
-        </div>
-        <div className="col-span-5 flex min-w-0 flex-col">
-          <CardIcon
-            title="Team growth"
-            icon={LuUserCog}
-            size="xs"
-            className={cn(nodeClassName, mainNodeClassName, "mx-auto")}
-          />
-          <Stem />
-          <ul className="grid grid-cols-5">
-            {teamLeads.map((lead, index) => (
-              <li key={lead.title} className="flex min-w-0 flex-col">
-                <BranchArrow position={branchPosition(index, teamLeads.length)} />
-                <div className="flex flex-1 flex-col px-2">
-                  <CardIcon title={lead.title} icon={lead.icon} size="xs" className={cn(nodeClassName, "h-full")} />
-                </div>
-                <BranchArrow position="only" />
-              </li>
-            ))}
-          </ul>
-          <div className="px-2">
-            <Card className="h-auto w-full flex-row items-center justify-center gap-3 border-white/50 p-4">
-              <GradientIcon icon={LuUsersRound} className="size-8 shrink-0" />
-              <CardTitle gradient={false} className="typo-title-large">
-                Membri dei team
-              </CardTitle>
-            </Card>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function MobileChart() {
-  return (
-    <div className="flex min-w-0 flex-col items-center lg:hidden">
-      <CardIcon title="Direttivo" icon={LuCrown} size="xs" className={cn(nodeClassName, mainNodeClassName)} />
-      <Stem />
-      <div className="grid w-full min-w-0 grid-cols-2 gap-4">
-        <div aria-hidden className="relative col-span-2 h-8">
-          <span className="absolute top-0 right-1/4 left-1/4 h-0.5 bg-text-secondary" />
-          <FiArrowDown className="-translate-x-1/2 absolute top-0 left-1/4 size-6 text-text-secondary" />
-          <FiArrowDown className="-translate-x-1/2 absolute top-0 left-3/4 size-6 text-text-secondary" />
-        </div>
-        <div className="flex min-w-0 flex-col items-center">
-          <CardIcon
-            title="Capi admin"
-            icon={LuShieldCheck}
-            size="xs"
-            className={cn(nodeClassName, "[&_h3]:typo-title-medium")}
-          />
-          <BranchArrow position="only" />
-          <CardIcon title="Admin" icon={LuShield} size="xs" className={cn(nodeClassName, "[&_h3]:typo-title-medium")} />
-        </div>
-        <div className="flex min-w-0 flex-col items-center">
-          <CardIcon
-            title="Team growth"
-            icon={LuUserCog}
-            size="xs"
-            className={cn(nodeClassName, "[&_h3]:typo-title-medium")}
-          />
-          <BranchArrow position="only" />
-          <ul className="flex w-full min-w-0 flex-col gap-2">
-            {teamLeads.map((lead) => (
-              <li key={lead.title}>
-                <Card className="h-auto min-h-14 w-full flex-row items-center gap-3 border-white/50 p-3">
-                  <GradientIcon icon={lead.icon} className="size-6 shrink-0" />
-                  <CardTitle gradient={false} className="typo-label-medium min-w-0">
-                    {lead.title}
-                  </CardTitle>
-                </Card>
-              </li>
-            ))}
-          </ul>
-          <BranchArrow position="only" />
-          <CardIcon
-            title="Membri dei team"
-            icon={LuUsersRound}
-            size="xs"
-            className={cn(nodeClassName, "[&_h3]:typo-title-medium")}
-          />
-        </div>
-      </div>
-    </div>
-  )
-}
-
 export function Organization() {
   return (
-    <section className="mx-auto flex w-full max-w-330 flex-col gap-10 px-6" aria-labelledby="struttura-title">
+    <section className={`${CONTAINER} flex flex-col gap-10`} aria-labelledby="struttura-title">
       <div className="flex max-w-140 flex-col gap-6">
         <h2 id="struttura-title" className="typo-headline-medium sm:typo-display-medium text-balance">
           Come è organizzata PoliNetwork
         </h2>
-        <p className="typo-body-large sm:typo-headline-extrasmall max-w-94 text-pretty">
+        <p className={cn(SECTION_LEAD, "max-w-94")}>
           Direttivo, team operativi, admin e soci. Guarda come funziona la macchina dall’interno.
         </p>
         <Button asChild className="w-fit">
@@ -190,15 +21,8 @@ export function Organization() {
           </Link>
         </Button>
       </div>
-      <div
-        id="organigramma"
-        role="img"
-        aria-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."
-        className="xl:-mt-57 w-full scroll-mt-32 xl:max-w-220 xl:self-end"
-      >
-        <DesktopChart />
-        <MobileChart />
-      </div>
+      {/* From xl the diagram rises beside the intro: its narrow top (the Direttivo node) fits next to the text */}
+      <OrganizationDiagram id="organigramma" className="xl:-mt-57 scroll-mt-32 xl:max-w-220 xl:self-end" />
     </section>
   )
 }
diff --git a/src/components/storia/projects.tsx b/src/components/storia/projects.tsx
index ee42bc09..aae29a9e 100644
--- a/src/components/storia/projects.tsx
+++ b/src/components/storia/projects.tsx
@@ -4,9 +4,10 @@ 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 { CONTAINER, SECTION_LEAD, SECTION_TITLE } from "@/components/layout/page"
 import TextOnlyLayout from "@/components/layout/TextOnlySection"
 import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
 
 const projects = [
   {
@@ -35,15 +36,13 @@ const projects = [
 
 export function HistoryProjects() {
   return (
-    <section className="mx-auto flex w-full max-w-330 flex-col gap-20 px-6">
+    <section className={`${CONTAINER} flex flex-col gap-16 sm:gap-20`}>
       <TextOnlyLayout
         title="I nostri progetti"
         description={
           <>
-            <h3 className="typo-headline-medium sm:typo-display-medium text-balance bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent">
-              Le cose che abbiamo costruito.
-            </h3>
-            <p className="typo-body-large sm:typo-headline-extrasmall mt-3 text-pretty">
+            <h3 className={SECTION_TITLE}>Le cose che abbiamo costruito.</h3>
+            <p className={cn(SECTION_LEAD, "mt-3")}>
               Nel corso degli anni PoliNetwork ha sviluppato e mantenuto un ecosistema di{" "}
               <strong>strumenti gratuiti e open source</strong> pensati per rispondere ai bisogni concreti degli
               studenti.
@@ -51,22 +50,23 @@ export function HistoryProjects() {
           </>
         }
         classNames={{
-          section: "gap-12 px-0 md:px-0 xl:flex-row xl:items-center [&>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",
+          section: "gap-12 xl:flex-row xl:items-center [&>div>h2]:typo-title-large",
+          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",
         }}
       >
         <Image
           src={projectsImage}
           alt="Il sito PoliNetwork su computer e smartphone"
-          className="h-auto w-full object-contain mix-blend-multiply"
+          className="mx-auto h-auto w-full max-w-2xl object-contain mix-blend-multiply"
           sizes="(max-width: 1279px) 100vw, 670px"
         />
       </TextOnlyLayout>
-      <div className="flex flex-col gap-8">
-        <div className="grid gap-6 sm:grid-cols-2 xl:grid-cols-3">
+      {/* Figma: the six tools on the left, the note about where they come from beside them, without a panel */}
+      <div className="grid gap-10 xl:grid-cols-[minmax(0,5fr)_minmax(0,2fr)] xl:items-center xl:gap-16">
+        <div className="grid gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3">
           {projects.map((project) => (
             <CardIcon
               key={project.title}
@@ -77,20 +77,18 @@ export function HistoryProjects() {
             />
           ))}
         </div>
-        <Glass className="typo-body-large flex flex-col gap-6 rounded-rectangles border-white/50 bg-background-blur p-6 sm:p-8 lg:flex-row lg:items-center lg:gap-12">
-          <div className="flex max-w-240 flex-col gap-3 text-pretty">
-            <p>
-              Molti dei progetti di PoliNetwork sono nati da <strong>idee individuali</strong>: studenti che hanno
-              creato autonomamente uno strumento utile e che, nel tempo, sono entrati a far parte del network.
-            </p>
-            <p>Da un’idea di uno studente a uno strumento per migliaia di studenti.</p>
-          </div>
-          <Button asChild className="w-fit shrink-0">
+        <div className="typo-body-large flex max-w-145 flex-col gap-4 text-pretty">
+          <p>
+            Molti dei progetti di PoliNetwork sono nati da <strong>idee individuali</strong>: studenti che hanno creato
+            autonomamente uno strumento utile e che, nel tempo, sono entrati a far parte del network.
+          </p>
+          <p className="text-blue-secondary">Da un’idea di uno studente a uno strumento per migliaia di studenti.</p>
+          <Button asChild size="lg" className="mt-2 w-fit">
             <Link href="/projects">
               Scopri tutti i progetti <FiArrowUpRight aria-hidden />
             </Link>
           </Button>
-        </Glass>
+        </div>
       </div>
     </section>
   )
diff --git a/src/components/storia/thanks.tsx b/src/components/storia/thanks.tsx
index faf9b32e..e7ea6bfe 100644
--- a/src/components/storia/thanks.tsx
+++ b/src/components/storia/thanks.tsx
@@ -2,12 +2,13 @@
 
 import { useState } from "react"
 import { FiSearch } from "react-icons/fi"
-import { Glass } from "@/components/glass"
+import { CONTAINER, SECTION_LEAD, SECTION_TITLE } from "@/components/layout/page"
 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 { cn } from "@/lib/utils"
 import { contributors } from "./constants"
 
 const categories = ["Tutti", "Direttivi", "Admin", "Collaboratori"]
@@ -21,28 +22,24 @@ export function Thanks() {
       title="Un grazie speciale"
       description={
         <>
-          <h3 className="typo-headline-medium sm:typo-display-medium text-balance bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent">
-            Centinaia di persone, una sola comunità.
-          </h3>
-          <p className="typo-body-large sm:typo-headline-extrasmall mt-3 text-pretty">
+          <h3 className={SECTION_TITLE}>Centinaia di persone, una sola comunità.</h3>
+          <p className={cn(SECTION_LEAD, "mt-3")}>
             PoliNetwork esiste grazie a tutte le persone che, in modi diversi, hanno dedicato tempo, energie e idee alla
             sua crescita. Alcune hanno coordinato un corso, altre sviluppato uno strumento, organizzato un evento,
             moderato un gruppo o semplicemente aiutato qualcuno nel momento giusto.
           </p>
-          <p className="typo-body-large sm:typo-headline-extrasmall text-pretty">
-            Questa è la nostra memoria collettiva.
-          </p>
+          <p className={SECTION_LEAD}>Questa è la nostra memoria collettiva.</p>
         </>
       }
       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",
       }}
     >
-      <Glass className="flex w-full flex-col gap-8 rounded-rectangles border-white/50 bg-background-blur p-6 sm:p-8">
+      <div className="flex w-full flex-col gap-8 xl:pt-12">
         <Input
           type="search"
           icon={<FiSearch aria-hidden />}
@@ -80,7 +77,7 @@ export function Thanks() {
             )
           })}
         </Tabs>
-      </Glass>
+      </div>
     </TextOnlyLayout>
   )
 }
diff --git a/src/components/storia/timeline.tsx b/src/components/storia/timeline.tsx
index 63b93047..872aeb08 100644
--- a/src/components/storia/timeline.tsx
+++ b/src/components/storia/timeline.tsx
@@ -1,50 +1,69 @@
+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 { CONTAINER, SECTION_LEAD, SECTION_TITLE } from "@/components/layout/page"
 import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
 import { 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 (
+    <span
+      aria-hidden
+      className={cn(
+        "flex shrink-0 items-center justify-center rounded-rectangles border border-white/50 bg-background-blur backdrop-blur-md",
+        className
+      )}
+    >
+      {typeof icon === "string" ? (
+        <Image src={icon} alt="" width={28} height={28} className="size-1/2" />
+      ) : (
+        <GradientIcon icon={icon} className="size-1/2" />
+      )}
+    </span>
+  )
+}
 
 export function Timeline() {
   return (
-    <section className="mx-auto flex w-full max-w-330 flex-col gap-10 px-6 sm:gap-12">
-      <h2 className="typo-headline-medium sm:typo-display-medium max-w-240 text-balance bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent">
+    <section className={`${CONTAINER} flex flex-col gap-12 sm:gap-16`}>
+      <h2 className={cn(SECTION_TITLE, "max-w-240")}>
         Da un semplice gruppo a una rete costruita dagli studenti,{" "}
         <span className="text-blue-secondary">per gli studenti.</span>
       </h2>
-      <ol className="grid gap-6 sm:grid-cols-2 xl:grid-cols-4">
-        {milestones.map((milestone, index) => (
-          <li key={milestone.year} className="min-w-0">
-            <CardIcon
-              title={milestone.year}
-              description={milestone.description}
-              icon={milestoneIcons[index] ?? FiUsers}
-              size="compact"
-              align="start"
-              href={milestoneLinks[index]}
-              hoverEffect
-              className="motion-safe:hover:-translate-y-1 h-full transition-transform"
-            />
+
+      {/* Nodes on a line: vertical below lg, horizontal from lg (Figma) */}
+      <ol className="grid lg:grid-cols-4">
+        {milestones.map((milestone) => (
+          <li
+            key={milestone.year}
+            className={cn(
+              "relative grid min-w-0 grid-cols-[3.5rem_minmax(0,1fr)] gap-x-5 pb-10 last:pb-0 lg:flex lg:flex-col lg:items-center lg:gap-4 lg:px-4 lg:pb-0 lg:text-center",
+              // Connector to the next node
+              "not-last:before:absolute not-last:before:top-16 not-last:before:bottom-2 not-last:before:left-7 not-last:before:w-px not-last:before:bg-blue-primary/30",
+              "lg:not-last:before:top-7 lg:not-last:before:bottom-auto lg:not-last:before:left-[calc(50%+2.25rem)] lg:not-last:before:h-px lg:not-last:before:w-[calc(100%-4.5rem)]"
+            )}
+          >
+            <IconTile icon={milestone.icon} className="row-span-2 size-14" />
+            <Link
+              href={milestone.href}
+              className="typo-headline-small w-fit self-center text-blue-secondary underline-offset-4 hover:underline focus-visible:underline focus-visible:outline-none lg:self-auto"
+            >
+              {milestone.year}
+            </Link>
+            <p className="typo-body-medium col-start-2 mt-1 max-w-80 text-pretty lg:mt-0 lg:max-w-60">
+              {milestone.description}
+            </p>
           </li>
         ))}
       </ol>
+
       <div className="flex flex-col items-center gap-6 text-center">
-        <p className="typo-body-large sm:typo-headline-extrasmall max-w-145 text-balance">
+        <p className={cn(SECTION_LEAD, "max-w-145 text-balance")}>
           Dieci anni di crescita, persone e progetti. La nostra storia{" "}
           <span className="text-blue-secondary">continua, insieme a te.</span>
         </p>
@@ -58,122 +77,124 @@ export function Timeline() {
   )
 }
 
-const chapterVisuals = [
-  <div key="rete" className="grid w-full max-w-110 grid-cols-2 gap-4">
-    {[
-      { 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) => (
-      <CardIcon key={item.title} {...item} size="xs" className="h-full [&_h3]:text-balance" />
-    ))}
-  </div>,
-  <div key="spazio" className="grid w-full max-w-110 gap-4">
-    {[
-      { icon: FiClipboard, title: "Regole interne" },
-      { icon: FiUserCheck, title: "Comunicazioni selezionate" },
-      { icon: FiUsers, title: "Una community indipendente" },
-    ].map((item) => (
-      <CardCaption
-        key={item.title}
-        {...item}
-        caption=""
-        className="[&_h3]:typo-headline-extrasmall h-auto w-full gap-0 p-6 [&_h3]:text-balance"
-      />
-    ))}
-  </div>,
-  <div key="consiglio" className="grid w-full max-w-110 gap-4">
+function Arrow({ className }: { className?: string }) {
+  return <FiArrowRight aria-hidden className={cn("size-4 shrink-0 text-blue-primary", className)} />
+}
+
+/** A left-to-right sequence of steps, joined by arrows. */
+function Steps({ items }: { items: { label: string; icon?: GradientIconType | string; value?: string }[] }) {
+  return (
+    <ol className="flex w-full max-w-120 items-start">
+      {items.map((item, index) => (
+        <li key={item.label} className="flex min-w-0 flex-1 items-start">
+          {index > 0 && <Arrow className="mt-5 sm:mt-6" />}
+          <div className="flex min-w-0 flex-1 flex-col items-center gap-2 px-1 text-center">
+            {item.icon && <IconTile icon={item.icon} className="size-11 sm:size-14" />}
+            {item.value && <span className="typo-headline-medium text-blue-secondary">{item.value}</span>}
+            <span className="typo-body-small sm:typo-body-medium text-balance">{item.label}</span>
+          </div>
+        </li>
+      ))}
+    </ol>
+  )
+}
+
+/** Two columns read as "before → after". */
+function BeforeAfter({ before, after }: { before: { title: string; items: string[] }; after: typeof before }) {
+  return (
+    <div className="grid w-full max-w-120 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-start gap-x-4 sm:gap-x-6">
+      {[before, after].map((column, index) => (
+        <div key={column.title} className={cn("flex min-w-0 flex-col gap-2", index === 1 && "col-start-3")}>
+          <p className="typo-title-medium text-blue-secondary">{column.title}</p>
+          <ul className="typo-body-medium sm:typo-body-large flex flex-col gap-1">
+            {column.items.map((item) => (
+              <li key={item}>{item}</li>
+            ))}
+          </ul>
+        </div>
+      ))}
+      <Arrow className="col-start-2 row-start-1 mt-1" />
+    </div>
+  )
+}
+
+const chapterVisuals: ReactNode[] = [
+  <Steps
+    key="rete"
+    items={[
+      { icon: telegram.src, label: "Il primo gruppo" },
+      { icon: FiUser, label: "I primi admin e volontari" },
+      { icon: FiUserCheck, label: "Test su Informatica" },
+      { icon: FiUsers, label: "Tutti i corsi" },
+    ]}
+  />,
+  <Steps
+    key="spazio"
+    items={[
+      { icon: FiClipboard, label: "Regole interne" },
+      { icon: FiUserCheck, label: "Comunicazioni selezionate" },
+      { icon: FiUsers, label: "Una community indipendente" },
+    ]}
+  />,
+  <Steps
+    key="consiglio"
+    items={[
+      { value: "5", label: "persone" },
+      { value: "~25", label: "rappresentanti" },
+      { value: "4", label: "composizioni" },
+    ]}
+  />,
+  <BeforeAfter
+    key="team"
+    before={{ title: "I primi dipartimenti", items: ["Eventi", "HR", "IT", "Social", "Gestione"] }}
+    after={{ title: "I team di oggi", items: ["Tech", "Design", "People", "Events", "Communication", "…"] }}
+  />,
+  <BeforeAfter
+    key="associazione"
+    before={{ title: "Prima", items: ["Consiglio degli Admin", "Garanti", "Coordinamento"] }}
+    after={{ title: "Dal 2022", items: ["Consiglio Direttivo", "Collegio dei Probiviri", "Statuto e regolamenti"] }}
+  />,
+  <ul key="albo" className="grid w-full max-w-120 grid-cols-[auto_auto_minmax(0,1fr)] items-center gap-x-3 gap-y-3">
     {[
-      { 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) => (
-      <CardCaption key={item.title} {...item} className="h-auto w-full gap-3 p-6" />
+      <li key={item.title} className="contents">
+        {item.done ? (
+          <FiCheck aria-label="Raggiunto" className="size-5 text-blue-secondary" />
+        ) : (
+          <FiClock aria-label="Non ancora raggiunto" className="size-5 text-text-secondary" />
+        )}
+        <span className="typo-title-medium">{item.title}</span>
+        <span className="typo-body-medium sm:typo-body-large text-text-secondary">{item.status}</span>
+      </li>
     ))}
-  </div>,
-  <div key="team" className="grid w-full max-w-110 gap-4">
-    <CardCaption
-      title="I primi dipartimenti"
-      caption="Eventi · HR · IT · Social · Gestione"
-      icon={FiLayers}
-      className="[&_h3]:typo-headline-extrasmall h-auto w-full gap-3 p-6 [&_h3]:text-balance"
-    />
-    <CardCaption
-      title="I team di oggi"
-      caption="Tech · Design · People · Events · Communication · …"
-      icon={FiUsers}
-      className="[&_h3]:typo-headline-extrasmall h-auto w-full gap-3 p-6 [&_h3]:text-balance"
-    />
-  </div>,
-  <div key="associazione" className="grid w-full max-w-110 gap-4">
-    <CardCaption
-      title="Prima"
-      caption="Consiglio degli Admin · Garanti · Coordinamento"
-      icon={FiUsers}
-      className="[&_h3]:typo-headline-extrasmall h-auto w-full gap-3 p-6 [&_h3]:text-balance"
-    />
-    <CardCaption
-      title="Dal 2022"
-      caption="Consiglio Direttivo · Collegio dei Probiviri · Statuto e regolamenti"
-      icon={FiUserCheck}
-      className="[&_h3]:typo-headline-extrasmall h-auto w-full gap-3 p-6 [&_h3]:text-balance"
-    />
-  </div>,
-  <div key="albo" className="grid w-full max-w-110 gap-4">
-    <CardCaption
-      title="APS-ETS"
-      caption="Riconosciuto dallo Stato"
-      icon={FiCheckCircle}
-      className="[&_h3]:typo-headline-extrasmall h-auto w-full gap-3 p-6 [&_h3]:text-balance"
-    />
-    <CardCaption
-      title="RUNTS"
-      caption="Iscritta come ETS"
-      icon={FiCheckCircle}
-      className="[&_h3]:typo-headline-extrasmall h-auto w-full gap-3 p-6 [&_h3]:text-balance"
-    />
-    <CardCaption
-      title="Albo PoliMi"
-      caption="Ancora da raggiungere"
-      icon={FiClock}
-      className="[&_h3]:typo-headline-extrasmall h-auto w-full gap-3 p-6 [&_h3]:text-balance"
-    />
-  </div>,
+  </ul>,
 ]
 
 export function Chapters() {
   return (
-    <section
-      id="capitoli"
-      aria-label="La nostra storia completa"
-      className="mx-auto w-full max-w-330 scroll-mt-36 px-6"
-    >
-      <ol className="relative flex flex-col gap-16 before:pointer-events-none before:absolute before:inset-y-5 before:left-5 before:hidden before:w-px before:bg-blue-primary/20 sm:gap-24 xl:before:block">
+    <section id="capitoli" aria-label="La nostra storia completa" className={`${CONTAINER} scroll-mt-36`}>
+      <ol>
         {chapters.map((chapter, index) => (
           <li
             id={`capitolo-${index + 1}`}
             key={chapter.title}
-            className="grid scroll-mt-36 gap-8 xl:grid-cols-2 xl:items-center xl:gap-16"
+            // A single vertical rule runs between the numerals and the text, across every chapter (Figma)
+            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)]"
           >
-            <div className="grid min-w-0 grid-cols-[auto_minmax(0,1fr)] items-start gap-4 sm:gap-x-6">
-              <Glass
-                aria-hidden
-                className="typo-label-large relative z-10 flex size-10 shrink-0 items-center justify-center rounded-rectangles border-white/50 bg-background p-0 text-blue-secondary"
-              >
-                {String(index + 1).padStart(2, "0")}
-              </Glass>
-              <h2 className="typo-title-large sm:typo-headline-medium lg:typo-display-small text-balance">
-                {chapter.title}
-              </h2>
-              <p className="typo-body-large sm:typo-headline-extrasmall col-span-2 text-pretty text-blue-secondary sm:col-span-1 sm:col-start-2">
-                {chapter.subtitle}
-              </p>
-              <p className="typo-body-large sm:typo-headline-extrasmall col-span-2 text-pretty sm:col-span-1 sm:col-start-2">
-                {chapter.description}
-              </p>
+            <span aria-hidden className="typo-display-small text-blue-secondary tabular-nums">
+              {String(index + 1).padStart(2, "0")}
+            </span>
+            <div className="flex min-w-0 flex-col gap-3">
+              <h2 className="typo-headline-medium lg:typo-display-small text-balance">{chapter.title}</h2>
+              <p className={cn(SECTION_LEAD, "text-blue-secondary")}>{chapter.subtitle}</p>
+              <p className={cn(SECTION_LEAD, "mt-2 max-w-170")}>{chapter.description}</p>
+            </div>
+            <div className="col-start-2 mt-10 flex min-w-0 xl:col-start-3 xl:mt-0 xl:items-center xl:justify-center">
+              {chapterVisuals[index]}
             </div>
-            <div className="flex min-w-0 items-center justify-center">{chapterVisuals[index]}</div>
           </li>
         ))}
       </ol>
diff --git a/src/components/structure/association-bodies.tsx b/src/components/structure/association-bodies.tsx
index 4249de00..a808421e 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,10 @@ export function AssociationBodies() {
       <div className="hidden gap-6 md:grid md:grid-cols-2">
         {associationBodies.map((body) => (
           <Card key={body.id} className="h-auto w-full gap-6 border-white/50 p-6">
-            <CardHeader className="flex flex-row items-center gap-4">
-              <GradientIcon icon={body.icon} className="size-10 shrink-0" />
-              <CardTitle className="typo-headline-medium text-balance">{body.title}</CardTitle>
+            <CardHeader>
+              <CardTitle gradient={false} className="typo-headline-medium text-balance">
+                {body.title}
+              </CardTitle>
             </CardHeader>
             <CardContent className="typo-body-large text-pretty">{body.description}</CardContent>
           </Card>
diff --git a/src/components/structure/board-gallery.tsx b/src/components/structure/board-gallery.tsx
index d28bd40a..6193ba05 100644
--- a/src/components/structure/board-gallery.tsx
+++ b/src/components/structure/board-gallery.tsx
@@ -1,34 +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 (
     <Carousel
-      opts={{ align: "center", breakpoints: { "(min-width: 768px)": { active: false } } }}
-      className="w-full min-w-0"
+      opts={{ align: "start", breakpoints: { "(min-width: 768px)": { active: false } } }}
+      // Out to the screen edge on mobile, so the next portrait peeks in
+      className="-mx-6 sm:-mx-10 min-w-0 md:mx-0"
     >
-      <CarouselContent className="md:mx-auto md:max-w-242 md:flex-wrap md:justify-center md:gap-6">
+      <CarouselContent className="ml-2 sm:ml-6 md:mx-auto md:max-w-242 md:flex-wrap md:justify-center md:gap-6">
         {boardMembers.map((member) => (
-          <CarouselItem key={member.name} className="sm:basis-1/2 md:max-w-56 md:basis-[calc((100%-72px)/4)] md:pl-0">
-            <Card className="motion-safe:hover:-translate-y-1 relative mx-auto aspect-[223.429/263] h-auto w-full max-w-56 rounded-rectangles border-white/50 p-0 shadow-sm transition-transform">
-              <Image
-                src={member.image}
-                alt={member.name}
-                sizes="(max-width: 767px) 224px, (max-width: 1279px) 25vw, 224px"
-                className={cn("absolute max-w-none", member.crop)}
-              />
-              <div
-                aria-hidden
-                className="absolute inset-0 bg-linear-to-t from-5% from-blue-secondary/70 to-60% to-transparent"
-              />
-              <CardContent className="absolute inset-x-4 bottom-5 text-white">
-                <h3 className="typo-body-large font-poppins">{member.name}</h3>
-                {member.role && <p className="typo-body-small">{member.role}</p>}
-              </CardContent>
-            </Card>
+          <CarouselItem key={member.name} className="basis-60 md:max-w-56 md:basis-[calc((100%-72px)/4)] md:pl-0">
+            <BoardMemberCard
+              member={member}
+              sizes="(max-width: 767px) 224px, (max-width: 1279px) 25vw, 224px"
+              className="mx-auto"
+            />
           </CarouselItem>
         ))}
       </CarouselContent>
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 (
+    <Card
+      className={cn(
+        "relative aspect-[223.429/263] h-auto w-full max-w-56 rounded-rectangles border-white/50 p-0 shadow-sm",
+        className
+      )}
+    >
+      <Image src={member.image} alt={member.name} sizes={sizes} className={cn("absolute max-w-none", member.crop)} />
+      <div
+        aria-hidden
+        className="absolute inset-0 bg-linear-to-t from-5% from-blue-secondary/70 to-60% to-transparent"
+      />
+      <CardContent className="absolute inset-x-4 bottom-5 text-white">
+        <h3 className="typo-body-large font-poppins">{member.name}</h3>
+        {member.role && <p className="typo-body-small">{member.role}</p>}
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/src/components/structure/constants.ts b/src/components/structure/constants.ts
index 716ce349..9750ef89 100644
--- a/src/components/structure/constants.ts
+++ b/src/components/structure/constants.ts
@@ -1,42 +1,27 @@
 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"
 
 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..5987707f 100644
--- a/src/components/structure/legal-status.tsx
+++ b/src/components/structure/legal-status.tsx
@@ -1,15 +1,15 @@
 import { FiArrowUpRight } from "react-icons/fi"
 import { Glass } from "@/components/glass"
 import { GradientIcon } from "@/components/gradient-icon"
+import { SECTION_TITLE } from "@/components/layout/page"
 import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
 import { legalFacts, regulationsHref, statuteHref } from "./constants"
 
 export function LegalStatus() {
   return (
     <Glass className="grid gap-8 rounded-rectangles border-white/50 p-6 lg:grid-cols-2 lg:gap-16 lg:p-10">
-      <h2 className="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 lg:text-start">
-        Forma giuridica
-      </h2>
+      <h2 className={cn(SECTION_TITLE, "text-center lg:text-start")}>Forma giuridica</h2>
       <div className="flex min-w-0 flex-col gap-8 lg:row-span-2">
         {legalFacts.map((fact) => (
           <div key={fact.title} className="flex flex-col gap-4 md:flex-row md:gap-8">
@@ -24,7 +24,7 @@ export function LegalStatus() {
         ))}
       </div>
       <div className="flex flex-col items-center gap-6 text-center lg:col-start-1 lg:row-start-2 lg:items-start lg:self-start lg:text-start">
-        <h3 className="typo-headline-small max-w-64 text-balance bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text text-transparent">
+        <h3 className="typo-headline-small text-balance bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text text-transparent">
           Consulta Statuto e Regolamenti
         </h3>
         <div className="flex flex-wrap justify-center gap-4 lg:justify-start">
diff --git a/src/components/structure/organization-chart.tsx b/src/components/structure/organization-chart.tsx
index 917b6a05..6a26b8af 100644
--- a/src/components/structure/organization-chart.tsx
+++ b/src/components/structure/organization-chart.tsx
@@ -1,42 +1,64 @@
-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 { CONTAINER } from "@/components/layout/page"
 import { cn } from "@/lib/utils"
 import { 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 (
-    <div aria-hidden className="flex h-6 items-center justify-center">
-      <Image src={arrow} alt="" className="h-auto w-5 rotate-90" />
-    </div>
+    <Glass
+      className={cn(
+        tileClassName,
+        "flex flex-col items-center gap-2 py-4 lg:gap-3 lg:py-5",
+        fill ? "w-full min-w-0 px-2 lg:px-3" : "min-w-32 px-5 lg:min-w-44 lg:px-6"
+      )}
+    >
+      <GradientIcon icon={icon} className="size-8 shrink-0 lg:size-12" />
+      <span className="typo-headline-extrasmall lg:typo-headline-medium text-balance text-center">{label}</span>
+    </Glass>
   )
 }
 
-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 (
+    <Glass
+      className={cn(tileClassName, "flex h-full flex-col items-center justify-center gap-2 px-2 py-3 text-center")}
+    >
+      <GradientIcon icon={icon} className="size-6 shrink-0 xl:size-8" />
+      <span className="typo-label-large xl:typo-title-medium text-balance">{label}</span>
+    </Glass>
+  )
+}
+
+function Arrow({ className }: { className?: string }) {
+  return <FiArrowDown aria-hidden className={cn("size-5 text-text-secondary", className)} />
+}
 
 /** 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 (
-    <div aria-hidden className="relative flex h-8 justify-center">
+    <div aria-hidden className="relative flex h-7 justify-center">
       {position !== "only" && (
         <span
           className={cn(
-            "absolute top-0 h-0.5 bg-text-secondary",
+            "absolute top-0 h-px bg-text-secondary",
             position === "first" && "right-0 left-1/2",
             position === "middle" && "inset-x-0",
             position === "last" && "right-1/2 left-0"
           )}
         />
       )}
-      <FiArrowDown className="size-6 text-text-secondary" />
+      <Arrow />
     </div>
   )
 }
@@ -48,58 +70,45 @@ function branchPosition(index: number, count: number) {
 }
 
 function Stem() {
-  return <span aria-hidden className="mx-auto block h-6 w-0.5 bg-text-secondary" />
+  return <span aria-hidden className="mx-auto block h-5 w-px bg-text-secondary" />
 }
 
 function DesktopChart() {
   return (
-    <div
-      role="img"
-      aria-label="Il Direttivo coordina i Capi admin e il Team Growth. I Capi admin coordinano gli Admin. Il Team Growth coordina i responsabili HR, IT, Design e Marketing, International ed Eventi e Partnership, con i rispettivi membri."
-      className="mx-auto hidden w-full max-w-280 flex-col lg:flex"
-    >
-      <CardIcon title="Direttivo" icon={LuCrown} size="sm" className={cn(nodeClassName, "mx-auto w-fit")} />
+    <div className="hidden w-full flex-col items-center lg:flex">
+      <Node icon={LuCrown} label="Direttivo" />
       <Stem />
-      <div className="grid grid-cols-6">
-        {/* Rail from the center of the admin column (1/12) to the center of the Team Growth columns (7/12) */}
-        <div aria-hidden className="relative col-span-6 h-8">
-          <span className="absolute top-0 right-[41.667%] left-[8.333%] h-0.5 bg-text-secondary" />
-          <FiArrowDown className="-translate-x-1/2 absolute top-0 left-[8.333%] size-6 text-text-secondary" />
-          <FiArrowDown className="-translate-x-1/2 absolute top-0 left-[58.333%] size-6 text-text-secondary" />
+      <div className="grid w-full grid-cols-6">
+        {/* Rail from the center of the admin column (1/12) to the center of the Team growth columns (7/12) */}
+        <div aria-hidden className="relative col-span-6 h-7">
+          <span className="absolute top-0 right-[41.667%] left-[8.333%] h-px bg-text-secondary" />
+          <Arrow className="-translate-x-1/2 absolute top-0 left-[8.333%]" />
+          <Arrow className="-translate-x-1/2 absolute top-0 left-[58.333%]" />
         </div>
-        <div className="flex min-w-0 flex-col items-center">
-          <div className="flex w-full flex-col items-center px-2">
-            <CardIcon
-              title="Capi admin"
-              icon={LuShieldCheck}
-              size="sm"
-              className={cn(nodeClassName, adminNodeClassName)}
-            />
-            <BranchArrow position="only" />
-            <CardIcon title="Admin" icon={LuShield} size="sm" className={cn(nodeClassName, adminNodeClassName)} />
-          </div>
+        <div className="flex min-w-0 flex-col items-center px-2">
+          <Node icon={LuShieldCheck} label="Capi admin" fill />
+          <BranchArrow position="only" />
+          <Node icon={LuShield} label="Admin" fill />
         </div>
-        <div className="col-span-5 flex min-w-0 flex-col">
-          <CardIcon title="Team Growth" icon={LuUserCog} size="sm" className={cn(nodeClassName, "mx-auto w-fit")} />
+        <div className="col-span-5 flex min-w-0 flex-col items-center">
+          <Node icon={LuUserCog} label="Team growth" />
           <Stem />
-          <ul aria-hidden className="grid grid-cols-5">
+          <ul className="grid w-full grid-cols-5">
             {teamLeads.map((lead, index) => (
               <li key={lead.title} className="flex min-w-0 flex-col">
                 <BranchArrow position={branchPosition(index, teamLeads.length)} />
                 <div className="flex flex-1 flex-col px-2">
-                  <CardIcon title={lead.title} icon={lead.icon} size="xs" className={cn(nodeClassName, "h-full")} />
+                  <LeadNode icon={lead.icon} label={lead.title} />
                 </div>
                 <BranchArrow position="only" />
               </li>
             ))}
           </ul>
-          <div className="px-2">
-            <Card className="h-auto w-full flex-row items-center justify-center gap-3 border-white/50 p-4">
+          <div className="w-full px-2">
+            <Glass className={cn(tileClassName, "flex items-center justify-center gap-3 px-4 py-3")}>
               <GradientIcon icon={LuUsersRound} className="size-8 shrink-0" />
-              <CardTitle gradient={false} className="typo-headline-extrasmall">
-                Membri Team
-              </CardTitle>
-            </Card>
+              <span className="typo-headline-small">Membri Team</span>
+            </Glass>
           </div>
         </div>
       </div>
@@ -107,92 +116,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 (
-    <section aria-label="Organigramma di PoliNetwork" className="mx-auto flex w-full max-w-330 flex-col gap-8 px-6">
-      <DesktopChart />
-      <div className="flex min-w-0 flex-col items-center lg:hidden">
-        <CardIcon
-          title="Direttivo"
-          icon={LuCrown}
-          size="xs"
-          className="[&_h3]:typo-title-large w-fit px-4 [&_h3]:text-text-primary"
-        />
-        <div aria-hidden className="relative flex h-6 w-1/2">
-          <div className="relative w-1/2">
-            <Image
-              src={branch}
-              alt=""
-              className="-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 h-auto w-4 rotate-90"
-            />
-          </div>
-          <div className="relative w-1/2">
-            <Image
-              src={branch}
-              alt=""
-              className="-translate-x-1/2 -translate-y-1/2 -scale-y-100 absolute top-1/2 left-1/2 h-auto w-4 rotate-90"
-            />
-          </div>
+    <div className="mx-auto flex w-full max-w-xl flex-col items-center lg:hidden">
+      <Node icon={LuCrown} label="Direttivo" />
+      <Stem />
+      <div className="grid w-full grid-cols-2 gap-x-4">
+        <div aria-hidden className="relative col-span-2 h-7">
+          <span className="absolute top-0 right-1/4 left-1/4 h-px bg-text-secondary" />
+          <Arrow className="-translate-x-1/2 absolute top-0 left-1/4" />
+          <Arrow className="-translate-x-1/2 absolute top-0 left-3/4" />
         </div>
-        <div className="grid w-full min-w-0 grid-cols-2 gap-4">
-          <div className="flex min-w-0 flex-col items-center">
-            <CardIcon
-              title="Capi admin"
-              icon={LuShieldCheck}
-              size="xs"
-              className="[&_h3]:typo-title-medium h-28 [&_h3]:text-text-primary"
-            />
-            <DownArrow />
-            <CardIcon
-              title="Admin"
-              icon={LuShield}
-              size="xs"
-              className="[&_h3]:typo-title-medium h-28 [&_h3]:text-text-primary"
-            />
+        <div className="flex min-w-0 flex-col items-center">
+          <Node icon={LuShieldCheck} label="Capi admin" fill />
+          <BranchArrow position="only" />
+          <Node icon={LuShield} label="Admin" fill />
+          <div className="relative mt-auto w-full pt-6">
+            <Node icon={LuUsersRound} label="Membri Team" fill />
+            {/* Arrow from the team leads' rail, across the column gap */}
+            <span
+              aria-hidden
+              className="-translate-y-1/2 absolute top-[calc(50%+0.75rem)] left-full flex w-6 items-center sm:w-7"
+            >
+              <FiArrowLeft className="-ml-1 size-4 shrink-0 text-text-secondary" />
+              <span className="h-px flex-1 bg-text-secondary" />
+            </span>
           </div>
-          <div className="flex min-w-0 flex-col items-center">
-            <CardIcon
-              title="Team Growth"
-              icon={LuUserCog}
-              size="xs"
-              className="[&_h3]:typo-title-medium h-28 [&_h3]:text-text-primary"
-            />
-            <DownArrow />
-            <ul aria-label="Responsabili dei cinque team operativi" className="flex w-full min-w-0 flex-col gap-2">
-              {teamLeads.map((lead) => (
-                <li key={lead.title}>
-                  <Card className="h-auto min-h-14 w-full flex-row items-center gap-3 border-white/50 p-3">
-                    <GradientIcon icon={lead.icon} className="size-6 shrink-0" />
-                    <CardTitle gradient={false} className="typo-label-medium min-w-0">
-                      {lead.title}
-                    </CardTitle>
-                  </Card>
-                </li>
-              ))}
-            </ul>
-            <DownArrow />
-            <CardIcon
-              title="Membri Team"
-              icon={LuUsersRound}
-              size="xs"
-              className="[&_h3]:typo-title-medium [&_h3]:text-text-primary"
-            />
+        </div>
+        <div className="flex min-w-0 flex-col items-center">
+          <Node icon={LuUserCog} label="Team growth" fill />
+          {/* Down from the node, then left to the rail the team leads hang from */}
+          <div aria-hidden className="relative h-5 w-full">
+            <span className="absolute inset-y-0 left-1/2 w-px bg-text-secondary" />
+            <span className="absolute right-1/2 bottom-0 left-2 h-px bg-text-secondary sm:left-3" />
           </div>
+          <ul className="ml-2 flex w-[calc(100%-0.5rem)] flex-col gap-2 border-text-secondary border-l py-2 sm:ml-3 sm:w-[calc(100%-0.75rem)]">
+            {teamLeads.map((lead) => (
+              <li key={lead.title} className="flex items-center">
+                <span aria-hidden className="h-px w-2 shrink-0 bg-text-secondary sm:w-3" />
+                <Glass
+                  className={cn(tileClassName, "flex min-w-0 flex-1 items-center gap-1.5 px-2 py-2.5 sm:gap-2 sm:px-3")}
+                >
+                  <GradientIcon icon={lead.icon} className="size-4 shrink-0 sm:size-5" />
+                  <span className="typo-label-medium sm:typo-label-large min-w-0">{lead.title}</span>
+                </Glass>
+              </li>
+            ))}
+          </ul>
         </div>
       </div>
-      <Glass className="flex flex-col gap-4 rounded-rectangles border-white/50 p-6 md:flex-row md:items-center md:gap-6">
-        <div className="flex items-center gap-4 md:contents">
-          <GradientIcon icon={FiUsers} className="size-10 shrink-0 md:size-14" />
-          <h3 className="typo-headline-small md:hidden">Soci</h3>
-        </div>
-        <div className="flex min-w-0 flex-1 flex-col gap-2">
-          <h3 className="typo-headline-small hidden md:block">Soci</h3>
-          <p className="typo-body-medium md:typo-body-large text-pretty">
-            Essere socio è una condizione trasversale, compatibile con qualsiasi ruolo all’interno di PoliNetwork. Ogni
-            persona può ricoprire più ruoli contemporaneamente.
-          </p>
-        </div>
-      </Glass>
+    </div>
+  )
+}
+
+/** The organisation diagram, shared by /about and /storia. */
+export function OrganizationDiagram({ id, className }: { id?: string; className?: string }) {
+  return (
+    <div id={id} role="img" aria-label={CHART_LABEL} className={cn("w-full", className)}>
+      <DesktopChart />
+      <MobileChart />
+    </div>
+  )
+}
+
+export function OrganizationChart() {
+  return (
+    <section aria-label="Organigramma di PoliNetwork" className={cn(CONTAINER, "flex flex-col gap-10")}>
+      <div className="mx-auto flex w-full max-w-280 flex-col gap-10">
+        <OrganizationDiagram />
+        <Glass className={cn(tileClassName, "flex flex-col gap-3 p-6 md:flex-row md:items-start md:gap-6")}>
+          <GradientIcon icon={FiUsers} className="hidden size-12 shrink-0 md:block" />
+          <div className="flex min-w-0 flex-1 flex-col gap-2">
+            <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
+              <h3 className="typo-headline-small flex items-center gap-3">
+                <GradientIcon icon={FiUsers} className="size-8 shrink-0 md:hidden" />
+                Soci
+              </h3>
+              <span className="typo-label-medium rounded-buttonsM bg-blue-tertiary-blur px-3 py-1 text-blue-secondary">
+                Ruolo trasversale
+              </span>
+            </div>
+            <p className="typo-body-large text-pretty">
+              Essere socio è una condizione trasversale, compatibile con qualsiasi ruolo all’interno di PoliNetwork.
+              Ogni persona può ricoprire più ruoli contemporaneamente.
+            </p>
+          </div>
+        </Glass>
+      </div>
     </section>
   )
 }
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() {
         <Card key={path.title} className="h-auto w-full gap-6 border-white/50 p-6">
           <CardHeader className="flex flex-row items-center justify-between gap-4 lg:flex-col lg:items-start">
             <GradientIcon icon={path.icon} className="order-2 size-10 shrink-0 lg:order-1 lg:size-16" />
-            <CardTitle className="typo-headline-small lg:typo-headline-medium order-1 text-balance lg:order-2">
+            <CardTitle
+              gradient={false}
+              className="typo-headline-small lg:typo-headline-medium order-1 text-balance lg:order-2"
+            >
               {path.title}
             </CardTitle>
           </CardHeader>
diff --git a/src/components/team/constants.ts b/src/components/team/constants.ts
index 29f2622c..383c6ed5 100644
--- a/src/components/team/constants.ts
+++ b/src/components/team/constants.ts
@@ -21,10 +21,9 @@ export type Team = {
   title: string
   description: string
   roles: Pick<CardIconProps, "title" | "icon">[]
-  reverse?: boolean
+  /** Figma alternates the sections: text on the right for HR, title and text side by side for Events. */
 }
 
-// Copy and specialisms from the desktop Team frame (5546:10874).
 export const teams: Team[] = [
   {
     id: "it",
@@ -62,7 +61,6 @@ export const teams: Team[] = [
       { title: "Community & Engagement", icon: FiAward },
       { title: "Crescita del team", icon: FiCornerRightUp },
     ],
-    reverse: true,
   },
   {
     id: "events-partnership",
diff --git a/src/components/team/team-section.tsx b/src/components/team/team-section.tsx
index 3ccb9421..ff200180 100644
--- a/src/components/team/team-section.tsx
+++ b/src/components/team/team-section.tsx
@@ -1,49 +1,66 @@
+import Image from "next/image"
 import { FiUsers } from "react-icons/fi"
-import { CardIcon } from "@/components/card-icon"
+import { GradientIcon } from "@/components/gradient-icon"
+import { CONTAINER, SECTION_LEAD, SECTION_TITLE } from "@/components/layout/page"
 import { Button } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
 import { applicationHref, type Team } from "./constants"
 
-export function TeamSection({ team }: { team: Team }) {
+/** The specialisms are not links: a plain list, not tiles. */
+function RoleList({ team }: { team: Team }) {
+  return (
+    <ul aria-label={`Specializzazioni di ${team.title}`} className="grid w-full min-w-0 gap-x-10 sm:grid-cols-2">
+      {team.roles.map(({ title, icon }) => (
+        <li key={title} className="flex min-w-0 items-center gap-4 border-slate-300/70 border-t py-5">
+          {typeof icon === "string" ? (
+            <Image src={icon} alt="" width={24} height={24} className="size-6 shrink-0" />
+          ) : (
+            <GradientIcon icon={icon} className="size-6 shrink-0" />
+          )}
+          <span className="typo-title-large text-text-primary">{title}</span>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+function JoinButton({ team }: { team: Team }) {
+  return (
+    <Button asChild size="lg" className="w-fit">
+      <a href={applicationHref(team.title)}>
+        Unisciti a noi <FiUsers aria-hidden />
+      </a>
+    </Button>
+  )
+}
+
+/** `reverse` puts the specialisms on the left: the page alternates sides from one team to the next. */
+export function TeamSection({ team, reverse = false }: { team: Team; reverse?: boolean }) {
+  const title = (
+    <h2 id={`${team.id}-title`} className={SECTION_TITLE}>
+      {team.title}
+    </h2>
+  )
+  const description = <p className={cn(SECTION_LEAD, "max-w-145")}>{team.description}</p>
+
   return (
     <section
       id={team.id}
       aria-labelledby={`${team.id}-title`}
-      className="mx-auto flex w-full max-w-330 scroll-mt-36 flex-col gap-12 px-6"
+      className={cn(
+        CONTAINER,
+        "grid scroll-mt-36 items-center gap-10 xl:grid-cols-[minmax(0,5fr)_minmax(0,6fr)] xl:gap-16",
+        reverse && "xl:grid-cols-[minmax(0,6fr)_minmax(0,5fr)]"
+      )}
     >
-      <div
-        className={cn(
-          "grid min-w-0 items-center gap-10 xl:grid-cols-[minmax(0,5fr)_minmax(0,6fr)] xl:gap-16",
-          team.reverse && "xl:grid-cols-[minmax(0,6fr)_minmax(0,5fr)]"
-        )}
-      >
-        <div
-          className={cn(
-            "flex min-w-0 flex-col items-center gap-6 text-center xl:items-start xl:text-start",
-            team.reverse && "xl:order-last"
-          )}
-        >
-          <h2
-            id={`${team.id}-title`}
-            className="typo-headline-medium sm:typo-display-medium text-balance bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent"
-          >
-            {team.title}
-          </h2>
-          <p className="typo-body-large sm:typo-headline-extrasmall max-w-145 text-pretty">{team.description}</p>
-          <Button asChild size="lg" className="mt-2 w-fit">
-            <a href={applicationHref(team.title)}>
-              Unisciti a noi <FiUsers aria-hidden />
-            </a>
-          </Button>
+      <div className={cn("flex min-w-0 flex-col gap-6", reverse && "xl:order-last")}>
+        {title}
+        {description}
+        <div className="pt-2">
+          <JoinButton team={team} />
         </div>
-        <ul aria-label={`Specializzazioni di ${team.title}`} className="grid w-full min-w-0 gap-4 sm:grid-cols-2">
-          {team.roles.map((role) => (
-            <li key={role.title} className="min-w-0 sm:last:odd:col-span-2">
-              <CardIcon {...role} align="inline" size="inline-sm" className="h-full" />
-            </li>
-          ))}
-        </ul>
       </div>
+      <RoleList team={team} />
     </section>
   )
 }