# Event Landing

> A conference landing page with a countdown hero, speaker grid, tabbed schedule, ticket tiers, venue, FAQ and a sticky ticket bar.

- Author: Atelier UI
- License: MIT
- Page: https://chromotion.dev/en/templates/event-landing
- Site: Atelier UI (https://chromotion.dev)

## Install

```bash
npx shadcn@latest add https://chromotion.dev/r/event-landing.json
```

Adds the page at `app/event-landing/page.tsx` together with the components below. Stack: React + TypeScript + Tailwind CSS v4, shadcn/ui conventions. `cn` comes from `@/lib/utils`.

## Components

- [FAQ Accordion](https://chromotion.dev/r/faq-accordion.md): `@/components/faq-accordion`
- [Site Footer](https://chromotion.dev/r/site-footer.md): `@/components/site-footer`

## Dependencies

```bash
npm install lucide-react
```

## Source

```tsx title="app/event-landing/page.tsx"
"use client"

import * as React from "react"
import { Accessibility, ArrowRight, CalendarDays, Check, Hexagon, Mail, MapPin, Rss, Train, Hotel } from "lucide-react"

import { cn } from "@/lib/utils"
import { FaqAccordion } from "@/components/faq-accordion"
import { SiteFooter } from "@/components/site-footer"

// Fixed future moment (18 March 2027, 09:00 UTC). Never derived from the current time.
const EVENT_START = Date.UTC(2027, 2, 18, 9, 0, 0)

const speakers = [
  { name: "Amara Okonkwo", role: "Principal Engineer", org: "Cobalt Systems", tone: "from-indigo-500 to-violet-500" },
  { name: "Lars Eriksson", role: "Head of Design", org: "Fjord Labs", tone: "from-rose-500 to-orange-500" },
  { name: "Mei-Ling Zhou", role: "VP Platform", org: "Orbit Cloud", tone: "from-emerald-500 to-teal-500" },
  { name: "Rafael Costa", role: "Staff Engineer", org: "Tidewave", tone: "from-sky-500 to-blue-600" },
  { name: "Hannah Schmidt", role: "CTO", org: "Alpine Data", tone: "from-fuchsia-500 to-purple-600" },
  { name: "Tomás Aguirre", role: "Developer Advocate", org: "Hexa", tone: "from-amber-500 to-red-500" },
  { name: "Nadia Rahman", role: "Research Lead", org: "Lumen AI", tone: "from-cyan-500 to-emerald-500" },
  { name: "Jonah Pierce", role: "Founder", org: "Kestrel Studio", tone: "from-slate-500 to-indigo-600" },
]

const trackStyle: Record<string, string> = {
  Keynote: "bg-primary/10 text-primary",
  Frontend: "bg-sky-500/10 text-sky-700 dark:text-sky-300",
  Platform: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
  Design: "bg-rose-500/10 text-rose-700 dark:text-rose-300",
  Workshop: "bg-amber-500/10 text-amber-700 dark:text-amber-300",
  Social: "bg-muted text-muted-foreground",
}

const days = [
  {
    id: "day-1",
    label: "Day 1",
    date: "Thu, Mar 18",
    theme: "Foundations",
    sessions: [
      { time: "09:00", title: "Opening keynote: the next decade of the web platform", who: "Amara Okonkwo", room: "Main hall", track: "Keynote" },
      { time: "10:30", title: "Rendering without waterfalls", who: "Rafael Costa", room: "Room A", track: "Frontend" },
      { time: "11:30", title: "Design tokens that survive a rebrand", who: "Lars Eriksson", room: "Room B", track: "Design" },
      { time: "13:30", title: "Lessons from migrating 4,000 services to one build system", who: "Mei-Ling Zhou", room: "Main hall", track: "Platform" },
      { time: "15:00", title: "Accessible by default: component APIs that do the right thing", who: "Tomás Aguirre", room: "Room A", track: "Frontend" },
      { time: "18:30", title: "Welcome reception on the rooftop", who: "Hosted by Hexa", room: "Terrace", track: "Social" },
    ],
  },
  {
    id: "day-2",
    label: "Day 2",
    date: "Fri, Mar 19",
    theme: "Scale",
    sessions: [
      { time: "09:30", title: "Keynote: building teams that ship every day", who: "Hannah Schmidt", room: "Main hall", track: "Keynote" },
      { time: "10:45", title: "Edge caching without the footguns", who: "Mei-Ling Zhou", room: "Room A", track: "Platform" },
      { time: "11:45", title: "What research taught us about AI-assisted interfaces", who: "Nadia Rahman", room: "Room B", track: "Design" },
      { time: "14:00", title: "Observability for people who hate dashboards", who: "Rafael Costa", room: "Room A", track: "Platform" },
      { time: "15:30", title: "Animation budgets: motion that respects the CPU", who: "Jonah Pierce", room: "Room B", track: "Frontend" },
    ],
  },
  {
    id: "day-3",
    label: "Day 3",
    date: "Sat, Mar 20",
    theme: "Workshops",
    sessions: [
      { time: "09:30", title: "Workshop: build a design system in a day", who: "Lars Eriksson", room: "Studio 1", track: "Workshop" },
      { time: "09:30", title: "Workshop: zero-downtime migrations hands-on", who: "Amara Okonkwo", room: "Studio 2", track: "Workshop" },
      { time: "13:30", title: "Workshop: performance profiling clinic", who: "Tomás Aguirre", room: "Studio 1", track: "Workshop" },
      { time: "15:30", title: "Closing session and community awards", who: "All speakers", room: "Main hall", track: "Keynote" },
    ],
  },
]

const tiers = [
  {
    id: "community",
    name: "Community",
    price: 149,
    blurb: "Talks on days one and two.",
    features: ["Two days of talks", "Conference lunch", "Recordings after the event"],
  },
  {
    id: "conference",
    name: "Conference",
    price: 399,
    blurb: "The full experience for most attendees.",
    popular: true,
    features: ["Two days of talks", "Lunch and coffee all day", "Welcome reception", "Speaker Q&A lounge", "Recordings and slides"],
  },
  {
    id: "all-access",
    name: "All access",
    price: 649,
    blurb: "Everything, plus a hands-on workshop day.",
    features: ["Everything in Conference", "Day three workshops", "Small-group mentoring slot", "Priority seating"],
  },
]

const faqs = [
  { question: "Can I get a refund if I cannot attend?", answer: "Yes. Cancel up to 30 days before the event for a full refund. After that you can transfer your ticket to a colleague at no cost." },
  { question: "Will the talks be recorded?", answer: "Every session in the main hall and rooms A and B is recorded. Ticket holders get access within a week, and workshop materials are shared with attendees only." },
  { question: "Is there a code of conduct?", answer: "Yes. We expect everyone to be respectful and inclusive. A trained response team is on site, and you can reach them at any time through the help desk or by email." },
  { question: "Do you offer discounts or scholarships?", answer: "We reserve 100 tickets for students, open source maintainers and community organizers. Applications open in January and cover the ticket and travel." },
  { question: "Is the venue accessible?", answer: "The venue is step-free throughout, with quiet rooms, live captions in the main hall and accessible restrooms on every floor." },
]

const pad = (value: number) => String(value).padStart(2, "0")

function Countdown() {
  const [now, setNow] = React.useState<number | null>(null)

  React.useEffect(() => {
    const tick = () => setNow(Date.now())
    const first = setTimeout(tick, 0)
    const timer = setInterval(tick, 1000)
    return () => {
      clearTimeout(first)
      clearInterval(timer)
    }
  }, [])

  const remaining = now === null ? null : Math.max(0, EVENT_START - now)
  const parts =
    remaining === null
      ? null
      : {
          Days: Math.floor(remaining / 86_400_000),
          Hours: Math.floor(remaining / 3_600_000) % 24,
          Minutes: Math.floor(remaining / 60_000) % 60,
          Seconds: Math.floor(remaining / 1000) % 60,
        }

  return (
    <div role="timer" aria-label="Time until the conference starts" aria-live="off" className="grid w-full max-w-lg grid-cols-4 gap-2 sm:gap-3">
      {(["Days", "Hours", "Minutes", "Seconds"] as const).map((unit) => (
        <div key={unit} className="rounded-2xl border border-white/20 bg-white/10 px-1 py-3 text-center backdrop-blur-sm sm:py-4">
          <p className="text-2xl font-semibold tracking-tight tabular-nums sm:text-4xl">{parts ? pad(parts[unit]) : "--"}</p>
          <p className="mt-1 text-[11px] tracking-wide text-white/70 uppercase sm:text-xs">{unit}</p>
        </div>
      ))}
    </div>
  )
}

function Section({ id, eyebrow, title, children, className }: { id: string; eyebrow: string; title: string; children: React.ReactNode; className?: string }) {
  return (
    <section id={id} aria-labelledby={`${id}-title`} className={cn("scroll-mt-20 px-4 py-16 sm:px-6 sm:py-20", className)}>
      <div className="mx-auto max-w-6xl">
        <p className="text-sm font-medium text-primary">{eyebrow}</p>
        <h2 id={`${id}-title`} className="mt-2 max-w-2xl text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
          {title}
        </h2>
        <div className="mt-10">{children}</div>
      </div>
    </section>
  )
}

export default function EventLanding() {
  const [day, setDay] = React.useState(0)
  const [tier, setTier] = React.useState(1)
  const tabList = React.useRef<HTMLDivElement>(null)
  const selectedTier = tiers[tier]
  const activeDay = days[day]

  const onTabKeyDown = (event: React.KeyboardEvent) => {
    let next = day
    if (event.key === "ArrowRight") next = (day + 1) % days.length
    else if (event.key === "ArrowLeft") next = (day - 1 + days.length) % days.length
    else if (event.key === "Home") next = 0
    else if (event.key === "End") next = days.length - 1
    else return
    event.preventDefault()
    setDay(next)
    tabList.current?.querySelectorAll<HTMLElement>("[role=tab]")[next]?.focus()
  }

  return (
    <div className="min-h-svh bg-background text-foreground">
      <header className="sticky top-0 z-30 border-b bg-background/80 backdrop-blur-md">
        <div className="mx-auto flex h-14 max-w-6xl items-center justify-between gap-4 px-4 sm:px-6">
          <a href="#top" className="flex items-center gap-2 font-semibold focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none">
            <Hexagon className="size-5 fill-primary text-primary" /> HexaConf
          </a>
          <nav aria-label="Sections" className="hidden items-center gap-6 text-sm text-muted-foreground md:flex">
            {[
              ["Speakers", "#speakers"],
              ["Schedule", "#schedule"],
              ["Tickets", "#tickets"],
              ["Venue", "#venue"],
              ["FAQ", "#faq"],
            ].map(([label, href]) => (
              <a key={href} href={href} className="transition-colors hover:text-foreground focus-visible:text-foreground">
                {label}
              </a>
            ))}
          </nav>
          <a
            href="#tickets"
            className="inline-flex h-9 items-center rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none"
          >
            Get tickets
          </a>
        </div>
      </header>

      <main id="top" className="pb-24">
        <section aria-labelledby="hero-title" className="relative isolate overflow-hidden bg-linear-to-br from-indigo-700 via-violet-700 to-fuchsia-700 px-4 py-16 text-white sm:px-6 sm:py-24">
          <div aria-hidden className="absolute -top-24 -right-24 -z-10 size-96 rounded-full bg-fuchsia-400/30 blur-3xl" />
          <div aria-hidden className="absolute -bottom-32 -left-16 -z-10 size-96 rounded-full bg-sky-400/25 blur-3xl" />
          <div className="mx-auto flex max-w-6xl flex-col items-start gap-8">
            <p className="inline-flex items-center gap-2 rounded-full border border-white/25 bg-white/10 px-3 py-1 text-sm backdrop-blur-sm">
              <span aria-hidden className="size-1.5 rounded-full bg-emerald-300" />
              Early-bird pricing ends soon
            </p>
            <h1 id="hero-title" className="max-w-3xl text-4xl font-semibold tracking-tight text-balance sm:text-6xl">
              HexaConf 2027: where builders of the modern web meet
            </h1>
            <p className="max-w-xl text-lg text-pretty text-white/80">
              Three days of talks, workshops and hallway conversations about frontend, platform engineering and design systems.
            </p>
            <ul className="flex flex-col gap-2 text-sm sm:flex-row sm:gap-6 sm:text-base">
              <li className="flex items-center gap-2">
                <CalendarDays className="size-5 shrink-0 text-white/70" /> March 18 to 20, 2027
              </li>
              <li className="flex items-center gap-2">
                <MapPin className="size-5 shrink-0 text-white/70" /> LX Factory, Lisbon
              </li>
            </ul>
            <p className="sr-only">The conference starts on 18 March 2027 at 09:00 UTC.</p>
            <Countdown />
            <div className="flex flex-wrap gap-3">
              <a
                href="#tickets"
                className="inline-flex h-11 items-center gap-2 rounded-xl bg-white px-5 text-sm font-medium text-indigo-900 transition-colors hover:bg-white/90 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-indigo-700 focus-visible:outline-none"
              >
                Get tickets <ArrowRight className="size-4" />
              </a>
              <a
                href="#schedule"
                className="inline-flex h-11 items-center rounded-xl border border-white/30 px-5 text-sm font-medium transition-colors hover:bg-white/10 focus-visible:ring-2 focus-visible:ring-white focus-visible:outline-none"
              >
                View schedule
              </a>
            </div>
          </div>
        </section>

        <section aria-label="Event at a glance" className="border-b">
          <dl className="mx-auto grid max-w-6xl grid-cols-2 gap-y-6 px-4 py-8 sm:px-6 md:grid-cols-4">
            {[
              ["3", "days"],
              ["40+", "speakers"],
              ["1,200", "attendees"],
              ["4", "tracks"],
            ].map(([value, label]) => (
              <div key={label} className="flex flex-col-reverse text-center">
                <dt className="text-sm text-muted-foreground">{label}</dt>
                <dd className="text-3xl font-semibold tracking-tight tabular-nums">{value}</dd>
              </div>
            ))}
          </dl>
        </section>

        <Section id="speakers" eyebrow="Speakers" title="Learn from people who ship at scale">
          <ul className="grid grid-cols-1 gap-4 min-[480px]:grid-cols-2 lg:grid-cols-4">
            {speakers.map((speaker) => (
              <li key={speaker.name} className="flex items-center gap-4 rounded-2xl border bg-card p-4 transition-shadow hover:shadow-md lg:flex-col lg:items-start lg:p-5">
                <span
                  aria-hidden
                  className={cn(
                    "flex size-14 shrink-0 items-center justify-center rounded-full bg-linear-to-br text-lg font-semibold text-white lg:size-20 lg:text-2xl",
                    speaker.tone
                  )}
                >
                  {speaker.name
                    .split(/[\s-]+/)
                    .map((part) => part[0])
                    .slice(0, 2)
                    .join("")}
                </span>
                <div className="min-w-0">
                  <h3 className="truncate text-base font-semibold">{speaker.name}</h3>
                  <p className="truncate text-sm text-muted-foreground">{speaker.role}</p>
                  <p className="truncate text-sm text-muted-foreground">{speaker.org}</p>
                </div>
              </li>
            ))}
          </ul>
        </Section>

        <Section id="schedule" eyebrow="Schedule" title="Three days, four tracks" className="bg-muted/30">
          <div ref={tabList} role="tablist" aria-label="Conference days" onKeyDown={onTabKeyDown} className="grid grid-cols-3 gap-1 rounded-xl bg-muted p-1 sm:w-fit sm:grid-cols-[repeat(3,10rem)]">
            {days.map((item, index) => (
              <button
                key={item.id}
                id={`tab-${item.id}`}
                type="button"
                role="tab"
                aria-selected={day === index}
                aria-controls={`panel-${item.id}`}
                tabIndex={day === index ? 0 : -1}
                onClick={() => setDay(index)}
                className="flex flex-col items-center rounded-lg px-2 py-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none aria-selected:bg-background aria-selected:text-foreground aria-selected:shadow-sm"
              >
                {item.label}
                <span className="text-xs font-normal text-muted-foreground">{item.date}</span>
              </button>
            ))}
          </div>
          <div id={`panel-${activeDay.id}`} role="tabpanel" aria-labelledby={`tab-${activeDay.id}`} className="mt-6">
            <p className="mb-4 text-sm text-muted-foreground">
              {activeDay.date} · {activeDay.theme}
            </p>
            <ol className="flex flex-col gap-3">
              {activeDay.sessions.map((session) => (
                <li key={`${session.time}-${session.title}`} className="grid grid-cols-[3.5rem_minmax(0,1fr)] gap-4 rounded-2xl border bg-card p-4 sm:grid-cols-[4.5rem_minmax(0,1fr)_auto] sm:items-center">
                  <time className="pt-0.5 text-sm font-semibold tabular-nums sm:pt-0">{session.time}</time>
                  <div className="min-w-0">
                    <h3 className="text-sm font-medium text-pretty sm:text-base">{session.title}</h3>
                    <p className="mt-1 text-sm text-muted-foreground">
                      {session.who} · {session.room}
                    </p>
                  </div>
                  <span className={cn("col-start-2 w-fit rounded-full px-2.5 py-0.5 text-xs font-medium sm:col-start-auto", trackStyle[session.track])}>{session.track}</span>
                </li>
              ))}
            </ol>
          </div>
        </Section>

        <Section id="tickets" eyebrow="Tickets" title="Pick the pass that fits">
          <ul className="grid gap-4 lg:grid-cols-3">
            {tiers.map((item, index) => {
              const selected = tier === index
              return (
                <li
                  key={item.id}
                  className={cn(
                    "relative flex flex-col gap-5 rounded-2xl border bg-card p-6 transition-shadow",
                    selected && "border-primary shadow-lg ring-2 ring-primary/30"
                  )}
                >
                  {item.popular && (
                    <span className="absolute -top-3 left-6 rounded-full bg-primary px-3 py-0.5 text-xs font-medium text-primary-foreground">Most popular</span>
                  )}
                  <div>
                    <h3 className="text-lg font-semibold">{item.name}</h3>
                    <p className="mt-1 text-sm text-muted-foreground">{item.blurb}</p>
                  </div>
                  <p className="flex items-baseline gap-1">
                    <span className="text-4xl font-semibold tracking-tight tabular-nums">${item.price}</span>
                    <span className="text-sm text-muted-foreground">per person</span>
                  </p>
                  <ul className="flex flex-1 flex-col gap-2.5 text-sm">
                    {item.features.map((feature) => (
                      <li key={feature} className="flex items-start gap-2">
                        <Check className="mt-0.5 size-4 shrink-0 text-primary" />
                        {feature}
                      </li>
                    ))}
                  </ul>
                  <button
                    type="button"
                    aria-pressed={selected}
                    aria-label={`${selected ? "Selected, " : ""}Select ${item.name} ticket`}
                    onClick={() => setTier(index)}
                    className={cn(
                      "inline-flex h-10 items-center justify-center gap-2 rounded-xl border text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none",
                      selected ? "border-primary bg-primary text-primary-foreground" : "bg-background hover:bg-accent"
                    )}
                  >
                    {selected ? (
                      <>
                        <Check className="size-4" /> Selected
                      </>
                    ) : (
                      "Select"
                    )}
                  </button>
                </li>
              )
            })}
          </ul>
        </Section>

        <Section id="venue" eyebrow="Venue" title="LX Factory, in the heart of Lisbon" className="bg-muted/30">
          <div className="grid gap-6 lg:grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)]">
            <div
              role="img"
              aria-label="Illustrated map showing the venue near the river"
              className="relative min-h-64 overflow-hidden rounded-2xl border bg-linear-to-br from-sky-100 via-emerald-50 to-amber-50 dark:from-sky-950 dark:via-emerald-950 dark:to-amber-950"
            >
              <div aria-hidden className="absolute inset-0 bg-[linear-gradient(to_right,var(--border)_1px,transparent_1px),linear-gradient(to_bottom,var(--border)_1px,transparent_1px)] bg-[size:40px_40px] opacity-60" />
              <div aria-hidden className="absolute -right-10 bottom-0 h-24 w-3/4 -rotate-6 rounded-full bg-sky-300/50 blur-xl dark:bg-sky-500/20" />
              <div className="absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-2">
                <span className="flex size-12 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg">
                  <MapPin className="size-6" />
                </span>
                <span className="rounded-full border bg-background px-3 py-1 text-xs font-medium shadow-sm">LX Factory</span>
              </div>
            </div>
            <div className="flex flex-col gap-4">
              <address className="text-base not-italic">
                <p className="font-semibold">LX Factory, Hall 3</p>
                <p className="text-muted-foreground">Rua Rodrigues de Faria 103, 1300-501 Lisbon, Portugal</p>
              </address>
              <ul className="flex flex-col gap-3">
                {[
                  { icon: Train, title: "Getting there", text: "Ten minutes by tram from Cais do Sodré, or a short ride from the airport." },
                  { icon: Hotel, title: "Where to stay", text: "Attendees get 15% off at three partner hotels within walking distance." },
                  { icon: Accessibility, title: "Accessibility", text: "Step-free access, quiet rooms and live captions in the main hall." },
                ].map(({ icon: Icon, title, text }) => (
                  <li key={title} className="flex gap-3 rounded-xl border bg-card p-4">
                    <span aria-hidden className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
                      <Icon className="size-4" />
                    </span>
                    <div className="min-w-0">
                      <h3 className="text-sm font-medium">{title}</h3>
                      <p className="text-sm text-muted-foreground">{text}</p>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </Section>

        <Section id="faq" eyebrow="FAQ" title="Questions, answered">
          <FaqAccordion items={faqs} className="max-w-3xl" />
        </Section>
      </main>

      <SiteFooter
        className="pb-16"
        brand={
          <span className="flex items-center gap-2">
            <Hexagon className="size-5 fill-primary text-primary" /> HexaConf
          </span>
        }
        tagline="An independent community conference for people who build for the web."
        columns={[
          { title: "Event", links: [{ label: "Speakers", href: "#speakers" }, { label: "Schedule", href: "#schedule" }, { label: "Venue", href: "#venue" }] },
          { title: "Attend", links: [{ label: "Tickets", href: "#tickets" }, { label: "Scholarships", href: "#faq" }, { label: "Code of conduct", href: "#faq" }] },
          { title: "Get involved", links: [{ label: "Sponsor", href: "#" }, { label: "Volunteer", href: "#" }, { label: "Call for speakers", href: "#" }] },
          { title: "Contact", links: [{ label: "hello@hexaconf.dev", href: "#" }, { label: "Press kit", href: "#" }] },
        ]}
        socials={[
          { label: "RSS", href: "#", icon: Rss },
          { label: "Email", href: "#", icon: Mail },
        ]}
        legal="© 2027 HexaConf. Made in Lisbon."
        bottomLinks={[{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }]}
        wordmark="HEXACONF"
      />

      <div role="region" aria-label="Ticket bar" className="fixed inset-x-0 bottom-0 z-40 border-t bg-background/90 backdrop-blur-md">
        <div className="mx-auto flex max-w-6xl items-center justify-between gap-3 px-4 py-3 sm:px-6">
          <p className="min-w-0 text-sm" aria-live="polite">
            <span className="block truncate font-medium">HexaConf 2027 · Mar 18 to 20</span>
            <span className="block truncate text-muted-foreground">
              {selectedTier.name} pass · ${selectedTier.price}
            </span>
          </p>
          <a
            href="#tickets"
            className="inline-flex h-10 shrink-0 items-center gap-2 rounded-xl bg-primary px-5 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none"
          >
            Get tickets
          </a>
        </div>
      </div>
    </div>
  )
}
```