01/07Proyecto de cliente
Todos los casos

Picomar

Sitio de villas: solicitud de fechas, mapas por zona, páginas viejas de villas redirigidas

Sector
Alquiler de villas de lujo
Ubicación
Uvita, Costa Rica
Año
2026
Rol
Diseño · Desarrollo
Inicio de Picomar en escritorio: el titular «A luxury villa, looked after.» sobre la foto de una casa moderna de vidrio y madera sobre el Pacífico, con una barra de búsqueda por villa, fechas y huéspedes.
01Contexto

Punto de partida

Picomar es una colección de villas privadas de lujo en la costa del Pacífico sur de Costa Rica, con base en Uvita, desde casas con vista al mar hasta refugios en la selva y fincas. Los huéspedes exploran las casas, revisan fechas y piden reservar. Un equipo de concierge coordina chefs, bienestar y actividades durante la estadía.

Construimos el sitio que reemplazó al anterior. El Internet Archive todavía lo muestra funcionando con WordPress, WooCommerce y Elementor en junio de 2026. El sitio nuevo corre en Next.js: convierte las fechas en solicitudes de reserva, muestra las ubicaciones de las villas como zonas y redirige las páginas viejas de villas al sitio nuevo. En teléfonos, la mayoría de las páginas de villa mantiene fijo en la pantalla un botón Check availability. El sitio está en inglés.

026 funciones

Lo que construimos

01/06

Villas con solicitud de reserva

Cada villa tiene su propia página con fotos y comodidades. En la mayoría, el huésped elige fechas y personas en una tarjeta de reserva y pide reservar; la tarjeta dice que aún no se le cobra. Cuatro villas reciben consultas en su lugar.

Tarjeta de reserva en la página de una villa con el selector de fechas abierto en marzo y abril de 2027, un contador de huéspedes en 2 y un botón Request to book.
02/06

Búsqueda por fecha, grupo y precio

La página de la colección lista 46 villas con filtros de fechas, huéspedes, precio, comodidades y acceso. El inicio abre con una búsqueda por villa, fechas y huéspedes. Once colecciones agrupan las casas por ocasión, desde reuniones familiares hasta retiros y privacidad total.

La página de la colección de villas: una barra de filtros de fechas, huéspedes, precio, comodidades y acceso sobre la primera fila de tarjetas, cada una con foto, nombre y cantidad de habitaciones.
03/06

Mapas que muestran una zona

El mapa de una villa marca un círculo rotulado «Approximate area», no una dirección de calle. La mayoría de las páginas añade que la dirección exacta llega tras reservar. Los datos para buscadores de las 46 villas solo dan pueblo y país.

Sección de ubicación de la página de una villa: un mapa de calles de un pueblo con un círculo translúcido y una leyenda que dice Approximate area, sobre el inicio de las reglas de la casa.
04/06

Villas y blog viejos, redirigidos

Probamos las páginas viejas de villas y del blog que el Internet Archive capturó en 2025 y 2026. Todas redirigen a una página que funciona: la mayoría a la página equivalente, con redirecciones permanentes, y unas pocas a la lista de villas.

05/06

Fotos al tamaño de cada pantalla

Las fotos vienen en varios anchos: un teléfono recibe un archivo más liviano que una computadora. En navegadores que aceptan AVIF, la foto superior de las villas pesa entre 42% y 56% menos que en JPEG. Solo esa foto está configurada para cargar de inmediato.

06/06

Analítica solo después de un sí

Google Analytics y el píxel de Meta no se activan hasta que el visitante toca Allow (permitir). Antes, el inicio solo contacta a picomar.com y no guarda cookies. Con No thanks, ninguna de las dos herramientas corre y la decisión se recuerda.

03Solo hechos

Resultados

páginas viejas de villas y blog que revisamos redirigen al sitio nuevo
Redirigidas
menos peso en la foto superior de las 46 villas, en AVIF que en JPEG
42–56%
solicitudes de analítica hasta que el visitante toca Allow
0
villas con selector de fechas y solicitud de reserva
42/46
mapas por zona; en la mayoría, la dirección exacta llega al reservar
Solo zona
044 imágenes

Galería

Parte superior de la página de una villa: la foto de una casa moderna al atardecer con el nombre de la villa, el pueblo, la cantidad de habitaciones, baños y huéspedes, un enlace Check availability y el menú de secciones debajo.
01La página de una villa abre con su propia foto, la cantidad de habitaciones y huéspedes y un enlace a la tarjeta de reserva.
El inicio en un teléfono: el titular y, debajo, campos apilados de villa, huéspedes y fechas con un botón Search.
02En un teléfono los campos de búsqueda se apilan y el menú pasa detrás de un ícono.
La página del blog bajo el título Latest dispatches: una entrada destacada grande junto a tres más pequeñas, cada una con foto, fecha y título.
03El blog: guías de campo y notas locales, con una entrada destacada y una lista.
La página de una villa en un teléfono: la foto, el nombre de la villa y la cantidad de habitaciones, con un botón Check availability fijo al pie de la pantalla.
04Un botón Check availability queda fijo al pie de la pantalla mientras la página se desplaza.
058 herramientas

Tecnología

  • Next.js
  • React
  • Tailwind CSS
  • Vercel
  • Sanity
  • MapLibre
  • OpenStreetMap
  • GSAP
06Siga explorando

Qué sigue