Merge branch 'source' into new-conf-design--speakers

Author: hasparus

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/cta-card-section/index.tsx

@@ -0,0 +1,65 @@
+import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
+
+import logoMask from "./logo-mask.webp"
+
+export interface CtaCardSectionProps extends React.HTMLAttributes<HTMLElement> {
+  title: string
+  description: string
+  children: React.ReactNode
+}
+
+export function CtaCardSection({
+  className,
+  title: heading,
+  description,
+  children,
+  ...rest
+}: CtaCardSectionProps) {
+  return (
+    <div className="gql-conf-section">
+      <section
+        className="relative overflow-hidden bg-gradient-to-r from-pri-dark to-pri-base p-6 dark:from-pri-darker dark:to-pri-dark sm:p-16"
+        {...rest}
+      >
+        <div className="relative z-10 flex flex-col gap-10 sm:items-start [@media(max-width:420px)]:text-center">
+          <div className="flex flex-col gap-6">
+            <h2 className="text-neu-0 typography-d1 dark:text-neu-900">
+              {heading}
+            </h2>
+            <p className="max-w-[555px] text-pretty text-neu-50 typography-body-lg dark:text-neu-800">
+              {description}
+            </p>
+          </div>
+
+          {children}
+        </div>
+
+        <div
+          role="presentation"
+          // prettier-ignore
+          className="
+              pointer-events-none absolute
+              sm:bottom-[-277px] inset-0 sm:left-1/3 xl:left-1/2 sm:top-[-107px] xl:right-[-391px]
+              [--start:hsl(var(--color-sec-base))]
+              [--end:hsl(var(--color-sec-lighter))]
+              dark:[--start:hsl(var(--color-sec-dark))]
+              dark:[--end:hsl(var(--color-sec-base))]
+
+              [mask-size:cover]
+              max-sm:[mask-position:center] max-sm:opacity-50
+              sm:[mask-size:1117px]
+            "
+          style={{
+            maskImage: `url(${logoMask.src})`,
+            maskRepeat: "no-repeat",
+          }}
+        >
+          <StripesDecoration
+            thin
+            oddClassName="bg-[linear-gradient(180deg,var(--start)_0%,var(--end)_100%)]"
+          />
+        </div>
+      </section>
+    </div>
+  )
+}

src/app/conf/2025/components/cta-card-section/logo-mask.webp

@@ -23,13 +23,15 @@ export function Footer({
   return (
     <footer className="gql-all-anchors-focusable relative !bg-neu-100 text-neu-900 typography-menu dark:!bg-neu-0 max-md:px-0 max-md:pt-0">
       <Stripes />
-      <div className="flex flex-wrap justify-between gap-4 px-6 py-4 max-md:w-full lg:py-10">
+      <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>
@@ -41,7 +43,7 @@ export function Footer({
           </li>
         ))}
       </ul>
-      <div className="relative flex justify-between gap-10 px-6 py-4 text-sm max-lg:flex-col">
+      <div className="relative flex justify-between gap-10 p-4 text-sm max-lg:flex-col md:px-6 2xl:px-10">
         <div className="flex flex-col font-light max-md:gap-5">
           <p>
             Copyright © {new Date().getFullYear()} The GraphQL Foundation. All
@@ -139,7 +141,7 @@ function FooterBox({ box }: { box: FooterLink | FooterLink[] }) {
       href={href}
       title={disabled ? "Coming soon" : undefined}
       className={clsx(
-        "gql-focus-visible relative block h-full p-6",
+        "gql-focus-visible relative block h-full p-4 pb-8 md:p-6 2xl:px-10",
         disabled ? "pointer-events-none" : "underline-offset-4 hover:underline",
       )}
       tabIndex={disabled ? -1 : undefined}

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

@@ -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/images/2023/1.webp

@@ -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/components/gallery-strip/images/2023/10.webp

@@ -10,6 +10,7 @@ import { Badge } from "../../_components/badge"
 import MenuIcon from "../pixelarticons/menu.svg?svgr"
 import CloseIcon from "../pixelarticons/close.svg?svgr"
 import { GraphQLConfLogoLink } from "./graphql-conf-logo-link"
+import { Anchor } from "../../_design-system/anchor"
 
 export interface NavbarProps {
   links: { href: string; children: React.ReactNode; "aria-disabled"?: true }[]
@@ -31,6 +32,15 @@ export function Navbar({ links, year }: NavbarProps): ReactElement {
 
   useEffect(() => {
     document.body.style.overflow = mobileDrawerOpen ? "hidden" : "auto"
+    if (mobileDrawerOpen) {
+      const closeOnEscape = (event: KeyboardEvent) => {
+        if (event.key === "Escape") setMobileDrawerOpen(false)
+      }
+      document.addEventListener("keydown", closeOnEscape)
+      return () => {
+        document.removeEventListener("keydown", closeOnEscape)
+      }
+    }
   }, [mobileDrawerOpen])
 
   return (
@@ -49,7 +59,7 @@ export function Navbar({ links, year }: NavbarProps): ReactElement {
         )}
       >
         <BackdropBlur />
-        <div className="flex h-[var(--navbar-h)] items-center justify-between gap-5 px-4 lg:px-10">
+        <div className="flex h-[var(--navbar-h)] items-center justify-between gap-5 px-4 md:px-6 2xl:px-10">
           <GraphQLConfLogoLink year={year} />
 
           <div className="mr-auto flex h-full flex-col justify-center whitespace-pre border-x border-blk/60 px-4 typography-menu dark:border-white/80 max-xl:hidden">
@@ -80,27 +90,27 @@ export function Navbar({ links, year }: NavbarProps): ReactElement {
             <div className="flex w-full flex-col lg:mt-0 lg:block">
               {links.map(
                 ({ "aria-disabled": isDisabled, children, ...link }) => (
-                  <NextLink
+                  <Anchor
                     aria-disabled={isDisabled}
                     key={link.href}
                     {...link}
-                    // if external link, open in new tab
-                    {...(link.href.startsWith("https") && {
-                      target: "_blank",
-                      rel: "noopener noreferrer",
-                    })}
                     className={clsx(
                       "p-5 underline-offset-4 hover:underline aria-disabled:pointer-events-none max-lg:text-base",
                       pathname === link.href && "underline",
                     )}
+                    onClick={() => {
+                      if (mobileDrawerOpen) {
+                        setMobileDrawerOpen(false)
+                      }
+                    }}
                   >
                     {children}
                     {isDisabled && (
                       <sup className="ml-2">
                         <Badge className="text-white">Soon</Badge>
                       </sup>
                     )}
-                  </NextLink>
+                  </Anchor>
                 ),
               )}
             </div>

src/app/conf/2025/components/gallery-strip/images/2023/11.webp

@@ -12,6 +12,10 @@ import { RegisterSection } from "./components/register-section"
 import { Sponsors } from "./components/sponsors"
 import { GraphQLFoundationCard } from "./components/graphql-foundation-card"
 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",
@@ -73,8 +77,17 @@ export default function Page() {
             className="my-8 xl:mb-16 xl:mt-10 2xl:mb-24"
           />
           <Venue />
+          <GalleryStrip />
           <GraphQLFoundationCard />
           <FAQ />
+          <CtaCardSection
+            title="Get your ticket"
+            description="Join three transformative days of expert insights and innovation to shape the next decade of APIs!"
+          >
+            <Button variant="primary" href={GET_TICKETS_LINK}>
+              Get tickets
+            </Button>
+          </CtaCardSection>
           <MarqueeRows
             variant="secondary"
             items={HERO_MARQUEE_ITEMS}