turingflow-landing-001

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

技术栈

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

快速开始

pnpm install
pnpm run dev

目录结构

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)

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

特性 (Features)

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

关于 (About)

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

服务 (Services)

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

作品画廊 (Gallery)

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

客户评价 (Testimonials)

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

团队 (Team)

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

联系信息 (Contact)

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

常见修改任务

修改网站标题和描述

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

修改 Logo 和品牌名

编辑 src/components/navigation.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 账号
2. 创建 Email Service 和 Template
3. 编辑 src/components/contact.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)
• 响应式设计，适配移动端
• 点击导航链接平滑滚动到对应区块