WorkLUXE STAYS · Casa Brickell
LUXE STAYS · Casa Brickell. A booking site we built for ourselves.
Casa Brickell is a made-up villa brand. We built its booking site from start to finish to test how we work. The site is real. The checkout runs on Stripe in test mode. The savings are modeled.
We built this for ourselves, not for a client. The brand is made up. Each number below is either measured on the real build or marked as modeled, with how we got it.
The live site. Scroll it right here.
This is the demo home page. The brand and the photos are made up.
The Casa Brickell home pageScroll the page to scroll the site.
A cut on every stay. Now guests pay the host.
Before
- A booking site like Airbnb takes a cut of every stay.
- It keeps the guest, not the host.
Now
- Guests pay the host through Stripe.
- The host keeps the guest.
- We model the Airbnb fee the host keeps on each booking.
The brief. What it had to do.
We built this villa booking site for ourselves, start to finish. It let us test our process before we used it on client work. It has a magazine-style layout with large photos. Guests pay the host through Stripe, and the host can edit the content. Casa Brickell is a made-up brand. The build, the live site and the Google Lighthouse scores are real. The savings are modeled for a host running the same setup. Live at /demo/luxe-stays.
Small villa hosts pay sites like Airbnb a fee on every booking. Those sites also own the guest. Most custom booking sites cost $25,000 or more and take 6-10 weeks. For one villa with six bookings a month, the numbers don't work.
What it had to do
- Turn as many visits into bookings as Airbnb does. Skip its fee.
- Let the host keep the guest, not a listing site.
- Let the host edit suites, rates and photos with zero code.
- Launch the whole site in five business days.
What we had to work around
- Five business days from kickoff to a live site.
- On a phone, booking has to work as well as on Airbnb. That is where villa guests browse.
- Guests pay the host through Stripe. No booking platform sits between guest and host.
- The host edits text, rates and photos without writing code.
- Lighthouse scores of 95 or more on every page at launch.
What we built. Open it and check it.
- 01A magazine-style site for one villa. It opens on a big photo. It has the suites, the story, a gallery and a journal. It also has pages for location, FAQ, contact and press.
- 02A booking box. Guests pick dates, the number of guests and a suite. They see each part of the price, then pay through Stripe.
- 03On a phone, a booking bar stays at the bottom of the screen. Tapping it opens the full booking box over the page.
- 04A page where the host edits rooms, rates, photos and text.
- 05Pages to confirm or cancel a booking, and the steps after a guest books.
The calls we made. And why.
- 01
A magazine look, or a card like an Airbnb listing?
The magazine look. It opens on a big cover photo with an italic title. Small capitals set out the details, like the lines on a deed. The booking box gets its own space, off the photo.
Why
Guests pay $480 or more a night because the villa is curated. A listing card makes it look like any rental. That is wrong for a week's stay at $3,840. The site has to show why the rate is the rate.
- 02
Our own booking steps, or a listing site's widget?
Our own steps, with Stripe for payment. The money goes into the host's own Stripe account.
Why
A widget from a listing site brings its own look, its own checkout and its own web address. It also takes a cut. With Stripe, the money is the host's the moment the guest taps Reserve.
- 03
On a phone, a booking box in the page or a bar at the bottom?
A bar that stays at the bottom and opens the full booking box. Booking is one tap away from anywhere on the page.
Why
On a phone 390 pixels wide, a booking box in the page would push the big photo down. The cover look would be lost. The bar keeps the photo edge to edge, and booking is there from the first scroll.
Modeled outcomes.
The build, the address and the scores are real. The dollar and time figures are modeled. Each one says how.
How it went. Step by step.
- 1 dayDay 1: Brief and planWe set the brand's voice and listed the suites. We planned the photos, the booking steps and the content.
- 2 daysDays 2–3: BuildWe built the layout, the booking steps and the Stripe checkout. We added the host's editing page and the phone booking bar.
- 1 dayDay 4: Photos and wordsWe made 43 photos. They cover the six suites, the gallery, the story, the journal and the location. We edited the text and wrote the FAQ and policies.
- 1 dayDay 5: LaunchWe tuned the speed and checked the site for people with disabilities. We polished the phone booking bar, and the site went live on Vercel.
Built with
- Next.js
- Stripe
- Vercel
Julio DiazFounder
Christian MoranOperations & Client Support
Get your free AI Plan. We write it. Then we build it and run it.
Tell us about your business and talk with Maya or one of us. Within 48 hours, we walk you through your written plan. It is free, and it says what not to buy.