客戶挑戰
傳統紙質餐牌更新成本高、無法即時修改價格。酒吧需要一個能展現品牌高端定位、方便隨時更新酒水價格、並與活動邀請頁面整合嘅數碼方案。
我們的方案
打造以月亮為主題嘅沉浸式數碼餐牌，採用金色（#d4af37）奢華配色方案。運用 Cormorant Garamond 襯線字體營造高級感，配合浮動月球動畫、磨砂玻璃效果及流暢嘅捲動導航，令瀏覽餐牌本身成為品牌體驗嘅一部分。
執行步驟
分析酒吧品牌調性，確立「月光 × 奢華」設計方向及金色主色調
規劃 6 大分類：Signature Cocktails、Classic Cocktails、Beer & Wine、Spirits、Food、Non-Alcohol
設計 Mobile-First 沉浸式體驗：全屏月球 Hero、Sticky 導航、磨砂玻璃卡片
加入流暢動畫效果：月球旋轉、液態背景、卡片淡入、Shimmer 高光
支援即時更新機制，方便酒吧隨時調整價格及季節限定品項（如聖誕特調）
服務及功能詳情
品牌視覺設計
以「月光 × 奢華」為設計主軸，打造與酒吧高端定位完全匹配嘅數碼體驗。
金色（#d4af37）奢華配色方案，搭配深色背景營造高級氛圍
Cormorant Garamond 襯線字體用於標題及價格，Montserrat 用於正文
全屏月球 Hero：月亮圖片 120 秒緩慢旋轉 + 6 秒光暈脈搏動畫
液態背景動畫：漸層色塊緩慢流動，增加空間深度
磨砂玻璃卡片：所有品項以 Glassmorphism 風格呈現，配合 Shimmer 掃光
數碼餐牌系統
完整嘅 60+ 品項餐牌，涵蓋所有飲品及餐點，支援多種定價模式。
6 大分類：Signature Cocktails、Classic Cocktails、Beer & Wine、Spirits、Food、Non-Alcohol
4 款招牌雞尾酒獨立展示：B-612 Asteroid、Apollo's Shake 等，配有創意描述
Spirits 支援 Shot / Bottle 雙價格顯示（如 Gin $58 / $688）
Food 支援 pc / whole 計價（如 Dumplings 6pc / 12pc）
季節限定品項機制：方便隨時新增或移除（如聖誕特調、Happy Hour 限定）
中英雙語：食物品項中英對照，符合國際化酒吧定位
互動瀏覽體驗
唔只係一個餐牌，更係一個沉浸式品牌體驗。
Sticky 導航列：IntersectionObserver 自動偵測當前分類，高亮對應標籤
Smooth Scroll：點擊導航即平滑捲動到目標分類
品項淡入動畫：滾動時品項逐一淡入，增加瀏覽節奏感
Highlight 標記：招牌品項及特選品項自動金色高亮
Mobile-First：最大寬度 600px，完美適配手機螢幕
活動頁面整合
餐牌以外嘅延伸功能，支援酒吧活動推廣。
五週年邀請函：獨立活動頁面，精美設計可分享至社交媒體
Happy Hour 餐牌：獨立展示限時優惠價格及品項
Open Graph 設定：分享到 Facebook / WhatsApp 時自動顯示品牌預覽圖
功能亮點
全屏月球 Hero：月亮圖片以 120 秒緩慢旋轉 + 6 秒光暈脈搏，營造夢幻氛圍
Sticky 導航列：自動偵測當前瀏覽嘅餐牌分類，高亮對應標籤
Signature Cocktails：4 款招牌雞尾酒（B-612 Asteroid、Apollo's Shake 等）獨立展示
分層定價：Spirits 支援 Shot / Bottle 雙價格；Food 支援 pc / whole 計價
中英雙語：食物品項中英對照，符合香港國際化酒吧定位
磨砂玻璃卡片：所有品項以 Glassmorphism 風格呈現，配合 Shimmer 掃光效果
活動邀請頁：五週年邀請函獨立頁面，可分享至社交媒體
液態背景動畫：漸層色塊緩慢流動，增加視覺深度
網站截圖
Hero — 全屏月球動畫 + Happy Hour 標題
餐牌導航 — Sticky Nav + 分類瀏覽
飲品列表 — 磨砂玻璃卡片 + 價格