+ {item.title} +
+ + {/* Description */} ++ {item.description} +
+ + {/* Link */} + + 查看详情 + → + +diff --git a/.claude/settings.local.json b/.claude/settings.local.json new file mode 100644 index 0000000..e66a137 --- /dev/null +++ b/.claude/settings.local.json @@ -0,0 +1,10 @@ +{ + "permissions": { + "allow": [ + "Bash(npm install *)", + "Bash(npx vite *)", + "Bash(npx tailwindcss *)", + "Bash(timeout 10)" + ] + } +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..7a73a41 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,2 @@ +{ +} \ No newline at end of file diff --git a/docs/superpowers/specs/2026-05-26-marketing-website-design.md b/docs/superpowers/specs/2026-05-26-marketing-website-design.md new file mode 100644 index 0000000..426af61 --- /dev/null +++ b/docs/superpowers/specs/2026-05-26-marketing-website-design.md @@ -0,0 +1,163 @@ +# 产品营销网站设计文档 + +## 概述 + +为广西职业院校提供教育信息化产品的营销推广网站。纯前端静态站点,部署到 EdgeOne,域名 `https://products.2009xc.com/`。 + +## 技术栈 + +- **构建工具**:Vite +- **框架**:React 18 + React Router v6 +- **样式**:Tailwind CSS v3 + CSS 变量(主题色切换) +- **部署**:静态文件,EdgeOne CDN + +## 页面结构 + +### 路由设计 + +| 路由 | 页面 | 说明 | +|------|------|------| +| `/` | 首页 | Hero区 + 产品概览 + 信任背书 + 新闻动态 | +| `/product/:slug` | 产品详情页 | 通用模板,根据slug加载产品数据 | +| `/contact` | 联系我们/成为代理商 | 代理优势 + 申请表单 + 联系方式 | + +### 目录结构 + +``` +website +/ +├── public/ # 静态资源 +├── src/ +│ ├── components/ +│ │ ├── Navbar.jsx # 顶部导航栏(固定、响应式汉堡菜单) +│ │ ├── Footer.jsx # 页脚 +│ │ ├── HeroSection.jsx # 首页Hero大图区 +│ │ ├── ProductCard.jsx # 产品概览卡片 +│ │ ├── TrustSection.jsx # 信任背书区(Logo墙+评价+数据) +│ │ ├── NewsSection.jsx # 新闻动态区 +│ │ ├── DemoSection.jsx # 演示体验模块(网址+二维码+账号密码) +│ │ ├── ContactForm.jsx # 代理商申请表单 +│ │ └── ThemeProvider.jsx# 主题色上下文(CSS变量切换) +│ ├── pages/ +│ │ ├── Home.jsx +│ │ ├── ProductPage.jsx # 通用产品详情页模板 +│ │ └── Contact.jsx +│ ├── data/ +│ │ └── products.js # 产品数据配置 +│ ├── App.jsx +│ └── main.jsx +├── index.html +├── tailwind.config.js +├── vite.config.js +└── package.json +``` + +## 首页设计 + +### 1. 导航栏 +- 公司Logo(左)+ 产品菜单(下拉展示所有产品)+ "联系我们"按钮(右) +- 滚动后固定顶部,添加阴影 +- 移动端折叠为汉堡菜单 + +### 2. Hero 大图区 +- 全屏渐变背景(深蓝→蓝紫渐变) +- 公司标语:"智慧教育,赋能未来"(示例) +- 副标题:一句话描述公司使命 +- CTA按钮:"了解我们的产品" + +### 3. 产品概览区 +- 2×3 网格卡片布局 +- 每张卡片:SVG图标 + 产品名称 + 一句话简介 + "了解更多"按钮 +- hover效果:上浮+阴影增强 + +### 4. 信任背书区 +- 合作院校Logo墙(示例占位) +- 关键数据统计:"服务100+所院校"、"覆盖50万+师生"(示例) +- 客户评价轮播 + +### 5. 新闻动态区 +- 3-4条最新动态卡片(标题+摘要+日期) +- 示例占位内容 + +### 6. 页脚 +- 公司信息 + 联系方式 + 版权 + 备案号 + +## 产品详情页设计 + +通过URL参数 `/product/:slug` 从 `products.js` 加载数据,所有产品共享同一模板。 + +### 页面结构(从上到下) + +1. **产品头部** — 全宽渐变背景(产品主题色),产品名称 + Slogan + 产品截图/插画 +2. **核心价值** — 3-4个价值点(图标+标题+描述),营销化文案 +3. **功能亮点** — 左右交替布局,图文并茂,每个功能一个区块 +4. **应用场景** — 针对职业院校的实际使用场景 +5. **演示体验模块** — 演示网址(可点击)+ 二维码(SVG占位)+ 体验账号密码(卡片) +6. **其他产品推荐** — "您可能还感兴趣"卡片 +7. **CTA** — "立即联系我们"按钮 + +## 主题色系统 + +通过 CSS 变量 + ThemeProvider 上下文实现每个产品页面的主题色切换。 + +| 产品 | slug | 主题色 | 色值 | +|------|------|--------|------| +| 智慧校园管理平台 | smart-campus | 蓝色 | #2563EB | +| 实习实训管理平台 | internship | 绿色 | #059669 | +| 教学资源管理平台 | teaching-resource | 紫色 | #7C3AED | +| 考试测评系统 | exam-system | 橙色 | #EA580C | +| 就业服务平台 | career-service | 青色 | #0891B2 | + +导航栏和页脚使用公司统一配色(深色),不受产品主题色影响。 + +## 联系我们/成为代理商页面 + +1. **代理优势区** — 4-6个加盟优势卡片(政策支持、培训赋能、丰厚回报、品牌背书等) +2. **代理流程** — 横向步骤条:咨询 → 签约 → 培训 → 开业 +3. **在线申请表单** — 姓名、公司名称、联系电话、邮箱、所在地区、代理意向产品(下拉)、备注 +4. **联系方式区** — 电话、邮箱、地址、微信公众号二维码 + +表单仅做前端验证,展示提交成功提示(无后端处理)。 + +## 响应式断点 + +- **桌面端** ≥1024px:完整布局,双栏图文交替 +- **平板端** 768-1023px:间距调整,卡片2列 +- **移动端** <768px:单栏,汉堡菜单 + +## 设计风格 + +- 科技感/现代风,参考阿里云/腾讯云产品页风格 +- 大色块渐变、圆角卡片、适当的阴影和动效 +- 中文排版,适合中国用户习惯 +- SVG图标和装饰元素增加美观 +- 文案以营销宣传为主,不深入技术细节 + +## 产品数据结构 + +```js +// src/data/products.js +{ + slug: 'smart-campus', + name: '校企益邦', + slogan: '数字化管理,让校园更智慧', + themeColor: '#2563EB', + icon: '...', // SVG图标组件名 + brief: '...', // 一句话简介(首页卡片用) + values: [...], // 核心价值点 + features: [...], // 功能亮点 + scenarios: [...], // 应用场景 + demo: { + url: '...', + qrCode: '...', // 二维码图片路径 + account: '...', + password: '...' + } +} +``` + +## 部署 + +- `vite build` 输出到 `website/dist/` +- 上传到 EdgeOne,绑定域名 `products.2009xc.com` +- Vite 配置 `base: '/'` diff --git a/website/README.md b/website/README.md new file mode 100644 index 0000000..a36934d --- /dev/null +++ b/website/README.md @@ -0,0 +1,16 @@ +# React + Vite + +This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. + +Currently, two official plugins are available: + +- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs) +- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) + +## React Compiler + +The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). + +## Expanding the ESLint configuration + +If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project. diff --git a/website/eslint.config.js b/website/eslint.config.js new file mode 100644 index 0000000..ea36dd3 --- /dev/null +++ b/website/eslint.config.js @@ -0,0 +1,21 @@ +import js from '@eslint/js' +import globals from 'globals' +import reactHooks from 'eslint-plugin-react-hooks' +import reactRefresh from 'eslint-plugin-react-refresh' +import { defineConfig, globalIgnores } from 'eslint/config' + +export default defineConfig([ + globalIgnores(['dist']), + { + files: ['**/*.{js,jsx}'], + extends: [ + js.configs.recommended, + reactHooks.configs.flat.recommended, + reactRefresh.configs.vite, + ], + languageOptions: { + globals: globals.browser, + parserOptions: { ecmaFeatures: { jsx: true } }, + }, + }, +]) diff --git a/website/index.html b/website/index.html new file mode 100644 index 0000000..cd759bd --- /dev/null +++ b/website/index.html @@ -0,0 +1,14 @@ + + +
+ + + + +Inquiry
+填写表单,我们将在 1 个工作日内与您联系
+即刻体验产品功能,感受智慧教育魅力
+请使用微信扫码体验
+使用以上账号密码登录体验
++ 让校园管理更简单、更智能 +
++ {item.description} +
+ + {/* Link */} + + 查看详情 + → + +{product.slogan}
+ ++ {product.brief} +
+ + {product.tags && product.tags.length > 0 && ( ++
+ "讯驰智慧校园管理平台极大提升了我校的管理效率,从教务排课到后勤报修, + 全部实现线上化操作。系统运行稳定,服务响应及时,是我们信赖的长期合作伙伴。" ++
合作洽谈
++ 诚邀广西各界教育伙伴,共同为职业院校提供优质的数字化解决方案 +
+Contact
+{item.text}
+Partnership
++ 诚邀广西各地区具有教育行业资源的合作伙伴,共享职业院校信息化发展机遇 +
+{item.desc}
+Core Capabilities
+全面覆盖职业院校教学、管理、党建、科研四大核心场景,为数字化校园建设提供一站式解决方案
+{c.sub}
+{c.desc}
+ {c.tip && ( +Why Choose Us
+AAA级信用企业 · 高新技术企业
+ +Recognition
+AAA级信用企业 · 高新技术企业
+{card.desc}
++ 获取产品演示与个性化方案,迈出数字化转型第一步 +
+请检查链接是否正确
+ 返回首页 +{product.slogan}
+{product.brief}
+ + {product.stats && ( +全面覆盖业务场景,灵活适配不同规模院校的管理需求
+{f.desc}
+适用对象:{product.target}
+{item.a}
+立即联系我们,获取专属解决方案和详细报价
+ + 立即联系我们 +探索更多智慧教育产品
+