feat(home): refine homepage layout, proportions and card states

AGENTS.md

@@ -14,7 +14,7 @@ breaking changes with `!` or a `BREAKING CHANGE:` footer.
 
 <!-- BEGIN:nextjs-agent-rules -->
 
-# This is NOT the Next.js you know
+## This is NOT the Next.js you know
 
 This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` (resolved from this file's directory; in monorepos the `next` package may not be visible from the repo root) before writing any code. Heed deprecation notices.
 

src/app/about/page.tsx

@@ -1,6 +1,8 @@
 import type { Metadata } from "next"
 import Link from "next/link"
 import { FiArrowUpRight } from "react-icons/fi"
+import { ClosingCta } from "@/components/layout/closing-cta"
+import { CONTAINER, PAGE_HERO, PAGE_MAIN, SECTION_STACK, SECTION_TITLE } from "@/components/layout/page"
 import { AssociationBodies } from "@/components/structure/association-bodies"
 import { BoardGallery } from "@/components/structure/board-gallery"
 import { LegalStatus } from "@/components/structure/legal-status"
@@ -15,18 +17,16 @@ 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 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"
+const titleClass = `${SECTION_TITLE} text-center`
 
 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">
+    <main className={PAGE_MAIN}>
+      <section className={`${CONTAINER} ${PAGE_HERO}`}>
         <Hero title="Struttura" description="Un’organizzazione pensata per durare" />
       </section>
       <OrganizationChart />
-      <section aria-labelledby="direttivo-title" className={containerClass}>
+      <section aria-labelledby="direttivo-title" className={SECTION_STACK}>
         <h2 id="direttivo-title" className={titleClass}>
           Il Direttivo in carica
         </h2>
@@ -37,33 +37,31 @@ export default function StructurePage() {
           </p>
         </div>
       </section>
-      <section aria-labelledby="associazione-title" className={containerClass}>
+      <section aria-labelledby="associazione-title" className={SECTION_STACK}>
         <h2 id="associazione-title" className={titleClass}>
           Come funziona l’associazione
         </h2>
         <AssociationBodies />
       </section>
-      <section aria-labelledby="partecipa-title" className={containerClass}>
+      <section aria-labelledby="partecipa-title" className={SECTION_STACK}>
         <h2 id="partecipa-title" className={titleClass}>
           Trova il tuo posto in PoliNetwork
         </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">
-        <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>
-        <p className="typo-body-large sm:typo-headline-extrasmall max-w-110 text-balance">
-          Scopri chi siamo, cosa facciamo e come entrare a far parte della nostra realtà.
-        </p>
-        <Button asChild size="lg">
-          <Link href="/join">
-            Unisciti a noi
-            <FiArrowUpRight aria-hidden />
-          </Link>
-        </Button>
-      </section>
-      <section aria-label="Forma giuridica e documenti associativi" className="mx-auto w-full max-w-330 px-6">
+      <ClosingCta
+        title="Tutto ciò che c’è da sapere su PoliNetwork."
+        lead="Scopri chi siamo, cosa facciamo e come entrare a far parte della nostra realtà."
+        action={
+          <Button asChild size="lg">
+            <Link href="/join">
+              Unisciti a noi
+              <FiArrowUpRight aria-hidden />
+            </Link>
+          </Button>
+        }
+      />
+      <section aria-label="Forma giuridica e documenti associativi" className={CONTAINER}>
         <LegalStatus />
       </section>
     </main>

src/app/associations/page.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next"
 import { AssociationsList } from "@/components/associations/associations-list"
+import { CONTAINER, PAGE_HERO, PAGE_MAIN } from "@/components/layout/page"
 import { Hero } from "@/components/ui/hero"
 import { getAllAssociations } from "@/queries/associations"
 
@@ -14,12 +15,17 @@ export default async function AssociationsPage() {
   const associations = await getAllAssociations()
 
   return (
-    <main className="mx-auto flex min-h-screen w-full flex-col items-center justify-center gap-20 px-4 py-49 md:gap-39">
-      <Hero title="Associazioni" description="Scopri le associazioni studentesche del Politecnico" />
+    <main className={PAGE_MAIN}>
+      <section className={`${CONTAINER} ${PAGE_HERO}`}>
+        <Hero title="Associazioni" description="Scopri le associazioni studentesche del Politecnico" />
+      </section>
 
-      <div className="w-full max-w-300">
-        <AssociationsList associations={associations} />
-      </div>
+      {/* Figma's list column: 1200px at 1728 */}
+      <section aria-label="Elenco delle associazioni" className={CONTAINER}>
+        <div className="mx-auto w-full max-w-300">
+          <AssociationsList associations={associations} />
+        </div>
+      </section>
     </main>
   )
 }

src/app/chi-siamo/page.tsx

@@ -6,6 +6,7 @@ import { PathSection } from "@/components/chi-siamo/path-section"
 import { ProblemSection } from "@/components/chi-siamo/problem-section"
 import { SupportSection } from "@/components/chi-siamo/support-section"
 import { VisionSection } from "@/components/chi-siamo/vision-section"
+import { PAGE_MAIN } from "@/components/layout/page"
 
 export const metadata: Metadata = {
   title: "Su di noi",
@@ -14,7 +15,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={PAGE_MAIN}>
       <VisionSection />
       <ProblemSection />
       <AnswerSection />

src/app/collabora/page.tsx

@@ -4,9 +4,8 @@ import { AssociationSection } from "@/components/collabora/association-section"
 import { CollaborationSection } from "@/components/collabora/collaboration-section"
 import { CompanySection } from "@/components/collabora/company-section"
 import { ContactSection } from "@/components/collabora/contact-section"
-import { sectionContainerClass } from "@/components/collabora/section"
+import { CONTAINER, PAGE_HERO, PAGE_MAIN } from "@/components/layout/page"
 import { Hero } from "@/components/ui/hero"
-import { cn } from "@/lib/utils"
 
 export const metadata: Metadata = {
   title: "Collabora con Noi",
@@ -16,9 +15,8 @@ export const metadata: Metadata = {
 
 export default function CollaboraPage() {
   return (
-    <main className="flex w-full flex-col">
-      {/* Title at y=262 (mobile) / 286 (desktop) as in Figma; Hero adds 16px / 56px above it */}
-      <section className={cn(sectionContainerClass, "pt-61.5 pb-29 sm:pt-57.5 md:pb-64.5")}>
+    <main className={PAGE_MAIN}>
+      <section className={`${CONTAINER} ${PAGE_HERO}`}>
         <Hero
           title="Collabora con Noi"
           description="Mettiamo la nostra infrastruttura e i nostri talenti a disposizione di chi ha buone idee per gli studenti del PoliMi"

src/app/contact/page.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next"
 import { CollaboraSection } from "@/components/contact/collabora-section"
 import { EmailSection } from "@/components/contact/email-section"
 import { GroupsSection } from "@/components/contact/groups-section"
+import { CONTAINER, PAGE_HERO, PAGE_MAIN } from "@/components/layout/page"
 import { Hero } from "@/components/ui/hero"
 
 export const metadata: Metadata = {
@@ -11,12 +12,14 @@ export const metadata: Metadata = {
 
 export default function Contact() {
   return (
-    <main className="mx-auto flex min-h-screen w-full flex-col items-center justify-center gap-60 px-4 py-49 md:gap-75">
-      <Hero
-        title="Contattaci"
-        description="Qualunque sia la tua domanda, PoliNetwork è a disposizione."
-        gradientDescription
-      />
+    <main className={PAGE_MAIN}>
+      <section className={`${CONTAINER} ${PAGE_HERO}`}>
+        <Hero
+          title="Contattaci"
+          description="Qualunque sia la tua domanda, PoliNetwork è a disposizione."
+          gradientDescription
+        />
+      </section>
       <GroupsSection />
       <CollaboraSection />
       <EmailSection />

src/app/faqs/page.tsx

@@ -1,6 +1,8 @@
 import type { Metadata } from "next"
 import { FaqsTabs } from "@/components/faqs/faqs-tabs"
+import { CONTAINER, PAGE_HERO_TOP, PAGE_MAIN } from "@/components/layout/page"
 import { Hero } from "@/components/ui/hero"
+import { cn } from "@/lib/utils"
 import { getAllFaqs } from "@/queries/faqs"
 
 export const metadata: Metadata = {
@@ -14,9 +16,12 @@ export default async function FAQsPage() {
   const categories = await getAllFaqs()
 
   return (
-    <main className="mx-auto flex min-h-screen w-full flex-col items-center justify-center gap-24 px-4 py-49">
-      <Hero title="FAQs" description="Risposte chiare per vivere al meglio la community" />
-      <FaqsTabs categories={categories} />
+    <main className={PAGE_MAIN}>
+      {/* The tabs belong to the hero, so they follow it without the usual break after the hero */}
+      <section className={cn(CONTAINER, PAGE_HERO_TOP, "flex flex-col gap-16 md:gap-24")}>
+        <Hero title="FAQs" description="Risposte chiare per vivere al meglio la community" />
+        <FaqsTabs categories={categories} />
+      </section>
     </main>
   )
 }

src/app/groups/page.tsx

@@ -30,9 +30,9 @@ export default function Home() {
     <main className="w-full">
       <div className="flex min-h-svh flex-col items-center gap-16 px-6 py-64 md:gap-20 md:py-49">
         <div className="flex w-full flex-col items-center gap-5 text-center">
-          <h2 className="typo-display-large md:typo-display-extralarge w-fit bg-linear-to-b from-text-primary to-text-secondary bg-clip-text py-4 text-transparent md:py-14">
+          <h1 className="typo-display-fluid-extralarge w-fit bg-linear-to-b from-text-primary to-text-secondary bg-clip-text py-4 text-transparent md:py-10">
             Groups
-          </h2>
+          </h1>
           <GroupSearch />
         </div>
 
@@ -46,6 +46,7 @@ export default function Home() {
               icon={group.icon}
               cta={group.cta}
               align="start"
+              hoverEffect
               className="w-full max-w-108"
               size="compact"
             />

src/app/guides/page.tsx

@@ -1,6 +1,8 @@
 import type { Metadata } from "next"
 import { FiBook, FiFileText } from "react-icons/fi"
 import { CardIcon } from "@/components/card-icon"
+import { CONTAINER, PAGE_HERO, PAGE_MAIN } from "@/components/layout/page"
+import { Hero } from "@/components/ui/hero"
 
 const guides = [
   {
@@ -26,15 +28,14 @@ export const metadata: Metadata = {
 
 export default function GuidesHome() {
   return (
-    <main className="w-full">
-      <div className="flex min-h-svh flex-col items-center gap-16 px-6 py-64 md:gap-20 md:py-49">
-        <div className="flex w-full flex-col items-center gap-5 text-center">
-          <h2 className="typo-display-large md:typo-display-extralarge w-fit bg-linear-to-b from-text-primary to-text-secondary bg-clip-text py-4 text-transparent md:py-14">
-            Guide
-          </h2>
-        </div>
+    <main className={PAGE_MAIN}>
+      <section className={`${CONTAINER} ${PAGE_HERO}`}>
+        <Hero title="Guide" description="Una raccolta di guide realizzate dai membri del Network" />
+      </section>
 
-        <div className="flex w-full flex-col items-center justify-center gap-4 md:flex-row md:gap-13">
+      {/* Two equal paths: same height, side by side from sm, and the whole card is the link */}
+      <section className={CONTAINER}>
+        <div className="mx-auto grid max-w-4xl gap-4 sm:grid-cols-2 sm:gap-6">
           {guides.map((guide) => (
             <CardIcon
               key={guide.title}
@@ -44,12 +45,13 @@ export default function GuidesHome() {
               icon={guide.icon}
               cta={guide.cta}
               align="start"
-              className="w-full max-w-108"
               size="compact"
+              hoverEffect
+              className="h-full"
             />
           ))}
         </div>
-      </div>
+      </section>
     </main>
   )
 }

src/app/join/page.tsx

@@ -3,6 +3,7 @@ import { AdminSection } from "@/components/join/admin"
 import { Introduction } from "@/components/join/introduction"
 import { MembershipSection } from "@/components/join/membership"
 import { TeamsSection } from "@/components/join/teams"
+import { CONTAINER, PAGE_HERO, PAGE_MAIN } from "@/components/layout/page"
 import { Hero } from "@/components/ui/hero"
 
 export const metadata: Metadata = {
@@ -13,8 +14,8 @@ export const metadata: Metadata = {
 
 export default function JoinPage() {
   return (
-    <main className="flex w-full flex-col gap-24 pb-32 md:gap-36 md:pb-48">
-      <section className={"mx-auto w-full max-w-330 px-6 pt-52 md:pt-57.5"}>
+    <main className={PAGE_MAIN}>
+      <section className={`${CONTAINER} ${PAGE_HERO}`}>
         <Hero
           title="Unisciti a Noi"
           description="Nessuna simulazione, solo progetti reali. Scopri come fare la differenza per migliaia di studenti del PoliMi"

src/app/layout.tsx

@@ -62,7 +62,7 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
   return (
     <html
-      lang="en"
+      lang="it"
       suppressHydrationWarning
       className={`${poppinsFont400.variable} ${redHatTextFont.variable} ${dmSansFont.variable}`}
     >
@@ -74,9 +74,10 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
           // storageKey="polinetwork_darkmode_temp" // TODO: enable when dark mode design is ready
           disableTransitionOnChange
         >
+          {/* Outside the page wrapper: inside it, Chromium did not blur the content behind the fixed header's glass */}
+          <Header />
           <div className="relative isolate flex min-h-screen w-full flex-col items-center justify-start overflow-clip">
             <Background />
-            <Header />
             {children}
             <ConditionalFooter>
               <Footer />

src/app/matricole/guida/page.tsx

@@ -1,7 +1,9 @@
 import type { Metadata } from "next"
 import { FiDownload } from "react-icons/fi"
 import { CardSplit } from "@/components/card-split"
+import { CONTAINER } from "@/components/layout/page"
 import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
 import { getLatestGuidaMatricola } from "@/queries/guida-matricola"
 
 export const metadata: Metadata = {
@@ -22,12 +24,15 @@ export default async function GuidaMatricolaPage() {
   const formattedDate = new Intl.DateTimeFormat("it-IT", { dateStyle: "long" }).format(new Date(guida.date))
 
   return (
-    <main className="mx-auto flex min-h-svh w-full max-w-500 flex-col items-center justify-center gap-10">
-      <div className="mx-12 flex flex-col items-center lg:gap-6">
-        <h2 className="typo-display-medium lg:typo-display-extralarge w-fit bg-linear-to-b from-text-primary to-text-secondary bg-clip-text py-4 text-center text-transparent lg:leading-33">
+    // Standalone page (no header or footer, see `HIDDEN_ROUTES`): the content stays centered on screen, with the
+    // shared gutters. The vertical padding keeps it off the edges on short landscape screens.
+    <main className={cn(CONTAINER, "flex min-h-svh flex-col items-center justify-center gap-10 py-16 sm:gap-12")}>
+      {/* Not Hero: this page has no header, and Hero's spacing would push the download below the fold on phones */}
+      <div className="flex flex-col items-center gap-4 text-center sm:gap-6">
+        <h1 className="typo-display-fluid-extralarge text-balance bg-linear-to-b from-text-primary to-text-secondary bg-clip-text pb-2 text-transparent">
           Guida della Matricola
-        </h2>
-        <p className="typo-title-medium lg:typo-headline-small max-w-4xl text-center">
+        </h1>
+        <p className="typo-title-medium sm:typo-headline-small max-w-2xl text-balance">
           Controlla l&apos;ultima versione disponibile e scarica il PDF aggiornato.
         </p>
       </div>

src/app/matricole/page.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next"
+import { CONTAINER, PAGE_MAIN } from "@/components/layout/page"
 import { FAQsPage } from "@/components/matricole/faqs"
 import { MatricoleGuides } from "@/components/matricole/guides"
 import { MatricoleIntro } from "@/components/matricole/intro"
@@ -14,15 +15,15 @@ export const dynamic = "force-dynamic"
 export default async function MatricolePage() {
   const content = await getFreshmanContent()
   return (
-    <main className="w-full">
+    <main className={PAGE_MAIN}>
       <MatricoleIntro resources={content?.resources ?? []} />
       {content ? (
         <>
           <MatricoleGuides content={content} />
           <FAQsPage faqs={content.faqs} />
         </>
       ) : (
-        <p className="typo-body-large px-6 pb-32 text-center text-text-primary">
+        <p className={`${CONTAINER} typo-body-large text-center text-text-primary`}>
           Le risorse per le matricole non sono disponibili al momento. Riprova più tardi.
         </p>
       )}

src/app/not-found.tsx

@@ -12,15 +12,15 @@ export default function NotFound() {
           <Image src={notFoundBackground} alt="" aria-hidden priority className="h-auto w-full max-w-4xl select-none" />
         </div>
 
-        <div className="relative z-10 flex flex-col items-center gap-12 text-center">
+        <div className="relative z-10 flex flex-col items-center gap-8 px-6 pt-28 pb-16 text-center sm:gap-12">
           <h1 className="typo-display-extralarge inline-block bg-linear-to-b from-text-primary to-text-secondary bg-clip-text py-9 text-transparent">
             404
           </h1>
 
-          <p className="typo-headline-large text-text-primary">
+          <p className="typo-headline-extrasmall sm:typo-headline-large max-w-3xl text-balance text-text-primary">
             Non trovo quello che cerchi.
             <br />
-            Controlla l'URL o visita un'altra sezione del sito.
+            Controlla l&apos;URL o visita un&apos;altra sezione del sito.
           </p>
 
           <Button asChild variant="primary" size="lg">