A booking site for a liveaboard dive boat, where divers compare trips, read each day of the itinerary and pick a cabin. I built the front end, responsive from phone to desktop.
01
A booking site for a liveaboard dive boat that sells the trip: where it goes, what each day looks like, which cabin to pick and what the water's like.
02
The front end: the boat's page, the list of departures, an itinerary page for every trip and the cabin pop-ups, responsive first.
03
One polished site that walks a diver from the first look to choosing a cabin, as easy on a phone as on a laptop.
Counted on the live site, October 2026
Each highlight says what it does for the divers booking, and how it works underneath.
01
One table lists every trip: the date, the route, how many dives, how long, the price and how many places are left. A date filter narrows it down, and on the phone each trip becomes its own card.
For divers
Compare dates and prices at a glance, and see what's nearly full.
Under the hood
One list of trips drives both the desktop table and the phone cards, so they never disagree.
02
Every trip opens its own itinerary: an overview, the plan for each day, the dive sites, what's included and the boat, with the price and Select Cabin always at hand.
For divers
Know where you'll dive each day before you pay.
Under the hood
One itinerary page for every trip, built from the trip's details in its link, with five tabs.
03
Three cabins, each with a photo, size, beds and price per night. View Details opens the cabin in a pop-up with everything it includes, without leaving the page.
For divers
See the room before you choose it.
Under the hood
The cabin pop-up animates in with Framer Motion and closes back to the same spot on the page.
04
Visibility, currents, water temperature by season, the best time to go, what wetsuit to bring and what marine life to expect, plus the weather and a year-round temperature chart.
For divers
Every question a diver asks before booking, answered on the page.
Under the hood
Reusable panels and bar charts built with Tailwind, so the page stays consistent from section to section.
05
A rating breakdown with divers' reviews, and a FAQ that answers the usual worries: certification, what to bring, cancellations, safety.
For divers
Real reviews and straight answers, right where people decide.
Under the hood
An accordion FAQ and a review summary that show only what's needed until opened.
Screens captured from the live site in October 2026. Trips, prices, reviews and boat details are the client's sample content.
My job was the front end: everything a diver sees and taps. I built it in React, responsive first, so it works as well on a phone on the dive deck as on a laptop at home.
Every part of the page is its own component (routes, cabins, conditions, reviews), styled with Tailwind, with Framer Motion for the pop-ups and transitions. That keeps the page consistent and easy to extend.
A diver lands on the boat's page
One long page of reusable React sections
They compare the departures
One trip list: a table on desktop, cards on a phone
They read a trip day by day
Its own itinerary page, with five tabs
They pick a cabin
Cabin pop-ups with Framer Motion, then on to booking
Divers can compare departures, read each trip day by day, choose a cabin and check the conditions, all on one responsive site that keeps the next step in reach.
