暖木咖啡 · Warmwood Coffee 官网产品系统Vibe Coding

面向连锁精品咖啡品牌的数字化门面与轻量级线上经营场景。随着精品咖啡从"功能性饮品"向"生活方式品牌"升级，线下门店之外的线上品牌展示、菜单浏览、到店自取点单、会员复购运营成为刚需。本项目还原一家拥有多家门店的精品咖啡品牌官网的真实经营需求：让顾客在线了解品牌与门店、浏览当季菜单并直接下单、了解会员权益以提升复购，同时承接合作加盟等商务咨询。典型用户为城市年轻白领、自由职业者与咖啡爱好者，强调"慢下来"的情绪价值与产地直采的品质背书。

1. 首页 Hero 区 全屏视差背景配品牌标语"温度刚刚好的那一杯"，含品牌口号、CTA 行动按钮（查看菜单 / 寻找门店）、核心数据统计（门店数、产地豆数、评分）与滚动指引。

2. 关于我们 品牌创立故事与价值观，配店内吧台实景图与"2014 起源"角标，陈列三大卖点（产地直采自家烘焙 / 手冲逐杯意式现萃 / 环保杯具社区友好）。

3. 菜单与在线点单（核心）

4 大分类标签筛选：意式咖啡 / 手冲单品 / 茶与特调 / 轻食甜点，共 14 款商品
数据驱动渲染卡片：emoji 图标、名称、产地标签、描述、会员价与划线原价
一键「+」加入购物车，购物车角标动画反馈
右侧滑出购物车抽屉：商品列表、数量增减、实时小计、空状态提示、到店自取免配送费提示
「去结算」弹窗模拟下单成功，生成取餐码并清空购物车
4. 会员优惠

三张优惠卡：新客立减 10 元、买 5 赠 1 咖啡卡（本月推荐）、每周三双倍木豆
三级会员体系：木豆会员（9.5 折）/ 银橡会员（9 折）/ 金檀会员（8.5 折 + 生日礼），含升级门槛说明
5. 门店分布 三家门店卡片，含实景照片、店名、地址、营业时间、电话、特色标签（到店自取 / 沿江落地窗 / 书屋主题夜间营业）。

6. 联系我们 联系信息（邮箱/电话/地址/营业时间）+ 社交媒体入口（微信/微博/小红书/抖音）+ 留言表单（称呼、邮箱、主题下拉、留言），含必填校验与提交成功提示。

7. 全局体验

滚动时导航栏毛玻璃变色、返回顶部按钮
移动端汉堡菜单 + 单列响应式布局
ESC 键 / 遮罩点击关闭购物车与弹窗
图片懒加载、平滑滚动锚点跳转

采用纯前端单页站点方案，无需后端服务与数据库即可独立运行。页面由语义化 HTML 构建骨架，外部 CSS 统一定义视觉系统，外部 JS 负责菜单数据驱动渲染、购物车状态管理与全部交互逻辑。菜单与购物车数据以 JS 数组形式内置，购物车使用内存状态管理（增删改查、小计计算），下单流程为前端模拟（生成取餐码弹窗）。表单提交采用前端校验 + 成功提示，不依赖真实接口。图片资源通过在线图像生成接口按需加载，首屏视差背景与各板块配图均在线获取。整体可直接双击 index.html 在浏览器打开，也可整体托管至任意静态服务器/CDN 部署上线。