玄鹄科技 · 高端企业展示官网（响应式全站，可直接商用）产品系统

立项原因：中小企业在投标、招商、获客时普遍需要一家体面的官网，但市面上的两极分化严重——定制建站报价动辄上万、周期一个月起步，而 SaaS 模板又千篇一律、无法体现品牌差异，客户常常"要么用不起、要么看不上"。本项目立项的目标就是补齐中间地带：用一套工程化、设计水准在线的全站模板，把高品质企业官网的交付成本压到 2-3 天。业务背景：面向建站服务商、自由职业者与外包团队的接单交付场景——拿到模板后仅需替换品牌色、文案与图片即可成稿交付，也可作为客户二次定制开发（加后台、加功能）的底稿，显著缩短从签约到交付的周期，降低报价门槛。

全站共 4 个页面：首页、关于我们、产品服务、联系我们，覆盖企业官网完整信息架构。
首页：全屏 Hero 轮播（渐变溶解过渡、悬停暂停、键盘/触摸切换、背景视差滚动）、数据统计条（数字滚动动画）、公司简介（错位悬浮卡片）、六大服务卡片、深色优势板块、客户案例、客户评价、横向里程碑时间轴、合作伙伴墙、渐变 CTA 引导带、在线留言表单。
关于页：深色页头、杂志式公司导语、数据看板、企业文化三原则、竖向发展历程时间轴、核心团队卡片、合作企业。
产品页：六项服务图文左右交错排版、四步服务流程（标注每步交付物）、手风琴式 FAQ（点击互斥展开收起）、章节锚点快捷跳转。
联系页：四张联系方式卡片、地图占位（悬浮地址铭牌）+ 留言表单左右分区、三列来访指引。
全站通用交互：导航滚动毛玻璃过渡、区块滚动交错登场、图片懒加载+骨架屏+超时自动兜底、表单前端校验（姓名/手机号/留言必填，手机号 11 位正则）、成功 toast 提示、返回顶部、锚点平滑滚动；PC/平板/手机三档响应式，支持系统"减少动态效果"偏好降级，内置基础 SEO 与 OG 标签。

独立完成 UI 设计与前端实现。技术栈：HTML5 + CSS3 + 原生 JavaScript + TailwindCSS（CDN 版）+ Inter 字体，零动画库、零框架依赖，全站仅 4 个 HTML + 1 个 CSS + 1 个 JS。实现亮点：①设计令牌系统——全部颜色/圆角/阴影/时长收敛为 CSS 变量，并与 Tailwind config 双向联动，改一组变量即可全站换品牌色（含透明度变体）；②用 IntersectionObserver 实现滚动错峰登场与数字滚动，rAF 节流实现 Hero 视差；③三层柔和阴影 + 细线骨架 + 深浅区块交替，实现去模板化的编辑式排版；④图片三级兜底（远程生成图 → 备用图源 → 骨架占位），保证演示永不裂图。难点在于动效丰富度与加载速度的平衡：所有动画仅用 CSS Transition/Animation + 原生 API 实现，无第三方库，首屏轻量。