feat: Add Projects component

package.json

@@ -14,17 +14,18 @@
     "check:fix": "biome check --write --unsafe"
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-tabs": "^1.1.13",
     "@t3-oss/env-nextjs": "^0.13.10",
     "@tanstack/react-table": "^8.21.3",
     "babel-plugin-react-compiler": "^1.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "1.1.1",
+    "embla-carousel-react": "^8.6.0",
     "geist": "^1.5.1",
     "next": "^15.5.15",
     "next-themes": "^0.4.6",

src/app/page.tsx

@@ -6,12 +6,14 @@ import { CardMultipleIcons } from "@/components/card-multiple-icons"
 import { AboutUs } from "@/components/home/about-us"
 import { Hero } from "@/components/home/hero"
 import { Materials } from "@/components/home/materials"
+import { Projects } from "@/components/home/projects"
 
 export default function Home() {
   return (
     <main className="w-full">
       <Hero />
       <Materials />
+      <Projects />
       <AboutUs />
       <div className="mx-auto w-fit py-12">
         <CardMultipleIcons

src/components/card-caption.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react"
 import type { IconType } from "react-icons"
 import { Card, CardAction, CardContent, CardHeader, CardTitle } from "./ui/card"
 
@@ -6,23 +7,23 @@ export function CardCaption({
   caption,
   icon,
   iconPosition = "right",
+  className,
 }: {
   title: string
-  caption: string
+  caption: ReactNode
   icon?: IconType
   iconPosition?: "top" | "right"
+  className?: string
 }) {
   return (
-    <Card hoverBackground>
+    <Card hoverBackground className={className}>
       <CardHeader
         className={`typo-headline-medium 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">
-        <p>{caption}</p>
-      </CardContent>
+      <CardContent className="typo-body-medium">{typeof caption === "string" ? <p>{caption}</p> : caption}</CardContent>
     </Card>
   )
 }

src/components/home/hero.tsx

@@ -4,7 +4,7 @@ import { Input } from "@/components/ui/input"
 
 export function Hero() {
   return (
-    <section className="flex min-h-screen flex-col gap-40 px-6 pt-24 pb-15 sm:gap-70 sm:px-12 sm:pt-67">
+    <section className="flex min-h-screen flex-col gap-40 px-6 pt-67 pb-15 sm:gap-70 sm:px-12">
       <div className="flex flex-col items-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">
           Trova gruppi, risorse e supporto tra gli studenti del Polimi

src/components/home/materials.tsx

@@ -29,7 +29,7 @@ const quickLinks = [
 
 export function Materials() {
   return (
-    <section className="mx-auto flex max-w-400 flex-col-reverse gap-24 p-11 sm:px-20 sm:py-28 2xl:flex-row 2xl:items-start 2xl:gap-32">
+    <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-5 sm:gap-6 2xl:gap-8 2xl:pt-44">
         <div className="grid gap-4 sm:grid-cols-2 sm:gap-12 2xl:gap-20">
           {/* TODO sotto sm usare le altre card fatte da Diubi */}

src/components/home/projects.tsx

@@ -0,0 +1,73 @@
+import { FiArrowUpRight } from "react-icons/fi"
+import { CardCaption } from "@/components/card-caption"
+import { Button } from "@/components/ui/button"
+import { Carousel, CarouselContent, CarouselDots, CarouselItem } from "../ui/carousel"
+
+const featuredCards = [
+  {
+    title: "WeBeepSync",
+    caption:
+      "WeBeep Sync è una semplice app, user-friendly e senza compromessi che serve per tenere sincronizzati tutti i tuoi file di WeBeep.",
+  },
+  {
+    title: "PolimiSchedule",
+    caption:
+      "Genera un file iCalendar (.ics) a partire dal formato testuale dell’Orario delle lezioni. Possibilità di importare su Google Calendar.",
+  },
+  {
+    title: "WiFiLinux",
+    caption: "Scarica ed esegui lo script Python per attivare la connessione permanente al WiFi Polimi",
+  },
+  {
+    title: "The TOL Project",
+    caption: "Un simulatore gratuito del test di ammissione per le aspiranti matricole di Ingegneria del PoliMi.",
+  },
+] as const
+
+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">
+          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.
+        </p>
+        <p className="typo-body-large max-w-lg sm:hidden">
+          Progetti e strumenti nati dalla community del Politecnico per semplificare la vita universitaria e promuovere
+          l’innovazione. Hai un’idea? Proponila, trova collaboratori e realizza la tua soluzione.
+        </p>
+        <Button variant="primary" size="lg" className="w-fit">
+          Esplora la raccolta
+          <FiArrowUpRight />
+        </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>
+
+      <div className="flex w-full items-center justify-center sm:hidden">
+        <Carousel className="w-full">
+          <CarouselContent>
+            {featuredCards.map((card) => (
+              <CarouselItem key={card.title}>
+                <div className="flex justify-center">
+                  <CardCaption {...card} />
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselDots className="mt-8" />
+        </Carousel>
+      </div>
+    </section>
+  )
+}