Draft Hero component

Author: hasparus

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

@@ -0,0 +1,60 @@
+import { clsx } from "clsx"
+import Image from "next-image-export-optimizer"
+import Link from "next/link"
+import { CalendarIcon } from "../pixelarticons/calendar-icon"
+import { PinIcon } from "../pixelarticons/pin-icon"
+import { GET_TICKETS_LINK } from "../links"
+import { Button } from "../../_design-system/button"
+
+export function Hero() {
+  return (
+    <section className="bg-pri-base dark:bg-pri-darker text-neu-0 dark:text-neu-900 relative flex flex-col justify-center">
+      <div className="relative z-10 flex flex-col gap-12 px-4 py-24 md:gap-12 md:px-24">
+        <div className="flex flex-col gap-10 md:flex-row md:items-center md:justify-between">
+          <div className="flex flex-col gap-2">
+            <h1 className="typography-d1 flex flex-wrap gap-2">
+              <span>GraphQLConf</span>
+              <span className="text-sec-base">2025</span>
+            </h1>
+            <div className="flex items-center gap-16">
+              <span className="text-sm md:text-base">hosted by</span>
+              <Image
+                src="/assets/logo-foundation-wordmark.svg"
+                alt="GraphQL Foundation"
+                width={180}
+                height={24}
+                className="h-6 w-auto dark:invert"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-8">
+          <DateAndLocation />
+          <Button className="w-fit" href={GET_TICKETS_LINK}>
+            Get your tickets
+          </Button>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+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="typography-body-md not-italic">
+          Amsterdam, Netherlands
+        </address>
+      </div>
+    </div>
+  )
+}

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">