Client guide

Flash Deal page tutorial

This page lists last-minute boat charter slots at standard rates, available every Monday. It shows a live countdown, available slots grouped by date, and key information on each boat so customers can book instantly.

⚡ Flash window ⏱ Live countdown Slot cards Date groups Closed & empty states How it works
Flash deal page · What this page does
Page overview
What customers see when they visit /flash
01
Flash deals are last-minute charter slots that the platform makes available every Monday. Slots go live on Monday and the window closes at the end of Monday (Sydney time).
The page refreshes automatically every 60 seconds so customers always see the latest available slots without needing to reload.
A live countdown timer sits in the hero. It counts down to the next window opening, or counts down to the end of the Monday window if the window is currently open.
Three possible content states: loading (slots are being fetched), closed (it is not Monday), or active with results (slots are available) or active with no results (Monday but no slots listed).
When slots are available, they are grouped by date and shown as cards the customer can tap to go to the boat detail page.
At the bottom, a How It Works section explains the flash deal process in three steps.
Page structure at a glance
⚡ Flash Deals
Last-minute charters,
tonight's price
Released every Monday · Book before midnight
🔒 Next window opens in
04
days
:
12
hrs
:
07
min
:
44
sec
↓ Slot cards appear below the hero when the window is open
How it works
1
Watch for Monday
Deals open every Monday and close at midnight
2
Pick your slot
Choose the available window that suits you
3
Book instantly
Confirm and pay — spots are limited
Flash deal page · Hero section
Hero banner and badge
The top section every visitor sees first
02
Dark gradient background runs from near-black to deep orange-brown to signal urgency and energy.
Flash Deals badge sits at the top of the hero. It has a lightning bolt icon, orange text, and a subtle orange border.
Main heading uses two lines: the first line is white, the second is italic orange to give visual emphasis.
Subtitle sits below the heading in a faded white. It sets the customer's expectations: released every Monday, book before the window closes.
A wave-shaped divider at the bottom of the hero smoothly transitions into the content area below.
The countdown timer sits inside the hero below the subtitle. It is covered in detail in the next section.
Hero mockup
⚡ Flash Deals
Last-minute charters,
tonight's price
Slots released every Monday — grab them before midnight Sydney time
Design note: the hero uses the same deep dark orange gradient across desktop and mobile — the layout does not change, only the font sizes scale down on smaller screens.
Flash deal page · Live countdown timer
Countdown timer — two states
Shows time until the window opens, or time until it closes
03
The countdown is always visible inside the hero, regardless of whether the flash window is open or not. It ticks every second in real time.
When the window is closed (any day other than Monday), the label reads "Next window opens in" with a lock icon. The timer counts down to the start of Monday midnight (Sydney time).
When the window is open (Monday), the label changes to "Window closing in" with a lightning bolt icon. The timer counts down to the end of Monday at 11:59pm Sydney time.
Days block appears only when the count is one day or more. On Monday the days block disappears leaving only hours, minutes and seconds.
Urgent state turns the seconds number red when the closing window is under 30 minutes away, adding visual urgency for customers still browsing.
The countdown uses Sydney time (Australia/Sydney timezone) regardless of where the customer is browsing from, so it stays accurate across all locations.
Countdown — window closed (not Monday)
🔒 Next window opens in
04
days
:
12
hrs
:
07
min
:
44
sec
Countdown — window open (Monday), urgent final minutes
⚡ Window closing in
00
hrs
:
18
min
:
42
sec
Urgent seconds: the seconds number turns red automatically when there are fewer than 30 minutes left in the closing window. No action is needed from the customer — it is just a visual cue to act quickly.
Flash deal page · Loading, closed and empty states
Three content states below the hero
What the customer sees depending on the day and slot availability
04
Loading state appears while the page is first fetching slot data. A spinning circle and the text "Loading..." are shown centred on the page. This state disappears as soon as data returns.
Closed state appears when it is not Monday. A lightning bolt icon is shown with a centred title and a short explanation. A "Browse all boats" button sends the customer to the main listing page.
Empty state appears when it is Monday (window is open) but no flash slots have been published yet. A search icon is shown along with a title and explanation. A "Browse all boats" button is also shown.
Active state appears when it is Monday and at least one slot is available. The results header and slot cards replace the closed or empty messaging. This is the normal "open" experience.
The hero and countdown stay visible in all states — only the content area below the hero changes.
Loading
Loading flash deals…
Closed — not Monday
Flash deals are closed
Flash deals open every Monday. Check back then to grab a last-minute slot.
Browse all boats
Empty — Monday but no slots published
No flash slots right now
The window is open but no slots have been listed yet. Check back shortly or browse the full catalogue.
Browse all boats
Flash deal page · Results header
Slot count and live indicator
Appears at the top of the results area when slots are available
05
Slot count heading shows how many flash slots are currently available, for example "3 slots available this week". The number updates automatically every 60 seconds.
Subtitle below the count gives a short reminder to book quickly as slots are limited.
Live pill sits on the right side of the header. It has a pulsing green dot and the word "Live" to reassure customers that the data is being refreshed in real time.
The pulsing dot animates continuously — it grows and fades on a 2-second loop so customers know the page is actively updating.
Results header
3 slots available this week
Book fast — flash slots fill quickly
Live
Auto-refresh: the page checks for new or removed slots every 60 seconds automatically. Customers do not need to reload the page.
Flash deal page · Date grouping
Slots grouped by charter date
Each date gets its own labelled section
06
All available slots are sorted by date and displayed in date order, earliest first. If all slots fall on the same day, only one date group appears.
Each date group starts with a label showing the full date in plain English, for example "Wednesday 18 June". A horizontal line extends from the label to the right edge.
All slot cards for that date appear in a grid below the date label. On desktop the grid shows up to three cards per row. On smaller screens it reduces to two columns and then one column.
Multiple date groups stack vertically when flash slots span more than one day.
Date group example
Wednesday 18 June
⚡ Flash
Min 2h
Motor Yacht
Morpheus
Thursday 19 June
... more cards appear here
Flash deal page · Slot card contents
Everything on a flash slot card
Each card links directly to the boat's booking page with flash parameters pre-filled
07
Boat photo fills the top of the card. When the customer hovers on desktop, the photo zooms in slightly to signal the card is clickable.
Boat name appears in large serif type below the photo.
Available time window shows the start and end time of the flash slot, for example "10:00am – 4:00pm". A clock icon precedes the time. The total window duration appears next to the times in faded text, for example "(6 hrs window)".
Guest capacity shows the maximum number of guests for the boat, with a people icon.
Position label appears in small italic text. It describes where this slot sits relative to other bookings on the same boat that day. This is covered separately in section 09.
Hourly rate appears at the bottom left of the card in large serif type followed by "/hr".
Book Now button sits at the bottom right. Tapping or clicking the card anywhere takes the customer to the boat detail page with the flash date, slot, and time window already selected.
On hover (desktop), the card border turns orange to match the flash theme, and the photo zooms gently.
Full slot card
⚡ Flash
Min 2h
Motor Yacht
Morpheus
10:00am – 4:00pm (6 hrs window)
Up to 12 guests
Gap between bookings
One tap to book: tapping any part of the card goes directly to the boat's page with the flash slot and window pre-selected, so the customer does not need to find the date again.
Flash deal page · Card image tags
Three overlay tags on the photo
Flash tag, minimum hours tag, and boat type tag
08
Flash tag sits in the top-left corner of the photo. It has a red-orange gradient background with a lightning bolt icon and the word "Flash". This confirms to the customer the slot is a flash deal, not a regular charter.
Minimum hours tag sits in the top-right corner. It shows the minimum number of hours the customer must book for this slot, for example "Min 2h". Customers cannot book for fewer hours than this amount.
Boat type tag sits in the bottom-left corner of the photo. It shows the vessel category in small uppercase text, for example "Motor Yacht" or "Sailing Catamaran".
All three tags appear together over the photo. They do not affect what the customer can book — they are information labels only.
Tag positions on the photo
🛥️
⚡ Flash
Min 3h
Sailing Catamaran
Top-left: Flash tag (orange gradient) · Top-right: Minimum hours (white pill) · Bottom-left: Boat type (dark navy pill)
Flash deal page · Position label
Before, after, or between bookings
Helps customers understand when the boat is free that day
09
Position label is a short italic sentence that appears below the guest capacity on each card. It tells the customer where this free window sits in the boat's day.
"Before another booking" means the flash slot is the first slot of the day and another charter follows it later. The boat becomes available again after this slot ends.
"After another booking" means the flash slot is at the end of the day. A charter runs earlier, and this slot is the free window that comes after it.
"Between two bookings" means the flash slot is a gap in the middle of the day between two existing charters. The window has a start and end constrained by the bookings on either side.
The position label does not affect pricing or booking. It is purely informational so customers understand how the day is structured for that boat.
Three position label examples
Morpheus
Gap before another booking
Spellbound
Gap after another booking
Blue Horizon
Gap between two bookings
Not a restriction: the position label is just context. The customer can still book any duration they like within the available window, down to the minimum hours shown on the card.
Flash deal page · How it works section
Three-step explainer at the bottom
Always visible below the slot cards, in every state
10
How It Works section appears at the very bottom of the page in a dark navy background, below all slot cards and state messages. It is always visible regardless of whether flash deals are open or closed.
Section heading uses white serif text centred above the three steps.
Step 1 explains that flash deals open every Monday and close at the end of Monday Sydney time. Customers should check back each Monday.
Step 2 explains that customers pick a slot that suits them from the available windows listed on the page.
Step 3 explains that customers confirm and pay immediately. Spots are limited so acting quickly is encouraged.
Each step has a numbered circle in orange on a dark background, a short title in white, and a description in faded white text below it.
On mobile, the three steps stack vertically rather than sitting side by side.
How It Works mockup
How it works
1
Watch for Monday
Flash deals open every Monday and close at midnight Sydney time
2
Pick your slot
Browse the available windows and choose one that suits your plans
3
Book instantly
Confirm and pay — spots are limited so act quickly
Flash deal page · Mobile layout
How the page adapts on phones
Same content, rescaled layout
11
Hero heading scales down from 50px on desktop to around 28px on small phones, keeping the text readable without overflowing the screen.
Countdown timer numbers scale from 44px on desktop to 28px on small phones. The layout and labels stay the same.
Countdown wrap padding reduces on smaller screens so the timer fits comfortably within the hero area.
Slot card grid changes from three columns on wide screens, to two columns on tablets (below 1100px), to one column on phones (below 768px). Each card takes the full width of the screen on small phones.
Page padding reduces from 40px on desktop to 20px on tablet and below, giving cards more room on smaller screens.
How It Works steps stack into a single column on mobile instead of showing side by side. Each step takes the full width with the number, title, and description stacked vertically.
Results header stacks on mobile — the count and subtitle go to one line and the Live pill moves below, keeping both readable on narrow screens.
Mobile card grid (single column)
Wednesday 18 June
⚡ Flash
Min 2h
Motor Yacht
Morpheus
🕐 10:00am – 4:00pm (6h)
👥 Up to 12 guests
Gap between bookings
How it works
1
Watch for Monday
Deals open every Monday
2
Pick your slot
Choose the window that suits you
3
Book instantly
Confirm and pay — spots are limited