Fix borders

Author: hasparus

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

@@ -20,7 +20,7 @@ export function GetYourTicket({ className }: { className?: string }) {
           <h2 className="whitespace-pre text-white typography-h2">
             Get your ticket
           </h2>
-          <p className="text-neu-800 typography-body-md">
+          <p className="text-neu-800 typography-body-lg">
             The registration deadline is 23:59 Central European Time on the
             respective date.
           </p>

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

@@ -5,21 +5,28 @@ import { GET_TICKETS_LINK } from "../../links"
 export interface TicketPeriodProps {
   price: string
   date: Date | [Date, Date]
-  disabled?: boolean
+  soldOut?: boolean
+  comingSoon?: boolean
   name: string
 }
 
 export function TicketPeriod({
   price,
   date,
-  disabled,
+  soldOut,
+  comingSoon,
   name,
 }: TicketPeriodProps) {
+  const disabled = soldOut || comingSoon
+
   return (
     <article
+      data-disabled={disabled}
       className={clsx(
         "flex flex-col border border-pri-lighter bg-pri-light/[0.24] backdrop-blur-md transition @container/card max-md:[&+&]:border-t-0 md:[&+&]:border-l-0",
-        disabled && "opacity-50",
+        disabled
+          ? "opacity-50 max-md:[&:has(+article[data-disabled=false])]:border-b-0 md:[&:has(+article[data-disabled=false])]:border-r-0"
+          : "!border",
       )}
     >
       <header className="border-b border-pri-lighter p-6">
@@ -39,7 +46,10 @@ export function TicketPeriod({
                 <Time date={date[1]} />
               </>
             ) : (
-              <Time date={date} />
+              <>
+                <span>Through </span>
+                <Time date={date} />
+              </>
             )}
           </span>
         </div>
@@ -49,7 +59,7 @@ export function TicketPeriod({
           className="light w-full"
           href={GET_TICKETS_LINK}
         >
-          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

@@ -18,19 +18,22 @@ export function TicketPeriods() {
         name="Early Bird"
         price="$599"
         date={EARLY_BIRD_END_DATE}
-        disabled={now > EARLY_BIRD_END_DATE}
+        comingSoon={false}
+        soldOut={now > EARLY_BIRD_END_DATE}
       />
       <TicketPeriod
         name="Standard"
         price="$799"
         date={[new Date(2025, 6, 14), STANDARD_END_DATE]}
-        disabled={now > STANDARD_END_DATE || now < EARLY_BIRD_END_DATE}
+        comingSoon={now < EARLY_BIRD_END_DATE}
+        soldOut={now > STANDARD_END_DATE}
       />
       <TicketPeriod
         name="Late"
         price="$899"
         date={[new Date(2025, 8, 1), LATE_END_DATE]}
-        disabled={now > LATE_END_DATE || now < STANDARD_END_DATE}
+        comingSoon={now < STANDARD_END_DATE}
+        soldOut={now > LATE_END_DATE}
       />
     </>
   )
@@ -42,7 +45,8 @@ function useCurrentDate() {
   const [date, setDate] = useState<Date>(DEFAULT_DATE)
 
   useEffect(() => {
-    setDate(new Date())
+    const end = new Date(2025, 6, 14)
+    setDate(end)
   }, [])
 
   return date