@vaiyakavin123
构建可投产的高端 TVS Motor 数字展厅网站。这是真实产品，不是演示或线框。使用 React + TypeScript + Vite、Tailwind、Framer Motion、React Three Fiber（3D），以及 Node/Express 或 FastAPI 后端 + PostgreSQL。任何地方都不要占位文案或 lorem ipsum。 设计语言 - 电影感高端汽车风格。Hero 与展示区用深色主题（背景 #0A0A0A），工程、对比与预约区用浅色主题（#F4F4F2）。 - 导航与标题用紧缩大写无衬线（Barlow Condensed 或 DIN 风格），正文用干净无衬线。1px 细分割线、充足留白、锐利直角。 - 强调色：TVS 红，仅少量用于 CTA 与激活态。 - 动效克制：滚动显现、视差、平滑区块过渡。 全局导航 - 粘性：Hero 上透明，滚动后实色。 - 左：TVS Logo。中：BIKES、COMPARE、ACCESSORIES、SERVICE、EXPERIENCE（当前项下划线）。 - 右：Search、Location、Account、Cart。 - 移动端收起为全屏菜单。 区块 1：HERO - 全屏深色 Hero，低调棚拍摩托（大灯光晕、镜头光晕），标题 “THE NEXT RIDE IS HERE”。 - 左右箭头切换精选车型，含自动轮播进度条。 - CTA 按钮 “EXPLORE BIKES”。 - 预加载首图。使用视频或 WebP 回退。 区块 2：车型展示 - 深色区，车辆居中，脉冲热点圆点打开带细指引线的规格标注（发动机、刹车、悬挂）。 - 左侧规格芯片（cc、功率、扭矩、油耗）与描边按钮 “EXPLORE”。 区块 3：工程故事 - 浅色区，编号眉题（“03 — ENGINEERING”），大标题 “Engineering Story”，短段落。 - 大幅车辆渲染 + 4–5 个注释标注（Engine、Body、Chassis、Technical Info），各含细线、标题与两行说明。 - 标注随滚动依次动画进入。 区块 4：对比 - 最多并排对比 3 款车。卡片含图片、心愿单红心与版本选择器。 - 规格行：发动机、功率、扭矩、重量、油耗、价格。每行高亮更优值。 - 全部规格与价格从数据库读取，禁止写死。 区块 5：试骑预约 - 步进：选车 → 版本 → 城市 → 门店 → 日期 → 时间。 - 右侧粘性面板 “Customer Details”：姓名、电话（OTP 验证）、邮箱、备注。 - 按钮 “BOOK TEST RIDE”，含确认页、邮件/短信确认与日历（.ics）下载。 区块 6：体验、EMI 与服务 - EMI 计算器（首付、期数、利率）与按城市的落地价估算。 - 配件目录、保养预约、支持与 FAQ。 管理与数据 - 管理后台上传定价 Excel：解析校验、预览变更、再导入数据库。 - 车型、版本、颜色、配件、门店与预约的 CRUD。 - 3D 查看器（GLB），失败时回退 360° 图片序列，再回退静态图（WebGL 不可用时）。 移动端 - 移动优先响应式。底部粘性 “BOOK TEST RIDE” 栏、可滑动车型轮播、可折叠规格手风琴。 - 面包屑导航。 质量门槛 - Lighthouse 性能、无障碍、SEO 均 90+。图片与 3D 场景懒加载，含骨架屏与 WebGL 加载指示。 - WCAG AA：可见焦点、完整键盘导航、alt 文本、ARIA 标签、减少动效支持。 - 表单校验、错误态、空态、加载态。 - 清晰目录结构、可复用组件、.env 配置、含搭建步骤的 README，以及使用真实 TVS 车型的种子数据（Apache RTR、Ronin、Raider、Jupiter、iQube）。 输出 分阶段构建。每阶段后运行应用、修错并确认可用再进入下一阶段。顺序：设计系统与布局 → Hero → 展示 → 工程故事 → 对比 → 预约 → 管理后台 → 最终打磨。
