first commit

2025-12-18 22:54:30 +08:00
commit cce2baf1d8
110 changed files with 17872 additions and 0 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,253 @@
+# 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`)
+- 响应式设计，适配移动端
+- 点击导航链接平滑滚动到对应区块