Add talks

src/pages/talks.astro

@@ -0,0 +1,37 @@
+---
+import Layout from "../layouts/Layout.astro";
+import TalkCard from "../components/TalkCard.astro";
+
+const talks = [
+    {
+        id: "devedmonton-hateoas",
+        name: "Hypermedia as the engine of application state - An Introduction",
+        description:
+            "A basic introduction to the concepts behind HATEOAS or Hypermedia as the engine of application state.",
+        link: "/files/DevEdmonton_Talk_HATEOAS.pdf",
+    },
+];
+---
+
+<Layout>
+    <div class="min-h-screen p-4 sm:p-8">
+        <h1
+            class="text-3xl sm:text-4xl font-bold text-secondary mb-6 sm:mb-8 text-center"
+        >
+            Talks
+        </h1>
+        <div
+            class="flex flex-row flex-wrap justify-center gap-4 sm:gap-6 max-w-6xl mx-auto"
+        >
+            {talks.map((talk) => <TalkCard talk={talk} />)}
+        </div>
+
+        {
+            talks.length === 0 && (
+                <p class="text-center text-gray-500 mt-12">
+                    No talks available yet. Check back soon!
+                </p>
+            )
+        }
+    </div>
+</Layout>