Add missing pictures and improve styling

Author: hasparus

src/app/day/2026/assets/speakers/an-ngo.webp

@@ -15,6 +15,10 @@ import benjaminImg from "../assets/speakers/benjamin-coenen.webp"
 import jensImg from "../assets/speakers/jens-neuse.webp"
 import pascalImg from "../assets/speakers/pascal-senn.webp"
 import matthiasImg from "../assets/speakers/matthias-le-brun.webp"
+import aurelienImg from "../assets/speakers/aurelien-david.webp"
+import anImg from "../assets/speakers/an-ngo.webp"
+import jonathanImg from "../assets/speakers/jonathan-rainer.webp"
+import vanessaImg from "../assets/speakers/vanessa-johnson.webp"
 
 interface PastSpeaker {
   name: string
@@ -57,11 +61,13 @@ const PAST_SPEAKERS: PastSpeaker[] = [
   {
     name: "Aurélien David",
     role: "Co-founder & CTO, Pennylane",
+    avatar: aurelienImg,
     link: "https://www.linkedin.com/in/aurel-spyl/",
   },
   {
     name: "An Ngo",
     role: "Lead Engineer, bol",
+    avatar: anImg,
     link: "https://www.linkedin.com/in/vliegveld5/",
   },
   {
@@ -85,48 +91,59 @@ const PAST_SPEAKERS: PastSpeaker[] = [
   {
     name: "Vanessa Johnson",
     role: "Android Engineer, The New York Times",
+    avatar: vanessaImg,
     link: "https://www.linkedin.com/in/vanessa-johnson999/",
   },
   {
     name: "Jonathan Rainer",
     role: "Staff Engineer, Apollo GraphQL",
+    avatar: jonathanImg,
     link: "https://www.linkedin.com/in/jonathan-rainer/",
   },
 ]
 
 const ROW_1 = PAST_SPEAKERS.slice(0, 6)
+ROW_1.push(...ROW_1)
 const ROW_2 = PAST_SPEAKERS.slice(6)
+ROW_2.push(...ROW_2)
 
 export function PastSpeakersSection() {
   return (
-    <section className="py-8 xl:py-12">
+    <section className="gql-container py-8 xl:py-12 3xl:[mask-image:linear-gradient(to_right,transparent,black_5%,black_95%,transparent)]">
       <div className="px-4 lg:px-12 xl:px-24">
         <h3 className="typography-h2 mb-2">Past Speakers</h3>
         <p className="typography-body-md mb-8 text-neu-700">
           GraphQL Day Paris 2025
         </p>
       </div>
-      <div className="flex flex-col gap-4 overflow-hidden">
-        <Marquee speed={30} speedOnHover={15} gap={0}>
+      <div className="flex flex-col overflow-hidden">
+        <Marquee speed={25} speedOnHover={12} gap={0}>
           {ROW_1.map(s => (
             <PastSpeakerCard key={s.name} {...s} />
           ))}
         </Marquee>
         <Marquee speed={25} speedOnHover={12} gap={0} reverse>
           {ROW_2.map(s => (
-            <PastSpeakerCard key={s.name} {...s} />
+            <PastSpeakerCard key={s.name} {...s} className="border-t-0" />
           ))}
         </Marquee>
       </div>
     </section>
   )
 }
 
-function PastSpeakerCard({ name, role, avatar, link }: PastSpeaker) {
+function PastSpeakerCard({
+  name,
+  role,
+  avatar,
+  link,
+  className,
+}: PastSpeaker & { className?: string }) {
   return (
     <article
       className={clsx(
-        "group relative w-[300px] shrink-0 overflow-hidden border border-r-0 border-neu-200 bg-neu-0 @container dark:border-neu-100",
+        "group relative w-[300px] shrink-0 overflow-hidden border border-r-0 border-neu-200 bg-neu-0 @container",
+        className,
         styles.speakerCard,
       )}
     >

src/app/day/2026/assets/speakers/aurelien-david.webp

@@ -41,7 +41,7 @@ const markerPoints: MarkerPoint[] = EVENTS.map(e => ({
 
 type MapStatus = "loading" | "ready" | "error"
 
-export function EventsMap() {
+export function EventsMap({ children }: { children: React.ReactNode }) {
   const canvasRef = useRef<HTMLCanvasElement>(null)
   const handleRef = useRef<MapHandle>()
   const { resolvedTheme } = useTheme()
@@ -187,15 +187,15 @@ export function EventsMap() {
           activeEventId={activeEventId}
         />
 
-        <InfoTip />
-
         <MapSkeleton className={status === "loading" ? "" : "!opacity-0"} />
 
         {status === "error" && (
           <div className="pointer-events-none absolute inset-0 flex items-center justify-center text-center text-sm text-neu-600">
             Unable to load the map{errorMessage ? ` (${errorMessage})` : ""}
           </div>
         )}
+
+        {children}
       </div>
     </div>
   )
@@ -223,11 +223,3 @@ function EventMapTooltip({
     </span>
   )
 }
-
-function InfoTip() {
-  return (
-    <div className="pointer-events-none absolute bottom-0 left-0 w-fit translate-y-0.5 px-1 py-0.5 text-[11px] text-neu-700/90 opacity-0 blur-[0.5px] backdrop-blur-sm transition-[transform,opacity,filter] duration-200 ease-out before:inset-0 before:bg-[--sea] before:opacity-30 group-hover/map:translate-y-0 group-hover/map:opacity-100 group-hover/map:blur-0 hover-none:hidden">
-      Pinch or ctrl+scroll to zoom
-    </div>
-  )
-}

src/app/day/2026/assets/speakers/benjamin-coenen.webp

@@ -28,16 +28,17 @@ export default function DayLayout({
       <Navbar
         links={[
           { children: "All GraphQL Events", href: "/community/events/" },
-          { children: "GraphQL.org", href: "/" },
           { children: "GraphQLConf", href: "/conf/2026" },
           {
             children: "GraphQL Day Singapore",
-            href: "https://portal.joinfost.io/event/future-of-software-technologies-singapore-2026/9521470b-6661-4c85-8594-b74d9d7cf2e3/graphql-day-at-fost-singapore",
+            href: "/day/2026/singapore",
           },
         ]}
       />
       <ThemeProvider attribute="class">
-        <div className="bg-neu-0 text-neu-900 antialiased">{children}</div>
+        <div className="gql-all-anchors-focusable bg-neu-0 text-neu-900 antialiased">
+          {children}
+        </div>
       </ThemeProvider>
       <Footer
         logo={<GraphQLDayLogoLink />}
@@ -58,6 +59,7 @@ export default function DayLayout({
             href: "https://www.futureofsoftwaretechnologies.com/manifesto",
           },
           { children: "All GraphQL Events", href: "/community/events/" },
+          // todo: we need to find a better link to use here. the .day website will probably be updated to redirect to this or match this.
           { children: "GraphQL Day Paris 2025", href: "https://graphql.day" },
         ]}
       />

src/app/day/2026/assets/speakers/jonathan-rainer.webp

@@ -9,6 +9,9 @@ import {
 import { EventsMap } from "./events-map"
 import { EVENTS } from "./events-data"
 import { PastSpeakersSection } from "./2026/components/past-speakers"
+import { NavbarPlaceholder } from "./2026/components/navbar"
+import fostLogo from "./2026/assets/fost-logo.svg"
+import Image from "next/image"
 
 export const metadata: Metadata = {
   title: "GraphQL Day 2026",
@@ -19,36 +22,49 @@ export const metadata: Metadata = {
 export default function DayIndexPage() {
   return (
     <>
+      <NavbarPlaceholder className="top-0 bg-[#FBFCF4] before:bg-[#FBFCF4]/30 dark:bg-[#181A12] dark:before:bg-blk/40" />
       <header
-        className="relative bg-[--sea] [--sea:--sea-light] dark:[--sea:--sea-dark]"
+        className="bg-[--sea] [--sea:--sea-light] dark:[--sea:--sea-dark]"
         style={
           {
             "--sea-dark": asRgbString(MAP_COLORS.dark.sea),
             "--sea-light": asRgbString(MAP_COLORS.light.sea),
           } as React.CSSProperties
         }
       >
-        {/* Mobile: map full width, text overlaid */}
-        {/* Desktop: map right-aligned at 75%, text on left */}
-        <div className="relative lg:ml-auto lg:w-3/4">
-          <EventsMap />
-          {/* Gradient fade — bottom-up on mobile, left-to-right on desktop */}
-          {/* eslint-disable-next-line tailwindcss/no-contradicting-classname */}
-          <div className="pointer-events-none absolute inset-0 z-10 bg-gradient-to-t from-[--sea] via-[hsl(var(--sea)/0.6)] via-40% to-transparent lg:bg-gradient-to-r lg:from-[--sea] lg:via-[hsl(var(--sea)/0.4)] lg:via-30% lg:to-transparent" />
-        </div>
-        <div className="gql-container pointer-events-none absolute inset-0 z-20 flex flex-col justify-end px-4 lg:justify-center lg:px-12 xl:px-24">
-          <div className="pointer-events-auto pb-8 pt-20 md:pb-12 lg:max-w-md lg:py-0 xl:max-w-2xl">
-            <h1 className="typography-d1 mb-4 text-neu-900">GraphQL Day</h1>
-            <p className="typography-body-lg text-neu-700 dark:text-neu-200">
-              Community-organized GraphQL events at FOST conferences worldwide.
-            </p>
+        <div className="gql-container relative isolate">
+          <EventsMap>
+            <div className="pointer-events-none absolute inset-0 z-10 bg-gradient-to-t from-[--sea] to-transparent lg:bg-gradient-to-r lg:from-[--sea] lg:to-transparent lg:to-40%" />
+          </EventsMap>
+          <div className="gql-container pointer-events-none absolute inset-0 z-20 flex flex-col justify-end px-4 lg:justify-center lg:px-12 xl:px-24">
+            <div className="pointer-events-auto pb-8 pt-20 md:pb-12 lg:max-w-md lg:py-0 xl:max-w-2xl">
+              <h1 className="typography-d1 mb-4 text-neu-900">GraphQL Day</h1>
+              <p className="typography-body-lg text-neu-700 dark:text-neu-400">
+                Community-organized GraphQL events at FOST conferences
+                worldwide.
+              </p>
+              <a
+                href="https://www.joinfost.io"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="mt-8"
+              >
+                <Image src={fostLogo.src} alt="FOST" width={120} height={40} />
+              </a>
+            </div>
           </div>
         </div>
       </header>
 
-      <main className="gql-container px-4 pb-12 md:pb-20 lg:px-12 xl:px-24">
-        <h2 className="typography-h2 mb-8 mt-6 md:mt-12">2026 Events</h2>
-        <div className="flex flex-col gap-4">
+      <main className="gql-container gql-section">
+        <h2 className="typography-h2 my-6 md:mt-12">GraphQL Days in 2026</h2>
+        <p className="typography-body-md text-neu-700 dark:text-neu-400">
+          Started in Paris. Now in{" "}
+          {Intl.NumberFormat("en-US").format(EVENTS.length)} cities worldwide.
+          Whether you're deep in production or just getting started, this is
+          your chance to connect, share best practices, and see what's new.
+        </p>
+        <div className="mt-8 flex flex-col gap-4">
           {EVENTS.map(event => (
             <NextLink
               key={event.href}
@@ -69,9 +85,9 @@ export default function DayIndexPage() {
             </NextLink>
           ))}
         </div>
-
-        <PastSpeakersSection />
       </main>
+
+      <PastSpeakersSection />
     </>
   )
 }