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

src/components/card-caption.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link"
 import type { ReactNode } from "react"
 import type { IconType } from "react-icons"
+import { cn } from "@/lib/utils"
 import { Card, CardAction, CardContent, CardHeader, CardTitle } from "./ui/card"
 
 export function CardCaption({
@@ -9,25 +10,35 @@ export function CardCaption({
   icon,
   iconPosition = "right",
   href,
+  footer,
   className,
 }: {
   title: string
   caption: ReactNode
   icon?: IconType
   iconPosition?: "top" | "right"
   href?: string
+  /** Pinned to the bottom of the card, e.g. where a link leads to. */
+  footer?: ReactNode
   className?: string
 }) {
   return (
-    <Card hoverBackground className={className}>
-      {href && <Link href={href} className="absolute inset-0 z-10" aria-label={title} />}
+    // Only cards that lead somewhere react to hover
+    <Card
+      hoverBackground={Boolean(href)}
+      className={cn(href && "has-[>a:focus-visible]:ring-2 has-[>a:focus-visible]:ring-blue-secondary", className)}
+    >
+      {href && <Link href={href} className="absolute inset-0 z-10 outline-none" aria-label={title} />}
       <CardHeader
-        className={`typo-headline-medium flex ${iconPosition === "right" ? "justify-between" : "flex-col-reverse"}`}
+        className={`typo-headline-medium relative flex ${iconPosition === "right" ? "justify-between" : "flex-col-reverse"}`}
       >
         <CardTitle className="typo-headline-medium">{title}</CardTitle>
         {icon && <CardAction icon={icon} iconSize={iconPosition === "right" ? "md" : "lg"}></CardAction>}
       </CardHeader>
-      <CardContent className="typo-body-medium">{typeof caption === "string" ? <p>{caption}</p> : caption}</CardContent>
+      <CardContent className="typo-body-medium relative">
+        {typeof caption === "string" ? <p>{caption}</p> : caption}
+      </CardContent>
+      {footer && <div className="relative mt-auto">{footer}</div>}
     </Card>
   )
 }

src/components/card-icon/index.tsx

@@ -22,13 +22,14 @@ export function CardIcon(props: CardIconProps) {
     <Glass
       className={cn(
         "w-full overflow-hidden rounded-rectangles border-white/50 bg-background-blur p-0 text-card-foreground",
+        href && "has-[>a:focus-visible]:ring-2 has-[>a:focus-visible]:ring-blue-secondary",
         className
       )}
     >
       <Root
         href={href}
         className={cn(
-          "group/card relative flex h-full flex-col text-left",
+          "group/card relative flex h-full flex-col text-left outline-none",
           getCardPaddingClasses(size, isDescriptionCard)
         )}
       >

src/components/home/about-us.tsx

@@ -4,13 +4,14 @@ import { Button } from "@/components/ui/button"
 
 export function AboutUs() {
   return (
-    <section className="mx-auto flex min-h-screen w-full max-w-4xl flex-col items-center justify-center gap-16 px-7.5 py-12 text-center sm:gap-24">
-      <h1 className="typo-headline-medium sm:typo-display-large bg-linear-to-r from-text-primary via-blue-secondary to-blue-primary bg-clip-text text-transparent">
+    <section className="mx-auto flex w-full max-w-4xl flex-col items-center gap-10 px-6 py-24 text-center sm:gap-12 sm:px-10 sm:py-32 xl:py-40">
+      {/* Grey gradient only: the background already carries the decoration (style guide: shapes OR coloured text) */}
+      <h2 className="typo-headline-medium sm:typo-display-medium xl:typo-display-large text-balance bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent">
         PoliNetwork unisce gli studenti del Poli: gruppi, risorse e supporto, tutti in un'unica community.
-      </h1>
+      </h2>
 
       <Button variant="primary" size="lg" asChild>
-        <Link href="/about" className="flex items-center gap-2">
+        <Link href="/about">
           About us
           <FiArrowUpRight />
         </Link>

src/components/home/hero.tsx

@@ -5,29 +5,31 @@ 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 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">
+    <section className="flex w-full flex-col items-center justify-center px-6 pt-36 pb-16 sm:min-h-[min(88svh,52rem)] sm:px-10 sm:pt-40 sm:pb-24">
+      <div className="flex w-full max-w-6xl flex-col items-center gap-10 text-center sm:gap-14">
+        <h1 className="typo-display-fluid-large text-balance 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>
 
-        <GroupSearch />
+        <div className="flex w-full flex-col items-center gap-6">
+          <GroupSearch />
 
-        <Button variant="primary" size="lg" asChild>
-          <Link href="/groups" className="flex items-center gap-2">
-            More groups
-            <FiNavigation />
-          </Link>
-        </Button>
-      </div>
-
-      <div className="mt-auto flex justify-end">
-        <Button variant="tertiaryBlur" size="lg" className="text-blue-secondary" asChild>
-          <Link href="/matricole">
-            <FiUserPlus />
-            Sei una matricola?
-          </Link>
-        </Button>
+          {/* The freshman path sits next to the primary action, instead of floating alone in the corner */}
+          <div className="flex flex-wrap items-center justify-center gap-3">
+            <Button variant="primary" size="lg" asChild>
+              <Link href="/groups">
+                More groups
+                <FiNavigation />
+              </Link>
+            </Button>
+            <Button variant="tertiaryBlur" size="lg" className="typo-label-large text-blue-secondary" asChild>
+              <Link href="/matricole">
+                <FiUserPlus />
+                Sei una matricola?
+              </Link>
+            </Button>
+          </div>
+        </div>
       </div>
     </section>
   )

src/components/home/materials.tsx

@@ -4,80 +4,95 @@ import { CardIcon } from "@/components/card-icon"
 import { Button } from "@/components/ui/button"
 import { CardCaption } from "../card-caption"
 
+const MATERIALS_URL = "https://polinetwork.org/it/materials/view/"
+
+// "Carica" has no destination yet (the old upload page is empty), so it stays a plain card instead of a dead link
 const featuredCards = [
   {
     title: "Carica",
     description:
-      "Hai appunti, dispense o temi d'esame che vuoi condividere? Caricali qui! Il tuo contributo é prezioso per aiutare migliaia di colleghi con materiale aggiornato!",
+      "Hai appunti, dispense o temi d'esame che vuoi condividere? Caricali qui! Il tuo contributo è prezioso per aiutare migliaia di colleghi con materiale aggiornato!",
     icon: FiUploadCloud,
-    size: "lg",
-    href: "#",
   },
   {
     title: "Visualizza",
     description:
-      "Cerca cio che ti serve per il tuo prossimo esame. Naviga tra i corsi di studio e trova facilmente appunti, esercizi e dispense condivisi da altri studenti come te.",
+      "Cerca ciò che ti serve per il tuo prossimo esame. Naviga tra i corsi di studio e trova facilmente appunti, esercizi e dispense condivisi da altri studenti come te.",
     icon: FiBookOpen,
-    size: "lg",
-    href: "#",
+    href: MATERIALS_URL,
   },
-] as const
+]
 
+// The archive has no per-type pages: every shortcut opens it
 const quickLinks = [
-  { title: "Dispense", icon: FiBook, size: { base: "xs", sm: "sm" }, href: "#" },
-  { title: "Esami", icon: FiFileText, size: { base: "xs", sm: "sm" }, href: "#" },
-  {
-    title: "Appunti",
-    icon: FiClipboard,
-    size: { base: "xs", sm: "sm" },
-    href: "https://polinetwork.org/it/materials/view/",
-  },
-] as const
+  { title: "Dispense", icon: FiBook },
+  { title: "Esami", icon: FiFileText },
+  { title: "Appunti", icon: FiClipboard },
+]
 
 export function Materials() {
   return (
-    <section className="mx-auto flex max-w-400 flex-col-reverse gap-24 p-11 py-28 sm:px-20 2xl:flex-row 2xl:items-start 2xl:gap-32">
-      <div className="flex grow flex-col gap-4 sm:gap-6 2xl:gap-8 2xl:pt-44">
-        {/* Desktop Cards */}
-        <div className="hidden gap-4 sm:grid sm:grid-cols-2 sm:gap-12 2xl:gap-20">
-          {featuredCards.map((card) => (
-            <CardIcon key={card.title} {...card} className="h-full" />
-          ))}
-        </div>
-        {/* Mobile Cards */}
-        <div className="flex flex-col items-center gap-4 sm:hidden">
-          {featuredCards.map((card) => (
-            <CardCaption key={card.title} {...card} caption={card.description} className="h-full w-fit" />
-          ))}
-        </div>
+    <section className="mx-auto grid w-full max-w-384 grid-cols-1 gap-y-6 px-6 py-20 sm:gap-y-8 sm:px-10 sm:py-24 lg:px-16 xl:grid-cols-[minmax(0,7fr)_minmax(0,5fr)] xl:gap-x-16 xl:gap-y-10 xl:py-32">
+      <h2 className="typo-display-fluid-extralarge bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-center text-transparent xl:col-start-2 xl:text-start">
+        Materials
+      </h2>
 
-        <div className="grid grid-cols-3 gap-4 sm:gap-12 2xl:gap-20">
-          {quickLinks.map((card) => (
-            <CardIcon key={card.title} {...card} className="h-full" />
-          ))}
-        </div>
-      </div>
-
-      <div className="flex flex-col items-center gap-8 text-center sm:ml-auto sm:items-start sm:text-start">
-        <h2 className="typo-display-large sm:typo-display-extralarge bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent sm:py-4">
-          Materials
-        </h2>
-        <p className="typo-body-large hidden max-w-lg sm:block">
-          Il piu grande archivio didattico creato dagli studenti per gli studenti del Politecnico di Milano. Cerca tra
+      <div className="flex flex-col items-center gap-8 text-center xl:col-start-2 xl:row-start-2 xl:items-start xl:text-start">
+        <p className="typo-body-large hidden max-w-xl sm:block">
+          Il più grande archivio didattico creato dagli studenti per gli studenti del Politecnico di Milano. Cerca tra
           migliaia di appunti, dispense, temi d'esame e molto altro. Carica i tuoi file per far crescere la community e
-          trova tutto cio che ti serve, organizzato per corso di studi.
+          trova tutto ciò che ti serve, organizzato per corso di studi.
         </p>
         <p className="typo-body-large max-w-lg sm:hidden">
           Il più grande archivio didattico degli studenti del Politecnico. Trova appunti, dispense ed esami, oppure
           carica i tuoi file per far crescere la community.
         </p>
         <Button variant="primary" size="lg" className="w-fit" asChild>
-          <Link href="https://polinetwork.org/it/materials/view/" className="flex items-center gap-2">
+          <Link href={MATERIALS_URL}>
             Scopri di più
             <FiArrowUpRight />
           </Link>
         </Button>
       </div>
+
+      {/* Below xl the cards follow the text, centered and capped so they keep their proportions on tablets */}
+      <div className="mx-auto flex w-full max-w-4xl flex-col gap-4 pt-6 sm:gap-6 sm:pt-8 xl:col-start-1 xl:row-start-2 xl:max-w-none xl:pt-0">
+        <div className="grid gap-4 sm:grid-cols-2 sm:gap-6">
+          {featuredCards.map((card) => (
+            <div key={card.title} className="contents">
+              <CardCaption
+                title={card.title}
+                caption={card.description}
+                icon={card.icon}
+                href={card.href}
+                className="h-auto w-full p-6 xl:hidden"
+              />
+              <CardIcon
+                title={card.title}
+                description={card.description}
+                icon={card.icon}
+                href={card.href}
+                hoverEffect={Boolean(card.href)}
+                size="md"
+                className="hidden h-full xl:block"
+              />
+            </div>
+          ))}
+        </div>
+
+        <div className="grid grid-cols-3 gap-4 sm:gap-6">
+          {quickLinks.map((card) => (
+            <CardIcon
+              key={card.title}
+              {...card}
+              href={MATERIALS_URL}
+              hoverEffect
+              size={{ base: "xs", sm: "sm" }}
+              className="h-full"
+            />
+          ))}
+        </div>
+      </div>
     </section>
   )
 }

src/components/home/projects.tsx

@@ -29,14 +29,31 @@ const featuredCards = [
   },
 ] as const
 
+function ProjectCard({ className, ...card }: (typeof featuredCards)[number] & { className?: string }) {
+  return (
+    <CardCaption
+      {...card}
+      className={className}
+      // Figma reserves the bottom-right corner for an action: show where the card leads
+      footer={
+        <span className="typo-label-large flex items-center justify-end gap-1 text-blue-secondary">
+          {new URL(card.href).hostname}
+          <FiArrowUpRight className="size-4" />
+        </span>
+      }
+    />
+  )
+}
+
 export function Projects() {
   return (
-    <section className="mx-auto flex max-w-400 flex-col gap-24 p-11 py-40 sm:px-20 2xl:flex-row 2xl:items-start 2xl:gap-32">
-      <div className="flex flex-col items-center gap-8 text-center sm:items-start sm:text-start">
-        <h2 className="typo-display-large sm:typo-display-extralarge bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent leading-[0.8] sm:py-6 md:whitespace-nowrap">
-          15+ Projects
-        </h2>
-        <p className="typo-body-large hidden max-w-lg sm:block">
+    <section className="mx-auto grid w-full max-w-384 grid-cols-1 gap-y-6 px-6 py-20 sm:gap-y-8 sm:px-10 sm:py-24 lg:px-16 xl:grid-cols-[minmax(0,5fr)_minmax(0,7fr)] xl:gap-x-16 xl:gap-y-10 xl:py-32">
+      <h2 className="typo-display-fluid-extralarge bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-center text-transparent xl:col-span-2 xl:text-start">
+        15+ Projects
+      </h2>
+
+      <div className="flex flex-col items-center gap-8 text-center xl:items-start xl:text-start">
+        <p className="typo-body-large hidden max-w-xl sm:block">
           Progetti e strumenti creati dalla nostra community. Qui trovi le iniziative nate dagli studenti del
           Politecnico per semplificare la vita universitaria e creare innovazione. Hai un'idea o un progetto? Proponilo!
           Puoi trovare collaboratori, ricevere supporto dal nostro team e dare vita alla tua soluzione.
@@ -46,33 +63,30 @@ export function Projects() {
           l’innovazione. Hai un’idea? Proponila, trova collaboratori e realizza la tua soluzione.
         </p>
         <Button variant="primary" size="lg" className="w-fit" asChild>
-          <Link href="/projects" className="flex items-center gap-2">
+          <Link href="/projects">
             Esplora la raccolta
             <FiArrowUpRight />
           </Link>
         </Button>
       </div>
 
-      <div className="hidden flex-col gap-6 sm:flex lg:gap-10 2xl:pt-30">
-        <div className="grid grid-cols-2 gap-6 xl:grid-cols-4 2xl:grid-cols-2">
-          {featuredCards.map((card) => (
-            <CardCaption key={card.title} {...card} className="w-full" />
-          ))}
-        </div>
+      <div className="mx-auto hidden w-full max-w-4xl auto-rows-fr gap-6 pt-8 sm:grid sm:grid-cols-2 xl:max-w-none xl:pt-0">
+        {featuredCards.map((card) => (
+          <ProjectCard key={card.title} {...card} className="h-auto w-full p-6" />
+        ))}
       </div>
 
-      <div className="flex w-full items-center justify-center sm:hidden">
-        <Carousel className="w-full">
-          <CarouselContent>
+      {/* Mobile: the next card peeks in from the edge, so the row reads as scrollable */}
+      <div className="-mx-6 pt-6 sm:hidden">
+        <Carousel opts={{ align: "start" }}>
+          <CarouselContent className="mr-6 ml-2">
             {featuredCards.map((card) => (
-              <CarouselItem key={card.title}>
-                <div className="flex justify-center">
-                  <CardCaption {...card} />
-                </div>
+              <CarouselItem key={card.title} className="basis-[85%]">
+                <ProjectCard {...card} className="h-full w-full p-6" />
               </CarouselItem>
             ))}
           </CarouselContent>
-          <CarouselDots className="mt-8" />
+          <CarouselDots className="mt-6" />
         </Carousel>
       </div>
     </section>

src/components/ui/carousel.tsx

@@ -177,8 +177,11 @@ function CarouselDots({ className, ...props }: React.ComponentProps<"div">) {
           onClick={() => api?.scrollTo(index)}
           // Figma "slider dots": 16px current dot, 12px others, 6px apart. The pseudo-element enlarges the hit area.
           className={cn(
-            "after:-inset-1.5 relative shrink-0 rounded-full border border-white/50 bg-background-blur backdrop-blur-md transition-[width,height] after:absolute after:content-[''] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-secondary",
-            selectedIndex === index ? "size-4" : "size-3"
+            "after:-inset-1.5 relative shrink-0 rounded-full border backdrop-blur-md transition-[width,height] after:absolute after:content-[''] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-secondary",
+            // Glass-only dots disappear on the light background: give the current one the brand colour
+            selectedIndex === index
+              ? "size-4 border-blue-primary bg-blue-primary"
+              : "size-3 border-slate-300 bg-background-blur"
           )}
         />
       ))}

src/lib/utils.ts

@@ -11,6 +11,8 @@ const twMerge = extendTailwindMerge({
       "font-size": [
         {
           typo: [
+            "display-fluid-extralarge",
+            "display-fluid-large",
             "display-extralarge",
             "display-large",
             "display-medium",