feat(storia): de-cardify the history page and align it with Figma

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/storia/boards.tsx

@@ -1,17 +1,16 @@
 "use client"
 
 import Image from "next/image"
-import { Glass } from "@/components/glass"
 import TabsNavigation from "@/components/tabs"
 import { Tabs } from "@/components/tabs/tabs"
 import { TabsContent } from "@/components/tabs/tabs-content"
 import { Card, CardContent } from "@/components/ui/card"
 import { cn } from "@/lib/utils"
-import { boardMembers, boardTerms } from "./constants"
+import { boardMembers, boardTerms, CONTAINER } from "./constants"
 
 export function Boards() {
   return (
-    <section id="direttivi" className="mx-auto flex w-full max-w-330 scroll-mt-36 flex-col gap-6 px-6">
+    <section id="direttivi" className={`${CONTAINER} flex scroll-mt-36 flex-col gap-6`}>
       <h2 className="typo-title-large text-blue-secondary">I nostri direttivi</h2>
       <p className="typo-headline-medium sm:typo-display-medium text-balance bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent">
         Ogni mandato, un nuovo capitolo
@@ -27,7 +26,7 @@ export function Boards() {
                     {boardMembers.map((member) => (
                       <Card
                         key={member.name}
-                        className="motion-safe:hover:-translate-y-1 relative aspect-[223.429/263] h-auto w-full max-w-56 rounded-rectangles border-white/50 p-0 shadow-sm transition-transform sm:w-[calc((100%-48px)/3)] xl:w-[calc((100%-72px)/4)] min-[360px]:w-[calc((100%-24px)/2)]"
+                        className="relative aspect-[223.429/263] h-auto w-full max-w-56 rounded-rectangles border-white/50 p-0 shadow-sm sm:w-[calc((100%-48px)/3)] xl:w-[calc((100%-72px)/4)] min-[360px]:w-[calc((100%-24px)/2)]"
                       >
                         <Image
                           src={member.image}
@@ -50,14 +49,14 @@ export function Boards() {
                     Il Direttivo viene eletto ogni due anni dall’Assemblea dei Soci tra i soci dell’associazione.
                   </p>
                 </div>
-                <Glass className="order-first flex flex-col gap-4 rounded-rectangles border-white/50 bg-background-blur p-6 xl:order-last">
+                <div className="order-first flex flex-col gap-4 xl:order-last xl:pt-2">
                   <p className="typo-label-large text-blue-secondary">{term}</p>
                   <h3 className="typo-display-small text-balance">Il Direttivo</h3>
                   <p className="typo-body-large text-pretty">
                     Si concentra sul rafforzamento della struttura, sull’evoluzione dei servizi e sullo sviluppo di
                     nuovi progetti per la community.
                   </p>
-                </Glass>
+                </div>
               </div>
             ) : (
               <div className="flex min-h-70 flex-col items-center justify-center gap-4 text-center">

src/components/storia/constants.ts

@@ -1,3 +1,5 @@
+import { FiUser, FiUserCheck, FiUsers } from "react-icons/fi"
+import telegram from "@/assets/icons/telegram-gradient.svg"
 import ale from "@/assets/images/storia/ale-he.jpg"
 import alessandro from "@/assets/images/storia/alessandro-gabbini.jpg"
 import elia from "@/assets/images/storia/elia-falzoni.jpg"
@@ -6,23 +8,34 @@ import gabriele from "@/assets/images/storia/gabriele-vigano.jpg"
 import lorenzo from "@/assets/images/storia/lorenzo-corallo.jpg"
 import tommaso from "@/assets/images/storia/tommaso-morganti.jpg"
 
+/** Shared section container: Figma's 1272px content column, with the homepage's 24/40/64px gutters (md:px-10 overrides TextOnlyLayout's md:px-36). */
+export const CONTAINER = "mx-auto w-full max-w-350 px-6 sm:px-10 md:px-10 lg:px-16"
+
 // Contenuti del design Figma “La nostra storia”, nodo 5368:5885.
 export const milestones = [
   {
     year: "2016",
+    href: "#capitolo-1",
+    icon: FiUser,
     description:
       "Nasce il primo gruppo per rispondere a una necessità semplice: trovare informazioni e parlare con i compagni di corso.",
   },
   {
     year: "2017",
+    href: "#capitolo-1",
+    icon: telegram.src,
     description: "I gruppi si moltiplicano su Telegram e WhatsApp e iniziamo a coprire tutti i corsi di laurea.",
   },
   {
     year: "2022",
+    href: "#capitolo-5",
+    icon: FiUserCheck,
     description: "PoliNetwork diventa un’APS-ETS, con un direttivo eletto e una struttura ancora più democratica.",
   },
   {
     year: "OGGI",
+    href: "#direttivi",
+    icon: FiUsers,
     description:
       "Oltre 200 admin volontari e una community che accompagna ogni giorno migliaia di studenti del Politecnico di Milano.",
   },

src/components/storia/continuation.tsx

@@ -1,53 +1,60 @@
 import Link from "next/link"
 import { FiArrowUpRight } from "react-icons/fi"
-import { Glass } from "@/components/glass"
 import { Button } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
+import { CONTAINER } from "./constants"
 
+const years = ["2016", "2022", "2026", "?"]
+
+// Figma: text on the left, the years on a line on the right. No panel or gradient behind it, and the "?" is a
+// quiet open slot rather than a filled pill that looks like a button.
 export function Continuation() {
   return (
-    <section className="mx-auto w-full max-w-330 px-6" aria-labelledby="continua-title">
-      <Glass className="grid items-center gap-10 rounded-rectangles border-white/50 bg-linear-to-br from-background-blur to-blue-tertiary/30 p-6 sm:p-12 lg:grid-cols-2 lg:gap-16">
-        <div className="flex min-w-0 flex-col items-start gap-6">
-          <h2
-            id="continua-title"
-            className="typo-headline-medium sm:typo-display-medium text-balance bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent"
-          >
-            La storia continua.
-          </h2>
-          <p className="typo-body-large sm:typo-headline-extrasmall text-pretty">
-            Ogni anno qualcuno arriva, qualcuno si laurea e qualcun altro raccoglie il testimone. La missione rimane la
-            stessa: rendere la vita universitaria più semplice, accessibile e umana.
-          </p>
-          <Button asChild size="lg">
-            <Link href="/collabora">
-              Unisciti a noi <FiArrowUpRight aria-hidden />
-            </Link>
-          </Button>
-        </div>
-        <div className="flex min-w-0 flex-col gap-6">
-          <ol className="grid grid-cols-4 gap-3" aria-label="Dal primo gruppo al prossimo capitolo">
-            {["2016", "2022", "2026", "?"].map((year) => (
-              <li key={year} className="min-w-0">
-                <Glass
-                  className={cn(
-                    "typo-body-medium sm:typo-headline-small flex h-14 items-center justify-center rounded-rectangles border-white/50 p-0 sm:h-18",
-                    year === "?"
-                      ? "bg-button-primary text-text-accent-lightbg"
-                      : "bg-background-blur text-blue-secondary"
-                  )}
-                >
-                  {year}
-                </Glass>
-              </li>
-            ))}
-          </ol>
-          <p className="typo-body-large text-pretty text-text-secondary">Nuove persone, nuove idee, nuovi progetti.</p>
-          <p className="typo-title-large sm:typo-headline-medium text-balance text-blue-secondary">
-            Il prossimo capitolo lo scriviamo insieme.
-          </p>
-        </div>
-      </Glass>
+    <section
+      className={`${CONTAINER} grid items-center gap-12 xl:grid-cols-2 xl:gap-16`}
+      aria-labelledby="continua-title"
+    >
+      <div className="flex min-w-0 flex-col items-start gap-6">
+        <h2
+          id="continua-title"
+          className="typo-headline-medium sm:typo-display-medium text-balance bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent"
+        >
+          La storia continua.
+        </h2>
+        <p className="typo-body-large sm:typo-headline-extrasmall max-w-145 text-pretty">
+          Ogni anno qualcuno arriva, qualcuno si laurea e qualcun altro raccoglie il testimone. Nuove persone, nuove
+          idee, nuovi progetti. La missione rimane la stessa: rendere la vita universitaria più semplice, accessibile e
+          umana.
+        </p>
+      </div>
+
+      <div className="flex min-w-0 flex-col items-start gap-8 xl:items-center">
+        <ol className="flex w-full max-w-120 items-center" aria-label="Dal primo gruppo al prossimo capitolo">
+          {years.map((year, index) => (
+            <li key={year} className={cn("flex items-center", index > 0 && "flex-1")}>
+              {index > 0 && <span aria-hidden className="mx-2 h-px flex-1 bg-blue-primary/40 sm:mx-3" />}
+              <span
+                className={cn(
+                  "typo-title-medium sm:typo-headline-small flex h-12 min-w-14 items-center justify-center rounded-rectangles border px-3 sm:h-16 sm:min-w-20",
+                  year === "?"
+                    ? "border-blue-primary/60 border-dashed text-blue-secondary"
+                    : "border-white/50 bg-background-blur text-blue-secondary"
+                )}
+              >
+                {year}
+              </span>
+            </li>
+          ))}
+        </ol>
+        <p className="typo-title-large sm:typo-headline-medium text-balance text-blue-secondary xl:text-center">
+          Il prossimo capitolo lo scriviamo insieme.
+        </p>
+        <Button asChild size="lg">
+          <Link href="/collabora">
+            Unisciti a noi <FiArrowUpRight aria-hidden />
+          </Link>
+        </Button>
+      </div>
     </section>
   )
 }

src/components/storia/hero.tsx

@@ -1,76 +1,30 @@
-import Image from "next/image"
 import Link from "next/link"
-import { FiArrowDown, FiUsers } from "react-icons/fi"
-import { Glass } from "@/components/glass"
-import { GradientIcon } from "@/components/gradient-icon"
+import { FiArrowDown } from "react-icons/fi"
 import { Button } from "@/components/ui/button"
-import { Card, CardContent } from "@/components/ui/card"
 import { Hero } from "@/components/ui/hero"
-import { cn } from "@/lib/utils"
-import { boardMembers } from "./constants"
-
-const portraits = [
-  { member: boardMembers[1], position: "top-12 left-0 -rotate-6" },
-  {
-    member: boardMembers[0],
-    position: "-translate-x-1/2 top-0 left-1/2 z-10",
-  },
-  { member: boardMembers[3], position: "top-12 right-0 rotate-6 sm:top-16" },
-]
+import { CONTAINER } from "./constants"
 
+// Figma: a centred XL title and nothing else. The board portraits appear further down, under "I nostri direttivi".
 export function HistoryHero() {
   return (
-    <section className="mx-auto grid w-full max-w-330 items-center gap-12 px-6 xl:grid-cols-2 xl:gap-16">
-      <div className="flex min-w-0 flex-col items-center gap-6 xl:items-start">
-        <Hero
-          title="La nostra storia"
-          description="Da un gruppo Telegram a una rete costruita dagli studenti, per gli studenti."
-          gradientDescription
-          className="lg:[&_h2]:typo-display-extralarge [&_h2]:typo-display-large w-full xl:items-start [&_h2]:py-0 xl:[&_h2]:text-start [&_p]:max-w-145 [&_p]:text-balance xl:[&_p]:text-start"
-        />
-        <div className="flex flex-wrap justify-center gap-3 xl:justify-start">
-          <Button asChild size="lg">
-            <Link href="#capitoli">
-              Leggi la nostra storia <FiArrowDown aria-hidden />
-            </Link>
-          </Button>
-          <Button asChild size="lg" variant="glass">
-            <Link href="#direttivi">
-              Conosci le persone <FiArrowDown aria-hidden />
-            </Link>
-          </Button>
-        </div>
-      </div>
-      <div className="relative mx-auto w-full max-w-140">
-        <div className="relative aspect-square w-full sm:aspect-4/3">
-          {portraits.map(({ member, position }) => (
-            <Card
-              key={member.name}
-              className={cn(
-                "absolute aspect-[223.429/263] h-auto w-2/5 rounded-rectangles border-white/50 p-0 shadow-lg",
-                position
-              )}
-            >
-              <Image
-                src={member.image}
-                alt={member.name}
-                sizes="(max-width: 639px) 40vw, 224px"
-                className={cn("absolute max-w-none", member.crop)}
-              />
-              <div className="absolute inset-0 bg-linear-to-t from-blue-secondary/80 to-60% to-transparent" />
-              <CardContent className="typo-label-tiny sm:typo-label-medium absolute inset-x-3 bottom-4 whitespace-nowrap text-center text-white sm:inset-x-4 sm:bottom-6">
-                {member.role}
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-        <Glass className="-translate-x-1/2 absolute bottom-0 left-1/2 z-20 flex w-max max-w-full items-center gap-4 rounded-rectangles border-white/50 bg-background-blur px-6 py-4 shadow-sm">
-          <GradientIcon icon={FiUsers} className="size-10 shrink-0" />
-          <div>
-            <p className="typo-headline-small text-blue-secondary">200+</p>
-            <p className="typo-body-medium">admin volontari, oggi</p>
-          </div>
-        </Glass>
+    <section className={`${CONTAINER} flex flex-col items-center gap-10`}>
+      <Hero
+        title="La nostra storia"
+        description="Da un gruppo Telegram a una rete costruita dagli studenti, per gli studenti."
+        gradientDescription
+        className="[&_h2]:typo-display-fluid-extralarge [&_h2]:py-0 [&_p]:max-w-145 [&_p]:text-balance"
+      />
+      <div className="flex flex-wrap justify-center gap-3">
+        <Button asChild size="lg">
+          <Link href="#capitoli">
+            Leggi la nostra storia <FiArrowDown aria-hidden />
+          </Link>
+        </Button>
+        <Button asChild size="lg" variant="glass">
+          <Link href="#direttivi">
+            Conosci le persone <FiArrowDown aria-hidden />
+          </Link>
+        </Button>
       </div>
     </section>
   )