feat(groups): fix the results layout and give every link a hover state

src/app/about/page.tsx

@@ -2,7 +2,7 @@ import type { Metadata } from "next"
 import Link from "next/link"
 import { FiArrowUpRight } from "react-icons/fi"
 import { ClosingCta } from "@/components/layout/closing-cta"
-import { CONTAINER, PAGE_HERO, PAGE_MAIN, SECTION_TITLE } from "@/components/layout/page"
+import { CONTAINER, PAGE_HERO, PAGE_MAIN, SECTION_STACK, SECTION_TITLE } from "@/components/layout/page"
 import { AssociationBodies } from "@/components/structure/association-bodies"
 import { BoardGallery } from "@/components/structure/board-gallery"
 import { LegalStatus } from "@/components/structure/legal-status"
@@ -17,7 +17,6 @@ export const metadata: Metadata = {
     "Un’organizzazione pensata per durare: scopri l’organigramma, il Direttivo, gli organi associativi e i ruoli di PoliNetwork APS.",
 }
 
-const containerClass = `${CONTAINER} flex flex-col gap-10 md:gap-14`
 const titleClass = `${SECTION_TITLE} text-center`
 
 export default function StructurePage() {
@@ -27,7 +26,7 @@ export default function StructurePage() {
         <Hero title="Struttura" description="Un’organizzazione pensata per durare" />
       </section>
       <OrganizationChart />
-      <section aria-labelledby="direttivo-title" className={containerClass}>
+      <section aria-labelledby="direttivo-title" className={SECTION_STACK}>
         <h2 id="direttivo-title" className={titleClass}>
           Il Direttivo in carica
         </h2>
@@ -38,13 +37,13 @@ export default function StructurePage() {
           </p>
         </div>
       </section>
-      <section aria-labelledby="associazione-title" className={containerClass}>
+      <section aria-labelledby="associazione-title" className={SECTION_STACK}>
         <h2 id="associazione-title" className={titleClass}>
           Come funziona l’associazione
         </h2>
         <AssociationBodies />
       </section>
-      <section aria-labelledby="partecipa-title" className={containerClass}>
+      <section aria-labelledby="partecipa-title" className={SECTION_STACK}>
         <h2 id="partecipa-title" className={titleClass}>
           Trova il tuo posto in PoliNetwork
         </h2>

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/app/groups/page.tsx

@@ -30,9 +30,9 @@ export default function Home() {
     <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">
+          <h1 className="typo-display-fluid-extralarge w-fit bg-linear-to-b from-text-primary to-text-secondary bg-clip-text py-4 text-transparent md:py-10">
             Groups
-          </h2>
+          </h1>
           <GroupSearch />
         </div>
 
@@ -46,6 +46,7 @@ export default function Home() {
               icon={group.icon}
               cta={group.cta}
               align="start"
+              hoverEffect
               className="w-full max-w-108"
               size="compact"
             />

src/app/projects/[id]/page.tsx

@@ -2,10 +2,11 @@ import type { Metadata } from "next"
 import Image from "next/image"
 import Link from "next/link"
 import { notFound } from "next/navigation"
-import { FiArrowLeft, FiArrowUpRight, FiUploadCloud } from "react-icons/fi"
+import { FiArrowLeft, FiArrowUpRight } from "react-icons/fi"
 import { Glass } from "@/components/glass"
 import { GradientIcon } from "@/components/gradient-icon"
-import { SECTION_LEAD, SECTION_TITLE } from "@/components/layout/page"
+import { ClosingCta } from "@/components/layout/closing-cta"
+import { CONTAINER, PAGE_HERO, PAGE_MAIN, SECTION_LEAD, SECTION_STACK, SECTION_TITLE } from "@/components/layout/page"
 import { getProjectResources, resourceDetails } from "@/components/projects/resources"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardTitle } from "@/components/ui/card"
@@ -39,16 +40,21 @@ export default async function ProjectPage({ params }: Props) {
   const resources = getProjectResources(project)
 
   return (
-    <main className="flex w-full flex-col gap-24 pb-24 md:gap-36 md:pb-36">
-      <section className="mx-auto flex w-full max-w-330 flex-col gap-6 px-6 pt-52 md:pt-57.5">
+    <main className={PAGE_MAIN}>
+      <section className={`${CONTAINER} ${PAGE_HERO} flex flex-col gap-6`}>
         <Link
           href="/projects"
-          className="typo-body-medium flex w-fit items-center gap-2 text-blue-secondary underline-offset-4 hover:underline focus-visible:underline"
+          className="typo-body-medium flex w-fit items-center gap-2 rounded-sm text-blue-secondary underline-offset-4 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-blue-secondary"
         >
           <FiArrowLeft aria-hidden className="size-4 shrink-0" /> Tutti i progetti
         </Link>
-        <Glass className="grid items-center gap-8 rounded-rectangles border-white/50 bg-linear-to-br from-background-blur to-blue-tertiary/30 p-6 text-center sm:p-12 md:grid-cols-[auto_minmax(0,1fr)] md:gap-12 md:text-start">
-          {project.logo ? (
+        <Glass
+          className={cn(
+            "grid items-center gap-8 rounded-rectangles border-white/50 bg-background-blur p-6 text-center sm:p-12 md:gap-12 md:text-start",
+            project.logo && "md:grid-cols-[auto_minmax(0,1fr)]"
+          )}
+        >
+          {project.logo && (
             // Project logos are app icons with their own background and corners: shown as they are, not framed
             <Image
               src={project.logo}
@@ -58,10 +64,6 @@ export default async function ProjectPage({ params }: Props) {
               sizes="(min-width: 768px) 160px, 112px"
               className="mx-auto size-28 object-contain md:size-40"
             />
-          ) : (
-            <Glass className="mx-auto flex size-28 items-center justify-center rounded-rectangles border-white/50 bg-background-blur p-0 shadow-sm md:size-40">
-              <GradientIcon icon={FiUploadCloud} className="size-12 md:size-16" />
-            </Glass>
           )}
           <div className="flex min-w-0 flex-col gap-4">
             {project.category in categoryLabels && (
@@ -74,10 +76,7 @@ export default async function ProjectPage({ params }: Props) {
       </section>
 
       {resources.length > 0 && (
-        <section
-          aria-labelledby="risorse-title"
-          className="mx-auto flex w-full max-w-330 flex-col gap-10 px-6 md:gap-14"
-        >
+        <section aria-labelledby="risorse-title" className={SECTION_STACK}>
           <div className="flex flex-col gap-4 text-center md:text-start">
             <h2 id="risorse-title" className={SECTION_TITLE}>
               Come usarlo
@@ -135,19 +134,17 @@ export default async function ProjectPage({ params }: Props) {
         </section>
       )}
 
-      <section className="mx-auto w-full max-w-330 px-6">
-        <Glass className="flex flex-col items-center gap-6 rounded-rectangles border-white/50 bg-linear-to-br from-background-blur to-blue-tertiary/30 p-6 text-center sm:p-12">
-          <h2 className={SECTION_TITLE}>Scopri gli altri progetti</h2>
-          <p className={cn(SECTION_LEAD, "max-w-200 text-balance")}>
-            Strumenti e app realizzati dagli studenti del Politecnico, per gli studenti del Politecnico.
-          </p>
+      <ClosingCta
+        title="Scopri gli altri progetti"
+        lead="Strumenti e app realizzati dagli studenti del Politecnico, per gli studenti del Politecnico."
+        action={
           <Button asChild size="lg" className="w-full sm:w-fit">
             <Link href="/projects">
               Tutti i progetti <FiArrowUpRight aria-hidden />
             </Link>
           </Button>
-        </Glass>
-      </section>
+        }
+      />
     </main>
   )
 }

src/app/projects/page.tsx

@@ -1,7 +1,9 @@
+import { CONTAINER, PAGE_HERO, PAGE_MAIN } from "@/components/layout/page"
 import { Collection } from "@/components/projects/collection"
 import { CommunityNews } from "@/components/projects/community-news"
 import { Deprecated } from "@/components/projects/deprecated"
 import { Upload } from "@/components/projects/upload"
+import { Hero } from "@/components/ui/hero"
 import { getAllProjects } from "@/queries/projects"
 
 export const metadata = {
@@ -11,17 +13,20 @@ export const metadata = {
 
 export const dynamic = "force-dynamic"
 
-export default async function Home() {
+export default async function ProjectsPage() {
   const projects = await getAllProjects()
 
   const news = projects.filter((project) => project.category === "news")
   const general = projects.filter((project) => project.category === "general")
   const deprecated = projects.filter((project) => project.category === "deprecated")
 
   return (
-    <main className="w-full">
+    <main className={PAGE_MAIN}>
+      <section className={`${CONTAINER} ${PAGE_HERO}`}>
+        <Hero title="Projects" description="Esplora e contribuisci ai progetti degli studenti" />
+      </section>
       <CommunityNews projects={news} />
-      <Collection projects={general} />
+      <Collection projects={general} searchable={projects} />
       <Upload />
       <Deprecated projects={deprecated} />
     </main>

src/components/card-caption.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image"
 import Link from "next/link"
 import type { ReactNode } from "react"
 import type { IconType } from "react-icons"
@@ -9,18 +10,25 @@ export function CardCaption({
   caption,
   icon,
   iconPosition = "right",
+  image,
   href,
   footer,
   className,
+  titleClassName,
+  captionClassName,
 }: {
   title: string
   caption: ReactNode
   icon?: IconType
   iconPosition?: "top" | "right"
+  /** An image shown in place of the icon, e.g. a project's logo. */
+  image?: string
   href?: string
   /** Pinned to the bottom of the card, e.g. where a link leads to. */
   footer?: ReactNode
   className?: string
+  titleClassName?: string
+  captionClassName?: string
 }) {
   return (
     // Only cards that lead somewhere react to hover
@@ -32,10 +40,19 @@ export function CardCaption({
       <CardHeader
         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>}
+        <CardTitle gradient={false} className={cn("typo-headline-medium", titleClassName)}>
+          {/* Gradient per line (box-decoration-clone): a two-line title doesn't fade into a paler second line */}
+          <span className="bg-linear-to-b from-blue-secondary to-blue-primary box-decoration-clone bg-clip-text text-transparent">
+            {title}
+          </span>
+        </CardTitle>
+        {image ? (
+          <Image src={image} alt="" width={40} height={40} className="size-10 shrink-0 object-contain" />
+        ) : (
+          icon && <CardAction icon={icon} iconSize={iconPosition === "right" ? "md" : "lg"}></CardAction>
+        )}
       </CardHeader>
-      <CardContent className="typo-body-medium relative">
+      <CardContent className={cn("typo-body-medium relative", captionClassName)}>
         {typeof caption === "string" ? <p>{caption}</p> : caption}
       </CardContent>
       {footer && <div className="relative mt-auto">{footer}</div>}

src/components/card-course-group.tsx

@@ -10,7 +10,7 @@ import { cn } from "@/lib/utils"
 import { Card, CardAction, CardTitle } from "./ui/card"
 
 export const cardCourseGroupVariants = cva(
-  "flex h-fit w-full min-w-0 flex-1 flex-row items-center gap-3 px-5 py-4 font-normal leading-6 tracking-[0.03125rem] sm:gap-5 sm:px-7.5 sm:py-6.25",
+  "@container h-auto w-full min-w-0 px-4 py-3 font-normal leading-6 tracking-[0.03125rem] sm:px-6 sm:py-4",
   {
     variants: {
       secondary: {
@@ -33,7 +33,6 @@ export function CardCourseGroup({
   tgGroupId,
   iconTelegram: IconTelegram = LiaTelegramPlane,
   secondary = false,
-  stacked = false,
 }: {
   groupName: string
   waLink?: string
@@ -42,38 +41,42 @@ export function CardCourseGroup({
   tgLink?: string
   tgGroupId?: number
   iconTelegram?: IconType
-  stacked?: boolean
 } & VariantProps<typeof cardCourseGroupVariants>) {
-  const actionClassName = cn("rounded-full p-2 sm:p-3.75", secondary ? "bg-[#51A2FF]" : "bg-[#74D4FF]")
+  // The platform buttons are the only links in the row, so they carry the hover state, not the card
+  const actionClassName = cn(
+    "rounded-full p-2 transition-[filter] group-hover/action:brightness-90 sm:p-3",
+    secondary ? "bg-[#51A2FF]" : "bg-[#74D4FF]"
+  )
   return (
-    <Card
-      className={cn(
-        cardCourseGroupVariants({ secondary }),
-        stacked && "h-auto flex-col items-start md:h-fit md:flex-row md:items-center"
-      )}
-    >
-      <CardTitle gradient={false} className="typo-body-medium md:typo-headline-small min-w-0 grow">
-        {groupName}
-      </CardTitle>
-      <div className={cn("flex items-center gap-1.5", stacked ? "md:contents" : "contents")}>
-        <PlatformAction
-          platform="wa"
-          platformLabel="WhatsApp"
-          link={waLink}
-          groupId={waGroupId}
-          icon={IconWhatsApp}
-          groupName={groupName}
-          actionClassName={actionClassName}
-        />
-        <PlatformAction
-          platform="tg"
-          platformLabel="Telegram"
-          link={tgLink}
-          groupId={tgGroupId}
-          icon={IconTelegram}
-          groupName={groupName}
-          actionClassName={actionClassName}
-        />
+    <Card className={cardCourseGroupVariants({ secondary })}>
+      {/* In a card narrower than 20rem the name gets its own line, so it doesn't wrap word by word */}
+      <div className="flex min-w-0 @max-xs:flex-col @max-xs:items-start items-center gap-3 sm:gap-5">
+        <CardTitle
+          gradient={false}
+          className="typo-body-large sm:typo-headline-small wrap-break-word min-w-0 grow text-balance"
+        >
+          {groupName}
+        </CardTitle>
+        <div className="flex shrink-0 items-center gap-1.5">
+          <PlatformAction
+            platform="wa"
+            platformLabel="WhatsApp"
+            link={waLink}
+            groupId={waGroupId}
+            icon={IconWhatsApp}
+            groupName={groupName}
+            actionClassName={actionClassName}
+          />
+          <PlatformAction
+            platform="tg"
+            platformLabel="Telegram"
+            link={tgLink}
+            groupId={tgGroupId}
+            icon={IconTelegram}
+            groupName={groupName}
+            actionClassName={actionClassName}
+          />
+        </div>
       </div>
     </Card>
   )
@@ -100,16 +103,26 @@ function PlatformAction({
 
   return (
     <>
-      <a href={link} target="_blank" rel="noopener noreferrer" aria-label={`${groupName} su ${platformLabel}`}>
+      <a
+        href={link}
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label={`${groupName} su ${platformLabel}`}
+        className="group/action rounded-full outline-none focus-visible:ring-2 focus-visible:ring-blue-secondary"
+      >
         <CardAction gradient={false} className={actionClassName} icon={icon} iconSize="sm" />
       </a>
       {groupId !== undefined && (
         <ReportFinderDialog
           selectedReport={{ groupId, type: platform, reportType: "broken_link", reportedLink: link }}
           selectedGroupName={groupName}
           trigger={
-            <button type="button" aria-label={`Segnala il link ${platformLabel} di ${groupName} come non funzionante`}>
-              <CardAction gradient={false} className="p-2 text-text-secondary sm:p-3.75" icon={FiFlag} iconSize="xs" />
+            <button
+              type="button"
+              aria-label={`Segnala il link ${platformLabel} di ${groupName} come non funzionante`}
+              className="rounded-full text-text-secondary outline-none transition-colors hover:text-text-primary focus-visible:ring-2 focus-visible:ring-blue-secondary"
+            >
+              <CardAction gradient={false} className="p-2 text-current sm:p-3" icon={FiFlag} iconSize="xs" />
             </button>
           }
         />