Add GetYourTicket section

Author: hasparus

src/app/conf/2025/components/get-your-ticket/index.tsx

@@ -0,0 +1,29 @@
+import { clsx } from "clsx"
+import { TicketPeriods } from "./ticket-periods"
+
+export function GetYourTicket({ className }: { className?: string }) {
+  return (
+    <section
+      className={clsx(
+        "dark relative overflow-hidden bg-pri-dark px-4 py-8",
+        className,
+      )}
+    >
+      <div className="gql-conf-container lg:px-12 xl:gap-x-24 xl:px-24">
+        <header className="flex flex-wrap justify-between gap-6 md:items-end">
+          <h2 className="whitespace-pre text-white typography-h2">
+            Get your ticket now
+          </h2>
+          <p className="text-neu-800 typography-body-md">
+            The registration deadline is 23:59 Central European Time on the
+            respective date.
+          </p>
+        </header>
+
+        <div className="mt-6 grid gap-px md:mt-10 md:grid-cols-3">
+          <TicketPeriods />
+        </div>
+      </div>
+    </section>
+  )
+}

src/app/conf/2025/components/get-your-ticket/ticket-period.tsx

@@ -0,0 +1,40 @@
+import { Button } from "@/app/conf/_design-system/button"
+import { clsx } from "clsx"
+
+export interface TicketPeriodProps {
+  price: string
+  date: string
+  disabled?: boolean
+  name: string
+}
+
+export function TicketPeriod({
+  price,
+  date,
+  disabled,
+  name,
+}: TicketPeriodProps) {
+  return (
+    <article
+      className={clsx(
+        "flex flex-col backdrop-blur-md [container-type:inline-size]",
+        !disabled
+          ? "border border-pink-200 bg-pri-dark/[0.24]"
+          : "border-r border-pink-200/50 bg-white/[0.12] last:border-r-0",
+      )}
+    >
+      <header className="p-6">
+        <h3 className="text-white typography-h3">{name}</h3>
+      </header>
+      <div className="flex flex-col gap-6 p-6 pt-0">
+        <div className="flex items-end justify-between gap-2">
+          <span className="text-white typography-h2">{price}</span>
+          <span className="text-white typography-body-md">{date}</span>
+        </div>
+        <Button variant="primary" disabled={disabled} className="w-full">
+          Get a ticket
+        </Button>
+      </div>
+    </article>
+  )
+}

src/app/conf/2025/components/get-your-ticket/ticket-periods.tsx

@@ -0,0 +1,51 @@
+"use client"
+
+import { useState } from "react"
+import { useEffect } from "react"
+import { TicketPeriod } from "./ticket-period"
+import { useSyncExternalStore } from "react"
+
+// The registration deadline is 23:59 Central European Time on the respective date.
+// Ticket period end dates (using zero-indexed months)
+const EARLY_BIRD_END_DATE = new Date(2025, 6, 13, 23, 59) // July 13th
+const STANDARD_END_DATE = new Date(2025, 7, 31, 23, 59) // August 31st
+const LATE_END_DATE = new Date(2025, 8, 10, 23, 59) // September 10th
+
+export function TicketPeriods() {
+  const now = useCurrentDate()
+
+  return (
+    <>
+      <TicketPeriod
+        name="Early Bird"
+        price="$599"
+        date="Through 13 July"
+        disabled={now > EARLY_BIRD_END_DATE}
+      />
+      <TicketPeriod
+        name="Standard"
+        price="$799"
+        date="14 July - 31 August"
+        disabled={now > STANDARD_END_DATE || now < EARLY_BIRD_END_DATE}
+      />
+      <TicketPeriod
+        name="Late"
+        price="$899"
+        date="1 September - 10 September"
+        disabled={now > LATE_END_DATE || now < STANDARD_END_DATE}
+      />
+    </>
+  )
+}
+
+const DEFAULT_DATE = new Date(2025, 8, 12)
+
+function useCurrentDate() {
+  const [date, setDate] = useState<Date>(DEFAULT_DATE)
+
+  useEffect(() => {
+    setDate(new Date())
+  }, [])
+
+  return date
+}

src/app/conf/2025/page.tsx

@@ -11,7 +11,7 @@ import { RegisterToday } from "./components/register-today"
 import { Hero } from "./components/hero"
 import WhatToExpectSection from "./components/what-to-expect"
 import TopMindsSection from "./components/top-minds"
-
+import { GetYourTicket } from "./components/get-your-ticket"
 export const metadata: Metadata = {
   title: "GraphQLConf 2025 — Sept 08-10",
 }
@@ -25,6 +25,8 @@ export default function Page() {
         <WhatToExpectSection className="md:mb-8 md:mt-24" />
         <TopMindsSection className="md:mb-8 md:mt-24" hasSpeakersPage={false} />
       </div>
+      <GetYourTicket />
+
       <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 />