TruFragrance 戛纳2025落地页

为 TruFragrance 在2025年戛纳国际创意节的展示构建的促销落地页。该页面作为通过活动中分发的二维码访问的数字名片，为参与者提供所有 TruFragrance 品牌的独家40%折扣。

项目概述

TruFragrance 需要一个简洁、优雅的落地页，可以通过二维码在其戛纳展位快速访问，让节日参与者可以在其三个香水品牌上领取独家折扣优惠：Lake & Skye、Le Monde Gourmand (Gourmand Beauty) 和 Tru Western。

技术实施

定制Gutenberg HTML块

作为WordPress Gutenberg编辑器中的定制HTML块构建，允许：

• 使用内联样式完全控制设计
• 无主题依赖或冲突
• 易于更新和维护
• 无外部依赖的最佳性能

交互式折扣码系统

实施具有双剪贴板API支持的复杂代码复制机制：

// 现代剪贴板API带回退
if (navigator.clipboard && navigator.clipboard.writeText) {
  navigator.clipboard.writeText(code)
    .then(() => showMessage('代码已复制！'))
    .catch(() => fallbackCopy());
} else {
  fallbackCopy(); // 旧版execCommand回退
}

特点：

• 一键复制代码并有视觉反馈
• 旧版浏览器自动回退
• 移动优化触摸交互
• 动画成功消息

多品牌导航

创建直接链接到每个品牌Shopify商店，并在URL中预先应用折扣码：

• Lake & Skye：lakeandskye.com/discount/CANNES40
• Gourmand Beauty：gourmandbeauty.com/discount/CANNES40
• Tru Western：truwestern.com/discount/CANNES40

这消除了摩擦，在结账时自动应用40%折扣 - 用户只需点击购物。

设计决策

移动优先方法

鉴于二维码分发方式，页面采用移动优先设计：

• 使用 clamp() 的流体排版实现完美缩放
• 60px触摸友好按钮高度
• 使用视口相关单位的响应式间距
• 针对垂直滚动优化的单列布局

视觉设计

• 简洁、极简美学 匹配TruFragrance的精致品牌
• 高对比度CTA按钮（#dc3545红色）用于折扣码
• 优雅的边框按钮 用于品牌导航
• 高端感觉 精心的排版和间距
• 柔和背景（#f9f4ee）温暖而不分散注意力

无障碍功能

• 屏幕阅读器公告的ARIA实时区域
• 语义化HTML结构
• 文本高对比度
• 键盘导航支持
• 复制交互的焦点管理

成果

落地页成功作为TruFragrance在2025年戛纳国际创意节期间的数字接触点：

• 为节日参与者留下干净、专业的第一印象
• 无缝的折扣兑换流程
• 从二维码扫描到购买零摩擦
• 易于为未来活动更新

技术亮点

• 内联JavaScript 实现零外部依赖
• 渐进增强 带现代/旧版API回退
• 响应式设计 无需媒体查询（基于clamp）
• 即复制即用 - 整个块可以复制用于未来活动
• 性能优化 - 无外部脚本，最小CSS

在线网站：trufragrance.com/cannes 客户：TruFragrance Group 活动：2025年戛纳国际创意节 状态：在线运行中

持续合作关系

我与 TruFragrance 保持持续的咨询合作关系，为新的实施提供持续支持、技术顾问和按需任务执行。这个落地页是我们合作的快速交付项目之一。