Create distinctive, production…

# 瑜伽工作室首页 React + Tailwind 实现方案

一、技术准备

• 使用 Vite 创建项目：npm create vite@latest my-yoga -- --template react
• 安装 Tailwind：npm install -D tailwindcss postcss autoprefixer，按官方指南配置（Tailwind v4 可直接 @import "tailwindcss"）
• 准备素材：教练照片（可用占位图）、微信二维码图片

二、页面结构（单页分区）

1. 导航栏

• Logo + 锚点链接：首页 / 课程价格 / 教练团队 / 预约
• 移动端用汉堡菜单

2. Hero 首屏

• 大背景图 + 标语（如“遇见更好的自己”）
• CTA 按钮滚动至预约区

3. 课程价格表（数据驱动）

```jsx

const courses = [

{ name: "小班课", price: 128, unit: "元/节", desc: "4-8人小班，精细指导" },

{ name: "私教课", price: 380, unit: "元/节", desc: "一对一专属定制课程" },

];

```

• 用 map 渲染卡片，grid grid-cols-1 md:grid-cols-2 gap-6
• 价格用 text-4xl font-bold text-emerald-600 突出显示

4. 教练介绍

• 教练数据同样用数组驱动：姓名、教龄、擅长方向、资质证书
• 卡片含圆形头像、简介，hover:shadow-lg 增加交互感

5. 微信扫码预约区

• 展示二维码图片（<img src="/wechat-qr.png">）
• 提示文案：“微信扫码添加客服，即可预约课程”
• 可补充预约流程三步骤：扫码 → 沟通时段 → 到店上课

6. 页脚

• 地址、营业时间、联系电话、备案信息占位

三、设计建议

• 配色：鼠尾草绿/米白/暖灰，营造自然治愈感
• 字体：标题可用思源宋体，正文黑体
• 圆角：rounded-2xl + 留白，柔和呼吸感

四、注意事项

• 二维码图片请替换为你的真实微信号二维码
• 移动端务必测试（Tailwind 响应式断点 sm/md/lg）
• 图片建议压缩后使用，提升加载速度

如需完整代码文件，可告诉我，我会逐个组件写出。