# turingflow-landing-001

单页落地页模板，适用于企业、产品、服务推广展示。基于 Bootstrap 3 样式框架。

## 技术栈

- React 19 + Vite 6
- Bootstrap 3 (CSS 框架)
- Font Awesome 4 (图标库)
- Smooth Scroll (平滑滚动)
- EmailJS (联系表单邮件发送)
- jQuery + Bootstrap JS (导航栏折叠)

## 快速开始

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

## 目录结构

```text
src/
├── App.jsx              # 应用入口，组装所有页面区块
├── main.jsx             # React 挂载点
├── App.css              # 应用样式
├── index.css            # 全局样式
├── components/          # 页面区块组件
│   ├── navigation.jsx   # 导航栏 (固定顶部)
│   ├── header.jsx       # 首屏 Hero 区域
│   ├── features.jsx     # 特性列表
│   ├── about.jsx        # 关于我们
│   ├── services.jsx     # 服务介绍
│   ├── gallery.jsx      # 作品画廊 (Lightbox)
│   ├── testimonials.jsx # 客户评价
│   ├── Team.jsx         # 团队成员
│   ├── contact.jsx      # 联系表单 + 页脚
│   └── image.jsx        # 图片组件
├── data/                # 静态数据
│   └── data.json        # 所有内容数据
└── logo.svg             # Logo 文件
public/
├── css/                 # Bootstrap + 自定义样式
│   ├── bootstrap.css    # Bootstrap 3 核心样式
│   ├── style.css        # 自定义页面样式
│   └── nivo-lightbox/   # Lightbox 插件样式
├── fonts/               # 字体文件
│   └── font-awesome/    # Font Awesome 图标
├── img/                 # 图片资源
│   ├── portfolio/       # 作品集图片
│   ├── team/            # 团队成员照片
│   └── testimonials/    # 客户头像
└── js/                  # JavaScript 库
    ├── jquery.1.11.1.js # jQuery
    └── bootstrap.js     # Bootstrap JS
```

## 页面结构

单页应用，通过锚点导航滚动到各区块：

| 区块 ID | 组件 | 说明 |
|---------|------|------|
| `#page-top` | - | 页面顶部 |
| `#features` | Features | 4个特性卡片 |
| `#about` | About | 关于介绍 + 列表 |
| `#services` | Services | 6个服务卡片 |
| `#portfolio` | Gallery | 9张作品图 (Lightbox) |
| `#testimonials` | Testimonials | 客户评价轮播 |
| `#team` | Team | 4个团队成员 |
| `#contact` | Contact | 联系表单 + 社交链接 |

## 数据结构 (data/data.json)

### 首屏 Hero (Header)

```json
{
  "Header": {
    "title": "标题文字",
    "paragraph": "副标题描述"
  }
}
```

### 特性 (Features)

```json
{
  "Features": [
    {
      "icon": "fa fa-comments-o",
      "title": "特性标题",
      "text": "特性描述"
    }
  ]
}
```

### 关于 (About)

```json
{
  "About": {
    "paragraph": "关于介绍文字",
    "Why": ["列表项1", "列表项2"],
    "Why2": ["列表项3", "列表项4"]
  }
}
```

### 服务 (Services)

```json
{
  "Services": [
    {
      "icon": "fa fa-wordpress",
      "name": "服务名称",
      "text": "服务描述"
    }
  ]
}
```

### 作品画廊 (Gallery)

```json
{
  "Gallery": [
    {
      "title": "作品标题",
      "largeImage": "img/portfolio/01-large.jpg",
      "smallImage": "img/portfolio/01-small.jpg"
    }
  ]
}
```

### 客户评价 (Testimonials)

```json
{
  "Testimonials": [
    {
      "img": "img/testimonials/01.jpg",
      "text": "评价内容",
      "name": "客户姓名"
    }
  ]
}
```

### 团队 (Team)

```json
{
  "Team": [
    {
      "img": "img/team/01.jpg",
      "name": "成员姓名",
      "job": "职位"
    }
  ]
}
```

### 联系信息 (Contact)

```json
{
  "Contact": {
    "address": "地址",
    "phone": "电话",
    "email": "邮箱",
    "facebook": "Facebook链接",
    "twitter": "Twitter链接",
    "youtube": "YouTube链接"
  }
}
```

## 常见修改任务

### 修改网站标题和描述

编辑 `index.html` 中的 `<title>` 和 `<meta name="description">`

### 修改 Logo 和品牌名

编辑 `src/components/navigation.jsx` 中的：

```jsx
<a className="navbar-brand page-scroll" href="#page-top">
  React Landing Page  {/* 修改此处 */}
</a>
```

### 修改导航菜单

编辑 `src/components/navigation.jsx` 中的 `<ul className="nav navbar-nav navbar-right">` 列表

### 修改所有内容

编辑 `src/data/data.json`，按上述数据结构修改

### 配置联系表单

1. 注册 [EmailJS](https://www.emailjs.com/) 账号
2. 创建 Email Service 和 Template
3. 编辑 `src/components/contact.jsx`：

```jsx
emailjs.sendForm(
  "YOUR_SERVICE_ID",     // 替换为你的 Service ID
  "YOUR_TEMPLATE_ID",    // 替换为你的 Template ID
  e.target,
  "YOUR_PUBLIC_KEY"      // 替换为你的 Public Key
)
```

### 添加/替换图片

- 作品图片: `public/img/portfolio/` (需要 large 和 small 两个尺寸)
- 团队照片: `public/img/team/`
- 客户头像: `public/img/testimonials/`

### 修改样式

- Bootstrap 覆盖样式: `public/css/style.css`
- 颜色、字体、间距等自定义样式在此文件

## 图标使用

使用 Font Awesome 4 图标类名，格式: `fa fa-图标名`

常用图标：

- `fa fa-check` - 对勾
- `fa fa-star` - 星星
- `fa fa-phone` - 电话
- `fa fa-envelope` - 邮件
- `fa fa-map-marker` - 地点

完整图标列表: <https://fontawesome.com/v4/icons/>

## 布局说明

- 使用 Bootstrap 3 栅格系统 (`col-md-*`)
- 导航栏固定顶部 (`navbar-fixed-top`)
- 响应式设计，适配移动端
- 点击导航链接平滑滚动到对应区块