# turingflow-landing-003

圣诞节/节日主题单页落地页，适用于促销活动、节日营销、优惠券发放等场景。

## 技术栈

- React 19.0.0 (已锁定版本)
- Vite 7.2.4
- Tailwind CSS 4.1.18
- Font Awesome 4.7 (图标)
- Google Fonts (Varela, Muli, Great Vibes, Marmelad)

## 快速开始

```bash
pnpm install
pnpm run dev
```

开发服务器运行在 `http://localhost:3000`

## 目录结构

```text
turingflow-landing-003/
├── public/                     # 静态资源
│   ├── img/                    # 图片资源
│   │   ├── iconlogo.png        # 导航栏 Logo
│   │   ├── homeimg.png         # Header 区域主图 (手机展示图)
│   │   ├── pic1.jpg            # Header 背景图
│   │   ├── pic2.jpg            # Contact 区域背景图
│   │   ├── gift.png            # 优惠券礼物图标
│   │   ├── sep.png             # FAQ 分隔符图片
│   │   ├── button-available.png    # App Store 按钮
│   │   ├── button-googleplay.png   # Google Play 按钮
│   │   ├── particules_medium.png   # 雪花粒子 (中)
│   │   └── particules_small.png    # 雪花粒子 (小)
│   └── audio/
│       └── audio.mp3           # 背景音乐
├── src/
│   ├── App.jsx                 # 主应用 (包含所有页面组件)
│   ├── index.css               # 全局样式 + 响应式断点
│   └── main.jsx                # 入口文件
├── index.html                  # HTML 模板
├── vite.config.js              # Vite 配置
└── package.json                # 依赖配置
```

## 页面结构

单页应用，包含以下区域 (从上到下):

| 区域 | 组件名 | Section ID | 说明 |
|------|--------|------------|------|
| 雪花动画 | `Illustration` | - | 固定背景，雪花下落动画 |
| 导航栏 | `Navbar` | - | 固定顶部，滚动时变色 |
| 头部 | `Header` | `#page-top` | Hero 区域，主标题 + 下载按钮 + 社交图标 |
| 优惠券 | `CouponSection` | `#coupon` | 促销优惠券展示 |
| FAQ | `FAQSection` | `#faq` | 常见问题，两列布局 |
| 联系 | `ContactSection` | `#contact` | 联系表单 |
| 页脚 | `Footer` | - | 版权信息 + 链接 |

## 组件说明

### App.jsx 组件结构

```jsx
// 主应用入口
function App() {
  return (
    <>
      <Illustration />      // 雪花粒子动画背景
      <Navbar />            // 固定导航栏
      <Header />            // Hero 区域
      <CouponSection />     // 优惠券区域
      <FAQSection />        // FAQ 区域
      <ContactSection />    // 联系表单
      <Footer />            // 页脚
    </>
  )
}
```

### Navbar 导航栏

```jsx
// 导航菜单项 (位于 Navbar 组件内)
const menuItems = [
  { text: "Special Offer", href: "#coupon" },
  { text: "F.A.Q.", href: "#faq" },
  { text: "Contact", href: "#contact" },
  { text: "Download", href: "#", highlight: true }
]
```

**功能特性:**

- 滚动超过 50px 时添加 `affix` 类，背景变白
- 平滑滚动到对应区域
- 移动端显示汉堡菜单

### CouponSection 优惠券

```jsx
// 优惠券数据 (位于 CouponSection 组件内)
const couponData = {
  title: "December Only",
  subtitle: "Get your discount, available in stores this month only",
  discount: "50% Off All Products!",
  code: "HOLIDAY50",
  description: "Use this coupon code at checkout...",
  buttonText: "Shop Now"
}
```

### FAQSection 常见问题

```jsx
// FAQ 数据 (位于 FAQSection 组件内)
const faqs = [
  { question: "How soon do I get my item?", answer: "..." },
  { question: "Is there a free shipping?", answer: "..." },
  { question: "Can I get several discounts?", answer: "..." },
  { question: "Do you deliver it as a gift?", answer: "..." },
  { question: "What payment methods?", answer: "..." },
  { question: "I have a different question?", answer: "..." }
]
```

### ContactSection 联系表单

**表单字段:**

- `name` - 姓名 (必填)
- `email` - 邮箱 (必填，格式验证)
- `comment` - 留言内容 (必填)

**状态管理:**

- `formData` - 表单数据
- `errors` - 验证错误
- `showSuccess` - 提交成功提示

## 样式说明

### CSS 类命名约定

| 类名 | 用途 |
|------|------|
| `.navbar-default` | 导航栏基础样式 |
| `.navbar-default.affix` | 导航栏滚动后样式 (白色背景) |
| `.nav-link` | 导航链接 |
| `.nav-link.active` | 当前激活的导航链接 |
| `.menuhighlight` | 高亮按钮 (Download) |
| `.header-content-inner` | Header 内容容器 |
| `.couponsection` | 优惠券区域 |
| `.coupon` | 优惠券卡片 (虚线边框) |
| `.btn-buynow` | 购买按钮 |
| `.social a` | 社交图标 |

### 响应式断点

