From 5a8a30df41accc2ba867e4f8c08b9256d23706e4 Mon Sep 17 00:00:00 2001
From: Bianca <ianoselbiancaroberta02@gmail.com>
Date: Thu, 9 Apr 2026 17:30:11 +0200
Subject: [PATCH] feat: implement CardList component with accordion
 functionality

---
 src/app/page.tsx                             | 40 ++++++++++++++++
 src/components/card-list/accordion-list.tsx  | 49 ++++++++++++++++++++
 src/components/card-list/index.tsx           | 26 +++++++++++
 src/components/card-list/section-content.tsx | 21 +++++++++
 src/components/card-list/types.ts            | 15 ++++++
 5 files changed, 151 insertions(+)
 create mode 100644 src/components/card-list/accordion-list.tsx
 create mode 100644 src/components/card-list/index.tsx
 create mode 100644 src/components/card-list/section-content.tsx
 create mode 100644 src/components/card-list/types.ts

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 62c7213..684f4d8 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,6 @@
 import { FiBook, FiBookOpen, FiClipboard, FiFileText, FiPenTool, FiTriangle, FiUploadCloud } from "react-icons/fi"
 import { CardIcon } from "@/components/card-icon"
+import { CardList } from "@/components/card-list"
 import { Hero } from "@/components/home/hero"
 
 const schoolCards = [
@@ -31,10 +32,49 @@ const otherCards = [
   { title: "Esami", icon: FiClipboard, size: "sm" },
 ] as const
 
+const cardListSections = [
+  {
+    title: "Corsi a scelta Secondo Anno",
+    paragraphs: [
+      `Questa guida è stata redatta dagli admin di Ingegneria Informatica di PoliNetwork, raccogliendo opinioni di diversi studenti che hanno frequentato il corso. Ogni paragrafo è un'opinione. Cliccate sul nome del corso per aprirne la pagina e leggere il programma dettagliato. Essendo, il secondo anno, in comune con Telecomunicazioni, è qui che, sulla base delle scelte tra i vari esami, si decide quale percorso intraprendere tra i due.
+
+In particolare, nel primo semestre è presente, nel piano, un gruppo da 10CFU da comporre nel seguente modo a seconda del percorso scelto :
+
+Informatica: LOGICA E ALGEBRA (5CFU) + (una a scelta tra CHIMICA GENERALE, ONDE ELETTROMAGNETICHE E MEZZI TRASMISSIVI e MISURE) (5CFU)
+
+Telecomunicazioni: ELETTROMAGNETISMO (10CFU)`,
+    ],
+  },
+] as const
+
+const cardListItems = [
+  {
+    label: "Misure",
+    paragraphs: [
+      "Dall'ultima riforma del Regolamento Didattico del Corso di Studio in Ingegneria Informatica (Laurea Di Primo Livello) l'esame di Chimica Generale NON è più l'unico corso che permette di accedere alla magistrale in CS (al Polimi) senza dover svolgere Fisica Tecnica al secondo semestre del terzo anno. Ora un qualsiasi corso del gruppo TABA soddisfa il vincolo, quindi si può scegliere liberamente tra Chimica Generale, Fisica Tecnica, Misure e Onde Elettromagnetiche e Mezzi Trasmissivi. Nel caso in cui al secondo anno si scegliesse Elettromagnetismo e Campi da 10 cfu, al terzo anno si ha l'obbligo di inserire Logica e Algebra (gruppo TABREC) siccome è un corso obbligatorio per l'indirizzo I3I (informatica).",
+    ],
+  },
+  {
+    label: "Onde Elettromagnetiche e mezzi trasmissivi",
+    paragraphs: [
+      "Dall'ultima riforma del Regolamento Didattico del Corso di Studio in Ingegneria Informatica (Laurea Di Primo Livello) l'esame di Chimica Generale NON è più l'unico corso che permette di accedere alla magistrale in CS (al Polimi) senza dover svolgere Fisica Tecnica al secondo semestre del terzo anno. Ora un qualsiasi corso del gruppo TABA soddisfa il vincolo, quindi si può scegliere liberamente tra Chimica Generale, Fisica Tecnica, Misure e Onde Elettromagnetiche e Mezzi Trasmissivi. Nel caso in cui al secondo anno si scegliesse Elettromagnetismo e Campi da 10 cfu, al terzo anno si ha l'obbligo di inserire Logica e Algebra (gruppo TABREC) siccome è un corso obbligatorio per l'indirizzo I3I (informatica).",
+    ],
+  },
+  {
+    label: "Chimica Generale",
+    paragraphs: [
+      "Dall'ultima riforma del Regolamento Didattico del Corso di Studio in Ingegneria Informatica (Laurea Di Primo Livello) l'esame di Chimica Generale NON è più l'unico corso che permette di accedere alla magistrale in CS (al Polimi) senza dover svolgere Fisica Tecnica al secondo semestre del terzo anno. Ora un qualsiasi corso del gruppo TABA soddisfa il vincolo, quindi si può scegliere liberamente tra Chimica Generale, Fisica Tecnica, Misure e Onde Elettromagnetiche e Mezzi Trasmissivi. Nel caso in cui al secondo anno si scegliesse Elettromagnetismo e Campi da 10 cfu, al terzo anno si ha l'obbligo di inserire Logica e Algebra (gruppo TABREC) siccome è un corso obbligatorio per l'indirizzo I3I (informatica).",
+    ],
+  },
+] as const
+
 export default function Home() {
   return (
     <main className="w-full">
       <Hero />
+      <div className="mx-auto max-w-5xl px-4 py-12">
+        <CardList sections={cardListSections} items={cardListItems} />
+      </div>
       <div className="mx-auto flex max-w-6xl flex-col gap-12">
         <section>
           <div className="grid gap-6 sm:grid-cols-2 md:grid-cols-3">
diff --git a/src/components/card-list/accordion-list.tsx b/src/components/card-list/accordion-list.tsx
new file mode 100644
index 0000000..a7dd487
--- /dev/null
+++ b/src/components/card-list/accordion-list.tsx
@@ -0,0 +1,49 @@
+import { useState } from "react"
+import { FiChevronRight } from "react-icons/fi"
+import { cn } from "@/lib/utils"
+import type { CardListAccordionItem } from "./types"
+
+export function CardListAccordionList({ items }: { items: readonly CardListAccordionItem[] }) {
+  const [openIndex, setOpenIndex] = useState<number | null>(null)
+
+  return (
+    <div className="flex flex-col gap-8 pl-5">
+      {items.map((item, index) => {
+        const isOpen = openIndex === index
+
+        return (
+          <div key={item.label} className="flex flex-col gap-4">
+            <button
+              type="button"
+              onClick={() => setOpenIndex((current) => (current === index ? null : index))}
+              className="typo-title-medium inline-flex items-center gap-6 text-left"
+            >
+              <FiChevronRight
+                className={cn("h-4 w-4 shrink-0 text-blue-secondary transition-transform", isOpen ? "rotate-90" : "")}
+              />
+              <span
+                className={cn(
+                  isOpen
+                    ? "text-blue-secondary"
+                    : "bg-linear-to-t from-blue-primary to-blue-secondary bg-clip-text text-transparent"
+                )}
+              >
+                {item.label}
+              </span>
+            </button>
+
+            {isOpen ? (
+              <div className="flex flex-col gap-4 pl-8">
+                {item.paragraphs.map((paragraph) => (
+                  <p key={paragraph} className="typo-body-large text-text-primary">
+                    {paragraph}
+                  </p>
+                ))}
+              </div>
+            ) : null}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/src/components/card-list/index.tsx b/src/components/card-list/index.tsx
new file mode 100644
index 0000000..85d3ebb
--- /dev/null
+++ b/src/components/card-list/index.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import { Glass } from "@/components/glass"
+import { cn } from "@/lib/utils"
+import { CardListAccordionList } from "./accordion-list"
+import { CardListSectionContent } from "./section-content"
+import type { CardListProps } from "./types"
+
+export function CardList({ sections, items, className }: CardListProps) {
+  return (
+    <Glass
+      className={cn(
+        "w-full overflow-hidden rounded-rectangles border-white/50 bg-background-blur p-0 text-card-foreground",
+        className
+      )}
+    >
+      <div className="flex flex-col gap-12 p-10">
+        {sections.map((section) => (
+          <CardListSectionContent key={`${section.title ?? "section"}-${section.paragraphs[0]}`} {...section} />
+        ))}
+
+        {items?.length ? <CardListAccordionList items={items} /> : null}
+      </div>
+    </Glass>
+  )
+}
diff --git a/src/components/card-list/section-content.tsx b/src/components/card-list/section-content.tsx
new file mode 100644
index 0000000..1507bf7
--- /dev/null
+++ b/src/components/card-list/section-content.tsx
@@ -0,0 +1,21 @@
+import type { CardListSection } from "./types"
+
+export function CardListSectionContent({ title, paragraphs }: CardListSection) {
+  return (
+    <div className="flex flex-col gap-6 pt-1.5 pl-3">
+      {title && (
+        <h3 className="typo-headline-small bg-linear-to-t from-blue-primary to-blue-secondary bg-clip-text text-transparent">
+          {title}
+        </h3>
+      )}
+
+      <div className="flex flex-col gap-4 pl-2">
+        {paragraphs.map((paragraph) => (
+          <p key={paragraph} className="typo-body-large max-w-4xl whitespace-pre-line text-text-primary">
+            {paragraph}
+          </p>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/card-list/types.ts b/src/components/card-list/types.ts
new file mode 100644
index 0000000..43e48e8
--- /dev/null
+++ b/src/components/card-list/types.ts
@@ -0,0 +1,15 @@
+export type CardListSection = {
+  title?: string
+  paragraphs: readonly string[]
+}
+
+export type CardListAccordionItem = {
+  label: string
+  paragraphs: readonly string[]
+}
+
+export type CardListProps = {
+  sections: readonly CardListSection[]
+  items?: readonly CardListAccordionItem[]
+  className?: string
+}