TruFragrance Cannes 2025 Landing Page
Custom promotional landing page for Cannes Lions 2025 with interactive discount code copy system and QR code-optimized design for conference attendees.
Visit live ↗- WordPress
- Gutenberg
- JavaScript
- HTML/CSS
- Frontend Development
- UX Design
- Technical Implementation
- May 2025
- TruFragrance Group
- Built custom Gutenberg HTML block with interactive discount code copy functionality
- Implemented QR code-friendly mobile-first design for conference distribution
- Created direct links to 3 brand Shopify stores with auto-applied discount codes
- Designed elegant, on-brand promotional page matching TruFragrance aesthetics
A promotional landing page built for TruFragrance’s presence at the Cannes Lions International Festival of Creativity 2025. The page served as a digital business card accessible via QR codes distributed at the event, offering attendees an exclusive 40% discount across all TruFragrance brands.
Project Overview
TruFragrance needed a clean, elegant landing page that could be accessed quickly at their Cannes booth via QR code, allowing festival attendees to claim an exclusive discount offer across their three fragrance brands: Lake & Skye, Le Monde Gourmand (Gourmand Beauty), and Tru Western.
Technical Implementation
Custom Gutenberg HTML Block — Built as a custom HTML block within WordPress’s Gutenberg editor, allowing complete design control with inline styles, no theme dependencies or conflicts, easy updates and maintenance, and optimal performance with no external dependencies.
Interactive Discount Code System — Implemented a sophisticated code-copy mechanism with dual clipboard API support (modern Clipboard API with a legacy execCommand fallback): one-click code copying with visual feedback, automatic fallback for older browsers, mobile-optimized touch interactions, and animated success messages.
Multi-Brand Navigation — Created direct links to each brand’s Shopify store with the discount code pre-applied in the URL, so the 40% discount is applied automatically at checkout — users just click and shop:
- Lake & Skye:
lakeandskye.com/discount/CANNES40 - Gourmand Beauty:
gourmandbeauty.com/discount/CANNES40 - Tru Western:
truwestern.com/discount/CANNES40
Design Decisions
Mobile-First Approach — Given the QR code distribution method, the page was designed mobile-first: fluid typography with clamp() for perfect scaling, touch-friendly 60px button heights, responsive spacing using viewport-relative units, and a single-column layout optimized for vertical scrolling.
Visual Design — Clean, minimal aesthetic matching TruFragrance’s sophisticated brand, high-contrast CTA button for the discount code, elegant outlined buttons for brand navigation, and a soft background for warmth without distraction.
Accessibility Features — ARIA live regions for screen reader announcements, semantic HTML structure, high contrast ratios, keyboard navigation support, and focus management for copy interactions.
Results
The landing page successfully served as TruFragrance’s digital touchpoint during Cannes Lions 2025: a clean, professional first impression for festival attendees, a seamless discount redemption process, zero friction from QR scan to purchase, and an easy page to update for future events.
Ongoing Relationship
I maintain an ongoing consulting relationship with TruFragrance, providing continuous support for new implementations, technical advisory, and task execution as needed. This landing page is one example of the quick-turnaround projects we collaborate on.