栖云山居 - 高端民宿预约展示官网产品系统Vibe Coding

可接入AI;随着文旅消费升级，高端民宿市场快速增长，但大量中小民宿主缺乏专业的线上展示与预约渠道，普遍存在官网设计粗糙、手机端体验差、无法在线预约看房等痛点。本项目旨在为民宿/短租/乡村房产经营者提供一套开箱即用的高端展示官网，支持房源展示、筛选、在线预约等核心业务闭环，帮助业主低成本建立专业品牌形象、提升转化率。

可接入AI;项目共包含6个完整页面：1）首页：全屏Banner+滚动视差、五大配套优势、精选房源卡片、客户评价、地图位置；2）房源列表页：支持按价格区间、房型、配套设施多维度筛选，卡片悬浮动效；3）房源详情页：多图轮播、户型介绍、配套设施清单、入住须知、入住日历选择器（自动计算入住天数与总价）、预约表单；4）预约提交页：完整表单校验（手机号格式、必填项）+提交成功弹窗；5）关于我们：品牌故事、经营理念、环境实拍；6）联系我们：联系方式、静态地图、在线留言表单。全站响应式适配PC/平板/手机，移动端汉堡折叠菜单，导航栏滚动变色，区块滚动入场动画。

本人独立完成从设计到开发的全部工作。技术栈采用HTML5+原生JavaScript+Tailwind CSS（CDN引入）+Font Awesome，纯前端架构无需后端数据库，房源数据集中在js/main.js的PROPERTIES数组中统一管理。设计系统使用CSS变量定义大地色系配色（米白#F7F4EF+原木咖#8B6F47）与8px栅格间距。交互亮点：IntersectionObserver实现滚动淡入上浮动画、requestAnimationFrame优化首屏视差滚动、自定义轻量轮播组件（自动播放+手动切换+指示点）、原生表单校验与模态弹窗。难点在于保持6个页面视觉风格统一的同时实现流畅动效与多端响应式适配。