From 1481cdc9086b11c750ab4bfe7fe2b7d0195dab45 Mon Sep 17 00:00:00 2001 From: Bianca Roberta Ianosel Date: Fri, 16 Oct 2026 08:47:06 +0000 Subject: [PATCH 1/3] fix(storia): match hero title to Figma and tidy chapter cards Center the history hero and use display/extralarge for the title where it fits on one line, as in Figma. Draw the Hero title gradient per line so wrapped titles keep the full effect on every page. Point the 'Conosci le persone' arrow down, since it scrolls to the boards section, and cap the chapter visuals width so the cards next to the timeline are not stretched. --- src/components/storia/hero.tsx | 23 ++++++++++++----------- src/components/storia/timeline.tsx | 12 ++++++------ src/components/ui/hero.tsx | 7 +++++-- 3 files changed, 23 insertions(+), 19 deletions(-) diff --git a/src/components/storia/hero.tsx b/src/components/storia/hero.tsx index d74f088..65952a2 100644 --- a/src/components/storia/hero.tsx +++ b/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" @@ -20,15 +20,16 @@ const portraits = [ export function HistoryHero() { return ( -
-
-
- -
-
+
+
+ {/* Figma: display/extralarge on one line where it fits (≥ lg), display/large below */} + +
diff --git a/src/components/storia/timeline.tsx b/src/components/storia/timeline.tsx index f48e596..63b9304 100644 --- a/src/components/storia/timeline.tsx +++ b/src/components/storia/timeline.tsx @@ -59,7 +59,7 @@ export function Timeline() { } const chapterVisuals = [ -
+
{[ { icon: telegram.src, title: "Il primo gruppo" }, { icon: FiUser, title: "I primi admin e volontari" }, @@ -69,7 +69,7 @@ const chapterVisuals = [ ))}
, -
+
{[ { icon: FiClipboard, title: "Regole interne" }, { icon: FiUserCheck, title: "Comunicazioni selezionate" }, @@ -83,7 +83,7 @@ const chapterVisuals = [ /> ))}
, -
+
{[ { title: "5", caption: "persone", icon: FiUser }, { title: "~25", caption: "rappresentanti", icon: FiUsers }, @@ -92,7 +92,7 @@ const chapterVisuals = [ ))}
, -
+
, -
+
, -
+
{/* Figma "lightheme-XLarge text effect": #020618 → #6e6e6e at 82.69% */} -

- {title} + {/* The gradient is drawn per line (box-decoration-clone), so a title that wraps keeps the full effect on each line */} +

+ + {title} +

Date: Fri, 16 Oct 2026 09:04:46 +0000 Subject: [PATCH 2/3] fix(storia): restore portraits beside the hero text --- src/components/storia/hero.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/storia/hero.tsx b/src/components/storia/hero.tsx index 65952a2..6c26013 100644 --- a/src/components/storia/hero.tsx +++ b/src/components/storia/hero.tsx @@ -20,16 +20,15 @@ const portraits = [ export function HistoryHero() { return ( -

-
- {/* Figma: display/extralarge on one line where it fits (≥ lg), display/large below */} +
+
-
+
+ ) +} + +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 +} + +function DesktopChart() { + return ( +
+ + +
+ {/* Rail from the center of the admin column (1/12) to the center of the Team growth columns (7/12) */} +
+ + + +
+
+ + + +
+
+ + +
    + {teamLeads.map((lead, index) => ( +
  • + +
    + +
    + +
    • + ))} +
+
+ + + + Membri dei team + + +
+
+
+
+ ) +} + +function MobileChart() { + return ( +
+ + +
+
+ + + +
+
+ + + +
+
+ + +
    + {teamLeads.map((lead) => ( +
  • + + + + {lead.title} + + +
    • + ))} +
+ + +
+
+
+ ) +} export function Organization() { return ( @@ -25,37 +190,14 @@ export function Organization() {
-
- 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. -
- - -
- - - - - - - - -
    - {teams.map((team) => ( -
  • - -
    • - ))} -
- - - -
-
+
)