new conf design — hero

src/app/colors.css

@@ -24,18 +24,16 @@
   --color-neu-900: 75 15% 5%;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-neu-900: 0 0% 100%;
-    --color-neu-800: 75 57% 97%;
-    --color-neu-700: 75 15% 95%;
-    --color-neu-600: 77 14% 90%;
-    --color-neu-500: 76 14% 85%;
-    --color-neu-400: 77 14% 80%;
-    --color-neu-300: 74 14% 70%;
-    --color-neu-200: 76 15% 60%;
-    --color-neu-100: 76 15% 40%;
-    --color-neu-50: 77 14% 20%;
-    --color-neu-0: 75 15% 5%;
-  }
+html.dark {
+  --color-neu-900: 0 0% 100%;
+  --color-neu-800: 75 57% 97%;
+  --color-neu-700: 75 15% 95%;
+  --color-neu-600: 77 14% 90%;
+  --color-neu-500: 76 14% 85%;
+  --color-neu-400: 77 14% 80%;
+  --color-neu-300: 74 14% 70%;
+  --color-neu-200: 76 15% 60%;
+  --color-neu-100: 76 15% 40%;
+  --color-neu-50: 77 14% 20%;
+  --color-neu-0: 75 15% 5%;
 }

src/app/conf/2025/components/hero/image-loaded.tsx

@@ -0,0 +1,21 @@
+"use client"
+
+import type { StaticImageData } from "next/image"
+import { useEffect, useState } from "react"
+
+export interface ImageLoadedProps extends React.HTMLAttributes<HTMLDivElement> {
+  image: string | StaticImageData
+}
+
+export function ImageLoaded({ image, ...rest }: ImageLoadedProps) {
+  const [loaded, setLoaded] = useState(false)
+
+  useEffect(() => {
+    const img = new Image()
+    const src = typeof image === "string" ? image : image.src
+    img.src = src
+    img.onload = () => setLoaded(true)
+  }, [image])
+
+  return <div data-loaded={loaded} {...rest} />
+}

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

