From e5709742e1a0508ca0d26b37ea01dae353891c40 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Tue, 14 Oct 2025 18:28:07 +0200
Subject: [PATCH 1/6] Move EventCard to a separate file and add types

---
 src/components/events/event-card.tsx          | 77 +++++++++++++++
 src/components/{events.ts => events/index.ts} |  2 +
 src/pages/community/events.mdx                | 96 +++++--------------
 3 files changed, 102 insertions(+), 73 deletions(-)
 create mode 100644 src/components/events/event-card.tsx
 rename src/components/{events.ts => events/index.ts} (99%)

diff --git a/src/components/events/event-card.tsx b/src/components/events/event-card.tsx
new file mode 100644
index 0000000000..41b2e408d6
--- /dev/null
+++ b/src/components/events/event-card.tsx
@@ -0,0 +1,77 @@
+import type { ReactNode } from "react"
+import { clsx } from "clsx"
+
+import { PinIcon } from "@/app/conf/_design-system/pixelarticons/pin-icon"
+import ClockIcon from "@/app/conf/_design-system/pixelarticons/clock.svg?svgr"
+
+export interface EventCardProps {
+  href: string
+  date?: Date
+  city: ReactNode
+  name: ReactNode
+  meta: ReactNode
+  official?: boolean
+}
+
+export function EventCard({
+  href,
+  date,
+  city,
+  name,
+  meta,
+  official,
+}: EventCardProps) {
+  return (
+    <a
+      href={href}
+      className={clsx(
+        "flex rounded-none border border-neutral-300 text-current no-underline dark:border-neutral-700",
+        "group transition-colors *:transition-colors hover:relative hover:!border-primary hover:shadow-2xl hover:shadow-primary/10",
+        "relative after:absolute after:right-4 after:top-4 after:font-sans after:content-['_↗']",
+      )}
+      target="_blank"
+      rel="noreferrer"
+    >
+      {date && date instanceof Date && (
+        <div className="flex w-28 shrink-0 flex-col items-center justify-center bg-zinc-100 dark:bg-zinc-800 group-hover:dark:bg-zinc-700 lg:w-48">
+          <div className="text-5xl font-bold lg:text-7xl">{date.getDate()}</div>
+          <div className="text-sm lg:text-lg">
+            {date.toLocaleString("en", {
+              month: "short",
+              year: "numeric",
+            })}
+          </div>
+        </div>
+      )}
+      <div className="flex grow flex-col gap-4 bg-white px-5 py-4 dark:bg-neutral-900 group-hover:dark:bg-zinc-800 lg:px-10 lg:py-7">
+        <b className="text-primary max-lg:text-xs">{meta}</b>
+        <div className="text-lg font-bold lg:text-2xl">
+          {name}
+          {official ? (
+            <>
+              {" "}
+              <span title="Official GraphQL Local">⭐️</span>
+            </>
+          ) : (
+            ""
+          )}
+        </div>
+        <div className="flex flex-wrap gap-2 text-xs lg:gap-x-6 lg:text-lg">
+          <div className="flex items-center gap-2">
+            <PinIcon className="size-5 fill-primary" />
+            {city}
+          </div>
+          {date && (
+            <div className="flex items-center gap-2">
+              <ClockIcon className="size-5 fill-primary" />
+              {date.toLocaleString("en", {
+                hour: "numeric",
+                minute: "numeric",
+              })}
+            </div>
+          )}
+        </div>
+      </div>
+    </a>
+  )
+}
diff --git a/src/components/events.ts b/src/components/events/index.ts
similarity index 99%
rename from src/components/events.ts
rename to src/components/events/index.ts
index 7d0bf687b4..89521c16ff 100644
--- a/src/components/events.ts
+++ b/src/components/events/index.ts
@@ -1,3 +1,5 @@
+export * from './event-card'
+
 export const events = [
   {
     name: "GraphQLConf 2024",
diff --git a/src/pages/community/events.mdx b/src/pages/community/events.mdx
index 347844939a..f76dccfff7 100644
--- a/src/pages/community/events.mdx
+++ b/src/pages/community/events.mdx
@@ -2,65 +2,19 @@
 title: Events & Meetups
 ---
 
-{/* title can be removed in Nextra 4, since sidebar title will take from first h1 */}
-
 # Events & Meetups
 
 import { LocationIcon, ClockIcon } from "../../icons"
 import { clsx } from "clsx"
 import { useEffect } from "react"
 import { useData } from "nextra/hooks"
-import { meetups } from "../../components/meetups"
-import { events } from "../../components/events"
 import "leaflet/dist/leaflet.css"
+
+import { meetups } from "../../components/meetups"
+import { events, EventCard } from "../../components/events"
 import pinkCircle from "./pink-circle.svg"
 import { Button } from '../../app/conf/_components/button'
 
-export function EventCard({ href, date, city, name, meta, official }) {
-  return (
-    <a
-      href={href}
-      className={clsx(
-        "text-current no-underline flex border border-neutral-300 dark:border-neutral-700 rounded-none",
-        "hover:!border-primary hover:shadow-2xl hover:shadow-primary/10 transition-colors *:transition-colors hover:relative group",
-        "relative after:content-['_↗'] after:font-sans after:absolute after:right-4 after:top-4",
-      )}
-      target="_blank"
-      rel="noreferrer"
-    >
-      {date && date instanceof Date && (
-        <div className="shrink-0 flex flex-col justify-center items-center bg-zinc-100 dark:bg-zinc-800 group-hover:dark:bg-zinc-700 lg:w-48 w-28">
-          <div className="text-5xl lg:text-7xl font-bold">{date.getDate()}</div>
-          <div className="text-sm lg:text-lg">
-            {date.toLocaleString("en", {
-              month: "short",
-              year: "numeric",
-            })}
-          </div>
-        </div>
-      )}
-      <div className="bg-white dark:bg-neutral-900 group-hover:dark:bg-zinc-800 grow py-4 lg:py-7 px-5 lg:px-10 flex flex-col gap-4">
-        <b className="text-primary max-lg:text-xs">{meta}</b>
-        <div className="font-bold text-lg lg:text-2xl">{name}{official ? <>{" "}<span title="Official GraphQL Local">⭐️</span></> : ""}</div>
-        <div className="text-xs lg:text-lg flex flex-wrap lg:gap-x-6 gap-2">
-          <div className="flex items-center gap-2">
-            <LocationIcon className="fill-primary size-5" />
-            {city}
-          </div>
-          {date && (
-            <div className="flex items-center gap-2">
-              <ClockIcon className="fill-primary size-5" />
-              {date.toLocaleString("en", {
-                hour: "numeric",
-                minute: "numeric",
-              })}
-            </div>
-          )}
-        </div>
-      </div>
-    </a>
-  )
-}
 
 export const { pastEvents, upcomingEvents } = events.reduce(
   (acc, event) => {
@@ -76,35 +30,31 @@ export const { pastEvents, upcomingEvents } = events.reduce(
   { pastEvents: [], upcomingEvents: [] },
 )
 
-export function Events({ events }) {
+export function Events({ events, heading }) {
+  if (events.length === 0) return null;
+
   return (
-    <div className="mt-6">
-      {events.map(event => (
-        <EventCard
-          key={event.slug}
-          href={event.eventLink}
-          date={new Date(event.date)}
-          meta={event.host}
-          name={event.name}
-          city={event.location}
-        />
-      ))}
-    </div>
+    <>
+      <h2 className="typography-h2">{heading}</h2>
+      <div className="mt-6">
+        {events.map(event => (
+          <EventCard
+            key={event.slug}
+            href={event.eventLink}
+            date={new Date(event.date)}
+            meta={event.host}
+            name={event.name}
+            city={event.location}
+          />
+        ))}
+      </div>
+    </>
   )
 }
 
-{/*
-## Events
-
-<Events events={upcomingEvents} />
+<Events events={upcomingEvents} heading="Upcoming Events" />
 
-
-
-<details>
-  <summary>Past Events</summary>
-  <Events events={pastEvents} />
-</details>
-*/}
+<Events events={pastEvents} heading="Past Events" />
 
 ## Meetups
 

From d39bd4147a99c76ae882b6b7a3154eb13d975974 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Tue, 14 Oct 2025 20:16:31 +0200
Subject: [PATCH 2/6] Revamp EventCard to match designs

---
 src/components/events/event-card.tsx | 140 +++++++++++++++++++--------
 1 file changed, 101 insertions(+), 39 deletions(-)

diff --git a/src/components/events/event-card.tsx b/src/components/events/event-card.tsx
index 41b2e408d6..97a93db6c8 100644
--- a/src/components/events/event-card.tsx
+++ b/src/components/events/event-card.tsx
@@ -1,15 +1,59 @@
 import type { ReactNode } from "react"
 import { clsx } from "clsx"
 
+import { CalendarIcon } from "@/app/conf/_design-system/pixelarticons/calendar-icon"
 import { PinIcon } from "@/app/conf/_design-system/pixelarticons/pin-icon"
-import ClockIcon from "@/app/conf/_design-system/pixelarticons/clock.svg?svgr"
+import { Tag } from "../../app/conf/_design-system/tag"
+
+const dateFormatter = new Intl.DateTimeFormat("en", {
+  day: "numeric",
+  month: "short",
+  year: "numeric",
+})
+
+const isoLikeDatePattern =
+  /^(\d{4}-\d{2}-\d{2}|\d{4}\/?\d{2}\/?\d{2}|\d{2}\/\d{2}\/\d{4})/
+
+function normaliseDate(value: EventCardProps["date"]) {
+  if (value instanceof Date && !Number.isNaN(value.getTime())) {
+    return value
+  }
+
+  if (typeof value === "string") {
+    const parsed = new Date(value)
+    if (!Number.isNaN(parsed.getTime())) {
+      return parsed
+    }
+  }
+
+  return undefined
+}
+
+function formatDateLabel(value: EventCardProps["date"]) {
+  const parsed = normaliseDate(value)
+
+  if (parsed) {
+    if (typeof value === "string" && !isoLikeDatePattern.test(value.trim())) {
+      return value.trim() || undefined
+    }
+
+    return dateFormatter.format(parsed)
+  }
+
+  if (typeof value === "string") {
+    const trimmed = value.trim()
+    return trimmed.length > 0 ? trimmed : undefined
+  }
+
+  return undefined
+}
 
 export interface EventCardProps {
   href: string
-  date?: Date
+  date?: Date | string | null
   city: ReactNode
   name: ReactNode
-  meta: ReactNode
+  meta?: ReactNode
   official?: boolean
 }
 
@@ -21,53 +65,71 @@ export function EventCard({
   meta,
   official,
 }: EventCardProps) {
+  const dateLabel = formatDateLabel(date)
+  const parsedDate = normaliseDate(date)
+
   return (
     <a
       href={href}
       className={clsx(
-        "flex rounded-none border border-neutral-300 text-current no-underline dark:border-neutral-700",
-        "group transition-colors *:transition-colors hover:relative hover:!border-primary hover:shadow-2xl hover:shadow-primary/10",
-        "relative after:absolute after:right-4 after:top-4 after:font-sans after:content-['_↗']",
+        "gql-focus-visible group flex min-w-[352px] flex-col overflow-hidden border border-neu-200 bg-neu-0 text-left text-current no-underline ring-neu-400 hover:bg-sec-base/[.035] hover:ring-1 hover:ring-offset-1 hover:ring-offset-neu-0 dark:border-neu-100 dark:ring-neu-100",
       )}
       target="_blank"
       rel="noreferrer"
     >
-      {date && date instanceof Date && (
-        <div className="flex w-28 shrink-0 flex-col items-center justify-center bg-zinc-100 dark:bg-zinc-800 group-hover:dark:bg-zinc-700 lg:w-48">
-          <div className="text-5xl font-bold lg:text-7xl">{date.getDate()}</div>
-          <div className="text-sm lg:text-lg">
-            {date.toLocaleString("en", {
-              month: "short",
-              year: "numeric",
-            })}
-          </div>
-        </div>
-      )}
-      <div className="flex grow flex-col gap-4 bg-white px-5 py-4 dark:bg-neutral-900 group-hover:dark:bg-zinc-800 lg:px-10 lg:py-7">
-        <b className="text-primary max-lg:text-xs">{meta}</b>
-        <div className="text-lg font-bold lg:text-2xl">
-          {name}
-          {official ? (
-            <>
-              {" "}
-              <span title="Official GraphQL Local">⭐️</span>
-            </>
+      <div className="flex flex-1 flex-col">
+        <div
+          className={clsx(
+            "flex items-center justify-between gap-2 px-4 pt-2.5 text-neu-700 dark:text-neu-600",
+            meta && "border-b border-neu-200 pb-2.5 dark:border-neu-100",
+          )}
+        >
+          {meta ? (
+            <span className="typography-body-md font-medium">{meta}</span>
           ) : (
-            ""
+            <span className="sr-only">Official GraphQL Local</span>
+          )}
+          {official && (
+            <Tag color="hsl(var(--color-pri-base))" className="*:gap-1">
+              <span className="font-sans" aria-hidden>
+                ★
+              </span>
+              Official
+            </Tag>
           )}
         </div>
-        <div className="flex flex-wrap gap-2 text-xs lg:gap-x-6 lg:text-lg">
-          <div className="flex items-center gap-2">
-            <PinIcon className="size-5 fill-primary" />
-            {city}
-          </div>
-          {date && (
-            <div className="flex items-center gap-2">
-              <ClockIcon className="size-5 fill-primary" />
-              {date.toLocaleString("en", {
-                hour: "numeric",
-                minute: "numeric",
-              })}
+
+        <div className="typography-h3 flex min-h-[124px] flex-1 flex-col justify-center px-4 py-6 text-neu-900">
+          {name}
+        </div>
+
+        <div
+          className={clsx(
+            "flex flex-wrap border-t border-neu-200 text-neu-700 dark:border-neu-100",
+            dateLabel && city
+              ? "grid grid-cols-2 divide-x divide-neu-200 dark:divide-neu-100"
+              : "",
+          )}
+        >
+          {dateLabel && (
+            <div className="flex items-center gap-1.5 px-4 py-2.5 text-neu-700 dark:text-neu-600">
+              <CalendarIcon className="size-5 shrink-0 translate-y-[-.5px] text-neu-600 dark:text-neu-500" />
+              {parsedDate ? (
+                <time
+                  dateTime={parsedDate.toISOString()}
+                  className="typography-body-sm"
+                >
+                  {dateLabel}
+                </time>
+              ) : (
+                <span className="typography-body-md">{dateLabel}</span>
+              )}
+            </div>
+          )}
+          {city && (
+            <div className="typography-body-sm flex items-center gap-1.5 whitespace-pre px-4 py-2.5 text-neu-700 dark:text-neu-600">
+              <PinIcon className="size-5 shrink-0 translate-y-[-.5px] text-neu-600 dark:text-neu-500" />
+              {city}
             </div>
           )}
         </div>

From e88ea20289f349b3bb5639339d70f35238eab4de Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Tue, 14 Oct 2025 20:16:42 +0200
Subject: [PATCH 3/6] Add scrollviewFadePlugin

---
 tailwind.config.ts | 52 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/tailwind.config.ts b/tailwind.config.ts
index eeb7669d61..82107207ca 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -202,6 +202,7 @@ const config: Config = {
     }),
     tailwindMediaHover(),
     scrollStartPlugin(),
+    scrollviewFadePlugin(),
     browserPlugin,
   ],
   darkMode: ["class", 'html[class~="dark"]'],
@@ -294,3 +295,54 @@ function scrollStartPlugin() {
     )
   })
 }
+
+function scrollviewFadePlugin() {
+  return plugin(({ addComponents, addBase }) => {
+    addComponents({
+      ".scrollview-x-fade": {
+        position: "relative",
+        scrollTimeline: "--scroll-timeline-x inline",
+        "--fade-start-opacity": "1",
+        "--fade-end-opacity": "1",
+        maskImage: `
+          linear-gradient(to right, 
+            hsl(0 0% 0% / var(--fade-start-opacity)), 
+            black var(--fade-size), 
+            black calc(100% - var(--fade-size)), 
+            hsl(0 0% 0% / var(--fade-end-opacity))
+          )
+        `,
+        WebkitMaskImage: `
+          linear-gradient(to right, 
+            hsl(0 0% 0% / var(--fade-start-opacity)), 
+            black var(--fade-size), 
+            black calc(100% - var(--fade-size)), 
+            hsl(0 0% 0% / var(--fade-end-opacity))
+          )
+        `,
+        animation:
+          "scrollview-fade-start 10s ease-out both, scrollview-fade-end 10s ease-out both",
+        animationTimeline: "--scroll-timeline-x, --scroll-timeline-x",
+        animationRange: "0 2em, calc(100% - 2em) 100%",
+      },
+      "@keyframes scrollview-fade-start": {
+        from: { "--fade-start-opacity": "1" },
+        to: { "--fade-start-opacity": "0" },
+      },
+      "@keyframes scrollview-fade-end": {
+        from: { "--fade-end-opacity": "0" },
+        to: { "--fade-end-opacity": "1" },
+      },
+      "@property --fade-start-opacity": {
+        syntax: '"<number>"',
+        initialValue: "1",
+        inherits: "false",
+      },
+      "@property --fade-end-opacity": {
+        syntax: '"<number>"',
+        initialValue: "1",
+        inherits: "false",
+      },
+    })
+  })
+}

From 84eaa8b23101b2d0ba230c90a5a9d7d6634d82db Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Tue, 14 Oct 2025 20:16:58 +0200
Subject: [PATCH 4/6] Add GraphQLConf 2025 and GraphQL Day at APIDays to events

---
 src/components/events/index.ts | 48 +++++++++++++++++++++++++++-------
 1 file changed, 38 insertions(+), 10 deletions(-)

diff --git a/src/components/events/index.ts b/src/components/events/index.ts
index 89521c16ff..8befb6af03 100644
--- a/src/components/events/index.ts
+++ b/src/components/events/index.ts
@@ -1,13 +1,41 @@
-export * from './event-card'
+export * from "./event-card"
 
-export const events = [
+interface Event {
+  name: string
+  slug: string
+  location: string
+  date: string
+  coverImage?: string
+  eventLink: string
+  host: string
+  hostLink?: string
+}
+
+export const events: Event[] = [
+  {
+    name: "GraphQL Day at APIDays",
+    slug: "graphql-day-at-apidays",
+    location: "CNIT La Defense, Paris",
+    date: "2025-12-11T08:00:00+00:00",
+    eventLink: "https://graphql.day",
+    host: "APIDays & GraphQL Community",
+    hostLink: "https://apidays.co",
+  },
+  {
+    name: "GraphQLConf 2025",
+    slug: "graphql-conf-2025",
+    location: "Amsterdam",
+    date: "2025-09-08T07:00:00+00:00",
+    eventLink: "/conf/2025",
+    host: "GraphQL Foundation",
+  },
   {
     name: "GraphQLConf 2024",
     slug: "graphql-conf-2024",
     location: "San Francisco",
     date: "2024-09-09T07:00:00+00:00",
     eventLink: "/conf/2024",
-    host: "JW Marriott San Francisco Union Square",
+    host: "GraphQL Foundation",
   },
   {
     name: "GraphQL Bali 001",
@@ -32,7 +60,7 @@ export const events = [
     hostLink: "https://www.oursky.com/",
   },
   {
-    name: "Paris December 7",
+    name: "GraphQL Paris before APIDays",
     slug: "graphql-paris-pre-apidays",
     location: "Paris",
     date: "2023-12-07T18:00:00+02:00",
@@ -53,7 +81,7 @@ export const events = [
     hostLink: "https://developer.microsoft.com/en-us/reactor/",
   },
   {
-    name: "Singapore November 6",
+    name: "GraphQL Singapore Meetup #6",
     slug: "graphql-sigapore-6",
     location: "Singapore",
     date: "2023-11-15T18:00:00+08:00",
@@ -75,7 +103,7 @@ export const events = [
     hostLink: "https://www.pinterest.com/",
   },
   {
-    name: "Bangkok November 12",
+    name: "GraphQL BKK 12.0",
     slug: "graphql-bangkok-12",
     location: "Bangkok",
     date: "2023-11-02T18:00:00+07:00",
@@ -86,7 +114,7 @@ export const events = [
     hostLink: "https://sevenpeakssoftware.com/",
   },
   {
-    name: "Seattle October",
+    name: "GraphQL Seattle #1",
     slug: "graphql-seattle-01",
     location: "Seattle",
     date: "2023-10-26T18:00:00-07:00",
@@ -97,7 +125,7 @@ export const events = [
     hostLink: "https://www.microsoft.com/",
   },
   {
-    name: "San Francisco September",
+    name: "GraphQL SF #12",
     slug: "graphql-sf-12",
     location: "San Francisco",
     date: "2023-09-19T18:00:00-07:00",
@@ -108,7 +136,7 @@ export const events = [
     hostLink: "https://github.com/",
   },
   {
-    name: "London September",
+    name: "GraphQL London #1",
     slug: "graphql-london-01",
     location: "London",
     date: "2023-09-07T17:30:00+01:00",
@@ -119,7 +147,7 @@ export const events = [
     hostLink: "https://neo4j.com/",
   },
   {
-    name: "Bangkok July 11",
+    name: "GraphQL BKK 11.0",
     slug: "graphql-bangkok-11",
     location: "Bangkok",
     date: "2023-07-31T18:00:00+07:00",

From 8685f33cdab32a22c825c2a25f088773f311f4c5 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Tue, 14 Oct 2025 20:17:15 +0200
Subject: [PATCH 5/6] Show upcoming and past events on /community/events page

---
 src/pages/community/events.mdx | 77 ++++++++++++++++++++--------------
 1 file changed, 45 insertions(+), 32 deletions(-)

diff --git a/src/pages/community/events.mdx b/src/pages/community/events.mdx
index f76dccfff7..b067f311db 100644
--- a/src/pages/community/events.mdx
+++ b/src/pages/community/events.mdx
@@ -13,7 +13,7 @@ import "leaflet/dist/leaflet.css"
 import { meetups } from "../../components/meetups"
 import { events, EventCard } from "../../components/events"
 import pinkCircle from "./pink-circle.svg"
-import { Button } from '../../app/conf/_components/button'
+import { Button } from '../../app/conf/_design-system/button'
 
 
 export const { pastEvents, upcomingEvents } = events.reduce(
@@ -30,31 +30,40 @@ export const { pastEvents, upcomingEvents } = events.reduce(
   { pastEvents: [], upcomingEvents: [] },
 )
 
-export function Events({ events, heading }) {
+export function EventsScrollview({ children }) {
+  return (
+    <div className="scrollview-x-fade px-1 -mx-1 [--fade-size:4rem] relative flex gap-2 lg:gap-4 overflow-auto py-6 nextra-scrollbar">
+      {children}
+    </div>
+  )
+}
+
+export function Events({ events }) {
   if (events.length === 0) return null;
 
   return (
-    <>
-      <h2 className="typography-h2">{heading}</h2>
-      <div className="mt-6">
-        {events.map(event => (
-          <EventCard
-            key={event.slug}
-            href={event.eventLink}
-            date={new Date(event.date)}
-            meta={event.host}
-            name={event.name}
-            city={event.location}
-          />
-        ))}
-      </div>
-    </>
+    <div className="scrollview-x-fade px-1 -mx-1 [--fade-size:4rem] relative flex gap-2 lg:gap-4 overflow-auto py-6 nextra-scrollbar">
+      {events.map(event => (
+        <EventCard
+          key={event.slug}
+          href={event.eventLink}
+          date={new Date(event.date)}
+          meta={event.host}
+          name={event.name}
+          city={event.location}
+        />
+      ))}
+    </div>
   )
 }
 
-<Events events={upcomingEvents} heading="Upcoming Events" />
+## Upcoming Events
 
-<Events events={pastEvents} heading="Past Events" />
+<Events events={upcomingEvents} />
+
+## Past Events
+
+<Events events={pastEvents} />
 
 ## Meetups
 
@@ -65,9 +74,11 @@ happy to promote your GraphQL event through the
 Please contact us in the `#meetups-admin` channel on
 [the community Discord channel](/community/#official-channels).
 
-<Button href="/community/foundation/local-initiative" className="mx-auto my-6 !block">
-  Start a GraphQL Local!
-</Button>
+<div className="flex mt-6 items-center justify-center">
+  <Button href="/community/foundation/local-initiative">
+    Start a GraphQL Local!
+  </Button>
+</div>
 
 export function Meetups() {
   useEffect(() => {
@@ -93,16 +104,18 @@ export function Meetups() {
   return (
     <>
       <div id="map" className="h-96 my-6 z-0" />
-      {meetups.map(({ node }) => (
-        <EventCard
-          key={node.id}
-          href={node.link}
-          name={node.name}
-          city={node.city + ", " + node.country}
-          official={node.official}
-          date={node.next || node.prev}
-        />
-      ))}
+      <EventsScrollview>
+        {meetups.map(({ node }) => (
+          <EventCard
+            key={node.id}
+            href={node.link}
+            name={node.name}
+            city={node.city + ", " + node.country}
+            official={node.official}
+            date={node.next || node.prev}
+          />
+        ))}
+      </EventsScrollview>
     </>
   )
 }

From 3afd0df2b9eaa58c1eeaafa42d357379fa03f844 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Tue, 14 Oct 2025 20:21:30 +0200
Subject: [PATCH 6/6] Tweak spacing

---
 src/components/events/event-card.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/events/event-card.tsx b/src/components/events/event-card.tsx
index 97a93db6c8..f39d85e807 100644
--- a/src/components/events/event-card.tsx
+++ b/src/components/events/event-card.tsx
@@ -80,8 +80,10 @@ export function EventCard({
       <div className="flex flex-1 flex-col">
         <div
           className={clsx(
-            "flex items-center justify-between gap-2 px-4 pt-2.5 text-neu-700 dark:text-neu-600",
-            meta && "border-b border-neu-200 pb-2.5 dark:border-neu-100",
+            "flex items-center justify-between gap-2 px-4 text-neu-700 dark:text-neu-600",
+            meta
+              ? "border-b border-neu-200 py-2.5 dark:border-neu-100"
+              : "-mb-4 pt-3",
           )}
         >
           {meta ? (