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.
Stack
- WordPress
- Gutenberg
- JavaScript
- HTML/CSS
Role
- Desarrollo Frontend
- Diseño UX
- Implementación Técnica
Date
Highlights
- → 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

Landing Page TruFragrance Cannes 2025
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
- Rendimiento óptimo sin dependencias externas
Sistema Interactivo de Código de Descuento
Implementación de mecanismo sofisticado de copia de código con soporte dual de API de portapapeles:
// API de Clipboard moderna con fallback
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(code)
.then(() => showMessage('¡Código copiado!'))
.catch(() => fallbackCopy());
} else {
fallbackCopy(); // Fallback legacy execCommand
}Características:
- Copia de código con un clic con retroalimentación visual
- Fallback automático para navegadores antiguos
- Interacciones táctiles optimizadas para móvil
- Mensajes de éxito animados
Navegación Multi-Marca
Creación de enlaces directos a la tienda Shopify de cada marca con código de descuento pre-aplicado en la URL:
- Lake & Skye:
lakeandskye.com/discount/CANNES40 - Gourmand Beauty:
gourmandbeauty.com/discount/CANNES40 - Tru Western:
truwestern.com/discount/CANNES40
Esto eliminó fricción al aplicar automáticamente el descuento del 40% al checkout - los usuarios solo hacen clic y compran.
Decisiones de Diseño
Enfoque Mobile-First
Dado el método de distribución por código QR, la página fue diseñada mobile-first:
- Tipografía fluida con
clamp()para escalado perfecto - Alturas de botón de 60px amigables al tacto
- Espaciado responsivo usando unidades relativas al viewport
- Layout de columna única optimizado para scroll vertical
Diseño Visual
- Estética limpia y minimal coincidiendo con la marca sofisticada de TruFragrance
- Botón CTA de alto contraste (rojo #dc3545) para el código de descuento
- Botones elegantes con borde para navegación de marcas
- Sensación premium con tipografía y espaciado cuidadosos
- Fondo suave (#f9f4ee) para 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 para texto
- Soporte de navegación por teclado
- Gestión de foco para interacciones de copia
Resultados
La landing page sirvió exitosamente como punto de contacto digital de TruFragrance durante Cannes Lions 2025:
- Primera impresión limpia y profesional para asistentes del festival
- Proceso de redención de descuento sin problemas
- Cero fricción desde escaneo QR hasta compra
- Fácil de actualizar para futuros eventos
Destacados Técnicos
- JavaScript inline para cero dependencias externas
- Mejora progresiva con fallbacks de API moderna/legacy
- Diseño responsivo sin media queries (basado en clamp)
- Listo para copiar y pegar - bloque completo puede duplicarse para futuras campañas
- Optimizado para rendimiento - sin scripts externos, CSS mínimo
Sitio en Vivo: trufragrance.com/cannes Cliente: TruFragrance Group Evento: Festival Internacional de Creatividad Cannes Lions 2025 Estado: En Vivo y Activo
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.