@@ -0,0 +1,113 @@
+import { clsx } from "clsx"
+import Image from "next-image-export-optimizer"
+import { CalendarIcon } from "../../pixelarticons/calendar-icon"
+import { PinIcon } from "../../pixelarticons/pin-icon"
+import { GET_TICKETS_LINK } from "../../links"
+import { Button } from "../../../_design-system/button"
+import graphqlFoundationWordmarkSvg from "../../assets/graphql-foundation-wordmark.svg"
+import heroPhoto from "./hero-photo.jpeg"
+import blurBean from "./blur-bean-cropped.webp"
+import { ImageLoaded } from "./image-loaded"
+
+export function Hero() {
+  return (
+    <article className="relative isolate flex flex-col justify-center bg-pri-base text-neu-0 dark:bg-pri-darker dark:text-neu-900">
+      <article className="relative">
+        <Stripes />
+        <div className="gql-conf-container mx-auto flex max-w-full flex-col gap-12 overflow-hidden p-4 pt-6 sm:p-8 sm:pt-12 md:gap-12 md:bg-left md:p-12 lg:px-24 lg:pb-16 lg:pt-24">
+          <div className="flex gap-10 max-md:flex-col md:justify-between">
+            <h1 className="flex flex-wrap gap-2 typography-d1">
+              <span>GraphQLConf</span>
+              <span className="text-sec-base">2025</span>
+            </h1>
+            <div className="flex h-min items-center gap-4">
+              <span className="whitespace-pre typography-body-sm">
+                hosted by
+              </span>
+              <img
+                src={graphqlFoundationWordmarkSvg.src}
+                alt="GraphQL Foundation"
+                width={128}
+                height={34.877}
+              />
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-8">
+            <DateAndLocation />
+            <Button className="md:w-fit" href={GET_TICKETS_LINK}>
+              Get your tickets
+            </Button>
+          </div>
+        </div>
+      </article>
+      <div className="bg-[#000]">
+        <Image
+          src={heroPhoto}
+          width={1920}
+          height={560}
+          alt="five speakers at GraphQLConf 2024"
+          className="mx-auto h-[560px] w-[1920px] max-w-full object-cover"
+        />
+      </div>
+    </article>
+  )
+}
+
+function DateAndLocation() {
+  return (
+    <div className="flex flex-col gap-4 md:flex-row md:gap-6">
+      <div className="flex items-center gap-2">
+        <CalendarIcon className="size-6" />
+        <time dateTime="2025-09-08">September 08</time>
+        <span>-</span>
+        <time dateTime="2025-09-10">10, 2025</time>
+      </div>
+      <div className="flex items-center gap-2">
+        <PinIcon className="size-6" />
+        <address className="not-italic typography-body-md">
+          Amsterdam, Netherlands
+        </address>
+      </div>
+    </div>
+  )
+}
+
+function Stripes() {
+  const maskEven =
+    "repeating-linear-gradient(to right, transparent, transparent 12px, black 12px, black 24px)"
+  const maskOdd =
+    "repeating-linear-gradient(to right, black, black 12px, transparent 12px, transparent 24px)"
+
+  return (
+    <ImageLoaded
+      role="presentation"
+      image={blurBean}
+      className="pointer-events-none absolute inset-x-0 bottom-[-385px] top-[-203px] -z-10 translate-y-12 opacity-0 transition duration-[400ms] ease-linear [mask-size:100%_50%] data-[loaded=true]:translate-y-0 data-[loaded=true]:opacity-100 sm:[mask-size:125%] xl:[mask-size:100%]"
+      style={{
+        maskImage: `url(${blurBean.src})`,
+        WebkitMaskImage: `url(${blurBean.src})`,
+        // maskSize: "100%", // todo: (very low priority) need the newly exported full blur bean with rotation to match the mobile design 1-1
+        maskRepeat: "no-repeat",
+        WebkitMaskRepeat: "no-repeat",
+        maskPosition: "center",
+        WebkitMaskPosition: "center",
+      }}
+    >
+      <div
+        className="absolute inset-0 bg-[linear-gradient(180deg,hsl(var(--color-pri-light))_0%,hsl(319deg_100%_90%_/_0.4)_100%)] dark:bg-[linear-gradient(180deg,hsl(var(--color-pri-dark))_0%,hsl(319_100%_20%_/_1)_100%)]"
+        style={{
+          maskImage: maskEven,
+          WebkitMaskImage: maskEven,
+        }}
+      />
+      <div
+        className="absolute inset-0 bg-[linear-gradient(180deg,hsl(319deg_100%_90%_/_0.2)_0%,hsl(var(--color-pri-base))_100%)] dark:bg-[linear-gradient(180deg,hsl(319_100%_30%_/_1)_0%,hsl(var(--color-pri-dark))_100%)]"
+        style={{
+          maskImage: maskOdd,
+          WebkitMaskImage: maskOdd,
+        }}
+      />
+    </ImageLoaded>
+  )
+}

src/app/conf/2025/register-today/index.tsx → src/app/conf/2025/components/register-today/index.tsx

@@ -1,7 +1,8 @@
 import { clsx } from "clsx"
 import NextImage from "next-image-export-optimizer"
 
-import { Button } from "../../_design-system/button"
+import { Button } from "../../../_design-system/button"
+import { GET_TICKETS_LINK, BECOME_A_SPEAKER_LINK } from "../../links"
 
 import speakerImage from "./speaker.webp"
 
