Landing Page TruFragrance Cannes 2025
Landing page promocional personalizada para Cannes Lions 2025 con sistema interactivo de copia de código de descuento y diseño optimizado para códigos QR para asistentes de conferencias.
Ver sitio en vivo ↗- WordPress
- Gutenberg
- JavaScript
- HTML/CSS
- Frontend Development
- UX Design
- Technical Implementation
- May 2025
- TruFragrance Group
- Construcción de bloque HTML Gutenberg personalizado con funcionalidad interactiva de copia de código de descuento
- Implementación de diseño mobile-first amigable para códigos QR para distribución en conferencias
- Creación de enlaces directos a 3 tiendas Shopify de marcas con códigos de descuento auto-aplicados
- Diseño de página promocional elegante y acorde a la marca, coincidiendo con la estética de TruFragrance
Una landing page promocional construida para la presencia de TruFragrance en el Festival Internacional de Creatividad Cannes Lions 2025. La página sirvió como tarjeta de presentación digital accesible vía códigos QR distribuidos en el evento, ofreciendo a los asistentes un descuento exclusivo del 40% en todas las marcas de TruFragrance.
Resumen del Proyecto
TruFragrance necesitaba una landing page limpia y elegante que pudiera accederse rápidamente en su stand de Cannes vía código QR, permitiendo a los asistentes del festival reclamar una oferta de descuento exclusivo en sus tres marcas de fragancias: Lake & Skye, Le Monde Gourmand (Gourmand Beauty) y Tru Western.
Implementación Técnica
Bloque HTML Gutenberg Personalizado — Construido como un bloque HTML personalizado dentro del editor Gutenberg de WordPress, permitiendo control completo del diseño con estilos inline, sin dependencias ni conflictos de tema, actualizaciones y mantenimiento fáciles, y rendimiento óptimo sin dependencias externas.
Sistema Interactivo de Código de Descuento — Implementación de un mecanismo sofisticado de copia de código con soporte dual de API de portapapeles (la API de Clipboard moderna con un fallback legacy execCommand): copia de código con un clic con retroalimentación visual, fallback automático para navegadores antiguos, interacciones táctiles optimizadas para móvil, y mensajes de éxito animados.
Navegación Multi-Marca — Creación de enlaces directos a la tienda Shopify de cada marca con el código de descuento pre-aplicado en la URL, de modo que el descuento del 40% se aplica automáticamente en el checkout — los usuarios solo hacen clic y compran:
- Lake & Skye:
lakeandskye.com/discount/CANNES40 - Gourmand Beauty:
gourmandbeauty.com/discount/CANNES40 - Tru Western:
truwestern.com/discount/CANNES40
Decisiones de Diseño
Enfoque Mobile-First — Dado el método de distribución por código QR, la página se diseñó mobile-first: tipografía fluida con clamp() para un escalado perfecto, alturas de botón de 60px amigables al tacto, espaciado responsivo usando unidades relativas al viewport, y un layout de columna única optimizado para scroll vertical.
Diseño Visual — Estética limpia y minimal que coincide con la marca sofisticada de TruFragrance, botón CTA de alto contraste para el código de descuento, botones elegantes con borde para la navegación de marcas, y un fondo suave para dar calidez sin distracción.
Características de Accesibilidad — Regiones ARIA live para anuncios de lectores de pantalla, estructura HTML semántica, altos ratios de contraste, soporte de navegación por teclado, y gestión de foco para las interacciones de copia.
Resultados
La landing page sirvió exitosamente como punto de contacto digital de TruFragrance durante Cannes Lions 2025: una primera impresión limpia y profesional para los asistentes del festival, un proceso de redención de descuento sin problemas, cero fricción desde el escaneo del QR hasta la compra, y una página fácil de actualizar para futuros eventos.
Relación Continua
Mantengo una relación de consultoría continua con TruFragrance, brindando soporte constante para nuevas implementaciones, asesoría técnica y ejecución de tareas según sea necesario. Esta landing page es un ejemplo de los proyectos de entrega rápida en los que colaboramos.