ui: add speaker section on effect days

apps/web/src/components/effect-days/EffectDaysNavigation.astro

@@ -23,6 +23,7 @@ const EVENT_HOME = { href: "/effect-days", label: "Effect Days" }
 
 const EVENT_LINKS = [
   { href: "/effect-days#program", label: "Program" },
+  { href: "/effect-days#speakers", label: "Speakers" },
   { href: "/effect-days#venue", label: "Venue" },
   { href: "/effect-days/about-livorno", label: "About Livorno" },
   { href: "/effect-days#faq", label: "FAQ" },

apps/web/src/pages/effect-days.astro

@@ -22,6 +22,15 @@ import livorno6 from "@/assets/effect-days/livorno-6.avif"
 import livorno7 from "@/assets/effect-days/livorno-7.avif"
 import EffectfulWhite from "@/assets/effect-days/Effectful-white.svg"
 import ziverge from "@/assets/effect-days/ziverge.svg"
+import TwitterLogo from "@/assets/logos/twitter/Twitter.svg"
+import dillonMulroy from "@/assets/effect-days/dillon-mulroy.png"
+import kitLangton from "@/assets/effect-days/kit-langton.png"
+import rhysSullivan from "@/assets/effect-days/rhys-sullivan.png"
+import leonie from "@/assets/effect-days/leonie.jpg"
+import kyleMistele from "@/assets/effect-days/kyle-mistele.png"
+import adamRankin from "@/assets/effect-days/adam-rankin.png"
+import samGoodwin from "@/assets/effect-days/sam-goodwin.png"
+import devinJameson from "@/assets/effect-days/devin-jameson.jpg"
 
 const PROGRAM = [
   {
@@ -47,6 +56,65 @@ const PROGRAM = [
   },
 ]
 
+const SPEAKERS = [
+  {
+    name: "Dillon Mulroy",
+    role: "Principal Engineer",
+    company: "Cloudflare",
+    photo: dillonMulroy,
+    x: "dillon_mulroy",
+  },
+  {
+    name: "Kit Langton",
+    role: "+9,000x Developer",
+    company: "OpenCode",
+    photo: kitLangton,
+    x: "kitlangton",
+  },
+  {
+    name: "Rhys Sullivan",
+    role: "Founder",
+    company: "Executor",
+    photo: rhysSullivan,
+    x: "RhysSullivan",
+  },
+  {
+    name: "Leonie Gräßel",
+    role: "Founder",
+    company: "Novelcrafter",
+    photo: leonie,
+    x: "spaceemotion",
+  },
+  {
+    name: "Kyle Mistele",
+    role: "CTO",
+    company: "HumanLayer",
+    photo: kyleMistele,
+    x: "0xblacklight",
+  },
+  {
+    name: "Adam Rankin",
+    role: "CTO",
+    company: "Warp",
+    photo: adamRankin,
+    x: "rankintweets",
+  },
+  {
+    name: "Sam Goodwin",
+    role: "Founder",
+    company: "Alchemy",
+    photo: samGoodwin,
+    x: "samgoodwin89",
+  },
+  {
+    name: "Devin Jameson",
+    role: "Creator",
+    company: "Foldkit",
+    photo: devinJameson,
+    x: "devinjameson",
+  },
+]
+
 /* Early bird runs first. Set to false once regular pricing starts, which also
    restores the group-discount note under the passes. */
 const EARLY_BIRD_ON_SALE = true
@@ -303,6 +371,53 @@ const FAQ_COLUMNS = [
 
   <SectionDivider />
 
+  <Section id="speakers">
+    <div class="grid grid-cols-1 gap-0 md:grid-cols-2 md:items-baseline-last md:gap-8">
+      <SectionHeader eyebrow="Speakers" title="Who you'll hear from" />
+      <p class="mt-4 text-lg text-zinc-400 md:mt-0">
+        Engineers building on Effect in production, from the teams behind the tools you use. More
+        speakers to be announced.
+      </p>
+    </div>
+
+    <div
+      class="mt-12 grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-[repeat(2,1fr)_0px_repeat(2,1fr)] lg:[&>*:nth-child(4n+1)]:col-start-1 lg:[&>*:nth-child(4n+2)]:col-start-2 lg:[&>*:nth-child(4n+3)]:col-start-4 lg:[&>*:nth-child(4n)]:col-start-5"
+    >
+      {
+        SPEAKERS.map((speaker) => (
+          <div class="flex flex-col overflow-hidden border border-zinc-800 bg-zinc-950">
+            <Image
+              src={speaker.photo}
+              alt={speaker.name}
+              class="aspect-4/5 w-full border-b border-zinc-800 object-cover opacity-80"
+            />
+            <div class="flex flex-1 flex-col p-4">
+              <h3 class="text-lg font-semibold text-white">{speaker.name}</h3>
+              <div class="flex items-center justify-between gap-2">
+                <p class="mt-1 text-sm leading-normal text-zinc-400">
+                  {speaker.role} · {speaker.company}
+                </p>
+                {speaker.x && (
+                  <a
+                    href={`https://x.com/${speaker.x}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label={`${speaker.name} on X`}
+                    class="mt-1 shrink-0 text-zinc-400 transition-colors hover:text-white"
+                  >
+                    <TwitterLogo width={16} height={16} class="size-4" />
+                  </a>
+                )}
+              </div>
+            </div>
+          </div>
+        ))
+      }
+    </div>
+  </Section>
+
+  <SectionDivider />
+
   <Section id="venue">
     <div class="grid grid-cols-1 gap-4 md:gap-8 lg:grid-cols-2 lg:items-baseline-last">
       <SectionHeader eyebrow="The Venue" title="Palazzo Pancaldi, Livorno">