Hotel Suite Royal — Landing page bilingüe

Landing page para el Hotel Suite Royal, un hotel 4 estrellas en Melgar (Tolima), destino de descanso de clima cálido cercano a Bogotá. Se diseñó con un estilo editorial inspirado en cadenas hoteleras de lujo y se publicó en español e inglés. La desarrollé con apoyo de inteligencia artificial (Claude Code).

Las fotos, la calificación (8,3 sobre 10) y el número de opiniones (688) provienen de la ficha pública del hotel en Booking.com.

El problema

Un hotel que vende principalmente a través de plataformas de reservas paga una comisión por cada huésped y tiene poco control sobre cómo se presenta. El objetivo era un canal propio: una página que transmitiera la calidad del hotel, mostrara con claridad habitaciones y servicios, y llevara al visitante a reservar directamente con el hotel.

Qué hace

• Portada a pantalla completa: carrusel de fotos con la piscina en la azotea, calificación de los huéspedes y llamado a reservar.
• Reserva directa por WhatsApp: el visitante elige fechas, número de adultos y tipo de habitación; la página valida las fechas y abre WhatsApp con el mensaje ya redactado.
• Habitaciones y experiencias: Doble, Triple y Familiar con medidas y camas, habitaciones con jacuzzi, las dos piscinas y el restaurante.
• Galería: 39 fotos con filtros (habitaciones, piscinas, espacios, fachada) y un visor que se maneja con el teclado o deslizando el dedo.
• Opiniones y ubicación: calificación por categoría, mapa, distancias a los principales atractivos y normas del hotel.
• Versión en inglés con su propia dirección (/en) para huéspedes extranjeros.

Cómo está hecha

01Páginas

Español Página principal del sitio

Inglés · /en Enlazadas con hreflang y selector ES | EN

02Interacción · JavaScript

Reserva Valida las fechas y arma el mensaje de WhatsApp

Galería y visor Filtros, teclado y deslizamiento en el celular

Textos por idioma Un solo script que lee el idioma de la página

03Publicación

GitHub Código y control de versiones

Vercel Despliegue automático, URLs limpias y caché de imágenes

• HTML, CSS y JavaScript sin frameworks ni dependencias: carga rápida y nada que compilar.
• Diseño con variables de color y tipografía (Cormorant Garamond y Manrope), adaptable a celular, tableta y escritorio.
• Accesibilidad: navegación con teclado, foco visible, textos alternativos, etiquetas para lectores de pantalla y respeto por la preferencia de reducir el movimiento.
• SEO: descripción y vista previa para compartir en cada idioma, y etiquetas hreflang entre las dos versiones.
• Publicada en Vercel con despliegue automático desde GitHub.

Resultado

• Sitio publicado y funcionando en dos idiomas, en el celular y en el computador.
• Cada cambio que se sube a GitHub se publica automáticamente.

Capturas

En el celular