new conf design — gallery strip

src/app/conf/2025/components/call-for-proposals.tsx

@@ -382,6 +382,7 @@ export function CallForProposals() {
           >
             {tabsInOrder.map((tab, i) => (
               <TabButton
+                key={tab}
                 tab={tab}
                 tabIndex={i === 0 ? 0 : -1}
                 activeTab={activeTab}

src/app/conf/2025/components/footer/index.tsx

@@ -25,11 +25,13 @@ export function Footer({
       <Stripes />
       <div className="flex flex-wrap justify-between gap-4 p-4 max-md:w-full md:px-6 lg:py-10 2xl:px-10">
         {logo}
-        <div className="flex gap-x-4 gap-y-2 typography-body-lg">
-          <p className="flex items-center gap-2">
+        <div className="flex gap-x-4 typography-body-lg max-sm:grid max-sm:grid-cols-2 max-sm:items-start max-sm:text-lg sm:gap-y-2">
+          <p className="flex items-center whitespace-pre">
             <time dateTime="2025-09-08">September 08</time>
             <span>-</span>
-            <time dateTime="2025-09-10">10, 2025</time>
+            <time dateTime="2025-09-10">
+              10<span className="max-sm:hidden">, 2025</span>
+            </time>
           </p>
           <address className="not-italic">Amsterdam, Netherlands</address>
         </div>

src/app/conf/2025/components/gallery-strip/images/index.ts

@@ -0,0 +1,56 @@
+import image2023_1 from "./2023/1.webp"
+import image2023_2 from "./2023/2.webp"
+import image2023_3 from "./2023/3.webp"
+import image2023_4 from "./2023/4.webp"
+import image2023_5 from "./2023/5.webp"
+import image2023_6 from "./2023/6.webp"
+import image2023_7 from "./2023/7.webp"
+import image2023_8 from "./2023/8.webp"
+import image2023_9 from "./2023/9.webp"
+import image2023_10 from "./2023/10.webp"
+import image2023_11 from "./2023/11.webp"
+import image2023_12 from "./2023/12.webp"
+import image2023_13 from "./2023/13.webp"
+
+import image2024_1 from "./2024/1.webp"
+import image2024_2 from "./2024/2.webp"
+import image2024_3 from "./2024/3.webp"
+import image2024_4 from "./2024/4.webp"
+import image2024_6 from "./2024/6.webp"
+import image2024_7 from "./2024/7.webp"
+import image2024_8 from "./2024/8.webp"
+import image2024_9 from "./2024/9.webp"
+import image2024_11 from "./2024/11.webp"
+import image2024_12 from "./2024/12.webp"
+import image2024_13 from "./2024/13.webp"
+
+export const imagesByYear = {
+  "2023": [
+    image2023_8,
+    image2023_11,
+    image2023_3,
+    image2023_1,
+    image2023_13,
+    image2023_6,
+    image2023_9,
+    image2023_4,
+    image2023_12,
+    image2023_2,
+    image2023_10,
+    image2023_7,
+    image2023_5,
+  ],
+  "2024": [
+    image2024_2,
+    image2024_3,
+    image2024_12,
+    image2024_7,
+    image2024_9,
+    image2024_6,
+    image2024_13,
+    image2024_11,
+    image2024_8,
+    image2024_4,
+    image2024_1,
+  ],
+}

src/app/conf/2025/components/gallery-strip/index.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import { useState } from "react"
+import { clsx } from "clsx"
+import Image from "next-image-export-optimizer"
+import type { StaticImageData } from "next/image"
+
+import { Marquee } from "@/app/conf/_design-system/marquee"
+
+import { imagesByYear } from "./images"
+
+const YEARS = ["2024", "2023"] as const
+type Year = (typeof YEARS)[number]
+
+export interface GalleryStripProps extends React.HTMLAttributes<HTMLElement> {}
+
+export function GalleryStrip({ className, ...rest }: GalleryStripProps) {
+  const [selectedYear, setSelectedYear] = useState<Year>("2024")
+
+  return (
+    <section
+      role="presentation"
+      className={clsx("py-8 md:py-16", className)}
+      {...rest}
+    >
+      <div className="flex gap-3.5 px-4 max-md:items-center md:px-24">
+        {YEARS.map(year => (
+          <button
+            key={year}
+            onClick={() => setSelectedYear(year)}
+            className={clsx(
+              "gql-focus-visible p-1 typography-menu",
+              selectedYear === year
+                ? "bg-sec-light text-neu-900 dark:text-neu-0"
+                : "text-neu-800",
+            )}
+          >
+            {year}
+          </button>
+        ))}
+      </div>
+
+      <div className="mt-6 w-full md:mt-10">
+        <Marquee
+          gap={8}
+          speed={35}
+          drag
+          reverse
+          className="cursor-[var(--cursor-grabbing,grab)] touch-pan-y"
+        >
+          {imagesByYear[selectedYear].map((image, i) => {
+            const key = `${selectedYear}-${i}`
+
+            return <GalleryStripImage key={key} image={image} index={i} />
+          })}
+        </Marquee>
+      </div>
+    </section>
+  )
+}
+
+function GalleryStripImage({
+  image,
+  index,
+}: {
+  image: StaticImageData
+  index: number
+}) {
+  return (
+    <div className="relative md:px-2">
+      <Image
+        data-index={index}
+        src={image}
+        alt=""
+        role="presentation"
+        // intrinsic 799x533
+        height={320}
+        width={index % 4 === 2 ? 256 : index % 3 === 2 ? 420 : 480}
+        className="pointer-events-none h-[320px] object-cover"
+      />
+    </div>
+  )
+}

src/app/conf/2025/page.tsx

@@ -15,6 +15,7 @@ import { MarqueeRows } from "./components/marquee-rows"
 import { CtaCardSection } from "./components/cta-card-section"
 import { Button } from "../_design-system/button"
 import { GET_TICKETS_LINK } from "./links"
+import { GalleryStrip } from "./components/gallery-strip"
 
 export const metadata: Metadata = {
   title: "GraphQLConf 2025 — Sept 08-10",
@@ -76,6 +77,7 @@ export default function Page() {
             className="my-8 xl:mb-16 xl:mt-10 2xl:mb-24"
           />
           <Venue />
+          <GalleryStrip />
           <GraphQLFoundationCard />
           <FAQ />
           <CtaCardSection

src/app/conf/_design-system/marquee.tsx

@@ -5,7 +5,7 @@ import { useMotionValue, animate, motion } from "motion/react"
 import { useState, useEffect, Fragment } from "react"
 import useMeasure from "react-use-measure"
 
-export interface MarqueeProps {
+export interface MarqueeProps extends React.HTMLAttributes<HTMLElement> {
   children: React.ReactNode
   gap?: number
   speed?: number
@@ -27,6 +27,7 @@ export function Marquee({
   className,
   drag = false,
   separator,
+  ...rest
 }: MarqueeProps) {
   const [currentSpeed, setCurrentSpeed] = useState(speed)
   const [ref, { width, height }] = useMeasure()
@@ -93,7 +94,7 @@ export function Marquee({
             setIsTransitioning(true)
             setCurrentSpeed(speed)
           },
-          onPointerUp: () => {
+          onPointerUp: (_event: React.PointerEvent<HTMLElement>) => {
             if (window.matchMedia("(hover: none)").matches) {
               setIsTransitioning(true)
               setCurrentSpeed(speed)
@@ -102,21 +103,40 @@ export function Marquee({
         }
       : {}
 
-  const multiples = drag ? 12 : 2
   const dragProps = drag
     ? {
-        drag: "x" as const,
-        onDragStart: () => {
-          document.documentElement.style.cursor = "grabbing"
+        drag: direction === "horizontal" ? ("x" as const) : ("y" as const),
+        onPointerDown: () => {
+          document.documentElement.style.setProperty(
+            "--cursor-grabbing",
+            "grabbing",
+          )
         },
-        onDragEnd: () => {
+        onPointerUp: (_event: React.PointerEvent<HTMLElement>) => {
           document.documentElement.style.cursor = "initial"
+          document.documentElement.style.removeProperty("--cursor-grabbing")
+        },
+        onDragEnd: () => {
+          setIsTransitioning(true)
+          setCurrentSpeed(speed)
         },
+        dragConstraints:
+          direction === "horizontal"
+            ? {
+                right: 0,
+                // window.innerWidth won't be stale because resizing the window triggers useMeasure
+                left:
+                  typeof window !== "undefined"
+                    ? window.innerWidth - width
+                    : undefined,
+              }
+            : {},
       }
     : {}
 
+  const multiples = 2
   return (
-    <div className={clsx("overflow-hidden", className)}>
+    <div className={clsx("overflow-hidden", className)} {...rest}>
       <motion.div
         className="flex w-max"
         style={{
@@ -130,11 +150,15 @@ export function Marquee({
         ref={ref}
         {...dragProps}
         {...hoverProps}
+        onPointerUp={event => {
+          dragProps.onPointerUp?.(event)
+          hoverProps.onPointerUp?.(event)
+        }}
       >
-        {Array.from({ length: multiples }).map((_, i) => (
+        {Array.from({ length: 2 }).map((_, i) => (
           <Fragment key={i}>
             {children}
-            {separator}
+            {i < multiples - 1 && separator}
           </Fragment>
         ))}
       </motion.div>