Pass-level list where a highlighted tier picks up a primary ring and sold-out rows dim with a note.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Event7 } from "@/components/beste/piece/event7";
<Event7
heading="Conference passes"
tiers={[
{
"name": "Student",
"price": "$89",
"remaining": 42
},
{
"name": "Early bird",
"price": "$249",
"highlighted": true,
"remaining": 18
},
{
"name": "Standard",
"price": "$399",
"remaining": 124
},
{
"name": "VIP",
"price": "$1,200",
"soldOut": true
}
]}
/>Notched gradient concert ticket with section, seat, and a vertical mono ticket code on the stub.
Stacked avatar row with a +N overflow chip, total attendee count, and a social-proof summary line.
Conference day schedule with left-ruled session rows color-coded by keynote, talk, break, or workshop.
Two-by-two speaker grid with gradient avatars, name and company-role lines per tile.
Dark foreground countdown with event title, start time, and a four-unit time tile grid below.
Venue panel with a gridded mini-map tile, name, address, city, capacity, and an italic directions line.