# Pinnovate Cloud - 云加速服务平台

一个现代化的云加速服务网站，基于 Next.js + TypeScript + TailwindCSS 构建，提供完整的云加速服务展示和客户管理功能。

## ✨ 功能特性

### 🏠 页面功能
- **首页** - 产品介绍、核心优势、客户证言
- **产品特性** - 详细的产品功能展示和技术架构
- **定价方案** - 灵活的定价计划和优惠信息
- **客户案例** - 成功案例展示和客户证言
- **新闻资讯** - 技术更新、产品发布、行业动态
- **关于我们** - 公司介绍、团队展示、发展历程
- **联系我们** - 多种联系方式、在线表单、常见问题

### 🎨 设计特色
- **现代化 UI** - 采用渐变背景、卡片设计、悬停效果
- **响应式布局** - 完美适配桌面、平板、手机设备
- **交互体验** - 平滑动画、加载状态、用户反馈
- **品牌统一** - 一致的设计语言和色彩体系

### 🛠 技术栈
- **框架**: Next.js 15+ (React 19+)
- **语言**: TypeScript
- **样式**: TailwindCSS
- **图标**: Lucide React
- **内容管理**: Markdown + Gray Matter
- **表单处理**: Formspree

## 🚀 快速开始

### 环境要求
- Node.js 18+ 
- npm 或 yarn

### 安装依赖
```bash
npm install
```

### 本地开发
```bash
npm run dev
```
访问 http://localhost:3000

### 构建与部署
```bash
# 构建生产版本
npm run build

# 启动生产服务器
npm start
```

## 📁 项目结构
```
pinnovate-cloud/
├── components/              # 可复用组件
│   ├── Navbar.tsx          # 导航栏
│   ├── Hero.tsx            # 首页横幅
│   ├── Features.tsx        # 产品特性
│   ├── Pricing.tsx         # 定价方案
│   ├── CaseList.tsx        # 客户案例
│   ├── NewsList.tsx        # 新闻列表
│   ├── About.tsx           # 关于我们
│   ├── Contact.tsx         # 联系表单
│   ├── Cta.tsx             # 行动号召
│   ├── Footer.tsx          # 页脚
│   └── ...
├── pages/                  # 页面路由
│   ├── index.tsx           # 首页
│   ├── features.tsx        # 产品特性页
│   ├── pricing.tsx         # 定价方案页
│   ├── cases.tsx           # 客户案例页
│   ├── news.tsx            # 新闻资讯页
│   ├── about.tsx           # 关于我们页
│   ├── contact.tsx         # 联系我们页
│   ├── news/
│   │   └── [slug].tsx      # 新闻详情页
│   └── _app.tsx            # 应用入口
├── content/                # 内容管理
│   └── news/               # 新闻内容
│       ├── _example.md
│       ├── product-launch.md
│       └── ...
├── lib/                    # 工具库
│   └── content.ts          # 内容处理
├── public/                 # 静态资源
│   ├── logo.png
│   ├── hero-graphic.png
│   └── ...
├── styles/                 # 样式文件
│   └── globals.css
├── tailwind.config.js      # Tailwind 配置
├── next.config.js          # Next.js 配置
├── tsconfig.json           # TypeScript 配置
└── package.json            # 项目依赖
```

## 🎯 核心功能

### 内容管理
- **Markdown 支持** - 使用 Markdown 编写新闻内容
- **自动生成** - 静态页面自动生成和更新
- **SEO 优化** - 自动生成 sitemap 和 meta 标签

### 表单处理
- **联系表单** - 集成 Formspree 处理表单提交
- **表单验证** - 客户端和服务端验证
- **用户反馈** - 提交状态和成功提示

### 搜索功能
- **实时搜索** - 新闻内容实时搜索
- **分类筛选** - 按标签和分类筛选
- **排序功能** - 按日期和标题排序

## 🎨 自定义配置

### 品牌信息
在 `tailwind.config.js` 中修改品牌色彩：
```javascript
colors: {
  primary: '#333333',        // 主色调
  background: '#FFFFFF',     // 背景色
  accent: '#006AFF',         // 强调色
}
```

### 联系信息
在 `components/Contact.tsx` 和 `components/Footer.tsx` 中更新：
- WhatsApp: +1 917-402-9875
- 邮箱: support@pinnovatecloud.com
- Telegram: @pinnovatecloud

### 内容更新
- 新闻内容：在 `content/news/` 目录下添加 `.md` 文件
- 客户案例：在 `components/CaseList.tsx` 中更新案例数据
- 产品特性：在 `components/Features.tsx` 中修改特性列表

## 📱 响应式设计

网站采用移动优先的响应式设计：
- **手机端** (< 768px) - 单列布局，优化触摸操作
- **平板端** (768px - 1024px) - 双列布局，平衡内容展示
- **桌面端** (> 1024px) - 多列布局，充分利用屏幕空间

## 🚀 部署建议

### Vercel 部署
```bash
# 安装 Vercel CLI
npm i -g vercel

# 部署到 Vercel
vercel
```

### 其他平台
- **Netlify** - 支持静态站点部署
- **AWS S3 + CloudFront** - 企业级部署方案
- **Docker** - 容器化部署

## 📄 许可证

MIT License - 详见 [LICENSE](LICENSE) 文件

## 🤝 贡献

欢迎提交 Issue 和 Pull Request 来改进项目！

## 📞 联系我们

- **邮箱**: support@pinnovatecloud.com
- **WhatsApp**: +1 917-402-9875
- **Telegram**: @pinnovatecloud