Updates based on the comments.

Author: nikoshell

src/components/BaseHead.astro

@@ -58,3 +58,5 @@ const { title, description, image = "/social-card.png" } = Astro.props;
   is:inline
   data-domain="ep2025.europython.eu"
   src="https://plausible.io/js/script.js"></script>
+
+<script src="https://kit.fontawesome.com/14a4971ab3.js" crossorigin="anonymous"></script>

src/components/keynoters/keynoter.astro

@@ -13,6 +13,7 @@ export interface Props {
   tagline?: string;
   image?: ImageMetadata;
   placeholder?: boolean;
+  order?: number;
   class?: string;
 }
 
@@ -22,6 +23,7 @@ const {
   tagline,
   image,
   placeholder,
+  order,
   class: className,
 } = Astro.props;
 

src/components/keynoters/keynoters.astro

@@ -1,6 +1,6 @@
 ---
 import Keynoter from "./keynoter.astro";
-import Headline from "@ui/Headline.astro"
+import Headline from "@ui/Headline.astro";
 import Button from "@ui/Button.astro";
 
 import { getCollection } from "astro:content";
@@ -83,19 +83,22 @@ const placeholders = Math.max(0, 6 - keynoters.length);
 
   <ul class="p-0 mt-12 flex gap-6 flex-wrap">
     {
-      keynoters.map((keynoter, index) => (
-        <Keynoter
-          name={keynoter.data.name}
-          slug={keynoter.slug}
-          tagline={keynoter.data.tagline}
-          image={keynoter.data.image}
-          placeholder={false}
-          class:list={[
-            "w-full sm:w-[calc(50%-1rem)] md:w-[calc(30%-1rem)]",
-            { "md:ml-[10%]": index === 0 },
-          ]}
-        />
-      ))
+      keynoters
+        .sort((a, b) => a.data.order - b.data.order)
+        .map((keynoter, index) => (
+          <Keynoter
+            name={keynoter.data.name}
+            slug={keynoter.slug}
+            tagline={keynoter.data.tagline}
+            image={keynoter.data.image}
+            placeholder={false}
+            order={keynoter.data.order}
+            class:list={[
+              "w-full sm:w-[calc(50%-1rem)] md:w-[calc(30%-1rem)]",
+              { "md:ml-[10%]": index === 0 },
+            ]}
+          />
+        ))
     }
     {
       new Array(placeholders)
@@ -118,7 +121,7 @@ const placeholders = Math.max(0, 6 - keynoters.length);
         <span class="text-body-light inline-block mr-2">#</span>
         See other sessions
       </h3>
-      <Button url="/sessions">List of Sessions</Button>
+      <Button url="/programme/sessions">See sessions preview</Button>
     </div>
   </div>
 </section>

src/components/sections/prague.astro

@@ -2,7 +2,7 @@
 import PragueComponent from "@components/hero-section/prague.astro";
 import * as venue from "../../data/home/prague.mdx";
 ---
-  <div class="mt-2 px-6 pb-40 overflow-visible">
+  <div class="mt-12 px-6 pb-32 overflow-visible">
     <PragueComponent title={venue.frontmatter.title}>
       <venue.Content />
     </PragueComponent>

src/components/sections/updates.astro

@@ -13,7 +13,7 @@ deadlines = deadlines
   .slice(0, 3);
 
 ---
-  <section class="prose-xl m-0 p-0">
+  <section class="prose-xl m-0 my-12 p-0">
     <Headline id="updates" title="Updates" />
     <CardContainer>
       {deadlines.map((deadline) => <DeadlineCard id={deadline.slug} />)}

src/components/ui/Button.astro

@@ -1,11 +1,16 @@
 ---
-const {
-  url,
-  class: className = "",
-  secondary = false,
-  outline = false,
-  disabled = false,
-  isExternal
+import Icon from "@ui/Icon.astro";
+
+const { 
+  url, 
+  class: className = "", 
+  secondary = false, 
+  outline = false, 
+  disabled = false, 
+  isExternal, 
+  icon, 
+  iconSvg = false, 
+  iconRight = false 
 } = Astro.props;
 
 const resolvedIsExternal = isExternal ?? url?.startsWith("http");
@@ -15,6 +20,8 @@ const primaryClasses = "bg-button text-text-inverted hover:bg-button-hover borde
 const secondaryClasses = "bg-primary text-white hover:bg-primary-hover border-transparent";
 const outlineClasses = "border-gray-500 text-gray-700 hover:bg-gray-100 hover:bg-button-hover";
 const disabledClasses = "opacity-50 pointer-events-none";
+const iconClasses = "pl-2 w-5 h-5";
+
 ---
 
 {url ? (
@@ -27,7 +34,9 @@ const disabledClasses = "opacity-50 pointer-events-none";
     aria-disabled={disabled}
     {...(resolvedIsExternal ? { target: "_blank", rel: "noopener noreferrer" } : {})}
   >
+    {!iconRight && icon && <Icon name={icon} svg={iconSvg} class={iconClasses} />}
     <slot />
+    {iconRight && icon && <Icon name={icon} svg={iconSvg} class={iconClasses} />}
     {resolvedIsExternal && <span class="ml-1 text-lg leading-4">↗</span>}
   </a>
 ) : (
@@ -39,6 +48,8 @@ const disabledClasses = "opacity-50 pointer-events-none";
     disabled={disabled}
     aria-disabled={disabled}
   >
+    {!iconRight && icon && <Icon name={icon} svg={iconSvg} class={iconClasses} />}
     <slot />
+    {iconRight && icon && <Icon name={icon} svg={iconSvg} class={iconClasses} />}
   </button>
 )}

src/components/ui/Icon.astro

@@ -0,0 +1,28 @@
+---
+const { 
+  name,      
+  svg = false, 
+  class: className = "", 
+  size = "w-5 h-5", // Default size (Tailwind)
+  label = "", 
+  role = "img"
+} = Astro.props;
+---
+
+{svg ? (
+  <svg 
+    class={`${size} ${className}`} 
+    aria-label={label || undefined} 
+    role={label ? role : "presentation"} 
+    aria-hidden={!label}
+  >
+    <use href={`#${name}`} />
+  </svg>
+) : (
+  <i 
+    class={`fa-solid fa-${name} ${size} ${className}`} 
+    aria-label={label || undefined} 
+    role={label ? role : "presentation"} 
+    aria-hidden={!label}
+  ></i>
+)}

src/content/config.ts

@@ -50,6 +50,7 @@ const keynoters = defineCollection({
       name: z.string(),
       tagline: z.string().optional(),
       image: image(),
+      order: z.number(),
     }),
 });
 

src/content/keynoters/brett.mdx

@@ -3,4 +3,5 @@ name: Brett Cannon
 image: ./brett.jpg
 slug: brett-cannon
 tagline: CPython Core Developer & the 5th most prolific PEP (co-)author
+order: 1
 ---

src/content/keynoters/savannah.mdx

@@ -3,4 +3,5 @@ name: Savannah Ostrowski
 image: ./savannah.png
 slug: savannah-ostrowski
 tagline: CPython Core Developer & JIT Maintainer
+order: 2
 ---