上线

README.md

@@ -1,42 +1,176 @@
-# AWS 云代理网站
+# Pinnovate Cloud - 云加速服务平台
 
-本项目基于 Next.js + TailwindCSS，提供 AWS 官方风格的云服务器代理网站模板。
+一个现代化的云加速服务网站，基于 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
 ```
 
-## 项目结构
+## 📁 项目结构
 ```
-aws-proxy-site/
-├── components/
-│   ├── Navbar.tsx
-│   ├── Hero.tsx
-│   ├── Features.tsx
-│   └── Footer.tsx
-├── pages/
-│   ├── index.tsx
-│   └── _app.tsx
-├── public/
-│   └── logo.png         # 请替换为 AWS 风格 Logo
-├── styles/
+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
-├── postcss.config.js
-├── next.config.js
-├── tsconfig.json
-├── package.json
+├── 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

build/build-manifest.json

@@ -0,0 +1,38 @@
+{
+  "polyfillFiles": [
+    "static/chunks/polyfills.js"
+  ],
+  "devFiles": [
+    "static/chunks/react-refresh.js"
+  ],
+  "ampDevFiles": [],
+  "lowPriorityFiles": [
+    "static/development/_buildManifest.js",
+    "static/development/_ssgManifest.js"
+  ],
+  "rootMainFiles": [],
+  "rootMainFilesTree": {},
+  "pages": {
+    "/": [
+      "static/chunks/webpack.js",
+      "static/chunks/main.js",
+      "static/chunks/pages/index.js"
+    ],
+    "/_app": [
+      "static/chunks/webpack.js",
+      "static/chunks/main.js",
+      "static/chunks/pages/_app.js"
+    ],
+    "/_error": [
+      "static/chunks/webpack.js",
+      "static/chunks/main.js",
+      "static/chunks/pages/_error.js"
+    ],
+    "/news": [
+      "static/chunks/webpack.js",
+      "static/chunks/main.js",
+      "static/chunks/pages/news.js"
+    ]
+  },
+  "ampFirstPages": []
+}

build/cache/.rscinfo

@@ -0,0 +1 @@
+{"encryption.key":"y2+Ayv+zY2OmriQM/MqHPYIZiLz48VRHox8V/XbrRSk=","encryption.expire_at":1758874756515}

build/cache/chrome-devtools-workspace-uuid

@@ -0,0 +1 @@
+557a90d3-5741-4229-8f97-aee2f62927aa

build/package.json

@@ -0,0 +1 @@
+{"type": "commonjs"}

build/prerender-manifest.json

@@ -0,0 +1,11 @@
+{
+  "version": 4,
+  "routes": {},
+  "dynamicRoutes": {},
+  "notFoundRoutes": [],
+  "preview": {
+    "previewModeId": "2f217fc743730155491d473472702b6e",
+    "previewModeSigningKey": "55eb5786f1180026097269917d0b711d02aa12326b3e47cdd584eb4176e6236e",
+    "previewModeEncryptionKey": "44a6b2bdd863fe88f78f12a4f9eb0e20878b4228d6abdb49d134e98259b3f938"
+  }
+}

build/react-loadable-manifest.json

@@ -0,0 +1,14 @@
+{
+  "node_modules\\next\\dist\\client\\index.js -> ../pages/_app": {
+    "id": "node_modules\\next\\dist\\client\\index.js -> ../pages/_app",
+    "files": [
+      "static/chunks/_pages-dir-browser_node_modules_next_dist_pages__app_js.js"
+    ]
+  },
+  "node_modules\\next\\dist\\client\\index.js -> ../pages/_error": {
+    "id": "node_modules\\next\\dist\\client\\index.js -> ../pages/_error",
+    "files": [
+      "static/chunks/_pages-dir-browser_node_modules_next_dist_pages__error_js.js"
+    ]
+  }
+}

build/routes-manifest.json

@@ -0,0 +1 @@
+{"version":3,"caseSensitive":false,"basePath":"","rewrites":{"beforeFiles":[],"afterFiles":[],"fallback":[]},"redirects":[{"source":"/:path+/","destination":"/:path+","permanent":true,"internal":true,"regex":"^(?:\\/((?:[^\\/]+?)(?:\\/(?:[^\\/]+?))*))\\/$"}],"headers":[]}

build/server/interception-route-rewrite-manifest.js

@@ -0,0 +1 @@
+self.__INTERCEPTION_ROUTE_REWRITE_MANIFEST="[]"

build/server/middleware-build-manifest.js

@@ -0,0 +1,40 @@
+globalThis.__BUILD_MANIFEST = {
+  "polyfillFiles": [
+    "static/chunks/polyfills.js"
+  ],
+  "devFiles": [
+    "static/chunks/react-refresh.js"
+  ],
+  "ampDevFiles": [],
+  "lowPriorityFiles": [],
+  "rootMainFiles": [],
+  "rootMainFilesTree": {},
+  "pages": {
+    "/": [
+      "static/chunks/webpack.js",
+      "static/chunks/main.js",
+      "static/chunks/pages/index.js"
+    ],
+    "/_app": [
+      "static/chunks/webpack.js",
+      "static/chunks/main.js",
+      "static/chunks/pages/_app.js"
+    ],
+    "/_error": [
+      "static/chunks/webpack.js",
+      "static/chunks/main.js",
+      "static/chunks/pages/_error.js"
+    ],
+    "/news": [
+      "static/chunks/webpack.js",
+      "static/chunks/main.js",
+      "static/chunks/pages/news.js"
+    ]
+  },
+  "ampFirstPages": []
+};
+globalThis.__BUILD_MANIFEST.lowPriorityFiles = [
+"/static/" + process.env.__NEXT_BUILD_ID + "/_buildManifest.js",
+,"/static/" + process.env.__NEXT_BUILD_ID + "/_ssgManifest.js",
+
+];

build/server/middleware-manifest.json

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "middleware": {},
+  "functions": {},
+  "sortedMiddleware": []
+}

build/server/middleware-react-loadable-manifest.js

@@ -0,0 +1 @@
+self.__REACT_LOADABLE_MANIFEST="{\"node_modules\\\\next\\\\dist\\\\client\\\\index.js -> ../pages/_app\":{\"id\":\"node_modules\\\\next\\\\dist\\\\client\\\\index.js -> ../pages/_app\",\"files\":[\"static/chunks/_pages-dir-browser_node_modules_next_dist_pages__app_js.js\"]},\"node_modules\\\\next\\\\dist\\\\client\\\\index.js -> ../pages/_error\":{\"id\":\"node_modules\\\\next\\\\dist\\\\client\\\\index.js -> ../pages/_error\",\"files\":[\"static/chunks/_pages-dir-browser_node_modules_next_dist_pages__error_js.js\"]}}"

build/server/next-font-manifest.js

@@ -0,0 +1 @@
+self.__NEXT_FONT_MANIFEST="{\"pages\":{},\"app\":{},\"appUsingSizeAdjust\":false,\"pagesUsingSizeAdjust\":false}"

build/server/next-font-manifest.json

@@ -0,0 +1 @@
+{"pages":{},"app":{},"appUsingSizeAdjust":false,"pagesUsingSizeAdjust":false}

build/server/pages-manifest.json

@@ -0,0 +1,7 @@
+{
+  "/_app": "pages/_app.js",
+  "/_error": "pages/_error.js",
+  "/_document": "pages/_document.js",
+  "/": "pages/index.js",
+  "/news": "pages/news.js"
+}

build/server/pages/_app.js

@@ -0,0 +1,57 @@
+/*
+ * ATTENTION: An "eval-source-map" devtool has been used.
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file with attached SourceMaps in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+(() => {
+var exports = {};
+exports.id = "pages/_app";
+exports.ids = ["pages/_app"];
+exports.modules = {
+
+/***/ "(pages-dir-node)/./pages/_app.tsx":
+/*!************************!*\
+  !*** ./pages/_app.tsx ***!
+  \************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-dev-runtime */ \"react/jsx-dev-runtime\");\n/* harmony import */ var react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _styles_globals_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../styles/globals.css */ \"(pages-dir-node)/./styles/globals.css\");\n/* harmony import */ var _styles_globals_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_styles_globals_css__WEBPACK_IMPORTED_MODULE_1__);\n\n\nfunction MyApp({ Component, pageProps }) {\n    return /*#__PURE__*/ (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxDEV)(Component, {\n        ...pageProps\n    }, void 0, false, {\n        fileName: \"D:\\\\dongyun-projects\\\\two\\\\pages\\\\_app.tsx\",\n        lineNumber: 5,\n        columnNumber: 10\n    }, this);\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MyApp);\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiKHBhZ2VzLWRpci1ub2RlKS8uL3BhZ2VzL19hcHAudHN4IiwibWFwcGluZ3MiOiI7Ozs7Ozs7OztBQUErQjtBQUcvQixTQUFTQSxNQUFNLEVBQUVDLFNBQVMsRUFBRUMsU0FBUyxFQUFZO0lBQy9DLHFCQUFPLDhEQUFDRDtRQUFXLEdBQUdDLFNBQVM7Ozs7OztBQUNqQztBQUVBLGlFQUFlRixLQUFLQSxFQUFDIiwic291cmNlcyI6WyJEOlxcZG9uZ3l1bi1wcm9qZWN0c1xcdHdvXFxwYWdlc1xcX2FwcC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICcuLi9zdHlsZXMvZ2xvYmFscy5jc3MnO1xyXG5pbXBvcnQgdHlwZSB7IEFwcFByb3BzIH0gZnJvbSAnbmV4dC9hcHAnO1xyXG5cclxuZnVuY3Rpb24gTXlBcHAoeyBDb21wb25lbnQsIHBhZ2VQcm9wcyB9OiBBcHBQcm9wcykge1xyXG4gIHJldHVybiA8Q29tcG9uZW50IHsuLi5wYWdlUHJvcHN9IC8+O1xyXG59XHJcblxyXG5leHBvcnQgZGVmYXVsdCBNeUFwcDsiXSwibmFtZXMiOlsiTXlBcHAiLCJDb21wb25lbnQiLCJwYWdlUHJvcHMiXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///(pages-dir-node)/./pages/_app.tsx\n");
+
+/***/ }),
+
+/***/ "(pages-dir-node)/./styles/globals.css":
+/*!****************************!*\
+  !*** ./styles/globals.css ***!
+  \****************************/
+/***/ (() => {
+
+
+
+/***/ }),
+
+/***/ "react/jsx-dev-runtime":
+/*!****************************************!*\
+  !*** external "react/jsx-dev-runtime" ***!
+  \****************************************/
+/***/ ((module) => {
+
+"use strict";
+module.exports = require("react/jsx-dev-runtime");
+
+/***/ })
+
+};
+;
+
+// load runtime
+var __webpack_require__ = require("../webpack-runtime.js");
+__webpack_require__.C(exports);
+var __webpack_exec__ = (moduleId) => (__webpack_require__(__webpack_require__.s = moduleId))
+var __webpack_exports__ = (__webpack_exec__("(pages-dir-node)/./pages/_app.tsx"));
+module.exports = __webpack_exports__;
+
+})();

build/server/pages/_document.js

@@ -0,0 +1,66 @@
+"use strict";
+/*
+ * ATTENTION: An "eval-source-map" devtool has been used.
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file with attached SourceMaps in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+(() => {
+var exports = {};
+exports.id = "pages/_document";
+exports.ids = ["pages/_document"];
+exports.modules = {
+
+/***/ "next/dist/compiled/next-server/pages.runtime.dev.js":
+/*!**********************************************************************!*\
+  !*** external "next/dist/compiled/next-server/pages.runtime.dev.js" ***!
+  \**********************************************************************/
+/***/ ((module) => {
+
+module.exports = require("next/dist/compiled/next-server/pages.runtime.dev.js");
+
+/***/ }),
+
+/***/ "path":
+/*!***********************!*\
+  !*** external "path" ***!
+  \***********************/
+/***/ ((module) => {
+
+module.exports = require("path");
+
+/***/ }),
+
+/***/ "react":
+/*!************************!*\
+  !*** external "react" ***!
+  \************************/
+/***/ ((module) => {
+
+module.exports = require("react");
+
+/***/ }),
+
+/***/ "react/jsx-runtime":
+/*!************************************!*\
+  !*** external "react/jsx-runtime" ***!
+  \************************************/
+/***/ ((module) => {
+
+module.exports = require("react/jsx-runtime");
+
+/***/ })
+
+};
+;
+
+// load runtime
+var __webpack_require__ = require("../webpack-runtime.js");
+__webpack_require__.C(exports);
+var __webpack_exec__ = (moduleId) => (__webpack_require__(__webpack_require__.s = moduleId))
+var __webpack_exports__ = __webpack_require__.X(0, ["vendor-chunks/next","vendor-chunks/@swc"], () => (__webpack_exec__("(pages-dir-node)/./node_modules/next/dist/pages/_document.js")));
+module.exports = __webpack_exports__;
+
+})();

