fix(layout): make page spacing consistent and fluid across pages

src/app/associations/page.tsx

@@ -14,7 +14,7 @@ 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">
+    <main className="page-layout flex flex-col items-center gap-section">
       <Hero title="Associazioni" description="Scopri le associazioni studentesche del Politecnico" />
 
       <div className="w-full max-w-300">

src/app/chi-siamo/page.tsx

@@ -14,7 +14,8 @@ 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">
+    // Narrower content column (1200px, as in Figma): `page-container` caps its padding on this variable
+    <main className="flex w-full flex-col gap-section pb-section [--container-page:75rem]">
       <VisionSection />
       <ProblemSection />
       <AnswerSection />

src/app/contact/page.tsx

@@ -11,7 +11,7 @@ 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">
+    <main className="page-layout flex flex-col items-center gap-section">
       <Hero
         title="Contattaci"
         description="Qualunque sia la tua domanda, PoliNetwork è a disposizione."

src/app/faqs/page.tsx

@@ -14,7 +14,7 @@ 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">
+    <main className="page-layout flex flex-col items-center gap-section">
       <Hero title="FAQs" description="Risposte chiare per vivere al meglio la community" />
       <FaqsTabs categories={categories} />
     </main>

src/app/groups/page.tsx

@@ -27,30 +27,28 @@ export const metadata: Metadata = {
 
 export default function Home() {
   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">
-            Groups
-          </h2>
-          <GroupSearch />
-        </div>
+    <main className="page-layout flex min-h-svh flex-col items-center gap-block">
+      <div className="flex w-full flex-col items-center gap-6 text-center">
+        <h2 className="typo-display-large sm:typo-display-extralarge w-fit bg-linear-to-b from-text-primary to-text-secondary bg-clip-text py-4 text-transparent">
+          Groups
+        </h2>
+        <GroupSearch />
+      </div>
 
-        <div className="flex w-full flex-col items-center justify-center gap-4 md:flex-row md:gap-13">
-          {groups.map((group) => (
-            <CardIcon
-              key={group.title}
-              title={group.title}
-              description={group.caption}
-              href={group.href}
-              icon={group.icon}
-              cta={group.cta}
-              align="start"
-              className="w-full max-w-108"
-              size="compact"
-            />
-          ))}
-        </div>
+      <div className="flex w-full flex-col items-center justify-center gap-4 md:flex-row md:gap-13">
+        {groups.map((group) => (
+          <CardIcon
+            key={group.title}
+            title={group.title}
+            description={group.caption}
+            href={group.href}
+            icon={group.icon}
+            cta={group.cta}
+            align="start"
+            className="w-full max-w-108"
+            size="compact"
+          />
+        ))}
       </div>
     </main>
   )

src/app/guides/page.tsx

@@ -26,29 +26,27 @@ 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-layout flex min-h-svh flex-col items-center gap-block">
+      <div className="flex w-full flex-col items-center gap-5 text-center">
+        <h2 className="typo-display-large sm:typo-display-extralarge w-fit bg-linear-to-b from-text-primary to-text-secondary bg-clip-text py-4 text-transparent">
+          Guide
+        </h2>
+      </div>
 
-        <div className="flex w-full flex-col items-center justify-center gap-4 md:flex-row md:gap-13">
-          {guides.map((guide) => (
-            <CardIcon
-              key={guide.title}
-              title={guide.title}
-              description={guide.caption}
-              href={guide.href}
-              icon={guide.icon}
-              cta={guide.cta}
-              align="start"
-              className="w-full max-w-108"
-              size="compact"
-            />
-          ))}
-        </div>
+      <div className="flex w-full flex-col items-center justify-center gap-4 md:flex-row md:gap-13">
+        {guides.map((guide) => (
+          <CardIcon
+            key={guide.title}
+            title={guide.title}
+            description={guide.caption}
+            href={guide.href}
+            icon={guide.icon}
+            cta={guide.cta}
+            align="start"
+            className="w-full max-w-108"
+            size="compact"
+          />
+        ))}
       </div>
     </main>
   )

src/app/matricole/guida/page.tsx

@@ -22,8 +22,8 @@ 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">
+    <main className="page-container flex min-h-svh flex-col items-center justify-center gap-block py-section">
+      <div className="flex flex-col items-center 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">
           Guida della Matricola
         </h2>

src/app/matricole/page.tsx

