update programme section

Author: nikoshell

src/components/sections/programme.astro

@@ -1,3 +1,18 @@
+---
+import Keynoter from "./keynoters/keynoter.astro";
+import { getCollection } from "astro:content";
+
+const allKeynoters = await getCollection("keynoters");
+const keynoters = allKeynoters.sort((a, b) => a.data.order - b.data.order);
+
+const placeholderCount = Math.max(0, 6 - keynoters.length);
+const placeholders = Array.from({ length: placeholderCount }, (_, i) => ({
+  name: "",
+  url: "",
+  order: keynoters.length + i + 1,
+}));
+---
+
 <section class="sec-wrap prog-section" id="programme">
   <div class="sec-inner prog-inner">
 
@@ -82,6 +97,30 @@
       </div>
     </div>
 
+    <div class="prog-keynoters">
+      <p class="prog-topics-label">Keynote Speakers</p>
+      <ul class="prog-keynoters-grid">
+        {keynoters.map((k) => (
+          <Keynoter
+            name={k.data.name}
+            url={k.data.url || ""}
+            tagline={k.data.tagline}
+            bio={k.data.bio}
+            image={k.data.image}
+            order={k.data.order}
+          />
+        ))}
+        {placeholders.map((p) => (
+          <Keynoter
+            name={p.name}
+            url={p.url}
+            order={p.order}
+            placeholder={true}
+          />
+        ))}
+      </ul>
+    </div>
+
   </div>
 </section>
 
@@ -142,6 +181,7 @@
     color: var(--color-cream, #fff5f0);
     margin-top: 1rem;
     margin-bottom: 1.2rem;
+    text-align: center;
   }
 
   .prog-grid {
@@ -253,6 +293,32 @@
     border-color: var(--color-accent, #f0c040);
   }
 
+  .prog-keynoters {
+    margin-top: 4rem;
+  }
+
+  .prog-keynoters-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0;
+    margin-top: 1.5rem;
+    border: 1px dashed var(--color-border-dark, rgba(255,255,255,0.10));
+    border-radius: 2px;
+    overflow: hidden;
+  }
+
+  @media (max-width: 1024px) {
+    .prog-keynoters-grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (max-width: 640px) {
+    .prog-keynoters-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+
   .prog-events {
     margin-top: 4rem;
     text-align: center;

src/pages/index.astro

@@ -7,7 +7,6 @@ import Krakow from "@sections/krakow.astro";
 import Updates from "@sections/updates/updates.astro";
 import "../styles/bg-universe.css";
 // import Week from "@sections/updates/week.astro";
-import Keynoters from "@sections/keynoters/keynoters.astro";
 // import Speakers from "@sections/speakers.astro";
 // import City from "@sections/city.astro";
 import Sponsors from "@sections/sponsors/sponsors.astro";
@@ -32,7 +31,6 @@ import Connect from "@sections/connect.astro";
     <!-- <Week /> -->
     <EuroSciPy />
     <Updates />
-    <Keynoters />
   </div>
   <Programme />
   <Krakow />