new conf design — what to expect

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

@@ -14,7 +14,7 @@ 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",
+        "flex gap-10 px-4 py-8 max-lg:flex-col-reverse lg:px-12 xl:gap-x-24 xl:px-24",
         className,
       )}
     >
@@ -28,10 +28,10 @@ export function RegisterToday({ className }: RegisterTodayProps) {
       />
       <div className="flex flex-col justify-between">
         <div>
-          <h2 className="typography-h2 text-neu-900">
+          <h2 className="text-neu-900 typography-h2">
             Let's celebrate 10 years of GraphQL together
           </h2>
-          <p className="typography-h3 text-neu-800 mt-6 md:mt-10">
+          <p className="mt-6 text-neu-800 typography-h3 md:mt-10">
             Join three transformative days of expert insights and innovation to
             shape the next decade of APIs!
           </p>

src/app/conf/2025/components/what-to-expect.tsx

@@ -0,0 +1,38 @@
+import clsx from "clsx"
+import { HTMLAttributes } from "react"
+
+interface WhatToExpectSectionProps extends HTMLAttributes<HTMLElement> {}
+
+export default function WhatToExpectSection({
+  className,
+  ...rest
+}: WhatToExpectSectionProps) {
+  return (
+    <section
+      className={clsx(
+        "flex gap-6 px-4 py-8 text-neu-900 max-md:flex-col lg:px-12 xl:gap-x-24 xl:px-24",
+        className,
+      )}
+      {...rest}
+    >
+      <h3 className="typography-h2 md:flex-1">What to expect</h3>
+      <dl className="flex flex-col gap-6 uppercase md:flex-1">
+        <ListItem number="3" text="days" />
+        <ListItem number="23" text="speakers" />
+        <ListItem number="36" text="panels & workshops" />
+        <ListItem number="1" text="unique venue" />
+      </dl>
+    </section>
+  )
+}
+
+function ListItem({ number, text }: { number: string; text: string }) {
+  return (
+    <li className="list-none bg-gradient-to-r from-[#CDF27E] p-6 dark:from-[#507501]">
+      <span className="inline-block w-[87px] text-[72px]/none [text-box:trim-both_cap_alphabetic]">
+        {number}
+      </span>{" "}
+      <span className="ml-10 inline-block typography-menu">{text}</span>
+    </li>
+  )
+}

src/app/conf/2025/page.tsx

@@ -9,36 +9,21 @@ import { Sponsors } from "./sponsors"
 import { Speakers } from "./speakers"
 import { RegisterToday } from "./components/register-today"
 import { Hero } from "./components/hero"
+import WhatToExpectSection from "./components/what-to-expect"
 
 export const metadata: Metadata = {
   title: "GraphQLConf 2025 — Sept 08-10",
 }
 
-function Intro() {
-  return (
-    <section className="flex flex-col gap-20 md:gap-32">
-      <h2 className="text-3xl font-normal lg:text-5xl">
-        Celebrating 10 Years of GraphQL. Three transformative days of expert
-        insights and innovation to shape the next decade of APIs together!
-      </h2>
-
-      <GridButton
-        title="Get Tickets"
-        href="https://cvent.me/PBNYEe?utm_source=graphql_conf_2025&utm_medium=website&utm_campaign=cta"
-      />
-    </section>
-  )
-}
-
 export default function Page() {
   return (
     <main>
       <Hero />
-      <div className="mx-auto max-w-[90rem]">
-        <RegisterToday className="my-8 md:mb-16 md:mt-24" />
+      <div className="gql-conf-container mx-auto">
+        <RegisterToday className="md:mb-8 md:mt-24" />
+        <WhatToExpectSection className="md:mb-8 md:mt-24" />
       </div>
-      <div className="container my-20 flex flex-col gap-20 md:my-32 md:gap-32">
-        <Intro />
+      <div className="container my-20 flex flex-col gap-20 md:my-32 md:gap-32 [.light_&_.text-white]:text-neu-900 [.light_&_[alt='Grafbase_logo']]:invert">
         <Sponsors />
         <Sponsor />
         <Speakers />

src/globals.css

@@ -509,5 +509,5 @@ div[id^="headlessui-menu-items"] {
 }
 
 .gql-conf-container {
-  @apply w-[120rem];
+  @apply mx-auto w-full max-w-[120rem];
 }