Camilo Castro
All workCase 02 / 05

Hotel Logístico Client website

A hotel's front door, WhatsApp-first

A framework-free landing page for a hotel ten minutes from El Rodadero: aerial video, room carousels, a gallery and a booking form that turns into a WhatsApp message.

  • Hand-written HTML, CSS and JavaScript — no framework, no build step — on Vercel with the hotel's own domain.
  • Infinite room carousels with cloned slides, touch swipe and a guard against racing gestures.
  • One constant controls every WhatsApp link, and the contact form composes the message — no backend needed.
Client
Hotel Logístico — Santa Marta, Colombian Caribbean
Role
Design and development
Year
2026 Live · hotellogistico.com
Stack
  • HTML
  • CSS
  • JavaScript
  • Google Maps
  • Vercel
Visit the site
Hotel Logístico home page: aerial video of a Santa Marta beach behind the headline “Hotel en Santa Marta” and a WhatsApp booking button.
The same hero on a phone.

The brief

Hotel Logístico is a small hotel in Bureche, Santa Marta — close to El Rodadero, the historic center and the airport. Bookings happen over WhatsApp, not through a booking engine, so the site had one job: make people want to stay, then start the conversation.

The brief was explicit: minimal, elegant, boutique; no Bootstrap, no libraries; mobile-first on every change.

What I built

  • Aerial video hero with a single, obvious call to action
  • Four room types with photo carousels and amenity tags
  • Services, pool preview and a gallery with a navigable lightbox
  • Guest reviews, map with travel times, and a two-column FAQ
  • A validated contact form that opens WhatsApp with the message ready
  • robots.txt and sitemap.xml for search engines

Under the hood

  1. Carousels that don't stutter

    An infinite loop with cloned first and last slides. The snap-back runs on a timer instead of transitionend — unreliable off-screen — with a guard flag against racing swipes.

  2. One source of truth

    The WhatsApp number is defined once; on load, a script rewrites every wa.me link in the page.

  3. Clean URLs while scrolling

    Navigation uses data attributes and scrolls with the navbar's offset, so the address bar never fills with hashes.

  4. Type that sells the room

    Cormorant Garamond for display, Inter for text, one gold accent over warm neutrals.

Gallery

About section with the hotel's façade at night and three quick facts.
A refuge, in two sentences and one façade.
Room cards for single and double rooms, each with photos and amenity tags.
Room cards with swipeable photo carousels.
Gallery grid with the lobby, a corridor and the façade.
Gallery with a keyboard- and swipe-navigable lightbox.
Pool section: a photo of the pool area next to the heading “Zona de piscina”.
The pool, announced before it opens.

Where it stands

Live at hotellogistico.com, served by Vercel over HTTPS.