Vacation Rental Listing Page

Create a premium, trust-building vacation rental listing page for a direct-booking property site called "StayDirect" — a platform where property owners list vacation homes without platform fees. This specific listing is for a luxury beachfront villa in Tulum, Mexico. The design should feel clean, spacious, and trustworthy — borrowing the best Airbnb-style UI patterns while maintaining a unique premium identity.

1. NAVIGATION BAR
- Logo: "StayDirect" in a clean sans-serif with a small house/key icon
- Links: Explore, How It Works, List Your Property, Help
- Right side: currency selector (USD/EUR/GBP), "Sign In" text link, "Book Now" CTA (solid #0891B2 cyan-600)
- White background, subtle bottom shadow, sticky on scroll
- Mobile: condensed to logo + hamburger + "Book" mini CTA

2. BREADCRUMB & LISTING HEADER
- Breadcrumb: Home > Mexico > Tulum > Beachfront Villas
- Listing title: "Casa Azul — Luxury Beachfront Villa with Private Pool"
- Rating and reviews: "★ 4.92 · 127 reviews" (linked, scrolls to reviews section)
- Location: "📍 Tulum Beach Road, Tulum, Quintana Roo, Mexico" (linked to map section)
- Quick actions row: heart/save icon, share icon (opens share modal), "Report listing" text link
- Superhost badge: "⭐ Superhost · Gabriela has 98% 5-star reviews"

3. PHOTO GALLERY (Airbnb-style mosaic)
- 5-photo grid layout:
  - Main image (left, spans 2 rows): wide-angle villa exterior at sunset with infinity pool and ocean view
  - Top-right: open-air living room with white linen furniture and tropical plants
  - Bottom-right: master bedroom with king bed, mosquito net canopy, and ocean-facing window
  - Top-far-right: rooftop terrace with daybed and panoramic ocean views
  - Bottom-far-right: private beach path with palm trees and wooden walkway
- "Show all 42 photos" button overlaid on bottom-right image (white background, dark text)
- Images: 8px border-radius on outer corners, 4px gaps between images
- Click any image to open fullscreen lightbox gallery with left/right navigation
- Mobile: horizontal swipe carousel with dot indicators and photo count (1/42)

4. MAIN CONTENT LAYOUT (2-column: content 60% / booking widget 40%)

LEFT COLUMN — LISTING DETAILS:

4A. QUICK STATS BAR
- "Entire villa · Hosted by Gabriela"
- Stats row with dividers: "6 guests · 3 bedrooms · 3 bathrooms · Private pool"
- Icon for each stat (users, bed, bath, waves)
- Thin bottom border separator

4B. HIGHLIGHTS (3 standout features)
- 🏖️ "Beachfront" — "This villa is steps from the Caribbean Sea with a private beach access path"
- ⭐ "Superhost" — "Gabriela has 4.92 rating, 98% response rate, and 127 five-star reviews"
- 🔑 "Self check-in" — "Check yourself in with the smart lock keypad. Code sent 24 hours before arrival"
- Each highlight: icon, bold title, description line
- Light gray background (#F8FAFC), 12px border-radius, 16px padding

4C. PROPERTY DESCRIPTION
- Headline: "About This Property"
- "Welcome to Casa Azul — your private slice of the Tulum coastline. This handcrafted 3-bedroom villa sits directly on the beach, surrounded by lush jungle gardens and the sound of Caribbean waves."
- "Built in 2022 with sustainable local materials (reclaimed tropical hardwood, Yucatán limestone, handmade Oaxacan tiles), every detail was designed for relaxed luxury. Wake up to ocean views from every bedroom, swim in the infinity pool at sunset, and fall asleep to the rhythm of the sea."
- "THE SPACE: 2,400 sq ft open-plan villa across two levels. Ground floor: open-air living and dining area, fully equipped chef's kitchen, two guest bedrooms with en-suite bathrooms, direct pool access. Upper level: master suite with private balcony, outdoor rain shower, and 180° ocean panorama."
- "GUEST ACCESS: Full property including private beach path, rooftop terrace with daybed, outdoor BBQ area, yoga deck, and a palapa (thatched-roof shade structure) on the beach. Complimentary beach towels, snorkel gear, and 2 bicycles."
- "Show more" expand toggle after 4 lines (collapsed by default on mobile)

4D. SLEEPING ARRANGEMENTS
- Headline: "Where You'll Sleep"
- 3 room cards side by side:
  - Bedroom 1 — "Master Suite" — King bed, ocean view, private balcony, en-suite bath with rain shower — bed icon
  - Bedroom 2 — "Jungle Room" — Queen bed, garden view, en-suite bath with soaking tub — bed icon
  - Bedroom 3 — "Palm Room" — 2 twin beds (convertible to king), pool view, en-suite shower — bed icon
- Cards: light border, 12px radius, bed type icon, room name, description

4E. AMENITIES GRID
- Headline: "What This Place Offers"
- 2-column icon + label grid, showing top 10:
  - 🏊 Private infinity pool
  - 🏖️ Direct beach access
  - 📶 High-speed WiFi (150 Mbps)
  - ❄️ Air conditioning (all rooms)
  - 🍳 Full chef's kitchen
  - 🚗 Free parking (2 vehicles)
  - 👨‍🍳 Private chef available (extra)
  - 🧘 Yoga deck
  - 🚲 2 complimentary bicycles
  - 🔒 Smart lock entry
- "Show all 28 amenities" button opens modal with categorized list:
  - Bathroom (rainfall shower, soaking tub, luxury toiletries, hair dryer)
  - Kitchen (gas stove, oven, espresso machine, blender, dishwasher, filtered water)
  - Outdoor (BBQ grill, hammocks, beach palapa, outdoor dining for 8, fire pit)
  - Entertainment (65" smart TV, Sonos speakers, board games, snorkel gear)
  - Safety (smoke detectors, fire extinguisher, first aid kit, security cameras exterior only)

4F. AVAILABILITY CALENDAR
- Headline: "Availability"
- Side-by-side 2-month calendar view (current month + next month)
- Available dates: clickable, white background
- Booked dates: strikethrough, light gray, not clickable
- Selected range: teal highlight (#0891B2) with check-in/check-out labels
- Minimum stay indicator: "3-night minimum"
- Below calendar: "Updated 2 hours ago" timestamp
- Mobile: single month view with swipe between months

4G. LOCATION SECTION
- Headline: "Where You'll Be"
- Embedded map showing approximate location (pin with radius blur for privacy)
- Location text: "Tulum Beach Road, Tulum, Quintana Roo, Mexico"
- Neighborhood description: "Casa Azul is on the quieter southern stretch of Tulum Beach Road, a 10-minute bike ride from the hotel zone restaurants and cenotes. The Sian Ka'an Biosphere Reserve entrance is just 5 minutes south."
- Nearby highlights (icon + distance):
  - 🏖️ Tulum Beach — 30-second walk
  - 🏛️ Tulum Ruins — 15-minute bike ride
  - 🕳️ Gran Cenote — 20-minute drive
  - 🛒 Tulum Town — 10-minute drive
  - ✈️ Cancún Airport (CUN) — 90-minute drive

RIGHT COLUMN — BOOKING WIDGET (sticky on scroll):

4H. BOOKING CARD
- Prominent card with shadow, 16px border-radius
- Price: "$389" (large, bold) + "/night" + strikethrough original "$459" + "15% off" badge
- Rating summary: "★ 4.92 · 127 reviews"
- Date inputs (side by side): CHECK-IN / CHECK-OUT date pickers
- Guest dropdown: "Guests — 2 guests" (expandable: Adults, Children, Infants, Pets with +/- controls, max 6 guests)
- "Reserve" button: full-width, solid #0891B2 cyan-600, large, bold — "You won't be charged yet"
- Price breakdown (appears after dates selected):
  - $389 × 7 nights = $2,723
  - Cleaning fee: $150
  - Service fee: $0 (crossed out, "Direct booking — no platform fees!")
  - Taxes (16% IVA): $459
  - Total: $3,332
- "This is a rare find. Gabriela's place is usually booked." with diamond gem icon

5. REVIEWS SECTION
- Headline: "★ 4.92 · 127 Reviews"
- Rating breakdown bars (horizontal):
  - Cleanliness: 5.0 ████████████████████
  - Accuracy: 4.9 ███████████████████░
  - Communication: 5.0 ████████████████████
  - Location: 4.9 ███████████████████░
  - Check-in: 5.0 ████████████████████
  - Value: 4.8 ██████████████████░░
- 6 review cards (2x3 grid):
  - "Absolutely magical. The villa exceeded every expectation — the photos don't do it justice. Waking up to that ocean view every morning was surreal." — Sarah K., Austin, TX · December 2025 · ★★★★★
  - "Best-equipped kitchen we've ever had in a rental. We hired the private chef for one dinner and cooked ourselves the rest — both were amazing." — Tom & Linda R., Toronto · November 2025 · ★★★★★
  - "Gabriela was incredibly responsive and left a personalized welcome basket with local mezcal and chocolates. The self check-in was seamless." — Yuki M., Tokyo · November 2025 · ★★★★★
  - "Third time staying here. We come back every winter. The private beach path and yoga deck make it impossible to leave." — Anna & Chris B., Brooklyn · January 2026 · ★★★★★
  - "Pool is stunning, beach is gorgeous, but be aware there's some seaweed on the beach (common in Tulum). Villa itself is perfection." — James W., London · October 2025 · ★★★★☆
  - "Perfect for our family of 5. Kids loved the pool. The bikes were perfect for exploring. Only wish we'd booked a longer stay." — Maria G., Madrid · September 2025 · ★★★★★
- "Show all 127 reviews" button

6. HOST PROFILE SECTION
- Headline: "Hosted by Gabriela"
- Layout: avatar (80px circle, verified badge) + info on right
- Host details:
  - "Joined in 2020 · 127 reviews · ⭐ Superhost · Identity verified"
  - "Response rate: 98% · Response time: within 1 hour"
- Host bio: "Born and raised in Mexico City, I fell in love with Tulum 10 years ago and built Casa Azul as a dream project. I'm an architect by training — every corner of this villa was designed to connect you with the ocean and jungle. I live 5 minutes away and am always available to help you discover the best of Tulum."
- "Message Host" button (outline teal)
- Trust note: "To protect your payment, never transfer money or communicate outside of StayDirect."

7. HOUSE RULES & POLICIES
- 3 columns:
  - House Rules:
    - Check-in: 3:00 PM — self check-in with smart lock
    - Checkout: 11:00 AM
    - Max 6 guests
    - No smoking inside (outdoor areas OK)
    - No parties or events
    - Pets allowed (max 1, $50/night fee)
  - Cancellation Policy:
    - "Flexible" badge
    - Full refund if cancelled 7+ days before check-in
    - 50% refund if cancelled 3-7 days before
    - No refund within 3 days of check-in
  - Safety & Property:
    - Security cameras (exterior only, disclosed)
    - Carbon monoxide detector
    - Smoke detector
    - Pool has no gate or lock (supervise children)
    - First aid kit available

8. SIMILAR LISTINGS (horizontal scroll cards)
- Headline: "More Beachfront Stays in Tulum"
- 4 listing cards:
  - "Oceanview Treehouse Loft" — 2 guests · 1 bed · $189/night — ★ 4.88 (89 reviews) — photo of rustic-chic treehouse
  - "Bohemian Beach Cabana" — 4 guests · 2 beds · $249/night — ★ 4.95 (203 reviews) — photo of boho-style cabana — Badge: "Guest Favorite"
  - "Modern Jungle Villa with Cenote" — 8 guests · 4 beds · $529/night — ★ 4.91 (64 reviews) — photo of modern villa in jungle
  - "Seaside Studio with Rooftop Plunge Pool" — 2 guests · 1 bed · $159/night — ★ 4.87 (156 reviews) — photo of minimalist studio
- Each card: cover photo (aspect 4:3), heart/save icon, title, specs, price, rating
- Hover: image subtle zoom, shadow lift

9. FOOTER
- 4 columns on #F8FAFC background:
  - Explore: Beach Stays, Mountain Retreats, City Apartments, Countryside, Unique Stays, New Listings
  - Hosts: List Your Property, Host Resources, Pricing Calculator, Insurance, Host Community
  - StayDirect: About Us, How It Works, Trust & Safety, Careers, Press, Blog
  - Support: Help Center, Contact Us, Cancellation Options, Accessibility, Report a Concern
- Bottom bar: "© 2026 StayDirect, Inc. All rights reserved." + Privacy · Terms · Sitemap
- Language/currency selector at bottom

Design: Clean, spacious, trust-building. Primary: #0891B2 (cyan-600 for CTAs and interactive elements), secondary: #334155 (slate-700 for body text), accent: #F59E0B (amber for badges, discounts, and highlights). Backgrounds: white (#FFFFFF) for main content, #F8FAFC (cool slate) for alternating sections. Typography: DM Sans for headings (clean, modern, rounded), Inter for body text. Cards with 12px-16px border-radius, subtle shadows. Generous whitespace throughout. Photo-forward design with high-quality property imagery. Airbnb-familiar UI patterns (mosaic gallery, sticky booking widget, rating breakdowns) but with a distinct, premium feel.

Responsive: Mobile-first. Photo gallery becomes horizontal swipe carousel. Two-column layout stacks to single column. Booking widget moves from sticky sidebar to fixed bottom bar on mobile (showing price + "Reserve" button, expandable). Calendar shows single month with swipe. Amenities grid becomes single column. Review cards stack vertically. Similar listings become horizontal scroll. Map goes full-width. All touch targets minimum 44px. Bottom booking bar always visible on mobile with "Reserve" CTA and price summary.