From e02fe8cf536e6c6ae2cd524cbefe34924d70eb58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gabriele=20Vigan=C3=B2?= <infogabrielevigano@gmail.com>
Date: Tue, 27 Oct 2026 16:42:56 +0000
Subject: [PATCH 1/3] refactor(layout): share one vertical rhythm across the
 redesigned pages

Storia, Su di noi, Struttura, Team and Unisciti each spaced their sections
differently (144 to 288px between sections at 1728, hero titles between
y=224 and y=282). They now share PAGE_MAIN and PAGE_HERO from
components/layout/page.ts, measured on the Figma frames:

- 180px between section blocks from xl (Figma, Su di noi and Storia),
  128px on tablets, 96px on phones; the same space before the footer.
- Hero title at y=286 on desktop as in every Figma frame, with ~270px of
  air after the hero instead of the regular gap.

Unisciti and Team had stretched their gaps (224-288px) to make up for
sections that are shorter than in Figma; that space now follows the
shared rule instead.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/app/about/page.tsx                      |   6 +-
 src/app/chi-siamo/page.tsx                  |   3 +-
 src/app/join/page.tsx                       |   6 +-
 src/app/storia/page.tsx                     | 130 ++++++++++----------
 src/app/team/page.tsx                       |   6 +-
 src/components/chi-siamo/vision-section.tsx |   4 +-
 src/components/layout/page.ts               |  13 ++
 src/components/storia/hero.tsx              |   6 +-
 8 files changed, 93 insertions(+), 81 deletions(-)

diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index a2851a4e..6c8380ea 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -2,7 +2,7 @@ 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 { CONTAINER, PAGE_HERO, PAGE_MAIN, 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"
@@ -22,8 +22,8 @@ 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={`${CONTAINER} pt-52 md:pt-57.5`}>
+    <main className={PAGE_MAIN}>
+      <section className={`${CONTAINER} ${PAGE_HERO}`}>
         <Hero title="Struttura" description="Un’organizzazione pensata per durare" />
       </section>
       <OrganizationChart />
diff --git a/src/app/chi-siamo/page.tsx b/src/app/chi-siamo/page.tsx
index d96a6022..88a51feb 100644
--- a/src/app/chi-siamo/page.tsx
+++ b/src/app/chi-siamo/page.tsx
@@ -6,6 +6,7 @@ import { PathSection } from "@/components/chi-siamo/path-section"
 import { ProblemSection } from "@/components/chi-siamo/problem-section"
 import { SupportSection } from "@/components/chi-siamo/support-section"
 import { VisionSection } from "@/components/chi-siamo/vision-section"
+import { PAGE_MAIN } from "@/components/layout/page"
 
 export const metadata: Metadata = {
   title: "Su di noi",
@@ -14,7 +15,7 @@ export const metadata: Metadata = {
 
 export default function ChiSiamoPage() {
   return (
-    <main className="flex w-full flex-col gap-24 pt-44 pb-24 sm:pt-56 md:gap-36 md:pb-36">
+    <main className={PAGE_MAIN}>
       <VisionSection />
       <ProblemSection />
       <AnswerSection />
diff --git a/src/app/join/page.tsx b/src/app/join/page.tsx
index 04c84c41..dd56b8da 100644
--- a/src/app/join/page.tsx
+++ b/src/app/join/page.tsx
@@ -3,7 +3,7 @@ import { AdminSection } from "@/components/join/admin"
 import { Introduction } from "@/components/join/introduction"
 import { MembershipSection } from "@/components/join/membership"
 import { TeamsSection } from "@/components/join/teams"
-import { CONTAINER } from "@/components/layout/page"
+import { CONTAINER, PAGE_HERO, PAGE_MAIN } from "@/components/layout/page"
 import { Hero } from "@/components/ui/hero"
 
 export const metadata: Metadata = {
@@ -14,8 +14,8 @@ export const metadata: Metadata = {
 
 export default function JoinPage() {
   return (
-    <main className="flex w-full flex-col gap-24 pb-24 md:gap-36 md:pb-36 xl:gap-56 2xl:gap-72">
-      <section className={`${CONTAINER} pt-52 md:pt-57.5`}>
+    <main className={PAGE_MAIN}>
+      <section className={`${CONTAINER} ${PAGE_HERO}`}>
         <Hero
           title="Unisciti a Noi"
           description="Nessuna simulazione, solo progetti reali. Scopri come fare la differenza per migliaia di studenti del PoliMi"
diff --git a/src/app/storia/page.tsx b/src/app/storia/page.tsx
index 9a972cd1..c9df87dd 100644
--- a/src/app/storia/page.tsx
+++ b/src/app/storia/page.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from "next"
 import { FiMessageCircle } from "react-icons/fi"
 import { GradientIcon } from "@/components/gradient-icon"
-import { CONTAINER, SECTION_LEAD, SECTION_TITLE } from "@/components/layout/page"
+import { CONTAINER, PAGE_MAIN, 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"
@@ -20,80 +20,78 @@ export const metadata: Metadata = {
 
 export default function HistoryPage() {
   return (
-    <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">
+    <main className={PAGE_MAIN}>
       <HistoryHero />
 
-      <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.
+      {/* 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={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={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: `${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",
-          }}
-        />
-        <Timeline />
-        <Chapters />
-        <Boards />
-        <HistoryProjects />
-        <Thanks />
+      <TextOnlyLayout
+        title="Come è nato tutto"
+        description={
+          <>
+            <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={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: `${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",
+        }}
+      />
+      <Timeline />
+      <Chapters />
+      <Boards />
+      <HistoryProjects />
+      <Thanks />
 
-        <TextOnlyLayout
-          title="Quello che abbiamo fatto di più"
-          description={
-            <>
-              <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={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: `${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",
-          }}
-        >
-          <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.
+      <TextOnlyLayout
+        title="Quello che abbiamo fatto di più"
+        description={
+          <>
+            <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={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.
+              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>
-          </div>
-        </TextOnlyLayout>
+          </>
+        }
+        classNames={{
+          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",
+        }}
+      >
+        <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 />
+      <Organization />
 
-        <Continuation />
-      </div>
+      <Continuation />
     </main>
   )
 }
diff --git a/src/app/team/page.tsx b/src/app/team/page.tsx
index 5489f290..4f0dcd34 100644
--- a/src/app/team/page.tsx
+++ b/src/app/team/page.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from "next"
 import { FiUsers } from "react-icons/fi"
 import { ClosingCta } from "@/components/layout/closing-cta"
-import { CONTAINER } from "@/components/layout/page"
+import { CONTAINER, PAGE_HERO, PAGE_MAIN } from "@/components/layout/page"
 import { applicationHref, teams } from "@/components/team/constants"
 import { TeamSection } from "@/components/team/team-section"
 import { Button } from "@/components/ui/button"
@@ -14,8 +14,8 @@ 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 xl:gap-48">
-      <section className={`${CONTAINER} pt-52 md:pt-57.5`}>
+    <main className={PAGE_MAIN}>
+      <section className={`${CONTAINER} ${PAGE_HERO}`}>
         <Hero
           title="I Team"
           description="PoliNetwork si muove grazie a quattro anime operative distinte, guidate dai rispettivi Capi Dipartimento."
diff --git a/src/components/chi-siamo/vision-section.tsx b/src/components/chi-siamo/vision-section.tsx
index b95392ff..51fb6be4 100644
--- a/src/components/chi-siamo/vision-section.tsx
+++ b/src/components/chi-siamo/vision-section.tsx
@@ -1,9 +1,9 @@
-import { CONTAINER, SECTION_LEAD } from "@/components/layout/page"
+import { CONTAINER, PAGE_HERO, SECTION_LEAD } from "@/components/layout/page"
 import { cn } from "@/lib/utils"
 
 export function VisionSection() {
   return (
-    <section className={`${CONTAINER} flex flex-col items-center gap-6 text-center`}>
+    <section className={`${CONTAINER} ${PAGE_HERO} 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{" "}
diff --git a/src/components/layout/page.ts b/src/components/layout/page.ts
index a725375a..8804266f 100644
--- a/src/components/layout/page.ts
+++ b/src/components/layout/page.ts
@@ -10,3 +10,16 @@ export const SECTION_LEAD = "typo-body-large sm:typo-headline-extrasmall text-pr
 /** A link inside running text: always underlined, so it reads as a link without relying on colour. */
 export const INLINE_LINK =
   "rounded-sm text-blue-secondary underline decoration-1 decoration-blue-secondary/40 underline-offset-4 outline-none transition-colors hover:decoration-blue-secondary focus-visible:ring-2 focus-visible:ring-blue-secondary"
+
+/**
+ * Vertical rhythm of the redesigned pages. Figma leaves 180px between section blocks at 1728px (Su di noi, Storia):
+ * 96px on phones, 128px on tablets, 180px from xl. The bottom padding repeats the gap before the footer.
+ */
+export const PAGE_MAIN = "flex w-full flex-col gap-24 pb-24 md:gap-32 md:pb-32 xl:gap-45 xl:pb-45"
+
+/**
+ * The page's opening section. The top padding clears the fixed header: with `Hero`'s own offset the title sits at
+ * y=286 on desktop, as in every Figma frame. Figma also leaves more air after the hero (~270px at 1728) than between
+ * sections (180px): the bottom padding adds that difference to the main gap.
+ */
+export const PAGE_HERO = "pt-52 pb-8 md:pt-57.5 md:pb-12 xl:pb-24"
diff --git a/src/components/storia/hero.tsx b/src/components/storia/hero.tsx
index b13235ee..3a2164ea 100644
--- a/src/components/storia/hero.tsx
+++ b/src/components/storia/hero.tsx
@@ -1,18 +1,18 @@
 import Link from "next/link"
 import { FiArrowDown } from "react-icons/fi"
-import { CONTAINER } from "@/components/layout/page"
+import { CONTAINER, PAGE_HERO } from "@/components/layout/page"
 import { Button } from "@/components/ui/button"
 import { Hero } from "@/components/ui/hero"
 
 // Figma: a centred XL title and nothing else. The board portraits appear further down, under "I nostri direttivi".
 export function HistoryHero() {
   return (
-    <section className={`${CONTAINER} flex flex-col items-center gap-10`}>
+    <section className={`${CONTAINER} ${PAGE_HERO} 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"
+        className="[&_h2]:typo-display-fluid-extralarge [&_p]:max-w-145 [&_p]:text-balance"
       />
       <div className="flex flex-wrap justify-center gap-3">
         <Button asChild size="lg">

From 03e5a71d890dd3b344e81aaecff17b70c0c3e58c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gabriele=20Vigan=C3=B2?= <infogabrielevigano@gmail.com>
Date: Tue, 27 Oct 2026 16:47:59 +0000
Subject: [PATCH 2/3] feat(collabora): hold the page together between the Figma
 frames
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

/collabora matched Figma at 1728px but fell apart elsewhere: everything
stacked below 1440px with a 719px column and half the screen empty, the
contact steps stayed vertical up to 1615px, and the copy ran in 24px
Poppins on tablets.

- Shared container, section titles and rhythm (PAGE_MAIN/PAGE_HERO) of
  the other redesigned pages instead of the page's own 145px-gutter frame
  and per-section paddings.
- Copy steps 16 → 20 → 24px (Figma size from 3xl) and stays left-aligned;
  the wide "Cosa possiamo fare insieme?" paragraph narrows to ~65
  characters below 3xl. Line breaks forced for the 1728px frame are gone.
- Figures: one row of four on laptops, two on tablets, Figma's 2×2 beside
  the copy from xl; cards size to their content.
- Photo sections side by side from lg (Figma's 719:611 ratio, centred);
  stacked below with the photo as wide as the copy.
- Contact steps in a row from lg with flexible cards; the e-mail step is a
  mailto link and the only card that reacts to hover.
- InfoCard: optional titleClassName.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/app/collabora/page.tsx                    |  8 +++---
 src/components/collabora/about-section.tsx    | 20 +++++++--------
 .../collabora/association-section.tsx         |  8 ++----
 .../collabora/collaboration-section.tsx       |  8 +++---
 src/components/collabora/company-section.tsx  |  1 -
 src/components/collabora/contact-section.tsx  | 23 +++++++++++++----
 src/components/collabora/info-card.tsx        | 12 +++++++--
 src/components/collabora/photo-section.tsx    | 22 ++++++++--------
 src/components/collabora/section.tsx          | 25 ++++---------------
 9 files changed, 64 insertions(+), 63 deletions(-)

diff --git a/src/app/collabora/page.tsx b/src/app/collabora/page.tsx
index a2889aaf..16fe2bc0 100644
--- a/src/app/collabora/page.tsx
+++ b/src/app/collabora/page.tsx
@@ -4,9 +4,8 @@ import { AssociationSection } from "@/components/collabora/association-section"
 import { CollaborationSection } from "@/components/collabora/collaboration-section"
 import { CompanySection } from "@/components/collabora/company-section"
 import { ContactSection } from "@/components/collabora/contact-section"
-import { sectionContainerClass } from "@/components/collabora/section"
+import { CONTAINER, PAGE_HERO, PAGE_MAIN } from "@/components/layout/page"
 import { Hero } from "@/components/ui/hero"
-import { cn } from "@/lib/utils"
 
 export const metadata: Metadata = {
   title: "Collabora con Noi",
@@ -16,9 +15,8 @@ export const metadata: Metadata = {
 
 export default function CollaboraPage() {
   return (
-    <main className="flex w-full flex-col">
-      {/* Title at y=262 (mobile) / 286 (desktop) as in Figma; Hero adds 16px / 56px above it */}
-      <section className={cn(sectionContainerClass, "pt-61.5 pb-29 sm:pt-57.5 md:pb-64.5")}>
+    <main className={PAGE_MAIN}>
+      <section className={`${CONTAINER} ${PAGE_HERO}`}>
         <Hero
           title="Collabora con Noi"
           description="Mettiamo la nostra infrastruttura e i nostri talenti a disposizione di chi ha buone idee per gli studenti del PoliMi"
diff --git a/src/components/collabora/about-section.tsx b/src/components/collabora/about-section.tsx
index 5ac09718..bf7a0070 100644
--- a/src/components/collabora/about-section.tsx
+++ b/src/components/collabora/about-section.tsx
@@ -4,11 +4,12 @@ import chatIcon from "@/assets/icons/collabora/chat.svg"
 import groupIcon from "@/assets/icons/collabora/group.svg"
 import handshakeIcon from "@/assets/icons/collabora/handshake.svg"
 import schoolIcon from "@/assets/icons/collabora/school.svg"
+import { CONTAINER } from "@/components/layout/page"
 import { Button } from "@/components/ui/button"
 import { Carousel, CarouselContent, CarouselDots, CarouselItem } from "@/components/ui/carousel"
 import { cn } from "@/lib/utils"
 import { InfoCard, type InfoCardData } from "./info-card"
-import { Aside, Highlight, SectionTitle, sectionContainerClass, sectionTextClass } from "./section"
+import { Aside, Highlight, SectionTitle, sectionTextClass } from "./section"
 
 const cards: InfoCardData[] = [
   {
@@ -39,9 +40,7 @@ const cards: InfoCardData[] = [
     title: "1000+",
     description: (
       <>
-        <Highlight>Persone</Highlight> nel nostro evento
-        <br />
-        più grande
+        <Highlight>Persone</Highlight> nel nostro evento più grande
       </>
     ),
     mobileDescription: "Persone al nostro evento più grande",
@@ -65,9 +64,10 @@ const cards: InfoCardData[] = [
 
 export function AboutSection() {
   return (
-    <section className={cn(sectionContainerClass, "pt-30 pb-30 md:pt-18.75 md:pb-31.25")}>
-      <div className="flex 3xl:flex-row flex-col items-center 3xl:justify-between 3xl:gap-10 gap-8.75 md:items-start md:gap-12">
-        <div className="flex w-full flex-col items-center gap-6 md:max-w-179.75 md:items-start md:gap-2.5">
+    <section className={CONTAINER}>
+      {/* Copy and figures side by side from xl, as in Figma; below, the figures run as one row (two on tablets) */}
+      <div className="flex flex-col gap-8.75 md:gap-12 xl:flex-row xl:items-start xl:justify-between">
+        <div className="flex w-full flex-col items-start gap-6 md:max-w-179.75 md:gap-2.5">
           <div className="flex w-full flex-col gap-6 md:gap-3">
             <SectionTitle>Chi siamo?</SectionTitle>
             <div className={cn(sectionTextClass, "flex flex-col gap-5 pb-2 md:gap-3 md:pb-0")}>
@@ -92,14 +92,14 @@ export function AboutSection() {
           </div>
         </div>
 
-        <div className="grid shrink-0 grid-cols-[repeat(2,17.5rem)] gap-x-13.75 gap-y-8.75 max-md:hidden">
+        <div className="grid shrink-0 3xl:grid-cols-[repeat(2,17.5rem)] grid-cols-2 gap-6 3xl:gap-x-13.75 3xl:gap-y-8.75 max-md:hidden lg:grid-cols-4 xl:grid-cols-[repeat(2,15rem)]">
           {cards.map((card) => (
-            <InfoCard key={card.title} card={card} descriptionColorClassName="text-black" className="min-h-61.25" />
+            <InfoCard key={card.title} card={card} className="h-full lg:max-3xl:p-6" />
           ))}
         </div>
 
         {/* Bleeds to the screen edges like the Figma carousel, so the next card peeks in */}
-        <Carousel opts={{ containScroll: false }} className="w-screen max-w-none md:hidden">
+        <Carousel opts={{ containScroll: false }} className="w-screen max-w-none self-center md:hidden">
           <CarouselContent className="-ml-2">
             {cards.map((card) => (
               <CarouselItem key={card.title} className="basis-auto pl-2">
diff --git a/src/components/collabora/association-section.tsx b/src/components/collabora/association-section.tsx
index 1e2fd866..cc04e76e 100644
--- a/src/components/collabora/association-section.tsx
+++ b/src/components/collabora/association-section.tsx
@@ -39,7 +39,6 @@ export function AssociationSection() {
           }}
         />
       }
-      className="py-30 md:py-37.5"
     >
       <p>
         Se fai parte dell'ecosistema universitario del Politecnico di Milano o di un'altra università, possiamo valutare
@@ -48,11 +47,8 @@ export function AssociationSection() {
       </p>
       <p>
         Le collaborazioni più efficaci che abbiamo avuto nel tempo sono nate da gruppi studenteschi che condividevano
-        <br className="hidden min-[1728px]:inline" /> una parte degli obiettivi che perseguiamo:{" "}
-        <Highlight>
-          rendere la vita universitaria meno complicata e più ricca per chi studia
-          <br className="hidden min-[1728px]:inline" /> al Politecnico.
-        </Highlight>
+        una parte degli obiettivi che perseguiamo:{" "}
+        <Highlight>rendere la vita universitaria meno complicata e più ricca per chi studia al Politecnico.</Highlight>
       </p>
     </PhotoSection>
   )
diff --git a/src/components/collabora/collaboration-section.tsx b/src/components/collabora/collaboration-section.tsx
index e615b72f..394043e7 100644
--- a/src/components/collabora/collaboration-section.tsx
+++ b/src/components/collabora/collaboration-section.tsx
@@ -1,13 +1,15 @@
+import { CONTAINER } from "@/components/layout/page"
 import { cn } from "@/lib/utils"
-import { Aside, Highlight, SectionTitle, sectionContainerClass, sectionTextClass } from "./section"
+import { Aside, Highlight, SectionTitle, sectionTextClass } from "./section"
 
 export function CollaborationSection() {
   return (
-    <section className={cn(sectionContainerClass, "py-30 md:py-25")}>
+    <section className={CONTAINER}>
       <div className="flex flex-col gap-6 md:gap-3">
         <SectionTitle>Cosa possiamo fare insieme?</SectionTitle>
         <div className={cn(sectionTextClass, "flex flex-col gap-5 pb-2 md:gap-3 md:pb-0")}>
-          <p className="md:max-w-239.75">
+          {/* Figma runs this paragraph 959px wide at 24px; at 20px that is ~90 characters a line, so it narrows below 3xl */}
+          <p className="3xl:max-w-239.75 md:max-w-180">
             Collaborare con noi significa <Highlight>accedere a questa community in modo diretto</Highlight>. Non siamo
             un canale pubblicitario e non accettiamo promozioni commerciali generiche: ogni collaborazione viene
             valutata in termini di <Highlight>valore concreto per gli studenti del Politecnico</Highlight>{" "}
diff --git a/src/components/collabora/company-section.tsx b/src/components/collabora/company-section.tsx
index d04247be..f4bf6bcc 100644
--- a/src/components/collabora/company-section.tsx
+++ b/src/components/collabora/company-section.tsx
@@ -33,7 +33,6 @@ export function CompanySection() {
         />
       }
       photoFirst
-      className="py-30 md:py-31.25"
     >
       <p>
         PoliNetwork è un punto di accesso diretto alla community studentesca del Politecnico di Milano: migliaia di
diff --git a/src/components/collabora/contact-section.tsx b/src/components/collabora/contact-section.tsx
index cdd23e4e..27b30ec2 100644
--- a/src/components/collabora/contact-section.tsx
+++ b/src/components/collabora/contact-section.tsx
@@ -2,9 +2,10 @@ import { Fragment } from "react"
 import favoriteIcon from "@/assets/icons/collabora/favorite.svg"
 import mailIcon from "@/assets/icons/collabora/mail.svg"
 import promptSuggestionIcon from "@/assets/icons/collabora/prompt-suggestion.svg"
+import { CONTAINER } from "@/components/layout/page"
 import { cn } from "@/lib/utils"
 import { InfoCard, type InfoCardData } from "./info-card"
-import { SectionTitle, sectionContainerClass } from "./section"
+import { SectionTitle } from "./section"
 
 const cards: InfoCardData[] = [
   {
@@ -12,14 +13,20 @@ const cards: InfoCardData[] = [
     description: "Ci scrivi una mail descrivendo chi sei e cosa vorresti fare",
     mobileDescription: "Ci scrivi una mail spiegando chi sei e cosa vorresti fare",
     icon: mailIcon,
+    // In a row the three titles share the width: 24px, wrapping (the address after its "@")
+    titleClassName: "md:typo-headline-small lg:whitespace-normal",
     iconClassName: "mr-2.5 h-5.5 w-7 md:mr-0 md:h-12 md:w-15",
     descriptionClassName: "max-w-56",
+    // The only step that is an action: it opens the mail client
+    href: "mailto:events@polinetwork.org",
   },
   {
     title: "Condividi la tua visione",
     description: "Quale valore porta il tuo progetto agli studenti del Politecnico?",
     mobileDescription: "Quale valore porta il progetto agli studenti del Poli?",
     icon: favoriteIcon,
+    // In a row the three titles share the width: 24px, wrapping (the address after its "@")
+    titleClassName: "md:typo-headline-small lg:whitespace-normal",
     iconClassName: "mr-2.5 h-5.5 w-6 md:mt-0.5 md:mr-0 md:ml-0.5 md:h-12.5 md:w-13.5",
     descriptionClassName: "max-w-65.75",
   },
@@ -33,6 +40,8 @@ const cards: InfoCardData[] = [
     ),
     mobileDescription: "Rispondiamo al più presto a tutte le richieste!",
     icon: promptSuggestionIcon,
+    // In a row the three titles share the width: 24px, wrapping (the address after its "@")
+    titleClassName: "md:typo-headline-small lg:whitespace-normal",
     iconClassName: "mr-2.5 h-5.5 w-7 md:mt-0.5 md:mr-0 md:h-11.75 md:w-15",
     descriptionClassName: "max-w-56",
   },
@@ -46,18 +55,22 @@ const connectorClassNames = [
 
 export function ContactSection() {
   return (
-    <section className={cn(sectionContainerClass, "pt-15 pb-33.25 md:pt-31.25 md:pb-54.5")}>
+    <section className={CONTAINER}>
       <SectionTitle className="mb-7.5 md:mb-9.25">Come contattarci</SectionTitle>
 
-      <div className="flex flex-col items-center md:max-[1615px]:items-start min-[1616px]:flex-row">
+      {/* A row of equal steps from lg (tighter padding until 3xl); stacked below, at Figma's card width */}
+      <div className="flex flex-col items-center md:items-start lg:flex-row lg:items-stretch">
         {cards.map((card, index) => (
           <Fragment key={card.title}>
-            <InfoCard card={card} className="w-full md:min-h-61.25 md:w-104.25 md:shrink-0" />
+            <InfoCard
+              card={card}
+              className="w-full md:w-104.25 md:shrink-0 lg:w-auto lg:min-w-0 lg:flex-1 lg:max-3xl:p-6"
+            />
             {index < connectorClassNames.length && (
               <div
                 aria-hidden
                 className={cn(
-                  "h-10 w-1 shrink-0 bg-linear-to-b md:max-[1615px]:ml-51.5 min-[1616px]:h-1 min-[1616px]:w-auto min-[1616px]:min-w-10 min-[1616px]:flex-1 min-[1616px]:bg-linear-to-r",
+                  "h-10 w-1 shrink-0 bg-linear-to-b md:max-lg:ml-51.5 lg:h-1 lg:w-10 lg:self-center lg:bg-linear-to-r",
                   connectorClassNames[index]
                 )}
               />
diff --git a/src/components/collabora/info-card.tsx b/src/components/collabora/info-card.tsx
index e84892a6..57961582 100644
--- a/src/components/collabora/info-card.tsx
+++ b/src/components/collabora/info-card.tsx
@@ -16,6 +16,8 @@ export type InfoCardData = {
   iconClassName: string
   /** Desktop description width: Figma wraps these copies at fixed widths (+1px, as Figma rounds text widths down). */
   descriptionClassName?: string
+  /** Title size/wrapping overrides, for cards whose titles don't fit the default single line. */
+  titleClassName?: string
   /** Makes the whole card a link: only then does it react to hover. */
   href?: string
 }
@@ -33,7 +35,8 @@ export function InfoCard({
   className?: string
   descriptionColorClassName?: string
 }) {
-  const { title, description, mobileDescription, icon, iconClassName, descriptionClassName, href } = card
+  const { title, description, mobileDescription, icon, iconClassName, descriptionClassName, titleClassName, href } =
+    card
 
   return (
     // Glass draws a 1px border inside the Figma box: padding is 1px less than in Figma (25px / 40px)
@@ -53,7 +56,12 @@ export function InfoCard({
           <Image src={icon} alt="" className={iconClassName} />
         </div>
         {/* On the narrowest phones an email title may not fit: let it wrap after the "@" */}
-        <h3 className="typo-title-large md:typo-headline-medium min-w-0 bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text text-transparent md:whitespace-nowrap">
+        <h3
+          className={cn(
+            "typo-title-large md:typo-headline-medium min-w-0 bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text text-transparent md:whitespace-nowrap",
+            titleClassName
+          )}
+        >
           {title.replace("@", "@\u200B")}
         </h3>
       </div>
diff --git a/src/components/collabora/photo-section.tsx b/src/components/collabora/photo-section.tsx
index 52c51847..e16e4721 100644
--- a/src/components/collabora/photo-section.tsx
+++ b/src/components/collabora/photo-section.tsx
@@ -1,7 +1,8 @@
 import Image, { type StaticImageData } from "next/image"
 import type { ReactNode } from "react"
+import { CONTAINER } from "@/components/layout/page"
 import { cn } from "@/lib/utils"
-import { SectionTitle, sectionContainerClass, sectionTextClass } from "./section"
+import { SectionTitle, sectionTextClass } from "./section"
 
 type PhotoSectionProps = {
   title: ReactNode
@@ -15,12 +16,12 @@ type PhotoSectionProps = {
   decorations: ReactNode
   /** Photo on the left on desktop. */
   photoFirst?: boolean
-  className?: string
 }
 
 /**
- * Heading + copy next to a photo. Stacked (copy, then photo) up to `xl`; from `xl` the two columns keep the
- * 719:611 ratio of the 1728px Figma frame, bottom-aligned.
+ * Heading + copy next to a photo. Stacked (copy, then a photo as wide as the copy) on phones and portrait tablets;
+ * from `lg` the two columns keep the 719:611 ratio of the 1728px Figma frame, centred on each other so a taller
+ * text column doesn't leave the photo hanging at one edge.
  */
 export function PhotoSection({
   title,
@@ -30,27 +31,26 @@ export function PhotoSection({
   frameClassName,
   decorations,
   photoFirst = false,
-  className,
 }: PhotoSectionProps) {
   return (
-    <section className={cn(sectionContainerClass, className)}>
+    <section className={CONTAINER}>
       <div
         className={cn(
-          "flex flex-col items-center gap-6 md:items-start md:gap-12 xl:grid xl:items-end xl:gap-x-27",
-          photoFirst ? "xl:grid-cols-[611fr_719fr]" : "xl:grid-cols-[719fr_611fr]"
+          "flex flex-col items-start gap-8 md:gap-12 lg:grid lg:items-center lg:gap-x-12 xl:gap-x-27",
+          photoFirst ? "lg:grid-cols-[611fr_719fr]" : "lg:grid-cols-[719fr_611fr]"
         )}
       >
-        <div className={cn("flex w-full flex-col gap-6 md:max-w-179.75 md:gap-3", photoFirst && "xl:order-last")}>
+        <div className={cn("flex w-full flex-col gap-6 md:max-w-179.75 md:gap-3", photoFirst && "lg:order-last")}>
           <SectionTitle>{title}</SectionTitle>
           <div className={cn(sectionTextClass, "flex flex-col gap-5 pb-2 md:gap-3 md:pb-0")}>{children}</div>
         </div>
 
-        <div className={cn("relative w-full md:max-w-152.75 xl:max-w-none", frameClassName)}>
+        <div className={cn("relative w-full md:max-w-179.75 lg:max-w-none", frameClassName)}>
           <div className="absolute inset-0 overflow-hidden rounded-rectangles">
             <Image
               src={image}
               alt=""
-              sizes="(min-width: 768px) 611px, 100vw"
+              sizes="(min-width: 1024px) 611px, (min-width: 768px) 720px, 100vw"
               className={cn("absolute max-w-none", imageClassName)}
             />
           </div>
diff --git a/src/components/collabora/section.tsx b/src/components/collabora/section.tsx
index 03da89db..086a7da7 100644
--- a/src/components/collabora/section.tsx
+++ b/src/components/collabora/section.tsx
@@ -1,31 +1,16 @@
 import type { ReactNode } from "react"
+import { SECTION_TITLE } from "@/components/layout/page"
 import { cn } from "@/lib/utils"
 
-/**
- * Horizontal frame shared by every Collabora section: 24px gutters on mobile (402px Figma frame), growing to the
- * 145px gutters of the 1728px desktop frame, then centered so the content column never exceeds 1438px.
- */
-export const sectionContainerClass = "mx-auto w-full max-w-432 px-6 md:px-[clamp(1.5rem,8.391%,9.0625rem)]"
-
 export function SectionTitle({ children, className }: { children: ReactNode; className?: string }) {
-  return (
-    <h2
-      className={cn(
-        "typo-headline-medium md:typo-display-medium bg-linear-to-b from-text-accent-lightbg to-[#41496b] bg-clip-text text-center text-transparent md:mb-3 md:text-start",
-        className
-      )}
-    >
-      {children}
-    </h2>
-  )
+  return <h2 className={cn(SECTION_TITLE, "text-start", className)}>{children}</h2>
 }
 
 /**
- * Section body copy: Red Hat 16px centered on mobile, Poppins 24px on desktop. Browsers add the letter-spacing after
- * the last glyph of a line too, so lines that exactly fill their Figma box would wrap: the box gets 1px of slack.
+ * Section body copy: Figma sets it in Poppins 24px at 1728px. Between the two frames that size turns paragraphs
+ * into walls of text, so it steps 16 → 20 → 24px, and stays left-aligned like the other pages.
  */
-export const sectionTextClass =
-  "typo-body-large md:typo-headline-small -mx-[0.5px] text-center text-black md:mr-[-1px] md:ml-0 md:text-start"
+export const sectionTextClass = "typo-body-large md:typo-headline-extrasmall 3xl:typo-headline-small text-text-primary"
 
 export function Highlight({ children }: { children: ReactNode }) {
   return <span className="text-blue-secondary">{children}</span>

From b885e7bab6993ad04fd04e48f986d37320759085 Mon Sep 17 00:00:00 2001
From: Bianca Roberta Ianosel <ianoselbiancaroberta02@gmail.com>
Date: Mon, 2 Nov 2026 09:25:51 +0000
Subject: [PATCH 3/3] refactor(collabora): use the shared section tokens and
 pass card title styles once

- SectionTitle and sectionTextClass give way to SECTION_TITLE and
  SECTION_LEAD, so /collabora's titles and copy step at the same
  breakpoints as the other pages.
- InfoCard takes titleClassName as a prop: /collabora sets it once, and
  /join no longer reaches into the card with [&_h3] selectors.
- PAGE_HERO_TOP lets pages that need no space under the hero use the
  hero's top padding without cancelling the bottom one.
---
 src/app/storia/page.tsx                            |  2 --
 src/components/collabora/about-section.tsx         |  8 ++++----
 src/components/collabora/collaboration-section.tsx |  8 ++++----
 src/components/collabora/contact-section.tsx       | 13 ++++---------
 src/components/collabora/info-card.tsx             |  8 ++++----
 src/components/collabora/photo-section.tsx         |  7 +++----
 src/components/collabora/section.tsx               | 11 -----------
 src/components/join/admin.tsx                      |  3 ++-
 src/components/join/cards.tsx                      |  7 ++++---
 src/components/layout/page.ts                      |  3 ++-
 src/components/storia/hero.tsx                     |  1 -
 11 files changed, 27 insertions(+), 44 deletions(-)

diff --git a/src/app/storia/page.tsx b/src/app/storia/page.tsx
index c9df87dd..4d6edfc0 100644
--- a/src/app/storia/page.tsx
+++ b/src/app/storia/page.tsx
@@ -23,8 +23,6 @@ export default function HistoryPage() {
     <main className={PAGE_MAIN}>
       <HistoryHero />
 
-      {/* 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={
diff --git a/src/components/collabora/about-section.tsx b/src/components/collabora/about-section.tsx
index bf7a0070..48202e60 100644
--- a/src/components/collabora/about-section.tsx
+++ b/src/components/collabora/about-section.tsx
@@ -4,12 +4,12 @@ import chatIcon from "@/assets/icons/collabora/chat.svg"
 import groupIcon from "@/assets/icons/collabora/group.svg"
 import handshakeIcon from "@/assets/icons/collabora/handshake.svg"
 import schoolIcon from "@/assets/icons/collabora/school.svg"
-import { CONTAINER } from "@/components/layout/page"
+import { CONTAINER, SECTION_LEAD, SECTION_TITLE } from "@/components/layout/page"
 import { Button } from "@/components/ui/button"
 import { Carousel, CarouselContent, CarouselDots, CarouselItem } from "@/components/ui/carousel"
 import { cn } from "@/lib/utils"
 import { InfoCard, type InfoCardData } from "./info-card"
-import { Aside, Highlight, SectionTitle, sectionTextClass } from "./section"
+import { Aside, Highlight } from "./section"
 
 const cards: InfoCardData[] = [
   {
@@ -69,8 +69,8 @@ export function AboutSection() {
       <div className="flex flex-col gap-8.75 md:gap-12 xl:flex-row xl:items-start xl:justify-between">
         <div className="flex w-full flex-col items-start gap-6 md:max-w-179.75 md:gap-2.5">
           <div className="flex w-full flex-col gap-6 md:gap-3">
-            <SectionTitle>Chi siamo?</SectionTitle>
-            <div className={cn(sectionTextClass, "flex flex-col gap-5 pb-2 md:gap-3 md:pb-0")}>
+            <h2 className={SECTION_TITLE}>Chi siamo?</h2>
+            <div className={cn(SECTION_LEAD, "flex flex-col gap-5 pb-2 md:gap-3 md:pb-0")}>
               <p>PoliNetwork è l'infrastruttura di comunicazione studentesca del Politecnico di Milano.</p>
               <p>
                 Gestiamo oltre 500 gruppi Telegram e WhatsApp, una presenza social in crescita e strumenti digitali
diff --git a/src/components/collabora/collaboration-section.tsx b/src/components/collabora/collaboration-section.tsx
index 394043e7..81832916 100644
--- a/src/components/collabora/collaboration-section.tsx
+++ b/src/components/collabora/collaboration-section.tsx
@@ -1,13 +1,13 @@
-import { CONTAINER } from "@/components/layout/page"
+import { CONTAINER, SECTION_LEAD, SECTION_TITLE } from "@/components/layout/page"
 import { cn } from "@/lib/utils"
-import { Aside, Highlight, SectionTitle, sectionTextClass } from "./section"
+import { Aside, Highlight } from "./section"
 
 export function CollaborationSection() {
   return (
     <section className={CONTAINER}>
       <div className="flex flex-col gap-6 md:gap-3">
-        <SectionTitle>Cosa possiamo fare insieme?</SectionTitle>
-        <div className={cn(sectionTextClass, "flex flex-col gap-5 pb-2 md:gap-3 md:pb-0")}>
+        <h2 className={SECTION_TITLE}>Cosa possiamo fare insieme?</h2>
+        <div className={cn(SECTION_LEAD, "flex flex-col gap-5 pb-2 md:gap-3 md:pb-0")}>
           {/* Figma runs this paragraph 959px wide at 24px; at 20px that is ~90 characters a line, so it narrows below 3xl */}
           <p className="3xl:max-w-239.75 md:max-w-180">
             Collaborare con noi significa <Highlight>accedere a questa community in modo diretto</Highlight>. Non siamo
diff --git a/src/components/collabora/contact-section.tsx b/src/components/collabora/contact-section.tsx
index 27b30ec2..4e43c90d 100644
--- a/src/components/collabora/contact-section.tsx
+++ b/src/components/collabora/contact-section.tsx
@@ -2,10 +2,9 @@ import { Fragment } from "react"
 import favoriteIcon from "@/assets/icons/collabora/favorite.svg"
 import mailIcon from "@/assets/icons/collabora/mail.svg"
 import promptSuggestionIcon from "@/assets/icons/collabora/prompt-suggestion.svg"
-import { CONTAINER } from "@/components/layout/page"
+import { CONTAINER, SECTION_TITLE } from "@/components/layout/page"
 import { cn } from "@/lib/utils"
 import { InfoCard, type InfoCardData } from "./info-card"
-import { SectionTitle } from "./section"
 
 const cards: InfoCardData[] = [
   {
@@ -13,8 +12,6 @@ const cards: InfoCardData[] = [
     description: "Ci scrivi una mail descrivendo chi sei e cosa vorresti fare",
     mobileDescription: "Ci scrivi una mail spiegando chi sei e cosa vorresti fare",
     icon: mailIcon,
-    // In a row the three titles share the width: 24px, wrapping (the address after its "@")
-    titleClassName: "md:typo-headline-small lg:whitespace-normal",
     iconClassName: "mr-2.5 h-5.5 w-7 md:mr-0 md:h-12 md:w-15",
     descriptionClassName: "max-w-56",
     // The only step that is an action: it opens the mail client
@@ -25,8 +22,6 @@ const cards: InfoCardData[] = [
     description: "Quale valore porta il tuo progetto agli studenti del Politecnico?",
     mobileDescription: "Quale valore porta il progetto agli studenti del Poli?",
     icon: favoriteIcon,
-    // In a row the three titles share the width: 24px, wrapping (the address after its "@")
-    titleClassName: "md:typo-headline-small lg:whitespace-normal",
     iconClassName: "mr-2.5 h-5.5 w-6 md:mt-0.5 md:mr-0 md:ml-0.5 md:h-12.5 md:w-13.5",
     descriptionClassName: "max-w-65.75",
   },
@@ -40,8 +35,6 @@ const cards: InfoCardData[] = [
     ),
     mobileDescription: "Rispondiamo al più presto a tutte le richieste!",
     icon: promptSuggestionIcon,
-    // In a row the three titles share the width: 24px, wrapping (the address after its "@")
-    titleClassName: "md:typo-headline-small lg:whitespace-normal",
     iconClassName: "mr-2.5 h-5.5 w-7 md:mt-0.5 md:mr-0 md:h-11.75 md:w-15",
     descriptionClassName: "max-w-56",
   },
@@ -56,7 +49,7 @@ const connectorClassNames = [
 export function ContactSection() {
   return (
     <section className={CONTAINER}>
-      <SectionTitle className="mb-7.5 md:mb-9.25">Come contattarci</SectionTitle>
+      <h2 className={cn(SECTION_TITLE, "mb-7.5 md:mb-9.25")}>Come contattarci</h2>
 
       {/* A row of equal steps from lg (tighter padding until 3xl); stacked below, at Figma's card width */}
       <div className="flex flex-col items-center md:items-start lg:flex-row lg:items-stretch">
@@ -64,6 +57,8 @@ export function ContactSection() {
           <Fragment key={card.title}>
             <InfoCard
               card={card}
+              // In a row the three titles share the width, so they shrink and may wrap
+              titleClassName="md:typo-headline-small lg:whitespace-normal"
               className="w-full md:w-104.25 md:shrink-0 lg:w-auto lg:min-w-0 lg:flex-1 lg:max-3xl:p-6"
             />
             {index < connectorClassNames.length && (
diff --git a/src/components/collabora/info-card.tsx b/src/components/collabora/info-card.tsx
index 57961582..b9c4bb7c 100644
--- a/src/components/collabora/info-card.tsx
+++ b/src/components/collabora/info-card.tsx
@@ -16,8 +16,6 @@ export type InfoCardData = {
   iconClassName: string
   /** Desktop description width: Figma wraps these copies at fixed widths (+1px, as Figma rounds text widths down). */
   descriptionClassName?: string
-  /** Title size/wrapping overrides, for cards whose titles don't fit the default single line. */
-  titleClassName?: string
   /** Makes the whole card a link: only then does it react to hover. */
   href?: string
 }
@@ -29,14 +27,16 @@ export type InfoCardData = {
 export function InfoCard({
   card,
   className,
+  titleClassName,
   descriptionColorClassName = "text-text-primary",
 }: {
   card: InfoCardData
   className?: string
+  /** Title size and wrapping, for rows where the default single-line title doesn't fit. */
+  titleClassName?: string
   descriptionColorClassName?: string
 }) {
-  const { title, description, mobileDescription, icon, iconClassName, descriptionClassName, titleClassName, href } =
-    card
+  const { title, description, mobileDescription, icon, iconClassName, descriptionClassName, href } = card
 
   return (
     // Glass draws a 1px border inside the Figma box: padding is 1px less than in Figma (25px / 40px)
diff --git a/src/components/collabora/photo-section.tsx b/src/components/collabora/photo-section.tsx
index e16e4721..03528219 100644
--- a/src/components/collabora/photo-section.tsx
+++ b/src/components/collabora/photo-section.tsx
@@ -1,8 +1,7 @@
 import Image, { type StaticImageData } from "next/image"
 import type { ReactNode } from "react"
-import { CONTAINER } from "@/components/layout/page"
+import { CONTAINER, SECTION_LEAD, SECTION_TITLE } from "@/components/layout/page"
 import { cn } from "@/lib/utils"
-import { SectionTitle, sectionTextClass } from "./section"
 
 type PhotoSectionProps = {
   title: ReactNode
@@ -41,8 +40,8 @@ export function PhotoSection({
         )}
       >
         <div className={cn("flex w-full flex-col gap-6 md:max-w-179.75 md:gap-3", photoFirst && "lg:order-last")}>
-          <SectionTitle>{title}</SectionTitle>
-          <div className={cn(sectionTextClass, "flex flex-col gap-5 pb-2 md:gap-3 md:pb-0")}>{children}</div>
+          <h2 className={SECTION_TITLE}>{title}</h2>
+          <div className={cn(SECTION_LEAD, "flex flex-col gap-5 pb-2 md:gap-3 md:pb-0")}>{children}</div>
         </div>
 
         <div className={cn("relative w-full md:max-w-179.75 lg:max-w-none", frameClassName)}>
diff --git a/src/components/collabora/section.tsx b/src/components/collabora/section.tsx
index 086a7da7..6c085ee6 100644
--- a/src/components/collabora/section.tsx
+++ b/src/components/collabora/section.tsx
@@ -1,17 +1,6 @@
 import type { ReactNode } from "react"
-import { SECTION_TITLE } from "@/components/layout/page"
 import { cn } from "@/lib/utils"
 
-export function SectionTitle({ children, className }: { children: ReactNode; className?: string }) {
-  return <h2 className={cn(SECTION_TITLE, "text-start", className)}>{children}</h2>
-}
-
-/**
- * Section body copy: Figma sets it in Poppins 24px at 1728px. Between the two frames that size turns paragraphs
- * into walls of text, so it steps 16 → 20 → 24px, and stays left-aligned like the other pages.
- */
-export const sectionTextClass = "typo-body-large md:typo-headline-extrasmall 3xl:typo-headline-small text-text-primary"
-
 export function Highlight({ children }: { children: ReactNode }) {
   return <span className="text-blue-secondary">{children}</span>
 }
diff --git a/src/components/join/admin.tsx b/src/components/join/admin.tsx
index 7eff89fa..12eb0332 100644
--- a/src/components/join/admin.tsx
+++ b/src/components/join/admin.tsx
@@ -41,7 +41,8 @@ export function AdminSection() {
             <li key={card.title} className="relative min-w-0">
               <InfoCard
                 card={card}
-                className="[&_h3]:typo-title-large h-full md:p-8 [&_h3]:whitespace-normal [&_h3]:text-balance"
+                className="h-full md:p-8"
+                titleClassName="md:typo-title-large md:whitespace-normal text-balance"
               />
               {index < connectors.length && (
                 <Image
diff --git a/src/components/join/cards.tsx b/src/components/join/cards.tsx
index 3e89da3c..d4ea6d0a 100644
--- a/src/components/join/cards.tsx
+++ b/src/components/join/cards.tsx
@@ -1,14 +1,15 @@
 import { InfoCard, type InfoCardData } from "@/components/collabora/info-card"
 import { Carousel, CarouselContent, CarouselDots, CarouselItem } from "@/components/ui/carousel"
 
-const cardClassName = "h-full md:p-6 [&_h3]:typo-title-large [&_h3]:whitespace-normal [&_h3]:text-balance"
+const cardClassName = "h-full md:p-6"
+const titleClassName = "md:typo-title-large md:whitespace-normal text-balance"
 
 export function JoinCards({ cards, carousel = false }: { cards: InfoCardData[]; carousel?: boolean }) {
   if (!carousel) {
     return (
       <div className="grid min-w-0 gap-6 md:grid-cols-2">
         {cards.map((card) => (
-          <InfoCard key={card.title} card={card} className={cardClassName} />
+          <InfoCard key={card.title} card={card} className={cardClassName} titleClassName={titleClassName} />
         ))}
       </div>
     )
@@ -23,7 +24,7 @@ export function JoinCards({ cards, carousel = false }: { cards: InfoCardData[];
       <CarouselContent className="mr-6 ml-2 sm:mr-10 sm:ml-6 md:mx-0 md:grid md:grid-cols-2 md:gap-6">
         {cards.map((card) => (
           <CarouselItem key={card.title} className="basis-[90%] sm:basis-1/2 md:pl-0">
-            <InfoCard card={card} className={cardClassName} />
+            <InfoCard card={card} className={cardClassName} titleClassName={titleClassName} />
           </CarouselItem>
         ))}
       </CarouselContent>
diff --git a/src/components/layout/page.ts b/src/components/layout/page.ts
index 8804266f..ca8cc332 100644
--- a/src/components/layout/page.ts
+++ b/src/components/layout/page.ts
@@ -22,4 +22,5 @@ export const PAGE_MAIN = "flex w-full flex-col gap-24 pb-24 md:gap-32 md:pb-32 x
  * y=286 on desktop, as in every Figma frame. Figma also leaves more air after the hero (~270px at 1728) than between
  * sections (180px): the bottom padding adds that difference to the main gap.
  */
-export const PAGE_HERO = "pt-52 pb-8 md:pt-57.5 md:pb-12 xl:pb-24"
+export const PAGE_HERO_TOP = "pt-52 md:pt-57.5"
+export const PAGE_HERO = `${PAGE_HERO_TOP} pb-8 md:pb-12 xl:pb-24`
diff --git a/src/components/storia/hero.tsx b/src/components/storia/hero.tsx
index 3a2164ea..071ac805 100644
--- a/src/components/storia/hero.tsx
+++ b/src/components/storia/hero.tsx
@@ -4,7 +4,6 @@ import { CONTAINER, PAGE_HERO } from "@/components/layout/page"
 import { Button } from "@/components/ui/button"
 import { Hero } from "@/components/ui/hero"
 
-// Figma: a centred XL title and nothing else. The board portraits appear further down, under "I nostri direttivi".
 export function HistoryHero() {
   return (
     <section className={`${CONTAINER} ${PAGE_HERO} flex flex-col items-center gap-10`}>