finished minimal working prototype

src/pages/domande-esami/[course].astro

@@ -0,0 +1,50 @@
+---
+import type { GetStaticPaths } from 'astro'
+import BaseLayout from '@/layouts/BaseLayout.astro'
+import Footer from '@/components/Footer.astro'
+import Header from '@/components/Header.astro'
+
+import { PhosphorIcon } from '@/client/Icon'
+
+import { marked } from 'marked'
+
+import database from '@/data/domande-esami.yaml'
+
+export const getStaticPaths = (() => {
+    return Object.keys(database.names).map(course => ({
+        params: { course },
+    }))
+}) satisfies GetStaticPaths
+
+const { course } = Astro.params
+---
+
+<BaseLayout title="Domande Esami | PHC" pageTags={'domande-esami'}>
+    <Header />
+    <main>
+        <h1>{course}</h1>
+
+        <div class="search">
+            <input type="text" placeholder="Cerca una domanda per un esame..." />
+            <PhosphorIcon client:load name="magnifying-glass" />
+        </div>
+
+        <div class="wide-card-list">
+            {
+                database.questions
+                    .filter(question => question.course === course)
+                    .map(question => (
+                        <div class="card">
+                            <div class="text">
+                                <Fragment set:html={marked(question.content)} />
+                            </div>
+                            <div class="metadata">
+                                <div class="chip">{question.year}</div>
+                            </div>
+                        </div>
+                    ))
+            }
+        </div>
+    </main>
+    <Footer />
+</BaseLayout>

src/pages/domande-esami/index.astro

@@ -3,29 +3,61 @@ import { PhosphorIcon } from '@/client/Icon'
 import Footer from '@/components/Footer.astro'
 import Header from '@/components/Header.astro'
 import BaseLayout from '@/layouts/BaseLayout.astro'
+
+import database from '@/data/domande-esami.yaml'
+
+const courseQuestionCounts = Object.fromEntries(
+    database.questions.reduce((acc, question) => {
+        acc.set(question.course, (acc.get(question.course) || 0) + 1)
+        return acc
+    }, new Map())
+)
 ---
 
 <BaseLayout title="Domande Esami | PHC" pageTags={'domande-esami'}>
     <Header />
     <main>
         <h1>Domande Esami</h1>
-
-        <div class="search">
-            <input type="text" placeholder="Cerca una domanda per un easme..." />
-            <PhosphorIcon client:load name="magnifying-glass" />
+        <div class="card large">
+            <div class="text">
+                <p>
+                    [Copilot] Benvenuto nella sezione delle domande d'esame! Qui puoi trovare domande di esami
+                    passati per prepararti al meglio per il tuo prossimo esame.
+                </p>
+                <ul>
+                    <li><a href="#triennale-anno-1">Triennale - Anno I</a></li>
+                    <li><a href="#triennale-anno-2">Triennale - Anno II</a></li>
+                    <li><a href="#triennale-anno-3">Triennale - Anno III</a></li>
+                    <li><a href="#istituzioni">Istituzioni</a></li>
+                    <li><a href="#other">Esami a Scelta</a></li>
+                </ul>
+                <p>
+                    Se volessi contribuire con nuove domande, puoi <a href="#">facendo una pull request</a>,
+                    inviandole al
+                    <a href="#">form domande</a> oppure <a href="#">mandandoci una email</a>.
+                </p>
+            </div>
         </div>
 
-        <h2>Corsi</h2>
-
-        <div class="courses card large" style={{ '--card-base': 'hsl(180, 100%, 81%)' }}>
-            <details class="course-group">
-                <summary>
-                    <PhosphorIcon client:load name="caret-down" />
-                    <PhosphorIcon client:load name="caret-up" />
-                    <div class="title">Analisi 1</div>
-                </summary>
-            </details>
-        </div>
+        {
+            database.groups.map(group => (
+                <>
+                    <h2 id={group.id}>{group.name}</h2>
+                    <div class="wide-card-list">
+                        {group.items.map(course => (
+                            <a href={`/domande-esami/${course}`}>
+                                <div class="card">
+                                    <h2>{database.names[course]}</h2>
+                                    <div class="text">
+                                        <p>{courseQuestionCounts[course] || 0} domande disponibili</p>
+                                    </div>
+                                </div>
+                            </a>
+                        ))}
+                    </div>
+                </>
+            ))
+        }
     </main>
     <Footer />
 </BaseLayout>