root = Card([hero, countdown, agenda, speakers, tickets, register], "clear", "column", "xl")
hero = Card([heroImage, eventTitle, eventMeta], "sunk", "column", "xs")
heroImage = Image("DevCon 2025", "https://picsum.photos/seed/devcon/1200/500")
eventTitle = CardHeader("DevCon 2025", "March 14–16, 2025 · Moscone Center · San Francisco")
eventMeta = TextContent("Three days of talks, workshops, and community for the people who build the web. Now in its eighth year.")
countdown = Callout("success", "Only 47 days to go", "Early-bird pricing ends March 1 — register today to save $100 on any tier.")
agenda = Card([agendaHeading, agendaTabs], "sunk", "column", "m")
agendaHeading = Heading("Agenda", "h2")
agendaTabs = Tabs([day1, day2, day3])
day1 = TabItem("day1", "Day 1 · Fri", [day1Table])
day2 = TabItem("day2", "Day 2 · Sat", [day2Table])
day3 = TabItem("day3", "Day 3 · Sun", [day3Table])
day1Table = Table([day1Time, day1Session, day1Speaker])
day1Time = Col("Time", ["9:00 AM", "10:30 AM", "1:00 PM", "3:30 PM"])
day1Session = Col("Session", ["Opening keynote: The next decade of software", "Building AI products people trust", "Design systems at scale", "Shipping faster with fewer bugs"])
day1Speaker = Col("Speaker", ["Sarah Chen", "Marcus Webb", "Priya Patel", "Diego Morales"])
day2Table = Table([day2Time, day2Session, day2Speaker])
day2Time = Col("Time", ["9:00 AM", "10:30 AM", "1:00 PM", "3:30 PM"])
day2Session = Col("Session", ["AI in the developer workflow", "Accessibility by default", "Infrastructure for modern startups", "Community panel: AI, humans, and work"])
day2Speaker = Col("Speaker", ["Marcus Webb", "Priya Patel", "Diego Morales", "All speakers"])
day3Table = Table([day3Time, day3Session, day3Speaker])
day3Time = Col("Time", ["9:00 AM", "10:30 AM", "1:30 PM", "3:30 PM"])
day3Session = Col("Session", ["Scaling teams and culture", "Workshop: Building with LLMs", "Workshop: Design systems in practice", "Closing panel: What's next?"])
day3Speaker = Col("Speaker", ["Sarah Chen", "Marcus Webb", "Priya Patel", "All speakers"])
speakers = Card([speakersHeading, speakersList], "sunk", "column", "m")
speakersHeading = Heading("Speakers", "h2")
speakersList = ListBlock([sarah, marcus, priya, diego], "number")
sarah = ListItem("Sarah Chen", "CEO of Lattice AI; previously led applied AI at Google Research")
marcus = ListItem("Marcus Webb", "Staff engineer at Stripe; author of Designing Data-Heavy APIs")
priya = ListItem("Priya Patel", "VP of Design at Figma; led systems used by millions of products")
diego = ListItem("Diego Morales", "VP of Engineering at Vercel; obsessed with frontend performance")
tickets = Card([ticketsHeading, ticketsTable, ticketsNote], "sunk", "column", "m")
ticketsHeading = Heading("Tickets", "h2")
ticketsTable = Table([tierCol, priceCol, includesCol])
tierCol = Col("Tier", ["General", "Pro", "VIP"])
priceCol = Col("Price", ["$299", "$599", "$999"])
includesCol = Col("Includes", ["All talks + expo access", "General, plus workshops & recordings", "Pro, plus catered meals & front-row seating"])
ticketsNote = TextCallout("info", "Groups save 15%", "Bring five or more colleagues — email hello@devcon.example for a group code.")
register = Card([registerHeading, registerForm], "sunk", "column", "m")
registerHeading = Heading("Register", "h2")
registerForm = Form("registration", registerButtons, [nameField, emailField])
nameField = FormControl("Full name", nameInput)
nameInput = Input("name", "Jane Doe")
emailField = FormControl("Email address", emailInput, "We'll send your confirmation and ticket to this address")
emailInput = Input("email", "jane@example.com", "email")
registerButtons = Buttons([registerBtn])
registerBtn = Button("Register now", null, "primary")