Pinnovate Cloud

Pinnovate Cloud 是一个基于 Next.js + TypeScript + TailwindCSS 搭建的云加速/网络优化服务站点，涵盖产品能力展示、定价、案例、新闻资讯与在线联系等模块，可静态导出或按 SSR 部署。

功能概览

• 页面：首页（Hero、优势、流程、CTA、客户推荐）、产品与服务、定价、成功案例、新闻资讯、关于我们、联系我们、登录占位页。
• 内容：content/news/*.md 存放新闻 Markdown，通过 lib/content.ts + gray-matter 解析 frontmatter，marked 渲染详情，构建时静态生成。
• 表单：components/Contact.tsx 集成 Formspree（https://formspree.io/f/xkgvgzal）提交，带表单校验、提交状态与联系方式卡片。
• 组件：导航、页脚、CTA、案例列表、新闻列表、核心优势等复用组件，Tailwind 响应式布局。
• 部署：支持静态导出、SSR、Docker 镜像，内置 Vercel/Netlify 配置、Nginx 示例与 PowerShell 一键部署脚本。

技术栈

• Next.js 15 / React 19、TypeScript
• TailwindCSS、Lucide React 图标
• gray-matter + marked 解析 Markdown 内容
• 部署与运维：Dockerfile、docker-compose.yml、nginx.conf、vercel.json、netlify.toml、deploy.ps1

目录结构

. ├─pages/ # 路由页（首页、features、pricing、cases、news、about、contact、login 等） │ └─news/[slug].tsx # 新闻详情的静态路由 ├─components/ # UI 组件（Navbar、Hero、Features、CaseList、NewsList、Contact 等） ├─content/news/ # 新闻 Markdown 数据源 ├─lib/content.ts # 内容读取与 frontmatter 解析 ├─public/ # 图片与静态资源 ├─styles/ # 全局样式 ├─deploy.ps1 # 多平台一键部署脚本 ├─Dockerfile / docker-compose.yml / nginx.conf ├─netlify.toml / vercel.json / DEPLOYMENT.md └─package.json # 脚本与依赖

快速开始

• 环境：Node.js 18+，npm
• 安装依赖： pm install
• 本地开发： pm run dev，访问 http://localhost:3000
• 生产构建： pm run build
• 生产启动： pm run start

内容维护（新闻）

• 在 content/news/ 下新增 .md 文件即可被列表与详情读取，示例 frontmatter： `md

---

title: 标题 date: 2025-09-15 summary: 一句话摘要 tags: [CDN, 性能, 安全]

正文内容，支持 Markdown 语法。 `

• 构建时会按照 date 降序生成新闻列表，[slug].tsx 用 marked 渲染正文。

常用脚本

pm run dev：本地开发

pm run build / pm run start：SSR 构建与生产运行

pm run build:static / pm run export：静态导出到 out/

pm run preview：构建后本地预览

pm run type-check、 pm run lint：类型与代码质量检查

pm run docker:build、 pm run docker:run：Docker 构建与运行

pm run deploy:vercel、 pm run deploy:netlify：云平台部署命令占位

部署指引

• 静态站点：运行 pm run build:static，将 out/ 部署到静态托管（Netlify、GitHub Pages 等）。
• SSR： pm run build && npm run start，或使用 Dockerfile/docker-compose.yml 与 ginx.conf。
• 一键脚本：PowerShell 执行 ./deploy.ps1 -Platform static|vercel|netlify|github|docker。
• Vercel/Netlify：可直接使用仓库内 ercel.json、 etlify.toml，或通过脚本触发。

配置提示

• 联系表单收件端点在 components/Contact.tsx 中可替换。
• Tailwind 主题色在 ailwind.config.js 中调整，静态资源放置于 public/。