1a710aa3c6
Some checks are pending
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Waiting to run
72 lines
2.8 KiB
TypeScript
72 lines
2.8 KiB
TypeScript
import type { Metadata } from "next";
|
|
import { pageSeo } from "@/content/page-seo";
|
|
import { createPageMetadata } from "@/lib/seo";
|
|
import { Suspense } from "react";
|
|
import Link from "next/link";
|
|
import { site } from "@/content/site";
|
|
import { ticketTiers } from "@/content/tickets";
|
|
import { Section } from "@/components/layout/Section";
|
|
import { PaymentForm } from "@/components/payment/PaymentForm";
|
|
import { AddToCalendar } from "@/components/event/AddToCalendar";
|
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
export const metadata: Metadata = createPageMetadata(pageSeo.payment);
|
|
|
|
export default function PaymentPage() {
|
|
return (
|
|
<>
|
|
<Section className="pt-24">
|
|
<div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-widest text-[#ffb300]">
|
|
{site.dates.label}
|
|
</p>
|
|
<h1 className="mt-2 text-4xl font-bold">Tickets & payment</h1>
|
|
<p className="mt-3 max-w-2xl text-muted-foreground">
|
|
Secure your place at {site.venue.name}, {site.venue.address}. Choose a pass and
|
|
complete checkout below.
|
|
</p>
|
|
</div>
|
|
<AddToCalendar />
|
|
</div>
|
|
|
|
<div className="mt-10 grid gap-4 md:grid-cols-3">
|
|
{ticketTiers.map((tier) => (
|
|
<Card key={tier.id} className="flex flex-col">
|
|
<CardHeader>
|
|
<CardTitle>{tier.name}</CardTitle>
|
|
<CardDescription>{tier.description}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="flex-1">
|
|
<p className="text-3xl font-bold text-[#1f3d7e]">${tier.priceUsd}</p>
|
|
<p className="text-sm text-muted-foreground">per ticket · USD</p>
|
|
<ul className="mt-4 space-y-1 text-sm text-muted-foreground">
|
|
{tier.features.slice(0, 3).map((f) => (
|
|
<li key={f}>· {f}</li>
|
|
))}
|
|
</ul>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button variant="outline" className="w-full rounded-full" asChild>
|
|
<Link href={`/payment?ticket=${tier.id}`}>Select</Link>
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</Section>
|
|
|
|
<Section variant="muted" id="checkout">
|
|
<h2 className="text-2xl font-bold">Checkout</h2>
|
|
<p className="mt-2 text-muted-foreground">Complete your registration in a few steps.</p>
|
|
<div className="mt-8">
|
|
<Suspense fallback={<p className="text-muted-foreground">Loading checkout…</p>}>
|
|
<PaymentForm />
|
|
</Suspense>
|
|
</div>
|
|
</Section>
|
|
</>
|
|
);
|
|
}
|