fix(storia): match hero title to Figma and tidy chapter cards

src/components/storia/hero.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image"
 import Link from "next/link"
-import { FiArrowDown, FiArrowUpRight, FiUsers } from "react-icons/fi"
+import { FiArrowDown, FiUsers } from "react-icons/fi"
 import { Glass } from "@/components/glass"
 import { GradientIcon } from "@/components/gradient-icon"
 import { Button } from "@/components/ui/button"
@@ -22,12 +22,12 @@ 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">
-        <div className="[&_h2]:typo-display-medium sm:[&_h2]:typo-display-large 2xl:[&_h2]:typo-display-extralarge w-full xl:[&>div]:items-start [&_h2]:text-balance [&_h2]:py-0 xl:[&_h2]:text-start [&_p]:max-w-145 [&_p]:text-balance xl:[&_p]:text-start">
-          <Hero
-            title="La nostra storia"
-            description="Da un gruppo Telegram a una rete costruita dagli studenti, per gli studenti."
-          />
-        </div>
+        <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">
@@ -36,7 +36,7 @@ export function HistoryHero() {
           </Button>
           <Button asChild size="lg" variant="glass">
             <Link href="#direttivi">
-              Conosci le persone <FiArrowUpRight aria-hidden />
+              Conosci le persone <FiArrowDown aria-hidden />
             </Link>
           </Button>
         </div>

src/components/storia/organization.tsx

@@ -1,13 +1,178 @@
-import Image from "next/image"
 import Link from "next/link"
-import { FiArrowDown, FiMonitor } from "react-icons/fi"
-import { LuCrown, LuShield, LuShieldCheck, LuUserCog } from "react-icons/lu"
-import organizationImage from "@/assets/images/storia/organigramma.png"
+import { FiArrowDown } from "react-icons/fi"
+import {
+  LuBookUser,
+  LuCodeXml,
+  LuCrown,
+  LuGlobe,
+  LuHandshake,
+  LuPencilRuler,
+  LuShield,
+  LuShieldCheck,
+  LuUserCog,
+  LuUsersRound,
+} from "react-icons/lu"
 import { CardIcon } from "@/components/card-icon"
-import { Glass } from "@/components/glass"
+import { GradientIcon } from "@/components/gradient-icon"
 import { Button } from "@/components/ui/button"
+import { Card, CardTitle } from "@/components/ui/card"
+import { cn } from "@/lib/utils"
 
-const teams = ["HR", "IT", "Design e Marketing", "International", "Eventi"]
+const teamLeads = [
+  { title: "Team lead HR", icon: LuBookUser },
+  { title: "Team lead IT", icon: LuCodeXml },
+  { title: "Team lead Design & Marketing", icon: LuPencilRuler },
+  { title: "Team lead International", icon: LuGlobe },
+  { title: "Team lead Eventi & Partnership", icon: LuHandshake },
+]
+
+const nodeClassName = "[&_h3]:text-text-primary"
+const mainNodeClassName = "[&_h3]:typo-title-large w-fit px-4 [&_h3]:whitespace-nowrap"
+
+type BranchPosition = "first" | "middle" | "last" | "only"
+
+/** Horizontal rail and arrow above one child of a branch: the rail runs from the first child's center to the last's. */
+function BranchArrow({ position }: { position: BranchPosition }) {
+  return (
+    <div aria-hidden className="relative flex h-8 justify-center">
+      {position !== "only" && (
+        <span
+          className={cn(
+            "absolute top-0 h-0.5 bg-text-secondary",
+            position === "first" && "right-0 left-1/2",
+            position === "middle" && "inset-x-0",
+            position === "last" && "right-1/2 left-0"
+          )}
+        />
+      )}
+      <FiArrowDown className="size-6 text-text-secondary" />
+    </div>
+  )
+}
+
+function branchPosition(index: number, count: number): BranchPosition {
+  if (count === 1) return "only"
+  if (index === 0) return "first"
+  return index === count - 1 ? "last" : "middle"
+}
+
+function Stem() {
+  return <span aria-hidden className="mx-auto block h-6 w-0.5 bg-text-secondary" />
+}
+
+function DesktopChart() {
+  return (
+    <div className="hidden w-full flex-col lg:flex">
+      <CardIcon
+        title="Direttivo"
+        icon={LuCrown}
+        size="xs"
+        className={cn(nodeClassName, mainNodeClassName, "mx-auto")}
+      />
+      <Stem />
+      <div className="grid grid-cols-6">
+        {/* Rail from the center of the admin column (1/12) to the center of the Team growth columns (7/12) */}
+        <div aria-hidden className="relative col-span-6 h-8">
+          <span className="absolute top-0 right-[41.667%] left-[8.333%] h-0.5 bg-text-secondary" />
+          <FiArrowDown className="-translate-x-1/2 absolute top-0 left-[8.333%] size-6 text-text-secondary" />
+          <FiArrowDown className="-translate-x-1/2 absolute top-0 left-[58.333%] size-6 text-text-secondary" />
+        </div>
+        <div className="flex min-w-0 flex-col items-center px-2">
+          <CardIcon
+            title="Capi admin"
+            icon={LuShieldCheck}
+            size="xs"
+            className={cn(nodeClassName, mainNodeClassName)}
+          />
+          <BranchArrow position="only" />
+          <CardIcon title="Admin" icon={LuShield} size="xs" className={cn(nodeClassName, mainNodeClassName)} />
+        </div>
+        <div className="col-span-5 flex min-w-0 flex-col">
+          <CardIcon
+            title="Team growth"
+            icon={LuUserCog}
+            size="xs"
+            className={cn(nodeClassName, mainNodeClassName, "mx-auto")}
+          />
+          <Stem />
+          <ul className="grid grid-cols-5">
+            {teamLeads.map((lead, index) => (
+              <li key={lead.title} className="flex min-w-0 flex-col">
+                <BranchArrow position={branchPosition(index, teamLeads.length)} />
+                <div className="flex flex-1 flex-col px-2">
+                  <CardIcon title={lead.title} icon={lead.icon} size="xs" className={cn(nodeClassName, "h-full")} />
+                </div>
+                <BranchArrow position="only" />
+              </li>
+            ))}
+          </ul>
+          <div className="px-2">
+            <Card className="h-auto w-full flex-row items-center justify-center gap-3 border-white/50 p-4">
+              <GradientIcon icon={LuUsersRound} className="size-8 shrink-0" />
+              <CardTitle gradient={false} className="typo-title-large">
+                Membri dei team
+              </CardTitle>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function MobileChart() {
+  return (
+    <div className="flex min-w-0 flex-col items-center lg:hidden">
+      <CardIcon title="Direttivo" icon={LuCrown} size="xs" className={cn(nodeClassName, mainNodeClassName)} />
+      <Stem />
+      <div className="grid w-full min-w-0 grid-cols-2 gap-4">
+        <div aria-hidden className="relative col-span-2 h-8">
+          <span className="absolute top-0 right-1/4 left-1/4 h-0.5 bg-text-secondary" />
+          <FiArrowDown className="-translate-x-1/2 absolute top-0 left-1/4 size-6 text-text-secondary" />
+          <FiArrowDown className="-translate-x-1/2 absolute top-0 left-3/4 size-6 text-text-secondary" />
+        </div>
+        <div className="flex min-w-0 flex-col items-center">
+          <CardIcon
+            title="Capi admin"
+            icon={LuShieldCheck}
+            size="xs"
+            className={cn(nodeClassName, "[&_h3]:typo-title-medium")}
+          />
+          <BranchArrow position="only" />
+          <CardIcon title="Admin" icon={LuShield} size="xs" className={cn(nodeClassName, "[&_h3]:typo-title-medium")} />
+        </div>
+        <div className="flex min-w-0 flex-col items-center">
+          <CardIcon
+            title="Team growth"
+            icon={LuUserCog}
+            size="xs"
+            className={cn(nodeClassName, "[&_h3]:typo-title-medium")}
+          />
+          <BranchArrow position="only" />
+          <ul className="flex w-full min-w-0 flex-col gap-2">
+            {teamLeads.map((lead) => (
+              <li key={lead.title}>
+                <Card className="h-auto min-h-14 w-full flex-row items-center gap-3 border-white/50 p-3">
+                  <GradientIcon icon={lead.icon} className="size-6 shrink-0" />
+                  <CardTitle gradient={false} className="typo-label-medium min-w-0">
+                    {lead.title}
+                  </CardTitle>
+                </Card>
+              </li>
+            ))}
+          </ul>
+          <BranchArrow position="only" />
+          <CardIcon
+            title="Membri dei team"
+            icon={LuUsersRound}
+            size="xs"
+            className={cn(nodeClassName, "[&_h3]:typo-title-medium")}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
 
 export function Organization() {
   return (
@@ -25,37 +190,14 @@ export function Organization() {
           </Link>
         </Button>
       </div>
-      <div id="organigramma" className="xl:-mt-57 w-full scroll-mt-32 xl:max-w-220 xl:self-end">
-        <Image
-          src={organizationImage}
-          alt="Il Direttivo coordina i Capi admin e il Team growth. I Capi admin coordinano gli Admin. Il Team growth coordina i team lead HR, IT, Design e Marketing, International ed Eventi, con i rispettivi membri."
-          className="hidden h-auto w-full object-contain mix-blend-multiply md:block"
-          sizes="(max-width: 1279px) 100vw, 882px"
-        />
-        <div className="flex flex-col items-center gap-4 md:hidden">
-          <CardIcon title="Direttivo" icon={LuCrown} size="xs" className="max-w-40" />
-          <FiArrowDown aria-hidden className="size-5 text-blue-secondary" />
-          <div className="grid w-full gap-6 min-[480px]:grid-cols-2">
-            <Glass className="flex flex-col items-center gap-4 rounded-rectangles p-4">
-              <CardIcon title="Capi admin" icon={LuShieldCheck} size="xs" />
-              <FiArrowDown aria-hidden className="size-5 text-blue-secondary" />
-              <CardIcon title="Admin" icon={LuShield} size="xs" />
-            </Glass>
-            <Glass className="flex flex-col items-center gap-4 rounded-rectangles p-4">
-              <CardIcon title="Team growth" icon={LuUserCog} size="xs" />
-              <FiArrowDown aria-hidden className="size-5 text-blue-secondary" />
-              <ul className="grid w-full grid-cols-2 gap-3 min-[480px]:grid-cols-1">
-                {teams.map((team) => (
-                  <li key={team} className="min-w-0">
-                    <CardIcon title={`Team lead ${team}`} icon={FiMonitor} size="xs" className="h-full" />
-                  </li>
-                ))}
-              </ul>
-              <FiArrowDown aria-hidden className="size-5 text-blue-secondary" />
-              <CardIcon title="Membri dei team" icon={FiMonitor} size="xs" />
-            </Glass>
-          </div>
-        </div>
+      <div
+        id="organigramma"
+        role="img"
+        aria-label="Il Direttivo coordina i Capi admin e il Team growth. I Capi admin coordinano gli Admin. Il Team growth coordina i team lead HR, IT, Design & Marketing, International ed Eventi & Partnership, con i rispettivi membri."
+        className="xl:-mt-57 w-full scroll-mt-32 xl:max-w-220 xl:self-end"
+      >
+        <DesktopChart />
+        <MobileChart />
       </div>
     </section>
   )

src/components/storia/timeline.tsx

@@ -59,7 +59,7 @@ export function Timeline() {
 }
 
 const chapterVisuals = [
-  <div key="rete" className="grid w-full gap-4">
+  <div key="rete" className="grid w-full max-w-110 grid-cols-2 gap-4">
     {[
       { icon: telegram.src, title: "Il primo gruppo" },
       { icon: FiUser, title: "I primi admin e volontari" },
@@ -69,7 +69,7 @@ const chapterVisuals = [
       <CardIcon key={item.title} {...item} size="xs" className="h-full [&_h3]:text-balance" />
     ))}
   </div>,
-  <div key="spazio" className="grid w-full gap-4">
+  <div key="spazio" className="grid w-full max-w-110 gap-4">
     {[
       { icon: FiClipboard, title: "Regole interne" },
       { icon: FiUserCheck, title: "Comunicazioni selezionate" },
@@ -83,7 +83,7 @@ const chapterVisuals = [
       />
     ))}
   </div>,
-  <div key="consiglio" className="grid w-full gap-4">
+  <div key="consiglio" className="grid w-full max-w-110 gap-4">
     {[
       { title: "5", caption: "persone", icon: FiUser },
       { title: "~25", caption: "rappresentanti", icon: FiUsers },
@@ -92,7 +92,7 @@ const chapterVisuals = [
       <CardCaption key={item.title} {...item} className="h-auto w-full gap-3 p-6" />
     ))}
   </div>,
-  <div key="team" className="grid w-full gap-4">
+  <div key="team" className="grid w-full max-w-110 gap-4">
     <CardCaption
       title="I primi dipartimenti"
       caption="Eventi · HR · IT · Social · Gestione"
@@ -106,7 +106,7 @@ const chapterVisuals = [
       className="[&_h3]:typo-headline-extrasmall h-auto w-full gap-3 p-6 [&_h3]:text-balance"
     />
   </div>,
-  <div key="associazione" className="grid w-full gap-4">
+  <div key="associazione" className="grid w-full max-w-110 gap-4">
     <CardCaption
       title="Prima"
       caption="Consiglio degli Admin · Garanti · Coordinamento"
@@ -120,7 +120,7 @@ const chapterVisuals = [
       className="[&_h3]:typo-headline-extrasmall h-auto w-full gap-3 p-6 [&_h3]:text-balance"
     />
   </div>,
-  <div key="albo" className="grid w-full gap-4">
+  <div key="albo" className="grid w-full max-w-110 gap-4">
     <CardCaption
       title="APS-ETS"
       caption="Riconosciuto dallo Stato"

src/components/ui/hero.tsx

@@ -31,8 +31,11 @@ export function Hero({
   return (
     <div className={cn("flex flex-col items-center gap-6", className)}>
       {/* Figma "lightheme-XLarge text effect": #020618 → #6e6e6e at 82.69% */}
-      <h2 className="typo-display-large sm:typo-display-extralarge w-full self-stretch text-balance bg-linear-to-b from-text-primary to-83% to-[#6e6e6e] bg-clip-text py-4 text-center text-transparent sm:pt-14 sm:pb-0">
-        {title}
+      {/* The gradient is drawn per line (box-decoration-clone), so a title that wraps keeps the full effect on each line */}
+      <h2 className="typo-display-large sm:typo-display-extralarge w-full self-stretch text-balance py-4 text-center sm:pt-14 sm:pb-0">
+        <span className="bg-linear-to-b from-text-primary to-83% to-[#6e6e6e] box-decoration-clone bg-clip-text text-transparent">
+          {title}
+        </span>
       </h2>
       <p
         className={