feat(struttura): unify the organisation chart and align /about with Figma

src/app/about/page.tsx

@@ -3,6 +3,7 @@ import Link from "next/link"
 import { FiArrowUpRight } from "react-icons/fi"
 import { AssociationBodies } from "@/components/structure/association-bodies"
 import { BoardGallery } from "@/components/structure/board-gallery"
+import { CONTAINER } from "@/components/structure/constants"
 import { LegalStatus } from "@/components/structure/legal-status"
 import { OrganizationChart } from "@/components/structure/organization-chart"
 import { Participation } from "@/components/structure/participation"
@@ -15,14 +16,14 @@ 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 containerClass = `${CONTAINER} flex flex-col gap-10 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"
 
 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,7 +50,7 @@ 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">
+      <section className={`${CONTAINER} flex flex-col items-center gap-8 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>
@@ -63,7 +64,7 @@ export default function StructurePage() {
           </Link>
         </Button>
       </section>
-      <section aria-label="Forma giuridica e documenti associativi" className="mx-auto w-full max-w-330 px-6">
+      <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/storia/page.tsx

@@ -1,10 +1,9 @@
 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 TextOnlyLayout from "@/components/layout/TextOnlySection"
 import { Boards } from "@/components/storia/boards"
+import { CONTAINER } from "@/components/storia/constants"
 import { Continuation } from "@/components/storia/continuation"
 import { HistoryHero } from "@/components/storia/hero"
 import { Organization } from "@/components/storia/organization"
@@ -20,10 +19,12 @@ 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={
@@ -42,32 +43,13 @@ export default function HistoryPage() {
             </>
           }
           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 />
@@ -92,25 +74,23 @@ export default function HistoryPage() {
             </>
           }
           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="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>
+          </div>
         </TextOnlyLayout>
 
         <Organization />

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

src/components/chi-siamo/constants.ts

@@ -0,0 +1,7 @@
+/** Same content column and gutters as /storia and the homepage. */
+export const CONTAINER = "mx-auto w-full max-w-350 px-6 sm:px-10 lg:px-16"
+
+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"

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 { Button } from "@/components/ui/button"
+import { CONTAINER, SECTION_TITLE } from "./constants"
 
 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>
   )

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 { Card } from "@/components/ui/card"
+import { CONTAINER, SECTION_LEAD, SECTION_TITLE } from "./constants"
 
 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>

src/components/chi-siamo/path-section.tsx

@@ -2,6 +2,7 @@ import { FiBook, FiClipboard, FiFileText, FiGift, FiUser, FiUserCheck } from "re
 import { Glass } from "@/components/glass"
 import { GradientIcon } from "@/components/gradient-icon"
 import { cn } from "@/lib/utils"
+import { CONTAINER, SECTION_LEAD, SECTION_TITLE } from "./constants"
 
 const steps = [
   { title: "TOL", description: "Simulazioni, guide e consigli per affrontarlo al meglio.", icon: FiBook },
@@ -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.

src/components/chi-siamo/problem-section.tsx

@@ -1,5 +1,6 @@
 import { FiEdit, FiFileText, FiUsers } from "react-icons/fi"
-import { Card, CardAction, CardContent } from "@/components/ui/card"
+import { GradientIcon } from "@/components/gradient-icon"
+import { CONTAINER, SECTION_LEAD, SECTION_TITLE } from "./constants"
 
 const questions = [
   { text: "Dove trovo il gruppo del mio corso?", icon: FiUsers },
@@ -9,23 +10,22 @@ const questions = [
 
 export function ProblemSection() {
   return (
-    <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>
   )
 }