# phpbrother-next **Repository Path**: gzdsx/phpbrother-next ## Basic Information - **Project Name**: phpbrother-next - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-03-19 - **Last Updated**: 2026-03-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # phpbrother - 企业官网 | Corporate Website 一个现代化、响应式的企业官网模板，使用 Next.js、React 和 Tailwind CSS 构建的。支持中英文切换功能，提供完整的企业网站解决方案。 ## ✨ 功能特性 - 🌍 **中英文双语支持** - 完整的中文和英文翻译 - 📱 **完全响应式** - 适配所有设备和屏幕尺寸 - ⚡ **高性能** - 基于 Next.js 13+ App Router - 🎨 **现代化设计** - 使用 Tailwind CSS 构建的精美 UI - ✨ **流畅动画** - 自定义动画和过渡效果 - 📄 **多页面** - 首页、服务、项目、团队、博客、联系页面 - 🔍 **SEO 友好** - 优化的元数据和结构化标记 - 🎯 **易于定制** - 清晰的组件结构，易于扩展和修改 ## 🚀 快速开始 ### 安装依赖 ```bash npm install # 或者 yarn install ``` ### 启动开发服务器 ```bash npm run dev # 或者 yarn dev ``` 在浏览器中打开 [http://localhost:3000](http://localhost:3000) 查看结果。 ### 构建生产版本 ```bash npm run build npm run start ``` ## 📁 项目结构 ``` phpbrother-next/ ├── app/ │ ├── layout.tsx # 根布局，包含 Navbar 和 Footer │ ├── page.tsx # 首页 │ ├── providers.tsx # 语言上下文提供者 │ ├── globals.css # 全局样式和动画 │ ├── services/ │ │ └── page.tsx # 服务页面 │ ├── projects/ │ │ └── page.tsx # 项目页面 │ ├── team/ │ │ └── page.tsx # 团队页面 │ ├── blog/ │ │ └── page.tsx # 博客页面 │ └── contact/ │ └── page.tsx # 联系页面 ├── components/ │ ├── Navbar.tsx # 导航栏组件（带语言切换） │ └── Footer.tsx # 页脚组件 ├── lib/ │ └── i18n.ts # 国际化翻译文件 ├── public/ # 静态资源 ├── tailwind.config.ts # Tailwind 配置 └── tsconfig.json # TypeScript 配置 ``` ## 🌐 中英文切换 该项目包含完整的国际化支持。用户可以通过导航栏右上角的语言切换按钮（EN/中）在中文和英文之间切换。 ### 翻译文件位置 - 翻译内容存储在 `lib/i18n.ts` 中 - 使用 `useLanguage()` Hook 来访问当前语言和翻译文本 ### 添加新的翻译 在 `lib/i18n.ts` 中的相应语言对象中添加新的翻译字符串。 ## 🎨 设计特点 - **配色方案**：蓝色主题（#2563EB - #1E40AF）+ 灰色中性色 - **排版**：现代化、清晰的层级结构 - **间距**：一致的 20px 间距单位 - **圆角**：2xl 边框半径创建柔和的外观 - **阴影**：微妙的阴影增强深度感 ## 📱 页面详情 ### 🏠 首页 (/) - 英雄部分，带有号召性按钮 - 服务概览网格 - 统计数据部分 - 精选项目展示 - 客户推荐 - CTA 部分 ### 🛠️ 服务页面 (/services) - 完整的服务列表 - 每个服务的详细描述和功能 - 工作流程步骤 - 咨询 CTA ### 🎯 项目页面 (/projects) - 项目网格展示 - 项目卡片，包含技术栈 - 项目统计数据 - 项目启动 CTA ### 👥 团队页面 (/team) - 团队成员卡片 - 社交媒体链接 - 公司文化部分 - 加入我们 CTA ### 📰 博客页面 (/blog) - 精选文章展示 - 文章网格 - 分类和阅读时间 - 通讯订阅 ### 📧 联系页面 (/contact) - 联系表单 - 公司信息（地址、电话、邮箱） - 营业时间 - FAQ 部分 ## 🛠️ 技术栈 - **框架**：Next.js 16.2.0 - **UI 库**：React 19.2.4 - **样式**：Tailwind CSS 4 - **图标**：Lucide React - **语言**：TypeScript 5 - **状态管理**：React Context API（用于语言切换） ## 📝 自定义指南 ### 修改公司信息 编辑 `lib/i18n.ts` 中的翻译文本，包括： - 公司名称（phpbrother） - 描述和标语 - 联系信息（在各页面中） ### 修改颜色主题 编辑 `tailwind.config.ts` 或直接在组件中修改 Tailwind CSS 类。 当前主色：`from-blue-600 to-blue-700` ### 添加新页面 1. 在 `app/` 目录中创建新文件夹 2. 创建 `page.tsx` 文件 3. 导入 `useLanguage()` Hook 4. 使用翻译文本构建页面 ## 🚀 部署 ### 部署到 Vercel（推荐） ```bash npm install -g vercel vercel ``` ### 部署到其他平台 该项目是一个标准的 Next.js 应用，可以部署到任何支持 Node.js 的平台，包括： - AWS - Google Cloud - Azure - DigitalOcean - 自托管服务器 ## 📚 学习资源 - [Next.js 文档](https://nextjs.org/docs) - [Tailwind CSS 文档](https://tailwindcss.com/docs) - [React 文档](https://react.dev) ## 🐛 故障排除 ### 页面不显示内容 确保 `LanguageProvider` 在 `app/layout.tsx` 中正确包装了应用。 ### 语言切换不工作 检查 `localStorage` 是否启用，以及浏览器控制台中是否有任何错误。 ### 样式不正确应用 检查 Tailwind CSS 是否正确配置，清除 `.next` 目录并重新启动开发服务器。 ## 📄 许可 此项目为私有项目。 ## 💡 建议和改进 欢迎提交功能请求和错误报告！ ## 📞 联系我们 有任何问题或需要帮助？请通过联系页面与我们取得联系。 --- **注意**：这是一个模板项目，请根据您的业务需求进行定制和扩展。