feat(team): calmer team sections with non-interactive specialisms

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>

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

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

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

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

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>