Mascotear Hotel y Guardería
Sitio web de alto rendimiento con sistema de video dual responsivo e integración total con WhatsApp.
Landing page comercial para hotel y guardería canina en Funza. Diseño premium con animaciones avanzadas (Magic UI + Framer Motion), sistema de video responsivo adaptativo (vertical en móvil, horizontal en desktop) y conversión directa vía WhatsApp. Orientada a maximizar reservas desde dispositivos móviles.
El cliente tenía videos promocionales en formato vertical (TikTok/Reels) y horizontal (YouTube). En desktop, el video vertical se veía mal con barras negras laterales enormes. En mobile, el video horizontal quedaba demasiado pequeño. Había que detectar el dispositivo y servir el formato correcto sin un flash de contenido incorrecto al cargar (FOUC), porque eso destruía la primera impresión premium que el cliente quería.
La clave fue resolver esto en CSS, no en JavaScript. Usamos `@media (orientation: portrait)` para mostrar/ocultar cada video con `hidden` de Tailwind, y `preload='none'` en el video que no se va a usar para no desperdiciar ancho de banda. El video correcto se carga desde el primer render sin ningún flash porque la decisión es puramente CSS — no hay JavaScript que corra después del hydration para cambiar el DOM.
Tailwind CSS v4 aún no tiene soporte completo en todos los plugins del ecosistema al momento del proyecto. Tuvimos que hacer downgrade de un plugin de animaciones y escribir las keyframes manualmente en el CSS global. En proyectos futuros esperamos que el ecosistema madure antes de usar v4 en producción, o migramos gradualmente. Por lo demás, el nuevo motor de v4 es notablemente más rápido en build — el tiempo de compilación bajó a la mitad.