new conf design — register today

src/app/conf/2025/layout.tsx

@@ -54,7 +54,7 @@ export default function Layout({
         ]}
         is2025
       />
-      <div>{children}</div>
+      <div className="bg-neu-0 text-neu-900">{children}</div>
       <Footer
         logo={
           <NextLink href="/conf/2025" className="nextra-logo text-white">

src/app/conf/2025/page.tsx

@@ -7,6 +7,7 @@ import { FAQ } from "./faq"
 import { Register } from "./register"
 import { Sponsors } from "./sponsors"
 import { Speakers } from "./speakers"
+import { RegisterToday } from "./register-today"
 
 export const metadata: Metadata = {
   title: "GraphQLConf 2025 — Sept 08-10",
@@ -58,8 +59,11 @@ function Intro() {
 
 export default function Page() {
   return (
-    <main className="text-white">
+    <main>
       <Hero />
+      <div className="mx-auto max-w-[90rem]">
+        <RegisterToday className="my-8 md:mb-16 md:mt-24" />
+      </div>
       <div className="container my-20 flex flex-col gap-20 md:my-32 md:gap-32">
         <Intro />
         <Sponsors />

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

@@ -0,0 +1,52 @@
+import { clsx } from "clsx"
+import NextImage from "next-image-export-optimizer"
+
+import { Button } from "../../_design-system/button"
+
+import speakerImage from "./speaker.webp"
+
+export interface RegisterTodayProps {
+  className?: string
+}
+
+export function RegisterToday({ className }: RegisterTodayProps) {
+  return (
+    <section
+      className={clsx(
+        "flex gap-10 px-4 max-lg:flex-col-reverse lg:px-12 xl:gap-x-24 xl:px-24",
+        className,
+      )}
+    >
+      {/* todo: test if the placeholder works in deploy preview */}
+      <NextImage
+        src={speakerImage}
+        alt="GraphQL Conference"
+        width="450"
+        height="566"
+        className="aspect-[312/392] w-full object-cover max-sm:hidden sm:aspect-[2] lg:aspect-[450/566] lg:h-[566px] lg:w-[450px]"
+      />
+      <div className="flex flex-col justify-between">
+        <div>
+          <h2 className="typography-h2 text-neu-900">
+            Let's celebrate 10 years of GraphQL together
+          </h2>
+          <p className="typography-h3 text-neu-800 mt-6 md:mt-10">
+            Join three transformative days of expert insights and innovation to
+            shape the next decade of APIs!
+          </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"
+          >
+            Become a speaker
+          </Button>
+        </div>
+      </div>
+    </section>
+  )
+}

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

@@ -56,7 +56,7 @@ export type ButtonProps =
 
 export function Button(props: ButtonProps) {
   const className = clsx(
-    "relative flex items-center justify-center gap-2.5 font-normal text-base/none text-neu-0 bg-neu-900 hover:bg-neu-800 active:bg-neu-700 font-sans h-14 px-8 data-[size=md]:h-12 data-[variant=secondary]:bg-neu-100 data-[variant=secondary]:text-neu-900 dark:data-[variant=secondary]:text-neu-0 data-[variant=secondary]:hover:bg-neu-200/75 data-[variant=secondary]:active:bg-neu-200/90",
+    "relative flex items-center justify-center gap-2.5 font-normal text-base/none text-neu-0 bg-neu-900 hover:bg-neu-800 active:bg-neu-700 font-sans h-14 px-8 data-[size=md]:h-12 data-[variant=secondary]:bg-neu-100 data-[variant=secondary]:text-neu-900 dark:data-[variant=secondary]:text-neu-0 data-[variant=secondary]:hover:bg-neu-200/75 data-[variant=secondary]:active:bg-neu-200/90 gql-focus-visible",
     props.className,
   )
 

src/globals.css

@@ -503,3 +503,7 @@ div[id^="headlessui-menu-items"] {
   @apply text-xl;
   @apply dark:border-neutral-700/80;
 }
+
+.gql-focus-visible {
+  @apply focus-visible:outline-neu-900 focus-visible:outline-offset-[5px];
+}