feat(associations): honest logo fallback and a steadier accordion

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

@@ -1,5 +1,6 @@
 import type { Metadata } from "next"
 import { AssociationsList } from "@/components/associations/associations-list"
+import { CONTAINER, PAGE_HERO, PAGE_MAIN } from "@/components/layout/page"
 import { Hero } from "@/components/ui/hero"
 import { getAllAssociations } from "@/queries/associations"
 
@@ -14,12 +15,17 @@ export default async function AssociationsPage() {
   const associations = await getAllAssociations()
 
   return (
-    <main className="mx-auto flex min-h-screen w-full flex-col items-center justify-center gap-20 px-4 py-49 md:gap-39">
-      <Hero title="Associazioni" description="Scopri le associazioni studentesche del Politecnico" />
+    <main className={PAGE_MAIN}>
+      <section className={`${CONTAINER} ${PAGE_HERO}`}>
+        <Hero title="Associazioni" description="Scopri le associazioni studentesche del Politecnico" />
+      </section>
 
-      <div className="w-full max-w-300">
-        <AssociationsList associations={associations} />
-      </div>
+      {/* Figma's list column: 1200px at 1728 */}
+      <section aria-label="Elenco delle associazioni" className={CONTAINER}>
+        <div className="mx-auto w-full max-w-300">
+          <AssociationsList associations={associations} />
+        </div>
+      </section>
     </main>
   )
 }

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

@@ -1,4 +1,5 @@
 import type { Metadata } from "next"
+import { CONTAINER, PAGE_MAIN } from "@/components/layout/page"
 import { FAQsPage } from "@/components/matricole/faqs"
 import { MatricoleGuides } from "@/components/matricole/guides"
 import { MatricoleIntro } from "@/components/matricole/intro"
@@ -14,15 +15,15 @@ export const dynamic = "force-dynamic"
 export default async function MatricolePage() {
   const content = await getFreshmanContent()
   return (
-    <main className="w-full">
+    <main className={PAGE_MAIN}>
       <MatricoleIntro resources={content?.resources ?? []} />
       {content ? (
         <>
           <MatricoleGuides content={content} />
           <FAQsPage faqs={content.faqs} />
         </>
       ) : (
-        <p className="typo-body-large px-6 pb-32 text-center text-text-primary">
+        <p className={`${CONTAINER} typo-body-large text-center text-text-primary`}>
           Le risorse per le matricole non sono disponibili al momento. Riprova più tardi.
         </p>
       )}

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/accordion-association/accordion-content.tsx

@@ -10,19 +10,11 @@ export function AccordionContent({
   return (
     <AccordionPrimitive.Content
       data-slot="accordion-content"
-      className="group overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+      className="overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
       {...props}
     >
-      <div
-        className={cn(
-          "typo-body-large pt-0 transition-all duration-500",
-          "group-data-[state=closed]:px-6 group-data-[state=open]:px-16",
-          "group-data-[state=closed]:pb-0 group-data-[state=open]:pb-16",
-          className
-        )}
-      >
-        {children}
-      </div>
+      {/* From md the text lines up with the name: trigger padding (32) + logo (64) + gap (24) */}
+      <div className={cn("typo-body-large px-4 pb-6 sm:px-5 md:pr-16 md:pb-8 md:pl-30", className)}>{children}</div>
     </AccordionPrimitive.Content>
   )
 }

src/components/accordion-association/accordion-item.tsx

@@ -6,14 +6,16 @@ import { AccordionBackground } from "./accordion-background"
 
 export function AccordionItem({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>) {
   return (
-    <AccordionPrimitive.Item data-slot="accordion-item" className="group/accordion relative overflow-hidden" {...props}>
+    <AccordionPrimitive.Item data-slot="accordion-item" className="group/accordion relative" {...props}>
       <Glass
         className={cn(
-          "relative overflow-hidden rounded-3xl border-white/50 bg-background-blur p-0 text-card-foreground",
+          "relative overflow-hidden rounded-3xl border-white/50 bg-background-blur p-0 text-card-foreground transition-colors",
+          // The header is the clickable part: it brightens on hover and rings the item on keyboard focus
+          "has-[[data-slot=accordion-trigger]:hover]:border-white has-[[data-slot=accordion-trigger]:hover]:bg-white/50 has-[[data-slot=accordion-trigger]:focus-visible]:ring-2 has-[[data-slot=accordion-trigger]:focus-visible]:ring-blue-secondary",
           className
         )}
       >
-        {<AccordionBackground />}
+        <AccordionBackground />
         <div className="relative z-10">{children}</div>
       </Glass>
     </AccordionPrimitive.Item>

src/components/accordion-association/accordion-trigger.tsx

@@ -13,10 +13,9 @@ export function AccordionTrigger({
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(
-          "flex w-full items-center justify-between gap-2 text-left md:gap-4",
-          "typo-title-large md:typo-display-medium outline-none",
-          "p-4 transition-none",
-          "md:p-0 md:transition-all md:duration-500 md:data-[state=closed]:p-6 md:data-[state=open]:px-16 md:data-[state=open]:pt-16 md:data-[state=open]:pb-8",
+          // Same padding open or closed: the name doesn't jump when the item expands
+          "flex w-full cursor-pointer items-center justify-between gap-3 p-4 text-left outline-none sm:gap-4 sm:p-5 md:px-8 md:py-6",
+          "typo-headline-extrasmall sm:typo-title-large md:typo-headline-medium",
           "[&[data-state=open]>svg]:rotate-180",
           className
         )}

src/components/accordion-association/accordion.tsx

@@ -3,5 +3,11 @@ import type * as React from "react"
 import { cn } from "@/lib/utils"
 
 export function Accordion({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot="accordion" className={cn("flex flex-col gap-4", className)} {...props} />
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn("flex flex-col gap-4 md:gap-5", className)}
+      {...props}
+    />
+  )
 }