176 lines
5.2 KiB
Markdown
176 lines
5.2 KiB
Markdown
# 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 |