Add Deprecated component for showcasing outdated projects

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

@@ -4,6 +4,7 @@ import discord from "@/assets/icons/discord.svg"
 import telegram from "@/assets/icons/telegram.svg"
 import { CardMultipleIcons } from "@/components/card-multiple-icons"
 import { AboutUs } from "@/components/home/about-us"
+import { CarouselMock } from "@/components/home/carousel-mock"
 import { Hero } from "@/components/home/hero"
 import { Materials } from "@/components/home/materials"
 
@@ -12,6 +13,8 @@ export default function Home() {
     <main className="w-full">
       <Hero />
       <Materials />
+      {/* TODO: delete this when merging */}
+      <CarouselMock />
       <AboutUs />
       <div className="mx-auto w-fit py-12">
         <CardMultipleIcons

src/app/projects/page.tsx

@@ -0,0 +1,9 @@
+import { Deprecated } from "@/components/projects/deprecated"
+
+export default function Home() {
+  return (
+    <main className="w-full">
+      <Deprecated />
+    </main>
+  )
+}

src/components/home/carousel-mock.tsx

@@ -0,0 +1,49 @@
+"use client"
+
+import { CardCaption } from "@/components/card-caption"
+import { Carousel, CarouselContent, CarouselDots, CarouselItem } from "@/components/ui/carousel"
+
+const mockCards = [
+  {
+    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
+
+// TODO: delete this when merging
+export function CarouselMock() {
+  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">
+      <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">
+        PoliNetwork
+      </h1>
+
+      <Carousel className="w-full">
+        <CarouselContent>
+          {mockCards.map((card) => (
+            <CarouselItem key={card.title}>
+              <div className="flex justify-center">
+                <CardCaption {...card} />
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselDots className="mt-8" />
+      </Carousel>
+    </section>
+  )
+}

src/components/projects/deprecated.tsx

@@ -0,0 +1,80 @@
+import { FiArrowDown, FiUploadCloud } from "react-icons/fi"
+import { CardCaption } from "../card-caption"
+import { Button } from "../ui/button"
+import { Carousel, CarouselContent, CarouselDots, CarouselItem } from "../ui/carousel"
+
+const communityCards = [
+  {
+    title: "Title 1",
+    caption:
+      "caption: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.",
+    icon: FiUploadCloud,
+    href: "#",
+  },
+  {
+    title: "Title 2",
+    caption:
+      "caption: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.",
+    icon: FiUploadCloud,
+    href: "#",
+  },
+  {
+    title: "Title 3",
+    caption:
+      "caption: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.",
+    icon: FiUploadCloud,
+    href: "#",
+  },
+  {
+    title: "Title 4",
+    caption:
+      "caption: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.",
+    icon: FiUploadCloud,
+    href: "#",
+  },
+] as const
+
+export function Deprecated() {
+  return (
+    <section className="mx-auto flex min-h-screen max-w-400 flex-col items-center justify-center px-4 py-49">
+      <div className="flex w-full flex-col gap-14 sm:w-fit">
+        <div className="flex flex-col items-center gap-2 sm:items-start">
+          <h3 className="typo-headline-medium sm:typo-display-medium text-center sm:text-left">Progetti deprecati</h3>
+          <p className="typo-body-large text-center sm:text-left">
+            Qui raccogliamo i progetti non più aggiornati o attivi. <br />
+            Puoi contribuire a riportarli in vita, migliorarli o usarli come base per nuove idee.
+          </p>
+        </div>
+
+        <div className="hidden flex-col gap-12 sm:flex">
+          <div className="grid grid-cols-2 justify-items-center gap-6 xl:grid-cols-4">
+            {communityCards.map((card) => (
+              <CardCaption key={card.title} {...card} />
+            ))}
+          </div>
+          <div className="flex justify-center">
+            <Button variant="primary" size="lg">
+              Mostra di più
+              <FiArrowDown />
+            </Button>
+          </div>
+        </div>
+
+        <div className="flex w-full items-center justify-center sm:hidden">
+          <Carousel className="w-full">
+            <CarouselContent>
+              {communityCards.map((card) => (
+                <CarouselItem key={card.title}>
+                  <div className="flex justify-center">
+                    <CardCaption {...card} />
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+            <CarouselDots className="mt-8" />
+          </Carousel>
+        </div>
+      </div>
+    </section>
+  )
+}