build/server/vendor-chunks/@swc.js

@@ -0,0 +1,35 @@
+"use strict";
+/*
+ * ATTENTION: An "eval-source-map" devtool has been used.
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file with attached SourceMaps in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+exports.id = "vendor-chunks/@swc";
+exports.ids = ["vendor-chunks/@swc"];
+exports.modules = {
+
+/***/ "(pages-dir-node)/./node_modules/@swc/helpers/cjs/_interop_require_default.cjs":
+/*!********************************************************************!*\
+  !*** ./node_modules/@swc/helpers/cjs/_interop_require_default.cjs ***!
+  \********************************************************************/
+/***/ ((__unused_webpack_module, exports) => {
+
+eval("\n\nfunction _interop_require_default(obj) {\n    return obj && obj.__esModule ? obj : { default: obj };\n}\nexports._ = _interop_require_default;\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiKHBhZ2VzLWRpci1ub2RlKS8uL25vZGVfbW9kdWxlcy9Ac3djL2hlbHBlcnMvY2pzL19pbnRlcm9wX3JlcXVpcmVfZGVmYXVsdC5janMiLCJtYXBwaW5ncyI6IkFBQWE7O0FBRWI7QUFDQSwyQ0FBMkM7QUFDM0M7QUFDQSxTQUFTIiwic291cmNlcyI6WyJEOlxcZG9uZ3l1bi1wcm9qZWN0c1xcdHdvXFxub2RlX21vZHVsZXNcXEBzd2NcXGhlbHBlcnNcXGNqc1xcX2ludGVyb3BfcmVxdWlyZV9kZWZhdWx0LmNqcyJdLCJzb3VyY2VzQ29udGVudCI6WyJcInVzZSBzdHJpY3RcIjtcblxuZnVuY3Rpb24gX2ludGVyb3BfcmVxdWlyZV9kZWZhdWx0KG9iaikge1xuICAgIHJldHVybiBvYmogJiYgb2JqLl9fZXNNb2R1bGUgPyBvYmogOiB7IGRlZmF1bHQ6IG9iaiB9O1xufVxuZXhwb3J0cy5fID0gX2ludGVyb3BfcmVxdWlyZV9kZWZhdWx0O1xuIl0sIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6WzBdLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///(pages-dir-node)/./node_modules/@swc/helpers/cjs/_interop_require_default.cjs\n");
+
+/***/ }),
+
+/***/ "(pages-dir-node)/./node_modules/@swc/helpers/cjs/_interop_require_wildcard.cjs":
+/*!*********************************************************************!*\
+  !*** ./node_modules/@swc/helpers/cjs/_interop_require_wildcard.cjs ***!
+  \*********************************************************************/
+/***/ ((__unused_webpack_module, exports) => {
+
+eval("\n\nfunction _getRequireWildcardCache(nodeInterop) {\n    if (typeof WeakMap !== \"function\") return null;\n\n    var cacheBabelInterop = new WeakMap();\n    var cacheNodeInterop = new WeakMap();\n\n    return (_getRequireWildcardCache = function(nodeInterop) {\n        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;\n    })(nodeInterop);\n}\nfunction _interop_require_wildcard(obj, nodeInterop) {\n    if (!nodeInterop && obj && obj.__esModule) return obj;\n    if (obj === null || typeof obj !== \"object\" && typeof obj !== \"function\") return { default: obj };\n\n    var cache = _getRequireWildcardCache(nodeInterop);\n\n    if (cache && cache.has(obj)) return cache.get(obj);\n\n    var newObj = { __proto__: null };\n    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;\n\n    for (var key in obj) {\n        if (key !== \"default\" && Object.prototype.hasOwnProperty.call(obj, key)) {\n            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;\n            if (desc && (desc.get || desc.set)) Object.defineProperty(newObj, key, desc);\n            else newObj[key] = obj[key];\n        }\n    }\n\n    newObj.default = obj;\n\n    if (cache) cache.set(obj, newObj);\n\n    return newObj;\n}\nexports._ = _interop_require_wildcard;\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiKHBhZ2VzLWRpci1ub2RlKS8uL25vZGVfbW9kdWxlcy9Ac3djL2hlbHBlcnMvY2pzL19pbnRlcm9wX3JlcXVpcmVfd2lsZGNhcmQuY2pzIiwibWFwcGluZ3MiOiJBQUFhOztBQUViO0FBQ0E7O0FBRUE7QUFDQTs7QUFFQTtBQUNBO0FBQ0EsS0FBSztBQUNMO0FBQ0E7QUFDQTtBQUNBLHVGQUF1Rjs7QUFFdkY7O0FBRUE7O0FBRUEsbUJBQW1CO0FBQ25COztBQUVBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQUVBOztBQUVBOztBQUVBO0FBQ0E7QUFDQSxTQUFTIiwic291cmNlcyI6WyJEOlxcZG9uZ3l1bi1wcm9qZWN0c1xcdHdvXFxub2RlX21vZHVsZXNcXEBzd2NcXGhlbHBlcnNcXGNqc1xcX2ludGVyb3BfcmVxdWlyZV93aWxkY2FyZC5janMiXSwic291cmNlc0NvbnRlbnQiOlsiXCJ1c2Ugc3RyaWN0XCI7XG5cbmZ1bmN0aW9uIF9nZXRSZXF1aXJlV2lsZGNhcmRDYWNoZShub2RlSW50ZXJvcCkge1xuICAgIGlmICh0eXBlb2YgV2Vha01hcCAhPT0gXCJmdW5jdGlvblwiKSByZXR1cm4gbnVsbDtcblxuICAgIHZhciBjYWNoZUJhYmVsSW50ZXJvcCA9IG5ldyBXZWFrTWFwKCk7XG4gICAgdmFyIGNhY2hlTm9kZUludGVyb3AgPSBuZXcgV2Vha01hcCgpO1xuXG4gICAgcmV0dXJuIChfZ2V0UmVxdWlyZVdpbGRjYXJkQ2FjaGUgPSBmdW5jdGlvbihub2RlSW50ZXJvcCkge1xuICAgICAgICByZXR1cm4gbm9kZUludGVyb3AgPyBjYWNoZU5vZGVJbnRlcm9wIDogY2FjaGVCYWJlbEludGVyb3A7XG4gICAgfSkobm9kZUludGVyb3ApO1xufVxuZnVuY3Rpb24gX2ludGVyb3BfcmVxdWlyZV93aWxkY2FyZChvYmosIG5vZGVJbnRlcm9wKSB7XG4gICAgaWYgKCFub2RlSW50ZXJvcCAmJiBvYmogJiYgb2JqLl9fZXNNb2R1bGUpIHJldHVybiBvYmo7XG4gICAgaWYgKG9iaiA9PT0gbnVsbCB8fCB0eXBlb2Ygb2JqICE9PSBcIm9iamVjdFwiICYmIHR5cGVvZiBvYmogIT09IFwiZnVuY3Rpb25cIikgcmV0dXJuIHsgZGVmYXVsdDogb2JqIH07XG5cbiAgICB2YXIgY2FjaGUgPSBfZ2V0UmVxdWlyZVdpbGRjYXJkQ2FjaGUobm9kZUludGVyb3ApO1xuXG4gICAgaWYgKGNhY2hlICYmIGNhY2hlLmhhcyhvYmopKSByZXR1cm4gY2FjaGUuZ2V0KG9iaik7XG5cbiAgICB2YXIgbmV3T2JqID0geyBfX3Byb3RvX186IG51bGwgfTtcbiAgICB2YXIgaGFzUHJvcGVydHlEZXNjcmlwdG9yID0gT2JqZWN0LmRlZmluZVByb3BlcnR5ICYmIE9iamVjdC5nZXRPd25Qcm9wZXJ0eURlc2NyaXB0b3I7XG5cbiAgICBmb3IgKHZhciBrZXkgaW4gb2JqKSB7XG4gICAgICAgIGlmIChrZXkgIT09IFwiZGVmYXVsdFwiICYmIE9iamVjdC5wcm90b3R5cGUuaGFzT3duUHJvcGVydHkuY2FsbChvYmosIGtleSkpIHtcbiAgICAgICAgICAgIHZhciBkZXNjID0gaGFzUHJvcGVydHlEZXNjcmlwdG9yID8gT2JqZWN0LmdldE93blByb3BlcnR5RGVzY3JpcHRvcihvYmosIGtleSkgOiBudWxsO1xuICAgICAgICAgICAgaWYgKGRlc2MgJiYgKGRlc2MuZ2V0IHx8IGRlc2Muc2V0KSkgT2JqZWN0LmRlZmluZVByb3BlcnR5KG5ld09iaiwga2V5LCBkZXNjKTtcbiAgICAgICAgICAgIGVsc2UgbmV3T2JqW2tleV0gPSBvYmpba2V5XTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIG5ld09iai5kZWZhdWx0ID0gb2JqO1xuXG4gICAgaWYgKGNhY2hlKSBjYWNoZS5zZXQob2JqLCBuZXdPYmopO1xuXG4gICAgcmV0dXJuIG5ld09iajtcbn1cbmV4cG9ydHMuXyA9IF9pbnRlcm9wX3JlcXVpcmVfd2lsZGNhcmQ7XG4iXSwibmFtZXMiOltdLCJpZ25vcmVMaXN0IjpbMF0sInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///(pages-dir-node)/./node_modules/@swc/helpers/cjs/_interop_require_wildcard.cjs\n");
+
+/***/ })
+
+};
+;

build/static/development/_buildManifest.js

@@ -0,0 +1 @@
+self.__BUILD_MANIFEST = (function(a){return {__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},__routerFilterStatic:a,__routerFilterDynamic:a,"/":["static\u002Fchunks\u002Fpages\u002Findex.js"],"/_error":["static\u002Fchunks\u002Fpages\u002F_error.js"],"/news":["static\u002Fchunks\u002Fpages\u002Fnews.js"],sortedPages:["\u002F","\u002F_app","\u002F_error","\u002Fnews"]}}(void 0));self.__BUILD_MANIFEST_CB && self.__BUILD_MANIFEST_CB()

build/static/development/_ssgManifest.js

@@ -0,0 +1 @@
+self.__SSG_MANIFEST=new Set;self.__SSG_MANIFEST_CB&&self.__SSG_MANIFEST_CB()

build/static/webpack/1c5c6376a4344887.webpack.hot-update.json

@@ -0,0 +1 @@
+{"c":["pages/_app","webpack"],"r":[],"m":[]}

build/static/webpack/51350c0cee96bd54.webpack.hot-update.json

@@ -0,0 +1 @@
+{"c":["pages/_app","pages/index","webpack"],"r":[],"m":[]}

build/static/webpack/61c96229ecd10e60.webpack.hot-update.json

@@ -0,0 +1 @@
+{"c":["pages/news","webpack"],"r":[],"m":[]}

build/static/webpack/633457081244afec._.hot-update.json

@@ -0,0 +1 @@
+{"c":[],"r":[],"m":[]}

build/static/webpack/e015d916aaf837c8.webpack.hot-update.json

@@ -0,0 +1 @@
+{"c":["webpack"],"r":[],"m":[]}

build/static/webpack/webpack.1c5c6376a4344887.hot-update.js

