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