| 断点 | 尺寸 | 说明 |
|------|------|------|
| xs | < 480px | 手机竖屏 |
| sm | 480-575px | 手机横屏 |
| md | 576-767px | 平板竖屏 |
| lg | 768-991px | 平板横屏 |
| xl | 992-1199px | 小桌面 |
| xxl | >= 1200px | 大桌面 |

### 主题色

```css
/* 主要颜色 (在 index.css 中定义) */
--primary: #bb0000;        /* 品牌红色 */
--primary-hover: #aa0000;  /* 悬停红色 */
--accent: #fdcc52;         /* 强调黄色 */
--coupon-bg: #37488a;      /* 优惠券区域蓝色 */
--dark: #111;              /* 深色背景 */
```

## 常见修改任务

### 修改网站标题和 Logo

1. 编辑 `index.html` 中的 `<title>` 标签
2. 替换 `public/img/iconlogo.png` 图片
3. 修改 `src/App.jsx` 中 `Navbar` 组件的品牌名称:

```jsx
// src/App.jsx - Navbar 组件内
<a className="navbar-brand" ...>
  <img className="iconlogo" src="/img/iconlogo.png" width="50" alt="Logo" />
  ZU CHRISTMAS  {/* 修改这里 */}
</a>
```

### 修改导航菜单

编辑 `src/App.jsx` 中 `Navbar` 组件的菜单列表:

```jsx
// src/App.jsx - Navbar 组件内
<ul className="nav-links">
  <li><a href="#coupon">Special Offer</a></li>  {/* 修改文字和链接 */}
  <li><a href="#faq">F.A.Q.</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#" className="menuhighlight">Download</a></li>
</ul>
```

### 修改 Header 主标题

编辑 `src/App.jsx` 中 `Header` 组件:

```jsx
// src/App.jsx - Header 组件内
<h1>Merry Holidays</h1>           {/* 主标题 */}
<h4>Make your visitors smile...</h4>  {/* 副标题 */}
```

### 修改优惠券信息

编辑 `src/App.jsx` 中 `CouponSection` 组件:

```jsx
// src/App.jsx - CouponSection 组件内
<h2 className="title section-heading">December Only</h2>  {/* 标题 */}
<h3>50% Off All Products!</h3>   {/* 折扣信息 */}
<h4>Coupon Code: <span>HOLIDAY50</span></h4>  {/* 优惠码 */}
```

### 修改 FAQ 内容

编辑 `src/App.jsx` 中 `FAQSection` 组件的 `faqs` 数组:

```jsx
// src/App.jsx - FAQSection 组件内
const faqs = [
  { question: "问题1?", answer: "回答1..." },
  { question: "问题2?", answer: "回答2..." },
  // 添加或修改问题
]
```

### 修改页脚版权信息

编辑 `src/App.jsx` 中 `Footer` 组件:

```jsx
// src/App.jsx - Footer 组件内
<p>© 2025 Your Company Name. All Rights Reserved.</p>
```

### 修改背景图片

替换 `public/img/` 目录下的图片文件:

- `pic1.jpg` - Header 背景
- `pic2.jpg` - Contact 背景
- `homeimg.png` - 手机展示图

### 修改主题颜色

编辑 `src/index.css` 中的颜色值:

```css
/* 品牌红色 */
.navbar-brand { color: #bb0000; }
.btn-buynow { background: #900d0d; }

/* 优惠券区域蓝色 */
section.couponsection { background: #37488a; }

/* 强调黄色 */
.nav-link:hover { color: #fdcc52; }
```

### 禁用背景音乐

删除或注释 `src/App.jsx` 中 `Header` 组件的 audio 元素:

```jsx
// src/App.jsx - Header 组件内
{/* 删除或注释以下代码 */}
<div className="audioembed">
  <audio ref={audioRef} controls autoPlay src="/audio/audio.mp3" />
</div>
```

### 添加新的页面区域

在 `src/App.jsx` 中添加新组件:

```jsx
// 1. 创建新组件
function NewSection() {
  return (
    <section id="new-section">
      <div className="container">
        {/* 内容 */}
      </div>
    </section>
  )
}

// 2. 在 App 组件中使用
function App() {
  return (
    <>
      ...
      <NewSection />  {/* 添加到合适位置 */}
      ...
    </>
  )
}

// 3. 在 Navbar 中添加导航链接
<li><a href="#new-section">New Section</a></li>
```

## 图片资源

| 文件 | 尺寸建议 | 用途 |
|------|----------|------|
| iconlogo.png | 50x50px | 导航栏 Logo |
| homeimg.png | 400x800px | Header 手机展示图 |
| pic1.jpg | 1920x1080px | Header 背景 |
| pic2.jpg | 1920x1080px | Contact 背景 |
| gift.png | 100x100px | 优惠券图标 |
| button-*.png | 150x50px | 下载按钮 |

## 构建部署

```bash
# 构建生产版本
pnpm run build

# 预览生产版本
pnpm run preview
```

构建产物位于 `dist/` 目录。

## 服务器配置

```javascript
// vite.config.js
export default defineConfig({
  plugins: [react(), tailwindcss()],
  server: {
    port: 3000,
    allowedHosts: true,
    host: "0.0.0.0"
  },
})
```