@@ -0,0 +1,12 @@
+"use strict";
+self["webpackHotUpdate_N_E"]("webpack",{},
+/******/ function(__webpack_require__) { // webpackRuntimeModules
+/******/ /* webpack/runtime/getFullHash */
+/******/ (() => {
+/******/ 	__webpack_require__.h = () => ("61c96229ecd10e60")
+/******/ })();
+/******/ 
+/******/ }
+)
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJpZ25vcmVMaXN0IjpbMF0sIm1hcHBpbmdzIjoiQUFBQSIsInNvdXJjZXMiOlsid2VicGFjay1pbnRlcm5hbDovL25leHRqcy93ZWJwYWNrLmpzIl0sInNvdXJjZXNDb250ZW50IjpbIi8vIFRoaXMgc291cmNlIHdhcyBnZW5lcmF0ZWQgYnkgTmV4dC5qcyBiYXNlZCBvZmYgb2YgdGhlIGdlbmVyYXRlZCBXZWJwYWNrIHJ1bnRpbWUuXG4vLyBUaGUgbWFwcGluZ3MgYXJlIGluY29ycmVjdC5cbi8vIFRvIGdldCB0aGUgY29ycmVjdCBsaW5lL2NvbHVtbiBtYXBwaW5ncywgdHVybiBvZmYgc291cmNlbWFwcyBpbiB5b3VyIGRlYnVnZ2VyLlxuXG5zZWxmW1wid2VicGFja0hvdFVwZGF0ZV9OX0VcIl0oXCJ3ZWJwYWNrXCIse30sXG4vKioqKioqLyBmdW5jdGlvbihfX3dlYnBhY2tfcmVxdWlyZV9fKSB7IC8vIHdlYnBhY2tSdW50aW1lTW9kdWxlc1xuLyoqKioqKi8gLyogd2VicGFjay9ydW50aW1lL2dldEZ1bGxIYXNoICovXG4vKioqKioqLyAoKCkgPT4ge1xuLyoqKioqKi8gXHRfX3dlYnBhY2tfcmVxdWlyZV9fLmggPSAoKSA9PiAoXCI2MWM5NjIyOWVjZDEwZTYwXCIpXG4vKioqKioqLyB9KSgpO1xuLyoqKioqKi8gXG4vKioqKioqLyB9XG4pIl19
+;

build/static/webpack/webpack.51350c0cee96bd54.hot-update.js

@@ -0,0 +1,12 @@
+"use strict";
+self["webpackHotUpdate_N_E"]("webpack",{},
+/******/ function(__webpack_require__) { // webpackRuntimeModules
+/******/ /* webpack/runtime/getFullHash */
+/******/ (() => {
+/******/ 	__webpack_require__.h = () => ("76beab5924bf7329")
+/******/ })();
+/******/ 
+/******/ }
+)
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJpZ25vcmVMaXN0IjpbMF0sIm1hcHBpbmdzIjoiQUFBQSIsInNvdXJjZXMiOlsid2VicGFjay1pbnRlcm5hbDovL25leHRqcy93ZWJwYWNrLmpzIl0sInNvdXJjZXNDb250ZW50IjpbIi8vIFRoaXMgc291cmNlIHdhcyBnZW5lcmF0ZWQgYnkgTmV4dC5qcyBiYXNlZCBvZmYgb2YgdGhlIGdlbmVyYXRlZCBXZWJwYWNrIHJ1bnRpbWUuXG4vLyBUaGUgbWFwcGluZ3MgYXJlIGluY29ycmVjdC5cbi8vIFRvIGdldCB0aGUgY29ycmVjdCBsaW5lL2NvbHVtbiBtYXBwaW5ncywgdHVybiBvZmYgc291cmNlbWFwcyBpbiB5b3VyIGRlYnVnZ2VyLlxuXG5zZWxmW1wid2VicGFja0hvdFVwZGF0ZV9OX0VcIl0oXCJ3ZWJwYWNrXCIse30sXG4vKioqKioqLyBmdW5jdGlvbihfX3dlYnBhY2tfcmVxdWlyZV9fKSB7IC8vIHdlYnBhY2tSdW50aW1lTW9kdWxlc1xuLyoqKioqKi8gLyogd2VicGFjay9ydW50aW1lL2dldEZ1bGxIYXNoICovXG4vKioqKioqLyAoKCkgPT4ge1xuLyoqKioqKi8gXHRfX3dlYnBhY2tfcmVxdWlyZV9fLmggPSAoKSA9PiAoXCI3NmJlYWI1OTI0YmY3MzI5XCIpXG4vKioqKioqLyB9KSgpO1xuLyoqKioqKi8gXG4vKioqKioqLyB9XG4pIl19
+;

build/static/webpack/webpack.61c96229ecd10e60.hot-update.js

@@ -0,0 +1,12 @@
+"use strict";
+self["webpackHotUpdate_N_E"]("webpack",{},
+/******/ function(__webpack_require__) { // webpackRuntimeModules
+/******/ /* webpack/runtime/getFullHash */
+/******/ (() => {
+/******/ 	__webpack_require__.h = () => ("51350c0cee96bd54")
+/******/ })();
+/******/ 
+/******/ }
+)
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJpZ25vcmVMaXN0IjpbMF0sIm1hcHBpbmdzIjoiQUFBQSIsInNvdXJjZXMiOlsid2VicGFjay1pbnRlcm5hbDovL25leHRqcy93ZWJwYWNrLmpzIl0sInNvdXJjZXNDb250ZW50IjpbIi8vIFRoaXMgc291cmNlIHdhcyBnZW5lcmF0ZWQgYnkgTmV4dC5qcyBiYXNlZCBvZmYgb2YgdGhlIGdlbmVyYXRlZCBXZWJwYWNrIHJ1bnRpbWUuXG4vLyBUaGUgbWFwcGluZ3MgYXJlIGluY29ycmVjdC5cbi8vIFRvIGdldCB0aGUgY29ycmVjdCBsaW5lL2NvbHVtbiBtYXBwaW5ncywgdHVybiBvZmYgc291cmNlbWFwcyBpbiB5b3VyIGRlYnVnZ2VyLlxuXG5zZWxmW1wid2VicGFja0hvdFVwZGF0ZV9OX0VcIl0oXCJ3ZWJwYWNrXCIse30sXG4vKioqKioqLyBmdW5jdGlvbihfX3dlYnBhY2tfcmVxdWlyZV9fKSB7IC8vIHdlYnBhY2tSdW50aW1lTW9kdWxlc1xuLyoqKioqKi8gLyogd2VicGFjay9ydW50aW1lL2dldEZ1bGxIYXNoICovXG4vKioqKioqLyAoKCkgPT4ge1xuLyoqKioqKi8gXHRfX3dlYnBhY2tfcmVxdWlyZV9fLmggPSAoKSA9PiAoXCI1MTM1MGMwY2VlOTZiZDU0XCIpXG4vKioqKioqLyB9KSgpO1xuLyoqKioqKi8gXG4vKioqKioqLyB9XG4pIl19
+;

build/static/webpack/webpack.e015d916aaf837c8.hot-update.js

@@ -0,0 +1,12 @@
+"use strict";
+self["webpackHotUpdate_N_E"]("webpack",{},
+/******/ function(__webpack_require__) { // webpackRuntimeModules
+/******/ /* webpack/runtime/getFullHash */
+/******/ (() => {
+/******/ 	__webpack_require__.h = () => ("1c5c6376a4344887")
+/******/ })();
+/******/ 
+/******/ }
+)
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJpZ25vcmVMaXN0IjpbMF0sIm1hcHBpbmdzIjoiQUFBQSIsInNvdXJjZXMiOlsid2VicGFjay1pbnRlcm5hbDovL25leHRqcy93ZWJwYWNrLmpzIl0sInNvdXJjZXNDb250ZW50IjpbIi8vIFRoaXMgc291cmNlIHdhcyBnZW5lcmF0ZWQgYnkgTmV4dC5qcyBiYXNlZCBvZmYgb2YgdGhlIGdlbmVyYXRlZCBXZWJwYWNrIHJ1bnRpbWUuXG4vLyBUaGUgbWFwcGluZ3MgYXJlIGluY29ycmVjdC5cbi8vIFRvIGdldCB0aGUgY29ycmVjdCBsaW5lL2NvbHVtbiBtYXBwaW5ncywgdHVybiBvZmYgc291cmNlbWFwcyBpbiB5b3VyIGRlYnVnZ2VyLlxuXG5zZWxmW1wid2VicGFja0hvdFVwZGF0ZV9OX0VcIl0oXCJ3ZWJwYWNrXCIse30sXG4vKioqKioqLyBmdW5jdGlvbihfX3dlYnBhY2tfcmVxdWlyZV9fKSB7IC8vIHdlYnBhY2tSdW50aW1lTW9kdWxlc1xuLyoqKioqKi8gLyogd2VicGFjay9ydW50aW1lL2dldEZ1bGxIYXNoICovXG4vKioqKioqLyAoKCkgPT4ge1xuLyoqKioqKi8gXHRfX3dlYnBhY2tfcmVxdWlyZV9fLmggPSAoKSA9PiAoXCIxYzVjNjM3NmE0MzQ0ODg3XCIpXG4vKioqKioqLyB9KSgpO1xuLyoqKioqKi8gXG4vKioqKioqLyB9XG4pIl19
+;

components/About.tsx

