fix(a11y): fit the 404 page on phones and declare the page language

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

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">

src/components/card-multiple-icons/index.tsx

@@ -1,20 +1,19 @@
 import * as React from "react"
-import { Glass } from "@/components/glass"
 import { cn } from "@/lib/utils"
 import type { CardMultipleIconsProps } from "./types"
 
 export function CardMultipleIcons({ icons, className }: CardMultipleIconsProps) {
   const iconItems = React.Children.toArray(icons)
 
   return (
-    <Glass
+    // A plain light surface, not glass: it sits on the footer's glass panel
+    <div
       className={cn(
-        "inline-flex h-12 max-w-full items-center overflow-hidden rounded-full border-white/50 bg-background-blur p-0 text-card-foreground",
+        "inline-flex max-w-full items-center overflow-hidden rounded-full border border-white/70 bg-white/40 text-card-foreground",
         className
       )}
     >
-      {/* Figma "glass-icone": 48px tall, icons 34px from the edges and evenly spread */}
-      <div className="flex flex-wrap items-center gap-5.5 px-8.5">
+      <div className="flex items-center justify-center p-1 sm:gap-3 sm:px-5">
         {iconItems.map((icon) => (
           <span
             key={typeof icon === "object" && icon !== null && "key" in icon ? icon.key : undefined}
@@ -24,6 +23,6 @@ export function CardMultipleIcons({ icons, className }: CardMultipleIconsProps)
           </span>
         ))}
       </div>
-    </Glass>
+    </div>
   )
 }

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

