feat: implement CardList component with accordion functionality

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">

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>
+  )
+}

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>
+  )
+}

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>
+  )
+}

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
+}