feat(contact): align Contattaci with the shared layout and fix the card grid

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/components/contact-card.tsx

@@ -9,12 +9,12 @@ export type ContactCardData = {
 
 export function ContactCard({ title, description, email }: ContactCardData) {
   return (
-    <Card className="h-66 w-full max-w-78 gap-6 justify-self-center p-6">
+    <Card className="h-auto w-full gap-4 p-6">
       <CardHeader>
-        <CardTitle className="typo-headline-small">{title}</CardTitle>
+        <CardTitle className="typo-headline-small xl:typo-headline-extrasmall">{title}</CardTitle>
       </CardHeader>
       <CardContent className="typo-body-medium flex-1">{description}</CardContent>
-      <CardBottomButton variant="tertiary" asChild className="mt-auto">
+      <CardBottomButton variant="tertiary" asChild className="mt-auto max-w-full">
         <a href={`mailto:${email}`}>{email}</a>
       </CardBottomButton>
     </Card>

src/components/contact/collabora-section.tsx

@@ -1,27 +1,24 @@
 import Link from "next/link"
 import { FiArrowUpRight } from "react-icons/fi"
+import { CONTAINER, SECTION_LEAD, SECTION_TITLE } from "@/components/layout/page"
 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">
-      <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?
-        </h2>
+    <section className={CONTAINER}>
+      <div className="mx-auto flex max-w-3xl flex-col items-center gap-6 text-center">
+        <h2 className={SECTION_TITLE}>Vuoi sviluppare un progetto insieme a noi?</h2>
 
-        <div className="flex min-w-0 flex-col gap-3 text-center md:text-start">
-          <p className="typo-body-large md:typo-headline-small text-center min-[1616px]:text-start">
+        <div className={`${SECTION_LEAD} flex flex-col gap-3`}>
+          <p>
             Siamo sempre felici di{" "}
-            <span className="text-blue-primary">collaborare con aziende o associazioni studentesche</span> per portare
+            <span className="text-blue-secondary">collaborare con aziende o associazioni studentesche</span> per portare
             agli studenti del PoliMi eventi e attività di valore.
           </p>
-          <p className="typo-body-large md:typo-headline-small text-center min-[1616px]:text-start">
-            Consulta la pagina dedicata per scoprire come possiamo unire le forze!
-          </p>
+          <p>Consulta la pagina dedicata per scoprire come possiamo unire le forze!</p>
         </div>
 
-        <Button variant="primary" size="lg" className="w-fit gap-2 self-center min-[1616px]:self-start" asChild>
+        <Button variant="primary" size="lg" className="mt-2" asChild>
           <Link href="/collabora">
             Collabora con noi
             <FiArrowUpRight />

src/components/contact/email-section.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link"
 import { ContactCard, type ContactCardData } from "../contact-card"
+import { CONTAINER, INLINE_LINK, SECTION_LEAD, SECTION_TITLE } from "../layout/page"
 
 const contactCards: ContactCardData[] = [
   {
@@ -18,8 +19,8 @@ const contactCards: ContactCardData[] = [
       <>
         Se vuoi candidarti come admin o come membro di un team, ti consigliamo di passare dal form disponibile nella
         pagina{" "}
-        <Link href="/join" className="text-blue-secondary underline underline-offset-2">
-          Struttura
+        <Link href="/join" className={INLINE_LINK}>
+          Unisciti a noi
         </Link>
         .
       </>
@@ -31,7 +32,7 @@ const contactCards: ContactCardData[] = [
     description: (
       <>
         Se sei un&apos;azienda o associazione e vuoi proporre una collaborazione, puoi anche consultare la pagina{" "}
-        <Link href="/collabora" className="text-blue-secondary underline underline-offset-2">
+        <Link href="/collabora" className={INLINE_LINK}>
           Collabora con Noi
         </Link>{" "}
         per capire cosa offriamo.
@@ -43,21 +44,20 @@ 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">
+    <section className={`${CONTAINER} flex flex-col gap-6`}>
+      <h2 className={SECTION_TITLE}>Hai una richiesta specifica?</h2>
+      <p className={SECTION_LEAD}>
         Per tutto il resto,{" "}
-        <a href="mailto:info@polinetwork.org" className="text-blue-secondary hover:underline focus-visible:underline">
+        <a href="mailto:info@polinetwork.org" className={INLINE_LINK}>
           puoi scriverci direttamente
         </a>
         .
         <br />
         Qui sotto trovi i contatti in base al tipo di richiesta.
       </p>
 
-      <div className="flex w-full flex-wrap justify-center gap-12 xl:gap-16 min-[1616px]:justify-start">
+      {/* 2×2 between one and four columns, so no card is left alone on a row */}
+      <div className="mt-4 grid gap-4 sm:grid-cols-2 sm:gap-6 xl:grid-cols-4">
         {contactCards.map((card) => (
           <ContactCard key={card.email} {...card} />
         ))}

src/components/contact/groups-section.tsx

@@ -1,40 +1,44 @@
 import Image from "next/image"
 import Link from "next/link"
 import { FiArrowUpRight } from "react-icons/fi"
+import { CONTAINER, INLINE_LINK, SECTION_LEAD, SECTION_TITLE } from "@/components/layout/page"
 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">
-      <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">
+    <section className={`${CONTAINER} grid items-center gap-10 xl:grid-cols-2 xl:gap-16`}>
+      <div className="flex flex-col items-center gap-6 text-center xl:items-start xl:text-start">
+        <h2 className={SECTION_TITLE}>
           Hai mille dubbi sul Poli?
           <br />
           Siamo pronti ad aiutarti!
         </h2>
 
-        <p className="typo-body-large md:typo-headline-small pb-6 text-center min-[1616px]:text-start">
+        <p className={`${SECTION_LEAD} max-w-2xl`}>
           Il modo più rapido per ottenere risposte su esami, burocrazia universitaria o sulla vita al Politecnico è{" "}
-          <Link href="/groups" className="text-blue-secondary hover:underline focus-visible:underline">
+          <Link href="/groups" className={INLINE_LINK}>
             entrare nel gruppo del tuo corso
           </Link>
           , su Telegram o su WhatsApp, dove gli admin sono presenti ogni giorno.
         </p>
-        <Button variant="primary" size="lg" className="w-fit gap-2 self-center min-[1616px]:self-start">
-          Trova il tuo gruppo
-          <FiArrowUpRight />
+
+        <Button variant="primary" size="lg" className="mt-2" asChild>
+          <Link href="/groups">
+            Trova il tuo gruppo
+            <FiArrowUpRight />
+          </Link>
         </Button>
       </div>
 
-      <div className="flex w-full items-center justify-center min-[1616px]:w-auto min-[1616px]:flex-1">
-        <Image
-          src="/contact-group.png"
-          alt="Foto di gruppo della community PoliNetwork"
-          width={721}
-          height={342}
-          className="h-auto w-full max-w-180.25 rounded-rectangles object-cover min-[1616px]:min-w-180.25"
-        />
-      </div>
+      <Image
+        src="/contact-group.png"
+        alt="Foto di gruppo della community PoliNetwork"
+        width={512}
+        height={246}
+        sizes="(min-width: 80rem) 600px, (min-width: 42rem) 672px, 100vw"
+        // The source is only 512px wide: capped at 672px so it never stretches past ~1.3x
+        className="mx-auto h-auto w-full max-w-2xl rounded-rectangles xl:max-w-none"
+      />
     </section>
   )
 }