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

安装依赖

npm install

本地开发

npm run dev

访问 http://localhost:3000

快速部署

使用 PowerShell 脚本（推荐）

# 静态网站部署
.\deploy.ps1 -Platform static

# Vercel 部署
.\deploy.ps1 -Platform vercel

# Netlify 部署
.\deploy.ps1 -Platform netlify

# GitHub Pages 部署
.\deploy.ps1 -Platform github

# Docker 部署
.\deploy.ps1 -Platform docker

手动部署

# 1. 生成静态文件
npm run build:static

# 2. 部署到 Vercel (推荐)
npx vercel

# 3. 或部署到 Netlify
npx netlify deploy --dir=out --prod

其他部署命令

# 类型检查
npm run type-check

# 代码检查
npm run lint

# 清理构建文件
npm run clean

# 预览生产版本
npm run preview

# Vercel 部署
npm run deploy:vercel

# Netlify 部署
npm run deploy:netlify

# Docker 构建
npm run docker:build

# Docker 运行
npm run docker:run

构建与部署

静态站点生成 (SSG)

# 生成静态文件
npm run build:static

# 或者使用传统方式
npm run export

静态文件将生成在 out/ 目录中，可以直接部署到任何静态托管服务。

服务器端渲染 (SSR)

# 构建生产版本
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            # 项目依赖
├── vercel.json             # Vercel 部署配置
├── netlify.toml            # Netlify 部署配置
├── Dockerfile              # Docker 容器配置
├── docker-compose.yml      # Docker Compose 配置
├── nginx.conf              # Nginx 服务器配置
└── .github/workflows/      # GitHub Actions 工作流
    └── deploy.yml

🎯 核心功能

内容管理

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

表单处理

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

搜索功能

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

🎨 自定义配置

品牌信息

在 tailwind.config.js 中修改品牌色彩：

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) - 多列布局，充分利用屏幕空间

🚀 部署建议

静态站点部署 (推荐)

1. 生成静态文件

# 生成静态文件到 out/ 目录
npm run build:static

2. 部署到各种平台

Vercel (推荐)

# 安装 Vercel CLI
npm i -g vercel

# 部署到 Vercel
vercel

# 或者直接连接 GitHub 仓库自动部署

Netlify

# 方法1: 拖拽 out/ 目录到 Netlify
# 方法2: 连接 GitHub 仓库，设置构建命令: npm run build:static
# 方法3: 使用 Netlify CLI
npm i -g netlify-cli
netlify deploy --dir=out

GitHub Pages

# 1. 将 out/ 目录内容推送到 gh-pages 分支
# 2. 在仓库设置中启用 GitHub Pages
# 3. 选择 gh-pages 分支作为源

AWS S3 + CloudFront

# 1. 将 out/ 目录内容上传到 S3 存储桶
# 2. 配置 CloudFront 分发
# 3. 设置自定义域名和 SSL 证书

Nginx 静态托管

# 1. 将 out/ 目录内容复制到 Nginx 网站根目录
# 2. 配置 Nginx 虚拟主机
# 3. 启用 gzip 压缩和缓存

服务器端部署

Docker 部署

# Dockerfile
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

# 构建和运行
docker build -t pinnovate-cloud .
docker run -p 3000:3000 pinnovate-cloud

PM2 部署

# 安装 PM2
npm i -g pm2

# 构建项目
npm run build

# 使用 PM2 启动
pm2 start npm --name "pinnovate-cloud" -- start

# 保存 PM2 配置
pm2 save
pm2 startup

部署配置

环境变量

创建 .env.production 文件：

NODE_ENV=production
NEXT_PUBLIC_SITE_URL=https://yourdomain.com
NEXT_PUBLIC_API_URL=https://api.yourdomain.com

性能优化

• 启用 CDN 加速
• 配置图片压缩
• 启用 Gzip 压缩
• 设置适当的缓存策略

部署配置文件

项目包含多种部署配置，可根据需要选择：

Vercel 部署

• vercel.json - Vercel 平台配置
• 支持自动部署和预览
• 包含安全头和缓存策略

Netlify 部署

• netlify.toml - Netlify 平台配置
• 支持表单处理和重定向
• 包含构建命令和环境变量

Docker 部署

• Dockerfile - 多阶段构建配置
• docker-compose.yml - 容器编排配置
• nginx.conf - Nginx 服务器配置
• 支持生产环境部署

GitHub Actions

• .github/workflows/deploy.yml - 自动部署工作流
• 支持 GitHub Pages 部署
• 包含构建和部署步骤

监控和维护

• 使用 Vercel Analytics 或 Google Analytics
• 配置错误监控 (Sentry)
• 设置性能监控
• 定期更新依赖包

📄 许可证

MIT License - 详见 LICENSE 文件

🤝 贡献

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

📞 联系我们

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