HoloJam Web: Una Landing Page Inmersiva con React y Framer Motion

El Propósito

Cuando estuvimos desarrollando HoloJam se nos solicitó una presencia web que igualara su ambición. Necesitábamos una Landing Page que transmitiera la energía creativa de la música y explicara funcionalidades de forma visual y sencilla. Investigando un poco sobre desarrollo web, aproveché la familiaridad que tenía con React para formular un producto sobrio y que cumpla con el objetivo de comunicar.

Stack Tecnológico

Decidí construir la web como una Single Page Application (SPA) para garantizar transiciones instantáneas y una experiencia fluida tipo App.

• Core: React + Vite para un desarrollo veloz y optimizado.
• Estilos: Tailwind CSS para un diseño responsivo y sistemas de diseño consistentes (gradientes personalizados).
• Animaciones: Framer Motion para dar vida a los elementos.
• Integraciones: EmailJS y Lucide React.

Desafíos de UX/UI y Soluciones

1. Animaciones

La Home cuenta con un fondo animado con gradientes radiales y cónicos en movimiento continuo. Utilicé framer-motion para animar estas capas sin afectar el rendimiento del hilo principal del navegador, logrando un efecto visual sin lag.

2. Interactividad

Para la sección "¿Por qué HoloJam?", implementé tarjetas con efecto de flip 3D utilizando propiedades de perspectiva de CSS. Esto permite mostrar capturas de pantalla de la app en el frente y explicar el valor en el dorso, aprovechando el espacio en pantalla.

3. Internacionalización Manual

En lugar de depender de librerías pesadas para un sitio simple de una sola página, implementé un sistema de gestión de estado ligero para manejar los idiomas EN/ES. Esto demuestra cómo manejar diccionarios de objetos y estados globales en React de forma eficiente sin excesos de ingeniería.

4. Comunicación Serverless

Para el formulario de contacto, integré EmailJS. Permitiendo recibir feedback directo de los betatesters en el correo de la App sin necesidad de configurar un servidor backend dedicado solo para el formulario, optimizando costos, mantenimiento y tiempos.

Conclusión

Este proyecto fue un ejercicio de construcción de identidad. Aprendí a equilibrar la estética con la funcionalidad y la accesibilidad, creando un embudo de conversión efectivo para HoloJam.