Improve GetYourTicket styles

hasparus · hasparus · commit cc5b1ed318bb · 2025-05-15T18:08:36.000+02:00
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "@graphql-tools/schema": "10.0.15",
     "@headlessui/react": "^1.7.17",
     "@radix-ui/react-radio-group": "^1.1.3",
+    "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
     "@tailwindcss/typography": "^0.5.10",
     "autoprefixer": "^10.4.17",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/colors.css b/src/app/colors.css
@@ -1,4 +1,5 @@
-:root {
+:root,
+.light {
   --color-pri-lighter: 319 100% 90%;
   --color-pri-light: 319 100% 90%;
   --color-pri-base: 319 100% 44%;
@@ -24,7 +25,7 @@
   --color-neu-900: 75 15% 5%;
 }
 
-html.dark {
+.dark {
   --color-neu-900: 0 0% 100%;
   --color-neu-800: 75 57% 97%;
   --color-neu-700: 75 15% 95%;
diff --git a/src/app/conf/2025/components/get-your-ticket/index.tsx b/src/app/conf/2025/components/get-your-ticket/index.tsx
@@ -5,22 +5,22 @@ export function GetYourTicket({ className }: { className?: string }) {
   return (
     <section
       className={clsx(
-        "dark relative overflow-hidden bg-pri-dark px-4 py-8",
+        "dark relative overflow-hidden bg-pri-dark px-4 py-8 lg:py-16 xl:py-24",
         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
+            Get your ticket
           </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">
+        <div className="mt-6 grid gap-px backdrop-blur-[6px] md:mt-10 md:grid-cols-3">
           <TicketPeriods />
         </div>
       </div>
diff --git a/src/app/conf/2025/components/get-your-ticket/ticket-period.tsx b/src/app/conf/2025/components/get-your-ticket/ticket-period.tsx
@@ -1,9 +1,10 @@
 import { Button } from "@/app/conf/_design-system/button"
 import { clsx } from "clsx"
+import { GET_TICKETS_LINK } from "../../links"
 
 export interface TicketPeriodProps {
   price: string
-  date: string
+  date: Date | [Date, Date]
   disabled?: boolean
   name: string
 }
@@ -17,24 +18,56 @@ export function TicketPeriod({
   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",
+        "@container/card flex flex-col border border-pri-lighter bg-pri-light/[0.24] backdrop-blur-md transition [&+&]:border-l-0",
+        disabled && "opacity-50",
       )}
     >
-      <header className="p-6">
+      <header className="border-b border-pri-lighter 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 h-full flex-col justify-end gap-6 p-6">
         <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>
+          <span className="@[356px]:typography-h2 text-white typography-h3">
+            {price}
+          </span>
+          {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
+          <span className="ticket-period--date text-right text-white typography-body-md">
+            {Array.isArray(date) ? (
+              <>
+                <Time date={date[0]} />
+                {" - "}
+                <Time date={date[1]} />
+              </>
+            ) : (
+              <Time date={date} />
+            )}
+          </span>
         </div>
-        <Button variant="primary" disabled={disabled} className="w-full">
+        <Button
+          variant="primary"
+          disabled={disabled}
+          className="light w-full"
+          href={GET_TICKETS_LINK}
+        >
           Get a ticket
         </Button>
       </div>
     </article>
   )
 }
+
+function Time({ date }: { date: Date }) {
+  return (
+    <time
+      dateTime={date.toISOString()}
+      dangerouslySetInnerHTML={{
+        __html: date
+          .toLocaleDateString("en-GB", {
+            month: "long",
+            day: "numeric",
+          })
+          .replace(" ", "&nbsp"),
+      }}
+    />
+  )
+}
diff --git a/src/app/conf/2025/components/get-your-ticket/ticket-periods.tsx b/src/app/conf/2025/components/get-your-ticket/ticket-periods.tsx
@@ -1,11 +1,9 @@
 "use client"
 
-import { useState } from "react"
-import { useEffect } from "react"
+import { useState, 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
@@ -19,19 +17,19 @@ export function TicketPeriods() {
       <TicketPeriod
         name="Early Bird"
         price="$599"
-        date="Through 13 July"
+        date={EARLY_BIRD_END_DATE}
         disabled={now > EARLY_BIRD_END_DATE}
       />
       <TicketPeriod
         name="Standard"
         price="$799"
-        date="14 July - 31 August"
+        date={[new Date(2025, 6, 14), STANDARD_END_DATE]}
         disabled={now > STANDARD_END_DATE || now < EARLY_BIRD_END_DATE}
       />
       <TicketPeriod
         name="Late"
         price="$899"
-        date="1 September - 10 September"
+        date={[new Date(2025, 8, 1), LATE_END_DATE]}
         disabled={now > LATE_END_DATE || now < STANDARD_END_DATE}
       />
     </>
diff --git a/src/app/conf/2025/components/navbar.tsx b/src/app/conf/2025/components/navbar.tsx
@@ -126,8 +126,8 @@ function GraphQLLogo(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg viewBox="0 0 100 100" fill="currentColor" {...props}>
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M50 6.90308L87.323 28.4515V71.5484L50 93.0968L12.677 71.5484V28.4515L50 6.90308ZM16.8647 30.8693V62.5251L44.2795 15.0414L16.8647 30.8693ZM50 13.5086L18.3975 68.2457H81.6025L50 13.5086ZM77.4148 72.4334H22.5852L50 88.2613L77.4148 72.4334ZM83.1353 62.5251L55.7205 15.0414L83.1353 30.8693V62.5251Z"
       />
       <circle cx="50" cy="9.3209" r="8.82" />
diff --git a/src/app/conf/2025/components/register-today/index.tsx b/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 py-8 max-lg:flex-col-reverse lg:px-12 xl:gap-x-24 xl:px-24",
+        "gql-conf-section flex gap-10 max-lg:flex-col-reverse",
         className,
       )}
     >
diff --git a/src/app/conf/2025/components/top-minds/index.tsx b/src/app/conf/2025/components/top-minds/index.tsx
@@ -24,7 +24,7 @@ export default function TopMindsSection({
   return (
     <section
       className={clsx(
-        "flex justify-center px-4 py-8 text-neu-900 max-md:flex-col lg:px-12 xl:gap-x-24 xl:px-24",
+        "gql-conf-section flex justify-center max-md:flex-col",
         className,
       )}
       {...rest}
diff --git a/src/app/conf/2025/components/what-to-expect.tsx b/src/app/conf/2025/components/what-to-expect.tsx
@@ -9,10 +9,7 @@ export default function WhatToExpectSection({
 }: 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,
-      )}
+      className={clsx("gql-conf-section flex gap-6 max-md:flex-col", className)}
       {...rest}
     >
       <h3 className="typography-h2 md:flex-1">What to expect</h3>
diff --git a/src/app/conf/2025/page.tsx b/src/app/conf/2025/page.tsx
@@ -18,9 +18,9 @@ export const metadata: Metadata = {
 
 export default function Page() {
   return (
-    <main>
+    <main className="antialiased">
       <Hero />
-      <div className="gql-conf-container mx-auto">
+      <div className="gql-conf-container mx-auto text-neu-900">
         <RegisterToday className="md:mb-8 md:mt-24" />
         <WhatToExpectSection className="md:mb-8 md:mt-24" />
         <TopMindsSection className="md:mb-8 md:mt-24" hasSpeakersPage={false} />
diff --git a/src/app/conf/_design-system/button.tsx b/src/app/conf/_design-system/button.tsx
@@ -20,6 +20,7 @@ export declare namespace ButtonProps {
     href: string
     as?: never
     className?: string
+    disabled?: boolean
   }
 
   export interface ButtonProps
@@ -56,17 +57,22 @@ 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 data-[variant=secondary]:hover:bg-neu-200/75 data-[variant=secondary]:active:bg-neu-200/90 gql-focus-visible",
+    "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 data-[variant=secondary]:hover:bg-neu-200/75 data-[variant=secondary]:active:bg-neu-200/90 gql-focus-visible [aria-disabled]:bg-neu-800",
     props.className,
   )
 
   const styleAttrs = { "data-size": props.size, "data-variant": props.variant }
 
   if ("href" in props && typeof props.href === "string") {
-    const { className: _1, size: _2, children, ...rest } = props
+    const { className: _1, size: _2, disabled, children, ...rest } = props
 
     return (
-      <Anchor className={className} {...styleAttrs} {...rest}>
+      <Anchor
+        className={className}
+        aria-disabled={disabled}
+        {...styleAttrs}
+        {...rest}
+      >
         {children}
       </Anchor>
     )
diff --git a/src/globals.css b/src/globals.css
@@ -511,3 +511,7 @@ div[id^="headlessui-menu-items"] {
 .gql-conf-container {
   @apply mx-auto w-full max-w-[120rem];
 }
+
+.gql-conf-section {
+  @apply 3xl:px-[240px] px-4 py-8 lg:px-12 xl:gap-x-24 xl:px-24;
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -2,7 +2,7 @@ import { fontFamily } from "tailwindcss/defaultTheme"
 import type { Config } from "tailwindcss"
 import typography from "@tailwindcss/typography"
 import plugin from "tailwindcss/plugin"
-
+import containerQueries from "@tailwindcss/container-queries"
 const config: Config = {
   content: ["./src/**/*.{js,ts,jsx,tsx,mdx}", "./theme.config.tsx"],
   theme: {
@@ -21,6 +21,9 @@ const config: Config = {
           ...fontFamily.mono,
         ],
       },
+      screens: {
+        "3xl": "1920px",
+      },
       colors: {
         primary: "#e10098",
         "conf-black": "#0e031c",
@@ -74,6 +77,7 @@ const config: Config = {
   },
   plugins: [
     typography,
+    containerQueries,
     plugin(({ addUtilities }) => {
       const headingStyles = {
         ".typography-d1, .typography-h1, .typography-h2, .typography-h3": {

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ export function RegisterToday({ className }: RegisterTodayProps) {`
`14`	`14`	`return (`
`15`	`15`	`<section`
`16`	`16`	`className={clsx(`
`17`		`- "flex gap-10 px-4 py-8 max-lg:flex-col-reverse lg:px-12 xl:gap-x-24 xl:px-24",`
	`17`	`+ "gql-conf-section flex gap-10 max-lg:flex-col-reverse",`
`18`	`18`	`className,`
`19`	`19`	`)}`
`20`	`20`	`>`