Make the padding and borders better

Author: hasparus

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

@@ -15,7 +15,7 @@ export function GetYourTicket({ className }: { className?: string }) {
       )}
     >
       <Stripes />
-      <div className="gql-conf-container relative lg:px-12 xl:gap-x-24 xl:px-24">
+      <div className="gql-conf-container gql-conf-section relative">
         <header className="flex flex-wrap justify-between gap-6 md:items-end">
           <h2 className="whitespace-pre text-white typography-h2">
             Get your ticket

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

@@ -5,6 +5,7 @@ import { GET_TICKETS_LINK } from "../../links"
 export interface TicketPeriodProps {
   price: string
   date: Date | [Date, Date]
+  isLoading?: boolean
   soldOut?: boolean
   comingSoon?: boolean
   name: string
@@ -13,11 +14,12 @@ export interface TicketPeriodProps {
 export function TicketPeriod({
   price,
   date,
+  isLoading,
   soldOut,
   comingSoon,
   name,
 }: TicketPeriodProps) {
-  const disabled = soldOut || comingSoon
+  const disabled = soldOut || comingSoon || isLoading
 
   return (
     <article
@@ -59,7 +61,13 @@ export function TicketPeriod({
           className="light w-full"
           href={GET_TICKETS_LINK}
         >
-          {soldOut ? "Sold out" : comingSoon ? "Coming soon" : "Get a ticket"}
+          {isLoading
+            ? "Get a ticket"
+            : soldOut
+              ? "Sold out"
+              : comingSoon
+                ? "Coming soon"
+                : "Get a ticket"}
         </Button>
       </div>
     </article>

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

@@ -5,9 +5,11 @@ import { useState, useEffect } from "react"
 import { TicketPeriod } from "./ticket-period"
 
 // 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
+// Dates are specified in CET (UTC+1/UTC+2 for CEST) and converted to UTC
+// Example: July 13th 23:59 CEST (UTC+2) becomes July 13th 21:59 UTC
+const EARLY_BIRD_END_DATE = new Date(Date.UTC(2025, 6, 13, 21, 59)) // July 13th 23:59 CEST
+const STANDARD_END_DATE = new Date(Date.UTC(2025, 7, 31, 21, 59)) // August 31st 23:59 CEST
+const LATE_END_DATE = new Date(Date.UTC(2025, 8, 10, 21, 59)) // September 10th 23:59 CEST
 
 export function TicketPeriods() {
   const now = useCurrentDate()
@@ -19,34 +21,34 @@ export function TicketPeriods() {
         price="$599"
         date={EARLY_BIRD_END_DATE}
         comingSoon={false}
-        soldOut={now > EARLY_BIRD_END_DATE}
+        isLoading={!now}
+        soldOut={!!now && now > EARLY_BIRD_END_DATE}
       />
       <TicketPeriod
         name="Standard"
         price="$799"
         date={[new Date(2025, 6, 14), STANDARD_END_DATE]}
-        comingSoon={now < EARLY_BIRD_END_DATE}
-        soldOut={now > STANDARD_END_DATE}
+        isLoading={!now}
+        comingSoon={!!now && now < EARLY_BIRD_END_DATE}
+        soldOut={!!now && now > STANDARD_END_DATE}
       />
       <TicketPeriod
         name="Late"
         price="$899"
         date={[new Date(2025, 8, 1), LATE_END_DATE]}
-        comingSoon={now < STANDARD_END_DATE}
-        soldOut={now > LATE_END_DATE}
+        isLoading={!now}
+        comingSoon={!!now && now < STANDARD_END_DATE}
+        soldOut={!!now && now > LATE_END_DATE}
       />
     </>
   )
 }
 
-const DEFAULT_DATE = new Date(2025, 8, 12)
-
 function useCurrentDate() {
-  const [date, setDate] = useState<Date>(DEFAULT_DATE)
+  const [date, setDate] = useState<Date | null>(null)
 
   useEffect(() => {
-    const end = new Date(2025, 6, 14)
-    setDate(end)
+    setDate(new Date())
   }, [])
 
   return date

src/globals.css

@@ -513,5 +513,5 @@ div[id^="headlessui-menu-items"] {
 }
 
 .gql-conf-section {
-  @apply 3xl:px-[240px] px-4 py-8 lg:px-12 xl:gap-x-24 xl:px-24;
+  @apply px-4 py-8 lg:px-12 xl:gap-x-24 xl:px-24 3xl:px-[240px];
 }