fix: collab page mobile

src/components/card-icon/classes.ts

@@ -7,6 +7,7 @@ export const ICON_SIZE_CLASSES: SizeClassMap = {
   md: "h-32 w-32",
   lg: "h-44 w-44",
   inline: "h-6 w-6",
+  "inline-sm": "h-6 w-6",
 }
 
 export const CARD_PADDING_WITHOUT_DESCRIPTION: SizeClassMap = {
@@ -16,6 +17,7 @@ export const CARD_PADDING_WITHOUT_DESCRIPTION: SizeClassMap = {
   md: "p-8",
   lg: "p-8",
   inline: "p-6",
+  "inline-sm": "p-6",
 }
 
 export const CARD_PADDING_WITH_DESCRIPTION: SizeClassMap = {
@@ -25,6 +27,7 @@ export const CARD_PADDING_WITH_DESCRIPTION: SizeClassMap = {
   md: "p-8",
   lg: "p-8",
   inline: "p-6",
+  "inline-sm": "p-6",
 }
 
 export const CONTENT_GAP_CLASSES: SizeClassMap = {
@@ -34,6 +37,7 @@ export const CONTENT_GAP_CLASSES: SizeClassMap = {
   md: "gap-6",
   lg: "gap-6",
   inline: "gap-4",
+  "inline-sm": "gap-4",
 }
 
 export const TITLE_SIZE_CLASSES: SizeClassMap = {
@@ -43,6 +47,7 @@ export const TITLE_SIZE_CLASSES: SizeClassMap = {
   md: "typo-headline-medium",
   lg: "typo-headline-medium",
   inline: "typo-title-large",
+  "inline-sm": "typo-headline-extrasmall",
 }
 
 export const INLINE_CONTAINER_SIZE_CLASSES: SizeClassMap = {
@@ -52,4 +57,5 @@ export const INLINE_CONTAINER_SIZE_CLASSES: SizeClassMap = {
   md: "h-14 w-14",
   lg: "h-16 w-16",
   inline: "h-10 w-10",
+  "inline-sm": "h-10 w-10",
 }

src/components/card-icon/index.tsx

@@ -47,7 +47,9 @@ export function CardIcon(props: CardIconProps) {
                 {title}
               </h3>
             </div>
-            {description && <p className="typo-body-large text-left text-text-primary">{description}</p>}
+            {description && (
+              <p className="typo-body-small sm:typo-body-large text-left text-text-primary">{description}</p>
+            )}
           </div>
         ) : (
           <div className={cn("relative z-10 flex h-full flex-1 flex-col", getContentGapClasses(size), contentClass)}>

src/components/card-icon/types.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react"
 import type { GradientIconType } from "@/components/gradient-icon"
 
-export type CardSize = "compact" | "xs" | "sm" | "md" | "lg" | "inline"
+export type CardSize = "compact" | "xs" | "sm" | "md" | "lg" | "inline" | "inline-sm"
 export type CardBreakpoint = "base" | "sm" | "md" | "lg"
 export type CardAlign = "center" | "start" | "inline"
 

src/components/collabora/about-section.tsx

@@ -1,6 +1,7 @@
 import { FiArrowUpRight, FiMessageSquare, FiUsers } from "react-icons/fi"
 import { MdOutlineHandshake, MdOutlineSchool } from "react-icons/md"
 import { Button } from "@/components/ui/button"
+import { Carousel, CarouselContent, CarouselDots, CarouselItem } from "@/components/ui/carousel"
 import { CardIcon } from "../card-icon"
 
 const cards = [
@@ -12,7 +13,6 @@ const cards = [
       </>
     ),
     icon: FiMessageSquare,
-    size: "sm",
   },
   {
     title: "45k+",
@@ -22,7 +22,6 @@ const cards = [
       </>
     ),
     icon: MdOutlineSchool,
-    size: "sm",
   },
   {
     title: "1000+",
@@ -33,7 +32,6 @@ const cards = [
     ),
 
     icon: FiUsers,
-    size: "sm",
   },
   {
     title: "5",
@@ -43,29 +41,24 @@ const cards = [
       </>
     ),
     icon: MdOutlineHandshake,
-    size: "sm",
   },
 ] as const
 
 export function AboutSection() {
   return (
     <section className="flex w-full flex-row flex-wrap gap-28 px-2 md:px-36">
       <div className="flex min-w-0 flex-1 basis-120 flex-col gap-6">
-        <h2 className="md:typo-display-large typo-display-medium text-center md:text-start">Chi siamo?</h2>
+        <h2 className="sm:typo-display-medium typo-headline-medium text-center md:text-start">Chi siamo?</h2>
 
-        <div className="flex flex-col gap-5 text-start">
-          <p className="typo-title-large text-center md:text-start">
-            PoliNetwork è l'infrastruttura di comunicazione studentesca del Politecnico di Milano.
-          </p>
-          <p className="typo-title-large text-center md:text-start">
-            Gestiamo oltre 500 gruppi Telegram e WhatsApp, una presenza social in crescita e strumenti digitali usati
-            ogni anno da decine di migliaia di studenti di ingegneria, architettura e design.
+        <div className="sm:typo-headline-small typo-body-large flex flex-col gap-5 text-center md:text-start">
+          <p>
+            PoliNetwork è l'infrastruttura di comunicazione studentesca del Politecnico di Milano. Gestiamo oltre 500
+            gruppi Telegram e WhatsApp, una presenza social in crescita e strumenti digitali usati ogni anno da decine
+            di migliaia di studenti di ingegneria, architettura e design.
           </p>
           <div>
-            <p className="typo-title-large text-center text-blue-secondary md:text-start">
-              Chi entra al PoliMi, prima o poi, incontra PoliNetwork.
-            </p>
-            <p className="typo-title-large text-center md:text-start">(e persino studenti di liceo o altri atenei)</p>
+            <p className="text-blue-secondary">Chi entra al PoliMi, prima o poi, incontra PoliNetwork.</p>
+            <p>(e persino studenti di liceo o altri atenei)</p>
           </div>
         </div>
 
@@ -75,11 +68,24 @@ export function AboutSection() {
         </Button>
       </div>
 
-      <div className="grid min-w-0 flex-1 basis-120 grid-cols-2 grid-rows-2 gap-x-8 gap-y-9">
+      <div className="hidden min-w-0 flex-1 basis-120 grid-cols-2 grid-rows-2 gap-x-8 gap-y-9 md:grid">
         {cards.map((card) => (
-          <CardIcon key={card.title} {...card} align="start" className="w-full min-w-0" />
+          <CardIcon key={card.title} {...card} size="sm" align="start" className="w-full min-w-0" />
         ))}
       </div>
+
+      <div className="min-w-0 flex-1 basis-120 md:hidden">
+        <Carousel className="w-full">
+          <CarouselContent>
+            {cards.map((card) => (
+              <CarouselItem key={card.title}>
+                <CardIcon {...card} size="inline" align="inline" className="w-full min-w-0" />
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselDots className="mt-6" />
+        </Carousel>
+      </div>
     </section>
   )
 }

src/components/collabora/association-section.tsx

@@ -5,35 +5,35 @@ export function AssociationSection() {
   return (
     <section className="flex w-full flex-col items-center gap-27 px-6 text-center min-[1616px]:flex-row min-[1616px]:items-end min-[1616px]:px-36">
       <div className="flex w-full min-w-0 flex-1 flex-col items-center gap-6 min-[1616px]:items-start min-[1616px]:text-start">
-        <h2 className="typo-display-large sm:typo-display-medium text-center min-[1616px]:text-start">
+        <h2 className="sm:typo-display-medium typo-headline-medium text-center min-[1616px]:text-start">
           Sei un’associazione studentesca?
         </h2>
 
-        <div className="flex flex-col gap-3 text-center min-[1616px]:text-start">
-          <p className="typo-title-large sm:typo-headline-small">
+        <div className="sm:typo-headline-small typo-body-large flex flex-col gap-3 text-center min-[1616px]:text-start">
+          <p>
             Se fai parte dell'ecosistema universitario del Politecnico di Milano o di un'altra università, possiamo
             valutare collaborazioni su
             <span className="text-blue-secondary">
               {" "}
               eventi congiunti, visibilità reciproca sui canali o iniziative rivolte agli studenti.
             </span>
           </p>
-          <p className="typo-title-large sm:typo-headline-small">
+          <p>
             Le collaborazioni più efficaci che abbiamo avuto nel tempo sono nate da gruppi studenteschi che
             condividevano una parte degli obiettivi che perseguiamo:
             <span className="text-blue-secondary">
               {" "}
               rendere la vita universitaria meno complicata e più ricca per chi studia al Politecnico.
             </span>
           </p>
-          <p className="typo-title-large sm:typo-headline-small">
+          <p>
             Il processo è semplice: ci scrivi, ci descrivi il progetto e valutiamo insieme se c'è una base comune (per
             poi mettere i nostri talent a disposizione di questa partnership).
           </p>
         </div>
       </div>
 
-      <div className="flex w-full min-w-0 flex-1 items-center justify-center min-[1616px]:min-w-[611px]">
+      <div className="flex w-full min-w-0 flex-1 items-center justify-center min-[1616px]:min-w-152.75">
         <Image
           src={associationsImage}
           alt=""

src/components/collabora/collaboration-section.tsx

@@ -2,24 +2,22 @@ export function CollaborationSection() {
   return (
     <section className="flex w-full flex-col items-center gap-8 px-6 text-center min-[1616px]:flex-row min-[1616px]:items-start min-[1616px]:px-36">
       <div className="flex w-full max-w-[959] flex-col items-center gap-6 min-[1616px]:items-start min-[1616px]:text-start">
-        <h2 className="typo-display-large sm:typo-display-medium text-center min-[1616px]:text-start">
+        <h2 className="md:typo-display-medium typo-headline-medium text-center min-[1616px]:text-start">
           Cosa possiamo fare insieme?
         </h2>
 
-        <div className="flex flex-col gap-3 text-center min-[1616px]:text-start">
-          <p className="typo-title-large sm:typo-headline-small">
+        <div className="sm:typo-headline-small typo-body-large flex flex-col gap-3 text-center min-[1616px]:text-start">
+          <p>
             Collaborare con noi significa{" "}
             <span className="text-blue-primary">accedere a questa community in modo diretto</span>. Non siamo un canale
             pubblicitario e non accettiamo promozioni commerciali generiche: ogni collaborazione viene valutata in
             termini di valore concreto per gli studenti del Politecnico
-            <span className="typo-headline-extrasmall">
+            <span className="typo-body-small md:typo-body-medium">
               {" "}
               (e nel rispetto dei nostri valori sanciti sul nostro statuto).
             </span>
           </p>
-          <p className="typo-title-large sm:typo-headline-small">
-            Se il progetto ha senso per la nostra community, siamo disponibili a costruirlo insieme!
-          </p>
+          <p>Se il progetto ha senso per la nostra community, siamo disponibili a costruirlo insieme!</p>
         </div>
       </div>
 

src/components/collabora/company-section.tsx

@@ -4,7 +4,7 @@ import companyImage from "@/assets/images/collabora_company.png"
 export function CompanySection() {
   return (
     <section className="flex w-full flex-col-reverse items-center gap-27 px-6 text-center min-[1616px]:flex-row min-[1616px]:items-end min-[1616px]:px-36">
-      <div className="flex w-full min-w-0 flex-1 items-center justify-center min-[1616px]:min-w-[611px]">
+      <div className="flex w-full min-w-0 flex-1 items-center justify-center min-[1616px]:min-w-152.75">
         <Image
           src={companyImage}
           alt=""
@@ -16,18 +16,18 @@ export function CompanySection() {
       </div>
 
       <div className="flex w-full min-w-0 flex-1 flex-col items-center gap-6 min-[1616px]:items-start min-[1616px]:text-start">
-        <h2 className="typo-display-large sm:typo-display-medium text-center min-[1616px]:text-start">
+        <h2 className="sm:typo-display-medium typo-headline-medium text-center min-[1616px]:text-start">
           Sei un’azienda?
         </h2>
 
-        <div className="flex flex-col gap-3 text-center min-[1616px]:text-start">
-          <p className="typo-title-large sm:typo-headline-small">
+        <div className="sm:typo-headline-small typo-body-large flex flex-col gap-3 text-center min-[1616px]:text-start">
+          <p>
             PoliNetwork è un punto di accesso diretto alla community studentesca del Politecnico di Milano: migliaia di
             studenti di corsi tecnici e progettuali, da tutta Italia, in tutti gli anni di corso. Se hai
             <span className="text-blue-secondary"> un'iniziativa che porta valore reale agli studenti</span>, siamo
             disponibili a valutarla.
           </p>
-          <p className="typo-title-large sm:typo-headline-small">
+          <p>
             Siamo aperti a proposte su
             <span className="text-blue-secondary"> eventi, iniziative di recruiting o progetti di visibilità</span>.
             Ogni proposta viene discussa nel rispetto della nostra indipendenza: non facciamo cose che compromettono la

src/components/collabora/contact-section.tsx

@@ -8,26 +8,28 @@ const cards = [
     title: "events@polinetwork.org",
     description: "Ci scrivi una mail descrivendo chi sei e cosa vorresti fare",
     icon: FiMail,
-    size: "sm",
   },
   {
     title: "Condividi la tua visione",
     description: "Quale valore porta il tuo progetto agli studenti del Politecnico?",
     icon: FiHeart,
-    size: "sm",
   },
   {
     title: "Ricevi il nostro feedback",
     description: "Rispondiamo al più presto a tutte le richieste",
     icon: TbArrowBack,
-    size: "sm",
   },
 ] as const
 
+const alignVariants = [
+  { align: "start", size: "sm", visibility: "max-sm:hidden" },
+  { align: "inline", size: "inline-sm", visibility: "sm:hidden" },
+] as const
+
 export function ContactSection() {
   return (
     <section className="flex w-full flex-col gap-6 px-2 md:px-36">
-      <h2 className="typo-display-large sm:typo-display-medium text-start">Come contattarci</h2>
+      <h2 className="sm:typo-display-medium typo-headline-medium text-center md:text-start">Come contattarci</h2>
 
       <div className="grid w-full grid-cols-1 gap-y-10 text-start min-[1616px]:grid-cols-3 min-[1616px]:gap-x-10 min-[1616px]:gap-y-0">
         {cards.map((card, index) => (
@@ -39,14 +41,19 @@ export function ContactSection() {
                 "after:-translate-x-1/2 min-[1616px]:after:-translate-y-1/2 after:absolute after:top-full after:left-1/2 after:z-0 after:h-10 after:w-1 after:bg-[linear-gradient(180deg,#0069A8,#74D4FF)] after:content-[''] min-[1616px]:after:top-1/2 min-[1616px]:after:left-full min-[1616px]:after:h-1 min-[1616px]:after:w-10 min-[1616px]:after:translate-x-0 min-[1616px]:after:bg-[linear-gradient(90deg,#0069A8,#74D4FF)]"
             )}
           >
-            <CardIcon
-              {...card}
-              align="start"
-              className={cn(
-                "relative z-10 w-full min-w-0 min-[1616px]:min-w-104 [&_div>p]:w-55",
-                index === cards.length - 1 && "[&_div>svg]:scale-x-[-1]"
-              )}
-            />
+            {alignVariants.map(({ align, size, visibility }) => (
+              <CardIcon
+                key={align}
+                {...card}
+                align={align}
+                size={size}
+                className={cn(
+                  "relative z-10 w-full min-w-0 min-[1616px]:min-w-104",
+                  visibility,
+                  index === cards.length - 1 && "[&_div>svg]:scale-x-[-1]"
+                )}
+              />
+            ))}
           </div>
         ))}
       </div>