@@ -10,7 +10,7 @@ export const metadata: Metadata = {
 
 export default function MatricolePage() {
   return (
-    <main className="w-full">
+    <main className="flex w-full flex-col gap-section pb-section">
       <MatricoleIntro />
       <MatricoleGuides />
       <FAQsPage />

src/app/not-found.tsx

@@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button"
 
 export default function NotFound() {
   return (
-    <main className="relative isolate flex min-h-screen w-full items-center justify-center overflow-hidden">
+    <main className="relative isolate flex min-h-svh w-full items-center justify-center overflow-hidden px-gutter">
       <section className="relative flex h-full w-full items-center justify-center">
         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
           <Image src={notFoundBackground} alt="" aria-hidden priority className="h-auto w-full max-w-4xl select-none" />

src/app/page.tsx

@@ -5,7 +5,7 @@ import { Projects } from "@/components/home/projects"
 
 export default function Home() {
   return (
-    <main className="w-full">
+    <main className="flex w-full flex-col gap-section pb-section">
       <Hero />
       <Materials />
       <Projects />

src/app/projects/page.tsx

@@ -19,7 +19,7 @@ export default async function Home() {
   const deprecated = projects.filter((project) => project.category === "deprecated")
 
   return (
-    <main className="w-full">
+    <main className="flex w-full flex-col gap-section pb-section">
       <CommunityNews projects={news} />
       <Collection projects={general} />
       <Upload />

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

@@ -23,7 +23,7 @@ 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 id="cosa-facciamo" className="page-container flex scroll-mt-32 flex-col gap-block">
       <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

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

@@ -23,7 +23,7 @@ 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="page-container grid gap-6 md:grid-cols-2">
       {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" />

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

@@ -13,7 +13,7 @@ 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="page-container flex flex-col gap-block">
       <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

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

@@ -18,7 +18,7 @@ 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">
+    <section className="page-container flex flex-col gap-block">
       <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>

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

@@ -9,7 +9,7 @@ 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="page-container grid items-center gap-10 lg:grid-cols-2 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

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

@@ -4,7 +4,7 @@ import { GradientIcon } from "@/components/gradient-icon"
 
 export function SupportSection() {
   return (
-    <section className="mx-auto w-full max-w-330 px-6">
+    <section className="page-container">
       <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" />

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

@@ -4,7 +4,7 @@ import { Button } from "@/components/ui/button"
 
 export function VisionSection() {
   return (
-    <section className="mx-auto flex w-full max-w-330 flex-col items-center gap-6 px-6 pt-52 text-center md:pt-57.5">
+    <section className="page-container flex flex-col items-center gap-6 pt-page-top text-center">
       <h1 className="typo-display-small sm:typo-display-medium lg:typo-display-large max-w-260 text-balance bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent">
         Un Politecnico in cui nessuno studente resti indietro per mancanza di{" "}
         <span className="text-blue-secondary">informazioni.</span>

src/components/contact/collabora-section.tsx

@@ -4,7 +4,7 @@ import { Button } from "@/components/ui/button"
 
 export function CollaboraSection() {
   return (
-    <section className="flex w-full flex-row justify-center gap-8 px-6 min-[1616px]:justify-start min-[1616px]:px-36">
+    <section className="flex w-full flex-row justify-center min-[1616px]:justify-start">
       <div className="flex max-w-[959] flex-col gap-6">
         <h2 className="typo-headline-medium md:typo-display-medium text-center min-[1616px]:text-start">
           Vuoi sviluppare un progetto insieme a noi?

src/components/contact/email-section.tsx

@@ -43,19 +43,21 @@ const contactCards: ContactCardData[] = [
 
 export function EmailSection() {
   return (
-    <section className="flex w-full flex-col gap-6 px-6 min-[1616px]:px-36">
-      <h2 className="typo-headline-medium md:typo-display-medium bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-center text-transparent min-[1616px]:text-start">
-        Hai una richiesta specifica?
-      </h2>
-      <p className="typo-body-large md:typo-headline-small pb-6 text-center text-text-primary min-[1616px]:text-start">
-        Per tutto il resto,{" "}
-        <a href="mailto:info@polinetwork.org" className="text-blue-secondary hover:underline focus-visible:underline">
-          puoi scriverci direttamente
-        </a>
-        .
-        <br />
-        Qui sotto trovi i contatti in base al tipo di richiesta.
-      </p>
+    <section className="flex w-full flex-col gap-block">
+      <div className="flex flex-col gap-6">
+        <h2 className="typo-headline-medium md:typo-display-medium bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-center text-transparent min-[1616px]:text-start">
+          Hai una richiesta specifica?
+        </h2>
+        <p className="typo-body-large md:typo-headline-small text-center text-text-primary min-[1616px]:text-start">
+          Per tutto il resto,{" "}
+          <a href="mailto:info@polinetwork.org" className="text-blue-secondary hover:underline focus-visible:underline">
+            puoi scriverci direttamente
+          </a>
+          .
+          <br />
+          Qui sotto trovi i contatti in base al tipo di richiesta.
+        </p>
+      </div>
 
       <div className="flex w-full flex-wrap justify-center gap-12 xl:gap-16 min-[1616px]:justify-start">
         {contactCards.map((card) => (

src/components/contact/groups-section.tsx

@@ -5,7 +5,7 @@ import { Button } from "@/components/ui/button"
 
 export function GroupsSection() {
   return (
-    <section className="flex w-full flex-col items-center gap-21 px-6 min-[1616px]:flex-row min-[1616px]:items-end min-[1616px]:px-36">
+    <section className="flex w-full flex-col items-center gap-block min-[1616px]:flex-row min-[1616px]:items-end">
       <div className="flex flex-col gap-6 text-center min-[1616px]:min-w-158 min-[1616px]:flex-1 min-[1616px]:text-start">
         <h2 className="typo-headline-medium md:typo-display-medium text-center min-[1616px]:text-start">
           Hai mille dubbi sul Poli?

src/components/faqs/faqs-tabs.tsx

@@ -32,12 +32,15 @@ export function FaqsTabs({ categories }: { categories: FaqCategory[] }) {
   }))
 
   return (
-    <div className="mx-auto flex w-full max-w-255 flex-col gap-68 sm:gap-79">
+    <div className="mx-auto flex w-full max-w-255 flex-col gap-section">
       {tabs.length === 0 ? (
         <p className="typo-body-large text-center">Nessuna FAQ disponibile al momento.</p>
       ) : (
         <Tabs defaultValue={tabs[0]?.value} className="flex w-full flex-col items-center">
-          <TabsNavigation items={tabs} className="max-md:-mx-2 mb-19 max-md:w-[calc(100%+1rem)] max-md:rounded-none" />
+          <TabsNavigation
+            items={tabs}
+            className="max-md:-mx-2 mb-block max-md:w-[calc(100%+1rem)] max-md:rounded-none"
+          />
           {tabs.map((tab) => (
             <TabsContent value={tab.value} key={tab.value} className="w-full min-w-0">
               <AccordionList items={tab.accordionItems} defaultValue={tab.accordionItems[0]?.value} />

src/components/footer/index.tsx

@@ -7,8 +7,8 @@ import { CardMultipleIcons } from "../card-multiple-icons"
 
 export function Footer() {
   return (
-    <footer className="w-full px-8">
-      <h2 className="typo-headline-medium md:typo-display-large mt-18 bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text text-center text-transparent md:mt-30.5">
+    <footer className="w-full px-gutter">
+      <h2 className="typo-headline-medium md:typo-display-large bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text text-center text-transparent">
         Keep in touch!
       </h2>
 
@@ -74,7 +74,7 @@ export function Footer() {
         />
       </div>
 
-      <div className="mx-auto mt-11 grid max-w-5xl grid-flow-row-dense grid-cols-[max-content_max-content] items-baseline justify-around gap-y-7 **:h-min **:w-fit md:mt-25 md:gap-y-11">
+      <div className="mx-auto mt-block grid max-w-5xl grid-flow-row-dense grid-cols-[max-content_max-content] items-baseline justify-around gap-y-7 **:h-min **:w-fit md:gap-y-11">
         <div className="typo-title-medium md:typo-headline-small contents text-text-primary underline *:col-start-1">
           <Link href="/join">Unisciti a noi!</Link>
           <Link href="/contact">Contattaci</Link>
@@ -89,7 +89,7 @@ export function Footer() {
         </div>
       </div>
 
-      <div className="typo-body-small md:typo-body-large mt-12 mb-10.5 w-full text-center text-text-secondary md:mt-36 md:mb-10">
+      <div className="typo-body-small md:typo-body-large mt-section mb-10 w-full text-center text-text-secondary">
         <p id="copyright">PoliNetwork 2016-{new Date().getFullYear()} - All rights reserved</p>
       </div>
     </footer>