feat(collabora): hold the page together between the Figma frames; share one page rhythm

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 />

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 />

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"

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"

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,76 @@ 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.
-            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>
   )
 }

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."

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{" "}

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, 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, sectionContainerClass, sectionTextClass } from "./section"
+import { Aside, Highlight } 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,12 +64,13 @@ 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")}>
+            <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
@@ -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">

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>
   )

src/components/collabora/collaboration-section.tsx

@@ -1,13 +1,15 @@
+import { CONTAINER, SECTION_LEAD, SECTION_TITLE } from "@/components/layout/page"
 import { cn } from "@/lib/utils"
-import { Aside, Highlight, SectionTitle, sectionContainerClass, sectionTextClass } from "./section"
+import { Aside, Highlight } 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">
+        <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
             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>{" "}

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