@@ -36,13 +37,8 @@ export function RegisterToday({ className }: RegisterTodayProps) {
           </p>
         </div>
         <div className="mt-10 flex gap-x-6 gap-y-4 max-sm:flex-col">
-          <Button href="https://cvent.me/PBNYEe?utm_source=graphql_conf_2025&utm_medium=website&utm_campaign=register_section">
-            Register today
-          </Button>
-          <Button
-            variant="secondary"
-            href="https://sessionize.com/graphqlconf-2025?utm_medium=website&utm_campaign=speaker_section"
-          >
+          <Button href={GET_TICKETS_LINK}>Register today</Button>
+          <Button variant="secondary" href={BECOME_A_SPEAKER_LINK}>
             Become a speaker
           </Button>
         </div>

src/app/conf/2025/layout.tsx

@@ -6,7 +6,9 @@ import { GraphQLConf, HostedByGraphQLFoundation } from "@/icons"
 import NextLink from "next/link"
 import { NewFontsStyleTag } from "../../fonts"
 import "../../colors.css"
-import "../../typography.css"
+
+// @ts-expect-error: we want to import the same version as Nextra for the main page
+import { ThemeProvider } from "next-themes"
 
 export const metadata = {
   description:
@@ -54,7 +56,9 @@ export default function Layout({
         ]}
         is2025
       />
-      <div className="bg-neu-0 text-neu-900">{children}</div>
+      <ThemeProvider attribute="class">
+        <div className="bg-neu-0 text-neu-900">{children}</div>
+      </ThemeProvider>
       <Footer
         logo={
           <NextLink href="/conf/2025" className="nextra-logo text-white">

src/app/conf/2025/links.ts

@@ -0,0 +1,5 @@
+export const GET_TICKETS_LINK =
+  "https://cvent.me/PBNYEe?utm_source=graphql_conf_2025&utm_medium=website&utm_campaign=register_section"
+
+export const BECOME_A_SPEAKER_LINK =
+  "https://sessionize.com/graphqlconf-2025?utm_medium=website&utm_campaign=speaker_section"

src/app/conf/2025/page.tsx

@@ -7,40 +7,13 @@ import { FAQ } from "./faq"
 import { Register } from "./register"
 import { Sponsors } from "./sponsors"
 import { Speakers } from "./speakers"
-import { RegisterToday } from "./register-today"
+import { RegisterToday } from "./components/register-today"
+import { Hero } from "./components/hero"
 
 export const metadata: Metadata = {
   title: "GraphQLConf 2025 — Sept 08-10",
 }
 
-function Hero() {
-  return (
-    <section className="conf-hero-2025 relative">
-      <div className="flex h-full flex-col justify-center py-16 md:py-28">
-        <div className="flex flex-col items-center justify-center">
-          <h1 className="text-center text-5xl font-bold md:text-7xl">
-            GraphQLConf <span className="font-light">2025</span>
-          </h1>
-          <HostedByGraphQLFoundation className="mb-6 h-8 w-full shrink-0 self-start lg:h-10" />
-          <div className="flex flex-col justify-center text-xl font-medium md:flex-row md:gap-2">
-            <div className="flex items-center gap-1">
-              <time dateTime="2025-09-08">September 08</time>
-              <span>-</span>
-              <time dateTime="2025-09-10">10, 2025</time>
-            </div>
-            <span className="hidden md:block">|</span>
-            <address className="not-italic">Amsterdam, Netherlands</address>
-          </div>
-        </div>
-      </div>
-      <div
-        className="absolute bottom-0 left-1/2 h-px w-[90%] -translate-x-1/2 bg-white/10"
-        aria-hidden="true"
-      />
-    </section>
-  )
-}
-
 function Intro() {
   return (
     <section className="flex flex-col gap-20 md:gap-32">

src/app/conf/2025/pixelarticons/calendar-icon.tsx

@@ -0,0 +1,15 @@
+import { SVGProps } from "react"
+
+export function CalendarIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      {...props}
+    >
+      <path d="M15 2h2v2h4v18H3V4h4V2h2v2h6V2zM5 8h14V6H5v2zm0 2v10h14V10H5z" />
+    </svg>
+  )
+}

src/app/conf/2025/pixelarticons/pin-icon.tsx

@@ -0,0 +1,15 @@
+import { SVGProps } from "react"
+
+export function PinIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      {...props}
+    >
+      <path d="M7 2h10v2H7V2zM5 6V4h2v2H5zm0 8H3V6h2v8zm2 2H5v-2h2v2zm2 2H7v-2h2v2zm2 2H9v-2h2v2zm2 0v2h-2v-2h2zm2-2v2h-2v-2h2zm2-2v2h-2v-2h2zm2-2v2h-2v-2h2zm0-8h2v8h-2V6zm0 0V4h-2v2h2zm-5 2h-4v4h4V8z" />
+    </svg>
+  )
+}

src/app/conf/2025/sponsors.tsx

@@ -2,6 +2,7 @@ import Grafbase from "public/img/conf/Sponsors/Grafbase.svg"
 
 import { clsx } from "clsx"
 import NextImage from "next-image-export-optimizer"
+import { Fragment } from "react"
 
 type LogosType = {
   icon: string
@@ -97,7 +98,7 @@ export function Sponsors() {
     <section>
       <h1 className="conf-heading mb-12">Sponsors</h1>
       {SPONSORS.map(({ title, logos }, i) => (
-        <>
+        <Fragment key={i}>
           <div className="mb-2 flex items-center gap-2 border-b-2 border-dotted border-white/40 pb-1.5">
             {/* Square box */}
             <div className="size-2.5 bg-primary" />
@@ -108,7 +109,7 @@ export function Sponsors() {
             className="flex"
             linkClassName="p-8 lg:p-16 h-28 lg:h-[220px]"
           />
-        </>
+        </Fragment>
       ))}
     </section>
   )