This tool empowers you to crea…

# 咖啡烘焙工作室官网首页 — React 实现方案

一、设计规范

• 主色：深棕 #3E2723，辅以浅棕 #8D6E63、奶油白 #F5F1EB、焦糖点缀色 #C8956C
• 字体：中文思源宋体/系统衬线体做标题，正文无衬线
• 风格：简约质感、大图 + 留白，突出“手工烘焙”氛围

二、页面结构

1. 顶部导航

• Logo（工作室名）+ 锚点导航：产品 / 订阅套餐 / 预约试喝

2. Hero 区

• 全屏深棕背景图（可用 CSS 渐变替代），主标语 + CTA 按钮

3. 产品展示区

• 卡片网格布局，每张卡片：咖啡豆图片、名称、烘焙度、风味描述、“加入订阅”按钮
• 建议用 Array.map 渲染，数据抽成 products.js

4. 订阅套餐价格表

• 三档卡片（如：入门 / 进阶 / 全能），标注价格区间（如 ¥xx–xx/月，具体数字由你自己填）
• 中间档做高亮推荐样式（放大 + 描边强调）
• 每档列出：每月豆量、配送频率、专属权益
• 底部注明“价格以官网实时公示为准”

5. 预约试喝表单（受控组件）

• 字段：姓名、手机号（正则校验）、期望日期（date 类型）、偏好口味（select：果香/坚果/巧克力等）、人数
• 提交后前端校验，成功态显示确认提示
• 真实业务需接后端接口，表单仅做前端模拟

三、技术要点

• 组件拆分：Navbar / Hero / ProductGrid / PricingTable / BookingForm
• 样式方案：Tailwind CSS 或 CSS Modules，深色区与浅色区交替增强层次
• 图片用懒加载；价格、文案集中放配置文件便于维护

四、最小可运行骨架（节选）

```jsx

const products = [

{ name: "埃塞俄比亚 水洗", roast: "浅烘", flavor: "柑橘 茉莉花香" },

{ name: "巴西 日晒", roast: "中烘", flavor: "坚果 黑巧" },

];

export default function App() {

return (

<>

<ProductGrid items={products} />

{/* PricingTable、BookingForm 同理 */}

</>

);

}

```

需要完整代码（含全部组件与样式），告诉我你用 Tailwind 还是纯 CSS，我可以一次性给出可运行的完整版本。