What guests see on the reservation page — venue selection and package browsing

This page covers what guests see when they land on your public reservation page — from venue selection through choosing a package and time slot.

Landing page — Select Location

If your account has multiple venues, guests land on `/select-location` first. This screen shows a full-bleed background image (set via Home Background Image in your venue settings) with three input fields stacked vertically:

1. Select Location — dropdown listing all venues. Venues marked "Coming Soon" appear in the list but cannot be selected.

2. Number of Guests — dropdown from 1 to the selected venue's max guest count. If the guest exceeds the maximum, they are redirected to the event inquiry form.

3. Continue — validates a venue is selected, then loads the package browsing page for that venue.

If your account has only one venue, guests skip this screen entirely and land directly on the package page.

### How the title works

The heading displayed above the dropdowns is the Home Title field from your UI settings. It renders in white, bold text over the background image.

Package browsing page

After selecting a venue (or landing directly for single-venue accounts), guests see the main reservation page at `/package`. This page has three sections: a header area, the package list, and a sidebar summary (desktop only).

### Venue header

• Desktop: The venue's Packages Title and Packages Description appear as text at the top.

• Mobile: A large hero image (the venue image) fills the top of the screen. If the venue has a gallery, a View All button appears over the image.

### Tabs

Below the header, horizontal tabs let guests switch between:

The tab label text is configurable per venue (Packages Tab Name, Event Inquiry Tab Name, Custom Tab Name).

### Date picker

Directly below the tabs, a Select Date field lets guests choose their reservation date. Tapping it opens an inline calendar. Available dates are highlighted based on the venue's availability schedule. Dates with no availability appear grayed out.

### Category filter tabs

If the venue has Package Tags configured, a horizontal row of filter buttons appears above the package cards. Guests tap a category to filter the list (e.g., "Bowling", "Parties", "VIP").

The filter row scrolls horizontally when there are more tags than fit on screen. On desktop, left/right arrows appear at the edges.

### Package cards

Each package renders as a card with an image on the left (or top on mobile) and details on the right:

Contact-only packages show a "Contact Us" button instead of the expand button. The button text is customizable per venue.

Member-only packages show a "Sign In" button if the guest is not signed in with an eligible membership.

### Expanded package view

Tapping the "+" button (or tapping the card) expands it to reveal:

1. Full description — the package's rich-text description rendered as HTML.

2. Reservation Details section (heading is customizable) with form fields:

- Select Date — same calendar picker as the header, scoped to this package.

- Guests — dropdown from the package's min to max guests. Selecting a count above max redirects to the event inquiry form.

- Duration — only visible if Duration Choice is enabled. Shows the configured duration options.

- Resource quantity (e.g., "Lanes") — only visible if Show Resource Quantity is enabled. Label uses the package's resource name.

3. Age group selection — for age-group-based pricing packages, a guest age breakdown selector replaces the standard Guests dropdown. Each age group has its own count picker.

4. Time slots — available start times displayed as a grid of buttons. Each button shows:

- Start time

- Price (unless Hide Price on Time Card is on)

- For age-group packages, "See Prices" with an info icon instead of a flat price

- Reservation end time (if Show Reservation Time is enabled)

5. No availability handling:

- If no times are available for the selected date, an orange alert banner reads: "At the moment, there's no online availability based on your selection."

- If Show Next Available Times is enabled, the system displays time slots from the next dates that do have availability, grouped under date headings like "Wednesday, Mar 28."

6. 21+ age policy checkbox — if the selected time slot has a 21+ restriction, a checkbox appears requiring confirmation before continuing.

7. Continue button — enabled only when a valid date, guest count, and time slot are selected. On mobile, this button is fixed to the bottom of the screen.

### Sidebar summary (desktop only)

On desktop, a right-side panel shows:

### Mobile experience

On mobile:

Loading states

While venue data or package lists are loading, skeleton placeholder cards appear — matching the card layout with gray animated blocks for the image, title, price, description, and action row.