feat(contact): add responsive contact page

src/app/contact/page.tsx

@@ -0,0 +1,25 @@
+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 { Hero } from "@/components/ui/hero"
+
+export const metadata: Metadata = {
+  title: "Contattaci",
+  description: "Contatta PoliNetwork o trova il gruppo del tuo corso al Politecnico di Milano.",
+}
+
+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
+      />
+      <GroupsSection />
+      <CollaboraSection />
+      <EmailSection />
+    </main>
+  )
+}

src/components/contact-card.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react"
+import { Card, CardBottomButton, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+
+export type ContactCardData = {
+  title: string
+  description: ReactNode
+  email: string
+}
+
+export function ContactCard({ title, description, email }: ContactCardData) {
+  return (
+    <Card className="h-66 w-full max-w-78 gap-6 justify-self-center p-6">
+      <CardHeader>
+        <CardTitle className="typo-headline-small">{title}</CardTitle>
+      </CardHeader>
+      <CardContent className="typo-body-medium flex-1">{description}</CardContent>
+      <CardBottomButton variant="tertiary" asChild className="mt-auto">
+        <a href={`mailto:${email}`}>{email}</a>
+      </CardBottomButton>
+    </Card>
+  )
+}

src/components/contact/collabora-section.tsx

@@ -0,0 +1,30 @@
+import { FiArrowUpRight } from "react-icons/fi"
+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>
+
+        <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">
+            Siamo sempre felici di{" "}
+            <span className="text-blue-primary">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>
+        </div>
+
+        <Button variant="primary" size="lg" className="w-fit gap-2 self-center min-[1616px]:self-start">
+          Collabora con noi
+          <FiArrowUpRight />
+        </Button>
+      </div>
+    </section>
+  )
+}

src/components/contact/email-section.tsx

@@ -0,0 +1,67 @@
+import Link from "next/link"
+import { ContactCard, type ContactCardData } from "../contact-card"
+
+const contactCards: ContactCardData[] = [
+  {
+    title: "Informazioni Generali",
+    description: "Per qualsiasi domanda su PoliNetwork, sui nostri strumenti o servizi.",
+    email: "info@polinetwork.org",
+  },
+  {
+    title: "Consiglio Direttivo",
+    description: "Per richieste formali, segnalazioni di problemi o questioni che non rientrano nelle categorie sopra.",
+    email: "direttivo@polinetwork.org",
+  },
+  {
+    title: "Candidature",
+    description: (
+      <>
+        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>
+        .
+      </>
+    ),
+    email: "hr@polinetwork.org",
+  },
+  {
+    title: "Collaborazioni",
+    description: (
+      <>
+        Se sei un&apos;azienda o associazione e vuoi proporre una collaborazione, puoi anche consultare la pagina{" "}
+        <Link href="/collaborate" className="text-blue-secondary underline underline-offset-2">
+          Collabora con Noi
+        </Link>{" "}
+        per capire cosa offriamo.
+      </>
+    ),
+    email: "events@polinetwork.org",
+  },
+]
+
+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>
+
+      <div className="flex w-full flex-wrap justify-center gap-12 xl:gap-16 min-[1616px]:justify-start">
+        {contactCards.map((card) => (
+          <ContactCard key={card.email} {...card} />
+        ))}
+      </div>
+    </section>
+  )
+}

src/components/contact/groups-section.tsx

@@ -0,0 +1,40 @@
+import Image from "next/image"
+import Link from "next/link"
+import { FiArrowUpRight } from "react-icons/fi"
+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">
+          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">
+          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">
+            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>
+      </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>
+    </section>
+  )
+}

src/components/footer/index.tsx

@@ -28,7 +28,7 @@ export function Footer() {
       <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="typo-title-medium md:typo-headline-small contents text-text-primary underline *:col-start-1">
           <Link href="#">Unisciti a noi!</Link>
-          <Link href="#">Contattaci</Link>
+          <Link href="/contact">Contattaci</Link>
           <Link href="#">
             Qualche problema? <br /> Segnalalo!
           </Link>

src/components/home/hero.tsx

@@ -6,7 +6,7 @@ import { GroupSearch } from "./group-search"
 export function Hero() {
   return (
     <section className="flex min-h-screen flex-col gap-10 px-6 pt-67 pb-15 sm:px-12">
-      <div className="flex flex-1 justify-center flex-col items-center gap-17.5 text-center">
+      <div className="flex flex-1 flex-col items-center justify-center gap-17.5 text-center">
         <h1 className="typo-display-small sm:typo-display-medium md:typo-display-large w-fit max-w-4xl bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent">
           Trova gruppi, risorse e supporto tra gli studenti del Polimi
         </h1>

src/components/ui/hero.tsx

@@ -9,7 +9,7 @@ export function Hero({
 }) {
   return (
     <div className="flex flex-col items-center gap-6">
-      <h2 className="typo-display-large sm:typo-display-extralarge w-fit self-stretch bg-linear-to-b from-text-primary to-text-secondary bg-clip-text py-4 text-center text-transparent sm:py-14">
+      <h2 className="typo-display-large sm:typo-display-extralarge w-full self-stretch bg-linear-to-b from-text-primary to-text-secondary bg-clip-text py-4 text-center text-transparent sm:py-14">
         {title}
       </h2>
       <p