@@ -2,7 +2,8 @@ import { CONTAINER, SECTION_TITLE } from "@/components/layout/page"
 
 export function SupportSection() {
   return (
-    <section className={`${CONTAINER} grid gap-10 lg:grid-cols-2 lg:gap-16`}>
+    // `id`: the footer's 5x1000 card links here
+    <section id="sostienici" className={`${CONTAINER} grid scroll-mt-40 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">

src/components/footer/index.tsx

@@ -1,97 +1,178 @@
 import Image from "next/image"
 import Link from "next/link"
-import { FiFacebook, FiGithub, FiInstagram, FiLinkedin } from "react-icons/fi"
+import type { ReactNode } from "react"
+import { FiArrowUpRight, FiFacebook, FiGithub, FiInstagram, FiLinkedin } from "react-icons/fi"
 import discord from "@/assets/icons/discord.svg"
 import telegram from "@/assets/icons/telegram.svg"
-import { CardMultipleIcons } from "../card-multiple-icons"
+import { CardMultipleIcons } from "@/components/card-multiple-icons"
+import { Glass } from "@/components/glass"
+import { MATERIALS_URL } from "@/components/header/constants"
+import { CONTAINER, SECTION_TITLE } from "@/components/layout/page"
+import { regulationsHref, statuteHref } from "@/components/structure/constants"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+const socials: { label: string; href: string; icon: ReactNode }[] = [
+  { label: "Telegram", href: "https://t.me/polinetwork", icon: <Image src={telegram} alt="" className="size-6" /> },
+  { label: "Instagram", href: "https://instagram.com/polinetwork_", icon: <FiInstagram /> },
+  { label: "LinkedIn", href: "https://www.linkedin.com/company/polinetwork", icon: <FiLinkedin /> },
+  { label: "Facebook", href: "https://www.facebook.com/PolitecnicoDiMilanoNetwork", icon: <FiFacebook /> },
+  // The Discord glyph has its own padding: at 28px it matches the others
+  { label: "Discord", href: "https://discord.gg/Fp7ZHcC", icon: <Image src={discord} alt="" className="size-7" /> },
+  { label: "GitHub", href: "https://github.com/PoliNetworkOrg", icon: <FiGithub /> },
+]
+
+const siteLinks = [
+  { title: "Gruppi", href: "/groups" },
+  { title: "Matricole", href: "/matricole" },
+  { title: "Progetti", href: "/projects" },
+  { title: "Appunti", href: MATERIALS_URL },
+  { title: "Su di noi", href: "/chi-siamo" },
+  { title: "Contatti", href: "/contact" },
+]
+
+const documents = [
+  { title: "Statuto", href: statuteHref },
+  { title: "Regolamento interno", href: regulationsHref },
+]
+
+const emails = [
+  { label: "Per collaborazioni ed eventi", email: "events@polinetwork.org" },
+  { label: "Per domande e richieste", email: "info@polinetwork.org" },
+]
+
+const HEADING = "typo-headline-extrasmall text-text-primary"
+const LINK =
+  "rounded-sm outline-none decoration-1 decoration-blue-secondary underline-offset-4 transition-colors hover:text-blue-secondary hover:underline focus-visible:underline focus-visible:ring-2 focus-visible:ring-blue-secondary focus-visible:ring-offset-2"
+
+function FooterLink({ href, children, className }: { href: string; children: ReactNode; className?: string }) {
+  const external = !href.startsWith("/")
+  return external ? (
+    // Inline arrow: when the label wraps, it follows the last word
+    <a href={href} target="_blank" rel="noopener noreferrer" className={cn(LINK, className)}>
+      {children}
+      <FiArrowUpRight className="ml-1 inline size-4 align-[-0.125em]" aria-hidden />
+    </a>
+  ) : (
+    <Link href={href} className={cn(LINK, className)}>
+      {children}
+    </Link>
+  )
+}
 
 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">
-        Keep in touch!
-      </h2>
+    <footer className={cn(CONTAINER, "pt-8 pb-6 md:pt-16 md:pb-10")}>
+      <Glass className="rounded-[32px] border-white/60 bg-background-blur px-4 py-10 backdrop-blur-xl sm:rounded-[36px] sm:px-10 sm:py-12 md:rounded-[48px] md:px-14 md:py-16">
+        <div className="flex flex-col items-center gap-6">
+          <h2 lang="en" className={cn(SECTION_TITLE, "text-center")}>
+            Keep in touch!
+          </h2>
+          <CardMultipleIcons
+            icons={socials.map(({ label, href, icon }) => (
+              // 36px targets below sm keep the row whole at 320px
+              <a
+                key={label}
+                href={href}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label={label}
+                className="flex size-9 items-center justify-center rounded-full outline-none transition-colors hover:bg-white/70 focus-visible:ring-2 focus-visible:ring-blue-secondary sm:size-10"
+              >
+                {icon}
+              </a>
+            ))}
+          />
+        </div>
 
-      <div className="mx-auto mt-6 flex w-fit flex-col items-center gap-4">
-        <CardMultipleIcons
-          className="h-auto [&>div]:gap-6 [&>div]:px-6 [&>div]:py-3"
-          icons={[
-            <a
-              key="telegram"
-              href="https://t.me/polinetwork"
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label="Telegram"
-            >
-              <Image src={telegram} alt="" />
-            </a>,
-            <a
-              key="instagram"
-              href="https://instagram.com/polinetwork_"
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label="Instagram"
-            >
-              <FiInstagram />
-            </a>,
-            <a
-              key="linkedin"
-              href="https://www.linkedin.com/company/polinetwork"
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label="LinkedIn"
-            >
-              <FiLinkedin />
-            </a>,
-            <a
-              key="facebook"
-              href="https://www.facebook.com/PolitecnicoDiMilanoNetwork"
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label="Facebook"
-            >
-              <FiFacebook />
-            </a>,
-            <a
-              key="discord"
-              href="https://discord.gg/Fp7ZHcC"
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label="Discord"
-            >
-              <Image src={discord} alt="" />
-            </a>,
-            <a
-              key="github"
-              href="https://github.com/PoliNetworkOrg"
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label="GitHub"
-            >
-              <FiGithub />
-            </a>,
-          ]}
-        />
-      </div>
+        <div className="mx-auto mt-14 grid max-w-6xl gap-x-16 gap-y-12 md:mt-16 md:grid-cols-2 lg:grid-cols-12">
+          <div className="flex flex-col gap-8 lg:col-span-6">
+            <nav aria-labelledby="footer-site" className="flex flex-col gap-5">
+              <h3 id="footer-site" className={HEADING}>
+                Visita il sito
+              </h3>
+              <div className="grid grid-cols-[auto_1fr] gap-x-10 sm:gap-x-14 lg:gap-x-20">
+                <ul className="typo-body-large flex flex-col gap-3 text-text-primary">
+                  {siteLinks.map((link) => (
+                    <li key={link.title}>
+                      <FooterLink href={link.href} className="whitespace-nowrap">
+                        {link.title}
+                      </FooterLink>
+                    </li>
+                  ))}
+                </ul>
+                <ul className="typo-body-medium flex flex-col gap-3 pt-0.5 text-slate-600">
+                  {documents.map((document) => (
+                    <li key={document.title}>
+                      <FooterLink href={document.href}>{document.title}</FooterLink>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </nav>
 
-      <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="/join">Unisciti a noi!</Link>
-          <Link href="/contact">Contattaci</Link>
-          <a href="https://github.com/PoliNetworkOrg/web/issues/new" target="_blank" rel="noopener noreferrer">
-            Qualche problema? <br /> Segnalalo!
-          </a>
-        </div>
-        <div className="typo-body-small md:typo-body-large contents text-text-secondary *:col-start-2">
-          <Link href="#">Terms & conditions</Link>
-          <Link href="#">Privacy policy</Link>
-          <Link href="#">Cookie policy</Link>
+            {/* A lighter tile, not a second glass layer inside the panel */}
+            <div className="relative flex w-full flex-col items-start gap-1 rounded-rectangles border border-white/70 bg-white/40 px-5 py-4 transition-colors hover:bg-white/70 has-[a:focus-visible]:ring-2 has-[a:focus-visible]:ring-blue-secondary sm:w-fit sm:flex-row sm:items-center sm:gap-8 sm:px-8 md:w-full md:flex-col md:items-start md:gap-1 lg:w-fit lg:flex-row lg:items-center lg:gap-8">
+              <p className="typo-headline-large sm:typo-display-small bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text text-transparent">
+                5x1000
+              </p>
+              <div className="flex flex-col gap-0.5">
+                <Link
+                  href="/chi-siamo#sostienici"
+                  className="typo-title-large text-text-primary outline-none after:absolute after:inset-0 after:content-['']"
+                >
+                  Sostienici!
+                </Link>
+                <p className="typo-body-medium whitespace-nowrap text-slate-600 tabular-nums">C.F. 97927490157</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-10 lg:col-span-5 lg:col-start-8">
+            <section aria-labelledby="footer-contacts" className="flex flex-col gap-5">
+              <h3 id="footer-contacts" lang="en" className={HEADING}>
+                Talk with us
+              </h3>
+              <dl className="flex flex-col gap-4">
+                {emails.map(({ label, email }) => (
+                  <div key={email} className="flex flex-col gap-0.5">
+                    <dt className="typo-body-medium text-slate-600">{label}</dt>
+                    <dd className="typo-body-large text-text-primary">
+                      <a href={`mailto:${email}`} className={LINK}>
+                        {email}
+                      </a>
+                    </dd>
+                  </div>
+                ))}
+              </dl>
+            </section>
+
+            <div className="grid gap-8 sm:grid-cols-2 md:grid-cols-1 xl:grid-cols-2">
+              <div className="flex flex-col items-start gap-4">
+                <h3 className={HEADING}>Sei interessato?</h3>
+                <Button variant="primary" size="lg" className="mt-auto" asChild>
+                  <Link href="/join">Unisciti a noi!</Link>
+                </Button>
+              </div>
+              <div className="flex flex-col items-start gap-4">
+                <h3 className={HEADING}>Qualche problema?</h3>
+                <Button variant="tertiary" size="lg" className="mt-auto" asChild>
+                  <a href="https://github.com/PoliNetworkOrg/web/issues/new" target="_blank" rel="noopener noreferrer">
+                    <FiGithub />
+                    Segnalalo
+                  </a>
+                </Button>
+              </div>
+            </div>
+          </div>
         </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">
-        <p id="copyright">PoliNetwork 2016-{new Date().getFullYear()} - All rights reserved</p>
-      </div>
+        {/* slate-600 rather than text-secondary (slate-500, 4.3:1 on the page background) so the small print passes AA */}
+        <div className="typo-body-small md:typo-body-medium mx-auto mt-14 flex max-w-6xl flex-col items-center gap-1 border-slate-300/70 border-t pt-6 text-slate-600 sm:flex-row sm:justify-between md:mt-16">
+          <p>PoliNetwork APS 2016–{new Date().getFullYear()}</p>
+          <p lang="en">All rights reserved</p>
+        </div>
+      </Glass>
     </footer>
   )
 }

src/components/header/constants.ts

@@ -1,13 +1,15 @@
 import { FiArrowUpRight, FiChevronRight } from "react-icons/fi"
 import type { HeaderMenuItem } from "./types"
 
+/** The materials archive, on the old site. */
+export const MATERIALS_URL = "https://polinetwork.org/it/materials/view/"
 export const headerMenuItems: HeaderMenuItem[] = [
   {
     title: "Resources",
     menu: [
       { title: "Progetti", href: "/projects", icon: FiChevronRight },
       // Leaves the site: ↗ instead of ›, as in the rest of the site
-      { title: "Appunti", href: "https://polinetwork.org/it/materials/view/", icon: FiArrowUpRight },
+      { title: "Appunti", href: MATERIALS_URL, icon: FiArrowUpRight },
       { title: "Guide", href: "/guides", icon: FiChevronRight },
       { title: "FAQs", href: "/faqs", icon: FiChevronRight },
     ],

src/components/home/materials.tsx

@@ -2,13 +2,12 @@ import Link from "next/link"
 import { Fragment } from "react"
 import { FiArrowUpRight, FiBook, FiBookOpen, FiClipboard, FiFileText, FiUploadCloud } from "react-icons/fi"
 import { CardIcon } from "@/components/card-icon"
+import { MATERIALS_URL } from "@/components/header/constants"
 import { CONTAINER } from "@/components/layout/page"
 import { Button } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
 import { CardCaption } from "../card-caption"
 
-const MATERIALS_URL = "https://polinetwork.org/it/materials/view/"
-
 // "Carica" has no destination yet, so it stays a plain card
 const featuredCards = [
   {