Hospedaje • Experiencia digitalVideo de aperturaDiseño responsivo3 idiomas
La experiencia empiezaantes de la llegada.
Un sitio que traduce el encanto de hospedarse frente al mar.
El sitio de un hospedaje de casas y chalés frente al mar, en tres idiomas, con un panel de 19 pantallas para el dueño.Casas y chalés frente al mar, en 3 idiomas, con panel del dueño.
- Next.js 16.3
- React 19.2
- TypeScript 5.9
- Tailwind CSS 3.4
- next-intl 4.13
- Framer Motion 12
- Lenis 1.3
Hospedaje • Experiencia digitalVideo de aperturaDiseño responsivo3 idiomasLa experiencia empiezaantes de la llegada.
Un sitio que traduce el encanto de hospedarse frente al mar.
- Next.js 16.3
- React 19.2
- TypeScript 5.9
- Tailwind CSS 3.4
- next-intl 4.13
- Framer Motion 12
- Lenis 1.3
El sitio de un hospedaje de casas y chalés frente al mar, en tres idiomas, con un panel de 19 pantallas para el dueño.Casas y chalés frente al mar, en 3 idiomas, con panel del dueño.
- Next.js 16.3
- React 19.2
- TypeScript 5.9
- Tailwind CSS 3.4
- next-intl 4.13
- Framer Motion 12
- Lenis 1.3
Antes de la llegada
El huésped siente la playa antes de llegar.
Quien busca hospedaje decide en pocos segundos, y una foto quieta no muestra el lugar. Por eso el sitio se mueve como la playa: abre con un video, las fotos avanzan despacio con el scroll y los títulos llegan palabra por palabra. Casi todo es CSS hecho a mano; la biblioteca de animación aparece en solo tres lugares.
Video de apertura
Lo primero que se ve es el lugar en movimiento, con un video propio para el celular y una foto en su lugar para quien pide menos movimiento.
En el código
src/components/sections/hero.tsxFotos en capas
La foto avanza más despacio que la página y da sensación de profundidad (el efecto parallax).
En el código
src/components/fx/parallax-media.tsxPalabra por palabra
Los títulos aparecen una palabra a la vez, al ritmo de la lectura.
En el código
src/components/fx/split-reveal.tsxCapítulos que se abren
Cada parte de la página entra como un capítulo nuevo, con un solo vigía para toda la página, liviano para el celular.
En el código
src/components/fx/chapter-reveal.tsxBotón magnético
El botón es atraído hacia el mouse y dan ganas de hacer clic. Estas tarjetas usan el mismo efecto: toca o pasa el mouse.
En el código
src/components/fx/magnetic.tsxScroll suave
La página se desliza sin tirones, con Lenis, y se apaga sola para quien pide menos movimiento.
En el código
src/components/providers/smooth-scroll.tsx
- 38
- animaciones propias, escritas en CSS
- 52
- archivos que respetan a quien pide menos movimiento
Una experiencia. Tres idiomas.
Alojamientos, disponibilidad e información para planificar la estadía.
EnglishPortuguêsEspañolDel primer contacto al pedido de reserva.Portugués • Inglés • EspañolQuien viene de afuera lee el sitio en su idioma: cada página tiene su dirección en portugués, inglés y español. Y quien cuida el sitio no necesita saber traducir, en el panel, un botón pasa el texto nuevo del portugués a los otros dos idiomas. Toca o pasa el mouse por un cartel para ver la frase en los tres idiomas.
- La etiqueta de la página de disponibilidad
- El título de la misma página
- El botón del pedido
- 1.977 textosEn cada idioma, del sitio y del panel.
- Una dirección por idiomaLas direcciones /pt, /en y /es: Google encuentra cada versión.
- Traducción en el panelUn botón traduce el texto nuevo del portugués al inglés y al español (con el servicio MyMemory).
- El panel también habla tres idiomasQuien cuida el sitio elige el idioma del panel.
La agenda
El calendario de Airbnb aparece en el sitio solo.
Las casas de playa suelen publicarse en Airbnb, y llevar dos agendas a mano es arriesgarse a alquilar la misma fecha dos veces. Aquí el sitio lee el calendario de cada alojamiento en Airbnb y le muestra al huésped lo que está libre. Baja para ver la marea llenar los días ocupados.
- 1Libre
- 2Ocupado
- 3Ocupado
- 4Ocupado
- 5Ocupado
- 6Libre
- 7Libre
- 8Libre
- 9Ocupado
- 10Ocupado
- 11Ocupado
- 12Ocupado
- 13Libre
- 14Libre
- 15Libre
- 16Ocupado
- 17Libre
- 18Libre
- 19Libre
- 20Libre
- 21Libre
- 22Ocupado
- 23Ocupado
- 24Ocupado
- 25Ocupado
- 26Ocupado
- 27Ocupado
- 28Libre
- 29Libre
- 30Ocupado
- 31Ocupado
- Airbnb mandaLo que está reservado allí queda ocupado aquí, cada alojamiento tiene su calendario.
- El sitio lo buscaEl servidor lee ese calendario (en formato iCal, el mismo de las apps de agenda) y guarda la respuesta 30 minutos, para no pesar.
- El huésped ve los días libresEn la página de disponibilidad, en los tres idiomas.
- Pide la reservaCon un formulario. No hay pago en el sitio: la reserva se combina después.
- El pedido llega al panelCae en los mensajes con la etiqueta de reserva, y la pantalla Reservas muestra solo esos pedidos.
Panel administrativo propio
Belleza para el huésped. Control para el negocio.
Contenido, alojamientos y disponibilidad en un solo panel.
Alojamientos y tarifasPáginas y galeríaPedidos de reservaE-mail marketing19 pantallas de gestiónUn sitio de hospedaje que depende de un programador para cambiar un precio envejece rápido. Aquí el dueño cambia todo solo, en 19 pantallas, cada una es un llavero en este tablero de recepción. Toca o pasa el mouse para tomar una llave.
Hospedaje
- 01PanelLa vista general del sitio, apenas se entra.
- 02AlojamientosCasas y chalés: fotos, textos, comodidades.
- 03TarifasLos valores de cada alojamiento y período.
- 04DisponibilidadEl calendario de cada uno, conectado a Airbnb.
- 05ReservasSolo los pedidos de reserva, aparte.
Contenido
- 06PáginasLos textos de cada página del sitio.
- 07SeccionesEl orden y el encendido de las partes de la home.
- 08Editor de secciónEl texto de una parte, en los tres idiomas.
- 09NavegaciónLos ítems del menú.
- 10Pie de páginaLo que aparece al pie de cada página.
- 11TestimoniosLo que dijeron los huéspedes, con papelera.
- 12MomentosLa galería de fotos, con papelera.
- 13Praia Busca VidaLa página de la playa y la región.
Comunicación
- 14MensajesContactos y pedidos, con la respuesta ahí mismo.
- 15Newsletter y e-mailSuscriptores, campañas, plantillas y automatizaciones.
Sistema
- 16CopiasLas copias, con la vista previa de lo que cambia antes de volver a una.
- 17AuditoríaQuién cambió qué, con el antes y el después.
- 18ConfiguraciónMarca, contactos y medios del sitio.
- 19ContraseñaEl cambio de la contraseña del panel.
El panel tiene tema claro y oscuro y los tres idiomas, como el sitio. Se entra con contraseña, con 5 códigos de rescate para cuando se pierde.
El buzón
Una central de e-mail dentro del propio sitio.
Para que el huésped vuelva, casi todos pagan un servicio de e-mail marketing aparte. Aquí vive en el panel: la lista de suscriptores, las campañas y las plantillas. El envío habla directo con el servidor de correo (SMTP), con un cliente escrito desde cero, sin paquete listo. Toca o pasa el mouse por un sobre para abrirlo.
Campañas
Se escribe, se elige para quién y se envía.
Plantillas
Armadas en bloques, sin código.
Automatizaciones
Disparadores listos para configurar.
Por idioma
Cada suscriptor en su idioma.
En lotes
Sin trabar el servidor de correo.
Historial
Cada envío queda registrado.
Salir con un clic
Quien ya no quiere, se va solo.
Contra robots
La suscripción no acepta spam.
El camino de una campaña
- Borrador
- Programada
- En cola
- Enviando
- Enviada
Nada se pierde
Lo que el dueño escribe queda guardado.
Quien edita el sitio todos los días, algún día borra lo que no debía. Por eso hay dos redes: cada cambio en el panel genera una copia, y el servidor además copia el contenido y las fotos cada hora, solo si algo cambió. Antes de volver a una copia, el panel muestra lo que va a cambiar.
- 24Copias cada horaEn el servidor: las últimas 24 horas, una por hora.
- 14Copias diariasEn el servidor: una por día, en las últimas dos semanas.
- 8Copias semanalesEn el servidor: una por semana, en los últimos dos meses.
Una copia en cada cambio
En el panel, cada cambio genera una copia: todas de las últimas 48 horas y una por día hasta 30 días.
La papelera
Un testimonio o una foto borrados van a la papelera y pueden volver.
Qué cambió, y cuándo
La auditoría registra cada cambio del panel y muestra el antes y el después.
Actualizar sin borrar
Cuando el sitio recibe una versión nueva, el texto y las fotos del dueño se quedan: tres capas de protección se encargan de eso.
Las tecnologías
De qué está hecho, pieza por pieza
Un sitio de hospedaje con panel propio, sin base de datos: el contenido vive en archivos, grabados con cuidado para que nunca se corrompan. Elige una pieza para ver qué hace aquí y en qué archivo está.
17tecnologías, en 5 capas
Pantalla
Idiomas
Datos
Integraciones
Servidor
Las pantallas
Un álbum de vacaciones.
El sitio, el panel y el celular, en los temas oscuro y claro. Baja para que las fotos se revelen; haz clic en una para verla grande.
El sitio
El panel
En el celular
Sitios y experiencias webRecóleo