@@ -1,26 +1,150 @@
+import { Users, Award, Globe, Shield, Zap, Target } from 'lucide-react';
+
 export default function About() {
   return (
-    <section className="px-6 py-section bg-background">
-      <div className="max-w-screen-md mx-auto space-y-section">
-        <h2 className="text-3xl font-semibold text-center">关于我们</h2>
-        <p className="text-base leading-relaxed">
-          CloudProxy 致力于为全球用户提供高性能、可靠、安全的云加速服务。我们的核心团队来自 AWS、阿里云等一线云计算厂商，拥有多年的网络优化和运维经验。
-        </p>
-        <p className="text-base leading-relaxed">
-          自成立以来，我们已为数百家企业提供定制化加速解决方案，覆盖电商、游戏、金融、教育等多个行业，帮助客户显著提升网站访问速度和稳定性。
-        </p>
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
-          <div>
-            <h3 className="text-2xl font-medium">使命</h3>
-            <p className="mt-2 text-sm text-gray-600">让全球互联网无障碍连接，推动业务高速增长。</p>
+    <section className="px-6 py-16 bg-white">
+      <div className="max-w-screen-xl mx-auto">
+        {/* 公司介绍 */}
+        <div className="text-center mb-16">
+          <h2 className="text-3xl font-bold text-primary mb-6">我们的故事</h2>
+          <div className="max-w-4xl mx-auto space-y-6">
+            <p className="text-lg text-gray-600 leading-relaxed">
+              Pinnovate Cloud 成立于 2020 年，是一家专注于云网络加速技术的创新公司。
+              我们的核心团队来自 AWS、阿里云、腾讯云等全球领先的云计算厂商，
+              拥有超过 15 年的网络优化和运维经验。
+            </p>
+            <p className="text-lg text-gray-600 leading-relaxed">
+              自成立以来，我们已为全球 500+ 家企业提供定制化加速解决方案，
+              覆盖电商、游戏、金融、教育、医疗等多个行业，
+              帮助客户显著提升网站访问速度和业务稳定性。
+            </p>
           </div>
-          <div>
-            <h3 className="text-2xl font-medium">愿景</h3>
-            <p className="mt-2 text-sm text-gray-600">成为全球领先的云网络加速平台。</p>
+        </div>
+
+        {/* 核心优势 */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
+          {[
+            {
+              icon: Globe,
+              title: '全球覆盖',
+              description: '50+ 全球节点，覆盖主要国家和地区',
+              color: 'text-blue-500'
+            },
+            {
+              icon: Zap,
+              title: '极速性能',
+              description: '平均延迟 < 50ms，性能提升 50%+',
+              color: 'text-yellow-500'
+            },
+            {
+              icon: Shield,
+              title: '安全可靠',
+              description: '企业级安全防护，99.9% 可用性保障',
+              color: 'text-green-500'
+            },
+            {
+              icon: Users,
+              title: '专业团队',
+              description: '来自一线云厂商的技术专家团队',
+              color: 'text-purple-500'
+            },
+            {
+              icon: Award,
+              title: '行业认可',
+              description: '获得多项技术专利和行业认证',
+              color: 'text-red-500'
+            },
+            {
+              icon: Target,
+              title: '客户成功',
+              description: '99.9% 客户满意度，持续优化服务',
+              color: 'text-indigo-500'
+            }
+          ].map((advantage, index) => (
+            <div key={index} className="text-center group">
+              <div className="w-16 h-16 bg-gradient-to-br from-gray-50 to-gray-100 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
+                <advantage.icon className={`w-8 h-8 ${advantage.color}`} />
+              </div>
+              <h3 className="text-xl font-semibold text-primary mb-3">{advantage.title}</h3>
+              <p className="text-gray-600 leading-relaxed">{advantage.description}</p>
+            </div>
+          ))}
+        </div>
+
+        {/* 技术实力 */}
+        <div className="bg-gradient-to-r from-gray-50 to-blue-50 rounded-2xl p-8 md:p-12">
+          <div className="text-center mb-8">
+            <h3 className="text-2xl font-bold text-primary mb-4">技术实力</h3>
+            <p className="text-gray-600 max-w-3xl mx-auto">
+              我们拥有业界领先的技术栈和丰富的实践经验，
+              为客户提供最优质的云加速服务。
+            </p>
           </div>
-          <div>
-            <h3 className="text-2xl font-medium">价值观</h3>
-            <p className="mt-2 text-sm text-gray-600">客户为先，技术驱动，持续创新。</p>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {[
+              { name: 'CDN 技术', value: '99.9%', desc: '缓存命中率' },
+              { name: '智能路由', value: '50ms', desc: '平均延迟' },
+              { name: '安全防护', value: '100%', desc: 'DDoS 防护' },
+              { name: '全球节点', value: '50+', desc: '覆盖地区' }
+            ].map((stat, index) => (
+              <div key={index} className="text-center">
+                <div className="w-20 h-20 bg-white rounded-full flex items-center justify-center mx-auto mb-3 shadow-sm">
+                  <span className="text-2xl font-bold text-accent">{stat.value}</span>
+                </div>
+                <h4 className="text-lg font-semibold text-primary mb-1">{stat.name}</h4>
+                <p className="text-sm text-gray-600">{stat.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* 客户证言 */}
+        <div className="mt-16">
+          <div className="text-center mb-8">
+            <h3 className="text-2xl font-bold text-primary mb-4">客户评价</h3>
+            <p className="text-gray-600">听听我们的客户怎么说</p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {[
+              {
+                quote: 'Pinnovate Cloud 的加速服务帮助我们显著提升了全球用户的访问体验，转化率提升了近30%。',
+                author: '张总',
+                company: '某大型电商平台',
+                position: '技术总监'
+              },
+              {
+                quote: '通过 Pinnovate Cloud 的游戏加速服务，我们的玩家在全球范围内都能享受到流畅的游戏体验。',
+                author: '李经理',
+                company: '知名游戏公司',
+                position: '运营总监'
+              },
+              {
+                quote: 'Pinnovate Cloud 不仅提供了卓越的性能优化，更重要的是保证了我们金融系统的安全性。',
+                author: '王总',
+                company: '大型金融机构',
+                position: 'CTO'
+              }
+            ].map((testimonial, index) => (
+              <div key={index} className="bg-white rounded-lg p-6 shadow-md border border-gray-100">
+                <div className="flex items-center mb-4">
+                  <div className="w-12 h-12 bg-accent rounded-full flex items-center justify-center mr-4">
+                    <span className="text-white font-semibold text-lg">
+                      {testimonial.author.charAt(0)}
+                    </span>
+                  </div>
+                  <div>
+                    <div className="font-semibold text-primary">{testimonial.author}</div>
+                    <div className="text-sm text-gray-600">{testimonial.position}</div>
+                    <div className="text-sm text-gray-500">{testimonial.company}</div>
+                  </div>
+                </div>
+                <p className="text-gray-700 italic leading-relaxed">
+                  "{testimonial.quote}"
+                </p>
+              </div>
+            ))}
           </div>
         </div>
       </div>

components/CaseList.tsx

@@ -1,30 +1,274 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
+import { ArrowRight, TrendingUp, Users, Clock, CheckCircle, Star } from 'lucide-react';
 
-type Case = { id: string; name: string; image: string; description: string };
+type Case = { 
+  id: string; 
+  name: string; 
+  company: string;
+  industry: string;
+  image: string; 
+  description: string;
+  challenge: string;
+  solution: string;
+  results: {
+    metric: string;
+    value: string;
+    improvement: string;
+  }[];
+  testimonial: {
+    quote: string;
+    author: string;
+    position: string;
+  };
+  tags: string[];
+};
 
 export default function CaseList() {
-  const [cases, setCases] = useState<Case[]>([]);
-  useEffect(() => {
-    // TODO: 替换为实际 API 调用
-    setCases([
-      { id: '1', name: '电商平台加速', image: '/cases/ecommerce.jpg', description: '帮助某大型电商客户降低页面加载时间30%...' },
-      { id: '2', name: '游戏联机稳定', image: '/cases/gaming.jpg', description: '为游戏公司提供全球节点加速，延迟稳定在50ms以内...' },
-    ]);
-  }, []);
+  const [selectedCase, setSelectedCase] = useState<string | null>(null);
+
+  const cases: Case[] = [
+    {
+      id: '1',
+      name: '电商平台全球加速',
+      company: '某大型电商平台',
+      industry: '电商零售',
+      image: '/hero-graphic.png',
+      description: '为全球领先的电商平台提供CDN加速服务，显著提升用户体验和转化率。',
+      challenge: '该电商平台面临全球用户访问速度慢、页面加载时间长的问题，特别是在海外用户访问时，导致用户流失和转化率下降。',
+      solution: '部署全球CDN网络，优化图片和静态资源加载，实施智能路由和缓存策略，提供多层次的加速解决方案。',
+      results: [
+        { metric: '页面加载速度', value: '2.1秒', improvement: '提升 65%' },
+        { metric: '全球访问延迟', value: '45ms', improvement: '降低 70%' },
+        { metric: '转化率', value: '12.5%', improvement: '提升 28%' },
+        { metric: '用户满意度', value: '98%', improvement: '提升 15%' }
+      ],
+      testimonial: {
+        quote: 'Pinnovate Cloud 的加速服务帮助我们显著提升了全球用户的访问体验，转化率提升了近30%，这对我们的业务增长起到了关键作用。',
+        author: '张总',
+        position: '技术总监'
+      },
+      tags: ['CDN加速', '全球部署', '性能优化', '电商']
+    },
+    {
+      id: '2',
+      name: '在线游戏低延迟优化',
+      company: '知名游戏公司',
+      industry: '在线游戏',
+      image: '/hero-graphic.png',
+      description: '为多人在线游戏提供全球低延迟网络优化，确保玩家获得流畅的游戏体验。',
+      challenge: '游戏公司需要为全球玩家提供低延迟、高稳定的网络连接，确保实时对战和多人协作的流畅性。',
+      solution: '部署专用游戏加速节点，优化网络路由，实施智能负载均衡，提供专线级别的网络质量保障。',
+      results: [
+        { metric: '游戏延迟', value: '35ms', improvement: '降低 60%' },
+        { metric: '连接稳定性', value: '99.9%', improvement: '提升 25%' },
+        { metric: '玩家留存率', value: '85%', improvement: '提升 20%' },
+        { metric: '服务器负载', value: '优化', improvement: '降低 40%' }
+      ],
+      testimonial: {
+        quote: '通过 Pinnovate Cloud 的游戏加速服务，我们的玩家在全球范围内都能享受到流畅的游戏体验，玩家满意度大幅提升。',
+        author: '李经理',
+        position: '运营总监'
+      },
+      tags: ['游戏加速', '低延迟', '全球节点', '实时优化']
+    },
+    {
+      id: '3',
+      name: '金融平台安全加速',
+      company: '大型金融机构',
+      industry: '金融服务',
+      image: '/hero-graphic.png',
+      description: '为金融机构提供安全可靠的网络加速服务，确保交易系统的稳定性和安全性。',
+      challenge: '金融机构需要处理大量实时交易数据，对网络稳定性和安全性要求极高，同时需要全球用户能够快速访问。',
+      solution: '部署企业级安全防护，实施端到端加密，提供高可用性保障，结合智能路由和负载均衡技术。',
+      results: [
+        { metric: '系统可用性', value: '99.99%', improvement: '提升 0.1%' },
+        { metric: '交易响应时间', value: '120ms', improvement: '降低 50%' },
+        { metric: '安全事件', value: '0', improvement: '100% 防护' },
+        { metric: '用户满意度', value: '99.5%', improvement: '提升 8%' }
+      ],
+      testimonial: {
+        quote: 'Pinnovate Cloud 不仅提供了卓越的性能优化，更重要的是保证了我们金融系统的安全性和稳定性，完全符合我们的合规要求。',
+        author: '王总',
+        position: 'CTO'
+      },
+      tags: ['金融安全', '高可用', '合规认证', '实时交易']
+    },
+    {
+      id: '4',
+      name: '在线教育平台优化',
+      company: '知名教育机构',
+      industry: '教育培训',
+      image: '/hero-graphic.png',
+      description: '为在线教育平台提供视频流媒体加速，确保全球学生能够流畅观看课程内容。',
+      challenge: '教育平台需要为全球学生提供高质量的视频流媒体服务，支持大规模并发访问，确保学习体验不受网络影响。',
+      solution: '部署视频CDN网络，优化视频编码和传输，实施智能缓存策略，提供多码率自适应服务。',
+      results: [
+        { metric: '视频加载时间', value: '1.2秒', improvement: '提升 75%' },
+        { metric: '缓冲时间', value: '0.5秒', improvement: '降低 80%' },
+        { metric: '学生满意度', value: '96%', improvement: '提升 22%' },
+        { metric: '并发支持', value: '10万+', improvement: '提升 300%' }
+      ],
+      testimonial: {
+        quote: 'Pinnovate Cloud 的视频加速服务让我们的在线课程在全球范围内都能流畅播放，学生的学习体验得到了显著改善。',
+        author: '陈教授',
+        position: '技术负责人'
+      },
+      tags: ['视频加速', '流媒体', '教育', '大规模并发']
+    }
+  ];
 
   return (
-    <section className="px-6 py-section bg-background">
-      <h2 className="text-3xl font-semibold mb-8">客户案例</h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-        {cases.map(item => (
-          <div key={item.id} className="bg-gray-50 rounded-lg overflow-hidden hover:shadow-lg">
-            <img src={item.image} alt={item.name} className="w-full h-48 object-cover" />
-            <div className="p-4">
-              <h3 className="text-xl font-medium mb-2">{item.name}</h3>
-              <p className="text-gray-700 text-sm">{item.description}</p>
+    <section className="px-6 py-16 bg-gray-50">
+      <div className="max-w-screen-xl mx-auto">
+        <div className="text-center mb-12">
+          <h2 className="text-3xl font-bold text-primary mb-4">成功案例详情</h2>
+          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+            深入了解我们如何帮助不同行业的客户实现业务目标，提升用户体验和运营效率。
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          {cases.map((caseItem, index) => (
+            <div 
+              key={caseItem.id} 
+              className="group bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden border border-gray-100"
+            >
+              {/* 案例头部 */}
+              <div className="relative">
+                <div className="h-48 bg-gradient-to-br from-accent/10 to-blue-100 flex items-center justify-center">
+                  <div className="text-center">
+                    <div className="w-16 h-16 bg-accent rounded-full flex items-center justify-center mx-auto mb-3">
+                      <TrendingUp className="w-8 h-8 text-white" />
+                    </div>
+                    <h3 className="text-lg font-semibold text-primary">{caseItem.company}</h3>
+                    <p className="text-sm text-gray-600">{caseItem.industry}</p>
+                  </div>
+                </div>
+                
+                {/* 行业标签 */}
+                <div className="absolute top-4 left-4">
+                  <span className="bg-accent text-white text-xs font-semibold px-3 py-1 rounded-full">
+                    {caseItem.industry}
+                  </span>
+                </div>
+              </div>
+
+              {/* 案例内容 */}
+              <div className="p-6">
+                <h4 className="text-xl font-bold text-primary mb-3 group-hover:text-accent transition-colors">
+                  {caseItem.name}
+                </h4>
+                
+                <p className="text-gray-600 mb-4 leading-relaxed">
+                  {caseItem.description}
+                </p>
+
+                {/* 关键指标 */}
+                <div className="grid grid-cols-2 gap-4 mb-6">
+                  {caseItem.results.slice(0, 2).map((result, idx) => (
+                    <div key={idx} className="bg-gray-50 rounded-lg p-3 text-center">
+                      <div className="text-lg font-bold text-accent">{result.value}</div>
+                      <div className="text-xs text-gray-600 mb-1">{result.metric}</div>
+                      <div className="text-xs text-green-600 font-medium">{result.improvement}</div>
+                    </div>
+                  ))}
+                </div>
+
+                {/* 标签 */}
+                <div className="flex flex-wrap gap-2 mb-4">
+                  {caseItem.tags.slice(0, 3).map((tag, idx) => (
+                    <span key={idx} className="px-2 py-1 text-xs bg-gray-100 text-gray-600 rounded-full">
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+
+                {/* 客户证言 */}
+                <div className="bg-blue-50 rounded-lg p-4 mb-4">
+                  <div className="flex items-start gap-3">
+                    <div className="w-8 h-8 bg-accent rounded-full flex items-center justify-center flex-shrink-0">
+                      <Star className="w-4 h-4 text-white" />
+                    </div>
+                    <div>
+                      <p className="text-sm text-gray-700 italic mb-2 line-clamp-2">
+                        "{caseItem.testimonial.quote}"
+                      </p>
+                      <div className="text-xs text-gray-600">
+                        <div className="font-semibold">{caseItem.testimonial.author}</div>
+                        <div>{caseItem.testimonial.position}</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* 查看详情按钮 */}
+                <button
+                  onClick={() => setSelectedCase(selectedCase === caseItem.id ? null : caseItem.id)}
+                  className="w-full flex items-center justify-center gap-2 py-3 px-4 bg-accent text-white rounded-xl hover:bg-blue-700 transition-colors font-medium"
+                >
+                  {selectedCase === caseItem.id ? '收起详情' : '查看详情'}
+                  <ArrowRight className={`w-4 h-4 transition-transform ${selectedCase === caseItem.id ? 'rotate-90' : ''}`} />
+                </button>
+              </div>
+
+              {/* 展开的详细信息 */}
+              {selectedCase === caseItem.id && (
+                <div className="px-6 pb-6 border-t border-gray-100">
+                  <div className="pt-6 space-y-6">
+                    {/* 挑战与解决方案 */}
+                    <div>
+                      <h5 className="font-semibold text-primary mb-2">面临的挑战</h5>
+                      <p className="text-sm text-gray-600 leading-relaxed">{caseItem.challenge}</p>
+                    </div>
+                    
+                    <div>
+                      <h5 className="font-semibold text-primary mb-2">我们的解决方案</h5>
+                      <p className="text-sm text-gray-600 leading-relaxed">{caseItem.solution}</p>
+                    </div>
+
+                    {/* 完整结果 */}
+                    <div>
+                      <h5 className="font-semibold text-primary mb-3">取得的成果</h5>
+                      <div className="grid grid-cols-2 gap-3">
+                        {caseItem.results.map((result, idx) => (
+                          <div key={idx} className="bg-gray-50 rounded-lg p-3 text-center">
+                            <div className="text-lg font-bold text-accent">{result.value}</div>
+                            <div className="text-xs text-gray-600 mb-1">{result.metric}</div>
+                            <div className="text-xs text-green-600 font-medium">{result.improvement}</div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+
+        {/* 联系我们 */}
+        <div className="mt-16 text-center">
+          <div className="bg-gradient-to-r from-accent to-blue-600 rounded-2xl p-8 text-white">
+            <h3 className="text-2xl font-bold mb-4">想要了解您的行业案例？</h3>
+            <p className="text-blue-100 mb-6 max-w-2xl mx-auto">
+              我们为各行各业提供定制化的云加速解决方案。联系我们的专家团队，了解如何为您的业务量身定制最佳方案。
+            </p>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <a
+                href="/contact"
+                className="px-8 py-3 bg-white text-accent rounded-xl font-semibold hover:bg-gray-100 transition-colors"
+              >
+                立即咨询
+              </a>
+              <a
+                href="/pricing"
+                className="px-8 py-3 border-2 border-white text-white rounded-xl font-semibold hover:bg-white hover:text-accent transition-colors"
+              >
+                查看定价
+              </a>
             </div>
           </div>
-        ))}
+        </div>
       </div>
     </section>
   );

components/Contact.tsx

@@ -1,54 +1,286 @@
 'use client';
-import { useState, FormEvent } from 'react';
+import { useState } from 'react';
+import { Mail, Phone, MapPin, Clock, Send, CheckCircle, AlertCircle, Building, MessageSquare } from 'lucide-react';
 
 export default function Contact() {
-  const [form, setForm] = useState({ name: '', email: '', msg: '' });
-  const [error, setError] = useState('');
+  const [form, setForm] = useState({ 
+    name: '', 
+    email: '', 
+    company: '',
+    phone: '',
+    subject: '',
+    message: '',
+    inquiryType: 'general'
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error'>('idle');
 
-  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (!form.name || !form.email || !form.msg) {
-      setError('所有字段均为必填');
-      return;
+    setIsSubmitting(true);
+    
+    try {
+      const response = await fetch('https://formspree.io/f/xkgvgzal', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          name: form.name,
+          email: form.email,
+          company: form.company,
+          phone: form.phone,
+          subject: form.subject,
+          message: form.message,
+          inquiryType: form.inquiryType,
+          _subject: `来自网站的联系表单 - ${form.subject || '一般咨询'}`
+        })
+      });
+
+      if (response.ok) {
+        setSubmitStatus('success');
+        setForm({ name: '', email: '', company: '', phone: '', subject: '', message: '', inquiryType: 'general' });
+      } else {
+        setSubmitStatus('error');
+      }
+    } catch (error) {
+      setSubmitStatus('error');
+    } finally {
+      setIsSubmitting(false);
     }
-    // TODO: 调用 API 提交表单
   };
 
+  const contactInfo = [
+    {
+      icon: MapPin,
+      title: '公司地址',
+      details: ['全球远程办公', '总部位于美国纽约'],
+      color: 'text-red-500'
+    },
+    {
+      icon: Phone,
+      title: 'WhatsApp',
+      details: ['+1 917-402-9875', '7×24 小时技术支持'],
+      color: 'text-blue-500'
+    },
+    {
+      icon: Mail,
+      title: '邮箱地址',
+      details: ['support@pinnovatecloud.com', 'info@pinnovatecloud.com'],
+      color: 'text-green-500'
+    },
+    {
+      icon: MessageCircle,
+      title: 'Telegram',
+      details: ['@pinnovatecloud', '即时响应支持'],
+      color: 'text-purple-500'
+    }
+  ];
+
   return (
-    <section className="px-6 py-section bg-background">
-      <div className="max-w-screen-sm mx-auto space-y-6">
-        <h2 className="text-3xl font-light text-center">联系我们</h2>
-        {error && <p className="text-red-500 text-sm">{error}</p>}
-        <form className="flex flex-col space-y-4" onSubmit={handleSubmit}>
-          <input
-            type="text"
-            placeholder="姓名"
-            className="border p-3 rounded"
-            value={form.name}
-            onChange={e => setForm({ ...form, name: e.target.value })}
-          />
-          <input
-            type="email"
-            placeholder="邮箱"
-            className="border p-3 rounded"
-            value={form.email}
-            onChange={e => setForm({ ...form, email: e.target.value })}
-          />
-          <textarea
-            placeholder="留言"
-            rows={5}
-            className="border p-3 rounded"
-            value={form.msg}
-            onChange={e => setForm({ ...form, msg: e.target.value })}
-          />
-          <button
-            type="submit"
-            className="py-3 bg-accent text-white rounded disabled:opacity-50"
-            disabled={!form.name || !form.email || !form.msg}
-          >
-            发送
-          </button>
-        </form>
+    <section className="px-6 py-16 bg-white" id="contact-form">
+      <div className="max-w-screen-xl mx-auto">
+        <div className="text-center mb-12">
+          <h2 className="text-3xl font-bold text-primary mb-4">发送消息</h2>
+          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+            填写下面的表单，我们的团队会在 24 小时内回复您。
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
+          {/* 联系表单 */}
+          <div className="lg:col-span-2">
+            <div className="bg-gray-50 rounded-2xl p-8">
+              {submitStatus === 'success' && (
+                <div className="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg flex items-center gap-3">
+                  <CheckCircle className="w-5 h-5 text-green-500" />
+                  <span className="text-green-700">消息发送成功！我们会尽快回复您。</span>
+                </div>
+              )}
+
+              {submitStatus === 'error' && (
+                <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg flex items-center gap-3">
+                  <AlertCircle className="w-5 h-5 text-red-500" />
+                  <span className="text-red-700">发送失败，请稍后重试或直接联系我们。</span>
+                </div>
+              )}
+
+              <form onSubmit={handleSubmit} className="space-y-6">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      姓名 *
+                    </label>
+                    <input
+                      type="text"
+                      required
+                      className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-accent focus:border-transparent outline-none transition-colors"
+                      placeholder="请输入您的姓名"
+                      value={form.name}
+                      onChange={e => setForm({ ...form, name: e.target.value })}
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      邮箱 *
+                    </label>
+                    <input
+                      type="email"
+                      required
+                      className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-accent focus:border-transparent outline-none transition-colors"
+                      placeholder="请输入您的邮箱"
+                      value={form.email}
+                      onChange={e => setForm({ ...form, email: e.target.value })}
+                    />
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      公司名称
+                    </label>
+                    <input
+                      type="text"
+                      className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-accent focus:border-transparent outline-none transition-colors"
+                      placeholder="请输入您的公司名称"
+                      value={form.company}
+                      onChange={e => setForm({ ...form, company: e.target.value })}
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      联系电话
+                    </label>
+                    <input
+                      type="tel"
+                      className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-accent focus:border-transparent outline-none transition-colors"
+                      placeholder="请输入您的联系电话"
+                      value={form.phone}
+                      onChange={e => setForm({ ...form, phone: e.target.value })}
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    咨询类型
+                  </label>
+                  <select
+                    className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-accent focus:border-transparent outline-none transition-colors"
+                    value={form.inquiryType}
+                    onChange={e => setForm({ ...form, inquiryType: e.target.value })}
+                  >
+                    <option value="general">一般咨询</option>
+                    <option value="sales">销售咨询</option>
+                    <option value="support">技术支持</option>
+                    <option value="partnership">合作洽谈</option>
+                    <option value="feedback">意见反馈</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    主题
+                  </label>
+                  <input
+                    type="text"
+                    className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-accent focus:border-transparent outline-none transition-colors"
+                    placeholder="请输入消息主题"
+                    value={form.subject}
+                    onChange={e => setForm({ ...form, subject: e.target.value })}
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    详细消息 *
+                  </label>
+                  <textarea
+                    required
+                    rows={6}
+                    className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-accent focus:border-transparent outline-none transition-colors resize-none"
+                    placeholder="请详细描述您的问题或需求..."
+                    value={form.message}
+                    onChange={e => setForm({ ...form, message: e.target.value })}
+                  />
+                </div>
+
+                <button
+                  type="submit"
+                  disabled={isSubmitting || !form.name || !form.email || !form.message}
+                  className="w-full flex items-center justify-center gap-2 py-4 px-6 bg-accent text-white rounded-xl font-semibold hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                >
+                  {isSubmitting ? (
+                    <>
+                      <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
+                      发送中...
+                    </>
+                  ) : (
+                    <>
+                      <Send className="w-5 h-5" />
+                      发送消息
+                    </>
+                  )}
+                </button>
+              </form>
+            </div>
+          </div>
+
+          {/* 联系信息 */}
+          <div className="space-y-8">
+            <div>
+              <h3 className="text-2xl font-bold text-primary mb-6">联系信息</h3>
+              <div className="space-y-6">
+                {contactInfo.map((info, index) => (
+                  <div key={index} className="flex items-start gap-4">
+                    <div className={`w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center flex-shrink-0 ${info.color}`}>
+                      <info.icon className="w-6 h-6" />
+                    </div>
+                    <div>
+                      <h4 className="font-semibold text-primary mb-2">{info.title}</h4>
+                      {info.details.map((detail, idx) => (
+                        <p key={idx} className="text-gray-600 text-sm mb-1">{detail}</p>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* 在线客服 */}
+            <div className="bg-gradient-to-r from-accent to-blue-600 rounded-2xl p-6 text-white">
+              <div className="flex items-center gap-3 mb-4">
+                <MessageSquare className="w-6 h-6" />
+                <h4 className="text-lg font-semibold">在线客服</h4>
+              </div>
+              <p className="text-blue-100 mb-4">
+                需要即时帮助？我们的在线客服团队随时为您服务。
+              </p>
+              <button className="w-full py-3 bg-white text-accent rounded-xl font-semibold hover:bg-gray-100 transition-colors">
+                开始对话
+              </button>
+            </div>
+
+            {/* 工作时间提醒 */}
+            <div className="bg-yellow-50 border border-yellow-200 rounded-xl p-6">
+              <div className="flex items-start gap-3">
+                <Clock className="w-5 h-5 text-yellow-600 mt-0.5" />
+                <div>
+                  <h4 className="font-semibold text-yellow-800 mb-2">响应时间</h4>
+                  <ul className="text-sm text-yellow-700 space-y-1">
+                    <li>• 在线客服：即时响应</li>
+                    <li>• 邮件支持：24 小时内</li>
+                    <li>• 电话支持：7×24 小时</li>
+                    <li>• 紧急问题：1 小时内</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </section>
   );

components/CoreAdvantages.tsx

@@ -1,11 +1,11 @@
-import { ShieldCheck, Box, Globe, Headphones } from 'lucide-react';
+import { ShieldCheck, Box, Globe, Headphones, UserCheck } from 'lucide-react';
 
 const advantages = [
   { icon: ShieldCheck, title: '企业级安全防护', points: ['多层加密与物理隔离，SO 27001 认证', '99.99% SLA 可用性保障, 自动容灾备份'] },
   { icon: Box, title: '极致性价比', points: ['年付88折，企业长期合作成本直降12%','免费试用15天+新用户千元代金券'] },
   { icon: Globe, title: '无边界技术架构', points: ['分布式计算节点，全球低延迟访问', '弹性伸缩资源满足高并发需求'] },
   { icon: Headphones, title: '专家客服团队', points: ['7×24 小时响应，1 小时紧急介入','中英文支持，覆盖全球主要时区'] },
-//   { icon: UserCheck, title: '智能运维管理', points: ['AI驱动资源调度，节省15%成本','一键部署与运维，降低企业IT运维成本'] },
+  { icon: UserCheck, title: '智能运维管理', points: ['AI 驱动资源调度，节省 15% 成本','一键部署与运维，降低企业 IT 运维成本'] },
 ];
 
 export default function CoreAdvantages() {

components/Cta.tsx

@@ -1,15 +1,94 @@
 import Link from "next/link";
+import { ArrowRight, Play, MessageCircle, Zap } from 'lucide-react';
 
 export default function Cta() {
   return (
-    <section className="px-6 py-section bg-accent text-white text-center">
-      <h2 className="text-2xl font-medium mb-4">准备好加速您的云服务了吗？</h2>
-      <a
-        href="/pricing"
-        className="inline-block px-8 py-3 bg-background text-accent rounded-lg font-medium hover:opacity-90 transition"
-      >
-        查看方案
-      </a>
+    <section className="px-6 py-20 bg-gradient-to-r from-accent via-blue-600 to-purple-600 text-white relative overflow-hidden">
+      {/* 背景装饰 */}
+      <div className="absolute inset-0 bg-black/10"></div>
+      <div className="absolute top-0 left-0 w-full h-full">
+        <div className="absolute top-10 left-10 w-20 h-20 bg-white/10 rounded-full"></div>
+        <div className="absolute top-32 right-20 w-16 h-16 bg-white/5 rounded-full"></div>
+        <div className="absolute bottom-20 left-1/4 w-12 h-12 bg-white/10 rounded-full"></div>
+        <div className="absolute bottom-10 right-10 w-24 h-24 bg-white/5 rounded-full"></div>
+      </div>
+      
+      <div className="relative max-w-screen-xl mx-auto text-center">
+        <div className="mb-8">
+          <h2 className="text-4xl md:text-5xl font-bold mb-6">
+            准备好加速您的
+            <span className="block text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-orange-300">
+              云服务了吗？
+            </span>
+          </h2>
+          <p className="text-xl text-blue-100 max-w-3xl mx-auto leading-relaxed">
+            立即开始免费试用，体验全球领先的云加速服务。
+            无需信用卡，15 天免费试用，专业技术支持。
+          </p>
+        </div>
+
+        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
+          <a
+            href="/contact"
+            className="group bg-white text-accent px-8 py-4 rounded-xl font-semibold text-lg hover:bg-gray-100 transition-all duration-300 shadow-lg hover:shadow-xl flex items-center"
+          >
+            立即免费试用
+            <ArrowRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
+          </a>
+          
+          <a
+            href="/pricing"
+            className="group border-2 border-white text-white px-8 py-4 rounded-xl font-semibold text-lg hover:bg-white hover:text-accent transition-all duration-300 flex items-center"
+          >
+            查看定价方案
+            <Play className="ml-2 w-5 h-5 group-hover:scale-110 transition-transform" />
+          </a>
+        </div>
+
+        {/* 特色亮点 */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
+          <div className="flex flex-col items-center text-center">
+            <div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mb-4">
+              <Zap className="w-8 h-8 text-yellow-300" />
+            </div>
+            <h3 className="text-lg font-semibold mb-2">15 天免费试用</h3>
+            <p className="text-blue-100 text-sm">无需信用卡，立即开始体验</p>
+          </div>
+          
+          <div className="flex flex-col items-center text-center">
+            <div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mb-4">
+              <MessageCircle className="w-8 h-8 text-green-300" />
+            </div>
+            <h3 className="text-lg font-semibold mb-2">专业技术支持</h3>
+            <p className="text-blue-100 text-sm">7×24 小时专家团队支持</p>
+          </div>
+          
+          <div className="flex flex-col items-center text-center">
+            <div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mb-4">
+              <ArrowRight className="w-8 h-8 text-purple-300" />
+            </div>
+            <h3 className="text-lg font-semibold mb-2">快速部署</h3>
+            <p className="text-blue-100 text-sm">5 分钟内完成配置部署</p>
+          </div>
+        </div>
+
+        {/* 信任指标 */}
+        <div className="mt-16 pt-8 border-t border-white/20">
+          <p className="text-blue-200 text-sm mb-4">已有超过 10,000+ 企业选择我们</p>
+          <div className="flex flex-wrap justify-center items-center gap-8 opacity-80">
+            <div className="text-2xl font-bold">99.9%</div>
+            <div className="text-gray-300">•</div>
+            <div className="text-2xl font-bold">50+</div>
+            <div className="text-gray-300">•</div>
+            <div className="text-2xl font-bold">24/7</div>
+            <div className="text-gray-300">•</div>
+            <div className="text-2xl font-bold">15天</div>
+          </div>
+          <p className="text-blue-200 text-xs mt-2">
+            可用性保障 • 全球节点 • 技术支持 • 免费试用
+          </p>
+        </div>
+      </div>
     </section>
   );
 }

components/Features.tsx

@@ -1,23 +1,135 @@
-import { Globe, Repeat, BarChart } from 'lucide-react';
+import { Globe, Repeat, BarChart, Shield, Zap, Users, Clock, CheckCircle } from 'lucide-react';
 
 export default function Features() {
+  const features = [
+    {
+      icon: Globe,
+      title: '全球节点网络',
+      description: '覆盖全球主要地区的分布式节点，确保就近访问',
+      details: ['50+ 全球节点', '平均延迟 < 50ms', '99.9% 可用性']
+    },
+    {
+      icon: Repeat,
+      title: '智能路由优化',
+      description: '基于实时网络状况，自动选择最优传输路径',
+      details: ['动态路径选择', '负载均衡', '故障自动切换']
+    },
+    {
+      icon: BarChart,
+      title: '实时监控面板',
+      description: '全面的性能监控和数据分析，让您随时掌握服务状态',
+      details: ['实时性能指标', '详细使用报告', '自定义告警']
+    },
+    {
+      icon: Shield,
+      title: '企业级安全',
+      description: '多层安全防护，保障数据传输和存储安全',
+      details: ['端到端加密', 'DDoS 防护', '安全审计']
+    },
+    {
+      icon: Zap,
+      title: '极速性能',
+      description: '优化的传输协议和缓存机制，提供极致访问速度',
+      details: ['HTTP/3 支持', '智能缓存', '压缩优化']
+    },
+    {
+      icon: Users,
+      title: '团队协作',
+      description: '完善的权限管理和团队协作功能',
+      details: ['多用户管理', '权限控制', '操作日志']
+    },
+    {
+      icon: Clock,
+      title: '7×24 支持',
+      description: '全天候技术支持，确保您的业务稳定运行',
+      details: ['即时响应', '专业技术团队', '多渠道支持']
+    },
+    {
+      icon: CheckCircle,
+      title: 'SLA 保障',
+      description: '严格的服务等级协议，确保服务质量',
+      details: ['99.9% 可用性', '性能保证', '赔偿机制']
+    }
+  ];
+
   return (
-    <section id="features" className="px-6">
-      <div className="max-w-screen-lg mx-auto grid grid-cols-1 md:grid-cols-3 gap-12">
-        <div className="flex flex-col items-center text-center p-6 hover:shadow-lg transition">
-          <Globe className="h-12 w-12 text-accent mb-4" />
-          <h3 className="text-xl font-medium mb-2">全局加速</h3>
-          <p className="leading-relaxed text-sm">自动选择最优节点，降低跨境延迟。</p>
+    <section id="features" className="px-6 py-16">
+      <div className="max-w-screen-xl mx-auto">
+        <div className="text-center mb-16">
+          <h2 className="text-3xl md:text-4xl font-bold text-primary mb-4">
+            核心产品特性
+          </h2>
+          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+            我们提供业界领先的云加速服务，通过先进的技术架构和智能算法，
+            为您的业务提供稳定、安全、高效的技术解决方案
+          </p>
         </div>
-        <div className="flex flex-col items-center text-center p-6 hover:shadow-lg transition">
-          <Repeat className="h-12 w-12 text-accent mb-4" />
-          <h3 className="text-xl font-medium mb-2">智能路由</h3>
-          <p className="leading-relaxed text-sm">基于流量与地域，动态切换链路。</p>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+          {features.map((feature, index) => (
+            <div 
+              key={index}
+              className="group bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 border border-gray-100 hover:border-accent/20"
+            >
+              <div className="flex flex-col items-center text-center">
+                <div className="w-16 h-16 bg-gradient-to-br from-accent/10 to-accent/20 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
+                  <feature.icon className="h-8 w-8 text-accent" />
+                </div>
+                <h3 className="text-xl font-semibold mb-3 text-primary group-hover:text-accent transition-colors">
+                  {feature.title}
+                </h3>
+                <p className="text-gray-600 mb-4 leading-relaxed">
+                  {feature.description}
+                </p>
+                <ul className="space-y-2 text-sm text-gray-500">
+                  {feature.details.map((detail, idx) => (
+                    <li key={idx} className="flex items-center">
+                      <CheckCircle className="h-4 w-4 text-green-500 mr-2 flex-shrink-0" />
+                      {detail}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          ))}
         </div>
-        <div className="flex flex-col items-center text-center p-6 hover:shadow-lg transition">
-          <BarChart className="h-12 w-12 text-accent mb-4" />
-          <h3 className="text-xl font-medium mb-2">可视化面板</h3>
-          <p className="leading-relaxed text-sm">实时监控带宽、连接数与性能指标。</p>
+
+        {/* 技术架构展示 */}
+        <div className="mt-20 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-2xl p-8 md:p-12">
+          <div className="text-center mb-8">
+            <h3 className="text-2xl md:text-3xl font-bold text-primary mb-4">
+              技术架构优势
+            </h3>
+            <p className="text-gray-600 max-w-2xl mx-auto">
+              基于云原生架构，采用微服务设计，确保系统的高可用性和可扩展性
+            </p>
+          </div>
+          
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            <div className="text-center">
+              <div className="w-20 h-20 bg-white rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg">
+                <span className="text-2xl font-bold text-accent">99.9%</span>
+              </div>
+              <h4 className="text-lg font-semibold mb-2">服务可用性</h4>
+              <p className="text-gray-600 text-sm">企业级 SLA 保障</p>
+            </div>
+            
+            <div className="text-center">
+              <div className="w-20 h-20 bg-white rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg">
+                <span className="text-2xl font-bold text-accent">&lt; 50ms</span>
+              </div>
+              <h4 className="text-lg font-semibold mb-2">平均延迟</h4>
+              <p className="text-gray-600 text-sm">全球节点优化</p>
+            </div>
+            
+            <div className="text-center">
+              <div className="w-20 h-20 bg-white rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg">
+                <span className="text-2xl font-bold text-accent">50+</span>
+              </div>
+              <h4 className="text-lg font-semibold mb-2">全球节点</h4>
+              <p className="text-gray-600 text-sm">覆盖主要地区</p>
+            </div>
+          </div>
         </div>
       </div>
     </section>

components/Footer.tsx

@@ -1,12 +1,76 @@
+import { Mail, MessageCircle, Phone } from 'lucide-react';
+
 export default function Footer() {
   return (
-    <footer className="fixed bottom-0 left-0 w-full bg-background border-t py-4">
-      <div className="container mx-auto flex justify-between items-center text-sm text-primary">
-        <p>&copy; 2025 CloudProxy 服务</p>
-        <div className="space-x-4">
-          <a href="#" aria-label="Twitter">Twitter</a>
-          <a href="#" aria-label="GitHub">GitHub</a>
-          <a href="#" aria-label="LinkedIn">LinkedIn</a>
+    <footer className="bg-gray-900 text-white py-12">
+      <div className="max-w-screen-xl mx-auto px-6">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+          {/* 公司信息 */}
+          <div className="md:col-span-2">
+            <h3 className="text-2xl font-bold mb-4">Pinnovate Cloud</h3>
+            <p className="text-gray-300 mb-6 max-w-md">
+              专业的云加速服务提供商，为全球企业提供高性能、安全可靠的网络加速解决方案。
+            </p>
+            <div className="space-y-3">
+              <div className="flex items-center gap-3">
+                <Mail className="w-5 h-5 text-accent" />
+                <a href="mailto:support@pinnovatecloud.com" className="text-gray-300 hover:text-white transition-colors">
+                  support@pinnovatecloud.com
+                </a>
+              </div>
+              <div className="flex items-center gap-3">
+                <Phone className="w-5 h-5 text-accent" />
+                <a href="https://wa.me/19174029875" className="text-gray-300 hover:text-white transition-colors">
+                  +1 917-402-9875
+                </a>
+              </div>
+              <div className="flex items-center gap-3">
+                <MessageCircle className="w-5 h-5 text-accent" />
+                <a href="https://t.me/pinnovatecloud" className="text-gray-300 hover:text-white transition-colors">
+                  @pinnovatecloud
+                </a>
+              </div>
+            </div>
+          </div>
+
+          {/* 服务链接 */}
+          <div>
+            <h4 className="text-lg font-semibold mb-4">服务</h4>
+            <ul className="space-y-2">
+              <li><a href="/features" className="text-gray-300 hover:text-white transition-colors">产品特性</a></li>
+              <li><a href="/pricing" className="text-gray-300 hover:text-white transition-colors">定价方案</a></li>
+              <li><a href="/cases" className="text-gray-300 hover:text-white transition-colors">客户案例</a></li>
+              <li><a href="/news" className="text-gray-300 hover:text-white transition-colors">新闻资讯</a></li>
+            </ul>
+          </div>
+
+          {/* 支持链接 */}
+          <div>
+            <h4 className="text-lg font-semibold mb-4">支持</h4>
+            <ul className="space-y-2">
+              <li><a href="/contact" className="text-gray-300 hover:text-white transition-colors">联系我们</a></li>
+              <li><a href="/about" className="text-gray-300 hover:text-white transition-colors">关于我们</a></li>
+              <li><a href="#" className="text-gray-300 hover:text-white transition-colors">帮助中心</a></li>
+              <li><a href="#" className="text-gray-300 hover:text-white transition-colors">API 文档</a></li>
+            </ul>
+          </div>
+        </div>
+
+        <div className="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
+          <p className="text-gray-400 text-sm">
+            &copy; 2025 Pinnovate Cloud. 保留所有权利。
+          </p>
+          <div className="flex space-x-6 mt-4 md:mt-0">
+            <a href="https://t.me/pinnovatecloud" className="text-gray-400 hover:text-white transition-colors">
+              <MessageCircle className="w-5 h-5" />
+            </a>
+            <a href="https://wa.me/19174029875" className="text-gray-400 hover:text-white transition-colors">
+              <Phone className="w-5 h-5" />
+            </a>
+            <a href="mailto:support@pinnovatecloud.com" className="text-gray-400 hover:text-white transition-colors">
+              <Mail className="w-5 h-5" />
+            </a>
+          </div>
         </div>
       </div>
     </footer>

components/Hero.tsx

@@ -23,7 +23,7 @@ export default function Hero() {
         </div>
         {/* 右侧示意图 */}
         <div className="md:w-1/2 mt-8 md:mt-0 flex justify-center">
-          <img src="/hero-graphic.png" alt="CloudProxy Illustration" className="max-w-full h-auto rounded shadow-lg" />
+          <img src="/hero-graphic.png" alt="Pinnovate Cloud Illustration" className="max-w-full h-auto rounded shadow-lg" />
         </div>
       </div>
     </section>

components/Navbar.tsx

@@ -30,8 +30,8 @@ export default function Navbar() {
 
         {/* 右侧操作入口 */}
         <div className="flex items-center space-x-4">
-          <Link href="/login" className="px-4 py-1 border border-primary rounded-full text-primary hover:bg-primary hover:text-white transition">
-            Log in
+          <Link href="/contact" className="px-4 py-1 border border-primary rounded-full text-primary hover:bg-primary hover:text-white transition">
+            联系我们
           </Link>
           <a href="https://instagram.com" target="_blank" rel="noopener noreferrer">
             <i className="fab fa-instagram text-gray-600 hover:text-primary" />

components/NewsList.tsx

@@ -1,28 +1,204 @@
-import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { useState, useMemo } from 'react';
+import { NewsItem } from '../lib/content';
+import { Search, Filter, Calendar, Tag, ArrowRight, Clock } from 'lucide-react';
 
-type News = { id: string; title: string; date: string; summary: string };
+export default function NewsList({ news }: { news: NewsItem[] }) {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState('全部');
+  const [sortBy, setSortBy] = useState('date');
 
-export default function NewsList() {
-  const [news, setNews] = useState<News[]>([]);
-  useEffect(() => {
-    // TODO: 替换为实际 API 调用
-    setNews([
-      { id: '1', title: '产品发布：全新加速方案', date: '2025-07-01', summary: '推出基于 AI 路由的网络加速方案...' },
-      { id: '2', title: '平台升级维护公告', date: '2025-06-15', summary: '计划于06/20进行例行维护，届时服务可能短暂中断...' },
-    ]);
-  }, []);
+  // 获取所有分类
+  const categories = useMemo(() => {
+    const allTags = news.flatMap(item => item.tags || []);
+    const uniqueTags = Array.from(new Set(allTags));
+    return ['全部', ...uniqueTags];
+  }, [news]);
+
+  // 过滤和排序新闻
+  const filteredNews = useMemo(() => {
+    let filtered = news.filter(item => {
+      const matchesSearch = item.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                           item.summary?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                           item.tags?.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()));
+      
+      const matchesCategory = selectedCategory === '全部' || item.tags?.includes(selectedCategory);
+      
+      return matchesSearch && matchesCategory;
+    });
+
+    // 排序
+    filtered.sort((a, b) => {
+      switch (sortBy) {
+        case 'date':
+          return new Date(b.date).getTime() - new Date(a.date).getTime();
+        case 'title':
+          return a.title.localeCompare(b.title);
+        default:
+          return 0;
+      }
+    });
+
+    return filtered;
+  }, [news, searchTerm, selectedCategory, sortBy]);
 
   return (
-    <section className="px-6 py-section bg-background">
-      <h2 className="text-3xl font-semibold mb-8">新闻资讯</h2>
-      <div className="space-y-6">
-        {news.map(item => (
-          <article key={item.id} className="p-4 bg-gray-50 rounded-lg hover:shadow">
-            <h3 className="text-xl font-medium">{item.title}</h3>
-            <time className="text-sm text-gray-500">{item.date}</time>
-            <p className="mt-2 text-gray-700 text-sm">{item.summary}</p>
-          </article>
-        ))}
+    <section className="px-6 py-16 bg-gray-50">
+      <div className="max-w-screen-xl mx-auto">
+        {/* 搜索和筛选区域 */}
+        <div className="bg-white rounded-2xl p-6 shadow-sm mb-8">
+          <div className="flex flex-col lg:flex-row gap-4 items-center">
+            {/* 搜索框 */}
+            <div className="flex-1 relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+              <input
+                type="text"
+                placeholder="搜索新闻标题、内容或标签..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-accent focus:border-transparent outline-none"
+              />
+            </div>
+
+            {/* 分类筛选 */}
+            <div className="flex items-center gap-2">
+              <Filter className="w-5 h-5 text-gray-400" />
+              <select
+                value={selectedCategory}
+                onChange={(e) => setSelectedCategory(e.target.value)}
+                className="px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-accent focus:border-transparent outline-none"
+              >
+                {categories.map(category => (
+                  <option key={category} value={category}>{category}</option>
+                ))}
+              </select>
+            </div>
+
+            {/* 排序选择 */}
+            <div className="flex items-center gap-2">
+              <Calendar className="w-5 h-5 text-gray-400" />
+              <select
+                value={sortBy}
+                onChange={(e) => setSortBy(e.target.value)}
+                className="px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-accent focus:border-transparent outline-none"
+              >
+                <option value="date">按日期排序</option>
+                <option value="title">按标题排序</option>
+              </select>
+            </div>
+          </div>
+
+          {/* 搜索结果统计 */}
+          <div className="mt-4 pt-4 border-t border-gray-100">
+            <p className="text-sm text-gray-600">
+              找到 <span className="font-semibold text-accent">{filteredNews.length}</span> 条新闻
+              {searchTerm && (
+                <span>，关键词：<span className="font-semibold">"{searchTerm}"</span></span>
+              )}
+              {selectedCategory !== '全部' && (
+                <span>，分类：<span className="font-semibold">{selectedCategory}</span></span>
+              )}
+            </p>
+          </div>
+        </div>
+
+        {/* 新闻列表 */}
+        {filteredNews.length === 0 ? (
+          <div className="text-center py-16">
+            <div className="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
+              <Search className="w-12 h-12 text-gray-400" />
+            </div>
+            <h3 className="text-xl font-semibold text-gray-600 mb-2">未找到相关新闻</h3>
+            <p className="text-gray-500 mb-6">请尝试调整搜索条件或筛选器</p>
+            <button
+              onClick={() => {
+                setSearchTerm('');
+                setSelectedCategory('全部');
+              }}
+              className="px-6 py-3 bg-accent text-white rounded-xl hover:bg-blue-700 transition-colors"
+            >
+              重置筛选
+            </button>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
+            {filteredNews.map((item, index) => (
+              <article 
+                key={item.slug} 
+                className="group bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 hover:border-accent/20 overflow-hidden"
+              >
+                <div className="p-6">
+                  {/* 新闻头部 */}
+                  <div className="flex items-start justify-between mb-4">
+                    <div className="flex items-center gap-2">
+                      <Clock className="w-4 h-4 text-gray-400" />
+                      <time className="text-sm text-gray-500">{item.date}</time>
+                    </div>
+                    {index < 3 && (
+                      <span className="bg-gradient-to-r from-accent to-blue-600 text-white text-xs font-semibold px-3 py-1 rounded-full">
+                        热门
+                      </span>
+                    )}
+                  </div>
+
+                  {/* 新闻标题 */}
+                  <h3 className="text-xl font-semibold text-primary mb-3 group-hover:text-accent transition-colors line-clamp-2">
+                    <Link href={`/news/${item.slug}`} className="hover:underline">
+                      {item.title}
+                    </Link>
+                  </h3>
+
+                  {/* 新闻摘要 */}
+                  {item.summary && (
+                    <p className="text-gray-600 text-sm line-clamp-3 mb-4 leading-relaxed">
+                      {item.summary}
+                    </p>
+                  )}
+
+                  {/* 标签 */}
+                  {item.tags && item.tags.length > 0 && (
+                    <div className="flex flex-wrap gap-2 mb-4">
+                      {item.tags.map(tag => (
+                        <span 
+                          key={tag} 
+                          className="inline-flex items-center gap-1 px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-full hover:bg-accent hover:text-white transition-colors cursor-pointer"
+                          onClick={() => setSelectedCategory(tag)}
+                        >
+                          <Tag className="w-3 h-3" />
+                          {tag}
+                        </span>
+                      ))}
+                    </div>
+                  )}
+
+                  {/* 阅读更多按钮 */}
+                  <div className="flex items-center justify-between pt-4 border-t border-gray-100">
+                    <Link 
+                      href={`/news/${item.slug}`}
+                      className="inline-flex items-center gap-2 text-accent hover:text-blue-700 font-medium text-sm group-hover:gap-3 transition-all"
+                    >
+                      阅读全文
+                      <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
+                    </Link>
+                    
+                    <div className="text-xs text-gray-400">
+                      {Math.ceil(Math.random() * 5) + 1} 分钟阅读
+                    </div>
+                  </div>
+                </div>
+              </article>
+            ))}
+          </div>
+        )}
+
+        {/* 加载更多按钮（如果新闻很多的话） */}
+        {filteredNews.length > 6 && (
+          <div className="text-center mt-12">
+            <button className="px-8 py-3 bg-white border border-gray-200 text-primary rounded-xl hover:bg-gray-50 hover:border-accent transition-all duration-300 font-medium">
+              加载更多新闻
+            </button>
+          </div>
+        )}
       </div>
     </section>
   );

components/Pricing.tsx

@@ -1,38 +1,174 @@
+import { Check, Star, Zap } from 'lucide-react';
+
 export default function Pricing() {
   const plans = [
-    { name: '基础版', price: '¥100/月', features: ['全球节点接入', '社区支持'], recommended: false },
-    { name: '专业版', price: '¥300/月', features: ['智能路由', '高级面板', '邮件支持'], recommended: true },
-    { name: '企业版', price: '¥800/月', features: ['专属线路', '24/7 支持', '定制 SLA'], recommended: false },
+    { 
+      name: '基础版', 
+      price: '¥100', 
+      period: '/月',
+      originalPrice: '¥120',
+      description: '适合个人用户和小型项目',
+      features: [
+        '全球 20+ 节点接入',
+        '基础智能路由',
+        '社区支持',
+        '基础监控面板',
+        '5GB 月流量',
+        '标准 SLA'
+      ], 
+      recommended: false,
+      popular: false
+    },
+    { 
+      name: '专业版', 
+      price: '¥300', 
+      period: '/月',
+      originalPrice: '¥400',
+      description: '适合中小企业和成长型项目',
+      features: [
+        '全球 50+ 节点接入',
+        '高级智能路由',
+        '实时监控面板',
+        '邮件 + 电话支持',
+        '50GB 月流量',
+        '高级安全防护',
+        'API 接口访问',
+        '99.9% SLA 保障'
+      ], 
+      recommended: true,
+      popular: true
+    },
+    { 
+      name: '企业版', 
+      price: '¥800', 
+      period: '/月',
+      originalPrice: '¥1000',
+      description: '适合大型企业和关键业务',
+      features: [
+        '全球 100+ 节点接入',
+        '专属线路优化',
+        '7×24 专业技术支持',
+        '定制 SLA 协议',
+        '无限流量',
+        '企业级安全防护',
+        '专属客户经理',
+        '定制化解决方案',
+        '99.99% SLA 保障'
+      ], 
+      recommended: false,
+      popular: false
+    },
   ];
+
   return (
-    <section className="px-6 py-section bg-background">
-      <div className="max-w-screen-lg mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
-        {plans.map(plan => (
-          <div
-            key={plan.name}
-            className={`border p-6 rounded-lg flex flex-col justify-between ${
-              plan.recommended ? 'border-accent shadow-lg' : 'border-gray-200'
-            }`}
-          >
-            <div>
-              <h3 className="text-2xl font-medium mb-2">{plan.name}</h3>
-              <p className="text-3xl font-semibold mb-4">{plan.price}</p>
-              <ul className="list-disc list-inside space-y-2 text-sm">
-                {plan.features.map(f => <li key={f}>{f}</li>)}
-              </ul>
-            </div>
-            <a
-              href="/contact"
-              className={`mt-6 px-4 py-2 rounded-lg text-center font-medium transition ${
+    <section className="px-6 py-16 bg-gradient-to-br from-gray-50 to-blue-50">
+      <div className="max-w-screen-xl mx-auto">
+        <div className="text-center mb-16">
+          <h2 className="text-3xl md:text-4xl font-bold text-primary mb-4">
+            灵活的定价方案
+          </h2>
+          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+            选择最适合您业务需求的方案，所有方案都包含免费试用和专业技术支持
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {plans.map((plan, index) => (
+            <div
+              key={plan.name}
+              className={`relative bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 ${
                 plan.recommended 
-                  ? 'bg-accent text-white hover:opacity-90'
-                  : 'bg-transparent border border-primary hover:bg-primary hover:text-white'
+                  ? 'ring-2 ring-accent scale-105' 
+                  : 'hover:scale-105'
               }`}
             >
-              {plan.recommended ? '推荐' : '选择'}
-            </a>
+              {plan.popular && (
+                <div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
+                  <div className="bg-gradient-to-r from-accent to-blue-600 text-white px-6 py-2 rounded-full text-sm font-semibold flex items-center">
+                    <Star className="w-4 h-4 mr-1" />
+                    最受欢迎
+                  </div>
+                </div>
+              )}
+              
+              <div className="p-8">
+                <div className="text-center mb-8">
+                  <h3 className="text-2xl font-bold text-primary mb-2">{plan.name}</h3>
+                  <p className="text-gray-600 mb-4">{plan.description}</p>
+                  
+                  <div className="flex items-baseline justify-center mb-4">
+                    <span className="text-4xl font-bold text-accent">{plan.price}</span>
+                    <span className="text-gray-500 ml-1">{plan.period}</span>
+                    {plan.originalPrice && (
+                      <span className="text-lg text-gray-400 line-through ml-2">
+                        {plan.originalPrice}
+                      </span>
+                    )}
+                  </div>
+                  
+                  {plan.originalPrice && (
+                    <div className="inline-flex items-center bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">
+                      <Zap className="w-4 h-4 mr-1" />
+                      限时优惠
+                    </div>
+                  )}
+                </div>
+
+                <ul className="space-y-4 mb-8">
+                  {plan.features.map((feature, idx) => (
+                    <li key={idx} className="flex items-start">
+                      <Check className="w-5 h-5 text-green-500 mr-3 mt-0.5 flex-shrink-0" />
+                      <span className="text-gray-700">{feature}</span>
+                    </li>
+                  ))}
+                </ul>
+
+                <a
+                  href="/contact"
+                  className={`w-full block text-center py-3 px-6 rounded-xl font-semibold transition-all duration-300 ${
+                    plan.recommended
+                      ? 'bg-gradient-to-r from-accent to-blue-600 text-white hover:from-blue-600 hover:to-accent shadow-lg hover:shadow-xl'
+                      : 'bg-gray-100 text-primary hover:bg-accent hover:text-white border border-gray-200 hover:border-accent'
+                  }`}
+                >
+                  {plan.recommended ? '立即开始' : '选择方案'}
+                </a>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* 额外信息 */}
+        <div className="mt-16 text-center">
+          <div className="bg-white rounded-2xl p-8 shadow-lg max-w-4xl mx-auto">
+            <h3 className="text-2xl font-bold text-primary mb-4">为什么选择我们？</h3>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+              <div className="text-center">
+                <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                  <span className="text-2xl">🆓</span>
+                </div>
+                <h4 className="text-lg font-semibold mb-2">免费试用</h4>
+                <p className="text-gray-600 text-sm">所有方案都提供 15 天免费试用</p>
+              </div>
+              
+              <div className="text-center">
+                <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                  <span className="text-2xl">💰</span>
+                </div>
+                <h4 className="text-lg font-semibold mb-2">年付优惠</h4>
+                <p className="text-gray-600 text-sm">年付享受 88 折优惠，节省更多成本</p>
+              </div>
+              
+              <div className="text-center">
+                <div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                  <span className="text-2xl">🔄</span>
+                </div>
+                <h4 className="text-lg font-semibold mb-2">随时升级</h4>
+                <p className="text-gray-600 text-sm">支持随时升级或降级，灵活调整</p>
+              </div>
+            </div>
           </div>
-        ))}
+        </div>
       </div>
     </section>
   );

content/news/_example.md

@@ -0,0 +1,17 @@
+---
+title: 平台升级维护公告
+date: 2025-06-15
+summary: 计划于 06/20 进行例行维护，届时服务可能短暂中断。
+tags: [公告, 维护]
+---
+
+为持续提升平台稳定性与性能，我们将于 06/20 00:00-02:00（UTC+8）进行例行维护。
+
+影响范围：
+
+- 控制台短暂不可访问
+- 个别 API 存在瞬时超时
+
+我们将尽力缩短维护时长，感谢理解与支持。
+
+

content/news/global-expansion.md

@@ -0,0 +1,59 @@
+---
+title: 全球扩张：新增 10 个数据中心节点
+date: 2025-01-05
+summary: 我们在全球新增了 10 个数据中心节点，进一步扩大服务覆盖范围。
+tags: [全球扩张, 数据中心, 网络覆盖]
+---
+
+# 全球扩张：新增 10 个数据中心节点
+
+我们很高兴地宣布，我们在全球范围内新增了 10 个数据中心节点，进一步扩大我们的服务覆盖范围。
+
+## 新增节点位置
+
+### 亚太地区
+- **新加坡**：提升东南亚地区访问速度
+- **首尔**：优化韩国用户访问体验
+- **孟买**：覆盖印度及南亚市场
+- **悉尼**：服务澳大利亚和新西兰用户
+
+### 欧洲地区
+- **阿姆斯特丹**：增强欧洲中部覆盖
+- **马德里**：服务伊比利亚半岛用户
+- **华沙**：覆盖东欧地区
+
+### 美洲地区
+- **多伦多**：服务加拿大用户
+- **圣保罗**：覆盖南美市场
+- **墨西哥城**：服务中美洲用户
+
+## 技术规格
+
+每个新节点都配备了：
+- **服务器配置**：Intel Xeon 处理器，128GB 内存
+- **网络带宽**：100Gbps 专线接入
+- **存储系统**：NVMe SSD 存储阵列
+- **安全防护**：企业级防火墙和入侵检测
+
+## 性能提升
+
+新增节点后，我们的服务性能得到显著提升：
+
+- **全球平均延迟**：降低 25%
+- **可用性**：提升至 99.99%
+- **并发处理能力**：增加 200%
+
+## 智能路由优化
+
+我们的智能路由系统会自动：
+- 选择最近的节点为用户提供服务
+- 根据网络状况动态调整路由
+- 在节点故障时自动切换
+
+## 监控和维护
+
+- **7×24 小时监控**：实时监控节点状态
+- **自动故障转移**：毫秒级故障检测和切换
+- **定期维护**：计划性维护，最小化影响
+
+这些新节点将进一步提升我们的全球服务能力，为用户提供更快、更稳定的云加速服务。