简约文艺风咖啡馆品牌展示官网产品系统Vibe Coding

线下实体咖啡馆宣传渠道单一，仅靠门店海报、朋友圈宣传，无法全方位展示店内环境、饮品餐品与门店活动。本项目面向中小型线下咖啡门店，搭建轻量化静态宣传官网，用于线上品牌形象展示、饮品菜单预览、门店环境实拍展示、线下活动预告，适配线上引流、私域推广、顾客线上提前了解门店场景，无需服务器本地即可打开浏览，帮助线下餐饮商家低成本搭建线上展示门面，解决饮品可视化宣传、门店特色对外推广、吸引到店消费的业务需求。

首页视觉轮播模块：门店环境、特色饮品大图自动轮播，搭配柔和渐变动画；
饮品菜单展示板块：区分咖啡、特调、甜点、简餐四大分类，卡片展示实拍图、价格、风味简介；
门店空间介绍板块：多图展示室内装修、打卡区域、休闲座位，突出文艺氛围感；
门店资讯活动区：上新饮品、节日优惠、线下手作活动图文展示；
联系导航模块：门店地址、营业时间、咨询留言表单、一键返回顶部；
全端响应式布局：电脑、手机、平板自动适配，移动端导航转为折叠菜单；
整体作为咖啡馆线上宣传门户，一站式完成产品展示、门店种草、客户咨询引流。

本人独立完成全站页面搭建、视觉样式设计、交互逻辑开发、多端兼容适配、图片资源压缩优化全部工作。项目以 HTML5 搭建页面骨架，Tailwind CSS 打造简约文艺柔和视觉风格，原生 JavaScript 实现轮播切换、菜单筛选、平滑滚动、留言表单交互；核心亮点是纯静态离线运行、轻量化无后端、低饱和度治愈系视觉统一；难点在于大量餐饮实拍图加载速度优化、移动端菜单布局不拥挤，通过图片懒加载、响应式网格布局、图片压缩等方案优化页面性能，拆分 JS 模块让代码更易维护。