feat: 统一全站设计风格、导航组件与文案逻辑自洽性修复
- 新增 InkGlowCard 墨韵流光卡片组件，统一全站卡片交互风格 - 新增 PageNav 面包屑组件，统一全站页面导航 - 统一色彩体系、排版层级、间距节奏和动画风格 - 修复 CTA 区品牌名称错误（诺瓦隆→睿新致遠） - 修复 ERP 产品卖点与年费制定价矛盾 - 导航下拉补充 SDS 和 OA 产品 - 统一全站数据指标为 12+年核心团队经验、6自研产品、10+团队成员 - 移除不可靠的 100%客户满意度和 30+行业专家指标 - 修复新闻时间线不合理问题，调整里程碑节奏 - 统一响应承诺为工作日快速响应 - 服务第4项重命名为行业方案实施，厘清概念 - 服务详情页效果数据改为定性描述 - 删除 cases 模块，精简代码库
This commit is contained in:
张翔
+75
-341
@@ -1,341 +1,75 @@
|
|||||||
# Novalon Website - 设计上下文
|
## Design Context
|
||||||
|
|
||||||
> 本文档定义了 Novalon Website 项目的设计原则、品牌定位和视觉规范，确保所有设计决策的一致性和连贯性。
|
### Users
|
||||||
|
- 中国企业决策者（CEO/CIO/CTO），寻求数字化转型服务
|
||||||
---
|
- 使用场景：评估技术供应商、了解解决方案、发起咨询
|
||||||
|
- 期望感受：专业可信、文化共鸣、技术前沿
|
||||||
## 设计上下文
|
|
||||||
|
### Brand Personality
|
||||||
### 用户画像
|
- 沉稳 · 精致 · 可信赖
|
||||||
|
- 东方水墨美学 + 现代科技感
|
||||||
**主要用户群体：大型企业（500人以上）**
|
- 不是高高在上的"专家"，而是坐下来一起想办法的"同行者"
|
||||||
|
|
||||||
**用户特征**：
|
### Aesthetic Direction
|
||||||
- 企业决策者：CEO、CTO、CIO等高管层
|
- **风格**: 水墨雅致 — 以留白和排版取胜，特效点到为止
|
||||||
- 技术负责人：IT总监、技术架构师、项目经理
|
- **参考**: Apple 中国官网（极致留白、精准排版、微妙动效）
|
||||||
- 采购决策者：采购总监、业务部门负责人
|
- **核心视觉**: 墨韵流光（旋转渐变边框 + 鼠标跟随光晕）— 全站统一
|
||||||
|
- **反参考**: 过度装饰、花哨动画、多色渐变、拥挤布局
|
||||||
**决策场景**：
|
|
||||||
- 数字化转型战略规划阶段
|
### Design Principles
|
||||||
- 寻找可靠的技术合作伙伴
|
|
||||||
- 评估供应商的专业能力和项目经验
|
1. **留白即力量** — 内容呼吸，不拥挤。section 间距 generous，卡片内部留白充足
|
||||||
- 关注系统稳定性、安全性、可扩展性
|
2. **墨韵流光统一** — 所有卡片共享 ink-glow-border + mouse-follow 系统，但参数克制
|
||||||
- 需要详细的技术方案和合规认证
|
3. **朱砂点睛** — 品牌红 #C41E3A 仅作点缀，不作为主色调。标题中关键词用 font-calligraphy 突出
|
||||||
|
4. **层次分明** — 通过字重和间距建立层级，而非颜色多样性
|
||||||
**核心需求**：
|
5. **克制动效** — 动效服务于信息传达，不炫技。hover 效果统一：translateY(-4px) + shadow + glow
|
||||||
- 信任感：需要看到专业能力和成功案例
|
|
||||||
- 安全感：需要了解技术实力和安全保障
|
### Design Tokens
|
||||||
- 确定性：需要清晰的服务流程和交付标准
|
|
||||||
- 创新性：需要前沿的技术视野和解决方案
|
#### Colors (Strict)
|
||||||
|
| Token | Value | Usage |
|
||||||
---
|
|-------|-------|-------|
|
||||||
|
| ink | #1C1C1C | 主文字、深色背景 |
|
||||||
### 品牌个性
|
| ink-light | #595959 | 次要文字（唯一值） |
|
||||||
|
| ink-muted | #A3A3A3 | 辅助文字（唯一值） |
|
||||||
**品牌定位**：企业数字化转型服务商
|
| cinnabar | #C41E3A | 品牌强调色，仅点缀 |
|
||||||
|
| paper | #FFFFFF | 主背景 |
|
||||||
**核心口号**："智连未来，成长伙伴"
|
| paper-warm | #FAFAFA | 交替 section 背景 |
|
||||||
|
| ink-dark | #0A0A0A | CTA 深色背景 |
|
||||||
**品牌个性关键词**：
|
|
||||||
1. **专业** - 展现深厚的技术积累和行业经验
|
#### Typography
|
||||||
2. **可靠** - 传递稳定、可信、值得依赖的品牌形象
|
| Level | Size | Weight | Usage |
|
||||||
3. **创新** - 体现前沿技术视野和持续创新能力
|
|-------|------|--------|-------|
|
||||||
|
| H1 | text-5xl sm:text-6xl lg:text-7xl | font-normal (brand) | Hero 品牌名 |
|
||||||
**品牌价值观**：
|
| H2 | text-3xl sm:text-4xl | font-semibold | Section 标题 |
|
||||||
- 不是高高在上的"专家"，而是并肩作战的"伙伴"
|
| H3 | text-lg sm:text-xl | font-semibold | Card 标题 |
|
||||||
- 不是做完就跑的"卖家"，而是长期陪伴的"同行者"
|
| Body | text-base | normal | 正文描述 |
|
||||||
- 只做一件事：成为客户数字化转型路上信得过的成长伙伴
|
| Small | text-sm | normal | 辅助信息 |
|
||||||
|
| Mono | text-xs font-mono | normal | 编号标签 |
|
||||||
**情感目标**：
|
|
||||||
- 让用户感受到：专业、可信、有温度
|
#### Spacing
|
||||||
- 建立信任感：通过案例、数据、流程展示
|
| Token | Value | Usage |
|
||||||
- 传递安全感：通过技术实力、安全保障、合规认证
|
|-------|-------|-------|
|
||||||
- 激发信心：通过创新方案、前沿视野、持续进化
|
| section-y | py-20 md:py-28 | Section 纵向间距 |
|
||||||
|
| card-p | p-6 md:p-8 | 卡片内边距 |
|
||||||
---
|
| grid-gap | gap-6 md:gap-8 | 网格间距 |
|
||||||
|
|
||||||
### 视觉方向
|
#### Card System
|
||||||
|
- 所有卡片: `ink-glow-border rounded-2xl` + mouse-follow + hover translateY(-4px)
|
||||||
**设计理念**：融合中国传统水墨画元素与现代科技感
|
- 鼠标光晕: `radial-gradient(400px circle, rgba(accent, 0.04), transparent 40%)`
|
||||||
|
- 阴影: hover `0 16px 32px rgba(0,0,0,0.08)` / default `0 1px 3px rgba(0,0,0,0.04)`
|
||||||
**核心视觉元素**：
|
- 边框: ink-glow-border 旋转渐变
|
||||||
|
|
||||||
#### 1. 色彩系统
|
#### Section Backgrounds (Alternating)
|
||||||
|
1. Hero: paper (#FFFFFF)
|
||||||
**主色调 - 墨黑系（水墨画主色）**：
|
2. Social Proof: paper-warm (#FAFAFA)
|
||||||
```css
|
3. Product Matrix: paper (#FFFFFF)
|
||||||
--color-primary: #1C1C1C; /* 主色 */
|
4. Challenge: paper-warm (#FAFAFA)
|
||||||
--color-primary-hover: #0A0A0A; /* 悬停色 */
|
5. Services: paper (#FFFFFF)
|
||||||
--color-primary-light: #3D3D3D; /* 浅色 */
|
6. Methodology: paper-warm (#FAFAFA)
|
||||||
--color-primary-lighter: #F5F5F5; /* 更浅色 */
|
7. Home Solutions: paper (#FFFFFF)
|
||||||
```
|
8. Testimonials: paper-warm (#FAFAFA)
|
||||||
|
9. Team: paper (#FFFFFF)
|
||||||
**品牌色 - 朱砂红（印章红）**：
|
10. About: paper-warm (#FAFAFA)
|
||||||
```css
|
11. News: paper (#FFFFFF)
|
||||||
--color-brand-primary: #C41E3A; /* 品牌主色 */
|
12. CTA: ink-dark (#1C1C1C)
|
||||||
--color-brand-primary-hover: #A01830; /* 品牌悬停色 */
|
|
||||||
--color-brand-primary-light: #E04A68; /* 品牌浅色 */
|
|
||||||
--color-brand-primary-bg: #FEF2F4; /* 品牌背景色 */
|
|
||||||
```
|
|
||||||
|
|
||||||
**背景色系 - 宣纸白**：
|
|
||||||
```css
|
|
||||||
--color-bg-primary: #FFFFFF; /* 主背景 */
|
|
||||||
--color-bg-secondary: #FFFBF5; /* 次背景（宣纸色） */
|
|
||||||
--color-bg-tertiary: #F5F5F5; /* 三级背景 */
|
|
||||||
--color-bg-hover: #EFEFEF; /* 悬停背景 */
|
|
||||||
```
|
|
||||||
|
|
||||||
**文字色系 - 墨色层次**：
|
|
||||||
```css
|
|
||||||
--color-text-primary: #1C1C1C; /* 主文字 */
|
|
||||||
--color-text-secondary: #3D3D3D; /* 次文字 */
|
|
||||||
--color-text-tertiary: #4A4A4A; /* 三级文字 */
|
|
||||||
--color-text-muted: #6B6B6B; /* 弱化文字 */
|
|
||||||
```
|
|
||||||
|
|
||||||
#### 2. 字体系统
|
|
||||||
|
|
||||||
**中文字体**：
|
|
||||||
- **书法字体**：Aoyagi Reisho（青柳凉笙）- 用于品牌名称、标题装饰
|
|
||||||
- **正文字体**：Noto Sans SC - 用于正文、UI元素
|
|
||||||
|
|
||||||
**英文字体**：
|
|
||||||
- **无衬线字体**：Geist Sans - 用于英文标题、正文
|
|
||||||
- **等宽字体**：Geist Mono - 用于代码、技术内容
|
|
||||||
|
|
||||||
**字体应用原则**：
|
|
||||||
- 品牌名称"睿新致遠"使用书法字体，传递文化底蕴
|
|
||||||
- 正文使用现代无衬线字体，确保可读性
|
|
||||||
- 技术内容使用等宽字体，体现专业性
|
|
||||||
|
|
||||||
#### 3. 视觉特效
|
|
||||||
|
|
||||||
**水墨元素**：
|
|
||||||
- 水墨滴装饰（InkDrop）
|
|
||||||
- 水墨飞溅效果（InkSplash）
|
|
||||||
- 水墨背景（InkBackground）
|
|
||||||
|
|
||||||
**科技元素**：
|
|
||||||
- 数据粒子流动（DataParticleFlow）
|
|
||||||
- 几何图形装饰（GeometricShapes）
|
|
||||||
- 渐变网格（GradientGrid）
|
|
||||||
- 科技网格流动（TechGridFlow）
|
|
||||||
|
|
||||||
**动画效果**：
|
|
||||||
- 页面过渡动画（PageTransitions）
|
|
||||||
- 滚动动画（ScrollAnimations）
|
|
||||||
- 微交互效果（Hover、Click、Focus）
|
|
||||||
- 数字动画（AnimatedNumber）
|
|
||||||
|
|
||||||
#### 4. 设计模式
|
|
||||||
|
|
||||||
**布局系统**：
|
|
||||||
- 响应式设计：桌面端、平板、移动端完美适配
|
|
||||||
- 容器宽度：container-wide（最大1440px）
|
|
||||||
- 间距系统：基于4px基准的间距体系
|
|
||||||
|
|
||||||
**组件风格**：
|
|
||||||
- 卡片设计：圆角、阴影、边框
|
|
||||||
- 按钮样式：填充、描边、幽灵按钮
|
|
||||||
- 表单元素：清晰的输入框、下拉菜单
|
|
||||||
- 导航系统：顶部导航、面包屑、移动端标签栏
|
|
||||||
|
|
||||||
**视觉层次**：
|
|
||||||
- 清晰的信息层次：标题 → 副标题 → 正文 → 辅助信息
|
|
||||||
- 合理的视觉权重：通过字号、颜色、间距建立层次
|
|
||||||
- 突出重点：使用品牌色、动画效果吸引注意力
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 设计原则
|
|
||||||
|
|
||||||
#### 1. 专业性优先
|
|
||||||
|
|
||||||
**原则描述**：所有设计决策必须服务于展现专业能力
|
|
||||||
|
|
||||||
**实施要点**：
|
|
||||||
- 使用清晰的信息架构，便于快速定位关键信息
|
|
||||||
- 展示详细的技术方案、流程、案例
|
|
||||||
- 提供完整的数据支撑（案例数量、客户规模、项目经验）
|
|
||||||
- 避免过度装饰，保持视觉简洁专业
|
|
||||||
|
|
||||||
**设计示例**：
|
|
||||||
- 服务详情页：展示完整的服务流程、技术栈、交付标准
|
|
||||||
- 案例展示：包含客户背景、解决方案、实施效果、技术亮点
|
|
||||||
- 关于我们：展示团队实力、资质认证、发展历程
|
|
||||||
|
|
||||||
#### 2. 信任感构建
|
|
||||||
|
|
||||||
**原则描述**：通过设计元素传递可靠、可信的品牌形象
|
|
||||||
|
|
||||||
**实施要点**：
|
|
||||||
- 展示真实案例和客户评价
|
|
||||||
- 提供详细的公司信息和联系方式
|
|
||||||
- 使用安全标识、认证徽章
|
|
||||||
- 清晰的服务承诺和保障条款
|
|
||||||
|
|
||||||
**设计示例**：
|
|
||||||
- 首页：突出展示成功案例数量、客户规模
|
|
||||||
- 联系页面：完整的公司信息、地址、电话、邮箱
|
|
||||||
- 页脚：ICP备案、公安备案、版权信息
|
|
||||||
|
|
||||||
#### 3. 创新性表达
|
|
||||||
|
|
||||||
**原则描述**：在保持专业性的同时，展现创新能力和前沿视野
|
|
||||||
|
|
||||||
**实施要点**：
|
|
||||||
- 使用现代技术实现流畅的动画效果
|
|
||||||
- 融合传统元素（水墨）与现代科技感
|
|
||||||
- 展示前沿技术应用（AI、大数据、云计算）
|
|
||||||
- 持续优化用户体验和交互设计
|
|
||||||
|
|
||||||
**设计示例**：
|
|
||||||
- Hero区域：水墨背景 + 数据粒子流动效果
|
|
||||||
- 服务介绍：使用3D效果展示技术架构
|
|
||||||
- 新闻动态：展示最新的技术趋势和行业洞察
|
|
||||||
|
|
||||||
#### 4. 可访问性保障
|
|
||||||
|
|
||||||
**原则描述**：确保所有用户都能无障碍使用网站
|
|
||||||
|
|
||||||
**实施要点**：
|
|
||||||
- 遵循 WCAG 2.1 AA 标准
|
|
||||||
- 色彩对比度：文本与背景对比度 ≥ 4.5:1
|
|
||||||
- 键盘导航：所有交互元素可通过键盘访问
|
|
||||||
- 屏幕阅读器支持：提供完整的 ARIA 标签
|
|
||||||
- 减少动画：支持 prefers-reduced-motion 媒体查询
|
|
||||||
|
|
||||||
**设计示例**：
|
|
||||||
- 所有图片提供 alt 文本
|
|
||||||
- 表单元素关联 label
|
|
||||||
- 焦点状态清晰可见
|
|
||||||
- 色彩对比度检查通过
|
|
||||||
|
|
||||||
#### 5. 响应式优先
|
|
||||||
|
|
||||||
**原则描述**：确保所有设备上的体验一致性
|
|
||||||
|
|
||||||
**实施要点**：
|
|
||||||
- 移动端优先设计
|
|
||||||
- 触摸友好的交互元素（最小触摸区域 44x44px）
|
|
||||||
- 自适应的布局和字体大小
|
|
||||||
- 优化的移动端导航（标签栏、汉堡菜单）
|
|
||||||
|
|
||||||
**设计示例**：
|
|
||||||
- 移动端：底部标签栏导航
|
|
||||||
- 平板：侧边导航 + 内容区域
|
|
||||||
- 桌面：顶部导航 + 完整布局
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 参考与反参考
|
|
||||||
|
|
||||||
**正面参考**：
|
|
||||||
- **阿里云官网**：企业级B2B网站的专业性和信任感
|
|
||||||
- **腾讯云官网**：技术能力展示和案例呈现方式
|
|
||||||
- **华为官网**：企业品牌形象和文化传递
|
|
||||||
|
|
||||||
**反参考**：
|
|
||||||
- 过度炫技的视觉效果（影响加载速度和可读性）
|
|
||||||
- 过于卡通化的设计风格（不符合企业级定位）
|
|
||||||
- 信息过载的页面布局（影响用户决策）
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 技术实现规范
|
|
||||||
|
|
||||||
**前端技术栈**：
|
|
||||||
- Next.js 16（App Router）
|
|
||||||
- React 19
|
|
||||||
- TypeScript
|
|
||||||
- Tailwind CSS 4
|
|
||||||
- Framer Motion（动画）
|
|
||||||
- Three.js（3D效果）
|
|
||||||
|
|
||||||
**设计工具**：
|
|
||||||
- Tailwind CSS：样式系统
|
|
||||||
- CSS Variables：设计令牌
|
|
||||||
- Framer Motion：动画库
|
|
||||||
- Lucide React：图标库
|
|
||||||
|
|
||||||
**性能优化**：
|
|
||||||
- 图片优化：WebP/AVIF 格式，响应式图片
|
|
||||||
- 代码分割：动态导入组件
|
|
||||||
- 缓存策略：静态资源长期缓存
|
|
||||||
- 预加载：关键资源预加载
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 质量保障
|
|
||||||
|
|
||||||
**代码质量**：
|
|
||||||
- ESLint：代码规范检查
|
|
||||||
- TypeScript：类型安全
|
|
||||||
- Prettier：代码格式化
|
|
||||||
- Husky：Git Hooks
|
|
||||||
|
|
||||||
**测试覆盖**：
|
|
||||||
- 单元测试：Jest
|
|
||||||
- 集成测试：Testing Library
|
|
||||||
- E2E测试：Playwright
|
|
||||||
- 可访问性测试：axe-core
|
|
||||||
|
|
||||||
**CI/CD流水线**：
|
|
||||||
- 代码质量检查（Lint、Type Check）
|
|
||||||
- 单元测试和集成测试
|
|
||||||
- E2E测试（分层测试）
|
|
||||||
- 安全扫描
|
|
||||||
- Docker镜像构建
|
|
||||||
- 自动化部署
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 使用指南
|
|
||||||
|
|
||||||
### 如何使用本文档
|
|
||||||
|
|
||||||
1. **新功能开发**：在设计新功能前，先查阅本文档，确保符合设计原则
|
|
||||||
2. **设计评审**：使用本文档作为评审标准，检查设计决策是否一致
|
|
||||||
3. **团队协作**：新成员加入时，阅读本文档快速了解设计方向
|
|
||||||
4. **设计迭代**：定期回顾本文档，根据业务发展更新设计方向
|
|
||||||
|
|
||||||
### 设计决策流程
|
|
||||||
|
|
||||||
1. **明确目标**：确定设计目标是否服务于"专业、可靠、创新"的品牌个性
|
|
||||||
2. **参考原则**：查阅设计原则，确保符合核心原则
|
|
||||||
3. **视觉规范**：使用色彩系统、字体系统、组件库
|
|
||||||
4. **技术实现**：遵循技术实现规范，确保性能和可维护性
|
|
||||||
5. **质量验证**：通过测试和评审，确保质量达标
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 版本历史
|
|
||||||
|
|
||||||
| 版本 | 日期 | 变更内容 | 作者 |
|
|
||||||
|------|------|----------|------|
|
|
||||||
| 1.0 | 2026-03-27 | 初始版本，建立设计上下文 | 张翔 |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 维护说明
|
|
||||||
|
|
||||||
本文档是**活文档**，应随着项目发展持续更新：
|
|
||||||
|
|
||||||
- **品牌升级**：更新品牌个性、视觉方向
|
|
||||||
- **用户反馈**：根据用户反馈调整设计原则
|
|
||||||
- **技术演进**：更新技术实现规范
|
|
||||||
- **设计迭代**：记录设计决策的演变过程
|
|
||||||
|
|
||||||
**更新流程**：
|
|
||||||
1. 提出设计变更建议
|
|
||||||
2. 团队讨论和评审
|
|
||||||
3. 更新本文档
|
|
||||||
4. 通知所有相关成员
|
|
||||||
5. 在实际项目中验证
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
> **最后更新**：2026-03-27
|
|
||||||
> **维护者**：张翔
|
|
||||||
> **联系方式**：contact@novalon.cn
|
|
||||||
|
|||||||
@@ -4,7 +4,9 @@
|
|||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev -p 3000",
|
"dev": "next dev -p 3000",
|
||||||
|
"dev:clean": "rm -rf .next dist && next dev -p 3000",
|
||||||
"build": "next build",
|
"build": "next build",
|
||||||
|
"build:clean": "rm -rf .next dist && next build",
|
||||||
"start": "npx serve dist -p 3000",
|
"start": "npx serve dist -p 3000",
|
||||||
"lint": "eslint",
|
"lint": "eslint",
|
||||||
"type-check": "tsc --noEmit",
|
"type-check": "tsc --noEmit",
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 42 KiB |
@@ -1,267 +1,229 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { motion } from 'framer-motion';
|
import { motion } from 'framer-motion';
|
||||||
import { useInView } from 'framer-motion';
|
import { useState, useEffect, useMemo } from 'react';
|
||||||
import { useRef, useState, useEffect, useMemo } from 'react';
|
|
||||||
import { COMPANY_INFO, STATS } from '@/lib/constants';
|
import { COMPANY_INFO, STATS } from '@/lib/constants';
|
||||||
import { Card, CardContent } from '@/components/ui/card';
|
|
||||||
import { PageHeader } from '@/components/ui/page-header';
|
|
||||||
import { FlipClock } from '@/components/ui/flip-clock';
|
import { FlipClock } from '@/components/ui/flip-clock';
|
||||||
import { Lightbulb, Users, Target, Award, MapPin, Mail } from 'lucide-react';
|
import { PageNav } from '@/components/layout/page-nav';
|
||||||
|
import { Users, Target, Award, MapPin, Mail } from 'lucide-react';
|
||||||
|
import { differenceInYears, differenceInMonths, differenceInDays, subYears, subMonths } from 'date-fns';
|
||||||
|
|
||||||
export function AboutClient() {
|
export function AboutClient() {
|
||||||
const contentRef = useRef(null);
|
|
||||||
const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
|
|
||||||
const [operationTime, setOperationTime] = useState({ days: 0, months: 0, years: 0 });
|
const [operationTime, setOperationTime] = useState({ days: 0, months: 0, years: 0 });
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const foundingDate = new Date('2026-01-15');
|
const foundingDate = new Date('2026-01-15');
|
||||||
const calculateTime = () => {
|
const calculateTime = () => {
|
||||||
const now = new Date();
|
const now = new Date();
|
||||||
const diff = now.getTime() - foundingDate.getTime();
|
const years = differenceInYears(now, foundingDate);
|
||||||
|
const afterYears = subYears(now, years);
|
||||||
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
const months = differenceInMonths(afterYears, foundingDate);
|
||||||
const years = Math.floor(days / 365);
|
const afterMonths = subMonths(afterYears, months);
|
||||||
const months = Math.floor((days % 365) / 30);
|
const days = differenceInDays(afterMonths, foundingDate);
|
||||||
|
|
||||||
setOperationTime({ days, months, years });
|
setOperationTime({ days, months, years });
|
||||||
};
|
};
|
||||||
|
|
||||||
calculateTime();
|
calculateTime();
|
||||||
const timer = setInterval(calculateTime, 60000);
|
const timer = setInterval(calculateTime, 60000);
|
||||||
|
|
||||||
return () => clearInterval(timer);
|
return () => clearInterval(timer);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const values = useMemo(() => [
|
const values = useMemo(() => [
|
||||||
{
|
{ icon: Target, title: '务实', description: '不追逐风口，只做真正为客户创造价值的事。' },
|
||||||
icon: Lightbulb,
|
{ icon: Users, title: '陪伴', description: '交付只是开始，长期陪跑才是我们的承诺。' },
|
||||||
title: '创新驱动',
|
{ icon: Award, title: '专业', description: '用扎实的工程能力和行业经验赢得信任。' },
|
||||||
description: '持续探索前沿技术，以创新思维解决业务挑战，为客户创造差异化价值',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Users,
|
|
||||||
title: '客户至上',
|
|
||||||
description: '深入理解客户需求，提供个性化解决方案，建立长期合作伙伴关系',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Target,
|
|
||||||
title: '追求卓越',
|
|
||||||
description: '以最高标准要求自己，持续优化产品和服务质量，超越客户期望',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Award,
|
|
||||||
title: '诚信为本',
|
|
||||||
description: '坚持透明沟通，信守承诺，以诚信赢得客户信任和尊重',
|
|
||||||
},
|
|
||||||
], []);
|
], []);
|
||||||
|
|
||||||
const milestones = useMemo(() => [
|
const milestones = useMemo(() => [
|
||||||
{
|
{ date: '2026年1月', title: '公司成立', description: '四川睿新致远科技有限公司在成都龙泉驿区正式成立' },
|
||||||
date: '2026年1月',
|
{ date: '2026年1月', title: '团队组建', description: '核心团队到位，成员来自多个大型传统IT企业，具备扎实的工程能力和规范化交付经验' },
|
||||||
title: '公司成立',
|
{ date: '2026年2月', title: '业务启动', description: '推出企业数字化转型解决方案，开始服务首批客户' },
|
||||||
description: '四川睿新致远科技有限公司在成都龙泉驿区正式成立，专注于企业数字化转型解决方案',
|
{ date: '2026年3月', title: '产品研发', description: '自主研发的ERP、CRM等产品启动研发，逐步构建产品矩阵' },
|
||||||
},
|
{ date: '2026年5月', title: '产品上线', description: '首批产品完成开发并上线试运行，形成覆盖企业管理核心场景的产品体系' },
|
||||||
{
|
|
||||||
date: '2026年1月',
|
|
||||||
title: '团队组建',
|
|
||||||
description: '核心团队到位，技术团队拥有丰富的行业经验和专业技能',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2026年2月',
|
|
||||||
title: '业务启动',
|
|
||||||
description: '推出企业数字化转型解决方案，开始服务首批客户',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2026年2月',
|
|
||||||
title: '产品发布',
|
|
||||||
description: '自主研发的ERP、CRM等产品陆续上线，为客户提供一站式数字化服务',
|
|
||||||
},
|
|
||||||
], []);
|
], []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-white">
|
<div className="min-h-screen bg-white">
|
||||||
<PageHeader
|
<section className="pt-32 pb-16">
|
||||||
title="关于我们"
|
<div className="container-wide">
|
||||||
description="了解睿新致远的品牌故事。我们不只是技术供应商，更是您数字化转型的成长伙伴。以智慧连接数字趋势，以伙伴身份陪您成长。"
|
<PageNav items={[{ label: '关于我们' }]} />
|
||||||
/>
|
|
||||||
|
|
||||||
<div ref={contentRef} className="container-wide py-12 md:py-16">
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
|
||||||
transition={{ duration: 0.6 }}
|
|
||||||
className="max-w-4xl mx-auto space-y-8"
|
|
||||||
>
|
|
||||||
<div className="bg-[#FFFBF5] rounded-2xl p-8 border border-[#E5E5E5]">
|
|
||||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6">睿新的选择</h2>
|
|
||||||
<p className="text-[#5C5C5C] mb-6 leading-relaxed">
|
|
||||||
所以我们选择了一条不同的路。
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="mb-6">
|
|
||||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-3">智连未来</h3>
|
|
||||||
<p className="text-[#5C5C5C] mb-3 leading-relaxed">
|
|
||||||
我们坚持对行业趋势的深度研究，不追逐昙花一现的概念。
|
|
||||||
</p>
|
|
||||||
<p className="text-[#5C5C5C] mb-3 leading-relaxed">
|
|
||||||
每一次方案，都源于对您业务场景的洞察；
|
|
||||||
</p>
|
|
||||||
<p className="text-[#5C5C5C] leading-relaxed">
|
|
||||||
每一次连接，都为了让技术真正服务于您的未来。
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-3">成长伙伴</h3>
|
|
||||||
<p className="text-[#5C5C5C] mb-3 leading-relaxed">
|
|
||||||
我们不把“项目交付”当作终点。
|
|
||||||
</p>
|
|
||||||
<p className="text-[#5C5C5C] mb-3 leading-relaxed">
|
|
||||||
您的业务增长了吗？您的团队能力提升了吗？
|
|
||||||
</p>
|
|
||||||
<p className="text-[#5C5C5C] leading-relaxed">
|
|
||||||
您下一次遇到难题时，还会第一个想到我们吗？
|
|
||||||
</p>
|
|
||||||
<p className="text-[#5C5C5C] mt-3 leading-relaxed">
|
|
||||||
这些问题，比“项目是否按时交付”更让我们在意。
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-[#FFFBF5] rounded-2xl p-8 border border-[#E5E5E5]">
|
|
||||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6">品牌承诺</h2>
|
|
||||||
<p className="text-[#5C5C5C] mb-6 leading-relaxed">
|
|
||||||
我们承诺：
|
|
||||||
</p>
|
|
||||||
<ul className="space-y-3 mb-6">
|
|
||||||
<li className="flex items-start gap-3">
|
|
||||||
<span className="text-green-600 font-bold">✅</span>
|
|
||||||
<span className="text-[#5C5C5C]">不卖您用不上的技术</span>
|
|
||||||
</li>
|
|
||||||
<li className="flex items-start gap-3">
|
|
||||||
<span className="text-green-600 font-bold">✅</span>
|
|
||||||
<span className="text-[#5C5C5C]">不说不懂业务的术语</span>
|
|
||||||
</li>
|
|
||||||
<li className="flex items-start gap-3">
|
|
||||||
<span className="text-green-600 font-bold">✅</span>
|
|
||||||
<span className="text-[#5C5C5C]">不做路过就忘的“一锤子买卖”</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<p className="text-[#5C5C5C] leading-relaxed font-medium">
|
|
||||||
我们只做一件事：成为您数字化转型路上，信得过的成长伙伴。
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<FlipClock
|
|
||||||
years={operationTime.years}
|
|
||||||
months={operationTime.months}
|
|
||||||
days={operationTime.days}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ duration: 0.6, delay: 0.2 }}
|
transition={{ duration: 0.5 }}
|
||||||
className="grid grid-cols-2 md:grid-cols-4 gap-6"
|
className="max-w-3xl"
|
||||||
>
|
>
|
||||||
{STATS.map((stat, idx) => (
|
<p className="text-sm font-medium text-[#C41E3A] mb-4 tracking-wide uppercase">About</p>
|
||||||
<Card key={idx} className="text-center border-[#E5E5E5]">
|
<h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6 tracking-tight">
|
||||||
<CardContent className="pt-6">
|
关于我们
|
||||||
<div className="text-3xl sm:text-4xl font-bold text-[#C41E3A] mb-2">{stat.value}</div>
|
</h1>
|
||||||
<div className="text-sm text-[#5C5C5C]">{stat.label}</div>
|
<p className="text-lg text-[#595959] leading-relaxed">
|
||||||
</CardContent>
|
企业需要的，不是一个高高在上的专家，也不是一个做完就跑的卖家，而是一个能坐下来、一起想办法的同行者。
|
||||||
</Card>
|
</p>
|
||||||
))}
|
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<motion.div
|
<section className="pb-16">
|
||||||
initial={{ opacity: 0, y: 20 }}
|
<div className="container-wide">
|
||||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
<div className="max-w-4xl mx-auto space-y-8">
|
||||||
transition={{ duration: 0.6, delay: 0.3 }}
|
<motion.div
|
||||||
className="mb-16"
|
initial={{ opacity: 0, y: 20 }}
|
||||||
>
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 text-center">核心价值观</h2>
|
viewport={{ once: true }}
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
transition={{ duration: 0.5 }}
|
||||||
{values.map((value, idx) => (
|
className="p-8 rounded-xl border border-[#E5E5E5]"
|
||||||
<motion.div
|
>
|
||||||
key={value.title}
|
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6">关于 睿新致遠</h2>
|
||||||
initial={{ opacity: 0, y: 20 }}
|
<p className="text-xl font-semibold text-[#1C1C1C] mb-4">智连未来，成长伙伴</p>
|
||||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
<p className="text-[#595959] mb-6 leading-relaxed">企业需要的，不是一个高高在上的专家，也不是一个做完就跑的卖家，而是一个能坐下来、一起想办法的同行者。</p>
|
||||||
transition={{ duration: 0.5, delay: 0.4 + idx * 0.1 }}
|
|
||||||
className="flex items-start gap-4 p-6 bg-[#FFFBF5] rounded-xl border border-[#E5E5E5] hover:border-[#1C1C1C] transition-all duration-300"
|
<div className="mb-6">
|
||||||
>
|
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-3">智连未来</h3>
|
||||||
<div className="w-12 h-12 rounded-lg bg-[#C41E3A] flex items-center justify-center shrink-0">
|
<p className="text-[#595959] mb-2 leading-relaxed">我们坚持对行业趋势的深度研究，不追逐昙花一现的概念。</p>
|
||||||
<value.icon className="w-6 h-6 text-white" />
|
<p className="text-[#595959] mb-2 leading-relaxed">每一次方案，都源于对您业务场景的洞察；</p>
|
||||||
|
<p className="text-[#595959] leading-relaxed">每一次连接，都为了让技术真正服务于您的未来。</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-3">成长伙伴</h3>
|
||||||
|
<p className="text-[#595959] mb-2 leading-relaxed">我们不把"项目交付"当作终点。</p>
|
||||||
|
<p className="text-[#595959] mb-2 leading-relaxed">您的业务增长了吗？您的团队能力提升了吗？</p>
|
||||||
|
<p className="text-[#595959] mb-2 leading-relaxed">您下一次遇到难题时，还会第一个想到我们吗？</p>
|
||||||
|
<p className="text-[#595959] mt-3 leading-relaxed">这些问题，比"项目是否按时交付"更让我们在意。</p>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.5, delay: 0.1 }}
|
||||||
|
className="p-8 rounded-xl border border-[#E5E5E5]"
|
||||||
|
>
|
||||||
|
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6">品牌承诺</h2>
|
||||||
|
<p className="text-[#595959] mb-4 leading-relaxed">我们承诺：</p>
|
||||||
|
<ul className="space-y-2 mb-6">
|
||||||
|
<li className="flex items-start gap-3">
|
||||||
|
<span className="text-[#C41E3A] font-bold">✓</span>
|
||||||
|
<span className="text-[#595959]">不卖您用不上的技术</span>
|
||||||
|
</li>
|
||||||
|
<li className="flex items-start gap-3">
|
||||||
|
<span className="text-[#C41E3A] font-bold">✓</span>
|
||||||
|
<span className="text-[#595959]">不说不懂业务的术语</span>
|
||||||
|
</li>
|
||||||
|
<li className="flex items-start gap-3">
|
||||||
|
<span className="text-[#C41E3A] font-bold">✓</span>
|
||||||
|
<span className="text-[#595959]">不做路过就忘的"一锤子买卖"</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p className="text-[#1C1C1C] leading-relaxed font-medium">
|
||||||
|
我们只做一件事：成为您数字化转型路上，信得过的成长伙伴。
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<FlipClock
|
||||||
|
years={operationTime.years}
|
||||||
|
months={operationTime.months}
|
||||||
|
days={operationTime.days}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
className="grid grid-cols-2 md:grid-cols-4 gap-4"
|
||||||
|
>
|
||||||
|
{STATS.map((stat, idx) => (
|
||||||
|
<div key={idx} className="p-6 bg-[#F5F5F5] rounded-lg text-center">
|
||||||
|
<div className="text-3xl font-bold text-[#C41E3A] mb-1">{stat.value}</div>
|
||||||
|
<div className="text-sm text-[#595959]">{stat.label}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
>
|
||||||
|
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 text-center">核心价值观</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
{values.map((value) => (
|
||||||
|
<div
|
||||||
|
key={value.title}
|
||||||
|
className="flex items-start gap-4 p-6 rounded-xl border border-[#E5E5E5] hover:border-[#C41E3A]/30 transition-colors"
|
||||||
|
>
|
||||||
|
<div className="w-10 h-10 rounded-lg bg-[#FEF2F4] flex items-center justify-center shrink-0">
|
||||||
|
<value.icon className="w-5 h-5 text-[#C41E3A]" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-[#1C1C1C] mb-1">{value.title}</h3>
|
||||||
|
<p className="text-sm text-[#595959]">{value.description}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
>
|
||||||
|
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 text-center">发展历程</h2>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{milestones.map((milestone) => (
|
||||||
|
<div
|
||||||
|
key={milestone.title}
|
||||||
|
className="flex flex-col md:flex-row md:items-start gap-3 p-5 rounded-lg border border-[#E5E5E5]"
|
||||||
|
>
|
||||||
|
<div className="md:w-28 shrink-0">
|
||||||
|
<span className="text-sm font-medium text-[#C41E3A]">{milestone.date}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3 className="font-semibold text-[#1C1C1C] mb-1 text-sm">{milestone.title}</h3>
|
||||||
|
<p className="text-sm text-[#595959]">{milestone.description}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
className="p-8 rounded-xl border border-[#E5E5E5]"
|
||||||
|
>
|
||||||
|
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 text-center">联系我们</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-10 h-10 bg-[#FEF2F4] rounded-lg flex items-center justify-center">
|
||||||
|
<MapPin className="w-5 h-5 text-[#C41E3A]" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 className="font-semibold text-lg mb-2 text-[#1C1C1C]">{value.title}</h3>
|
<p className="text-xs text-[#595959]">公司地址</p>
|
||||||
<p className="text-[#5C5C5C] text-sm">{value.description}</p>
|
<p className="text-sm font-medium text-[#1C1C1C]">{COMPANY_INFO.address}</p>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
|
||||||
transition={{ duration: 0.6, delay: 0.5 }}
|
|
||||||
className="mb-16"
|
|
||||||
>
|
|
||||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 text-center">发展历程</h2>
|
|
||||||
<div className="space-y-6">
|
|
||||||
{milestones.map((milestone, idx) => (
|
|
||||||
<motion.div
|
|
||||||
key={milestone.title}
|
|
||||||
initial={{ opacity: 0, x: -20 }}
|
|
||||||
animate={isContentInView ? { opacity: 1, x: 0 } : {}}
|
|
||||||
transition={{ duration: 0.5, delay: 0.6 + idx * 0.1 }}
|
|
||||||
className="flex flex-col md:flex-row md:items-start gap-4 p-6 bg-[#FFFBF5] rounded-xl border border-[#E5E5E5]"
|
|
||||||
>
|
|
||||||
<div className="md:w-32 shrink-0">
|
|
||||||
<span className="text-sm font-medium text-[#C41E3A]">{milestone.date}</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex-1">
|
|
||||||
<h3 className="font-semibold text-[#1A1A2E] mb-1">{milestone.title}</h3>
|
|
||||||
<p className="text-[#718096] text-sm">{milestone.description}</p>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
|
||||||
transition={{ duration: 0.6, delay: 0.7 }}
|
|
||||||
className="bg-[#FFFBF5] rounded-2xl p-8 border border-[#E5E5E5]"
|
|
||||||
>
|
|
||||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 text-center">联系我们</h2>
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="p-2 bg-white rounded-lg">
|
|
||||||
<MapPin className="w-5 h-5 text-[#C41E3A]" />
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div className="flex items-center gap-3">
|
||||||
<p className="text-sm text-[#5C5C5C]">公司地址</p>
|
<div className="w-10 h-10 bg-[#FEF2F4] rounded-lg flex items-center justify-center">
|
||||||
<p className="text-sm font-medium text-[#1C1C1C]">{COMPANY_INFO.address}</p>
|
<Mail className="w-5 h-5 text-[#C41E3A]" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-[#595959]">电子邮箱</p>
|
||||||
|
<p className="text-sm font-medium text-[#1C1C1C]">{COMPANY_INFO.email}</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-3">
|
</motion.div>
|
||||||
<div className="p-2 bg-white rounded-lg">
|
</div>
|
||||||
<Mail className="w-5 h-5 text-[#C41E3A]" />
|
</div>
|
||||||
</div>
|
</section>
|
||||||
<div>
|
|
||||||
<p className="text-sm text-[#5C5C5C]">电子邮箱</p>
|
|
||||||
<p className="text-sm font-medium text-[#1C1C1C]">{COMPANY_INFO.email}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,209 +0,0 @@
|
|||||||
import { render, screen } from '@testing-library/react';
|
|
||||||
import '@testing-library/jest-dom';
|
|
||||||
import { CaseDetailClient } from './client';
|
|
||||||
|
|
||||||
interface TestCaseItem {
|
|
||||||
id: string;
|
|
||||||
title: string;
|
|
||||||
excerpt: string;
|
|
||||||
content: string;
|
|
||||||
category: string;
|
|
||||||
slug: string;
|
|
||||||
date: string;
|
|
||||||
image?: string;
|
|
||||||
challenge: string;
|
|
||||||
solution: string;
|
|
||||||
keyMoments: { title: string; description: string }[];
|
|
||||||
results: { label: string; value: string }[];
|
|
||||||
testimonial: { quote: string; author: string; role: string };
|
|
||||||
duration: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
jest.mock('next/navigation', () => ({
|
|
||||||
useRouter: () => ({
|
|
||||||
push: jest.fn(),
|
|
||||||
back: jest.fn(),
|
|
||||||
forward: jest.fn(),
|
|
||||||
}),
|
|
||||||
}));
|
|
||||||
|
|
||||||
jest.mock('next/link', () => {
|
|
||||||
const MockLink = ({ children, href }: { children: React.ReactNode; href: string }) => {
|
|
||||||
return <a href={href}>{children}</a>;
|
|
||||||
};
|
|
||||||
MockLink.displayName = 'MockLink';
|
|
||||||
return MockLink;
|
|
||||||
});
|
|
||||||
|
|
||||||
const mockCaseItem: TestCaseItem = {
|
|
||||||
id: 'test-case',
|
|
||||||
title: '测试案例标题',
|
|
||||||
excerpt: '这是一个测试案例的描述',
|
|
||||||
content: '这是测试案例的详细内容',
|
|
||||||
category: '制造业',
|
|
||||||
slug: 'test-case',
|
|
||||||
date: '2026-03-27',
|
|
||||||
challenge: '这是客户面临的挑战描述',
|
|
||||||
solution: '这是我们的解决方案描述',
|
|
||||||
keyMoments: [
|
|
||||||
{ title: '关键时刻一', description: '关键时刻一的详细描述' },
|
|
||||||
{ title: '关键时刻二', description: '关键时刻二的详细描述' },
|
|
||||||
],
|
|
||||||
results: [
|
|
||||||
{ label: '运营成本', value: '降低25%' },
|
|
||||||
{ label: '设备故障响应', value: '缩短85%' },
|
|
||||||
{ label: '排产周期', value: '从1周缩至半天' },
|
|
||||||
],
|
|
||||||
testimonial: {
|
|
||||||
quote: '这是客户证言内容',
|
|
||||||
author: '测试客户',
|
|
||||||
role: 'CTO',
|
|
||||||
},
|
|
||||||
duration: '2年',
|
|
||||||
};
|
|
||||||
|
|
||||||
describe('CaseDetailClient', () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
jest.clearAllMocks();
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('Rendering', () => {
|
|
||||||
it('should render case detail page', () => {
|
|
||||||
const { container } = render(<CaseDetailClient caseItem={mockCaseItem} />);
|
|
||||||
expect(container.firstChild).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render case title', () => {
|
|
||||||
render(<CaseDetailClient caseItem={mockCaseItem} />);
|
|
||||||
const title = screen.getByRole('heading', { level: 1 });
|
|
||||||
expect(title).toBeInTheDocument();
|
|
||||||
expect(title).toHaveTextContent('测试案例标题');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render case excerpt', () => {
|
|
||||||
render(<CaseDetailClient caseItem={mockCaseItem} />);
|
|
||||||
const excerpts = screen.getAllByText('这是一个测试案例的描述');
|
|
||||||
expect(excerpts.length).toBeGreaterThan(0);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render case industry badge', () => {
|
|
||||||
render(<CaseDetailClient caseItem={mockCaseItem} />);
|
|
||||||
const categories = screen.getAllByText('制造业');
|
|
||||||
expect(categories.length).toBeGreaterThan(0);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render challenge content', () => {
|
|
||||||
render(<CaseDetailClient caseItem={mockCaseItem} />);
|
|
||||||
expect(screen.getByText('这是客户面临的挑战描述')).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render solution content', () => {
|
|
||||||
render(<CaseDetailClient caseItem={mockCaseItem} />);
|
|
||||||
expect(screen.getByText('这是我们的解决方案描述')).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render results data', () => {
|
|
||||||
render(<CaseDetailClient caseItem={mockCaseItem} />);
|
|
||||||
expect(screen.getByText('降低25%')).toBeInTheDocument();
|
|
||||||
expect(screen.getByText('缩短85%')).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render testimonial', () => {
|
|
||||||
render(<CaseDetailClient caseItem={mockCaseItem} />);
|
|
||||||
expect(screen.getByText('这是客户证言内容')).toBeInTheDocument();
|
|
||||||
const authors = screen.getAllByText('测试客户');
|
|
||||||
expect(authors.length).toBeGreaterThan(0);
|
|
||||||
const roles = screen.getAllByText('CTO');
|
|
||||||
expect(roles.length).toBeGreaterThan(0);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render contact button', () => {
|
|
||||||
render(<CaseDetailClient caseItem={mockCaseItem} />);
|
|
||||||
const contactButton = screen.getByRole('link', { name: /联系我们/i });
|
|
||||||
expect(contactButton).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render duration in sidebar', () => {
|
|
||||||
render(<CaseDetailClient caseItem={mockCaseItem} />);
|
|
||||||
expect(screen.getByText('2年')).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('Sections', () => {
|
|
||||||
it('should render customer challenges section', () => {
|
|
||||||
render(<CaseDetailClient caseItem={mockCaseItem} />);
|
|
||||||
const section = screen.getByText('客户遇到的成长瓶颈');
|
|
||||||
expect(section).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render solution section', () => {
|
|
||||||
render(<CaseDetailClient caseItem={mockCaseItem} />);
|
|
||||||
const section = screen.getByText('我们如何智连未来');
|
|
||||||
expect(section).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render growth story section with key moments', () => {
|
|
||||||
render(<CaseDetailClient caseItem={mockCaseItem} />);
|
|
||||||
const section = screen.getByText('共同成长的故事');
|
|
||||||
expect(section).toBeInTheDocument();
|
|
||||||
expect(screen.getByText('关键时刻一')).toBeInTheDocument();
|
|
||||||
expect(screen.getByText('关键时刻二')).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render achievements section with results', () => {
|
|
||||||
render(<CaseDetailClient caseItem={mockCaseItem} />);
|
|
||||||
const section = screen.getByText('今天，他们走到了哪里');
|
|
||||||
expect(section).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render testimonial section', () => {
|
|
||||||
render(<CaseDetailClient caseItem={mockCaseItem} />);
|
|
||||||
const section = screen.getByText('客户证言精选');
|
|
||||||
expect(section).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('Conditional Rendering', () => {
|
|
||||||
it('should not render key moments section when empty', () => {
|
|
||||||
const caseWithoutMoments = { ...mockCaseItem, keyMoments: [] };
|
|
||||||
render(<CaseDetailClient caseItem={caseWithoutMoments} />);
|
|
||||||
expect(screen.queryByText('共同成长的故事')).not.toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should not render results section when empty', () => {
|
|
||||||
const caseWithoutResults = { ...mockCaseItem, results: [] };
|
|
||||||
render(<CaseDetailClient caseItem={caseWithoutResults} />);
|
|
||||||
expect(screen.queryByText('今天，他们走到了哪里')).not.toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should not render testimonial section when absent', () => {
|
|
||||||
const caseWithoutTestimonial = { ...mockCaseItem, testimonial: undefined };
|
|
||||||
render(<CaseDetailClient caseItem={caseWithoutTestimonial} />);
|
|
||||||
expect(screen.queryByText('客户证言精选')).not.toBeInTheDocument();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('Navigation', () => {
|
|
||||||
it('should have back button', () => {
|
|
||||||
render(<CaseDetailClient caseItem={mockCaseItem} />);
|
|
||||||
const backButton = screen.getByRole('button', { name: /返回/i });
|
|
||||||
expect(backButton).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('Accessibility', () => {
|
|
||||||
it('should have container element', () => {
|
|
||||||
const { container } = render(<CaseDetailClient caseItem={mockCaseItem} />);
|
|
||||||
expect(container.firstChild).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should have proper heading hierarchy', () => {
|
|
||||||
render(<CaseDetailClient caseItem={mockCaseItem} />);
|
|
||||||
const h1 = screen.getByRole('heading', { level: 1 });
|
|
||||||
expect(h1).toBeInTheDocument();
|
|
||||||
|
|
||||||
const h2s = screen.getAllByRole('heading', { level: 2 });
|
|
||||||
expect(h2s.length).toBeGreaterThan(0);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,286 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import { useEffect, useRef, useState } from 'react';
|
|
||||||
import { StaticLink } from '@/components/ui/static-link';
|
|
||||||
import { Button } from '@/components/ui/button';
|
|
||||||
import { Badge } from '@/components/ui/badge';
|
|
||||||
import { BackButton } from '@/components/ui/back-button';
|
|
||||||
import {
|
|
||||||
Target,
|
|
||||||
Quote,
|
|
||||||
Clock,
|
|
||||||
MessageCircle,
|
|
||||||
Award,
|
|
||||||
TrendingUp,
|
|
||||||
} from 'lucide-react';
|
|
||||||
|
|
||||||
interface CaseKeyMoment {
|
|
||||||
title: string;
|
|
||||||
description: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface CaseResult {
|
|
||||||
label: string;
|
|
||||||
value: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface CaseTestimonial {
|
|
||||||
quote: string;
|
|
||||||
author: string;
|
|
||||||
role: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface CaseItem {
|
|
||||||
id: string;
|
|
||||||
title: string;
|
|
||||||
excerpt: string;
|
|
||||||
content: string;
|
|
||||||
category: string;
|
|
||||||
slug: string;
|
|
||||||
date: string;
|
|
||||||
image?: string;
|
|
||||||
/** 客户面临的挑战 */
|
|
||||||
challenge: string;
|
|
||||||
/** 我们的解决方案 */
|
|
||||||
solution: string;
|
|
||||||
/** 关键时刻 */
|
|
||||||
keyMoments: CaseKeyMoment[];
|
|
||||||
/** 成果数据 */
|
|
||||||
results: CaseResult[];
|
|
||||||
/** 客户证言 */
|
|
||||||
testimonial?: CaseTestimonial;
|
|
||||||
/** 合作时长 */
|
|
||||||
duration: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface CaseDetailClientProps {
|
|
||||||
caseItem: CaseItem;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function CaseDetailClient({ caseItem }: CaseDetailClientProps) {
|
|
||||||
const [isVisible, setIsVisible] = useState(false);
|
|
||||||
const contentRef = useRef<HTMLDivElement>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const observer = new IntersectionObserver(
|
|
||||||
([entry]) => {
|
|
||||||
if (entry?.isIntersecting) {
|
|
||||||
setIsVisible(true);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ threshold: 0.1 }
|
|
||||||
);
|
|
||||||
|
|
||||||
if (contentRef.current) {
|
|
||||||
observer.observe(contentRef.current);
|
|
||||||
}
|
|
||||||
|
|
||||||
return () => observer.disconnect();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen bg-white">
|
|
||||||
<div className="relative overflow-hidden bg-gradient-to-b from-[#FAFAFA] to-white">
|
|
||||||
<div className="container-wide relative z-10 pt-32 pb-20">
|
|
||||||
<BackButton />
|
|
||||||
<div className="max-w-4xl mt-8">
|
|
||||||
<Badge className="mb-4 bg-[#C41E3A]/10 text-[#C41E3A] hover:bg-[#C41E3A]/20">
|
|
||||||
{caseItem.category}
|
|
||||||
</Badge>
|
|
||||||
<h1 className="text-3xl sm:text-4xl lg:text-5xl font-semibold text-[#1C1C1C] mb-2">
|
|
||||||
{caseItem.title}
|
|
||||||
</h1>
|
|
||||||
<p className="text-lg text-[#5C5C5C]">{caseItem.excerpt}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div ref={contentRef} className="container-wide py-12 md:py-16">
|
|
||||||
<div
|
|
||||||
className={`
|
|
||||||
grid lg:grid-cols-3 gap-8 lg:gap-12
|
|
||||||
opacity-0 translate-y-4
|
|
||||||
${isVisible ? 'animate-fade-in-up' : ''}
|
|
||||||
`}
|
|
||||||
>
|
|
||||||
<div className="lg:col-span-2 space-y-12">
|
|
||||||
{/* 客户遇到的成长瓶颈 */}
|
|
||||||
<section className="bg-gradient-to-br from-[#FFFBF5] to-white rounded-2xl p-8 border border-[#C41E3A]/20">
|
|
||||||
<div className="flex items-center gap-3 mb-6">
|
|
||||||
<div className="w-12 h-12 bg-[#C41E3A] rounded-xl flex items-center justify-center">
|
|
||||||
<MessageCircle className="w-6 h-6 text-white" />
|
|
||||||
</div>
|
|
||||||
<h2 className="text-2xl font-semibold text-[#1C1C1C]">
|
|
||||||
客户遇到的成长瓶颈
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<p className="text-[#5C5C5C] leading-relaxed text-lg">
|
|
||||||
{caseItem.challenge}
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* 我们如何智连未来 */}
|
|
||||||
<section className="bg-gradient-to-br from-[#FFFBF5] to-white rounded-2xl p-8 border border-[#C41E3A]/20">
|
|
||||||
<div className="flex items-center gap-3 mb-6">
|
|
||||||
<div className="w-12 h-12 bg-[#C41E3A] rounded-xl flex items-center justify-center">
|
|
||||||
<Target className="w-6 h-6 text-white" />
|
|
||||||
</div>
|
|
||||||
<h2 className="text-2xl font-semibold text-[#1C1C1C]">
|
|
||||||
我们如何智连未来
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<div className="prose prose-base max-w-none [&_h3]:text-xl [&_h3]:font-semibold [&_h3]:text-[#1C1C1C] [&_h3]:mt-8 [&_h3]:mb-4 [&_p]:text-[#5C5C5C] [&_p]:leading-[1.8] [&_p]:mb-4 [&_p]:text-base">
|
|
||||||
<p className="text-[#5C5C5C] leading-relaxed text-lg">
|
|
||||||
{caseItem.solution}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* 共同成长的故事 */}
|
|
||||||
{caseItem.keyMoments && caseItem.keyMoments.length > 0 && (
|
|
||||||
<section className="bg-gradient-to-br from-[#FFFBF5] to-white rounded-2xl p-8 border border-[#C41E3A]/20">
|
|
||||||
<div className="flex items-center gap-3 mb-6">
|
|
||||||
<div className="w-12 h-12 bg-[#C41E3A] rounded-xl flex items-center justify-center">
|
|
||||||
<Clock className="w-6 h-6 text-white" />
|
|
||||||
</div>
|
|
||||||
<h2 className="text-2xl font-semibold text-[#1C1C1C]">
|
|
||||||
共同成长的故事
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-4">
|
|
||||||
{caseItem.keyMoments.map((moment, index) => (
|
|
||||||
<div
|
|
||||||
key={index}
|
|
||||||
className="p-4 bg-white rounded-lg border border-[#E5E5E5]"
|
|
||||||
>
|
|
||||||
<div className="flex items-start gap-3">
|
|
||||||
<Quote className="w-5 h-5 text-[#C41E3A] flex-shrink-0 mt-0.5" />
|
|
||||||
<div>
|
|
||||||
<h4 className="font-semibold text-[#1C1C1C] mb-2">
|
|
||||||
{moment.title}
|
|
||||||
</h4>
|
|
||||||
<p className="text-sm text-[#737373]">
|
|
||||||
{moment.description}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 今天，他们走到了哪里 */}
|
|
||||||
{caseItem.results && caseItem.results.length > 0 && (
|
|
||||||
<section className="bg-gradient-to-br from-[#FFFBF5] to-white rounded-2xl p-8 border border-[#C41E3A]/20">
|
|
||||||
<div className="flex items-center gap-3 mb-6">
|
|
||||||
<div className="w-12 h-12 bg-[#C41E3A] rounded-xl flex items-center justify-center">
|
|
||||||
<Award className="w-6 h-6 text-white" />
|
|
||||||
</div>
|
|
||||||
<h2 className="text-2xl font-semibold text-[#1C1C1C]">
|
|
||||||
今天，他们走到了哪里
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<div className="grid sm:grid-cols-3 gap-4">
|
|
||||||
{caseItem.results.map((result, index) => (
|
|
||||||
<div
|
|
||||||
key={index}
|
|
||||||
className="p-6 bg-white rounded-lg border border-[#E5E5E5] hover:border-[#C41E3A] transition-colors"
|
|
||||||
>
|
|
||||||
<TrendingUp className="w-8 h-8 text-[#C41E3A] mb-3" />
|
|
||||||
<div className="text-2xl font-semibold text-[#C41E3A] mb-1">
|
|
||||||
{result.value}
|
|
||||||
</div>
|
|
||||||
<div className="text-sm text-[#737373]">
|
|
||||||
{result.label}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 客户证言精选 */}
|
|
||||||
{caseItem.testimonial && (
|
|
||||||
<section className="bg-gradient-to-br from-[#FFFBF5] to-white rounded-2xl p-8 border border-[#C41E3A]/20">
|
|
||||||
<div className="flex items-center gap-3 mb-6">
|
|
||||||
<div className="w-12 h-12 bg-[#C41E3A] rounded-xl flex items-center justify-center">
|
|
||||||
<Quote className="w-6 h-6 text-white" />
|
|
||||||
</div>
|
|
||||||
<h2 className="text-2xl font-semibold text-[#1C1C1C]">
|
|
||||||
客户证言精选
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<div className="p-6 bg-white rounded-lg border border-[#E5E5E5]">
|
|
||||||
<Quote className="w-8 h-8 text-[#C41E3A] mb-4" />
|
|
||||||
<p className="text-lg text-[#1C1C1C] leading-relaxed mb-4">
|
|
||||||
{caseItem.testimonial.quote}
|
|
||||||
</p>
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="w-12 h-12 bg-[#C41E3A] rounded-full flex items-center justify-center">
|
|
||||||
<span className="text-white font-semibold">客</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="font-semibold text-[#1C1C1C]">
|
|
||||||
{caseItem.testimonial.author}
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-[#737373]">
|
|
||||||
{caseItem.testimonial.role}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 侧边栏 */}
|
|
||||||
<div className="space-y-6">
|
|
||||||
<div className="p-6 bg-[#FAFAFA] rounded-lg border border-[#E5E5E5]">
|
|
||||||
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-4">
|
|
||||||
项目信息
|
|
||||||
</h3>
|
|
||||||
<dl className="space-y-3">
|
|
||||||
<div>
|
|
||||||
<dt className="text-sm text-[#737373]">客户名称</dt>
|
|
||||||
<dd className="text-[#1C1C1C] font-medium">
|
|
||||||
{caseItem.testimonial?.author || '客户企业'}
|
|
||||||
</dd>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<dt className="text-sm text-[#737373]">行业领域</dt>
|
|
||||||
<dd className="text-[#1C1C1C] font-medium">
|
|
||||||
{caseItem.category}
|
|
||||||
</dd>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<dt className="text-sm text-[#737373]">合作时长</dt>
|
|
||||||
<dd className="text-[#1C1C1C] font-medium">
|
|
||||||
{caseItem.duration || '3年'}
|
|
||||||
</dd>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<dt className="text-sm text-[#737373]">发布时间</dt>
|
|
||||||
<dd className="text-[#1C1C1C] font-medium">{caseItem.date}</dd>
|
|
||||||
</div>
|
|
||||||
</dl>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="p-6 bg-gradient-to-br from-[#C41E3A] to-[#8B1429] rounded-lg text-white">
|
|
||||||
<h3 className="text-lg font-semibold mb-2">想要了解更多？</h3>
|
|
||||||
<p className="text-sm text-white/80 mb-4">
|
|
||||||
联系我们的专家团队，获取定制化解决方案
|
|
||||||
</p>
|
|
||||||
<Button
|
|
||||||
className="w-full bg-white text-[#C41E3A] hover:bg-white/90"
|
|
||||||
asChild
|
|
||||||
>
|
|
||||||
<StaticLink href="/contact">联系我们</StaticLink>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
import { Metadata } from 'next';
|
|
||||||
import { notFound } from 'next/navigation';
|
|
||||||
import { CASES } from '@/lib/constants';
|
|
||||||
import { CaseDetailClient } from './client';
|
|
||||||
|
|
||||||
export async function generateStaticParams() {
|
|
||||||
return CASES.map((caseItem) => ({
|
|
||||||
id: caseItem.id,
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
|
|
||||||
const { id } = await params;
|
|
||||||
const caseItem = CASES.find((c) => c.id === id);
|
|
||||||
|
|
||||||
if (!caseItem) {
|
|
||||||
return {
|
|
||||||
title: '案例未找到',
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
title: `${caseItem.title} - 睿新致远`,
|
|
||||||
description: caseItem.description,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export default async function CaseDetailPage({ params }: { params: Promise<{ id: string }> }) {
|
|
||||||
const { id } = await params;
|
|
||||||
const caseItem = CASES.find((c) => c.id === id);
|
|
||||||
|
|
||||||
if (!caseItem) {
|
|
||||||
notFound();
|
|
||||||
}
|
|
||||||
|
|
||||||
return <CaseDetailClient caseItem={{
|
|
||||||
id: caseItem.id,
|
|
||||||
title: caseItem.title,
|
|
||||||
excerpt: caseItem.description,
|
|
||||||
content: caseItem.solution || '',
|
|
||||||
category: caseItem.industry,
|
|
||||||
slug: caseItem.id,
|
|
||||||
date: caseItem.date,
|
|
||||||
image: caseItem.image,
|
|
||||||
challenge: caseItem.challenge,
|
|
||||||
solution: caseItem.solution,
|
|
||||||
keyMoments: caseItem.keyMoments,
|
|
||||||
results: caseItem.results,
|
|
||||||
testimonial: caseItem.testimonial,
|
|
||||||
duration: caseItem.duration,
|
|
||||||
}} />;
|
|
||||||
}
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
import { Metadata } from 'next';
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
|
||||||
title: '客户案例 - 睿新致远',
|
|
||||||
description: '与谁同行，决定能走多远',
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function CasesLayout({
|
|
||||||
children,
|
|
||||||
}: {
|
|
||||||
children: React.ReactNode;
|
|
||||||
}) {
|
|
||||||
return <>{children}</>;
|
|
||||||
}
|
|
||||||
@@ -1,255 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import { useState, useMemo, useRef, ChangeEvent } from 'react';
|
|
||||||
import { useInView } from 'framer-motion';
|
|
||||||
import { CASES } from '@/lib/constants';
|
|
||||||
import { Badge } from '@/components/ui/badge';
|
|
||||||
import { Input } from '@/components/ui/input';
|
|
||||||
import { Button } from '@/components/ui/button';
|
|
||||||
import { PageHeader } from '@/components/ui/page-header';
|
|
||||||
import { Search, ArrowLeft, Building2, Calendar, TrendingUp, ChevronLeft, ChevronRight, Filter } from 'lucide-react';
|
|
||||||
import { StaticLink } from '@/components/ui/static-link';
|
|
||||||
import { motion } from 'framer-motion';
|
|
||||||
|
|
||||||
const industries = ['全部', ...Array.from(new Set(CASES.map((c) => c.industry)))];
|
|
||||||
const ITEMS_PER_PAGE = 6;
|
|
||||||
|
|
||||||
export default function CasesPage() {
|
|
||||||
const [selectedIndustry, setSelectedIndustry] = useState('全部');
|
|
||||||
const [searchQuery, setSearchQuery] = useState('');
|
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
|
||||||
const contentRef = useRef(null);
|
|
||||||
const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
|
|
||||||
|
|
||||||
const filteredCases = useMemo(() => {
|
|
||||||
return CASES.filter((caseItem) => {
|
|
||||||
const matchesIndustry = selectedIndustry === '全部' || caseItem.industry === selectedIndustry;
|
|
||||||
const matchesSearch =
|
|
||||||
caseItem.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
||||||
caseItem.description.toLowerCase().includes(searchQuery.toLowerCase());
|
|
||||||
return matchesIndustry && matchesSearch;
|
|
||||||
});
|
|
||||||
}, [selectedIndustry, searchQuery]);
|
|
||||||
|
|
||||||
const totalPages = Math.ceil(filteredCases.length / ITEMS_PER_PAGE);
|
|
||||||
const paginatedCases = useMemo(() => {
|
|
||||||
const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
|
|
||||||
const endIndex = startIndex + ITEMS_PER_PAGE;
|
|
||||||
return filteredCases.slice(startIndex, endIndex);
|
|
||||||
}, [filteredCases, currentPage]);
|
|
||||||
|
|
||||||
const handlePageChange = (page: number) => {
|
|
||||||
setCurrentPage(page);
|
|
||||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleIndustryChange = (industry: string) => {
|
|
||||||
setSelectedIndustry(industry);
|
|
||||||
setCurrentPage(1);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
|
|
||||||
setSearchQuery(e.target.value);
|
|
||||||
setCurrentPage(1);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen bg-white">
|
|
||||||
<PageHeader
|
|
||||||
title="与谁同行，决定能走多远"
|
|
||||||
description="我们与优秀的企业同行，共同成长，共创未来"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="container-wide relative z-10 py-16" ref={contentRef}>
|
|
||||||
<div className="max-w-6xl mx-auto">
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
|
||||||
transition={{ duration: 0.6 }}
|
|
||||||
className="mb-8 space-y-4"
|
|
||||||
>
|
|
||||||
<div className="flex flex-col md:flex-row gap-4 items-start md:items-center">
|
|
||||||
<div className="flex items-center gap-2 text-[#1C1C1C]">
|
|
||||||
<Filter className="w-5 h-5" />
|
|
||||||
<span className="font-medium">行业筛选：</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{industries.map((industry) => (
|
|
||||||
<Button
|
|
||||||
key={industry}
|
|
||||||
variant={selectedIndustry === industry ? 'default' : 'outline'}
|
|
||||||
onClick={() => handleIndustryChange(industry)}
|
|
||||||
className={
|
|
||||||
selectedIndustry === industry
|
|
||||||
? 'bg-[#C41E3A] hover:bg-[#A01830] text-white'
|
|
||||||
: ''
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{industry}
|
|
||||||
</Button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="relative max-w-md">
|
|
||||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[#5C5C5C] w-5 h-5" />
|
|
||||||
<Input
|
|
||||||
type="text"
|
|
||||||
placeholder="搜索案例..."
|
|
||||||
value={searchQuery}
|
|
||||||
onChange={handleSearchChange}
|
|
||||||
className="pl-10"
|
|
||||||
aria-label="搜索案例"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{paginatedCases.length === 0 ? (
|
|
||||||
<div className="text-center py-20">
|
|
||||||
<p className="text-xl text-[#5C5C5C]">没有找到相关案例</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<div className="grid md:grid-cols-2 gap-8">
|
|
||||||
{paginatedCases.map((caseItem, index) => (
|
|
||||||
<motion.div
|
|
||||||
key={caseItem.id}
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
|
||||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
||||||
>
|
|
||||||
<StaticLink
|
|
||||||
href={`/cases/${caseItem.id}`}
|
|
||||||
className="group bg-white rounded-2xl border border-[#E5E5E5] overflow-hidden hover:shadow-xl transition-all duration-300 block"
|
|
||||||
>
|
|
||||||
<div className="relative h-48 bg-gradient-to-br from-[#F5F5F5] to-[#E5E5E5] overflow-hidden">
|
|
||||||
<div className="absolute inset-0 flex items-center justify-center">
|
|
||||||
<Building2 className="w-24 h-24 text-[#C41E3A]/20 group-hover:scale-110 transition-transform duration-300" />
|
|
||||||
</div>
|
|
||||||
<div className="absolute top-4 right-4">
|
|
||||||
<Badge className="bg-white/90 text-[#1C1C1C] hover:bg-white">
|
|
||||||
{caseItem.industry}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="p-6">
|
|
||||||
<div className="flex items-center gap-2 mb-3">
|
|
||||||
<Building2 className="w-5 h-5 text-[#C41E3A]" />
|
|
||||||
<span className="font-semibold text-[#1C1C1C]">{caseItem.client}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3 className="text-xl font-bold text-[#1C1C1C] mb-3 group-hover:text-[#C41E3A] transition-colors">
|
|
||||||
{caseItem.title}
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<div className="flex flex-wrap gap-2 mb-4">
|
|
||||||
<Badge variant="secondary" className="flex items-center gap-1">
|
|
||||||
<Calendar className="w-3 h-3" />
|
|
||||||
{caseItem.duration}合作
|
|
||||||
</Badge>
|
|
||||||
{caseItem.tags.slice(0, 1).map((tag) => (
|
|
||||||
<Badge key={tag} variant="secondary" className="flex items-center gap-1">
|
|
||||||
<TrendingUp className="w-3 h-3" />
|
|
||||||
{tag}
|
|
||||||
</Badge>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p className="text-[#5C5C5C] text-sm line-clamp-2 mb-4">
|
|
||||||
{caseItem.description}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="flex items-center text-[#C41E3A] font-medium group-hover:translate-x-2 transition-transform">
|
|
||||||
查看详情
|
|
||||||
<ArrowLeft className="w-4 h-4 ml-2 rotate-180" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</StaticLink>
|
|
||||||
</motion.div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{totalPages > 1 && (
|
|
||||||
<div className="flex justify-center items-center gap-2 mt-8">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="icon"
|
|
||||||
onClick={() => handlePageChange(currentPage - 1)}
|
|
||||||
disabled={currentPage === 1}
|
|
||||||
>
|
|
||||||
<ChevronLeft className="w-4 h-4" />
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
{Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
|
|
||||||
<Button
|
|
||||||
key={page}
|
|
||||||
variant={currentPage === page ? 'default' : 'outline'}
|
|
||||||
size="icon"
|
|
||||||
onClick={() => handlePageChange(page)}
|
|
||||||
className={
|
|
||||||
currentPage === page
|
|
||||||
? 'bg-[#C41E3A] hover:bg-[#A01830] text-white'
|
|
||||||
: ''
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{page}
|
|
||||||
</Button>
|
|
||||||
))}
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="icon"
|
|
||||||
onClick={() => handlePageChange(currentPage + 1)}
|
|
||||||
disabled={currentPage === totalPages}
|
|
||||||
>
|
|
||||||
<ChevronRight className="w-4 h-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="text-center mt-4 text-[#5C5C5C] text-sm">
|
|
||||||
显示 {paginatedCases.length} 条，共 {filteredCases.length} 条案例
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
|
||||||
transition={{ duration: 0.6, delay: 0.4 }}
|
|
||||||
className="bg-[#F5F5F5] py-16"
|
|
||||||
>
|
|
||||||
<div className="container-wide text-center">
|
|
||||||
<h2 className="text-3xl font-bold text-[#1C1C1C] mb-6">
|
|
||||||
准备开始您的数字化转型之旅？
|
|
||||||
</h2>
|
|
||||||
<p className="text-lg text-[#5C5C5C] mb-8 max-w-2xl mx-auto">
|
|
||||||
让我们与您同行，共创美好未来
|
|
||||||
</p>
|
|
||||||
<div className="flex justify-center gap-4">
|
|
||||||
<StaticLink href="/contact">
|
|
||||||
<Button
|
|
||||||
size="lg"
|
|
||||||
variant="outline"
|
|
||||||
>
|
|
||||||
联系我们
|
|
||||||
</Button>
|
|
||||||
</StaticLink>
|
|
||||||
<StaticLink href="/contact">
|
|
||||||
<Button
|
|
||||||
size="lg"
|
|
||||||
className="bg-[#C41E3A] hover:bg-[#A01830] text-white"
|
|
||||||
>
|
|
||||||
立即咨询
|
|
||||||
<ArrowLeft className="ml-2 w-4 h-4 rotate-180" />
|
|
||||||
</Button>
|
|
||||||
</StaticLink>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,14 +1,16 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState, useEffect, useRef, Suspense } from 'react';
|
import { useState, useEffect, Suspense } from 'react';
|
||||||
import { useSearchParams } from 'next/navigation';
|
import { useSearchParams } from 'next/navigation';
|
||||||
import { z } from 'zod';
|
import { z } from 'zod';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Textarea } from '@/components/ui/textarea';
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
import { Toast } from '@/components/ui/toast';
|
import { Toast } from '@/components/ui/toast';
|
||||||
import { Mail, MapPin, Send, Loader2, Clock, HeadphonesIcon, CheckCircle2 } from 'lucide-react';
|
import { Mail, MapPin, Send, Loader2, Clock, HeadphonesIcon, CheckCircle2 } from 'lucide-react';
|
||||||
import { COMPANY_INFO } from '@/lib/constants';
|
import { COMPANY_INFO } from '@/lib/constants';
|
||||||
|
import { PageNav } from '@/components/layout/page-nav';
|
||||||
import { trackContactForm, trackConversion } from '@/lib/analytics';
|
import { trackContactForm, trackConversion } from '@/lib/analytics';
|
||||||
|
|
||||||
const contactFormSchema = z.object({
|
const contactFormSchema = z.object({
|
||||||
@@ -32,7 +34,6 @@ interface FormErrors {
|
|||||||
function ContactFormContent() {
|
function ContactFormContent() {
|
||||||
const searchParams = useSearchParams();
|
const searchParams = useSearchParams();
|
||||||
const isSuccessFromRedirect = searchParams.get('success') === 'true';
|
const isSuccessFromRedirect = searchParams.get('success') === 'true';
|
||||||
const [isVisible, setIsVisible] = useState(false);
|
|
||||||
const [showToast, setShowToast] = useState(isSuccessFromRedirect);
|
const [showToast, setShowToast] = useState(isSuccessFromRedirect);
|
||||||
const [toastMessage, setToastMessage] = useState(
|
const [toastMessage, setToastMessage] = useState(
|
||||||
isSuccessFromRedirect ? '表单提交成功！我们会尽快与您联系。' : ''
|
isSuccessFromRedirect ? '表单提交成功！我们会尽快与您联系。' : ''
|
||||||
@@ -50,13 +51,12 @@ function ContactFormContent() {
|
|||||||
message: '',
|
message: '',
|
||||||
});
|
});
|
||||||
const [errors, setErrors] = useState<FormErrors>({});
|
const [errors, setErrors] = useState<FormErrors>({});
|
||||||
const sectionRef = useRef<HTMLElement>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
requestAnimationFrame(() => {
|
if (isSuccessFromRedirect) {
|
||||||
setIsVisible(true);
|
setShowToast(true);
|
||||||
});
|
}
|
||||||
}, []);
|
}, [isSuccessFromRedirect]);
|
||||||
|
|
||||||
const validateField = (field: keyof ContactFormData, value: string) => {
|
const validateField = (field: keyof ContactFormData, value: string) => {
|
||||||
try {
|
try {
|
||||||
@@ -85,9 +85,9 @@ function ContactFormContent() {
|
|||||||
|
|
||||||
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
const result = contactFormSchema.safeParse(formData);
|
const result = contactFormSchema.safeParse(formData);
|
||||||
|
|
||||||
if (!result.success) {
|
if (!result.success) {
|
||||||
const fieldErrors: FormErrors = {};
|
const fieldErrors: FormErrors = {};
|
||||||
result.error.issues.forEach((issue) => {
|
result.error.issues.forEach((issue) => {
|
||||||
@@ -161,48 +161,46 @@ function ContactFormContent() {
|
|||||||
onClose={() => setShowToast(false)}
|
onClose={() => setShowToast(false)}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<section className="section-padding relative overflow-hidden" ref={sectionRef}>
|
|
||||||
<div className="absolute inset-0 pointer-events-none">
|
|
||||||
<div className="absolute inset-0 bg-gradient-radial from-[rgba(79,70,229,0.03)] via-transparent to-transparent" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="container-wide relative z-10">
|
<section className="pt-32 pb-16">
|
||||||
<div
|
<div className="container-wide">
|
||||||
className={`
|
<PageNav items={[{ label: '联系我们' }]} />
|
||||||
mb-16 opacity-0 translate-y-4
|
<motion.div
|
||||||
${isVisible ? 'animate-fade-in-up' : ''}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
`}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
className="max-w-3xl"
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-3 mb-4">
|
<p className="text-sm font-medium text-[#C41E3A] mb-4 tracking-wide uppercase">Contact</p>
|
||||||
<div className="w-8 h-px bg-linear-to-r from-[#1C1C1C] to-[#C41E3A]" />
|
<h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6 tracking-tight">
|
||||||
<span className="text-sm text-[#5C5C5C] tracking-wide" data-testid="page-badge">联系我们</span>
|
联系我们
|
||||||
</div>
|
|
||||||
<h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4">
|
|
||||||
开启 <span className="text-[#C41E3A] font-calligraphy">合作</span>
|
|
||||||
</h1>
|
</h1>
|
||||||
<p className="mt-4 text-[#5C5C5C] max-w-2xl" data-testid="page-description">
|
<p className="text-lg text-[#595959] leading-relaxed">
|
||||||
无论您有任何问题或合作意向，我们都很乐意与您交流
|
无论您有任何问题或合作意向，我们都很乐意与您交流
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="pb-16">
|
||||||
|
<div className="container-wide">
|
||||||
<div className="grid lg:grid-cols-5 gap-12 lg:gap-16">
|
<div className="grid lg:grid-cols-5 gap-12 lg:gap-16">
|
||||||
<div
|
<motion.div
|
||||||
className={`
|
initial={{ opacity: 0, y: 20 }}
|
||||||
lg:col-span-2 space-y-8 flex flex-col
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
opacity-0 translate-y-4
|
viewport={{ once: true }}
|
||||||
${isVisible ? 'animate-fade-in-up stagger-1' : ''}
|
transition={{ duration: 0.5 }}
|
||||||
`}
|
className="lg:col-span-2 space-y-6"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<h2 className="text-lg font-semibold text-[#1C1C1C] mb-6">联系方式</h2>
|
<h2 className="text-lg font-semibold text-[#1C1C1C] mb-6">联系方式</h2>
|
||||||
<div className="space-y-4" data-testid="contact-info">
|
<div className="space-y-4" data-testid="contact-info">
|
||||||
<div className="flex items-start gap-4 group" data-testid="email-info">
|
<div className="flex items-start gap-4 group" data-testid="email-info">
|
||||||
<div className="w-10 h-10 bg-[#C41E3A] rounded-md flex items-center justify-center shrink-0 transition-transform duration-200 group-hover:scale-105">
|
<div className="w-10 h-10 bg-[#FEF2F4] rounded-lg flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform duration-200">
|
||||||
<Mail className="w-5 h-5 text-white" />
|
<Mail className="w-5 h-5 text-[#C41E3A]" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p className="text-sm text-[#5C5C5C] mb-1">邮箱</p>
|
<p className="text-sm text-[#595959] mb-1">邮箱</p>
|
||||||
<a href={`mailto:${COMPANY_INFO.email}`} className="text-[#1C1C1C] hover:text-[#C41E3A] transition-colors duration-200" data-testid="email-link">
|
<a href={`mailto:${COMPANY_INFO.email}`} className="text-[#1C1C1C] hover:text-[#C41E3A] transition-colors duration-200" data-testid="email-link">
|
||||||
{COMPANY_INFO.email}
|
{COMPANY_INFO.email}
|
||||||
</a>
|
</a>
|
||||||
@@ -210,31 +208,29 @@ function ContactFormContent() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-start gap-4 group" data-testid="address-info">
|
<div className="flex items-start gap-4 group" data-testid="address-info">
|
||||||
<div className="w-10 h-10 bg-[#C41E3A] rounded-md flex items-center justify-center shrink-0 transition-transform duration-200 group-hover:scale-105">
|
<div className="w-10 h-10 bg-[#FEF2F4] rounded-lg flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform duration-200">
|
||||||
<MapPin className="w-5 h-5 text-white" />
|
<MapPin className="w-5 h-5 text-[#C41E3A]" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p className="text-sm text-[#5C5C5C] mb-1">地址</p>
|
<p className="text-sm text-[#595959] mb-1">地址</p>
|
||||||
<p className="text-[#1C1C1C]" data-testid="address-text">{COMPANY_INFO.address}</p>
|
<p className="text-[#1C1C1C]" data-testid="address-text">{COMPANY_INFO.address}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="bg-[#FFFBF5] p-5 rounded-lg border border-[#E5E5E5]" data-testid="work-hours-card">
|
<div className="p-5 rounded-xl border border-[#E5E5E5]" data-testid="work-hours-card">
|
||||||
<div className="flex items-center gap-2 mb-3">
|
<div className="flex items-center gap-2 mb-3">
|
||||||
<Clock className="w-4 h-4 text-[#C41E3A]" />
|
<Clock className="w-4 h-4 text-[#C41E3A]" />
|
||||||
<h2 className="text-sm font-medium text-[#1C1C1C]">工作时间</h2>
|
<h2 className="text-sm font-medium text-[#1C1C1C]">工作时间</h2>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-1">
|
<div className="flex justify-between text-sm" data-testid="work-hours-row">
|
||||||
<div className="flex justify-between text-sm" data-testid="work-hours-row">
|
<span className="text-[#595959]">周一至周五</span>
|
||||||
<span className="text-[#5C5C5C]">周一至周五</span>
|
<span className="text-[#C41E3A] font-medium">9:00 - 18:00</span>
|
||||||
<span className="text-[#C41E3A]">9:00 - 18:00</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="bg-[#FFFBF5] p-5 rounded-lg border border-[#E5E5E5]">
|
<div className="p-5 rounded-xl border border-[#E5E5E5]">
|
||||||
<div className="flex items-center gap-2 mb-3">
|
<div className="flex items-center gap-2 mb-3">
|
||||||
<HeadphonesIcon className="w-4 h-4 text-[#C41E3A]" />
|
<HeadphonesIcon className="w-4 h-4 text-[#C41E3A]" />
|
||||||
<h2 className="text-sm font-medium text-[#1C1C1C]">我们的承诺</h2>
|
<h2 className="text-sm font-medium text-[#1C1C1C]">我们的承诺</h2>
|
||||||
@@ -242,111 +238,111 @@ function ContactFormContent() {
|
|||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<div className="flex items-start gap-2">
|
<div className="flex items-start gap-2">
|
||||||
<div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 shrink-0" />
|
<div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 shrink-0" />
|
||||||
<p className="text-sm text-[#5C5C5C]">工作日 2 小时内快速响应您的咨询</p>
|
<p className="text-sm text-[#595959]">工作日 2 小时内快速响应您的咨询</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-start gap-2">
|
<div className="flex items-start gap-2">
|
||||||
<div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 shrink-0" />
|
<div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 shrink-0" />
|
||||||
<p className="text-sm text-[#5C5C5C]">提供免费的业务咨询和方案评估服务</p>
|
<p className="text-sm text-[#595959]">提供免费的业务咨询和方案评估服务</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-start gap-2">
|
<div className="flex items-start gap-2">
|
||||||
<div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 shrink-0" />
|
<div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 shrink-0" />
|
||||||
<p className="text-sm text-[#5C5C5C]">根据您的需求量身定制最优解决方案</p>
|
<p className="text-sm text-[#595959]">根据您的需求量身定制最优解决方案</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</motion.div>
|
||||||
|
|
||||||
<div
|
<motion.div
|
||||||
className={`
|
initial={{ opacity: 0, y: 20 }}
|
||||||
lg:col-span-3 flex flex-col
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
opacity-0 translate-y-4
|
viewport={{ once: true }}
|
||||||
${isVisible ? 'animate-fade-in-up stagger-2' : ''}
|
transition={{ duration: 0.5, delay: 0.1 }}
|
||||||
`}
|
className="lg:col-span-3"
|
||||||
>
|
>
|
||||||
<div className="bg-[#F5F7FA] p-6 sm:p-8 rounded-lg border border-[#E2E8F0] flex-1 flex flex-col">
|
<div className="p-6 sm:p-8 rounded-xl border border-[#E5E5E5] bg-[#FAFAFA]">
|
||||||
<h2 className="text-lg font-semibold text-[#1A1A2E] mb-6">发送消息</h2>
|
<h2 className="text-lg font-semibold text-[#1C1C1C] mb-6">发送消息</h2>
|
||||||
|
|
||||||
{isSubmitted ? (
|
{isSubmitted ? (
|
||||||
<div className="text-center py-12 flex-1 flex items-center justify-center">
|
<div className="text-center py-12">
|
||||||
<div className="w-16 h-16 bg-[#C41E3A] rounded-full flex items-center justify-center mx-auto mb-4 animate-stamp-in">
|
<div className="w-16 h-16 bg-[#C41E3A] rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
<CheckCircle2 className="w-8 h-8 text-white" />
|
<CheckCircle2 className="w-8 h-8 text-white" />
|
||||||
</div>
|
</div>
|
||||||
<h4 className="text-xl font-semibold text-[#1A1A2E] mb-2">消息已发送</h4>
|
<h4 className="text-xl font-semibold text-[#1C1C1C] mb-2">消息已发送</h4>
|
||||||
<p className="text-[#718096]">感谢您的留言，我们会尽快与您联系！</p>
|
<p className="text-[#595959]">感谢您的留言，我们会尽快与您联系！</p>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<form onSubmit={handleSubmit} className="space-y-5 flex-1 flex flex-col">
|
<form onSubmit={handleSubmit} className="space-y-5">
|
||||||
<input type="text" name="website" style={{ display: 'none' }} tabIndex={-1} autoComplete="off" />
|
<input type="text" name="website" style={{ display: 'none' }} tabIndex={-1} autoComplete="off" />
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
<Input
|
<Input
|
||||||
name="name"
|
name="name"
|
||||||
data-testid="name-input"
|
data-testid="name-input"
|
||||||
label="姓名"
|
label="姓名"
|
||||||
id="name"
|
id="name"
|
||||||
placeholder="请输入您的姓名"
|
placeholder="请输入您的姓名"
|
||||||
required
|
required
|
||||||
value={formData.name}
|
value={formData.name}
|
||||||
onChange={(e) => handleChange('name', e.target.value)}
|
onChange={(e) => handleChange('name', e.target.value)}
|
||||||
onBlur={(e) => handleBlur('name', e.target.value)}
|
onBlur={(e) => handleBlur('name', e.target.value)}
|
||||||
error={errors.name}
|
error={errors.name}
|
||||||
/>
|
/>
|
||||||
<Input
|
<Input
|
||||||
name="phone"
|
name="phone"
|
||||||
data-testid="phone-input"
|
data-testid="phone-input"
|
||||||
label="电话"
|
label="电话"
|
||||||
id="phone"
|
id="phone"
|
||||||
type="tel"
|
type="tel"
|
||||||
placeholder="请输入您的电话"
|
placeholder="请输入您的电话"
|
||||||
required
|
required
|
||||||
value={formData.phone}
|
value={formData.phone}
|
||||||
onChange={(e) => handleChange('phone', e.target.value)}
|
onChange={(e) => handleChange('phone', e.target.value)}
|
||||||
onBlur={(e) => handleBlur('phone', e.target.value)}
|
onBlur={(e) => handleBlur('phone', e.target.value)}
|
||||||
error={errors.phone}
|
error={errors.phone}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<Input
|
<Input
|
||||||
name="email"
|
name="email"
|
||||||
data-testid="email-input"
|
data-testid="email-input"
|
||||||
label="邮箱"
|
label="邮箱"
|
||||||
id="email"
|
id="email"
|
||||||
type="email"
|
type="email"
|
||||||
placeholder="请输入您的邮箱"
|
placeholder="请输入您的邮箱"
|
||||||
required
|
required
|
||||||
value={formData.email}
|
value={formData.email}
|
||||||
onChange={(e) => handleChange('email', e.target.value)}
|
onChange={(e) => handleChange('email', e.target.value)}
|
||||||
onBlur={(e) => handleBlur('email', e.target.value)}
|
onBlur={(e) => handleBlur('email', e.target.value)}
|
||||||
error={errors.email}
|
error={errors.email}
|
||||||
/>
|
/>
|
||||||
<Input
|
<Input
|
||||||
name="subject"
|
name="subject"
|
||||||
data-testid="subject-input"
|
data-testid="subject-input"
|
||||||
label="主题"
|
label="主题"
|
||||||
id="subject"
|
id="subject"
|
||||||
placeholder="请输入消息主题"
|
placeholder="请输入消息主题"
|
||||||
required
|
required
|
||||||
value={formData.subject}
|
value={formData.subject}
|
||||||
onChange={(e) => handleChange('subject', e.target.value)}
|
onChange={(e) => handleChange('subject', e.target.value)}
|
||||||
onBlur={(e) => handleBlur('subject', e.target.value)}
|
onBlur={(e) => handleBlur('subject', e.target.value)}
|
||||||
error={errors.subject}
|
error={errors.subject}
|
||||||
/>
|
/>
|
||||||
<Textarea
|
<Textarea
|
||||||
name="message"
|
name="message"
|
||||||
data-testid="message-input"
|
data-testid="message-input"
|
||||||
label="留言内容"
|
label="留言内容"
|
||||||
id="message"
|
id="message"
|
||||||
placeholder="请输入您想咨询的内容"
|
placeholder="请输入您想咨询的内容"
|
||||||
rows={5}
|
rows={5}
|
||||||
required
|
required
|
||||||
value={formData.message}
|
value={formData.message}
|
||||||
onChange={(e) => handleChange('message', e.target.value)}
|
onChange={(e) => handleChange('message', e.target.value)}
|
||||||
onBlur={(e) => handleBlur('message', e.target.value)}
|
onBlur={(e) => handleBlur('message', e.target.value)}
|
||||||
error={errors.message}
|
error={errors.message}
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
data-testid="submit-button"
|
data-testid="submit-button"
|
||||||
size="lg"
|
size="lg"
|
||||||
className="w-full group mt-auto min-h-13 md:min-h-0"
|
className="w-full bg-[#C41E3A] hover:bg-[#A01830] text-white min-h-13 md:min-h-0"
|
||||||
disabled={isSubmitting}
|
disabled={isSubmitting}
|
||||||
>
|
>
|
||||||
{isSubmitting ? (
|
{isSubmitting ? (
|
||||||
@@ -356,7 +352,7 @@ function ContactFormContent() {
|
|||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<Send className="mr-2 h-4 w-4 transition-transform group-hover:translate-x-0.5" />
|
<Send className="mr-2 h-4 w-4" />
|
||||||
发送消息
|
发送消息
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
@@ -364,7 +360,7 @@ function ContactFormContent() {
|
|||||||
</form>
|
</form>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -376,7 +372,7 @@ export default function ContactPage() {
|
|||||||
return (
|
return (
|
||||||
<Suspense fallback={
|
<Suspense fallback={
|
||||||
<div className="min-h-screen bg-white flex items-center justify-center">
|
<div className="min-h-screen bg-white flex items-center justify-center">
|
||||||
<div className="animate-pulse text-[#5C5C5C]">加载中...</div>
|
<div className="animate-pulse text-[#595959]">加载中...</div>
|
||||||
</div>
|
</div>
|
||||||
}>
|
}>
|
||||||
<ContactFormContent />
|
<ContactFormContent />
|
||||||
|
|||||||
@@ -1,17 +1,9 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useEffect } from 'react';
|
|
||||||
import { useSearchParams } from 'next/navigation';
|
|
||||||
import dynamic from 'next/dynamic';
|
import dynamic from 'next/dynamic';
|
||||||
import { HeroSectionV2 } from '@/components/sections/hero-section-v2';
|
import { HeroSectionV2 } from '@/components/sections/hero-section-v2';
|
||||||
import { SectionSkeleton } from '@/components/ui/loading-skeleton';
|
import { SectionSkeleton } from '@/components/ui/loading-skeleton';
|
||||||
|
|
||||||
declare global {
|
|
||||||
interface Window {
|
|
||||||
__isProgrammaticScroll?: boolean;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const SocialProofSection = dynamic(
|
const SocialProofSection = dynamic(
|
||||||
() => import('@/components/sections/social-proof-section').then(mod => ({ default: mod.SocialProofSection })),
|
() => import('@/components/sections/social-proof-section').then(mod => ({ default: mod.SocialProofSection })),
|
||||||
{ loading: () => <SectionSkeleton />, ssr: false }
|
{ loading: () => <SectionSkeleton />, ssr: false }
|
||||||
@@ -33,41 +25,6 @@ const CTASection = dynamic(
|
|||||||
);
|
);
|
||||||
|
|
||||||
function HomeContentV2() {
|
function HomeContentV2() {
|
||||||
const searchParams = useSearchParams();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const section = searchParams.get('section');
|
|
||||||
if (!section) {return;}
|
|
||||||
|
|
||||||
const maxAttempts = 50;
|
|
||||||
const interval = 100;
|
|
||||||
let attempts = 0;
|
|
||||||
|
|
||||||
const scrollToSection = () => {
|
|
||||||
const targetElement = document.getElementById(section);
|
|
||||||
if (targetElement) {
|
|
||||||
window.__isProgrammaticScroll = true;
|
|
||||||
targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
||||||
setTimeout(() => {
|
|
||||||
window.__isProgrammaticScroll = false;
|
|
||||||
}, 2000);
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
};
|
|
||||||
|
|
||||||
if (scrollToSection()) {return;}
|
|
||||||
|
|
||||||
const timer = setInterval(() => {
|
|
||||||
attempts++;
|
|
||||||
if (scrollToSection() || attempts >= maxAttempts) {
|
|
||||||
clearInterval(timer);
|
|
||||||
}
|
|
||||||
}, interval);
|
|
||||||
|
|
||||||
return () => clearInterval(timer);
|
|
||||||
}, [searchParams]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main id="main-content" className="min-h-screen bg-white">
|
<main id="main-content" className="min-h-screen bg-white">
|
||||||
<HeroSectionV2 />
|
<HeroSectionV2 />
|
||||||
|
|||||||
@@ -1,39 +1,19 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { usePathname } from 'next/navigation';
|
|
||||||
import { ErrorBoundary } from '@/components/ui/error-boundary';
|
import { ErrorBoundary } from '@/components/ui/error-boundary';
|
||||||
import { Header } from '@/components/layout/header';
|
import { Header } from '@/components/layout/header';
|
||||||
import { Footer } from '@/components/layout/footer';
|
import { Footer } from '@/components/layout/footer';
|
||||||
import { Breadcrumb } from '@/components/layout/breadcrumb';
|
|
||||||
|
|
||||||
const breadcrumbMap: Record<string, { label: string; href: string }> = {
|
|
||||||
'/about': { label: '关于我们', href: '/about' },
|
|
||||||
'/cases': { label: '成功案例', href: '/cases' },
|
|
||||||
'/services': { label: '核心业务', href: '/services' },
|
|
||||||
'/products': { label: '产品服务', href: '/products' },
|
|
||||||
'/solutions': { label: '解决方案', href: '/solutions' },
|
|
||||||
'/news': { label: '新闻动态', href: '/news' },
|
|
||||||
'/contact': { label: '联系我们', href: '/contact' },
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function MarketingLayout({
|
export default function MarketingLayout({
|
||||||
children,
|
children,
|
||||||
}: {
|
}: {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}) {
|
}) {
|
||||||
const pathname = usePathname();
|
|
||||||
const breadcrumbItem = breadcrumbMap[pathname];
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen flex flex-col">
|
<div className="min-h-screen flex flex-col">
|
||||||
<Header />
|
<Header />
|
||||||
<ErrorBoundary>
|
<ErrorBoundary>
|
||||||
<main id="main-content" className="flex-1 pt-16">
|
<main id="main-content" className="flex-1 pt-16">
|
||||||
{breadcrumbItem && (
|
|
||||||
<div className="container-wide">
|
|
||||||
<Breadcrumb items={[breadcrumbItem]} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{children}
|
{children}
|
||||||
</main>
|
</main>
|
||||||
</ErrorBoundary>
|
</ErrorBoundary>
|
||||||
|
|||||||
@@ -3,11 +3,9 @@
|
|||||||
import { StaticLink } from '@/components/ui/static-link';
|
import { StaticLink } from '@/components/ui/static-link';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
import { BackButton } from '@/components/ui/back-button';
|
import { PageNav } from '@/components/layout/page-nav';
|
||||||
import { Calendar, ArrowLeft } from 'lucide-react';
|
import { Calendar, ArrowLeft, Newspaper } from 'lucide-react';
|
||||||
import { motion } from 'framer-motion';
|
import { motion } from 'framer-motion';
|
||||||
import { useInView } from 'framer-motion';
|
|
||||||
import { useRef } from 'react';
|
|
||||||
import { NEWS } from '@/lib/constants';
|
import { NEWS } from '@/lib/constants';
|
||||||
|
|
||||||
interface NewsDetailClientProps {
|
interface NewsDetailClientProps {
|
||||||
@@ -15,45 +13,48 @@ interface NewsDetailClientProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function NewsDetailClient({ news }: NewsDetailClientProps) {
|
export function NewsDetailClient({ news }: NewsDetailClientProps) {
|
||||||
const contentRef = useRef(null);
|
|
||||||
const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
|
|
||||||
|
|
||||||
const relatedNews = NEWS
|
const relatedNews = NEWS
|
||||||
.filter((n) => n.id !== news.id && n.category === news.category)
|
.filter((n) => n.id !== news.id && n.category === news.category)
|
||||||
.slice(0, 3);
|
.slice(0, 3);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-white">
|
<div className="min-h-screen bg-white">
|
||||||
<div className="relative overflow-hidden bg-linear-to-b from-[#FAFAFA] to-white">
|
<section className="pt-32 pb-12">
|
||||||
<div className="container-wide relative z-10 pt-32 pb-20">
|
<div className="container-wide">
|
||||||
<BackButton />
|
<PageNav items={[{ label: '新闻动态', href: '/news' }, { label: news.title }]} />
|
||||||
<div className="max-w-4xl">
|
<motion.div
|
||||||
<div className="inline-block px-4 py-2 bg-[#C41E3A]/10 rounded-full text-[#C41E3A] text-sm mb-6">
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
className="max-w-4xl mt-6"
|
||||||
|
>
|
||||||
|
<Badge className="mb-4 bg-[#C41E3A]/10 text-[#C41E3A] hover:bg-[#C41E3A]/20 border-0">
|
||||||
{news.category}
|
{news.category}
|
||||||
</div>
|
</Badge>
|
||||||
<h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
|
<h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#1C1C1C] mb-4 tracking-tight">
|
||||||
{news.title}
|
{news.title}
|
||||||
</h1>
|
</h1>
|
||||||
<div className="flex items-center gap-6 text-[#5C5C5C]">
|
<div className="flex items-center gap-4 text-[#595959] text-sm">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-1.5">
|
||||||
<Calendar className="w-5 h-5" />
|
<Calendar className="w-4 h-4" />
|
||||||
{news.date}
|
{news.date}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
|
|
||||||
<div className="container-wide relative z-10 py-16" ref={contentRef}>
|
<section className="pb-16">
|
||||||
<motion.div
|
<div className="container-wide">
|
||||||
initial={{ opacity: 0, y: 20 }}
|
<motion.div
|
||||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
transition={{ duration: 0.6 }}
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
className="max-w-4xl"
|
viewport={{ once: true }}
|
||||||
>
|
transition={{ duration: 0.5 }}
|
||||||
<article className="prose prose-lg max-w-none">
|
className="max-w-4xl"
|
||||||
|
>
|
||||||
{news.image ? (
|
{news.image ? (
|
||||||
<div className="aspect-video rounded-lg overflow-hidden mb-8">
|
<div className="aspect-video rounded-xl overflow-hidden mb-8">
|
||||||
<img
|
<img
|
||||||
src={news.image}
|
src={news.image}
|
||||||
alt={news.title}
|
alt={news.title}
|
||||||
@@ -61,73 +62,69 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="aspect-video bg-linear-to-br from-[#C41E3A]/10 to-[#1C1C1C]/10 rounded-lg mb-8 flex items-center justify-center">
|
<div className="aspect-video bg-gradient-to-br from-[#FEF2F4] to-[#F5F5F5] rounded-xl mb-8 flex items-center justify-center">
|
||||||
<span className="text-6xl">📰</span>
|
<Newspaper className="w-16 h-16 text-[#C41E3A]/30" />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<p className="text-xl text-[#5C5C5C] leading-relaxed mb-8 border-l-4 border-[#C41E3A] pl-6">
|
<div className="border-l-4 border-[#C41E3A] pl-6 mb-8">
|
||||||
{news.excerpt}
|
<p className="text-lg text-[#595959] leading-relaxed">
|
||||||
</p>
|
{news.excerpt}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="text-[#1C1C1C] leading-relaxed whitespace-pre-line">
|
<div className="text-[#1C1C1C] leading-relaxed whitespace-pre-line">
|
||||||
{news.content}
|
{news.content}
|
||||||
</div>
|
</div>
|
||||||
</article>
|
|
||||||
|
|
||||||
{relatedNews.length > 0 && (
|
{relatedNews.length > 0 && (
|
||||||
<div className="mt-16 pt-16 border-t border-[#E5E5E5]">
|
<div className="mt-16 pt-12 border-t border-[#E5E5E5]">
|
||||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-8">
|
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-8">相关新闻</h2>
|
||||||
相关新闻
|
<div className="grid md:grid-cols-3 gap-6">
|
||||||
</h2>
|
{relatedNews.map((related) => (
|
||||||
<div className="grid md:grid-cols-3 gap-6">
|
<StaticLink key={related.id} href={`/news/${related.id}`}>
|
||||||
{relatedNews.map((related) => (
|
<div className="group cursor-pointer">
|
||||||
<StaticLink key={related.id} href={`/news/${related.id}`}>
|
<div className="aspect-video rounded-lg mb-4 overflow-hidden">
|
||||||
<div className="group cursor-pointer">
|
{related.image ? (
|
||||||
<div className="aspect-video rounded-lg mb-4 overflow-hidden group-hover:shadow-lg transition-shadow">
|
<img
|
||||||
{related.image ? (
|
src={related.image}
|
||||||
<img
|
alt={related.title}
|
||||||
src={related.image}
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||||||
alt={related.title}
|
/>
|
||||||
className="w-full h-full object-cover"
|
) : (
|
||||||
/>
|
<div className="w-full h-full bg-gradient-to-br from-[#FEF2F4] to-[#F5F5F5] flex items-center justify-center">
|
||||||
) : (
|
<Newspaper className="w-8 h-8 text-[#C41E3A]/30" />
|
||||||
<div className="w-full h-full bg-linear-to-br from-[#C41E3A]/10 to-[#1C1C1C]/10 flex items-center justify-center">
|
</div>
|
||||||
<span className="text-4xl">📰</span>
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
<Badge variant="secondary" className="mb-2 text-xs">{related.category}</Badge>
|
||||||
|
<h3 className="text-base font-semibold text-[#1C1C1C] mb-1 line-clamp-2 group-hover:text-[#C41E3A] transition-colors">
|
||||||
|
{related.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-[#595959] line-clamp-2">{related.excerpt}</p>
|
||||||
</div>
|
</div>
|
||||||
<Badge variant="secondary" className="mb-2">
|
</StaticLink>
|
||||||
{related.category}
|
))}
|
||||||
</Badge>
|
</div>
|
||||||
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-2 line-clamp-2 group-hover:text-[#C41E3A] transition-colors">
|
|
||||||
{related.title}
|
|
||||||
</h3>
|
|
||||||
<p className="text-sm text-[#5C5C5C] line-clamp-2">
|
|
||||||
{related.excerpt}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</StaticLink>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="mt-16 flex justify-center gap-4">
|
<div className="mt-12 flex justify-center gap-4">
|
||||||
<StaticLink href="/news">
|
<StaticLink href="/news">
|
||||||
<Button variant="outline" size="lg">
|
<Button variant="outline" size="lg">
|
||||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||||
返回新闻列表
|
返回新闻列表
|
||||||
</Button>
|
</Button>
|
||||||
</StaticLink>
|
</StaticLink>
|
||||||
<StaticLink href="/contact">
|
<StaticLink href="/contact">
|
||||||
<Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white">
|
<Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white">
|
||||||
联系我们
|
联系我们
|
||||||
</Button>
|
</Button>
|
||||||
</StaticLink>
|
</StaticLink>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,11 @@
|
|||||||
|
import { Metadata } from 'next';
|
||||||
|
import { COMPANY_INFO } from '@/lib/constants';
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: `新闻动态 - ${COMPANY_INFO.shortName}`,
|
||||||
|
description: `了解${COMPANY_INFO.shortName}最新动态，把握行业发展脉搏。`,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function NewsLayout({ children }: { children: React.ReactNode }) {
|
||||||
|
return children;
|
||||||
|
}
|
||||||
+119
-117
@@ -1,16 +1,14 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState, useMemo, useRef, ChangeEvent } from 'react';
|
import { useState, useMemo, ChangeEvent } from 'react';
|
||||||
import { useInView } from 'framer-motion';
|
import { motion } from 'framer-motion';
|
||||||
import { NEWS } from '@/lib/constants';
|
import { NEWS } from '@/lib/constants';
|
||||||
import { Card, CardContent } from '@/components/ui/card';
|
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { PageHeader } from '@/components/ui/page-header';
|
|
||||||
import { Search, Calendar, Filter, ChevronLeft, ChevronRight, ArrowRight } from 'lucide-react';
|
|
||||||
import { StaticLink } from '@/components/ui/static-link';
|
import { StaticLink } from '@/components/ui/static-link';
|
||||||
import { motion } from 'framer-motion';
|
import { Search, Calendar, ChevronLeft, ChevronRight, ArrowRight, Newspaper } from 'lucide-react';
|
||||||
|
import { PageNav } from '@/components/layout/page-nav';
|
||||||
|
|
||||||
const categories = ['全部', '公司新闻', '产品发布'];
|
const categories = ['全部', '公司新闻', '产品发布'];
|
||||||
const ITEMS_PER_PAGE = 9;
|
const ITEMS_PER_PAGE = 9;
|
||||||
@@ -19,8 +17,7 @@ export default function NewsListPage() {
|
|||||||
const [selectedCategory, setSelectedCategory] = useState('全部');
|
const [selectedCategory, setSelectedCategory] = useState('全部');
|
||||||
const [searchQuery, setSearchQuery] = useState('');
|
const [searchQuery, setSearchQuery] = useState('');
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
const contentRef = useRef(null);
|
|
||||||
const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
|
|
||||||
const filteredNews = useMemo(() => {
|
const filteredNews = useMemo(() => {
|
||||||
return NEWS.filter((newsItem) => {
|
return NEWS.filter((newsItem) => {
|
||||||
const matchesCategory = selectedCategory === '全部' || newsItem.category === selectedCategory;
|
const matchesCategory = selectedCategory === '全部' || newsItem.category === selectedCategory;
|
||||||
@@ -34,8 +31,7 @@ export default function NewsListPage() {
|
|||||||
const totalPages = Math.ceil(filteredNews.length / ITEMS_PER_PAGE);
|
const totalPages = Math.ceil(filteredNews.length / ITEMS_PER_PAGE);
|
||||||
const paginatedNews = useMemo(() => {
|
const paginatedNews = useMemo(() => {
|
||||||
const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
|
const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
|
||||||
const endIndex = startIndex + ITEMS_PER_PAGE;
|
return filteredNews.slice(startIndex, startIndex + ITEMS_PER_PAGE);
|
||||||
return filteredNews.slice(startIndex, endIndex);
|
|
||||||
}, [filteredNews, currentPage]);
|
}, [filteredNews, currentPage]);
|
||||||
|
|
||||||
const handlePageChange = (page: number) => {
|
const handlePageChange = (page: number) => {
|
||||||
@@ -55,23 +51,35 @@ export default function NewsListPage() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-white">
|
<div className="min-h-screen bg-white">
|
||||||
<PageHeader
|
<section className="pt-32 pb-16">
|
||||||
title="新闻动态"
|
<div className="container-wide">
|
||||||
description="了解睿新致远最新动态，把握行业发展脉搏"
|
<PageNav items={[{ label: '新闻动态' }]} />
|
||||||
/>
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
className="max-w-3xl"
|
||||||
|
>
|
||||||
|
<p className="text-sm font-medium text-[#C41E3A] mb-4 tracking-wide uppercase">News</p>
|
||||||
|
<h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6 tracking-tight">
|
||||||
|
新闻动态
|
||||||
|
</h1>
|
||||||
|
<p className="text-lg text-[#595959] leading-relaxed">
|
||||||
|
了解睿新致远最新动态，把握行业发展脉搏
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div className="container-wide relative z-10 py-12" ref={contentRef}>
|
<section className="pb-16">
|
||||||
<motion.div
|
<div className="container-wide">
|
||||||
initial={{ opacity: 0, y: 20 }}
|
<motion.div
|
||||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
transition={{ duration: 0.6 }}
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
className="mb-8 space-y-4"
|
viewport={{ once: true }}
|
||||||
>
|
transition={{ duration: 0.5 }}
|
||||||
<div className="flex flex-col md:flex-row gap-4 items-start md:items-center">
|
className="mb-8 space-y-4"
|
||||||
<div className="flex items-center gap-2 text-[#1C1C1C]">
|
>
|
||||||
<Filter className="w-5 h-5" />
|
|
||||||
<span className="font-medium">分类筛选：</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
<div className="flex flex-wrap gap-2">
|
||||||
{categories.map((category) => (
|
{categories.map((category) => (
|
||||||
<Button
|
<Button
|
||||||
@@ -88,121 +96,115 @@ export default function NewsListPage() {
|
|||||||
</Button>
|
</Button>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="relative max-w-md">
|
<div className="relative max-w-md">
|
||||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[#5C5C5C] w-5 h-5" />
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[#595959] w-5 h-5" />
|
||||||
<Input
|
<Input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="搜索新闻..."
|
placeholder="搜索新闻..."
|
||||||
value={searchQuery}
|
value={searchQuery}
|
||||||
onChange={handleSearchChange}
|
onChange={handleSearchChange}
|
||||||
className="pl-10"
|
className="pl-10"
|
||||||
aria-label="搜索新闻"
|
aria-label="搜索新闻"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
{paginatedNews.length === 0 ? (
|
{paginatedNews.length === 0 ? (
|
||||||
<div className="text-center py-20">
|
<div className="text-center py-20">
|
||||||
<p className="text-xl text-[#5C5C5C]">没有找到相关新闻</p>
|
<Newspaper className="w-12 h-12 text-[#E5E5E5] mx-auto mb-4" />
|
||||||
</div>
|
<p className="text-lg text-[#595959]">没有找到相关新闻</p>
|
||||||
) : (
|
</div>
|
||||||
<>
|
) : (
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
<>
|
||||||
{paginatedNews.map((newsItem, index) => (
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
<motion.div
|
{paginatedNews.map((newsItem, index) => (
|
||||||
key={newsItem.id}
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 20 }}
|
key={newsItem.id}
|
||||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
transition={{ duration: 0.5, delay: 0.2 + index * 0.1 }}
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
>
|
viewport={{ once: true }}
|
||||||
<StaticLink href={`/news/${newsItem.id}`}>
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||||
<Card className="h-full hover:shadow-lg transition-shadow cursor-pointer border-[#E5E5E5] hover:border-[#C41E3A]">
|
>
|
||||||
<CardContent className="p-0">
|
<StaticLink href={`/news/${newsItem.id}`}>
|
||||||
|
<div className="group h-full bg-white rounded-xl border border-[#E5E5E5] overflow-hidden hover:border-[#C41E3A]/30 hover:shadow-md transition-all duration-300">
|
||||||
{newsItem.image ? (
|
{newsItem.image ? (
|
||||||
<div className="aspect-video bg-gray-100 overflow-hidden">
|
<div className="aspect-video bg-[#F5F5F5] overflow-hidden">
|
||||||
<img
|
<img
|
||||||
src={newsItem.image}
|
src={newsItem.image}
|
||||||
alt={newsItem.title}
|
alt={newsItem.title}
|
||||||
className="w-full h-full object-cover"
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="aspect-video bg-gradient-to-br from-[#C41E3A]/10 to-[#1C1C1C]/10 flex items-center justify-center mb-4">
|
<div className="aspect-video bg-gradient-to-br from-[#FEF2F4] to-[#F5F5F5] flex items-center justify-center">
|
||||||
<span className="text-4xl">📰</span>
|
<Newspaper className="w-12 h-12 text-[#C41E3A]/30" />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="p-6">
|
<div className="p-6">
|
||||||
<div className="flex items-center gap-2 mb-3">
|
<div className="flex items-center gap-2 mb-3">
|
||||||
<Badge variant="secondary">{newsItem.category}</Badge>
|
<Badge variant="secondary" className="text-xs">{newsItem.category}</Badge>
|
||||||
<div className="flex items-center gap-1 text-sm text-[#5C5C5C]">
|
<div className="flex items-center gap-1 text-xs text-[#595959]">
|
||||||
<Calendar className="w-4 h-4" />
|
<Calendar className="w-3 h-3" />
|
||||||
{newsItem.date}
|
{newsItem.date}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-3 line-clamp-2">
|
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-2 line-clamp-2 group-hover:text-[#C41E3A] transition-colors">
|
||||||
{newsItem.title}
|
{newsItem.title}
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-[#5C5C5C] text-sm line-clamp-3 mb-4">
|
<p className="text-sm text-[#595959] line-clamp-3 mb-4">
|
||||||
{newsItem.excerpt}
|
{newsItem.excerpt}
|
||||||
</p>
|
</p>
|
||||||
<div className="flex items-center text-[#C41E3A] text-sm font-medium group">
|
<div className="flex items-center text-[#C41E3A] text-sm font-medium">
|
||||||
阅读更多
|
阅读更多
|
||||||
<ArrowRight className="ml-1 w-4 h-4" />
|
<ArrowRight className="ml-1 w-4 h-4 group-hover:translate-x-1 transition-transform" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</div>
|
||||||
</Card>
|
</StaticLink>
|
||||||
</StaticLink>
|
</motion.div>
|
||||||
</motion.div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{totalPages > 1 && (
|
|
||||||
<div className="flex justify-center items-center gap-2 mt-8">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="icon"
|
|
||||||
onClick={() => handlePageChange(currentPage - 1)}
|
|
||||||
disabled={currentPage === 1}
|
|
||||||
>
|
|
||||||
<ChevronLeft className="w-4 h-4" />
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
{Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
|
|
||||||
<Button
|
|
||||||
key={page}
|
|
||||||
variant={currentPage === page ? 'default' : 'outline'}
|
|
||||||
size="icon"
|
|
||||||
onClick={() => handlePageChange(page)}
|
|
||||||
className={
|
|
||||||
currentPage === page
|
|
||||||
? 'bg-[#C41E3A] hover:bg-[#A01830] text-white'
|
|
||||||
: ''
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{page}
|
|
||||||
</Button>
|
|
||||||
))}
|
))}
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="icon"
|
|
||||||
onClick={() => handlePageChange(currentPage + 1)}
|
|
||||||
disabled={currentPage === totalPages}
|
|
||||||
>
|
|
||||||
<ChevronRight className="w-4 h-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="text-center mt-4 text-[#5C5C5C] text-sm">
|
{totalPages > 1 && (
|
||||||
显示 {paginatedNews.length} 条，共 {filteredNews.length} 条新闻
|
<div className="flex justify-center items-center gap-2 mt-8">
|
||||||
</div>
|
<Button
|
||||||
</>
|
variant="outline"
|
||||||
)}
|
size="icon"
|
||||||
</div>
|
onClick={() => handlePageChange(currentPage - 1)}
|
||||||
|
disabled={currentPage === 1}
|
||||||
|
>
|
||||||
|
<ChevronLeft className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
{Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
|
||||||
|
<Button
|
||||||
|
key={page}
|
||||||
|
variant={currentPage === page ? 'default' : 'outline'}
|
||||||
|
size="icon"
|
||||||
|
onClick={() => handlePageChange(page)}
|
||||||
|
className={
|
||||||
|
currentPage === page
|
||||||
|
? 'bg-[#C41E3A] hover:bg-[#A01830] text-white'
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{page}
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
onClick={() => handlePageChange(currentPage + 1)}
|
||||||
|
disabled={currentPage === totalPages}
|
||||||
|
>
|
||||||
|
<ChevronRight className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,11 +1,5 @@
|
|||||||
import { Suspense } from 'react';
|
|
||||||
import { HomeContentV2 } from './home-content-v2';
|
import { HomeContentV2 } from './home-content-v2';
|
||||||
import { SectionSkeleton } from '@/components/ui/loading-skeleton';
|
|
||||||
|
|
||||||
export default function HomePage() {
|
export default function HomePage() {
|
||||||
return (
|
return <HomeContentV2 />;
|
||||||
<Suspense fallback={<SectionSkeleton />}>
|
|
||||||
<HomeContentV2 />
|
|
||||||
</Suspense>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import { notFound } from 'next/navigation';
|
|||||||
import { StaticLink } from '@/components/ui/static-link';
|
import { StaticLink } from '@/components/ui/static-link';
|
||||||
import { PRODUCTS } from '@/lib/constants';
|
import { PRODUCTS } from '@/lib/constants';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { BackButton } from '@/components/ui/back-button';
|
import { PageNav } from '@/components/layout/page-nav';
|
||||||
import { CheckCircle2, Zap, Target, Layers, ArrowRight } from 'lucide-react';
|
import { CheckCircle2, Zap, Target, Layers, ArrowRight } from 'lucide-react';
|
||||||
|
|
||||||
export async function generateStaticParams() {
|
export async function generateStaticParams() {
|
||||||
@@ -37,7 +37,7 @@ export default async function ProductDetailPage({ params }: { params: Promise<{
|
|||||||
<div className="min-h-screen bg-white">
|
<div className="min-h-screen bg-white">
|
||||||
<div className="pt-32 pb-16">
|
<div className="pt-32 pb-16">
|
||||||
<div className="container-wide">
|
<div className="container-wide">
|
||||||
<BackButton />
|
<PageNav items={[{ label: '产品', href: '/products' }, { label: product.title }]} />
|
||||||
<div className="max-w-4xl mt-8">
|
<div className="max-w-4xl mt-8">
|
||||||
<p className="text-sm font-medium text-[#C41E3A] mb-4 tracking-wide uppercase">{product.category}</p>
|
<p className="text-sm font-medium text-[#C41E3A] mb-4 tracking-wide uppercase">{product.category}</p>
|
||||||
<h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6 tracking-tight">
|
<h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6 tracking-tight">
|
||||||
|
|||||||
@@ -0,0 +1,11 @@
|
|||||||
|
import { Metadata } from 'next';
|
||||||
|
import { COMPANY_INFO } from '@/lib/constants';
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: `产品 - ${COMPANY_INFO.shortName}`,
|
||||||
|
description: `自主研发的企业级产品，助力企业高效运营，实现数字化转型。${COMPANY_INFO.shortName}提供ERP、CRM、BI、CMS等产品。`,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function ProductsLayout({ children }: { children: React.ReactNode }) {
|
||||||
|
return children;
|
||||||
|
}
|
||||||
@@ -6,12 +6,14 @@ import { StaticLink } from '@/components/ui/static-link';
|
|||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { ArrowRight } from 'lucide-react';
|
import { ArrowRight } from 'lucide-react';
|
||||||
import { motion } from 'framer-motion';
|
import { motion } from 'framer-motion';
|
||||||
|
import { PageNav } from '@/components/layout/page-nav';
|
||||||
|
|
||||||
export default function ProductsPage() {
|
export default function ProductsPage() {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-white">
|
<div className="min-h-screen bg-white">
|
||||||
<section className="pt-32 pb-16">
|
<section className="pt-32 pb-16">
|
||||||
<div className="container-wide">
|
<div className="container-wide">
|
||||||
|
<PageNav items={[{ label: '产品' }]} />
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
@@ -20,7 +22,7 @@ export default function ProductsPage() {
|
|||||||
>
|
>
|
||||||
<p className="text-sm font-medium text-[#C41E3A] mb-4 tracking-wide uppercase">Products</p>
|
<p className="text-sm font-medium text-[#C41E3A] mb-4 tracking-wide uppercase">Products</p>
|
||||||
<h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6 tracking-tight">
|
<h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6 tracking-tight">
|
||||||
产品服务
|
产品
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-lg text-[#595959] leading-relaxed">
|
<p className="text-lg text-[#595959] leading-relaxed">
|
||||||
自主研发的企业级产品，助力企业高效运营，实现数字化转型
|
自主研发的企业级产品，助力企业高效运营，实现数字化转型
|
||||||
|
|||||||
@@ -2,17 +2,16 @@
|
|||||||
|
|
||||||
import { StaticLink } from '@/components/ui/static-link';
|
import { StaticLink } from '@/components/ui/static-link';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { BackButton } from '@/components/ui/back-button';
|
import { PageNav } from '@/components/layout/page-nav';
|
||||||
import {
|
import {
|
||||||
CheckCircle2,
|
CheckCircle2,
|
||||||
TrendingUp,
|
TrendingUp,
|
||||||
Users,
|
|
||||||
Target,
|
Target,
|
||||||
Clock,
|
Clock,
|
||||||
MessageCircle,
|
MessageCircle,
|
||||||
ArrowRight,
|
ArrowRight,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import { SERVICES, CASES } from '@/lib/constants';
|
import { SERVICES } from '@/lib/constants';
|
||||||
|
|
||||||
interface ServiceDetailClientProps {
|
interface ServiceDetailClientProps {
|
||||||
service: typeof SERVICES[number];
|
service: typeof SERVICES[number];
|
||||||
@@ -47,39 +46,38 @@ const challenges: Record<string, { title: string; description: string }[]> = {
|
|||||||
|
|
||||||
const outcomes: Record<string, { value: string; label: string }[]> = {
|
const outcomes: Record<string, { value: string; label: string }[]> = {
|
||||||
software: [
|
software: [
|
||||||
{ value: '30%', label: '开发效率提升' },
|
{ value: '30%+', label: '预期开发效率提升' },
|
||||||
{ value: '50%', label: '返工率降低' },
|
{ value: '50%+', label: '预期返工率降低' },
|
||||||
{ value: '100%', label: '按时交付率' },
|
{ value: '严格', label: '交付质量把控' },
|
||||||
],
|
],
|
||||||
data: [
|
data: [
|
||||||
{ value: '70%', label: '决策效率提升' },
|
|
||||||
{ value: '实时', label: '数据更新' },
|
{ value: '实时', label: '数据更新' },
|
||||||
{ value: '100+', label: '可视化报表' },
|
{ value: '自助式', label: '分析模式' },
|
||||||
|
{ value: '多维度', label: '可视化报表' },
|
||||||
],
|
],
|
||||||
consulting: [
|
consulting: [
|
||||||
{ value: '60%', label: '方向明确度' },
|
{ value: '清晰', label: '转型方向规划' },
|
||||||
{ value: '40%', label: '试错成本降低' },
|
{ value: '系统化', label: '技术选型评估' },
|
||||||
{ value: '3x', label: '转型速度提升' },
|
{ value: '可落地', label: '实施路径设计' },
|
||||||
],
|
],
|
||||||
solutions: [
|
solutions: [
|
||||||
{ value: '50%', label: '实施周期缩短' },
|
{ value: '标准化', label: '行业方案交付' },
|
||||||
{ value: '30%', label: '成本降低' },
|
{ value: '端到端', label: '全流程实施' },
|
||||||
{ value: '95%', label: '客户满意度' },
|
{ value: '持续化', label: '运维优化支持' },
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
export function ServiceDetailClient({ service }: ServiceDetailClientProps) {
|
export function ServiceDetailClient({ service }: ServiceDetailClientProps) {
|
||||||
const serviceChallenges = challenges[service.id] ?? [];
|
const serviceChallenges = challenges[service.id] ?? [];
|
||||||
const serviceOutcomes = outcomes[service.id] ?? [];
|
const serviceOutcomes = outcomes[service.id] ?? [];
|
||||||
const relatedCases = CASES.slice(0, 2);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-white">
|
<div className="min-h-screen bg-white">
|
||||||
<div className="pt-32 pb-16">
|
<div className="pt-32 pb-16">
|
||||||
<div className="container-wide">
|
<div className="container-wide">
|
||||||
<BackButton />
|
<PageNav items={[{ label: '服务', href: '/services' }, { label: service.title }]} />
|
||||||
<div className="max-w-4xl mt-8">
|
<div className="max-w-4xl mt-8">
|
||||||
<p className="text-sm font-medium text-[#C41E3A] mb-4 tracking-wide uppercase">核心业务</p>
|
<p className="text-sm font-medium text-[#C41E3A] mb-4 tracking-wide uppercase">Services</p>
|
||||||
<h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6 tracking-tight">
|
<h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6 tracking-tight">
|
||||||
{service.title}
|
{service.title}
|
||||||
</h1>
|
</h1>
|
||||||
@@ -178,32 +176,6 @@ export function ServiceDetailClient({ service }: ServiceDetailClientProps) {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
|
||||||
<div className="flex items-center gap-3 mb-6">
|
|
||||||
<div className="w-10 h-10 bg-[#FEF2F4] rounded-lg flex items-center justify-center">
|
|
||||||
<Users className="w-5 h-5 text-[#C41E3A]" />
|
|
||||||
</div>
|
|
||||||
<h2 className="text-2xl font-bold text-[#1C1C1C]">相关案例</h2>
|
|
||||||
</div>
|
|
||||||
<div className="grid md:grid-cols-2 gap-4">
|
|
||||||
{relatedCases.map((caseItem) => (
|
|
||||||
<StaticLink
|
|
||||||
key={caseItem.id}
|
|
||||||
href={`/cases/${caseItem.id}`}
|
|
||||||
className="group p-4 bg-[#F5F5F5] rounded-lg hover:bg-[#FEF2F4] transition-colors"
|
|
||||||
>
|
|
||||||
<p className="text-xs text-[#C41E3A] font-medium mb-1">{caseItem.industry}</p>
|
|
||||||
<h3 className="font-semibold text-[#1C1C1C] group-hover:text-[#C41E3A] transition-colors text-sm">
|
|
||||||
{caseItem.title}
|
|
||||||
</h3>
|
|
||||||
<p className="text-sm text-[#595959] mt-2 line-clamp-2">
|
|
||||||
{caseItem.description}
|
|
||||||
</p>
|
|
||||||
</StaticLink>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div className="flex justify-center gap-4 pt-8 border-t border-[#E5E5E5]">
|
<div className="flex justify-center gap-4 pt-8 border-t border-[#E5E5E5]">
|
||||||
<StaticLink href="/services">
|
<StaticLink href="/services">
|
||||||
<Button variant="outline" size="lg">查看其他服务</Button>
|
<Button variant="outline" size="lg">查看其他服务</Button>
|
||||||
|
|||||||
@@ -0,0 +1,11 @@
|
|||||||
|
import { Metadata } from 'next';
|
||||||
|
import { COMPANY_INFO } from '@/lib/constants';
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: `服务 - ${COMPANY_INFO.shortName}`,
|
||||||
|
description: `专业技术团队，为您提供全方位的数字化解决方案。${COMPANY_INFO.shortName}涵盖软件开发、数据分析、咨询服务等核心业务。`,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function ServicesLayout({ children }: { children: React.ReactNode }) {
|
||||||
|
return children;
|
||||||
|
}
|
||||||
@@ -5,12 +5,14 @@ import { StaticLink } from '@/components/ui/static-link';
|
|||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { ArrowRight, ArrowUpRight } from 'lucide-react';
|
import { ArrowRight, ArrowUpRight } from 'lucide-react';
|
||||||
import { motion } from 'framer-motion';
|
import { motion } from 'framer-motion';
|
||||||
|
import { PageNav } from '@/components/layout/page-nav';
|
||||||
|
|
||||||
export default function ServicesPage() {
|
export default function ServicesPage() {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-white">
|
<div className="min-h-screen bg-white">
|
||||||
<section className="pt-32 pb-16">
|
<section className="pt-32 pb-16">
|
||||||
<div className="container-wide">
|
<div className="container-wide">
|
||||||
|
<PageNav items={[{ label: '服务' }]} />
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
@@ -19,7 +21,7 @@ export default function ServicesPage() {
|
|||||||
>
|
>
|
||||||
<p className="text-sm font-medium text-[#C41E3A] mb-4 tracking-wide uppercase">Services</p>
|
<p className="text-sm font-medium text-[#C41E3A] mb-4 tracking-wide uppercase">Services</p>
|
||||||
<h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6 tracking-tight">
|
<h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6 tracking-tight">
|
||||||
核心业务
|
服务
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-lg text-[#595959] leading-relaxed">
|
<p className="text-lg text-[#595959] leading-relaxed">
|
||||||
专业技术团队，为您提供全方位的数字化解决方案
|
专业技术团队，为您提供全方位的数字化解决方案
|
||||||
|
|||||||
@@ -0,0 +1,133 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { StaticLink } from '@/components/ui/static-link';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { PageNav } from '@/components/layout/page-nav';
|
||||||
|
import { ArrowRight, AlertTriangle, CheckCircle2, Package } from 'lucide-react';
|
||||||
|
import type { Solution } from '@/lib/constants/solutions';
|
||||||
|
import type { Product } from '@/lib/constants/products';
|
||||||
|
|
||||||
|
interface SolutionDetailClientProps {
|
||||||
|
solution: Solution;
|
||||||
|
relatedProducts: Product[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SolutionDetailClient({ solution, relatedProducts }: SolutionDetailClientProps) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-white">
|
||||||
|
<div className="pt-32 pb-16">
|
||||||
|
<div className="container-wide">
|
||||||
|
<PageNav items={[{ label: '解决方案', href: '/solutions' }, { label: solution.title }]} />
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
className="max-w-4xl mt-8"
|
||||||
|
>
|
||||||
|
<p className="text-sm font-medium text-[#C41E3A] mb-4 tracking-wide uppercase">
|
||||||
|
{solution.industry}
|
||||||
|
</p>
|
||||||
|
<h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4 tracking-tight">
|
||||||
|
{solution.title}
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-[#595959] mb-2">{solution.subtitle}</p>
|
||||||
|
<p className="text-lg text-[#595959] leading-relaxed">
|
||||||
|
{solution.description}
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="container-wide pb-20">
|
||||||
|
<div className="max-w-4xl space-y-16">
|
||||||
|
<motion.section
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
>
|
||||||
|
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 flex items-center gap-3">
|
||||||
|
<AlertTriangle className="w-6 h-6 text-[#C41E3A]" />
|
||||||
|
行业痛点
|
||||||
|
</h2>
|
||||||
|
<div className="space-y-3">
|
||||||
|
{solution.challenges.map((challenge, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="flex items-start gap-3 p-4 rounded-lg border-l-4 border-[#C41E3A] bg-[#FAFAFA]"
|
||||||
|
>
|
||||||
|
<span className="text-[#1C1C1C] text-sm">{challenge}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.section>
|
||||||
|
|
||||||
|
<motion.section
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.5, delay: 0.1 }}
|
||||||
|
>
|
||||||
|
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 flex items-center gap-3">
|
||||||
|
<CheckCircle2 className="w-6 h-6 text-[#C41E3A]" />
|
||||||
|
解决方案
|
||||||
|
</h2>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{solution.solutions.map((sol, index) => (
|
||||||
|
<div key={index} className="flex items-start gap-4">
|
||||||
|
<div className="w-8 h-8 bg-[#C41E3A] rounded-full flex items-center justify-center shrink-0 text-white text-sm font-bold">
|
||||||
|
{index + 1}
|
||||||
|
</div>
|
||||||
|
<p className="text-[#1C1C1C] pt-1 leading-relaxed">{sol}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.section>
|
||||||
|
|
||||||
|
{relatedProducts.length > 0 && (
|
||||||
|
<motion.section
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.5, delay: 0.2 }}
|
||||||
|
>
|
||||||
|
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 flex items-center gap-3">
|
||||||
|
<Package className="w-6 h-6 text-[#C41E3A]" />
|
||||||
|
相关产品
|
||||||
|
</h2>
|
||||||
|
<div className="grid md:grid-cols-2 gap-4">
|
||||||
|
{relatedProducts.map((product) => (
|
||||||
|
<StaticLink
|
||||||
|
key={product.id}
|
||||||
|
href={`/products/${product.id}`}
|
||||||
|
className="group block p-6 rounded-xl border border-[#E5E5E5] bg-white hover:border-[#C41E3A]/40 hover:shadow-lg transition-all duration-300"
|
||||||
|
>
|
||||||
|
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-2 group-hover:text-[#C41E3A] transition-colors">
|
||||||
|
{product.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-[#595959] leading-relaxed">
|
||||||
|
{product.description}
|
||||||
|
</p>
|
||||||
|
</StaticLink>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.section>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex justify-center gap-4 pt-8 border-t border-[#E5E5E5]">
|
||||||
|
<Button variant="outline" size="lg" asChild>
|
||||||
|
<StaticLink href="/contact">联系我们</StaticLink>
|
||||||
|
</Button>
|
||||||
|
<Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white" asChild>
|
||||||
|
<StaticLink href="/contact">
|
||||||
|
立即咨询
|
||||||
|
<ArrowRight className="ml-2 w-4 h-4" />
|
||||||
|
</StaticLink>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
import { Metadata } from 'next';
|
||||||
|
import { notFound } from 'next/navigation';
|
||||||
|
import { SOLUTIONS } from '@/lib/constants/solutions';
|
||||||
|
import { PRODUCTS } from '@/lib/constants/products';
|
||||||
|
import { SolutionDetailClient } from './client';
|
||||||
|
|
||||||
|
export async function generateStaticParams() {
|
||||||
|
return SOLUTIONS.map((solution) => ({
|
||||||
|
id: solution.id,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
|
||||||
|
const { id } = await params;
|
||||||
|
const solution = SOLUTIONS.find((s) => s.id === id);
|
||||||
|
|
||||||
|
if (!solution) {
|
||||||
|
return { title: '解决方案未找到' };
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
title: `${solution.title} - 睿新致远`,
|
||||||
|
description: solution.description,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default async function SolutionDetailPage({ params }: { params: Promise<{ id: string }> }) {
|
||||||
|
const { id } = await params;
|
||||||
|
const solution = SOLUTIONS.find((s) => s.id === id);
|
||||||
|
|
||||||
|
if (!solution) {
|
||||||
|
notFound();
|
||||||
|
}
|
||||||
|
|
||||||
|
const relatedProducts = PRODUCTS.filter((p) => solution.relatedProducts.includes(p.id));
|
||||||
|
|
||||||
|
return <SolutionDetailClient solution={JSON.parse(JSON.stringify(solution))} relatedProducts={JSON.parse(JSON.stringify(relatedProducts))} />;
|
||||||
|
}
|
||||||
@@ -5,6 +5,7 @@ import { StaticLink } from '@/components/ui/static-link';
|
|||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { ArrowRight, Lightbulb, Cpu, Users, CheckCircle2 } from 'lucide-react';
|
import { ArrowRight, Lightbulb, Cpu, Users, CheckCircle2 } from 'lucide-react';
|
||||||
import { MethodologySection } from '@/components/sections/methodology-section';
|
import { MethodologySection } from '@/components/sections/methodology-section';
|
||||||
|
import { PageNav } from '@/components/layout/page-nav';
|
||||||
|
|
||||||
const modules = [
|
const modules = [
|
||||||
{
|
{
|
||||||
@@ -30,7 +31,7 @@ const modules = [
|
|||||||
'您不必懂技术原理，只需要看见业务在增长。',
|
'您不必懂技术原理，只需要看见业务在增长。',
|
||||||
],
|
],
|
||||||
values: ['业务场景深度调研', '技术方案定制开发', '敏捷交付快速迭代'],
|
values: ['业务场景深度调研', '技术方案定制开发', '敏捷交付快速迭代'],
|
||||||
cta: '查看技术案例',
|
cta: '了解技术方案',
|
||||||
ctaVariant: 'outline' as const,
|
ctaVariant: 'outline' as const,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -53,6 +54,7 @@ export default function SolutionsPage() {
|
|||||||
<div className="min-h-screen bg-white">
|
<div className="min-h-screen bg-white">
|
||||||
<section className="pt-32 pb-16">
|
<section className="pt-32 pb-16">
|
||||||
<div className="container-wide">
|
<div className="container-wide">
|
||||||
|
<PageNav items={[{ label: '解决方案' }]} />
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
@@ -73,9 +75,12 @@ export default function SolutionsPage() {
|
|||||||
<section className="pb-20">
|
<section className="pb-20">
|
||||||
<div className="container-wide">
|
<div className="container-wide">
|
||||||
<div className="max-w-6xl mx-auto space-y-8">
|
<div className="max-w-6xl mx-auto space-y-8">
|
||||||
{modules.map((module, index) => (
|
{modules.map((module, index) => {
|
||||||
|
const anchorIds = ['consulting', 'tech', 'accompany'];
|
||||||
|
return (
|
||||||
<motion.section
|
<motion.section
|
||||||
key={index}
|
key={index}
|
||||||
|
id={anchorIds[index]}
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
viewport={{ once: true }}
|
viewport={{ once: true }}
|
||||||
@@ -129,7 +134,8 @@ export default function SolutionsPage() {
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</motion.section>
|
</motion.section>
|
||||||
))}
|
);
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -1,12 +1,10 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { motion } from 'framer-motion';
|
import { motion } from 'framer-motion';
|
||||||
import { useInView } from 'framer-motion';
|
|
||||||
import { useRef } from 'react';
|
|
||||||
import { StaticLink } from '@/components/ui/static-link';
|
import { StaticLink } from '@/components/ui/static-link';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { PageHeader } from '@/components/ui/page-header';
|
|
||||||
import { Shield, Building2, Users, Code, Target, ArrowRight } from 'lucide-react';
|
import { Shield, Building2, Users, Code, Target, ArrowRight } from 'lucide-react';
|
||||||
|
import { PageNav } from '@/components/layout/page-nav';
|
||||||
|
|
||||||
const TEAM_PILLARS = [
|
const TEAM_PILLARS = [
|
||||||
{
|
{
|
||||||
@@ -37,89 +35,105 @@ const TEAM_PILLARS = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
export function TeamClient() {
|
export function TeamClient() {
|
||||||
const contentRef = useRef(null);
|
|
||||||
const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-white">
|
<div className="min-h-screen bg-white">
|
||||||
<PageHeader
|
<section className="pt-32 pb-16">
|
||||||
title="核心团队"
|
<div className="container-wide">
|
||||||
description="核心团队从事技术咨询、企业数字化等行业 12 年+，开发团队成员来自于多个大型传统 IT 企业"
|
<PageNav items={[{ label: '核心团队' }]} />
|
||||||
/>
|
|
||||||
|
|
||||||
<div ref={contentRef} className="container-wide py-12 md:py-16">
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
|
||||||
transition={{ duration: 0.6 }}
|
|
||||||
className="max-w-5xl mx-auto"
|
|
||||||
>
|
|
||||||
{/* 团队概述 */}
|
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ duration: 0.6, delay: 0.1 }}
|
transition={{ duration: 0.5 }}
|
||||||
className="bg-[#FFFBF5] rounded-2xl p-8 md:p-12 border border-[#E5E5E5] mb-16"
|
className="max-w-3xl"
|
||||||
>
|
>
|
||||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 text-center">关于我们的团队</h2>
|
<p className="text-sm font-medium text-[#C41E3A] mb-4 tracking-wide uppercase">Team</p>
|
||||||
<div className="space-y-4 max-w-3xl mx-auto text-center">
|
<h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6 tracking-tight">
|
||||||
<p className="text-[#5C5C5C] leading-relaxed">
|
核心团队
|
||||||
我们的核心团队长期从事<span className="text-[#C41E3A] font-medium">技术咨询</span>、<span className="text-[#C41E3A] font-medium">企业数字化</span>等行业，拥有 12 年以上的深厚积累。
|
</h1>
|
||||||
</p>
|
<p className="text-lg text-[#595959] leading-relaxed">
|
||||||
<p className="text-[#5C5C5C] leading-relaxed">
|
核心团队从事技术咨询、企业数字化等行业 12 年+，开发团队成员来自于多个大型传统 IT 企业
|
||||||
开发团队成员来自于多个<span className="text-[#C41E3A] font-medium">大型传统 IT 企业</span>，具备扎实的工程能力和规范化的交付经验。
|
</p>
|
||||||
</p>
|
|
||||||
<p className="text-[#5C5C5C] leading-relaxed">
|
|
||||||
我们相信，优秀的技术咨询不仅需要过硬的技术能力，更需要深入理解客户的业务场景和真实需求。
|
|
||||||
每一位成员都是既懂技术又懂业务的复合型人才。
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
{/* 团队优势 */}
|
<section className="pb-16">
|
||||||
<div className="mb-16">
|
<div className="container-wide">
|
||||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-8 text-center">团队优势</h2>
|
<div className="max-w-5xl mx-auto space-y-8">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
<motion.div
|
||||||
{TEAM_PILLARS.map((item, idx) => {
|
initial={{ opacity: 0, y: 20 }}
|
||||||
const Icon = item.icon;
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
return (
|
viewport={{ once: true }}
|
||||||
<motion.div
|
transition={{ duration: 0.5 }}
|
||||||
key={item.title}
|
className="p-8 rounded-xl border border-[#E5E5E5]"
|
||||||
initial={{ opacity: 0, y: 20 }}
|
>
|
||||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 text-center">关于我们的团队</h2>
|
||||||
transition={{ duration: 0.5, delay: 0.2 + idx * 0.1 }}
|
<div className="space-y-4 max-w-3xl mx-auto text-center">
|
||||||
className={idx >= 3 ? 'md:col-span-1 lg:col-start-1' : ''}
|
<p className="text-[#595959] leading-relaxed">
|
||||||
>
|
我们的核心团队长期从事<span className="text-[#C41E3A] font-medium">技术咨询</span>、<span className="text-[#C41E3A] font-medium">企业数字化</span>等行业，拥有 12 年以上的深厚积累。
|
||||||
<div className="bg-white rounded-xl p-6 border border-[#E5E5E5] hover:border-[#C41E3A]/30 hover:shadow-md transition-all duration-300 h-full">
|
</p>
|
||||||
<div className="w-12 h-12 bg-[#C41E3A] rounded-xl flex items-center justify-center mb-4">
|
<p className="text-[#595959] leading-relaxed">
|
||||||
<Icon className="w-6 h-6 text-white" />
|
开发团队成员来自于多个<span className="text-[#C41E3A] font-medium">大型传统 IT 企业</span>，具备扎实的工程能力和规范化的交付经验。
|
||||||
|
</p>
|
||||||
|
<p className="text-[#595959] leading-relaxed">
|
||||||
|
我们相信，优秀的技术咨询不仅需要过硬的技术能力，更需要深入理解客户的业务场景和真实需求。
|
||||||
|
每一位成员都是既懂技术又懂业务的复合型人才。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
>
|
||||||
|
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-8 text-center">团队优势</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
|
{TEAM_PILLARS.map((item, idx) => {
|
||||||
|
const Icon = item.icon;
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
key={item.title}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.5, delay: idx * 0.1 }}
|
||||||
|
className={idx >= 3 ? 'md:col-span-1 lg:col-start-1' : ''}
|
||||||
|
>
|
||||||
|
<div className="flex items-start gap-4 p-6 rounded-xl border border-[#E5E5E5] hover:border-[#C41E3A]/30 transition-colors h-full">
|
||||||
|
<div className="w-10 h-10 rounded-lg bg-[#FEF2F4] flex items-center justify-center shrink-0">
|
||||||
|
<Icon className="w-5 h-5 text-[#C41E3A]" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-[#1C1C1C] mb-1">{item.title}</h3>
|
||||||
|
<p className="text-sm text-[#595959]">{item.description}</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-lg font-bold text-[#1C1C1C] mb-2">{item.title}</h3>
|
</motion.div>
|
||||||
<p className="text-sm text-[#5C5C5C] leading-relaxed">{item.description}</p>
|
);
|
||||||
</div>
|
})}
|
||||||
</motion.div>
|
</div>
|
||||||
);
|
</motion.div>
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* CTA */}
|
<motion.div
|
||||||
<motion.div
|
initial={{ opacity: 0, y: 20 }}
|
||||||
initial={{ opacity: 0, y: 20 }}
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
viewport={{ once: true }}
|
||||||
transition={{ duration: 0.6, delay: 0.5 }}
|
transition={{ duration: 0.5 }}
|
||||||
className="text-center"
|
className="text-center pt-8"
|
||||||
>
|
>
|
||||||
<p className="text-lg text-[#5C5C5C] mb-6">想与我们的团队交流？</p>
|
<p className="text-lg text-[#595959] mb-6">想与我们的团队交流？</p>
|
||||||
<Button size="lg" asChild>
|
<Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white" asChild>
|
||||||
<StaticLink href="/contact">
|
<StaticLink href="/contact">
|
||||||
联系我们
|
联系我们
|
||||||
<ArrowRight className="ml-2 w-4 h-4" />
|
<ArrowRight className="ml-2 w-4 h-4" />
|
||||||
</StaticLink>
|
</StaticLink>
|
||||||
</Button>
|
</Button>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</motion.div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
+1
-1
@@ -98,7 +98,7 @@ export default function Error({
|
|||||||
<RefreshCw className="w-5 h-5 text-[#C41E3A]" />
|
<RefreshCw className="w-5 h-5 text-[#C41E3A]" />
|
||||||
</div>
|
</div>
|
||||||
<div className="text-left">
|
<div className="text-left">
|
||||||
<div className="font-semibold text-[#1C1C1C]">核心业务</div>
|
<div className="font-semibold text-[#1C1C1C]">服务</div>
|
||||||
<div className="text-sm text-[#5C5C5C]">了解我们的服务</div>
|
<div className="text-sm text-[#5C5C5C]">了解我们的服务</div>
|
||||||
</div>
|
</div>
|
||||||
</StaticLink>
|
</StaticLink>
|
||||||
|
|||||||
@@ -1164,6 +1164,56 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 墨韵流光 - 旋转渐变边框 */
|
||||||
|
@property --border-angle {
|
||||||
|
syntax: '<angle>';
|
||||||
|
initial-value: 0deg;
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotateBorder {
|
||||||
|
from { --border-angle: 0deg; }
|
||||||
|
to { --border-angle: 360deg; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.ink-glow-border {
|
||||||
|
animation: rotateBorder 4s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ink-glow-border::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: -1px;
|
||||||
|
border-radius: inherit;
|
||||||
|
padding: 1px;
|
||||||
|
background: conic-gradient(from var(--border-angle), var(--glow-start), var(--glow-end), var(--glow-start));
|
||||||
|
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||||
|
-webkit-mask-composite: xor;
|
||||||
|
mask-composite: exclude;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ink-glow-border:hover::before {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ink-glow-border::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: -4px;
|
||||||
|
border-radius: inherit;
|
||||||
|
background: conic-gradient(from var(--border-angle), var(--glow-start), var(--glow-end), var(--glow-start));
|
||||||
|
filter: blur(12px);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.5s ease;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ink-glow-border:hover::after {
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
/* 平板端优化 (768px - 1023px) */
|
/* 平板端优化 (768px - 1023px) */
|
||||||
@media (min-width: 768px) and (max-width: 1023px) {
|
@media (min-width: 768px) and (max-width: 1023px) {
|
||||||
.container-wide,
|
.container-wide,
|
||||||
|
|||||||
@@ -74,7 +74,7 @@ export default function NotFound() {
|
|||||||
<Search className="w-5 h-5 text-[#C41E3A]" />
|
<Search className="w-5 h-5 text-[#C41E3A]" />
|
||||||
</div>
|
</div>
|
||||||
<div className="text-left">
|
<div className="text-left">
|
||||||
<div className="font-semibold text-[#1C1C1C]">核心业务</div>
|
<div className="font-semibold text-[#1C1C1C]">服务</div>
|
||||||
<div className="text-sm text-[#5C5C5C]">我们的服务</div>
|
<div className="text-sm text-[#5C5C5C]">我们的服务</div>
|
||||||
</div>
|
</div>
|
||||||
</StaticLink>
|
</StaticLink>
|
||||||
@@ -87,21 +87,21 @@ export default function NotFound() {
|
|||||||
<Search className="w-5 h-5 text-[#C41E3A]" />
|
<Search className="w-5 h-5 text-[#C41E3A]" />
|
||||||
</div>
|
</div>
|
||||||
<div className="text-left">
|
<div className="text-left">
|
||||||
<div className="font-semibold text-[#1C1C1C]">产品服务</div>
|
<div className="font-semibold text-[#1C1C1C]">产品</div>
|
||||||
<div className="text-sm text-[#5C5C5C]">企业级产品</div>
|
<div className="text-sm text-[#5C5C5C]">企业级产品</div>
|
||||||
</div>
|
</div>
|
||||||
</StaticLink>
|
</StaticLink>
|
||||||
|
|
||||||
<StaticLink
|
<StaticLink
|
||||||
href="/cases"
|
href="/solutions"
|
||||||
className="flex items-center p-4 bg-white rounded-lg hover:shadow-md transition-shadow group"
|
className="flex items-center p-4 bg-white rounded-lg hover:shadow-md transition-shadow group"
|
||||||
>
|
>
|
||||||
<div className="w-10 h-10 bg-[#C41E3A]/10 rounded-lg flex items-center justify-center mr-4 group-hover:bg-[#C41E3A]/20 transition-colors">
|
<div className="w-10 h-10 bg-[#C41E3A]/10 rounded-lg flex items-center justify-center mr-4 group-hover:bg-[#C41E3A]/20 transition-colors">
|
||||||
<Search className="w-5 h-5 text-[#C41E3A]" />
|
<Search className="w-5 h-5 text-[#C41E3A]" />
|
||||||
</div>
|
</div>
|
||||||
<div className="text-left">
|
<div className="text-left">
|
||||||
<div className="font-semibold text-[#1C1C1C]">成功案例</div>
|
<div className="font-semibold text-[#1C1C1C]">解决方案</div>
|
||||||
<div className="text-sm text-[#5C5C5C]">客户故事</div>
|
<div className="text-sm text-[#5C5C5C]">行业方案</div>
|
||||||
</div>
|
</div>
|
||||||
</StaticLink>
|
</StaticLink>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -45,9 +45,8 @@ jest.mock('@/lib/constants', () => ({
|
|||||||
NAVIGATION: [
|
NAVIGATION: [
|
||||||
{ id: 'home', label: '首页', href: '/' },
|
{ id: 'home', label: '首页', href: '/' },
|
||||||
{ id: 'services', label: '服务', href: '/#services' },
|
{ id: 'services', label: '服务', href: '/#services' },
|
||||||
{ id: 'products', label: '产品', href: '/#products' },
|
{ id: 'products', label: '产品', href: '/products' },
|
||||||
{ id: 'cases', label: '案例', href: '/#cases' },
|
{ id: 'about', label: '关于', href: '/about' },
|
||||||
{ id: 'about', label: '关于', href: '/#about' },
|
|
||||||
{ id: 'contact', label: '联系', href: '/contact' },
|
{ id: 'contact', label: '联系', href: '/contact' },
|
||||||
],
|
],
|
||||||
}));
|
}));
|
||||||
|
|||||||
@@ -11,11 +11,10 @@ export function Footer() {
|
|||||||
<div data-testid="card-brand">
|
<div data-testid="card-brand">
|
||||||
<div className="mb-6">
|
<div className="mb-6">
|
||||||
<Image
|
<Image
|
||||||
src="/logo.svg"
|
src="/logo-light.svg"
|
||||||
alt={COMPANY_INFO.name}
|
alt={COMPANY_INFO.name}
|
||||||
width={160}
|
width={160}
|
||||||
height={40}
|
height={40}
|
||||||
className="brightness-0 invert"
|
|
||||||
loading="eager"
|
loading="eager"
|
||||||
priority
|
priority
|
||||||
/>
|
/>
|
||||||
@@ -55,7 +54,7 @@ export function Footer() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div data-testid="card-products">
|
<div data-testid="card-products">
|
||||||
<h3 className="font-semibold text-base mb-5 text-white">产品服务</h3>
|
<h3 className="font-semibold text-base mb-5 text-white">产品</h3>
|
||||||
<ul className="space-y-3">
|
<ul className="space-y-3">
|
||||||
{(MEGA_DROPDOWN_DATA.products ?? []).map((item) => (
|
{(MEGA_DROPDOWN_DATA.products ?? []).map((item) => (
|
||||||
<li key={item.id}>
|
<li key={item.id}>
|
||||||
@@ -111,7 +110,7 @@ export function Footer() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="border-t border-[#333] mt-12 pt-8">
|
<div className="border-t border-[#333] mt-12 pt-8 pb-24 md:pb-8">
|
||||||
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
|
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
|
||||||
<p className="text-[#666] text-sm">
|
<p className="text-[#666] text-sm">
|
||||||
© {new Date().getFullYear()} {COMPANY_INFO.name}. All rights reserved.
|
© {new Date().getFullYear()} {COMPANY_INFO.name}. All rights reserved.
|
||||||
@@ -127,28 +126,28 @@ export function Footer() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="text-center mt-6 pt-6 border-t border-[#333]">
|
<div className="text-center mt-6 pt-6 border-t border-[#333]">
|
||||||
<div className="flex flex-col sm:flex-row justify-center items-center gap-2 sm:gap-4 text-xs text-[#555]">
|
<div className="flex flex-col sm:flex-row justify-center items-center gap-2 sm:gap-4 text-xs">
|
||||||
<a
|
<a
|
||||||
href="https://beian.miit.gov.cn/"
|
href="https://beian.miit.gov.cn/"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
className="hover:text-white transition-colors duration-200"
|
className="text-[#E0E0E0] hover:text-white transition-colors duration-200"
|
||||||
>
|
>
|
||||||
{COMPANY_INFO.icp}
|
{COMPANY_INFO.icp}
|
||||||
</a>
|
</a>
|
||||||
<span className="hidden sm:inline">|</span>
|
<span className="hidden sm:inline text-[#999]">|</span>
|
||||||
<a
|
<a
|
||||||
href="https://beian.mps.gov.cn/#/query/webSearch?code=51010602003285"
|
href="https://beian.mps.gov.cn/#/query/webSearch?code=51010602003285"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
className="hover:text-white transition-colors duration-200 inline-flex items-center gap-1"
|
className="text-[#E0E0E0] hover:text-white transition-colors duration-200 inline-flex items-center gap-1.5"
|
||||||
>
|
>
|
||||||
<Image
|
<Image
|
||||||
src="/images/beian-icon.png"
|
src="/images/beian-icon.png"
|
||||||
alt="公安备案"
|
alt="公安备案"
|
||||||
width={14}
|
width={16}
|
||||||
height={14}
|
height={16}
|
||||||
className="w-3.5 h-3.5"
|
className="w-4 h-4"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
/>
|
/>
|
||||||
{COMPANY_INFO.police}
|
{COMPANY_INFO.police}
|
||||||
|
|||||||
@@ -60,9 +60,8 @@ jest.mock('@/lib/constants', () => ({
|
|||||||
NAVIGATION: [
|
NAVIGATION: [
|
||||||
{ id: 'home', label: '首页', href: '/' },
|
{ id: 'home', label: '首页', href: '/' },
|
||||||
{ id: 'services', label: '服务', href: '/#services' },
|
{ id: 'services', label: '服务', href: '/#services' },
|
||||||
{ id: 'products', label: '产品', href: '/#products' },
|
{ id: 'products', label: '产品', href: '/products' },
|
||||||
{ id: 'cases', label: '案例', href: '/#cases' },
|
{ id: 'about', label: '关于', href: '/about' },
|
||||||
{ id: 'about', label: '关于', href: '/#about' },
|
|
||||||
{ id: 'contact', label: '联系', href: '/contact' },
|
{ id: 'contact', label: '联系', href: '/contact' },
|
||||||
],
|
],
|
||||||
}));
|
}));
|
||||||
@@ -104,7 +103,6 @@ describe('Header', () => {
|
|||||||
expect(screen.getByText('首页')).toBeInTheDocument();
|
expect(screen.getByText('首页')).toBeInTheDocument();
|
||||||
expect(screen.getByText('服务')).toBeInTheDocument();
|
expect(screen.getByText('服务')).toBeInTheDocument();
|
||||||
expect(screen.getByText('产品')).toBeInTheDocument();
|
expect(screen.getByText('产品')).toBeInTheDocument();
|
||||||
expect(screen.getByText('案例')).toBeInTheDocument();
|
|
||||||
expect(screen.getByText('关于')).toBeInTheDocument();
|
expect(screen.getByText('关于')).toBeInTheDocument();
|
||||||
expect(screen.getByText('联系')).toBeInTheDocument();
|
expect(screen.getByText('联系')).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { Suspense, useState, useEffect, useCallback, useRef } from 'react';
|
import { Suspense, useState, useEffect, useCallback } from 'react';
|
||||||
import { StaticLink } from '@/components/ui/static-link';
|
import { StaticLink } from '@/components/ui/static-link';
|
||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
import { usePathname, useSearchParams } from 'next/navigation';
|
import { usePathname } from 'next/navigation';
|
||||||
import { Menu, X } from 'lucide-react';
|
import { Menu, X } from 'lucide-react';
|
||||||
import { AnimatePresence, motion } from 'framer-motion';
|
import { AnimatePresence, motion } from 'framer-motion';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
@@ -11,58 +11,16 @@ import { COMPANY_INFO, NAVIGATION_V2, MEGA_DROPDOWN_DATA, type NavigationItemV2
|
|||||||
import { MegaDropdown } from '@/components/layout/mega-dropdown';
|
import { MegaDropdown } from '@/components/layout/mega-dropdown';
|
||||||
import { useFocusTrap } from '@/hooks/use-focus-trap';
|
import { useFocusTrap } from '@/hooks/use-focus-trap';
|
||||||
|
|
||||||
declare global {
|
|
||||||
interface Window {
|
|
||||||
__isProgrammaticScroll?: boolean;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function HeaderContent() {
|
function HeaderContent() {
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
const [isScrolled, setIsScrolled] = useState(false);
|
const [isScrolled, setIsScrolled] = useState(false);
|
||||||
const [openDropdown, setOpenDropdown] = useState<string | null>(null);
|
const [openDropdown, setOpenDropdown] = useState<string | null>(null);
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
const searchParams = useSearchParams();
|
|
||||||
const focusTrapRef = useFocusTrap<HTMLDivElement>(isOpen);
|
const focusTrapRef = useFocusTrap<HTMLDivElement>(isOpen);
|
||||||
const isScrollingRef = useRef(false);
|
|
||||||
const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
|
||||||
|
|
||||||
const getActiveSection = useCallback(() => {
|
|
||||||
if (pathname === '/contact') {return 'contact';}
|
|
||||||
if (pathname === '/') {
|
|
||||||
const section = searchParams.get('section');
|
|
||||||
return section || 'home';
|
|
||||||
}
|
|
||||||
return '';
|
|
||||||
}, [pathname, searchParams]);
|
|
||||||
|
|
||||||
const activeSection = getActiveSection();
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleScroll = () => {
|
const handleScroll = () => {
|
||||||
setIsScrolled(window.scrollY > 20);
|
setIsScrolled(window.scrollY > 20);
|
||||||
|
|
||||||
if (pathname === '/' && !isScrollingRef.current && !window.__isProgrammaticScroll) {
|
|
||||||
const scrollPosition = window.scrollY + 100;
|
|
||||||
const sections = ['home', 'services', 'solutions', 'products', 'cases', 'about', 'team', 'news'];
|
|
||||||
|
|
||||||
for (const sectionId of sections) {
|
|
||||||
const element = document.getElementById(sectionId);
|
|
||||||
if (element) {
|
|
||||||
const offsetTop = element.offsetTop;
|
|
||||||
const offsetHeight = element.offsetHeight;
|
|
||||||
|
|
||||||
if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) {
|
|
||||||
const currentSection = searchParams.get('section') || 'home';
|
|
||||||
if (currentSection !== sectionId) {
|
|
||||||
const url = sectionId === 'home' ? '/' : `/?section=${sectionId}`;
|
|
||||||
window.history.replaceState(null, '', url);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleGlobalKeyDown = (e: KeyboardEvent) => {
|
const handleGlobalKeyDown = (e: KeyboardEvent) => {
|
||||||
@@ -77,11 +35,8 @@ function HeaderContent() {
|
|||||||
return () => {
|
return () => {
|
||||||
window.removeEventListener('scroll', handleScroll);
|
window.removeEventListener('scroll', handleScroll);
|
||||||
window.removeEventListener('keydown', handleGlobalKeyDown);
|
window.removeEventListener('keydown', handleGlobalKeyDown);
|
||||||
if (scrollTimeoutRef.current) {
|
|
||||||
clearTimeout(scrollTimeoutRef.current);
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
}, [pathname, isOpen, searchParams]);
|
}, [isOpen]);
|
||||||
|
|
||||||
const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
|
const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
|
||||||
if (e.key === 'Enter' || e.key === ' ') {
|
if (e.key === 'Enter' || e.key === ' ') {
|
||||||
@@ -95,57 +50,25 @@ function HeaderContent() {
|
|||||||
|
|
||||||
const handleNavClick = useCallback((e: React.MouseEvent<HTMLAnchorElement>, item: NavigationItemV2) => {
|
const handleNavClick = useCallback((e: React.MouseEvent<HTMLAnchorElement>, item: NavigationItemV2) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
window.location.href = item.href;
|
||||||
if (item.id === 'contact') {
|
|
||||||
window.location.href = '/contact';
|
|
||||||
} else if (item.id === 'home') {
|
|
||||||
if (pathname === '/') {
|
|
||||||
isScrollingRef.current = true;
|
|
||||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
||||||
window.history.pushState(null, '', '/');
|
|
||||||
|
|
||||||
scrollTimeoutRef.current = setTimeout(() => {
|
|
||||||
isScrollingRef.current = false;
|
|
||||||
}, 1000);
|
|
||||||
} else {
|
|
||||||
window.location.href = '/';
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (pathname === '/') {
|
|
||||||
const scrollToSection = (retryCount = 0) => {
|
|
||||||
const element = document.getElementById(item.id);
|
|
||||||
if (element) {
|
|
||||||
isScrollingRef.current = true;
|
|
||||||
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
||||||
window.history.pushState(null, '', `/?section=${item.id}`);
|
|
||||||
|
|
||||||
scrollTimeoutRef.current = setTimeout(() => {
|
|
||||||
isScrollingRef.current = false;
|
|
||||||
}, 1000);
|
|
||||||
} else if (retryCount < 10) {
|
|
||||||
setTimeout(() => scrollToSection(retryCount + 1), 100);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
scrollToSection();
|
|
||||||
} else {
|
|
||||||
window.location.href = `/?section=${item.id}`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setIsOpen(false);
|
setIsOpen(false);
|
||||||
}, [pathname]);
|
}, []);
|
||||||
|
|
||||||
const isActive = useCallback((item: NavigationItemV2) => {
|
const isActive = useCallback((item: NavigationItemV2) => {
|
||||||
if (item.id === 'contact') {
|
if (item.id === 'contact') {
|
||||||
return pathname === '/contact';
|
return pathname === '/contact';
|
||||||
}
|
}
|
||||||
|
if (item.id === 'home') {
|
||||||
if (pathname === '/') {
|
return pathname === '/';
|
||||||
return activeSection === item.id;
|
|
||||||
}
|
}
|
||||||
|
if (item.id === 'products') {
|
||||||
return false;
|
return pathname === '/products' || pathname.startsWith('/products/');
|
||||||
}, [pathname, activeSection]);
|
}
|
||||||
|
if (item.id === 'solutions') {
|
||||||
|
return pathname === '/solutions' || pathname.startsWith('/solutions/');
|
||||||
|
}
|
||||||
|
return pathname === `/${item.id}`;
|
||||||
|
}, [pathname]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@@ -169,9 +92,9 @@ function HeaderContent() {
|
|||||||
<Image
|
<Image
|
||||||
src="/logo.svg"
|
src="/logo.svg"
|
||||||
alt={COMPANY_INFO.name}
|
alt={COMPANY_INFO.name}
|
||||||
width={128}
|
width={120}
|
||||||
height={32}
|
height={30}
|
||||||
className="transition-transform duration-200 group-hover:scale-105"
|
className="transition-transform duration-200 group-hover:scale-105 w-auto h-8 md:h-8"
|
||||||
loading="eager"
|
loading="eager"
|
||||||
priority
|
priority
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -30,7 +30,14 @@ export function MegaDropdown({ label, items, isOpen, onToggle }: MegaDropdownPro
|
|||||||
<div ref={dropdownRef} className="relative">
|
<div ref={dropdownRef} className="relative">
|
||||||
<button
|
<button
|
||||||
onClick={onToggle}
|
onClick={onToggle}
|
||||||
className="flex items-center gap-1 text-sm font-medium text-[#1C1C1C] hover:text-[#C41E3A] transition-colors duration-200"
|
className={`
|
||||||
|
flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md
|
||||||
|
transition-all duration-200
|
||||||
|
${isOpen
|
||||||
|
? 'text-[#C41E3A] bg-[#FEF2F4]'
|
||||||
|
: 'text-[#3D3D3D] hover:text-[#1C1C1C] hover:bg-[#F5F5F5]'
|
||||||
|
}
|
||||||
|
`}
|
||||||
aria-expanded={isOpen}
|
aria-expanded={isOpen}
|
||||||
aria-haspopup="true"
|
aria-haspopup="true"
|
||||||
>
|
>
|
||||||
@@ -47,17 +54,17 @@ export function MegaDropdown({ label, items, isOpen, onToggle }: MegaDropdownPro
|
|||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
exit={{ opacity: 0, y: -8 }}
|
exit={{ opacity: 0, y: -8 }}
|
||||||
transition={{ duration: 0.15 }}
|
transition={{ duration: 0.15 }}
|
||||||
className="absolute top-full left-1/2 -translate-x-1/2 mt-2 w-[480px] bg-white rounded-xl border border-[#E5E5E5] shadow-lg p-4 z-50"
|
className="absolute top-full left-1/2 -translate-x-1/2 mt-3 w-[520px] bg-white rounded-xl border border-[#E5E5E5] shadow-lg p-5 z-50"
|
||||||
>
|
>
|
||||||
<div className="grid grid-cols-2 gap-2">
|
<div className="grid grid-cols-2 gap-3">
|
||||||
{items.map((item) => (
|
{items.map((item) => (
|
||||||
<StaticLink
|
<StaticLink
|
||||||
key={item.id}
|
key={item.id}
|
||||||
href={item.href}
|
href={item.href}
|
||||||
className="block p-3 rounded-lg border-l-[3px] border-l-[#C41E3A] hover:bg-[#FFFBF5] transition-colors duration-200"
|
className="block p-4 rounded-lg border-l-[3px] border-l-[#C41E3A] hover:bg-[#FFFBF5] transition-colors duration-200"
|
||||||
>
|
>
|
||||||
<div className="text-sm font-semibold text-[#1C1C1C]">{item.title}</div>
|
<div className="text-sm font-semibold text-[#1C1C1C]">{item.title}</div>
|
||||||
<div className="text-xs text-[#5C5C5C] mt-1">{item.description}</div>
|
<div className="text-xs text-[#5C5C5C] mt-1.5 leading-relaxed">{item.description}</div>
|
||||||
</StaticLink>
|
</StaticLink>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,55 +1,38 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState, useLayoutEffect, useRef } from 'react';
|
|
||||||
import { StaticLink } from '@/components/ui/static-link';
|
import { StaticLink } from '@/components/ui/static-link';
|
||||||
import { usePathname, useSearchParams } from 'next/navigation';
|
import { usePathname } from 'next/navigation';
|
||||||
import { Home, Briefcase, Package, FileText, User } from 'lucide-react';
|
import { Home, Briefcase, Package, FileText, User } from 'lucide-react';
|
||||||
import { motion } from 'framer-motion';
|
import { motion } from 'framer-motion';
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
const tabs = [
|
const tabs = [
|
||||||
{ id: 'home', label: '首页', href: '/', icon: Home },
|
{ id: 'home', label: '首页', href: '/', icon: Home },
|
||||||
{ id: 'services', label: '服务', href: '/#services', icon: Briefcase },
|
{ id: 'services', label: '服务', href: '/services', icon: Briefcase },
|
||||||
{ id: 'products', label: '产品', href: '/#products', icon: Package },
|
{ id: 'products', label: '产品', href: '/products', icon: Package },
|
||||||
{ id: 'news', label: '新闻', href: '/#news', icon: FileText },
|
{ id: 'about', label: '关于', href: '/about', icon: FileText },
|
||||||
{ id: 'contact', label: '联系', href: '/contact', icon: User },
|
{ id: 'contact', label: '联系', href: '/contact', icon: User },
|
||||||
];
|
];
|
||||||
|
|
||||||
export function MobileTabBar() {
|
export function MobileTabBar() {
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
const searchParams = useSearchParams();
|
|
||||||
const [hash, setHash] = useState('');
|
|
||||||
const isInitializedRef = useRef(false);
|
|
||||||
|
|
||||||
useLayoutEffect(() => {
|
|
||||||
if (!isInitializedRef.current) {
|
|
||||||
isInitializedRef.current = true;
|
|
||||||
setHash(window.location.hash.slice(1));
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleHashChange = () => {
|
|
||||||
setHash(window.location.hash.slice(1));
|
|
||||||
};
|
|
||||||
|
|
||||||
window.addEventListener('hashchange', handleHashChange);
|
|
||||||
return () => window.removeEventListener('hashchange', handleHashChange);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const isActive = (_href: string, id: string) => {
|
const isActive = (_href: string, id: string) => {
|
||||||
|
if (id === 'home') {
|
||||||
|
return pathname === '/';
|
||||||
|
}
|
||||||
if (id === 'contact') {
|
if (id === 'contact') {
|
||||||
return pathname === '/contact';
|
return pathname === '/contact';
|
||||||
}
|
}
|
||||||
|
if (id === 'products') {
|
||||||
if (pathname === '/') {
|
return pathname === '/products' || pathname.startsWith('/products/');
|
||||||
const section = searchParams.get('section');
|
}
|
||||||
const currentSection = section || hash;
|
if (id === 'services') {
|
||||||
|
return pathname === '/services' || pathname.startsWith('/services/');
|
||||||
if (id === 'home') {
|
}
|
||||||
return !currentSection || currentSection === 'home';
|
if (id === 'about') {
|
||||||
}
|
return pathname === '/about';
|
||||||
return currentSection === id;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,43 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { StaticLink } from '@/components/ui/static-link';
|
||||||
|
import { ChevronRight, Home } from 'lucide-react';
|
||||||
|
|
||||||
|
interface BreadcrumbItem {
|
||||||
|
label: string;
|
||||||
|
href?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PageNavProps {
|
||||||
|
items: BreadcrumbItem[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function PageNav({ items }: PageNavProps) {
|
||||||
|
return (
|
||||||
|
<nav aria-label="breadcrumb" className="flex items-center gap-1.5 text-sm text-[#A3A3A3] mb-8">
|
||||||
|
<StaticLink href="/" className="flex items-center hover:text-[#C41E3A] transition-colors" aria-label="返回首页">
|
||||||
|
<Home className="w-3.5 h-3.5" />
|
||||||
|
</StaticLink>
|
||||||
|
{items.map((item, index) => {
|
||||||
|
const isLast = index === items.length - 1;
|
||||||
|
return (
|
||||||
|
<div key={index} className="flex items-center gap-1.5">
|
||||||
|
<ChevronRight className="w-3.5 h-3.5 text-[#D4D4D4]" />
|
||||||
|
{isLast || !item.href ? (
|
||||||
|
<span className={isLast ? 'text-[#1C1C1C] font-medium' : ''}>
|
||||||
|
{item.label}
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<StaticLink
|
||||||
|
href={item.href}
|
||||||
|
className="hover:text-[#C41E3A] transition-colors"
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
</StaticLink>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -3,76 +3,80 @@
|
|||||||
import { motion } from 'framer-motion';
|
import { motion } from 'framer-motion';
|
||||||
import { useInView } from 'framer-motion';
|
import { useInView } from 'framer-motion';
|
||||||
import { useRef } from 'react';
|
import { useRef } from 'react';
|
||||||
import { StaticLink } from '@/components/ui/static-link';
|
import { InkGlowCard } from '@/components/ui/ink-glow-card';
|
||||||
import { Card, CardContent } from '@/components/ui/card';
|
import { Target, Heart, Zap } from 'lucide-react';
|
||||||
import { Button } from '@/components/ui/button';
|
|
||||||
import { COMPANY_INFO, STATS } from '@/lib/constants';
|
const VALUES = [
|
||||||
import { ArrowRight } from 'lucide-react';
|
{
|
||||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
icon: Target,
|
||||||
|
title: '务实',
|
||||||
|
description: '不画大饼，只做能落地的方案。每个建议都经过实践验证，每个承诺都有交付支撑。',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Heart,
|
||||||
|
title: '共情',
|
||||||
|
description: '先理解您的困境，再提供解决方案。我们相信，好的技术伙伴首先是好的倾听者。',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Zap,
|
||||||
|
title: '敏捷',
|
||||||
|
description: '快速响应，持续迭代。在不确定的市场中，速度本身就是竞争力。',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const valueAccents: { rgb: string; glowStart: string; glowEnd: string }[] = [
|
||||||
|
{ rgb: '196, 30, 58', glowStart: '#C41E3A', glowEnd: '#D97706' },
|
||||||
|
{ rgb: '217, 119, 6', glowStart: '#D97706', glowEnd: '#16A34A' },
|
||||||
|
{ rgb: '37, 99, 235', glowStart: '#2563EB', glowEnd: '#7C3AED' },
|
||||||
|
];
|
||||||
|
|
||||||
export function AboutSection() {
|
export function AboutSection() {
|
||||||
const ref = useRef(null);
|
const ref = useRef(null);
|
||||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||||
const shouldReduceMotion = useReducedMotion();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section id="about" role="region" aria-labelledby="about-heading" className="py-24 bg-[#FAFAFA] relative" ref={ref}>
|
<section id="about" role="region" aria-labelledby="about-heading" className="py-20 md:py-28 bg-[#FAFAFA]" ref={ref}>
|
||||||
<div className="absolute inset-0 bg-[linear-gradient(rgba(28,28,28,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(28,28,28,0.02)_1px,transparent_1px)] bg-size-[40px_40px]" />
|
<div className="container-wide">
|
||||||
<div className="container-wide relative z-10">
|
<motion.div
|
||||||
<motion.div
|
initial={{ opacity: 0, y: 20 }}
|
||||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
|
||||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||||
transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.6 }}
|
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||||||
className="max-w-4xl mx-auto"
|
className="text-center max-w-3xl mx-auto mb-14"
|
||||||
>
|
>
|
||||||
<div className="text-center mb-12">
|
<h2 id="about-heading" className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4">
|
||||||
<h2 id="about-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
|
关于<span className="text-[#C41E3A] font-calligraphy">诺瓦隆</span>
|
||||||
关于 <span className="tracking-tight font-brand text-[#C41E3A]" style={{ fontWeight: 'normal', WebkitFontSmoothing: 'antialiased', MozOsxFontSmoothing: 'grayscale', textRendering: 'optimizeLegibility' }}>{COMPANY_INFO.shortName}</span>
|
</h2>
|
||||||
</h2>
|
<p className="text-base text-[#595959]">
|
||||||
<p className="text-lg text-[#5C5C5C] mb-8">
|
我们相信，数字化转型不是一场冒险，而是一次有准备的远行
|
||||||
{COMPANY_INFO.slogan}
|
</p>
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-white rounded-2xl p-8 mb-12 border border-[#E5E5E5]">
|
|
||||||
<p className="text-lg text-[#5C5C5C] leading-relaxed text-center mb-6">
|
|
||||||
“企业需要的，不是一个高高在上的‘专家’，也不是一个做完就跑的‘卖家’，而是一个能坐下来、一起想办法的同行者。”
|
|
||||||
</p>
|
|
||||||
<p className="text-[#1C1C1C] font-medium text-center">
|
|
||||||
我们只做一件事：成为您数字化转型路上，信得过的成长伙伴。
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<motion.div
|
|
||||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
|
||||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
|
||||||
transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.6, delay: 0.2 }}
|
|
||||||
className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12"
|
|
||||||
>
|
|
||||||
{STATS.map((stat, idx) => (
|
|
||||||
<Card key={idx} className="text-center border-[#E5E5E5]">
|
|
||||||
<CardContent className="pt-6">
|
|
||||||
<div className="text-3xl sm:text-4xl font-bold text-[#C41E3A] mb-2">{stat.value}</div>
|
|
||||||
<div className="text-sm text-[#5C5C5C]">{stat.label}</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
))}
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<motion.div
|
|
||||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
|
||||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
|
||||||
transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.6, delay: 0.3 }}
|
|
||||||
className="text-center"
|
|
||||||
>
|
|
||||||
<Button size="lg" variant="outline" className="group" asChild>
|
|
||||||
<StaticLink href="/about">
|
|
||||||
了解更多关于我们
|
|
||||||
<ArrowRight className="ml-2 w-4 h-4 transition-transform group-hover:translate-x-1" />
|
|
||||||
</StaticLink>
|
|
||||||
</Button>
|
|
||||||
</motion.div>
|
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
|
||||||
|
{VALUES.map((item, idx) => {
|
||||||
|
const Icon = item.icon;
|
||||||
|
const accent = valueAccents[idx % valueAccents.length]!;
|
||||||
|
return (
|
||||||
|
<InkGlowCard
|
||||||
|
key={item.title}
|
||||||
|
index={idx}
|
||||||
|
accentColorRgb={accent.rgb}
|
||||||
|
glowStart={accent.glowStart}
|
||||||
|
glowEnd={accent.glowEnd}
|
||||||
|
>
|
||||||
|
<div className="p-6 md:p-8">
|
||||||
|
<div
|
||||||
|
className="w-11 h-11 rounded-xl flex items-center justify-center mb-5"
|
||||||
|
style={{ backgroundColor: `rgba(${accent.rgb}, 0.06)` }}
|
||||||
|
>
|
||||||
|
<Icon className="w-5 h-5" style={{ color: accent.glowStart }} strokeWidth={1.8} />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-2">{item.title}</h3>
|
||||||
|
<p className="text-sm text-[#595959] leading-relaxed">{item.description}</p>
|
||||||
|
</div>
|
||||||
|
</InkGlowCard>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,98 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import { motion } from 'framer-motion';
|
|
||||||
import { useInView } from 'framer-motion';
|
|
||||||
import { useRef } from 'react';
|
|
||||||
import { StaticLink } from '@/components/ui/static-link';
|
|
||||||
import { Card, CardContent } from '@/components/ui/card';
|
|
||||||
import { Button } from '@/components/ui/button';
|
|
||||||
import { Badge } from '@/components/ui/badge';
|
|
||||||
import { TouchSwipe } from '@/components/ui/touch-swipe';
|
|
||||||
import { CASES } from '@/lib/constants';
|
|
||||||
import { ArrowRight, Building2 } from 'lucide-react';
|
|
||||||
|
|
||||||
export function CasesSection() {
|
|
||||||
const ref = useRef(null);
|
|
||||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section id="cases" role="region" aria-labelledby="cases-heading" className="py-24 bg-white relative overflow-hidden" ref={ref}>
|
|
||||||
<div className="absolute top-1/3 left-0 w-[400px] h-[400px] bg-[rgba(196,30,58,0.03)] rounded-full blur-3xl" />
|
|
||||||
<div className="absolute top-1/3 right-0 w-[300px] h-[300px] bg-[rgba(196,30,58,0.02)] rounded-full blur-3xl" />
|
|
||||||
|
|
||||||
<div className="container-wide relative z-10">
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
|
||||||
transition={{ duration: 0.6 }}
|
|
||||||
className="text-center max-w-3xl mx-auto mb-16"
|
|
||||||
>
|
|
||||||
<h2 id="cases-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4">
|
|
||||||
与谁同行，<span className="text-[#C41E3A] font-calligraphy">决定能走多远</span>
|
|
||||||
</h2>
|
|
||||||
<p className="text-lg text-[#5C5C5C] max-w-2xl mx-auto">
|
|
||||||
我们与优秀的企业同行，共同成长，共创未来
|
|
||||||
</p>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<TouchSwipe
|
|
||||||
onSwipeLeft={() => {
|
|
||||||
}}
|
|
||||||
onSwipeRight={() => {
|
|
||||||
}}
|
|
||||||
className="md:hidden"
|
|
||||||
>
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
||||||
{CASES.map((caseItem, index) => (
|
|
||||||
<motion.div
|
|
||||||
key={caseItem.id}
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
|
||||||
transition={{ duration: 0.5, delay: 0.1 + index * 0.1 }}
|
|
||||||
>
|
|
||||||
<StaticLink href={`/cases/${caseItem.id}`}>
|
|
||||||
<Card className="h-full group cursor-pointer border-[#E5E5E5] hover:border-[#C41E3A] transition-colors overflow-hidden">
|
|
||||||
<div className="relative h-40 bg-gradient-to-br from-[#F5F5F5] to-[#E5E5E5] flex items-center justify-center">
|
|
||||||
<Building2 className="w-16 h-16 text-[#C41E3A]/20 group-hover:scale-110 transition-transform duration-300" />
|
|
||||||
<div className="absolute top-4 right-4">
|
|
||||||
<Badge className="bg-white/90 text-[#1C1C1C] hover:bg-white">
|
|
||||||
{caseItem.industry}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<CardContent className="p-6">
|
|
||||||
<div className="flex items-center gap-2 mb-3">
|
|
||||||
<Building2 className="w-4 h-4 text-[#C41E3A]" />
|
|
||||||
<span className="text-sm text-[#5C5C5C]">{caseItem.client}</span>
|
|
||||||
</div>
|
|
||||||
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-3 group-hover:text-[#C41E3A] transition-colors">
|
|
||||||
{caseItem.title}
|
|
||||||
</h3>
|
|
||||||
<p className="text-[#5C5C5C] text-sm line-clamp-2 mb-4">
|
|
||||||
{caseItem.description}
|
|
||||||
</p>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</StaticLink>
|
|
||||||
</motion.div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</TouchSwipe>
|
|
||||||
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
|
||||||
transition={{ duration: 0.6, delay: 0.4 }}
|
|
||||||
className="text-center mt-12"
|
|
||||||
>
|
|
||||||
<Button variant="outline" size="lg" className="group" asChild>
|
|
||||||
<StaticLink href="/cases">
|
|
||||||
查看更多案例
|
|
||||||
<ArrowRight className="ml-2 w-4 h-4 transition-transform group-hover:translate-x-1" />
|
|
||||||
</StaticLink>
|
|
||||||
</Button>
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -11,21 +11,21 @@ const CHALLENGES = [
|
|||||||
title: '数据孤岛',
|
title: '数据孤岛',
|
||||||
description: '各部门系统独立运行，数据无法互通共享，导致决策信息碎片化，影响整体运营效率。',
|
description: '各部门系统独立运行，数据无法互通共享，导致决策信息碎片化，影响整体运营效率。',
|
||||||
scenario: 'isolation' as const,
|
scenario: 'isolation' as const,
|
||||||
href: '/solutions/data-integration',
|
href: '/solutions#consulting',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'growth-bottleneck',
|
id: 'growth-bottleneck',
|
||||||
title: '增长瓶颈',
|
title: '增长瓶颈',
|
||||||
description: '业务规模扩大但管理手段滞后，流程效率低下，难以支撑持续增长的业务需求。',
|
description: '业务规模扩大但管理手段滞后，流程效率低下，难以支撑持续增长的业务需求。',
|
||||||
scenario: 'growth' as const,
|
scenario: 'growth' as const,
|
||||||
href: '/solutions/growth-enablement',
|
href: '/solutions#tech',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'compliance-risk',
|
id: 'compliance-risk',
|
||||||
title: '合规风险',
|
title: '合规风险',
|
||||||
description: '行业监管日趋严格，传统手工操作难以满足合规要求，数据安全和审计面临挑战。',
|
description: '行业监管日趋严格，传统手工操作难以满足合规要求，数据安全和审计面临挑战。',
|
||||||
scenario: 'compliance' as const,
|
scenario: 'compliance' as const,
|
||||||
href: '/solutions/compliance-management',
|
href: '/solutions#accompany',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
@@ -55,24 +55,24 @@ export function ChallengeSection() {
|
|||||||
<section
|
<section
|
||||||
id="challenges"
|
id="challenges"
|
||||||
ref={sectionRef}
|
ref={sectionRef}
|
||||||
className="bg-white py-16 md:py-24"
|
className="py-20 md:py-28 bg-[#FAFAFA]"
|
||||||
>
|
>
|
||||||
<div className="container-wide">
|
<div className="container-wide">
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||||
animate={isVisible ? { opacity: 1, y: 0 } : {}}
|
animate={isVisible ? { opacity: 1, y: 0 } : {}}
|
||||||
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||||||
className="mb-12"
|
className="text-center max-w-3xl mx-auto mb-14"
|
||||||
>
|
>
|
||||||
<h2 className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4">
|
<h2 className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4">
|
||||||
您的挑战，我们的使命
|
您的挑战，我们的<span className="text-[#C41E3A] font-calligraphy">使命</span>
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-lg text-[#595959] max-w-2xl">
|
<p className="text-base text-[#595959]">
|
||||||
深入理解企业数字化进程中的核心痛点，提供针对性解决方案
|
深入理解企业数字化进程中的核心痛点，提供针对性解决方案
|
||||||
</p>
|
</p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
|
||||||
{CHALLENGES.map((challenge, index) => (
|
{CHALLENGES.map((challenge, index) => (
|
||||||
<ChallengeCard
|
<ChallengeCard
|
||||||
key={challenge.id}
|
key={challenge.id}
|
||||||
|
|||||||
@@ -36,7 +36,6 @@ export function ContactSection() {
|
|||||||
const [errors, setErrors] = useState<FormErrors>({});
|
const [errors, setErrors] = useState<FormErrors>({});
|
||||||
const sectionRef = useRef<HTMLElement>(null);
|
const sectionRef = useRef<HTMLElement>(null);
|
||||||
|
|
||||||
// 使用表单自动保存功能
|
|
||||||
const {
|
const {
|
||||||
data: formData,
|
data: formData,
|
||||||
updateData,
|
updateData,
|
||||||
@@ -136,7 +135,7 @@ export function ContactSection() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section id="contact" role="region" aria-labelledby="contact-heading" className="section-padding relative bg-white overflow-hidden" ref={sectionRef}>
|
<section id="contact" role="region" aria-labelledby="contact-heading" className="py-20 md:py-28 bg-white" ref={sectionRef}>
|
||||||
{showToast && (
|
{showToast && (
|
||||||
<Toast
|
<Toast
|
||||||
message={toastMessage}
|
message={toastMessage}
|
||||||
@@ -145,46 +144,32 @@ export function ContactSection() {
|
|||||||
data-testid="toast-notification"
|
data-testid="toast-notification"
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<div className="absolute inset-0 pointer-events-none">
|
|
||||||
<div className="absolute inset-0 bg-gradient-radial from-[rgba(79,70,229,0.03)] via-transparent to-transparent" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="container-wide relative z-10">
|
<div className="container-wide">
|
||||||
<div
|
<div
|
||||||
className={`
|
className={`mb-14 opacity-0 translate-y-4 ${isVisible ? 'animate-fade-in-up' : ''}`}
|
||||||
mb-16 opacity-0 translate-y-4
|
|
||||||
${isVisible ? 'animate-fade-in-up' : ''}
|
|
||||||
`}
|
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-3 mb-4">
|
<h2 id="contact-heading" className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4 text-center">
|
||||||
<div className="w-8 h-px bg-linear-to-r from-[#1C1C1C] to-[#C41E3A]" />
|
开启 <span className="text-[#C41E3A] font-calligraphy">合作</span>
|
||||||
<span className="text-sm text-[#5C5C5C] tracking-wide">联系我们</span>
|
|
||||||
</div>
|
|
||||||
<h2 id="contact-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4">
|
|
||||||
开启 <span className="text-[#C41E3A]">合作</span>
|
|
||||||
</h2>
|
</h2>
|
||||||
<p className="mt-4 text-[#5C5C5C] max-w-2xl">
|
<p className="text-base text-[#595959] max-w-2xl mx-auto text-center">
|
||||||
无论您有任何问题或合作意向，我们都很乐意与您交流
|
无论您有任何问题或合作意向，我们都很乐意与您交流
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid lg:grid-cols-5 gap-12 lg:gap-16">
|
<div className="grid lg:grid-cols-5 gap-12 lg:gap-16">
|
||||||
<div
|
<div
|
||||||
className={`
|
className={`lg:col-span-2 space-y-8 flex flex-col opacity-0 translate-y-4 ${isVisible ? 'animate-fade-in-up stagger-1' : ''}`}
|
||||||
lg:col-span-2 space-y-8 flex flex-col
|
|
||||||
opacity-0 translate-y-4
|
|
||||||
${isVisible ? 'animate-fade-in-up stagger-1' : ''}
|
|
||||||
`}
|
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-6">联系方式</h3>
|
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-6">联系方式</h3>
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div className="flex items-start gap-4 group">
|
<div className="flex items-start gap-4 group">
|
||||||
<div className="w-10 h-10 bg-[#C41E3A] rounded-md flex items-center justify-center shrink-0 transition-transform duration-200 group-hover:scale-105">
|
<div className="w-10 h-10 bg-[#C41E3A] rounded-lg flex items-center justify-center shrink-0 transition-transform duration-200 group-hover:scale-105">
|
||||||
<Mail className="w-5 h-5 text-white" />
|
<Mail className="w-5 h-5 text-white" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p className="text-sm text-[#5C5C5C] mb-1">邮箱</p>
|
<p className="text-sm text-[#A3A3A3] mb-1">邮箱</p>
|
||||||
<a href={`mailto:${COMPANY_INFO.email}`} className="text-[#1C1C1C] hover:text-[#C41E3A] transition-colors duration-200">
|
<a href={`mailto:${COMPANY_INFO.email}`} className="text-[#1C1C1C] hover:text-[#C41E3A] transition-colors duration-200">
|
||||||
{COMPANY_INFO.email}
|
{COMPANY_INFO.email}
|
||||||
</a>
|
</a>
|
||||||
@@ -192,31 +177,31 @@ export function ContactSection() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-start gap-4 group">
|
<div className="flex items-start gap-4 group">
|
||||||
<div className="w-10 h-10 bg-[#C41E3A] rounded-md flex items-center justify-center shrink-0 transition-transform duration-200 group-hover:scale-105">
|
<div className="w-10 h-10 bg-[#C41E3A] rounded-lg flex items-center justify-center shrink-0 transition-transform duration-200 group-hover:scale-105">
|
||||||
<MapPin className="w-5 h-5 text-white" />
|
<MapPin className="w-5 h-5 text-white" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p className="text-sm text-[#5C5C5C] mb-1">地址</p>
|
<p className="text-sm text-[#A3A3A3] mb-1">地址</p>
|
||||||
<p className="text-[#1C1C1C]">{COMPANY_INFO.address}</p>
|
<p className="text-[#1C1C1C]">{COMPANY_INFO.address}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="bg-[#FFFBF5] p-5 rounded-lg border border-[#E5E5E5]" aria-label="工作时间" data-testid="work-hours-card">
|
<div className="bg-[#FAFAFA] p-5 rounded-xl border border-[#F0F0F0]" aria-label="工作时间" data-testid="work-hours-card">
|
||||||
<div className="flex items-center gap-2 mb-3">
|
<div className="flex items-center gap-2 mb-3">
|
||||||
<Clock className="w-4 h-4 text-[#C41E3A]" />
|
<Clock className="w-4 h-4 text-[#C41E3A]" />
|
||||||
<h4 className="text-sm font-medium text-[#1C1C1C]">工作时间</h4>
|
<h4 className="text-sm font-medium text-[#1C1C1C]">工作时间</h4>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<div className="flex justify-between text-sm" data-testid="work-hours-row">
|
<div className="flex justify-between text-sm" data-testid="work-hours-row">
|
||||||
<span className="text-[#5C5C5C]">周一至周五</span>
|
<span className="text-[#595959]">周一至周五</span>
|
||||||
<span className="text-[#C41E3A]">9:00 - 18:00</span>
|
<span className="text-[#C41E3A]">9:00 - 18:00</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="bg-[#FFFBF5] p-5 rounded-lg border border-[#E5E5E5]">
|
<div className="bg-[#FAFAFA] p-5 rounded-xl border border-[#F0F0F0]">
|
||||||
<div className="flex items-center gap-2 mb-3">
|
<div className="flex items-center gap-2 mb-3">
|
||||||
<HeadphonesIcon className="w-4 h-4 text-[#C41E3A]" />
|
<HeadphonesIcon className="w-4 h-4 text-[#C41E3A]" />
|
||||||
<h4 className="text-sm font-medium text-[#1C1C1C]">我们的承诺</h4>
|
<h4 className="text-sm font-medium text-[#1C1C1C]">我们的承诺</h4>
|
||||||
@@ -224,32 +209,27 @@ export function ContactSection() {
|
|||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<div className="flex items-start gap-2">
|
<div className="flex items-start gap-2">
|
||||||
<div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 shrink-0" />
|
<div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 shrink-0" />
|
||||||
<p className="text-sm text-[#5C5C5C]">工作日 2 小时内快速响应您的咨询</p>
|
<p className="text-sm text-[#595959]">工作日 2 小时内快速响应您的咨询</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-start gap-2">
|
<div className="flex items-start gap-2">
|
||||||
<div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 shrink-0" />
|
<div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 shrink-0" />
|
||||||
<p className="text-sm text-[#5C5C5C]">提供免费的业务咨询和方案评估服务</p>
|
<p className="text-sm text-[#595959]">提供免费的业务咨询和方案评估服务</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-start gap-2">
|
<div className="flex items-start gap-2">
|
||||||
<div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 shrink-0" />
|
<div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 shrink-0" />
|
||||||
<p className="text-sm text-[#5C5C5C]">根据您的需求量身定制最优解决方案</p>
|
<p className="text-sm text-[#595959]">根据您的需求量身定制最优解决方案</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className={`
|
className={`lg:col-span-3 flex flex-col opacity-0 translate-y-4 ${isVisible ? 'animate-fade-in-up stagger-2' : ''}`}
|
||||||
lg:col-span-3 flex flex-col
|
|
||||||
opacity-0 translate-y-4
|
|
||||||
${isVisible ? 'animate-fade-in-up stagger-2' : ''}
|
|
||||||
`}
|
|
||||||
>
|
>
|
||||||
<div className="bg-[#F5F7FA] p-6 sm:p-8 rounded-lg border border-[#E2E8F0] flex-1 flex flex-col">
|
<div className="bg-[#FAFAFA] p-6 sm:p-8 rounded-xl border border-[#F0F0F0] flex-1 flex flex-col">
|
||||||
<div className="flex items-center justify-between mb-6">
|
<div className="flex items-center justify-between mb-6">
|
||||||
<h3 className="text-lg font-semibold text-[#1A1A2E]">发送消息</h3>
|
<h3 className="text-lg font-semibold text-[#1C1C1C]">发送消息</h3>
|
||||||
{/* 自动保存状态指示器 */}
|
<div className="flex items-center gap-2 text-sm text-[#A3A3A3]">
|
||||||
<div className="flex items-center gap-2 text-sm text-[#595959]">
|
|
||||||
{lastSaved && (
|
{lastSaved && (
|
||||||
<>
|
<>
|
||||||
<Save className="w-4 h-4" />
|
<Save className="w-4 h-4" />
|
||||||
@@ -259,7 +239,6 @@ export function ContactSection() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 数据恢复提示 */}
|
|
||||||
{isRestored && (
|
{isRestored && (
|
||||||
<div className="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-lg flex items-center justify-between">
|
<div className="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-lg flex items-center justify-between">
|
||||||
<span className="text-sm text-blue-700">
|
<span className="text-sm text-blue-700">
|
||||||
@@ -280,8 +259,8 @@ export function ContactSection() {
|
|||||||
<div className="w-16 h-16 bg-[#C41E3A] rounded-full flex items-center justify-center mx-auto mb-4 animate-stamp-in">
|
<div className="w-16 h-16 bg-[#C41E3A] rounded-full flex items-center justify-center mx-auto mb-4 animate-stamp-in">
|
||||||
<CheckCircle2 className="w-8 h-8 text-white" />
|
<CheckCircle2 className="w-8 h-8 text-white" />
|
||||||
</div>
|
</div>
|
||||||
<h4 className="text-xl font-semibold text-[#1A1A2E] mb-2">消息已发送</h4>
|
<h4 className="text-xl font-semibold text-[#1C1C1C] mb-2">消息已发送</h4>
|
||||||
<p className="text-[#718096]">感谢您的留言，我们会尽快与您联系！</p>
|
<p className="text-[#A3A3A3]">感谢您的留言，我们会尽快与您联系！</p>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<form onSubmit={handleSubmit} className="space-y-5 flex-1 flex flex-col">
|
<form onSubmit={handleSubmit} className="space-y-5 flex-1 flex flex-col">
|
||||||
|
|||||||
@@ -16,14 +16,14 @@ interface CTASectionProps {
|
|||||||
|
|
||||||
export function CTASection({
|
export function CTASection({
|
||||||
title = '开启您的数字化转型之旅',
|
title = '开启您的数字化转型之旅',
|
||||||
description = '与诺瓦隆一起，让技术成为您业务增长的核心引擎',
|
description = '与睿新致遠一起，让技术成为您业务增长的核心引擎',
|
||||||
primaryLabel = '立即咨询',
|
primaryLabel = '立即咨询',
|
||||||
primaryHref = '/contact',
|
primaryHref = '/contact',
|
||||||
secondaryLabel = '查看案例',
|
secondaryLabel = '了解方案',
|
||||||
secondaryHref = '/cases',
|
secondaryHref = '/solutions',
|
||||||
}: CTASectionProps) {
|
}: CTASectionProps) {
|
||||||
return (
|
return (
|
||||||
<section id="cta" className="bg-[#1C1C1C] py-16 md:py-24">
|
<section id="cta" className="py-20 md:py-28 bg-[#1C1C1C]">
|
||||||
<div className="container-wide">
|
<div className="container-wide">
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
@@ -35,7 +35,7 @@ export function CTASection({
|
|||||||
<h2 className="text-3xl sm:text-4xl font-semibold text-white mb-4">
|
<h2 className="text-3xl sm:text-4xl font-semibold text-white mb-4">
|
||||||
{title}
|
{title}
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-lg text-[#A0A0A0] mb-10">
|
<p className="text-lg text-[#A3A3A3] mb-10">
|
||||||
{description}
|
{description}
|
||||||
</p>
|
</p>
|
||||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||||
@@ -45,7 +45,7 @@ export function CTASection({
|
|||||||
<ArrowRight className="w-4 h-4 ml-2" />
|
<ArrowRight className="w-4 h-4 ml-2" />
|
||||||
</StaticLink>
|
</StaticLink>
|
||||||
</Button>
|
</Button>
|
||||||
<Button size="lg" variant="outline" className="border-white/30 text-white hover:bg-white/10" asChild>
|
<Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10" asChild>
|
||||||
<StaticLink href={secondaryHref}>
|
<StaticLink href={secondaryHref}>
|
||||||
{secondaryLabel}
|
{secondaryLabel}
|
||||||
</StaticLink>
|
</StaticLink>
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from 'react';
|
|||||||
import { motion } from 'framer-motion';
|
import { motion } from 'framer-motion';
|
||||||
import { StaticLink } from '@/components/ui/static-link';
|
import { StaticLink } from '@/components/ui/static-link';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { COMPANY_INFO, STATS } from '@/lib/constants';
|
import { COMPANY_INFO } from '@/lib/constants';
|
||||||
import { ArrowRight } from 'lucide-react';
|
import { ArrowRight } from 'lucide-react';
|
||||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||||
|
|
||||||
@@ -40,7 +40,7 @@ export function HeroSectionV2() {
|
|||||||
id="home"
|
id="home"
|
||||||
ref={sectionRef}
|
ref={sectionRef}
|
||||||
aria-labelledby="hero-heading"
|
aria-labelledby="hero-heading"
|
||||||
className="relative min-h-screen flex flex-col justify-center overflow-hidden bg-[#FAFAFA]"
|
className="relative min-h-screen flex flex-col justify-center overflow-hidden bg-white"
|
||||||
>
|
>
|
||||||
<div className="container-wide py-24 md:py-32 lg:py-40 relative z-10 flex-1 flex items-center">
|
<div className="container-wide py-24 md:py-32 lg:py-40 relative z-10 flex-1 flex items-center">
|
||||||
<div className="max-w-3xl">
|
<div className="max-w-3xl">
|
||||||
@@ -67,7 +67,7 @@ export function HeroSectionV2() {
|
|||||||
<motion.p
|
<motion.p
|
||||||
{...fadeUp}
|
{...fadeUp}
|
||||||
transition={{ duration: 0.5, delay: 0.2, ease: [0.16, 1, 0.3, 1] }}
|
transition={{ duration: 0.5, delay: 0.2, ease: [0.16, 1, 0.3, 1] }}
|
||||||
className="text-xl sm:text-2xl text-[#3D3D3D] mb-4"
|
className="text-xl sm:text-2xl text-[#1C1C1C] mb-4"
|
||||||
>
|
>
|
||||||
<span className="font-semibold text-[#C41E3A]">企业数字化转型服务商</span>
|
<span className="font-semibold text-[#C41E3A]">企业数字化转型服务商</span>
|
||||||
</motion.p>
|
</motion.p>
|
||||||
@@ -99,27 +99,6 @@ export function HeroSectionV2() {
|
|||||||
</motion.div>
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<motion.div
|
|
||||||
{...fadeUp}
|
|
||||||
transition={{ duration: 0.5, delay: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
|
||||||
className="border-t border-[#E5E5E5] bg-white"
|
|
||||||
>
|
|
||||||
<div className="container-wide py-8">
|
|
||||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12">
|
|
||||||
{STATS.map((stat) => (
|
|
||||||
<div key={stat.label} className="text-center">
|
|
||||||
<div className="text-3xl sm:text-4xl font-bold text-[#C41E3A] mb-1">
|
|
||||||
{stat.value}
|
|
||||||
</div>
|
|
||||||
<div className="text-sm text-[#595959]">
|
|
||||||
{stat.label}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,6 +6,7 @@ import { useRef } from 'react';
|
|||||||
import { StaticLink } from '@/components/ui/static-link';
|
import { StaticLink } from '@/components/ui/static-link';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { ArrowRight, Lightbulb, Cpu, Users } from 'lucide-react';
|
import { ArrowRight, Lightbulb, Cpu, Users } from 'lucide-react';
|
||||||
|
import { InkGlowCard } from '@/components/ui/ink-glow-card';
|
||||||
|
|
||||||
const SOLUTIONS_OVERVIEW = [
|
const SOLUTIONS_OVERVIEW = [
|
||||||
{
|
{
|
||||||
@@ -31,55 +32,65 @@ const SOLUTIONS_OVERVIEW = [
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
const solutionAccents: { rgb: string; glowStart: string; glowEnd: string }[] = [
|
||||||
|
{ rgb: '196, 30, 58', glowStart: '#C41E3A', glowEnd: '#D97706' },
|
||||||
|
{ rgb: '37, 99, 235', glowStart: '#2563EB', glowEnd: '#7C3AED' },
|
||||||
|
{ rgb: '22, 163, 74', glowStart: '#16A34A', glowEnd: '#0891B2' },
|
||||||
|
];
|
||||||
|
|
||||||
export function HomeSolutionsSection() {
|
export function HomeSolutionsSection() {
|
||||||
const ref = useRef(null);
|
const ref = useRef(null);
|
||||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section id="solutions" role="region" aria-labelledby="solutions-heading" className="py-24 bg-[#F5F7FA] relative overflow-hidden" ref={ref}>
|
<section id="solutions" role="region" aria-labelledby="solutions-heading" className="py-20 md:py-28 bg-white" ref={ref}>
|
||||||
<div className="absolute top-1/2 right-0 w-[400px] h-[400px] bg-[rgba(196,30,58,0.02)] rounded-full blur-3xl" />
|
<div className="container-wide">
|
||||||
<div className="container-wide relative z-10">
|
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||||
transition={{ duration: 0.6 }}
|
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||||||
className="text-center max-w-3xl mx-auto mb-16"
|
className="text-center max-w-3xl mx-auto mb-14"
|
||||||
>
|
>
|
||||||
<h2 id="solutions-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
|
<h2 id="solutions-heading" className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4">
|
||||||
三种角色，一种<span className="text-[#C41E3A] font-calligraphy">身份</span>
|
三种角色，一种<span className="text-[#C41E3A] font-calligraphy">身份</span>
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-lg text-[#5C5C5C]">
|
<p className="text-base text-[#595959]">
|
||||||
您的数字化转型成长伙伴——从战略咨询到技术落地，再到长期陪跑
|
您的数字化转型成长伙伴——从战略咨询到技术落地，再到长期陪跑
|
||||||
</p>
|
</p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
|
||||||
{SOLUTIONS_OVERVIEW.map((item, idx) => {
|
{SOLUTIONS_OVERVIEW.map((item, idx) => {
|
||||||
const Icon = item.icon;
|
const Icon = item.icon;
|
||||||
|
const accent = solutionAccents[idx % solutionAccents.length]!;
|
||||||
return (
|
return (
|
||||||
<motion.div
|
<InkGlowCard
|
||||||
key={item.title}
|
key={item.title}
|
||||||
initial={{ opacity: 0, y: 20 }}
|
index={idx}
|
||||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
accentColorRgb={accent.rgb}
|
||||||
transition={{ duration: 0.5, delay: 0.1 + idx * 0.15 }}
|
glowStart={accent.glowStart}
|
||||||
|
glowEnd={accent.glowEnd}
|
||||||
>
|
>
|
||||||
<div className="bg-white rounded-2xl p-8 border border-[#E5E5E5] hover:border-[#C41E3A]/30 hover:shadow-lg transition-all duration-300 h-full flex flex-col">
|
<div className="p-6 md:p-8">
|
||||||
<div className="w-14 h-14 bg-[#C41E3A] rounded-2xl flex items-center justify-center mb-6">
|
<div
|
||||||
<Icon className="w-7 h-7 text-white" />
|
className="w-11 h-11 rounded-xl flex items-center justify-center mb-5"
|
||||||
|
style={{ backgroundColor: `rgba(${accent.rgb}, 0.06)` }}
|
||||||
|
>
|
||||||
|
<Icon className="w-5 h-5" style={{ color: accent.glowStart }} strokeWidth={1.8} />
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-xl font-bold text-[#1C1C1C] mb-1">{item.title}</h3>
|
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-1">{item.title}</h3>
|
||||||
<p className="text-sm text-[#C41E3A] font-medium mb-3">{item.subtitle}</p>
|
<p className="text-xs text-[#C41E3A] font-medium mb-3">{item.subtitle}</p>
|
||||||
<p className="text-sm text-[#5C5C5C] leading-relaxed mb-6 flex-1">{item.description}</p>
|
<p className="text-sm text-[#595959] leading-relaxed mb-5">{item.description}</p>
|
||||||
<ul className="space-y-2">
|
<ul className="space-y-2">
|
||||||
{item.points.map((point, i) => (
|
{item.points.map((point, i) => (
|
||||||
<li key={i} className="flex items-start gap-2 text-sm text-[#1C1C1C]">
|
<li key={i} className="flex items-start gap-2 text-sm text-[#595959]">
|
||||||
<div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-1.5 shrink-0" />
|
<div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-1.5 shrink-0" />
|
||||||
{point}
|
{point}
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</InkGlowCard>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
@@ -87,13 +98,10 @@ export function HomeSolutionsSection() {
|
|||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||||
transition={{ duration: 0.6, delay: 0.5 }}
|
transition={{ duration: 0.5, delay: 0.3, ease: [0.16, 1, 0.3, 1] }}
|
||||||
className="mt-12 text-center"
|
className="mt-12 text-center"
|
||||||
>
|
>
|
||||||
<Button
|
<Button size="lg" asChild>
|
||||||
size="lg"
|
|
||||||
asChild
|
|
||||||
>
|
|
||||||
<StaticLink href="/solutions">
|
<StaticLink href="/solutions">
|
||||||
了解完整解决方案
|
了解完整解决方案
|
||||||
<ArrowRight className="ml-2 w-4 h-4" />
|
<ArrowRight className="ml-2 w-4 h-4" />
|
||||||
|
|||||||
@@ -5,76 +5,89 @@ import { useInView } from 'framer-motion';
|
|||||||
import { useRef } from 'react';
|
import { useRef } from 'react';
|
||||||
import { METHODOLOGY } from '@/lib/constants/methodology';
|
import { METHODOLOGY } from '@/lib/constants/methodology';
|
||||||
import { CheckCircle2 } from 'lucide-react';
|
import { CheckCircle2 } from 'lucide-react';
|
||||||
|
import { InkGlowCard } from '@/components/ui/ink-glow-card';
|
||||||
|
|
||||||
|
const phaseAccents: { rgb: string; glowStart: string; glowEnd: string }[] = [
|
||||||
|
{ rgb: '196, 30, 58', glowStart: '#C41E3A', glowEnd: '#D97706' },
|
||||||
|
{ rgb: '217, 119, 6', glowStart: '#D97706', glowEnd: '#16A34A' },
|
||||||
|
{ rgb: '22, 163, 74', glowStart: '#16A34A', glowEnd: '#0891B2' },
|
||||||
|
{ rgb: '37, 99, 235', glowStart: '#2563EB', glowEnd: '#7C3AED' },
|
||||||
|
];
|
||||||
|
|
||||||
export function MethodologySection() {
|
export function MethodologySection() {
|
||||||
const ref = useRef(null);
|
const ref = useRef(null);
|
||||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section id="methodology" role="region" aria-labelledby="methodology-heading" className="py-24 bg-white relative overflow-hidden" ref={ref}>
|
<section id="methodology" role="region" aria-labelledby="methodology-heading" className="py-20 md:py-28 bg-[#FAFAFA]" ref={ref}>
|
||||||
<div className="container-wide relative z-10">
|
<div className="container-wide">
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||||
transition={{ duration: 0.6 }}
|
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||||||
className="text-center max-w-3xl mx-auto mb-16"
|
className="text-center max-w-3xl mx-auto mb-14"
|
||||||
>
|
>
|
||||||
<h2 id="methodology-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
|
<h2 id="methodology-heading" className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4">
|
||||||
实施<span className="text-[#C41E3A] font-calligraphy">方法论</span>
|
实施<span className="text-[#C41E3A] font-calligraphy">方法论</span>
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-lg text-[#5C5C5C]">
|
<p className="text-base text-[#595959]">
|
||||||
经过多年实践验证的四阶段模型，确保每个项目都能科学推进、高效落地
|
经过多年实践验证的四阶段模型，确保每个项目都能科学推进、高效落地
|
||||||
</p>
|
</p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
{/* 连接线 */}
|
<div className="hidden lg:block absolute top-16 left-[12.5%] right-[12.5%] h-px bg-gradient-to-r from-transparent via-[#E5E5E5] to-transparent" />
|
||||||
<div className="hidden lg:block absolute top-24 left-[12.5%] right-[12.5%] h-0.5 bg-gradient-to-r from-[#C41E3A]/20 via-[#C41E3A]/40 to-[#C41E3A]/20" />
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
|
||||||
{METHODOLOGY.map((phase, idx) => (
|
{METHODOLOGY.map((phase, idx) => {
|
||||||
<motion.div
|
const accent = phaseAccents[idx % phaseAccents.length]!;
|
||||||
key={phase.id}
|
return (
|
||||||
initial={{ opacity: 0, y: 30 }}
|
<InkGlowCard
|
||||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
key={phase.id}
|
||||||
transition={{ duration: 0.5, delay: 0.2 + idx * 0.15 }}
|
index={idx}
|
||||||
>
|
accentColorRgb={accent.rgb}
|
||||||
<div className="relative bg-[#FFFBF5] rounded-2xl p-8 border border-[#E5E5E5] hover:border-[#C41E3A]/30 hover:shadow-lg transition-all duration-300 h-full">
|
glowStart={accent.glowStart}
|
||||||
{/* 阶段编号 */}
|
glowEnd={accent.glowEnd}
|
||||||
<div className="w-12 h-12 bg-[#C41E3A] rounded-full flex items-center justify-center mb-6 text-white font-bold text-xl">
|
>
|
||||||
{phase.number}
|
<div className="p-6 md:p-8">
|
||||||
|
<div
|
||||||
|
className="w-10 h-10 rounded-full flex items-center justify-center mb-5 text-sm font-bold"
|
||||||
|
style={{ backgroundColor: accent.glowStart, color: '#FFFFFF' }}
|
||||||
|
>
|
||||||
|
{phase.number}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-1">{phase.title}</h3>
|
||||||
|
<p className="text-xs text-[#C41E3A] font-medium mb-3">{phase.subtitle}</p>
|
||||||
|
<p className="text-sm text-[#595959] leading-relaxed mb-5">{phase.description}</p>
|
||||||
|
|
||||||
|
<div className="mb-4">
|
||||||
|
<p className="text-xs font-semibold text-[#1C1C1C] mb-2 tracking-wide">核心活动</p>
|
||||||
|
<ul className="space-y-1.5">
|
||||||
|
{phase.activities.map((activity, i) => (
|
||||||
|
<li key={i} className="flex items-start gap-2 text-xs text-[#595959]">
|
||||||
|
<CheckCircle2 className="w-3.5 h-3.5 text-[#C41E3A] mt-0.5 shrink-0" />
|
||||||
|
{activity}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p className="text-xs font-semibold text-[#1C1C1C] mb-2 tracking-wide">交付物</p>
|
||||||
|
<ul className="space-y-1.5">
|
||||||
|
{phase.deliverables.map((deliverable, i) => (
|
||||||
|
<li key={i} className="flex items-start gap-2 text-xs text-[#A3A3A3]">
|
||||||
|
<span className="w-1.5 h-1.5 bg-[#C41E3A]/40 rounded-full mt-1.5 shrink-0" />
|
||||||
|
{deliverable}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</InkGlowCard>
|
||||||
<h3 className="text-xl font-bold text-[#1C1C1C] mb-1">{phase.title}</h3>
|
);
|
||||||
<p className="text-sm text-[#C41E3A] font-medium mb-3">{phase.subtitle}</p>
|
})}
|
||||||
<p className="text-sm text-[#5C5C5C] leading-relaxed mb-6">{phase.description}</p>
|
|
||||||
|
|
||||||
<div className="mb-4">
|
|
||||||
<p className="text-xs font-semibold text-[#1C1C1C] mb-2 uppercase tracking-wide">核心活动</p>
|
|
||||||
<ul className="space-y-1.5">
|
|
||||||
{phase.activities.map((activity, i) => (
|
|
||||||
<li key={i} className="flex items-start gap-2 text-xs text-[#3D3D3D]">
|
|
||||||
<CheckCircle2 className="w-3.5 h-3.5 text-[#C41E3A] mt-0.5 shrink-0" />
|
|
||||||
{activity}
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<p className="text-xs font-semibold text-[#1C1C1C] mb-2 uppercase tracking-wide">交付物</p>
|
|
||||||
<ul className="space-y-1.5">
|
|
||||||
{phase.deliverables.map((deliverable, i) => (
|
|
||||||
<li key={i} className="flex items-start gap-2 text-xs text-[#5C5C5C]">
|
|
||||||
<span className="w-1.5 h-1.5 bg-[#C41E3A]/60 rounded-full mt-1.5 shrink-0" />
|
|
||||||
{deliverable}
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -4,92 +4,60 @@ import { motion } from 'framer-motion';
|
|||||||
import { useInView } from 'framer-motion';
|
import { useInView } from 'framer-motion';
|
||||||
import { useRef } from 'react';
|
import { useRef } from 'react';
|
||||||
import { StaticLink } from '@/components/ui/static-link';
|
import { StaticLink } from '@/components/ui/static-link';
|
||||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
import { Button } from '@/components/ui/button';
|
||||||
import { ArrowRight, Calendar } from 'lucide-react';
|
import { ArrowRight } from 'lucide-react';
|
||||||
|
import { InsightCard } from '@/components/ui/insight-card';
|
||||||
import { NEWS } from '@/lib/constants';
|
import { NEWS } from '@/lib/constants';
|
||||||
|
|
||||||
export function NewsSection() {
|
export function NewsSection() {
|
||||||
const ref = useRef(null);
|
const ref = useRef(null);
|
||||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||||
|
|
||||||
const displayedNews = [...NEWS]
|
|
||||||
.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
|
|
||||||
.slice(0, 4);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section id="news" role="region" aria-labelledby="news-heading" className="py-24 bg-[#F5F5F5]" ref={ref}>
|
<section id="news" role="region" aria-labelledby="news-heading" className="py-20 md:py-28 bg-[#FAFAFA]" ref={ref}>
|
||||||
<div className="container-custom">
|
<div className="container-wide">
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||||
transition={{ duration: 0.5 }}
|
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||||||
className="text-center max-w-3xl mx-auto mb-16"
|
className="text-center max-w-3xl mx-auto mb-14"
|
||||||
>
|
>
|
||||||
<h2 id="news-heading" className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#1C1C1C] mb-6">
|
<h2 id="news-heading" className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4">
|
||||||
最新<span className="text-[#C41E3A] font-calligraphy">资讯</span>
|
最新<span className="text-[#C41E3A] font-calligraphy">动态</span>
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-lg text-[#5C5C5C]">
|
<p className="text-base text-[#595959]">
|
||||||
了解公司最新动态、行业资讯和技术分享
|
洞察行业趋势，分享实践经验
|
||||||
</p>
|
</p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
{displayedNews.length > 0 ? (
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
|
{NEWS.slice(0, 3).map((item, idx) => (
|
||||||
{displayedNews.map((newsItem, idx) => (
|
<InsightCard
|
||||||
<motion.div
|
key={item.id}
|
||||||
key={newsItem.id}
|
title={item.title}
|
||||||
initial={{ opacity: 0, y: 20 }}
|
excerpt={item.excerpt}
|
||||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
category={item.category}
|
||||||
transition={{ duration: 0.4, delay: idx * 0.08 }}
|
readTime="5 分钟"
|
||||||
>
|
publishedAt={item.date}
|
||||||
<Card className="h-full flex flex-col group cursor-pointer border-[#E5E5E5] hover:border-[#1C1C1C]">
|
imageUrl={item.image}
|
||||||
<CardHeader>
|
href={`/news/${item.id}`}
|
||||||
<div className="flex items-center gap-2 mb-3">
|
featured={idx === 0}
|
||||||
<span className="inline-block px-2 py-0.5 rounded-full bg-[#F5F5F5] text-[#1C1C1C] text-xs font-medium">
|
/>
|
||||||
{newsItem.category}
|
))}
|
||||||
</span>
|
</div>
|
||||||
<span className="text-sm text-[#5C5C5C] flex items-center gap-1">
|
|
||||||
<Calendar className="w-3 h-3" />
|
|
||||||
{newsItem.date}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<CardTitle className="text-xl leading-tight">{newsItem.title}</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="flex-1 flex flex-col">
|
|
||||||
<CardDescription className="text-base leading-relaxed mb-6 flex-1">
|
|
||||||
{newsItem.excerpt}
|
|
||||||
</CardDescription>
|
|
||||||
<StaticLink
|
|
||||||
href={`/news/${newsItem.id}`}
|
|
||||||
className="inline-flex items-center text-sm font-medium text-[#1C1C1C] hover:text-[#C41E3A] transition-colors group/link"
|
|
||||||
>
|
|
||||||
阅读更多
|
|
||||||
<ArrowRight className="ml-1 w-4 h-4 transition-transform group-hover/link:translate-x-1" />
|
|
||||||
</StaticLink>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</motion.div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="text-center py-12">
|
|
||||||
<p className="text-lg text-[#5C5C5C]">暂无新闻信息</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||||
transition={{ duration: 0.6, delay: 0.5 }}
|
transition={{ duration: 0.5, delay: 0.3, ease: [0.16, 1, 0.3, 1] }}
|
||||||
className="mt-12 text-center"
|
className="mt-12 text-center"
|
||||||
>
|
>
|
||||||
<StaticLink
|
<Button variant="outline" size="lg" className="group" asChild>
|
||||||
href="/news"
|
<StaticLink href="/news">
|
||||||
className="inline-flex items-center text-sm font-medium text-[#1C1C1C] hover:text-[#C41E3A] transition-colors bg-transparent border-none cursor-pointer group"
|
查看全部动态
|
||||||
>
|
<ArrowRight className="ml-2 w-4 h-4 transition-transform group-hover:translate-x-1" />
|
||||||
查看全部新闻
|
</StaticLink>
|
||||||
<ArrowRight className="ml-1 w-4 h-4 transition-transform group-hover:translate-x-1" />
|
</Button>
|
||||||
</StaticLink>
|
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -32,24 +32,24 @@ export function ProductMatrixSection() {
|
|||||||
<section
|
<section
|
||||||
id="products"
|
id="products"
|
||||||
ref={sectionRef}
|
ref={sectionRef}
|
||||||
className="bg-[#FFFBF5] py-16 md:py-24"
|
className="py-20 md:py-28 bg-white"
|
||||||
>
|
>
|
||||||
<div className="container-wide">
|
<div className="container-wide">
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||||
animate={isVisible ? { opacity: 1, y: 0 } : {}}
|
animate={isVisible ? { opacity: 1, y: 0 } : {}}
|
||||||
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||||||
className="mb-12"
|
className="text-center max-w-3xl mx-auto mb-14"
|
||||||
>
|
>
|
||||||
<h2 className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4">
|
<h2 className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4">
|
||||||
产品矩阵
|
产品<span className="text-[#C41E3A] font-calligraphy">矩阵</span>
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-lg text-[#595959] max-w-2xl">
|
<p className="text-base text-[#595959]">
|
||||||
覆盖企业数字化全场景，从管理到决策，一站式解决方案
|
覆盖企业数字化全场景，从管理到决策，一站式解决方案
|
||||||
</p>
|
</p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
|
||||||
{PRODUCTS.map((product, index) => (
|
{PRODUCTS.map((product, index) => (
|
||||||
<ProductCard
|
<ProductCard
|
||||||
key={product.id}
|
key={product.id}
|
||||||
|
|||||||
@@ -5,82 +5,87 @@ import { useInView } from 'framer-motion';
|
|||||||
import { useRef } from 'react';
|
import { useRef } from 'react';
|
||||||
import { StaticLink } from '@/components/ui/static-link';
|
import { StaticLink } from '@/components/ui/static-link';
|
||||||
import { Code, BarChart3, Lightbulb, Puzzle, ArrowRight } from 'lucide-react';
|
import { Code, BarChart3, Lightbulb, Puzzle, ArrowRight } from 'lucide-react';
|
||||||
import { Card, CardContent } from '@/components/ui/card';
|
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { InkGlowCard } from '@/components/ui/ink-glow-card';
|
||||||
import { SERVICES } from '@/lib/constants';
|
import { SERVICES } from '@/lib/constants';
|
||||||
|
|
||||||
const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
|
const iconMap: Record<string, React.ComponentType<{ className?: string; strokeWidth?: number }>> = {
|
||||||
Code,
|
Code,
|
||||||
BarChart3,
|
BarChart3,
|
||||||
Lightbulb,
|
Lightbulb,
|
||||||
Puzzle,
|
Puzzle,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const serviceAccents: { rgb: string; glowStart: string; glowEnd: string }[] = [
|
||||||
|
{ rgb: '196, 30, 58', glowStart: '#C41E3A', glowEnd: '#D97706' },
|
||||||
|
{ rgb: '217, 119, 6', glowStart: '#D97706', glowEnd: '#16A34A' },
|
||||||
|
{ rgb: '37, 99, 235', glowStart: '#2563EB', glowEnd: '#7C3AED' },
|
||||||
|
{ rgb: '22, 163, 74', glowStart: '#16A34A', glowEnd: '#0891B2' },
|
||||||
|
];
|
||||||
|
|
||||||
export function ServicesSection() {
|
export function ServicesSection() {
|
||||||
const ref = useRef(null);
|
const ref = useRef(null);
|
||||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section id="services" aria-labelledby="services-heading" className="py-24 bg-white relative overflow-hidden" ref={ref}>
|
<section id="services" aria-labelledby="services-heading" className="py-20 md:py-28 bg-white" ref={ref}>
|
||||||
<div className="absolute top-1/3 left-0 w-[400px] h-[400px] bg-[rgba(196,30,58,0.03)] rounded-full blur-3xl" />
|
<div className="container-wide">
|
||||||
<div className="absolute top-1/3 right-0 w-[300px] h-[300px] bg-[rgba(196,30,58,0.02)] rounded-full blur-3xl" />
|
|
||||||
|
|
||||||
<div className="container-wide relative z-10">
|
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||||
transition={{ duration: 0.6 }}
|
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||||||
className="text-center max-w-3xl mx-auto mb-16"
|
className="text-center max-w-3xl mx-auto mb-14"
|
||||||
>
|
>
|
||||||
<h2 id="services-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4">
|
<h2 id="services-heading" className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4">
|
||||||
我们的 <span className="text-[#C41E3A] font-calligraphy">核心业务</span>
|
我们的 <span className="text-[#C41E3A] font-calligraphy">专业服务</span>
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-lg text-[#5C5C5C] max-w-2xl mx-auto">
|
<p className="text-base text-[#595959] max-w-2xl mx-auto">
|
||||||
专业技术团队，为您提供全方位的数字化解决方案
|
专业技术团队，为您提供全方位的数字化解决方案
|
||||||
</p>
|
</p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
{SERVICES.length > 0 ? (
|
{SERVICES.length > 0 ? (
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
|
||||||
{SERVICES.map((service, index) => {
|
{SERVICES.map((service, index) => {
|
||||||
const Icon = iconMap[service.icon];
|
const Icon = iconMap[service.icon];
|
||||||
|
const accent = serviceAccents[index % serviceAccents.length]!;
|
||||||
return (
|
return (
|
||||||
<motion.div
|
<InkGlowCard
|
||||||
key={service.id}
|
key={service.id}
|
||||||
initial={{ opacity: 0, y: 20 }}
|
index={index}
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
href={`/services/${service.id}`}
|
||||||
viewport={{ once: true }}
|
accentColorRgb={accent.rgb}
|
||||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
glowStart={accent.glowStart}
|
||||||
|
glowEnd={accent.glowEnd}
|
||||||
>
|
>
|
||||||
<StaticLink href={`/services/${service.id}`}>
|
<div className="p-6 md:p-8">
|
||||||
<Card className="p-6 h-full group cursor-pointer border-[#E5E5E5] hover:border-[#C41E3A] transition-colors">
|
<div
|
||||||
<CardContent className="p-0">
|
className="w-11 h-11 rounded-xl flex items-center justify-center mb-5"
|
||||||
<div className="w-12 h-12 rounded-xl bg-[#F5F5F5] flex items-center justify-center mb-4 group-hover:bg-[#C41E3A] transition-all duration-300">
|
style={{ backgroundColor: `rgba(${accent.rgb}, 0.06)` }}
|
||||||
{Icon && <Icon className="w-6 h-6 text-[#1C1C1C] group-hover:text-white transition-colors" />}
|
>
|
||||||
</div>
|
{Icon && <Icon className="w-5 h-5 text-[#C41E3A]" strokeWidth={1.8} />}
|
||||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-3 group-hover:text-[#C41E3A] transition-colors">{service.title}</h3>
|
</div>
|
||||||
<p className="text-[#5C5C5C] text-sm leading-relaxed">{service.description}</p>
|
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-2">{service.title}</h3>
|
||||||
<div className="mt-4 flex items-center text-[#C41E3A] text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity">
|
<p className="text-sm text-[#595959] leading-relaxed mb-4">{service.description}</p>
|
||||||
了解详情
|
<div className="flex items-center text-sm font-medium text-[#C41E3A]">
|
||||||
<ArrowRight className="ml-1 w-4 h-4" />
|
了解详情
|
||||||
</div>
|
<ArrowRight className="ml-1 w-4 h-4" />
|
||||||
</CardContent>
|
</div>
|
||||||
</Card>
|
</div>
|
||||||
</StaticLink>
|
</InkGlowCard>
|
||||||
</motion.div>
|
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="text-center py-12">
|
<div className="text-center py-12">
|
||||||
<p className="text-lg text-[#5C5C5C]">暂无服务信息</p>
|
<p className="text-base text-[#595959]">暂无服务信息</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||||
transition={{ duration: 0.6, delay: 0.4 }}
|
transition={{ duration: 0.5, delay: 0.3, ease: [0.16, 1, 0.3, 1] }}
|
||||||
className="text-center mt-12"
|
className="text-center mt-12"
|
||||||
>
|
>
|
||||||
<Button variant="outline" size="lg" className="group" asChild>
|
<Button variant="outline" size="lg" className="group" asChild>
|
||||||
|
|||||||
@@ -1,73 +1,58 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useEffect, useRef, useState } from 'react';
|
|
||||||
import { motion } from 'framer-motion';
|
import { motion } from 'framer-motion';
|
||||||
import { STATS } from '@/lib/constants';
|
import { useInView } from 'framer-motion';
|
||||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
import { useRef } from 'react';
|
||||||
|
import { Building2, Users, Award, TrendingUp } from 'lucide-react';
|
||||||
|
|
||||||
|
const STATS = [
|
||||||
|
{ icon: Building2, value: '10+', label: '服务企业' },
|
||||||
|
{ icon: Users, value: '10+', label: '团队成员' },
|
||||||
|
{ icon: Award, value: '6', label: '自研产品' },
|
||||||
|
{ icon: TrendingUp, value: '12+', label: '年核心团队经验' },
|
||||||
|
];
|
||||||
|
|
||||||
export function SocialProofSection() {
|
export function SocialProofSection() {
|
||||||
const [isVisible, setIsVisible] = useState(false);
|
const ref = useRef(null);
|
||||||
const sectionRef = useRef<HTMLElement>(null);
|
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||||
const shouldReduceMotion = useReducedMotion();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const observer = new IntersectionObserver(
|
|
||||||
([entry]) => {
|
|
||||||
if (entry?.isIntersecting) {
|
|
||||||
setIsVisible(true);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ threshold: 0.2 }
|
|
||||||
);
|
|
||||||
|
|
||||||
if (sectionRef.current) {
|
|
||||||
observer.observe(sectionRef.current);
|
|
||||||
}
|
|
||||||
|
|
||||||
return () => observer.disconnect();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section
|
<section id="social-proof" role="region" aria-labelledby="social-proof-heading" className="py-20 md:py-28 bg-[#FAFAFA]" ref={ref}>
|
||||||
id="social-proof"
|
|
||||||
ref={sectionRef}
|
|
||||||
className="bg-white py-16 md:py-24"
|
|
||||||
>
|
|
||||||
<div className="container-wide">
|
<div className="container-wide">
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={isVisible ? { opacity: 1, y: 0 } : {}}
|
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||||
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||||||
className="text-center mb-12"
|
className="text-center max-w-3xl mx-auto mb-14"
|
||||||
>
|
>
|
||||||
<h2 className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4">
|
<h2 id="social-proof-heading" className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4">
|
||||||
值得信赖的数字化伙伴
|
值得<span className="text-[#C41E3A] font-calligraphy">信赖</span>
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-lg text-[#595959] max-w-2xl mx-auto">
|
<p className="text-base text-[#595959]">
|
||||||
深耕企业数字化领域，以专业实力赢得客户信赖
|
数字来自实践，口碑源于交付
|
||||||
</p>
|
</p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
<motion.div
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8">
|
||||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
{STATS.map((stat, idx) => {
|
||||||
animate={isVisible ? { opacity: 1, y: 0 } : {}}
|
const Icon = stat.icon;
|
||||||
transition={{ duration: 0.5, delay: 0.2, ease: [0.16, 1, 0.3, 1] }}
|
return (
|
||||||
className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12"
|
<motion.div
|
||||||
>
|
key={stat.label}
|
||||||
{STATS.map((stat) => (
|
initial={{ opacity: 0, y: 20 }}
|
||||||
<div
|
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||||
key={stat.label}
|
transition={{ duration: 0.5, delay: idx * 0.1, ease: [0.16, 1, 0.3, 1] }}
|
||||||
className="text-center p-6 rounded-xl bg-[#FFFBF5] border border-[#E5E5E5] hover:border-[#C41E3A]/30 hover:shadow-md transition-all duration-300"
|
className="text-center p-6 md:p-8"
|
||||||
>
|
>
|
||||||
<div className="text-4xl sm:text-5xl font-bold text-[#C41E3A] mb-2">
|
<div className="w-12 h-12 rounded-xl bg-[#C41E3A]/5 flex items-center justify-center mx-auto mb-4">
|
||||||
{stat.value}
|
<Icon className="w-5 h-5 text-[#C41E3A]" strokeWidth={1.8} />
|
||||||
</div>
|
</div>
|
||||||
<div className="text-sm text-[#595959] font-medium">
|
<div className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-1">{stat.value}</div>
|
||||||
{stat.label}
|
<div className="text-sm text-[#A3A3A3]">{stat.label}</div>
|
||||||
</div>
|
</motion.div>
|
||||||
</div>
|
);
|
||||||
))}
|
})}
|
||||||
</motion.div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -3,88 +3,52 @@
|
|||||||
import { motion } from 'framer-motion';
|
import { motion } from 'framer-motion';
|
||||||
import { useInView } from 'framer-motion';
|
import { useInView } from 'framer-motion';
|
||||||
import { useRef } from 'react';
|
import { useRef } from 'react';
|
||||||
import { StaticLink } from '@/components/ui/static-link';
|
import { TEAM_MEMBERS } from '@/lib/constants';
|
||||||
import { Button } from '@/components/ui/button';
|
import { InkGlowCard } from '@/components/ui/ink-glow-card';
|
||||||
import { ArrowRight, Shield, Building2, Users } from 'lucide-react';
|
|
||||||
|
|
||||||
const TEAM_HIGHLIGHTS = [
|
|
||||||
{
|
|
||||||
icon: Shield,
|
|
||||||
title: '12年+ 行业深耕',
|
|
||||||
description: '核心团队长期从事技术咨询、企业数字化等领域，积累了丰富的行业经验和最佳实践。',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Building2,
|
|
||||||
title: '大型 IT 企业背景',
|
|
||||||
description: '开发团队成员来自多个大型传统 IT 企业，具备扎实的工程能力和规范化交付经验。',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Users,
|
|
||||||
title: '复合型技术团队',
|
|
||||||
description: '既懂技术又懂业务，能深入理解客户场景，提供真正落地的解决方案。',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export function TeamSection() {
|
export function TeamSection() {
|
||||||
const ref = useRef(null);
|
const ref = useRef(null);
|
||||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section id="team" role="region" aria-labelledby="team-heading" className="py-24 bg-[#FAFAFA] relative overflow-hidden" ref={ref}>
|
<section id="team" role="region" aria-labelledby="team-heading" className="py-20 md:py-28 bg-white" ref={ref}>
|
||||||
<div className="container-wide relative z-10">
|
<div className="container-wide">
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||||
transition={{ duration: 0.6 }}
|
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||||||
className="text-center max-w-3xl mx-auto mb-16"
|
className="text-center max-w-3xl mx-auto mb-14"
|
||||||
>
|
>
|
||||||
<h2 id="team-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
|
<h2 id="team-heading" className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4">
|
||||||
核心<span className="text-[#C41E3A] font-calligraphy">团队</span>
|
核心<span className="text-[#C41E3A] font-calligraphy">团队</span>
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-lg text-[#5C5C5C] leading-relaxed">
|
<p className="text-base text-[#595959]">
|
||||||
核心团队从事技术咨询、企业数字化等行业 12 年+，开发团队成员来自于多个大型传统 IT 企业，具备扎实的工程能力和丰富的行业经验。
|
来自行业领先企业的资深专家，用实战经验为您护航
|
||||||
</p>
|
</p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto mb-12">
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
|
||||||
{TEAM_HIGHLIGHTS.map((item, idx) => {
|
{TEAM_MEMBERS.map((member, idx) => (
|
||||||
const Icon = item.icon;
|
<InkGlowCard
|
||||||
return (
|
key={member.name}
|
||||||
<motion.div
|
index={idx}
|
||||||
key={item.title}
|
accentColorRgb="196, 30, 58"
|
||||||
initial={{ opacity: 0, y: 20 }}
|
glowStart="#C41E3A"
|
||||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
glowEnd="#D97706"
|
||||||
transition={{ duration: 0.5, delay: 0.1 + idx * 0.15 }}
|
>
|
||||||
>
|
<div className="p-6 md:p-8 text-center">
|
||||||
<div className="bg-white rounded-2xl p-8 border border-[#E5E5E5] hover:border-[#C41E3A]/30 hover:shadow-lg transition-all duration-300 h-full text-center">
|
<div className="w-16 h-16 rounded-full bg-[#FAFAFA] mx-auto mb-4 flex items-center justify-center">
|
||||||
<div className="w-14 h-14 bg-[#C41E3A] rounded-2xl flex items-center justify-center mb-6 mx-auto">
|
<span className="text-xl font-semibold text-[#C41E3A]">
|
||||||
<Icon className="w-7 h-7 text-white" />
|
{member.name.charAt(0)}
|
||||||
</div>
|
</span>
|
||||||
<h3 className="text-lg font-bold text-[#1C1C1C] mb-3">{item.title}</h3>
|
|
||||||
<p className="text-sm text-[#5C5C5C] leading-relaxed">{item.description}</p>
|
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
<h3 className="text-base font-semibold text-[#1C1C1C] mb-1">{member.name}</h3>
|
||||||
);
|
<p className="text-xs text-[#C41E3A] font-medium mb-2">{member.title}</p>
|
||||||
})}
|
<p className="text-sm text-[#595959] leading-relaxed">{member.bio}</p>
|
||||||
|
</div>
|
||||||
|
</InkGlowCard>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
|
||||||
transition={{ duration: 0.6, delay: 0.5 }}
|
|
||||||
className="text-center"
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="lg"
|
|
||||||
asChild
|
|
||||||
>
|
|
||||||
<StaticLink href="/team">
|
|
||||||
了解更多
|
|
||||||
<ArrowRight className="ml-2 w-4 h-4" />
|
|
||||||
</StaticLink>
|
|
||||||
</Button>
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -3,7 +3,6 @@
|
|||||||
import { useEffect, useRef, useState } from 'react';
|
import { useEffect, useRef, useState } from 'react';
|
||||||
import { motion } from 'framer-motion';
|
import { motion } from 'framer-motion';
|
||||||
import { TestimonialBlock } from '@/components/ui/testimonial-block';
|
import { TestimonialBlock } from '@/components/ui/testimonial-block';
|
||||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
|
||||||
|
|
||||||
const TESTIMONIALS = [
|
const TESTIMONIALS = [
|
||||||
{
|
{
|
||||||
@@ -29,7 +28,6 @@ const TESTIMONIALS = [
|
|||||||
export function TestimonialSection() {
|
export function TestimonialSection() {
|
||||||
const [isVisible, setIsVisible] = useState(false);
|
const [isVisible, setIsVisible] = useState(false);
|
||||||
const sectionRef = useRef<HTMLElement>(null);
|
const sectionRef = useRef<HTMLElement>(null);
|
||||||
const shouldReduceMotion = useReducedMotion();
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const observer = new IntersectionObserver(
|
const observer = new IntersectionObserver(
|
||||||
@@ -52,24 +50,24 @@ export function TestimonialSection() {
|
|||||||
<section
|
<section
|
||||||
id="testimonials"
|
id="testimonials"
|
||||||
ref={sectionRef}
|
ref={sectionRef}
|
||||||
className="bg-[#FFFBF5] py-16 md:py-24"
|
className="py-20 md:py-28 bg-[#FAFAFA]"
|
||||||
>
|
>
|
||||||
<div className="container-wide">
|
<div className="container-wide">
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={isVisible ? { opacity: 1, y: 0 } : {}}
|
animate={isVisible ? { opacity: 1, y: 0 } : {}}
|
||||||
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||||||
className="mb-12"
|
className="text-center max-w-3xl mx-auto mb-14"
|
||||||
>
|
>
|
||||||
<h2 className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4">
|
<h2 className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4">
|
||||||
客户成果
|
客户<span className="text-[#C41E3A] font-calligraphy">成果</span>
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-lg text-[#595959] max-w-2xl">
|
<p className="text-base text-[#595959]">
|
||||||
听听我们的客户怎么说——真实案例，真实成果
|
听听我们的客户怎么说——真实案例，真实成果
|
||||||
</p>
|
</p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
|
||||||
{TESTIMONIALS.map((testimonial, index) => (
|
{TESTIMONIALS.map((testimonial, index) => (
|
||||||
<TestimonialBlock
|
<TestimonialBlock
|
||||||
key={testimonial.author}
|
key={testimonial.author}
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { motion } from 'framer-motion';
|
import { ArrowRight, Lock, TrendingUp, Shield } from 'lucide-react';
|
||||||
import { StaticLink } from '@/components/ui/static-link';
|
import { InkGlowCard } from '@/components/ui/ink-glow-card';
|
||||||
import { ArrowRight } from 'lucide-react';
|
import type { LucideIcon } from 'lucide-react';
|
||||||
|
|
||||||
interface ChallengeCardProps {
|
interface ChallengeCardProps {
|
||||||
title: string;
|
title: string;
|
||||||
@@ -12,53 +12,80 @@ interface ChallengeCardProps {
|
|||||||
index: number;
|
index: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
const scenarioStyles = {
|
interface ScenarioConfig {
|
||||||
|
icon: LucideIcon;
|
||||||
|
accentColor: string;
|
||||||
|
accentColorRgb: string;
|
||||||
|
glowStart: string;
|
||||||
|
glowEnd: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const scenarioConfig: Record<string, ScenarioConfig> = {
|
||||||
isolation: {
|
isolation: {
|
||||||
bg: 'bg-[var(--color-challenge-isolation)]',
|
icon: Lock,
|
||||||
hoverBg: 'hover:bg-[var(--color-challenge-isolation-hover)]',
|
accentColor: '#C41E3A',
|
||||||
accent: 'border-l-[#C41E3A]',
|
accentColorRgb: '196, 30, 58',
|
||||||
icon: '🔒',
|
glowStart: '#C41E3A',
|
||||||
|
glowEnd: '#7C3AED',
|
||||||
},
|
},
|
||||||
growth: {
|
growth: {
|
||||||
bg: 'bg-[var(--color-challenge-growth)]',
|
icon: TrendingUp,
|
||||||
hoverBg: 'hover:bg-[var(--color-challenge-growth-hover)]',
|
accentColor: '#D97706',
|
||||||
accent: 'border-l-[#D97706]',
|
accentColorRgb: '217, 119, 6',
|
||||||
icon: '📈',
|
glowStart: '#D97706',
|
||||||
|
glowEnd: '#16A34A',
|
||||||
},
|
},
|
||||||
compliance: {
|
compliance: {
|
||||||
bg: 'bg-[var(--color-challenge-compliance)]',
|
icon: Shield,
|
||||||
hoverBg: 'hover:bg-[var(--color-challenge-compliance-hover)]',
|
accentColor: '#16A34A',
|
||||||
accent: 'border-l-[#16A34A]',
|
accentColorRgb: '22, 163, 74',
|
||||||
icon: '🛡️',
|
glowStart: '#16A34A',
|
||||||
|
glowEnd: '#0891B2',
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export function ChallengeCard({ title, description, scenario, href, index }: ChallengeCardProps) {
|
export function ChallengeCard({ title, description, scenario, href, index }: ChallengeCardProps) {
|
||||||
const style = scenarioStyles[scenario];
|
const config = scenarioConfig[scenario]!;
|
||||||
|
const IconComponent = config.icon;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<motion.div
|
<InkGlowCard
|
||||||
initial={{ opacity: 0, y: 20 }}
|
index={index}
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
href={href}
|
||||||
viewport={{ once: true }}
|
accentColorRgb={config.accentColorRgb}
|
||||||
transition={{ duration: 0.4, delay: index * 0.1, ease: [0.16, 1, 0.3, 1] }}
|
glowStart={config.glowStart}
|
||||||
|
glowEnd={config.glowEnd}
|
||||||
>
|
>
|
||||||
<StaticLink
|
<div className="p-6 md:p-8">
|
||||||
href={href}
|
<div className="flex items-start justify-between mb-5">
|
||||||
className={`group block p-6 rounded-xl border-l-4 ${style.accent} ${style.bg} ${style.hoverBg} transition-all duration-300 hover:shadow-md h-full`}
|
<div
|
||||||
>
|
className="w-11 h-11 rounded-xl flex items-center justify-center"
|
||||||
<div className="text-2xl mb-3">{style.icon}</div>
|
style={{ backgroundColor: `rgba(${config.accentColorRgb}, 0.06)` }}
|
||||||
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-2 group-hover:text-[#C41E3A] transition-colors">
|
>
|
||||||
|
<IconComponent
|
||||||
|
className="w-5 h-5"
|
||||||
|
style={{ color: config.accentColor }}
|
||||||
|
strokeWidth={1.8}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span className="text-xs font-mono tracking-widest text-[#A3A3A3]">
|
||||||
|
{String(index + 1).padStart(2, '0')}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 className="text-xl font-semibold mb-3 leading-tight tracking-tight text-[#1C1C1C]">
|
||||||
{title}
|
{title}
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-sm text-[#595959] leading-relaxed mb-4">
|
|
||||||
|
<p className="text-sm text-[#595959] leading-relaxed mb-6 min-h-[3.5rem]">
|
||||||
{description}
|
{description}
|
||||||
</p>
|
</p>
|
||||||
<span className="inline-flex items-center gap-1 text-sm font-medium text-[#C41E3A] group-hover:gap-2 transition-all">
|
|
||||||
了解方案
|
<div className="flex items-center gap-2 text-sm font-medium text-[#C41E3A]">
|
||||||
|
<span>了解方案</span>
|
||||||
<ArrowRight className="w-4 h-4" />
|
<ArrowRight className="w-4 h-4" />
|
||||||
</span>
|
</div>
|
||||||
</StaticLink>
|
</div>
|
||||||
</motion.div>
|
</InkGlowCard>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,111 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useRef, useState, useCallback, type ReactNode } from 'react';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
|
||||||
|
interface InkGlowCardProps {
|
||||||
|
children: ReactNode;
|
||||||
|
index?: number;
|
||||||
|
accentColorRgb?: string;
|
||||||
|
glowStart?: string;
|
||||||
|
glowEnd?: string;
|
||||||
|
className?: string;
|
||||||
|
href?: string;
|
||||||
|
onClick?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const DEFAULT_ACCENT = '196, 30, 58';
|
||||||
|
const DEFAULT_GLOW_START = '#C41E3A';
|
||||||
|
const DEFAULT_GLOW_END = '#D97706';
|
||||||
|
|
||||||
|
export function InkGlowCard({
|
||||||
|
children,
|
||||||
|
index = 0,
|
||||||
|
accentColorRgb = DEFAULT_ACCENT,
|
||||||
|
glowStart = DEFAULT_GLOW_START,
|
||||||
|
glowEnd = DEFAULT_GLOW_END,
|
||||||
|
className = '',
|
||||||
|
href,
|
||||||
|
onClick,
|
||||||
|
}: InkGlowCardProps) {
|
||||||
|
const cardRef = useRef<HTMLDivElement>(null);
|
||||||
|
const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
|
||||||
|
const [isHovered, setIsHovered] = useState(false);
|
||||||
|
|
||||||
|
const handleMouseMove = useCallback((e: React.MouseEvent) => {
|
||||||
|
if (!cardRef.current) return;
|
||||||
|
const rect = cardRef.current.getBoundingClientRect();
|
||||||
|
setMousePos({
|
||||||
|
x: e.clientX - rect.left,
|
||||||
|
y: e.clientY - rect.top,
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const content = (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className="absolute inset-0 pointer-events-none transition-opacity duration-500"
|
||||||
|
style={{
|
||||||
|
opacity: isHovered ? 1 : 0,
|
||||||
|
background: `radial-gradient(400px circle at ${mousePos.x}px ${mousePos.y}px, rgba(${accentColorRgb}, 0.04), transparent 40%)`,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div className="relative z-10">{children}</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
ref={cardRef}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{
|
||||||
|
duration: 0.5,
|
||||||
|
delay: index * 0.08,
|
||||||
|
ease: [0.16, 1, 0.3, 1],
|
||||||
|
}}
|
||||||
|
className={`relative ink-glow-border rounded-2xl ${className}`}
|
||||||
|
style={{
|
||||||
|
'--glow-start': glowStart,
|
||||||
|
'--glow-end': glowEnd,
|
||||||
|
} as React.CSSProperties}
|
||||||
|
>
|
||||||
|
{href ? (
|
||||||
|
<a
|
||||||
|
href={href}
|
||||||
|
className="relative block rounded-2xl bg-white overflow-hidden transition-all duration-500"
|
||||||
|
style={{
|
||||||
|
boxShadow: isHovered
|
||||||
|
? `0 16px 32px rgba(0,0,0,0.08), 0 0 0 1px rgba(${accentColorRgb}, 0.08)`
|
||||||
|
: '0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.06)',
|
||||||
|
transform: isHovered ? 'translateY(-4px)' : 'translateY(0)',
|
||||||
|
}}
|
||||||
|
onMouseMove={handleMouseMove}
|
||||||
|
onMouseEnter={() => setIsHovered(true)}
|
||||||
|
onMouseLeave={() => setIsHovered(false)}
|
||||||
|
>
|
||||||
|
{content}
|
||||||
|
</a>
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
className="relative rounded-2xl bg-white overflow-hidden transition-all duration-500"
|
||||||
|
style={{
|
||||||
|
boxShadow: isHovered
|
||||||
|
? `0 16px 32px rgba(0,0,0,0.08), 0 0 0 1px rgba(${accentColorRgb}, 0.08)`
|
||||||
|
: '0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.06)',
|
||||||
|
transform: isHovered ? 'translateY(-4px)' : 'translateY(0)',
|
||||||
|
}}
|
||||||
|
onMouseMove={handleMouseMove}
|
||||||
|
onMouseEnter={() => setIsHovered(true)}
|
||||||
|
onMouseLeave={() => setIsHovered(false)}
|
||||||
|
onClick={onClick}
|
||||||
|
role={onClick ? 'button' : undefined}
|
||||||
|
tabIndex={onClick ? 0 : undefined}
|
||||||
|
>
|
||||||
|
{content}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -3,6 +3,7 @@
|
|||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
import { Calendar, Clock, ArrowRight } from 'lucide-react';
|
import { Calendar, Clock, ArrowRight } from 'lucide-react';
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { InkGlowCard } from '@/components/ui/ink-glow-card';
|
||||||
|
|
||||||
export interface InsightCardProps {
|
export interface InsightCardProps {
|
||||||
title: string;
|
title: string;
|
||||||
@@ -26,12 +27,12 @@ export function InsightCard({
|
|||||||
featured = false,
|
featured = false,
|
||||||
}: InsightCardProps) {
|
}: InsightCardProps) {
|
||||||
return (
|
return (
|
||||||
<article
|
<InkGlowCard
|
||||||
className={`
|
href={href}
|
||||||
group relative overflow-hidden rounded-lg border border-[#E5E5E5]/50
|
accentColorRgb="196, 30, 58"
|
||||||
bg-white transition-all duration-300 hover:shadow-lg
|
glowStart="#C41E3A"
|
||||||
${featured ? 'md:col-span-2' : ''}
|
glowEnd="#D97706"
|
||||||
`}
|
className={featured ? 'md:col-span-2' : ''}
|
||||||
>
|
>
|
||||||
{imageUrl && (
|
{imageUrl && (
|
||||||
<div className="relative h-48 overflow-hidden">
|
<div className="relative h-48 overflow-hidden">
|
||||||
@@ -39,28 +40,28 @@ export function InsightCard({
|
|||||||
src={imageUrl}
|
src={imageUrl}
|
||||||
alt={title}
|
alt={title}
|
||||||
fill
|
fill
|
||||||
className="object-cover transition-transform duration-300 group-hover:scale-105"
|
className="object-cover"
|
||||||
/>
|
/>
|
||||||
<div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent" />
|
<div className="absolute inset-0 bg-gradient-to-t from-black/10 to-transparent" />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="p-6">
|
<div className="p-6 md:p-8">
|
||||||
<div className="flex items-center gap-3 mb-3">
|
<div className="flex items-center gap-3 mb-4">
|
||||||
<Badge variant="secondary" className="text-xs">
|
<Badge variant="secondary" className="text-xs">
|
||||||
{category}
|
{category}
|
||||||
</Badge>
|
</Badge>
|
||||||
<div className="flex items-center gap-1 text-xs text-[#737373]">
|
<div className="flex items-center gap-1 text-xs text-[#A3A3A3]">
|
||||||
<Clock className="w-3 h-3" />
|
<Clock className="w-3 h-3" />
|
||||||
<span>{readTime}</span>
|
<span>{readTime}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3 className="text-lg font-semibold text-[#171717] mb-2 line-clamp-2 group-hover:text-[#C41E3A] transition-colors">
|
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-2 line-clamp-2">
|
||||||
{title}
|
{title}
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<p className="text-sm text-[#737373] mb-4 line-clamp-2">
|
<p className="text-sm text-[#595959] mb-5 line-clamp-2">
|
||||||
{excerpt}
|
{excerpt}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
@@ -70,15 +71,12 @@ export function InsightCard({
|
|||||||
<span>{publishedAt}</span>
|
<span>{publishedAt}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a
|
<span className="inline-flex items-center gap-1 text-sm font-medium text-[#C41E3A]">
|
||||||
href={href}
|
|
||||||
className="inline-flex items-center gap-1 text-sm font-medium text-[#C41E3A] hover:gap-2 transition-all"
|
|
||||||
>
|
|
||||||
阅读更多
|
阅读更多
|
||||||
<ArrowRight className="w-4 h-4" />
|
<ArrowRight className="w-4 h-4" />
|
||||||
</a>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</InkGlowCard>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,9 +4,6 @@ import { motion } from 'framer-motion';
|
|||||||
import { useInView } from 'framer-motion';
|
import { useInView } from 'framer-motion';
|
||||||
import { useRef } from 'react';
|
import { useRef } from 'react';
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
import { InkBackground } from '@/components/ui/ink-decoration';
|
|
||||||
import { DataParticleFlow } from '@/components/effects/data-particle-flow';
|
|
||||||
import { SubtleDots } from '@/components/effects/subtle-dots';
|
|
||||||
|
|
||||||
interface PageHeaderProps {
|
interface PageHeaderProps {
|
||||||
badge?: string;
|
badge?: string;
|
||||||
@@ -20,50 +17,40 @@ export function PageHeader({ badge, title, description, className = '' }: PageHe
|
|||||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative overflow-hidden bg-gradient-to-b from-[#FAFAFA] to-white">
|
<div className="relative overflow-hidden bg-[#FAFAFA]">
|
||||||
<InkBackground />
|
|
||||||
<DataParticleFlow
|
|
||||||
particleCount={40}
|
|
||||||
color="#C41E3A"
|
|
||||||
intensity="subtle"
|
|
||||||
shape="square"
|
|
||||||
effect="pulse"
|
|
||||||
/>
|
|
||||||
<SubtleDots color="#C41E3A" count={6} />
|
|
||||||
|
|
||||||
<div className="container-wide relative z-10 pt-32 pb-20" ref={ref}>
|
<div className="container-wide relative z-10 pt-32 pb-20" ref={ref}>
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||||
transition={{ duration: 0.6 }}
|
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||||||
className={`max-w-4xl mx-auto text-center ${className}`}
|
className={`max-w-4xl mx-auto text-center ${className}`}
|
||||||
>
|
>
|
||||||
{badge && (
|
{badge && (
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 10 }}
|
initial={{ opacity: 0, y: 10 }}
|
||||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||||
transition={{ duration: 0.6, delay: 0.1 }}
|
transition={{ duration: 0.5, delay: 0.1, ease: [0.16, 1, 0.3, 1] }}
|
||||||
className="mb-6"
|
className="mb-6"
|
||||||
>
|
>
|
||||||
<Badge variant="outline">{badge}</Badge>
|
<Badge variant="outline">{badge}</Badge>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<motion.h1
|
<motion.h1
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||||
transition={{ duration: 0.6, delay: 0.2 }}
|
transition={{ duration: 0.5, delay: 0.2, ease: [0.16, 1, 0.3, 1] }}
|
||||||
className="text-4xl sm:text-5xl font-bold text-[#1C1C1C] mb-6"
|
className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4"
|
||||||
>
|
>
|
||||||
{title}
|
{title}
|
||||||
</motion.h1>
|
</motion.h1>
|
||||||
|
|
||||||
{description && (
|
{description && (
|
||||||
<motion.p
|
<motion.p
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||||
transition={{ duration: 0.6, delay: 0.3 }}
|
transition={{ duration: 0.5, delay: 0.3, ease: [0.16, 1, 0.3, 1] }}
|
||||||
className="text-lg text-[#5C5C5C] max-w-2xl mx-auto leading-relaxed"
|
className="text-base text-[#595959] max-w-2xl mx-auto leading-relaxed"
|
||||||
>
|
>
|
||||||
{description}
|
{description}
|
||||||
</motion.p>
|
</motion.p>
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { motion } from 'framer-motion';
|
import { ArrowUpRight, Database, Users, BarChart3, FileText, Truck, Building2 } from 'lucide-react';
|
||||||
import { StaticLink } from '@/components/ui/static-link';
|
import { InkGlowCard } from '@/components/ui/ink-glow-card';
|
||||||
import { ArrowUpRight } from 'lucide-react';
|
import type { LucideIcon } from 'lucide-react';
|
||||||
|
|
||||||
interface ProductCardProps {
|
interface ProductCardProps {
|
||||||
title: string;
|
title: string;
|
||||||
@@ -11,31 +11,69 @@ interface ProductCardProps {
|
|||||||
index: number;
|
index: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface ProductStyleConfig {
|
||||||
|
icon: LucideIcon;
|
||||||
|
accentColor: string;
|
||||||
|
accentColorRgb: string;
|
||||||
|
glowStart: string;
|
||||||
|
glowEnd: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const productConfig: ProductStyleConfig[] = [
|
||||||
|
{ icon: Database, accentColor: '#C41E3A', accentColorRgb: '196, 30, 58', glowStart: '#C41E3A', glowEnd: '#D97706' },
|
||||||
|
{ icon: Users, accentColor: '#D97706', accentColorRgb: '217, 119, 6', glowStart: '#D97706', glowEnd: '#16A34A' },
|
||||||
|
{ icon: FileText, accentColor: '#2563EB', accentColorRgb: '37, 99, 235', glowStart: '#2563EB', glowEnd: '#7C3AED' },
|
||||||
|
{ icon: BarChart3, accentColor: '#16A34A', accentColorRgb: '22, 163, 74', glowStart: '#16A34A', glowEnd: '#0891B2' },
|
||||||
|
{ icon: Truck, accentColor: '#7C3AED', accentColorRgb: '124, 58, 237', glowStart: '#7C3AED', glowEnd: '#C41E3A' },
|
||||||
|
{ icon: Building2, accentColor: '#0891B2', accentColorRgb: '8, 145, 178', glowStart: '#0891B2', glowEnd: '#2563EB' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const defaultConfig: ProductStyleConfig = {
|
||||||
|
icon: Database, accentColor: '#C41E3A', accentColorRgb: '196, 30, 58', glowStart: '#C41E3A', glowEnd: '#D97706',
|
||||||
|
};
|
||||||
|
|
||||||
export function ProductCard({ title, description, href, index }: ProductCardProps) {
|
export function ProductCard({ title, description, href, index }: ProductCardProps) {
|
||||||
|
const config = productConfig[index] ?? defaultConfig;
|
||||||
|
const IconComponent = config.icon;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<motion.div
|
<InkGlowCard
|
||||||
initial={{ opacity: 0, y: 20 }}
|
index={index}
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
href={href}
|
||||||
viewport={{ once: true }}
|
accentColorRgb={config.accentColorRgb}
|
||||||
transition={{ duration: 0.4, delay: index * 0.1, ease: [0.16, 1, 0.3, 1] }}
|
glowStart={config.glowStart}
|
||||||
|
glowEnd={config.glowEnd}
|
||||||
>
|
>
|
||||||
<StaticLink
|
<div className="p-6 md:p-8">
|
||||||
href={href}
|
<div className="flex items-start justify-between mb-5">
|
||||||
className="group block p-6 rounded-xl border border-[#E5E5E5] bg-white hover:border-[#C41E3A]/40 hover:shadow-lg transition-all duration-300 h-full"
|
<div
|
||||||
>
|
className="w-11 h-11 rounded-xl flex items-center justify-center"
|
||||||
<div className="flex items-start justify-between mb-4">
|
style={{ backgroundColor: `rgba(${config.accentColorRgb}, 0.06)` }}
|
||||||
<span className="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-[#FEF2F4] text-[#C41E3A] text-sm font-bold">
|
>
|
||||||
|
<IconComponent
|
||||||
|
className="w-5 h-5"
|
||||||
|
style={{ color: config.accentColor }}
|
||||||
|
strokeWidth={1.8}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span className="text-xs font-mono tracking-widest text-[#A3A3A3]">
|
||||||
{String(index + 1).padStart(2, '0')}
|
{String(index + 1).padStart(2, '0')}
|
||||||
</span>
|
</span>
|
||||||
<ArrowUpRight className="w-5 h-5 text-[#595959] group-hover:text-[#C41E3A] transition-colors" />
|
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-2 group-hover:text-[#C41E3A] transition-colors">
|
|
||||||
|
<h3 className="text-lg font-semibold mb-2 leading-snug tracking-tight text-[#1C1C1C]">
|
||||||
{title}
|
{title}
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-sm text-[#595959] leading-relaxed">
|
|
||||||
|
<p className="text-sm text-[#595959] leading-relaxed line-clamp-3 mb-5">
|
||||||
{description}
|
{description}
|
||||||
</p>
|
</p>
|
||||||
</StaticLink>
|
|
||||||
</motion.div>
|
<div className="flex items-center gap-1.5 text-sm font-medium text-[#A3A3A3] group-hover:text-[#C41E3A] transition-colors">
|
||||||
|
<span>了解详情</span>
|
||||||
|
<ArrowUpRight className="w-4 h-4" strokeWidth={2} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</InkGlowCard>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { motion } from 'framer-motion';
|
|
||||||
import { Quote } from 'lucide-react';
|
import { Quote } from 'lucide-react';
|
||||||
|
import { InkGlowCard } from '@/components/ui/ink-glow-card';
|
||||||
|
|
||||||
interface TestimonialBlockProps {
|
interface TestimonialBlockProps {
|
||||||
quote: string;
|
quote: string;
|
||||||
@@ -13,26 +13,27 @@ interface TestimonialBlockProps {
|
|||||||
|
|
||||||
export function TestimonialBlock({ quote, author, title, company, index }: TestimonialBlockProps) {
|
export function TestimonialBlock({ quote, author, title, company, index }: TestimonialBlockProps) {
|
||||||
return (
|
return (
|
||||||
<motion.div
|
<InkGlowCard
|
||||||
initial={{ opacity: 0, y: 20 }}
|
index={index}
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
accentColorRgb="196, 30, 58"
|
||||||
viewport={{ once: true }}
|
glowStart="#C41E3A"
|
||||||
transition={{ duration: 0.4, delay: index * 0.1, ease: [0.16, 1, 0.3, 1] }}
|
glowEnd="#D97706"
|
||||||
className="p-6 rounded-xl bg-white border border-[#E5E5E5] hover:shadow-md transition-shadow duration-300"
|
|
||||||
>
|
>
|
||||||
<Quote className="w-8 h-8 text-[#C41E3A]/20 mb-4" />
|
<div className="p-6 md:p-8">
|
||||||
<blockquote className="text-[#3D3D3D] leading-relaxed mb-6">
|
<Quote className="w-7 h-7 text-[#C41E3A]/15 mb-5" />
|
||||||
“{quote}”
|
<blockquote className="text-[#1C1C1C] leading-relaxed mb-6 text-base">
|
||||||
</blockquote>
|
“{quote}”
|
||||||
<div className="flex items-center gap-3">
|
</blockquote>
|
||||||
<div className="w-10 h-10 rounded-full bg-[#FEF2F4] flex items-center justify-center text-[#C41E3A] font-semibold text-sm">
|
<div className="flex items-center gap-3 pt-4 border-t border-[#F0F0F0]">
|
||||||
{author.charAt(0)}
|
<div className="w-9 h-9 rounded-full bg-[#FAFAFA] flex items-center justify-center text-[#C41E3A] font-semibold text-sm">
|
||||||
</div>
|
{author.charAt(0)}
|
||||||
<div>
|
</div>
|
||||||
<div className="text-sm font-semibold text-[#1C1C1C]">{author}</div>
|
<div>
|
||||||
<div className="text-xs text-[#595959]">{title}，{company}</div>
|
<div className="text-sm font-semibold text-[#1C1C1C]">{author}</div>
|
||||||
|
<div className="text-xs text-[#A3A3A3]">{title}，{company}</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</InkGlowCard>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -14,7 +14,6 @@ export {
|
|||||||
NEWS,
|
NEWS,
|
||||||
type NewsItem,
|
type NewsItem,
|
||||||
type NewsCategory,
|
type NewsCategory,
|
||||||
CASES,
|
|
||||||
TEAM_MEMBERS,
|
TEAM_MEMBERS,
|
||||||
type TeamMember,
|
type TeamMember,
|
||||||
METHODOLOGY,
|
METHODOLOGY,
|
||||||
|
|||||||
@@ -1,198 +0,0 @@
|
|||||||
export interface CaseKeyMoment {
|
|
||||||
title: string;
|
|
||||||
description: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface CaseResult {
|
|
||||||
label: string;
|
|
||||||
value: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface CaseTestimonial {
|
|
||||||
quote: string;
|
|
||||||
author: string;
|
|
||||||
role: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface CaseItem {
|
|
||||||
id: string;
|
|
||||||
title: string;
|
|
||||||
client: string;
|
|
||||||
industry: string;
|
|
||||||
description: string;
|
|
||||||
/** 客户面临的挑战 */
|
|
||||||
challenge: string;
|
|
||||||
/** 我们的解决方案 */
|
|
||||||
solution: string;
|
|
||||||
/** 关键时刻 */
|
|
||||||
keyMoments: CaseKeyMoment[];
|
|
||||||
/** 成果数据 */
|
|
||||||
results: CaseResult[];
|
|
||||||
/** 客户证言 */
|
|
||||||
testimonial?: CaseTestimonial;
|
|
||||||
tags: string[];
|
|
||||||
image: string;
|
|
||||||
/** 合作时长 */
|
|
||||||
duration: string;
|
|
||||||
/** 发布日期 */
|
|
||||||
date: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const CASES: CaseItem[] = [
|
|
||||||
{
|
|
||||||
id: 'case-1',
|
|
||||||
title: '藏区酒店信息化管理建设项目',
|
|
||||||
client: '某藏区精品酒店',
|
|
||||||
industry: '酒店管理',
|
|
||||||
description:
|
|
||||||
'为某偏远藏区精品酒店提供信息化管理建设服务，帮助客户克服高原地区网络条件受限、人员信息化基础薄弱等特殊困难，实现从纯手工运营向数字化管理的跨越，提升旅游旺季接待能力和运营效率。',
|
|
||||||
challenge:
|
|
||||||
'该酒店位于川西高原藏区，是当地规模较大的精品酒店，拥有86间客房，每年接待大量自驾游和徒步游客。然而，酒店运营完全依赖手工操作——前台用纸质登记本记录客人信息，客房状态靠手写白板展示，财务用Excel记账，库存管理全凭人工盘点。由于藏区网络信号不稳定、部分员工信息化基础薄弱，此前尝试引入的市面标准酒店管理系统经常断线卡顿，员工不会用也不愿用，最终沦为摆设。旅游旺季时，前台排队登记常常让客人等待超过20分钟，客房清扫调度混乱导致客人入住时房间尚未打扫完毕，OTA平台上的差评中超过40%与入住效率和房间状态有关。',
|
|
||||||
solution:
|
|
||||||
'我们深入藏区实地调研后，针对高原酒店的特殊环境量身定制了轻量化、高可用的信息化管理方案。在网络适配方面，系统采用本地优先架构——核心功能支持离线运行，数据在本地缓存，网络恢复后自动同步，彻底解决了信号不稳定导致的系统不可用问题。在易用性方面，界面设计遵循"三步完成"原则，每个操作流程不超过三步点击，并配备藏汉双语界面和语音操作引导，让信息化基础薄弱的当地员工也能快速上手。核心功能模块包括：智能前台系统，支持身份证识别快速入住和扫码退房；客房管理系统，通过移动端实现清扫任务自动派发和房间状态实时更新；财务库存模块，自动生成每日营收报表和物资消耗预警。目前系统已在酒店全面上线运行。',
|
|
||||||
keyMoments: [
|
|
||||||
{
|
|
||||||
title: '攻克网络难题：离线模式保障系统可用',
|
|
||||||
description:
|
|
||||||
'系统上线初期，高原频繁的网络波动导致标准SaaS模式频繁断线。我们紧急调整技术方案，用一周时间开发并部署了本地优先+异步同步架构，核心业务流程在断网状态下可正常使用，网络恢复后数据自动回传。这一改造使系统可用率从不足60%提升至99%以上，彻底消除了员工"系统不好用"的抵触心理。',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '旺季实战：入住效率提升5倍',
|
|
||||||
description:
|
|
||||||
'系统上线后恰逢国庆旅游旺季，日均入住量达到平时的3倍。得益于身份证识别快速入住和客房状态实时同步，前台平均办理时间从20分钟缩短至4分钟，客房清扫调度井然有序，旺季期间"到店无房可住"的投诉从去年同期的17起降至0起。OTA平台评分从3.8分提升至4.5分。',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
results: [
|
|
||||||
{ label: '入住办理', value: '20分钟→4分钟' },
|
|
||||||
{ label: '系统可用率', value: '60%→99%' },
|
|
||||||
{ label: 'OTA评分', value: '3.8→4.5' },
|
|
||||||
],
|
|
||||||
testimonial: {
|
|
||||||
quote:
|
|
||||||
'之前也买过酒店管理系统，但网络一断就成了摆设，员工也不会用。睿新致远不一样，他们专门跑到藏区来实地看我们的情况，做的系统能离线用、界面简单、还有藏语，我们的员工两天就学会了。现在旺季再也不手忙脚乱了。',
|
|
||||||
author: '客户企业',
|
|
||||||
role: '酒店总经理',
|
|
||||||
},
|
|
||||||
tags: ['酒店管理', '信息化建设', '藏区服务'],
|
|
||||||
image: '/images/cases/biotech.jpg',
|
|
||||||
duration: '6个月',
|
|
||||||
date: '2026-04-15',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'case-2',
|
|
||||||
title: '制造企业办公信息化建设项目',
|
|
||||||
client: '某大型制造企业',
|
|
||||||
industry: '制造业',
|
|
||||||
description:
|
|
||||||
'为某大型制造企业建设统一的办公信息化平台，涵盖OA协同办公、人事管理、财务报销、行政审批等核心模块，帮助企业告别纸质办公和"人肉流转"，实现办公效率的全面提升。',
|
|
||||||
challenge:
|
|
||||||
'该制造企业员工规模超过3000人，但日常办公仍以纸质流程为主——一份请假申请需要找3位领导签字，一次差旅报销从提交到打款平均需要21天，跨部门文件审批依赖纸质传阅，经常出现"文件找不到、进度查不到、责任追不到"的窘境。各部门使用不同版本的Excel表格管理业务数据，信息孤岛严重。更关键的是，总部与分散在全国的8个分支机构之间缺乏统一的协同平台，远程协作效率极低，每次月度经营分析会都需要各基地提前一周手工汇总数据。',
|
|
||||||
solution:
|
|
||||||
'我们为客户规划并实施了统一的办公信息化平台，采用"核心模块优先+分批推广"的策略。第一优先级上线OA协同办公和行政审批模块，覆盖请假、出差、用章、采购等高频流程，实现全流程线上化和移动端审批。第二优先级上线人事管理和财务报销模块，打通员工入离职、考勤排班与薪资核算的全链路，同时实现发票识别、智能审单和自动对账，将报销周期从21天压缩至3天。第三阶段规划建设知识管理、会议协作和经营分析看板等增值模块，构建企业级数字化办公生态。目前OA和行政审批模块已在总部全面上线，财务报销模块正在试点中。',
|
|
||||||
keyMoments: [
|
|
||||||
{
|
|
||||||
title: '审批流程再造：21天变3天',
|
|
||||||
description:
|
|
||||||
'我们与客户各部门逐一梳理了87条审批流程，识别出32条可以合并或简化的流程，并针对每条流程设计了最优的线上审批路径。OA系统上线后，平均审批时长从原来的5.2天缩短至0.8天，差旅报销周期从21天压缩至3天，员工满意度调查得分从62分提升至89分。',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '移动审批上线：领导随时随地批',
|
|
||||||
description:
|
|
||||||
'在系统上线第二个月，我们推出了移动端审批功能。上线首周，移动端审批量即占总审批量的67%。一位分管生产的副总反馈："以前出差一周回来，办公桌上堆满了待签文件，现在高铁上就能批完，再也不用加班补签了。"',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
results: [
|
|
||||||
{ label: '平均审批时长', value: '缩短85%' },
|
|
||||||
{ label: '报销周期', value: '21天→3天' },
|
|
||||||
{ label: '员工满意度', value: '62→89分' },
|
|
||||||
],
|
|
||||||
testimonial: {
|
|
||||||
quote:
|
|
||||||
'以前觉得上OA系统就是买个软件装上，睿新致远让我们明白办公信息化的核心是流程再造。他们不是简单地把线下流程搬到线上，而是帮我们重新思考了每一条流程是否合理、能不能更快。这种"先梳理再上线"的方法论非常专业。',
|
|
||||||
author: '客户企业',
|
|
||||||
role: '行政总监',
|
|
||||||
},
|
|
||||||
tags: ['办公信息化', 'OA协同', '流程再造'],
|
|
||||||
image: '/images/cases/manufacturing-consulting.jpg',
|
|
||||||
duration: '8个月',
|
|
||||||
date: '2026-04-10',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'case-3',
|
|
||||||
title: '政府单位数字化整体解决方案项目',
|
|
||||||
client: '某市级政府单位',
|
|
||||||
industry: '政务服务',
|
|
||||||
description:
|
|
||||||
'为某市级政府单位提供数字化整体解决方案，涵盖业务流程优化、信息系统整合、在线服务平台建设等，有效提高办事效率，提升公共服务水平和群众满意度。',
|
|
||||||
challenge:
|
|
||||||
'该市级政府单位承担着面向全市120万市民的行政审批和公共服务职能。然而，市民办理一项常规审批平均需要跑3个窗口、提交15份纸质材料、等待12个工作日。同时，内部22个科室各自维护独立的业务台账，跨科室协办事项平均流转时间超过20天，群众投诉率居高不下。随着"数字政府"建设的深入推进，该单位亟需加快数字化转型步伐。',
|
|
||||||
solution:
|
|
||||||
'我们为客户规划了"一网通办"数字化政务服务平台。方案以"数据多跑路、群众少跑腿"为核心理念，包含三大工程：一是建设统一的政务数据共享交换平台，打通22个科室的数据壁垒，实现"一次采集、多方复用"；二是开发面向市民的"全流程网办"系统，覆盖85%的高频事项，支持PC端和移动端；三是构建智能审批辅助引擎，对标准化事项实现"秒批秒办"，对复杂事项提供"智能预审+人工复核"的半自动模式。在实施过程中，我们特别注重适老化设计，为老年市民保留了电话预约和线下辅助通道。目前项目已完成整体方案设计和数据共享平台搭建，网办系统正在开发中。',
|
|
||||||
keyMoments: [
|
|
||||||
{
|
|
||||||
title: '需求调研：走访22个科室',
|
|
||||||
description:
|
|
||||||
'项目启动后，我们用两周时间逐一走访了全部22个科室，深入了解每个科室的业务流程和数据流转现状。调研中发现的"重复录入"问题尤为突出——同一份企业资料平均被不同科室录入6次，这一发现为后续数据共享方案提供了强有力的支撑。',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '适老化方案获高度评价',
|
|
||||||
description:
|
|
||||||
'在方案评审阶段，我们提出的适老化设计方案——包括大字版界面、语音引导、电话预约通道和社区志愿者协助机制——获得了评审专家的一致好评。评审组长评价："这是少数真正考虑到了每一位市民的方案。"',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
results: [
|
|
||||||
{ label: '科室调研', value: '22个全覆盖' },
|
|
||||||
{ label: '高频事项覆盖', value: '85%' },
|
|
||||||
{ label: '数据共享平台', value: '已搭建完成' },
|
|
||||||
],
|
|
||||||
testimonial: {
|
|
||||||
quote:
|
|
||||||
'睿新致远不仅懂技术，更懂"为人民服务"的含义。他们的适老化设计让我们看到了数字化转型的温度——技术进步不应该让任何一个人掉队。项目推进节奏稳健，我们对合作前景非常期待。',
|
|
||||||
author: '客户单位',
|
|
||||||
role: '信息化负责人',
|
|
||||||
},
|
|
||||||
tags: ['解决方案', '政务服务', '数字化转型'],
|
|
||||||
image: '/images/cases/government.jpg',
|
|
||||||
duration: '10个月',
|
|
||||||
date: '2026-04-18',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'case-4',
|
|
||||||
title: '农业种植灌溉信息化建设咨询项目',
|
|
||||||
client: '某农户专业合作社',
|
|
||||||
industry: '智慧农业',
|
|
||||||
description:
|
|
||||||
'为某农户专业合作社提供种植灌溉信息化建设咨询服务，帮助合作社及辖区农户从传统经验灌溉向数据驱动的精准灌溉转型，以低成本、易操作的方案实现节水降本、提质增效。',
|
|
||||||
challenge:
|
|
||||||
'该合作社位于新疆塔城地区，由5户种植大户联合成立，承包经营耕地超过6000亩，以小麦、玉米和甜菜为主。塔城地区虽然依托额敏河和雪山融水，但水资源时空分布极不均衡，春旱频发，灌溉用水配额逐年收紧。长期以来，灌溉完全靠经验——"看天浇水、估摸着放"，大水漫灌方式导致水利用率不足40%，水资源浪费严重。合作社曾尝试引入智慧农业系统，但市面上的方案要么针对大规模农场、投入动辄上百万，要么功能复杂、需要专业团队运维，不适合他们这种"几个农户管几千亩地"的模式。每到春灌用水高峰期，农户之间因争水引发的矛盾频发，干旱年份减产损失更为严重。合作社迫切需要一套"买得起、自己能管、真管用"的灌溉信息化方案。',
|
|
||||||
solution:
|
|
||||||
'我们深入塔城田间地头实地调研后，为合作社量身定制了"低成本、易运维、接地气"的智慧灌溉方案。在硬件方面，采用国产高性价比传感器，根据6000亩耕地的地块分布，按片区部署土壤墒情监测点和简易气象站，总投入控制在合作社可承受的范围内。在平台方面，搭建轻量级的灌溉数据服务平台，整合传感器数据、当地气象预报和灌区供水计划，结合塔城地区春旱频发、作物以旱作为主的特点，通过简化的灌溉建议模型生成通俗易懂的灌溉指导——"今天该浇多少水、什么时间浇"，直接推送到农户手机微信上。在运维方面，系统设计充分考虑了"几个农户自己管"的场景，设备采用太阳能供电、无线传输、免布线安装，日常无需专业IT人员维护。目前系统已全面部署上线，覆盖全部6000亩耕地。',
|
|
||||||
keyMoments: [
|
|
||||||
{
|
|
||||||
title: '免布线安装：两天完成全部部署',
|
|
||||||
description:
|
|
||||||
'考虑到农户人手有限、无法承担复杂的施工安装，我们选用了太阳能供电、4G无线传输的传感器设备，免布线、即插即用。整个监测网络仅用两天时间就完成了全部部署和调试，5户农户全程参与，边装边学，部署完成即能独立使用。',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '春灌调度：数据化解争水矛盾',
|
|
||||||
description:
|
|
||||||
'往年春灌用水高峰期，5户农户因用水先后顺序和分配比例争执不下，每年都要找村委会协调。系统上线后，各片区土壤墒情和用水量数据实时可见，合作社据此制定了"缺水优先、轮灌调度"的公平分配方案。一个灌溉季下来，争水矛盾彻底化解，农户之间关系反而比以前更融洽了。',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
results: [
|
|
||||||
{ label: '灌溉用水量', value: '降低28%' },
|
|
||||||
{ label: '水利用率', value: '从40%提升至65%' },
|
|
||||||
{ label: '覆盖耕地', value: '6000亩' },
|
|
||||||
],
|
|
||||||
testimonial: {
|
|
||||||
quote:
|
|
||||||
'我们几个人管着几千亩地，最怕的就是浇水——跑一遍地就得大半天，水还经常不够分。现在手机上就能看到哪块地缺水、该浇多少，省了人工还省了水。睿新致远的方案实在，设备装上去不用管，自己就能用。',
|
|
||||||
author: '客户单位',
|
|
||||||
role: '合作社理事长',
|
|
||||||
},
|
|
||||||
tags: ['智慧农业', '精准灌溉', '惠农服务'],
|
|
||||||
image: '/images/cases/agriculture.jpg',
|
|
||||||
duration: '10个月',
|
|
||||||
date: '2026-04-20',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
@@ -3,8 +3,8 @@ export { NAVIGATION, NAVIGATION_V2, MEGA_DROPDOWN_DATA } from './navigation';
|
|||||||
export type { NavigationItem, NavigationItemV2, MegaDropdownItem, MegaDropdownData } from './navigation';
|
export type { NavigationItem, NavigationItemV2, MegaDropdownItem, MegaDropdownData } from './navigation';
|
||||||
export { STATS, type StatItem } from './stats';
|
export { STATS, type StatItem } from './stats';
|
||||||
export { SERVICES } from './services';
|
export { SERVICES } from './services';
|
||||||
export { PRODUCTS } from './products';
|
export { PRODUCTS, type Product } from './products';
|
||||||
export { NEWS, type NewsItem, type NewsCategory } from './news';
|
export { NEWS, type NewsItem, type NewsCategory } from './news';
|
||||||
export { CASES } from './cases';
|
|
||||||
export { TEAM_MEMBERS, type TeamMember } from './team';
|
export { TEAM_MEMBERS, type TeamMember } from './team';
|
||||||
export { METHODOLOGY, type MethodologyPhase } from './methodology';
|
export { METHODOLOGY, type MethodologyPhase } from './methodology';
|
||||||
|
export { SOLUTIONS, type Solution } from './solutions';
|
||||||
|
|||||||
@@ -9,7 +9,6 @@ export const NAVIGATION: NavigationItem[] = [
|
|||||||
{ id: 'services', label: '核心业务', href: '/' },
|
{ id: 'services', label: '核心业务', href: '/' },
|
||||||
{ id: 'solutions', label: '解决方案', href: '/' },
|
{ id: 'solutions', label: '解决方案', href: '/' },
|
||||||
{ id: 'products', label: '产品服务', href: '/' },
|
{ id: 'products', label: '产品服务', href: '/' },
|
||||||
{ id: 'cases', label: '成功案例', href: '/' },
|
|
||||||
{ id: 'about', label: '关于我们', href: '/' },
|
{ id: 'about', label: '关于我们', href: '/' },
|
||||||
{ id: 'news', label: '新闻动态', href: '/' },
|
{ id: 'news', label: '新闻动态', href: '/' },
|
||||||
{ id: 'contact', label: '联系', href: '/contact' },
|
{ id: 'contact', label: '联系', href: '/contact' },
|
||||||
@@ -38,7 +37,6 @@ export const NAVIGATION_V2: NavigationItemV2[] = [
|
|||||||
{ id: 'products', label: '产品', href: '/products', hasDropdown: true, dropdownKey: 'products' },
|
{ id: 'products', label: '产品', href: '/products', hasDropdown: true, dropdownKey: 'products' },
|
||||||
{ id: 'solutions', label: '解决方案', href: '/solutions', hasDropdown: true, dropdownKey: 'solutions' },
|
{ id: 'solutions', label: '解决方案', href: '/solutions', hasDropdown: true, dropdownKey: 'solutions' },
|
||||||
{ id: 'services', label: '服务', href: '/services' },
|
{ id: 'services', label: '服务', href: '/services' },
|
||||||
{ id: 'cases', label: '案例', href: '/cases' },
|
|
||||||
{ id: 'about', label: '关于我们', href: '/about' },
|
{ id: 'about', label: '关于我们', href: '/about' },
|
||||||
{ id: 'contact', label: '联系我们', href: '/contact' },
|
{ id: 'contact', label: '联系我们', href: '/contact' },
|
||||||
];
|
];
|
||||||
@@ -49,6 +47,8 @@ export const MEGA_DROPDOWN_DATA: MegaDropdownData = {
|
|||||||
{ id: 'crm', title: 'CRM 客户管理', description: '线索·商机·合同·服务', href: '/products/crm' },
|
{ id: 'crm', title: 'CRM 客户管理', description: '线索·商机·合同·服务', href: '/products/crm' },
|
||||||
{ id: 'bi', title: 'BI 数据平台', description: '报表·仪表盘·预测·决策', href: '/products/bi' },
|
{ id: 'bi', title: 'BI 数据平台', description: '报表·仪表盘·预测·决策', href: '/products/bi' },
|
||||||
{ id: 'cms', title: 'CMS 内容平台', description: '建站·运营·分发·分析', href: '/products/cms' },
|
{ id: 'cms', title: 'CMS 内容平台', description: '建站·运营·分发·分析', href: '/products/cms' },
|
||||||
|
{ id: 'sds', title: 'SDS 供应链决策', description: '预测·补货·库存·协同', href: '/products/sds' },
|
||||||
|
{ id: 'oa', title: 'OA 协同办公', description: '审批·公文·协作·知识', href: '/products/oa' },
|
||||||
],
|
],
|
||||||
solutions: [
|
solutions: [
|
||||||
{ id: 'manufacturing', title: '制造业', description: '智能制造·MES·质量管控', href: '/solutions/manufacturing' },
|
{ id: 'manufacturing', title: '制造业', description: '智能制造·MES·质量管控', href: '/solutions/manufacturing' },
|
||||||
|
|||||||
@@ -24,13 +24,13 @@ export const NEWS: NewsItem[] = [
|
|||||||
|
|
||||||
公司创始人表示："我们将以客户需求为导向，以技术创新为驱动，为企业提供高质量的数字化解决方案，助力企业在数字经济时代实现转型升级。"
|
公司创始人表示："我们将以客户需求为导向，以技术创新为驱动，为企业提供高质量的数字化解决方案，助力企业在数字经济时代实现转型升级。"
|
||||||
|
|
||||||
公司目前已与多家知名企业建立了合作关系，业务范围涵盖软件开发、云服务、数据分析、信息安全等多个领域。`,
|
公司正积极拓展业务合作，业务范围涵盖软件开发、云服务、数据分析、信息安全等多个领域。`,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: '2',
|
id: '2',
|
||||||
title: '公司推出企业数字化转型解决方案',
|
title: '公司推出企业数字化转型解决方案',
|
||||||
excerpt: '针对中小企业数字化转型需求，公司推出一站式数字化转型解决方案，帮助企业快速实现数字化升级。',
|
excerpt: '针对中小企业数字化转型需求，公司推出一站式数字化转型解决方案，帮助企业快速实现数字化升级。',
|
||||||
date: '2026-01-20',
|
date: '2026-02-20',
|
||||||
category: '产品发布',
|
category: '产品发布',
|
||||||
image: '/images/news/solution.png',
|
image: '/images/news/solution.png',
|
||||||
content: `近日，四川睿新致远科技有限公司正式推出企业数字化转型解决方案，该方案整合了云计算、大数据、人工智能等前沿技术，为中小企业提供一站式的数字化升级服务。
|
content: `近日，四川睿新致远科技有限公司正式推出企业数字化转型解决方案，该方案整合了云计算、大数据、人工智能等前沿技术，为中小企业提供一站式的数字化升级服务。
|
||||||
@@ -39,10 +39,10 @@ export const NEWS: NewsItem[] = [
|
|||||||
1. 数字化诊断：全面评估企业数字化现状，识别转型痛点
|
1. 数字化诊断：全面评估企业数字化现状，识别转型痛点
|
||||||
2. 方案设计：根据企业实际情况，量身定制数字化转型方案
|
2. 方案设计：根据企业实际情况，量身定制数字化转型方案
|
||||||
3. 系统实施：专业团队负责系统部署和数据迁移
|
3. 系统实施：专业团队负责系统部署和数据迁移
|
||||||
4. 运维支持：提供7×24小时技术支持服务
|
4. 运维支持：提供持续技术支持服务
|
||||||
|
|
||||||
公司技术总监表示："我们的目标是让每一家企业都能享受到数字化带来的便利，无论企业规模大小，都能找到适合自己的数字化转型路径。"
|
公司技术总监表示："我们的目标是让每一家企业都能享受到数字化带来的便利，无论企业规模大小，都能找到适合自己的数字化转型路径。"
|
||||||
|
|
||||||
目前，该解决方案已在多个行业成功落地，获得了客户的一致好评。`,
|
目前，该解决方案已在部分行业试点落地，客户反馈积极。`,
|
||||||
},
|
},
|
||||||
] as const;
|
] as const;
|
||||||
|
|||||||
+159
-51
@@ -1,4 +1,22 @@
|
|||||||
export const PRODUCTS = [
|
export interface Product {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
image: string;
|
||||||
|
category: string;
|
||||||
|
overview: string;
|
||||||
|
features: string[];
|
||||||
|
benefits: string[];
|
||||||
|
process: string[];
|
||||||
|
specs: string[];
|
||||||
|
pricing: {
|
||||||
|
base: string;
|
||||||
|
standard: string;
|
||||||
|
enterprise: string;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export const PRODUCTS: Product[] = [
|
||||||
{
|
{
|
||||||
id: 'erp',
|
id: 'erp',
|
||||||
title: '睿新ERP管理系统',
|
title: '睿新ERP管理系统',
|
||||||
@@ -15,25 +33,26 @@ export const PRODUCTS = [
|
|||||||
'报表分析：丰富的报表模板，支持自定义报表',
|
'报表分析：丰富的报表模板，支持自定义报表',
|
||||||
],
|
],
|
||||||
benefits: [
|
benefits: [
|
||||||
|
'数据完全自主可控，满足安全合规要求',
|
||||||
|
'支持本地/私有云/混合云多种部署方式',
|
||||||
'提升运营效率30%，减少人工操作',
|
'提升运营效率30%，减少人工操作',
|
||||||
'降低库存成本20%，优化库存周转',
|
'灵活订阅按需付费，无隐性收费，成本可控',
|
||||||
'实现数据实时共享，消除信息孤岛',
|
|
||||||
'支持多部门协同，提升整体协作效率',
|
|
||||||
],
|
],
|
||||||
process: [
|
process: [
|
||||||
'需求调研：深入了解企业业务流程和管理需求',
|
'需求调研：深入了解企业业务流程和管理需求',
|
||||||
'方案设计：制定符合企业特点的ERP实施方案',
|
'环境评估：评估服务器环境与网络架构',
|
||||||
'系统配置：根据需求进行系统配置和参数设置',
|
'方案设计：制定部署方案与数据迁移策略',
|
||||||
'数据迁移：安全迁移历史数据，确保数据完整性',
|
'系统部署：私有化部署与系统配置',
|
||||||
'用户培训：提供全面的用户培训和操作指导',
|
'数据迁移：安全迁移历史数据，确保完整性',
|
||||||
'上线支持：协助系统上线，提供技术支持',
|
'培训交付：用户培训与正式交付上线',
|
||||||
],
|
],
|
||||||
specs: [
|
specs: [
|
||||||
|
'支持本地服务器、私有云、混合云部署',
|
||||||
'支持多组织、多账套管理',
|
'支持多组织、多账套管理',
|
||||||
'支持多币种、多语言',
|
'支持信创环境（国产操作系统/数据库）',
|
||||||
'支持移动端访问',
|
'支持API接口集成，对接现有系统',
|
||||||
'支持API接口集成',
|
'支持移动端访问（APP/微信/钉钉）',
|
||||||
'支持自定义报表',
|
'支持数据加密存储与传输',
|
||||||
],
|
],
|
||||||
pricing: {
|
pricing: {
|
||||||
base: '基础版：¥19,800/年',
|
base: '基础版：¥19,800/年',
|
||||||
@@ -57,25 +76,26 @@ export const PRODUCTS = [
|
|||||||
'数据分析：客户分析、销售分析、业绩报表',
|
'数据分析：客户分析、销售分析、业绩报表',
|
||||||
],
|
],
|
||||||
benefits: [
|
benefits: [
|
||||||
|
'客户数据私有化存储，保障商业机密',
|
||||||
|
'支持与企业现有系统深度集成',
|
||||||
'销售转化率提升25%，提高销售效率',
|
'销售转化率提升25%，提高销售效率',
|
||||||
'客户满意度提升40%，增强客户粘性',
|
'灵活定制销售流程，适配业务变化',
|
||||||
'销售周期缩短30%，加快成交速度',
|
|
||||||
'支持团队协作，提升整体销售业绩',
|
|
||||||
],
|
],
|
||||||
process: [
|
process: [
|
||||||
'客户调研：了解企业销售流程和客户管理需求',
|
'需求调研：了解企业销售流程和客户管理需求',
|
||||||
'流程梳理：梳理销售流程，优化客户管理策略',
|
'环境评估：评估IT基础设施与集成需求',
|
||||||
'系统配置：配置客户字段、销售阶段、审批流程',
|
'方案设计：制定部署方案与系统集成策略',
|
||||||
'数据导入：导入历史客户数据和销售记录',
|
'系统部署：私有化部署与流程配置',
|
||||||
'培训上线：培训销售人员，协助系统上线',
|
'数据导入：导入历史客户数据与销售记录',
|
||||||
'持续优化：根据使用情况持续优化系统配置',
|
'培训交付：销售团队培训与系统上线',
|
||||||
],
|
],
|
||||||
specs: [
|
specs: [
|
||||||
|
'支持本地服务器、私有云部署',
|
||||||
'支持多渠道客户数据整合',
|
'支持多渠道客户数据整合',
|
||||||
'支持自定义销售流程',
|
'支持信创环境适配',
|
||||||
|
'支持API接口，对接ERP/OA等系统',
|
||||||
'支持移动端访问',
|
'支持移动端访问',
|
||||||
'支持邮件集成',
|
'支持数据加密与权限隔离',
|
||||||
'支持API接口集成',
|
|
||||||
],
|
],
|
||||||
pricing: {
|
pricing: {
|
||||||
base: '基础版：¥9,800/年',
|
base: '基础版：¥9,800/年',
|
||||||
@@ -99,25 +119,26 @@ export const PRODUCTS = [
|
|||||||
'SEO优化：内置SEO工具，优化搜索引擎排名',
|
'SEO优化：内置SEO工具，优化搜索引擎排名',
|
||||||
],
|
],
|
||||||
benefits: [
|
benefits: [
|
||||||
|
'内容数据自主管理，支持等保合规',
|
||||||
|
'支持私有化部署，内外网隔离访问',
|
||||||
'内容发布效率提升50%，加快内容更新',
|
'内容发布效率提升50%，加快内容更新',
|
||||||
'管理成本降低40%，减少人工投入',
|
'灵活的权限体系，满足多部门协作',
|
||||||
'支持多终端访问，提升用户体验',
|
|
||||||
'灵活的权限管理，确保内容安全',
|
|
||||||
],
|
],
|
||||||
process: [
|
process: [
|
||||||
'需求分析：了解企业内容管理需求和业务场景',
|
'需求分析：了解企业内容管理需求与安全要求',
|
||||||
'架构设计：设计内容架构和分类体系',
|
'环境评估：评估部署环境与网络隔离需求',
|
||||||
'系统配置：配置站点、栏目、模板、权限',
|
'方案设计：制定部署方案与内容架构',
|
||||||
'内容迁移：迁移历史内容数据',
|
'系统部署：私有化部署与权限配置',
|
||||||
'培训上线：培训内容管理人员，协助系统上线',
|
'内容迁移：迁移历史内容与媒体资源',
|
||||||
'运营支持：提供持续的运营支持和技术服务',
|
'培训交付：内容团队培训与系统上线',
|
||||||
],
|
],
|
||||||
specs: [
|
specs: [
|
||||||
'支持多站点管理',
|
'支持本地服务器、私有云部署',
|
||||||
'支持多语言内容',
|
'支持多站点统一管理',
|
||||||
'支持移动端访问',
|
'支持信创环境适配',
|
||||||
'支持API接口集成',
|
'支持API接口集成',
|
||||||
'支持自定义模板',
|
'支持自定义模板与组件',
|
||||||
|
'支持等保二级/三级安全要求',
|
||||||
],
|
],
|
||||||
pricing: {
|
pricing: {
|
||||||
base: '基础版：¥4,800/年',
|
base: '基础版：¥4,800/年',
|
||||||
@@ -141,25 +162,26 @@ export const PRODUCTS = [
|
|||||||
'移动看板：支持移动端访问，随时随地查看数据',
|
'移动看板：支持移动端访问，随时随地查看数据',
|
||||||
],
|
],
|
||||||
benefits: [
|
benefits: [
|
||||||
|
'分析能力私有化部署，数据不出企业',
|
||||||
|
'支持对接内部数据源，无需数据上云',
|
||||||
'决策效率提升60%，加快决策速度',
|
'决策效率提升60%，加快决策速度',
|
||||||
'数据准备时间减少70%，提高数据分析效率',
|
'自助式分析，降低数据使用门槛',
|
||||||
'发现隐藏业务洞察，把握业务机会',
|
|
||||||
'支持数据驱动决策，提升管理水平',
|
|
||||||
],
|
],
|
||||||
process: [
|
process: [
|
||||||
'数据评估：评估数据源和数据质量',
|
'数据评估：评估数据源、数据质量与安全要求',
|
||||||
'平台搭建：搭建数据仓库和BI平台',
|
'环境评估：评估服务器性能与数据规模',
|
||||||
'模型开发：开发数据分析模型和报表',
|
'方案设计：制定部署方案与数据仓库架构',
|
||||||
'数据集成：整合多源数据到统一平台',
|
'系统部署：私有化部署与数据集成',
|
||||||
'培训上线：培训数据分析人员，协助系统上线',
|
'模型开发：开发分析模型与可视化报表',
|
||||||
'持续优化：持续优化数据模型和报表',
|
'培训交付：数据分析培训与系统上线',
|
||||||
],
|
],
|
||||||
specs: [
|
specs: [
|
||||||
'支持多种数据源',
|
'支持本地服务器、私有云部署',
|
||||||
'支持实时数据分析',
|
'支持多种数据源（数据库/文件/API）',
|
||||||
'支持移动端访问',
|
'支持信创环境适配',
|
||||||
|
'支持实时与离线数据分析',
|
||||||
'支持API接口集成',
|
'支持API接口集成',
|
||||||
'支持自定义报表',
|
'支持数据加密与访问审计',
|
||||||
],
|
],
|
||||||
pricing: {
|
pricing: {
|
||||||
base: '基础版：¥14,800/年',
|
base: '基础版：¥14,800/年',
|
||||||
@@ -167,4 +189,90 @@ export const PRODUCTS = [
|
|||||||
enterprise: '企业版：¥59,800/年',
|
enterprise: '企业版：¥59,800/年',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: 'sds',
|
||||||
|
title: '睿新供应链决策支持系统',
|
||||||
|
description: '智能供应链管理平台，自动预测销量、优化库存、生成补货建议，帮助企业减少库存积压和缺货损失，让每一分钱都花在刀刃上。',
|
||||||
|
image: '/images/products/sds.jpg',
|
||||||
|
category: '数据产品',
|
||||||
|
overview: '睿新供应链决策支持系统是一款智能供应链管理平台，自动预测销量、优化库存、生成补货建议，帮助企业减少库存积压和缺货损失，让每一分钱都花在刀刃上。系统采用智能算法，实现从经验驱动到数据驱动的供应链管理升级。',
|
||||||
|
features: [
|
||||||
|
'智能销量预测：自动分析历史销售趋势、季节规律和促销影响，告诉您下个月每个商品大概能卖多少',
|
||||||
|
'库存健康诊断：自动识别哪些商品库存过多（积压资金）、哪些商品即将缺货（错失销售），一目了然',
|
||||||
|
'精准补货建议：系统自动算好"什么时候补、补多少"，按紧急程度排好优先级，确认即可执行',
|
||||||
|
'原因追溯分析：预测不准时，系统会告诉您"为什么"——是促销拉高了销量，还是淡季导致下滑',
|
||||||
|
'供应商协同：与供应商系统对接，实现采购订单自动推送和交期跟踪',
|
||||||
|
'数据看板：实时展示库存周转率、缺货率、积压金额等关键指标',
|
||||||
|
],
|
||||||
|
benefits: [
|
||||||
|
'库存成本平均降低10%以上，缺货率降低15%以上，直接转化为真金白银的利润',
|
||||||
|
'无需专业数据团队，采购员、库管员等日常操作人员即可独立使用',
|
||||||
|
'简单三步完成核心操作，系统全程引导，零基础也能快速上手',
|
||||||
|
'投入产出清晰可算，仪表盘实时展示节省了多少钱、挽回了多少销售',
|
||||||
|
],
|
||||||
|
process: [
|
||||||
|
'需求调研：了解企业供应链现状、库存管理痛点和补货流程',
|
||||||
|
'数据评估：评估历史销售数据质量和可用性',
|
||||||
|
'方案设计：制定部署方案与预测模型架构',
|
||||||
|
'系统部署：私有化部署与数据集成',
|
||||||
|
'模型训练：基于历史数据训练销量预测模型',
|
||||||
|
'培训交付：供应链团队培训与系统上线',
|
||||||
|
],
|
||||||
|
specs: [
|
||||||
|
'支持本地服务器、私有云部署',
|
||||||
|
'支持多种ERP/WMS系统数据对接',
|
||||||
|
'支持信创环境适配',
|
||||||
|
'支持多品类、多仓点并行管理',
|
||||||
|
'支持API接口集成',
|
||||||
|
'支持数据加密与访问审计',
|
||||||
|
],
|
||||||
|
pricing: {
|
||||||
|
base: '基础版：¥19,800/年',
|
||||||
|
standard: '标准版：¥39,800/年',
|
||||||
|
enterprise: '企业版：¥79,800/年',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'oa',
|
||||||
|
title: '睿新协同办公系统',
|
||||||
|
description: '一站式企业协同办公平台，集成流程审批、公文管理、智能协作、知识中心等功能，助力企业实现办公数字化、协作高效化。',
|
||||||
|
image: '/images/products/oa.jpg',
|
||||||
|
category: '企业软件',
|
||||||
|
overview: '睿新协同办公系统是一款综合型企业协同办公平台，融合传统办公自动化与现代协作理念。系统集成了流程审批、公文管理、即时通讯、知识管理、会议日程等核心模块，支持PC端与移动端全场景覆盖，帮助企业实现办公数字化、流程规范化、协作高效化。',
|
||||||
|
features: [
|
||||||
|
'流程审批：请假、报销、采购、合同等全流程电子化审批，支持自定义审批流程和条件分支',
|
||||||
|
'公文管理：收文登记、发文审批、公文流转、归档管理，满足政务合规和档案管理要求',
|
||||||
|
'智能协作：支持与钉钉、企业微信、飞书等主流平台深度整合，实现统一消息推送与协作',
|
||||||
|
'知识中心：企业知识库、文档管理、知识检索、权限管控，沉淀组织智慧资产',
|
||||||
|
'会议日程：会议室预约、会议通知、纪要管理、个人与团队日程同步',
|
||||||
|
'移动办公：全功能移动端，支持APP、微信企业号、钉钉等多端接入，随时随地处理工作',
|
||||||
|
],
|
||||||
|
benefits: [
|
||||||
|
'流程审批效率提升70%，告别纸质流转，降低管理成本',
|
||||||
|
'知识资产沉淀共享，避免"人走知识丢"，提升组织学习能力',
|
||||||
|
'移动办公全覆盖，决策不等待，响应更及时',
|
||||||
|
'一站式办公平台，减少系统切换成本，提升工作效率',
|
||||||
|
],
|
||||||
|
process: [
|
||||||
|
'需求调研：了解企业组织架构、审批流程和办公协作需求',
|
||||||
|
'环境评估：评估IT基础设施与安全合规要求',
|
||||||
|
'方案设计：制定部署方案、流程配置与集成策略',
|
||||||
|
'系统部署：私有化部署与组织架构初始化',
|
||||||
|
'流程配置：配置审批流程、公文模板、权限体系',
|
||||||
|
'培训交付：全员培训与系统正式上线',
|
||||||
|
],
|
||||||
|
specs: [
|
||||||
|
'支持本地服务器、私有云、混合云部署',
|
||||||
|
'支持多组织、多层级组织架构管理',
|
||||||
|
'支持信创环境（国产操作系统/数据库/中间件）',
|
||||||
|
'支持API接口集成，对接ERP/CRM等业务系统',
|
||||||
|
'支持移动端APP、微信企业号、钉钉等多端接入',
|
||||||
|
'支持数据加密、访问审计、安全水印等安全特性',
|
||||||
|
],
|
||||||
|
pricing: {
|
||||||
|
base: '基础版：¥9,800/年',
|
||||||
|
standard: '标准版：¥19,800/年',
|
||||||
|
enterprise: '企业版：¥39,800/年',
|
||||||
|
},
|
||||||
|
},
|
||||||
] as const;
|
] as const;
|
||||||
|
|||||||
@@ -85,8 +85,8 @@ export const SERVICES = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'solutions',
|
id: 'solutions',
|
||||||
title: '解决方案',
|
title: '行业方案实施',
|
||||||
description: '提供行业定制化解决方案，覆盖金融、制造、零售、医疗等多个领域',
|
description: '提供行业定制化方案落地实施服务，覆盖金融、制造、零售、医疗等多个领域',
|
||||||
icon: 'Puzzle',
|
icon: 'Puzzle',
|
||||||
overview: '基于对各行业业务场景的深入理解，我们提供从咨询到实施的一站式行业解决方案，帮助企业快速实现业务价值。',
|
overview: '基于对各行业业务场景的深入理解，我们提供从咨询到实施的一站式行业解决方案，帮助企业快速实现业务价值。',
|
||||||
features: [
|
features: [
|
||||||
|
|||||||
@@ -1,32 +1,11 @@
|
|||||||
import { CASES } from './cases';
|
|
||||||
|
|
||||||
export interface StatItem {
|
export interface StatItem {
|
||||||
value: string;
|
value: string;
|
||||||
label: string;
|
label: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
function calculateYearsOfExperience(): number {
|
export const STATS: StatItem[] = [
|
||||||
const startYear = 2014;
|
{ value: '6', label: '自研产品' },
|
||||||
const currentYear = new Date().getFullYear();
|
{ value: '5+', label: '行业覆盖' },
|
||||||
return currentYear - startYear;
|
{ value: '10+', label: '团队成员' },
|
||||||
}
|
{ value: '12+', label: '年核心团队经验' },
|
||||||
|
];
|
||||||
function calculateUniqueClients(): number {
|
|
||||||
const uniqueClients = new Set(CASES.map(c => c.client));
|
|
||||||
return uniqueClients.size;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getStats(): StatItem[] {
|
|
||||||
const yearsOfExperience = calculateYearsOfExperience();
|
|
||||||
const uniqueClients = calculateUniqueClients();
|
|
||||||
const caseCount = CASES.length;
|
|
||||||
|
|
||||||
return [
|
|
||||||
{ value: `${uniqueClients}+`, label: '企业客户' },
|
|
||||||
{ value: `${caseCount}+`, label: '成功案例' },
|
|
||||||
{ value: `${caseCount}+`, label: '项目交付' },
|
|
||||||
{ value: `${yearsOfExperience}+`, label: '年团队经验' },
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
export const STATS: StatItem[] = getStats();
|
|
||||||
|
|||||||
Reference in New Issue
Block a user