feat(chi-siamo): refine Su di noi layout within its current structure

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

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

@@ -1,31 +1,25 @@
-import { FiHeart } from "react-icons/fi"
-import { Glass } from "@/components/glass"
-import { GradientIcon } from "@/components/gradient-icon"
+import { CONTAINER, SECTION_TITLE } from "./constants"
 
 export function SupportSection() {
   return (
-    <section className="mx-auto w-full max-w-330 px-6">
-      <Glass className="grid items-center gap-10 rounded-rectangles border-white/50 bg-background-blur p-6 sm:p-10 lg:grid-cols-2 lg:gap-16">
-        <div className="flex min-w-0 flex-col gap-6">
-          <GradientIcon icon={FiHeart} className="size-10" />
-          <h2 className="typo-headline-medium sm:typo-display-medium text-balance">Sostieni PoliNetwork</h2>
-          <p className="typo-body-large text-pretty">
-            Se vuoi supportare PoliNetwork economicamente, puoi destinarci il 5x1000 nella dichiarazione dei redditi. Si
-            tratta di una quota IRPEF che verseresti comunque, e che puoi scegliere di indirizzare a noi senza alcun
-            costo aggiuntivo.
-          </p>
-        </div>
-        <Glass className="flex min-w-0 flex-col gap-5 rounded-rectangles bg-background p-6 sm:p-8">
-          <p className="typo-display-medium sm:typo-display-large text-blue-secondary">5x1000</p>
-          <h3 className="typo-title-large text-balance">Il tuo sostegno può fare la differenza</h3>
-          <p className="typo-body-large text-pretty">
-            Nella sezione dedicata agli Enti del Terzo Settore, indica il nostro codice fiscale:
-          </p>
-          <p className="typo-title-large sm:typo-display-small whitespace-nowrap text-blue-secondary tabular-nums">
-            97927490157
-          </p>
-        </Glass>
-      </Glass>
+    <section className={`${CONTAINER} grid gap-10 lg:grid-cols-2 lg:gap-16`}>
+      <div className="flex min-w-0 flex-col gap-6">
+        <h2 className={SECTION_TITLE}>Sostieni PoliNetwork</h2>
+        <p className="typo-body-large max-w-140 text-pretty">
+          Se vuoi supportare PoliNetwork economicamente, puoi destinarci il 5x1000 nella dichiarazione dei redditi. Si
+          tratta di una quota IRPEF che verseresti comunque, e che puoi scegliere di indirizzare a noi senza alcun costo
+          aggiuntivo.
+        </p>
+      </div>
+      <div className="flex min-w-0 flex-col gap-4 lg:pt-3">
+        <h3 className="typo-headline-medium text-balance">
+          Il tuo <span className="text-blue-secondary">5x1000</span> può fare la differenza
+        </h3>
+        <p className="typo-body-large max-w-120 text-pretty">
+          Nella sezione dedicata agli Enti del Terzo Settore, indica il nostro codice fiscale:
+        </p>
+        <p className="typo-headline-small text-blue-secondary tabular-nums tracking-wide">97927490157</p>
+      </div>
     </section>
   )
 }