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

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

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.