Templates
v1.0.0Added in 1.7.0
A book-a-demo page: the agenda, host and customer logos beside a three step booking that ends with add-to-calendar links.
The left column says what the 30 minute call covers (an agenda with minutes per part), who hosts it (Ava Thompson), a customer quote and the wordmarks of teams that booked. The booking card on the right walks through three steps shown by a stepper (a compact Step 1 of 3 header on phones): pick a day in the calendar, which opens on the first day with an open time and says how many times it has, with a Book <first time> shortcut straight to the details (weekends, past days, days past the booking window and days with no open time in your zone are disabled), then a time from Morning, Afternoon and Evening groups. Both steps list times in your time zone, detected from the browser and changeable in a searchable select (a bottom sheet on phones); the list is worked out from the host's New York hours, so a Berlin visitor sees afternoon and evening times. Then name, work email (free mail domains are refused, checked when you leave the field), company size and optional notes with a counter. Continue checks each step, errors show in place and focus moves to the first problem or to the new step's heading; Back and the completed steps in the stepper go back without losing anything. On phones the Back / Continue bar stays pinned to the bottom of the screen. Confirm booking spins while onSubmit runs, then the card shows You're booked with the day, the time range and zone, the length, the host and a copyable meeting link, buttons that add the call to Google Calendar, Outlook or download an .ics file, and Reschedule, which goes back to the times with the details kept and confirms as New time confirmed. A FAQ follows. The heading, card and details rise in once on mount; reduced motion keeps them still.
npx wingo-ui@latest add demo-booking-pagePro item: the CLI needs a Pro account. See plans