From 307e0a654eafc52f7d5ccf5ac022ff3bf409101f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E7=BF=94?= Date: Thu, 30 Apr 2026 22:11:17 +0800 Subject: [PATCH] refactor: P2 - redesign Products/Services/Solutions pages - Products: Atlassian-style card grid with ProductCard - Products detail: clean typography, consistent tokens - Services: unified card layout, simplified interaction - Services detail: consistent section styling - Solutions: data-driven module rendering, clean borders --- src/app/(marketing)/products/[id]/page.tsx | 173 +++------ src/app/(marketing)/products/page.tsx | 256 ++----------- src/app/(marketing)/services/[id]/client.tsx | 175 +++------ src/app/(marketing)/services/page.tsx | 276 ++++---------- src/app/(marketing)/solutions/page.tsx | 368 +++++++------------ 5 files changed, 352 insertions(+), 896 deletions(-) diff --git a/src/app/(marketing)/products/[id]/page.tsx b/src/app/(marketing)/products/[id]/page.tsx index e5fb91b..6e3bd95 100644 --- a/src/app/(marketing)/products/[id]/page.tsx +++ b/src/app/(marketing)/products/[id]/page.tsx @@ -3,7 +3,7 @@ import { StaticLink } from '@/components/ui/static-link'; import { PRODUCTS } from '@/lib/constants'; import { Button } from '@/components/ui/button'; import { BackButton } from '@/components/ui/back-button'; -import { CheckCircle2, Zap, Target, Layers, CreditCard, ArrowRight } from 'lucide-react'; +import { CheckCircle2, Zap, Target, Layers, ArrowRight } from 'lucide-react'; export async function generateStaticParams() { return PRODUCTS.map((product) => ({ @@ -14,11 +14,9 @@ export async function generateStaticParams() { export async function generateMetadata({ params }: { params: Promise<{ id: string }> }) { const { id } = await params; const product = PRODUCTS.find((p) => p.id === id); - + if (!product) { - return { - title: '产品未找到', - }; + return { title: '产品未找到' }; } return { @@ -37,173 +35,126 @@ export default async function ProductDetailPage({ params }: { params: Promise<{ return (
-
-
+
+
-
-
- {product.category} -
-

+
+

{product.category}

+

{product.title}

-

+

{product.description}

-
-
-
-

产品概述

-

+

+
+
+

产品概述

+

{product.overview}

-
-

- +
+

+ 核心功能

{product.features.map((feature, index) => (
-
- -
- {feature} + + {feature}
))}
-
-

- +
+

+ 产品优势

-
+
{product.benefits.map((benefit, index) => (
-
- -
- {benefit} + {benefit}
))}
-
-

- +
+

+ 实施流程

{product.process.map((step, index) => (
-
+
{index + 1}
-
-

{step}

- {index < product.process.length - 1 && ( -
- )} -
+

{step}

))}
-
-

- - 技术规格 -

-
+
+

技术规格

+
{product.specs.map((spec, index) => (
-
- {spec} +
+ {spec}
))}
-
-

- - 价格方案 -

+
+

价格方案

-
-

基础版

-

{product.pricing.base}

-
    -
  • - - 基础功能模块 -
    • -
  • - - 邮件支持 -
    • -
  • - - 标准报表 -
    • +
    +

    基础版

    +

    {product.pricing.base}

    +
      +
    • 基础功能模块
      • +
    • 邮件支持
      • +
    • 标准报表
    -
    -
    - 推荐 -
    -

    标准版

    -

    {product.pricing.standard}

    +
    +
    推荐
    +

    标准版

    +

    {product.pricing.standard}

      -
    • - - 全部功能模块 -
      • -
    • - - 电话支持 -
      • -
    • - - 自定义报表 -
      • +
    • 全部功能模块
      • +
    • 电话支持
      • +
    • 自定义报表
    -
    -

    企业版

    -

    {product.pricing.enterprise}

    -
      -
    • - - 全部功能模块 -
      • -
    • - - 专属客服 -
      • -
    • - - 定制开发 -
      • +
      +

      企业版

      +

      {product.pricing.enterprise}

      +
        +
      • 全部功能模块
        • +
      • 专属客服
        • +
      • 定制开发
    @@ -211,9 +162,7 @@ export default async function ProductDetailPage({ params }: { params: Promise<{
    - ))} -
    -
    - -
    - - -
    +

    Products

    +

    + 产品服务 +

    +

    + 自主研发的企业级产品，助力企业高效运营，实现数字化转型 +

    - - {paginatedProducts.length === 0 ? ( -
    -

    没有找到相关产品

    -
    - ) : ( - <> -
    - {paginatedProducts.map((product, index) => ( - - - - - - {product.category} - - {product.title} - - - - {product.description} - - -
    -

    核心功能

    -
    - {product.features.slice(0, 4).map((feature, idx) => ( - - - {feature} - - ))} -
    -
    - -
    -

    - - 核心价值 -

    -
      - {product.benefits.map((benefit, idx) => ( -
    • - • - {benefit} -
      • - ))} -
    -
    - - -     -     -     -     - ))} -
    - - {totalPages > 1 && ( -
    - - - {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => ( - - ))} - - -
    - )} - -
    - 显示 {paginatedProducts.length} 条，共 {filteredProducts.length} 条产品 -
    - - )}
-
+
- +
+
+
+ {PRODUCTS.map((product, index) => ( + + ))} +
+
+
+ +

需要定制化解决方案？

-

+

我们的专业团队可以根据您的业务需求，提供量身定制的产品开发和系统集成服务

-
- +
); } diff --git a/src/app/(marketing)/services/[id]/client.tsx b/src/app/(marketing)/services/[id]/client.tsx index 55266d5..121047a 100644 --- a/src/app/(marketing)/services/[id]/client.tsx +++ b/src/app/(marketing)/services/[id]/client.tsx @@ -1,18 +1,16 @@ 'use client'; -import { useRef } 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 { - CheckCircle2, - TrendingUp, - Users, - Target, - Clock, +import { + CheckCircle2, + TrendingUp, + Users, + Target, + Clock, MessageCircle, - ArrowRight + ArrowRight, } from 'lucide-react'; import { SERVICES, CASES } from '@/lib/constants'; @@ -20,30 +18,7 @@ interface ServiceDetailClientProps { service: typeof SERVICES[number]; } -const iconMap: Record> = { - Code: () => ( - - - - ), - BarChart3: () => ( - - - - ), - Lightbulb: () => ( - - - - ), - Puzzle: () => ( - - - - ), -}; - -const challenges = { +const challenges: Record = { software: [ { title: '需求不明确', description: '业务部门提不出清晰需求，开发团队反复返工' }, { title: '技术选型困难', description: '技术栈更新快，不知道该选什么技术方案' }, @@ -70,7 +45,7 @@ const challenges = { ], }; -const outcomes = { +const outcomes: Record = { software: [ { value: '30%', label: '开发效率提升' }, { value: '50%', label: '返工率降低' }, @@ -94,162 +69,134 @@ const outcomes = { }; export function ServiceDetailClient({ service }: ServiceDetailClientProps) { - const contentRef = useRef(null); - - const serviceChallenges = challenges[service.id as keyof typeof challenges] ?? []; - const serviceOutcomes = outcomes[service.id as keyof typeof outcomes] ?? []; + const serviceChallenges = challenges[service.id] ?? []; + const serviceOutcomes = outcomes[service.id] ?? []; const relatedCases = CASES.slice(0, 2); - const Icon = iconMap[service.icon]; - return (
-
-
+
+
-
-
- {Icon && } -
-
- - 核心业务 - -

- {service.title} -

-
-
-

+

核心业务

+

+ {service.title} +

+

{service.description}

-
-
- -
+
+
+
-
- +
+
-

- 您可能面临的挑战 -

+

您可能面临的挑战

{serviceChallenges.map((challenge, index) => ( -
-

{challenge.title}

-

{challenge.description}

+

{challenge.title}

+

{challenge.description}

))}
-
+
-
- +
+
-

- 我们如何帮助您 -

+

我们如何帮助您

-

+

{service.overview}

{service.features.map((feature, index) => (
- - {feature} + + {feature}
))}
-
+
-
- +
+
-

- 服务流程 -

+

服务流程

{service.process.map((step, index) => (
-
+
{index + 1}
-
-

{step}

-
+

{step}

))}
-
+
-
- +
+
-

- 您将获得的改变 -

+

您将获得的改变

{serviceOutcomes.map((outcome, index) => ( -
{outcome.value}
-
{outcome.label}
+
{outcome.label}
))}
-
-

- {service.benefits.map(b => b).join('；')} +

+

+ {service.benefits.join('；')}

-
+
-
- +
+
-

- 相关案例 -

+

相关案例

{relatedCases.map((caseItem) => ( - - {caseItem.industry} - -

+

{caseItem.industry}

+

{caseItem.title}

-

+

{caseItem.description}

@@ -259,9 +206,7 @@ export function ServiceDetailClient({ service }: ServiceDetailClientProps) {
- + - ))} -
-
- -
- - -
+

Services

+

+ 核心业务 +

+

+ 专业技术团队，为您提供全方位的数字化解决方案 +

- - {paginatedServices.length === 0 ? ( -
-

没有找到相关服务

-
- ) : ( - <> -
- {paginatedServices.map((service, index) => { - const Icon = iconMap[service.icon]; - return ( - - -
-
-
- {Icon && } -
-
-

- {service.title} -

-

- {service.description} -

-
-
- -
-
- {service.features.slice(0, 3).map((feature, idx) => ( - - {feature.split('：')[0]} - - ))} -
-
- 了解详情 - -
-
-
- - - ); - })} -
- - {totalPages > 1 && ( -
- - - {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => ( - - ))} - - -
- )} - -
- 显示 {paginatedServices.length} 条，共 {filteredServices.length} 条服务 -
- - )}
-
+
- +
+
+
+ {SERVICES.map((service, index) => ( + + +
+ + {String(index + 1).padStart(2, '0')} + + +
+

+ {service.title} +

+

+ {service.description} +

+
+ {service.features.slice(0, 3).map((feature, idx) => ( + + {feature.split('：')[0]} + + ))} +
+ + + ))} +
+
+
+ +

准备开始您的数字化转型之旅？

-

+

让我们与您同行，共创美好未来

-
- +
); } diff --git a/src/app/(marketing)/solutions/page.tsx b/src/app/(marketing)/solutions/page.tsx index 92237cf..74c1d0e 100644 --- a/src/app/(marketing)/solutions/page.tsx +++ b/src/app/(marketing)/solutions/page.tsx @@ -1,270 +1,154 @@ 'use client'; import { motion } from 'framer-motion'; -import { useInView } from 'framer-motion'; -import { useRef } from 'react'; import { StaticLink } from '@/components/ui/static-link'; import { Button } from '@/components/ui/button'; -import { PageHeader } from '@/components/ui/page-header'; import { ArrowRight, Lightbulb, Cpu, Users, CheckCircle2 } from 'lucide-react'; import { MethodologySection } from '@/components/sections/methodology-section'; -export default function SolutionsPage() { - const contentRef = useRef(null); - const isContentInView = useInView(contentRef, { once: true, margin: '-100px' }); +const modules = [ + { + icon: Lightbulb, + title: '数字化转型咨询 · 参谋伙伴', + subtitle: '帮您看清前路，迈对第一步', + paragraphs: [ + '数字化转型最大的成本，是走错方向的成本。', + '我们用行业智慧帮您洞察趋势，用理性分析帮您避开陷阱。', + '不堆砌概念，只帮您想清楚：该不该做、做什么、怎么做。', + ], + values: ['行业趋势洞察报告', '数字化转型成熟度评估', '个性化实施路径规划'], + cta: '预约一次免费诊断', + ctaVariant: 'default' as const, + }, + { + icon: Cpu, + title: '信息技术解决方案 · 技术伙伴', + subtitle: '让技术真正为业务服务', + paragraphs: [ + '我们不追逐"最火"的技术，只选择"最对"的技术。', + '将前沿技术深度融入您的业务场景，让每一行代码都产生业务价值。', + '您不必懂技术原理，只需要看见业务在增长。', + ], + values: ['业务场景深度调研', '技术方案定制开发', '敏捷交付快速迭代'], + cta: '查看技术案例', + ctaVariant: 'outline' as const, + }, + { + icon: Users, + title: '长期陪跑服务 · 同行伙伴', + subtitle: '交付只是开始，陪伴才是常态', + paragraphs: [ + '项目上线那天，是我们真正成为伙伴的开始。', + '我们建立长效服务机制，定期回访、持续优化、随时响应。', + '在您需要的时候，我们始终在场。', + ], + values: ['专属客户成功经理', '季度业务复盘会', '7×24小时响应通道'], + cta: '了解陪跑服务', + ctaVariant: 'default' as const, + }, +]; +export default function SolutionsPage() { return (
- - -
-
- - +
+ -
-
- -
-
-

- 模块一：数字化转型咨询 · 参谋伙伴 -

-

- 帮您看清前路，迈对第一步 -

-
-
- -
-

- 数字化转型最大的成本，是走错方向的成本。 -

-

- 我们用行业智慧帮您洞察趋势，用理性分析帮您避开陷阱。 -

-

- 不堆砌概念，只帮您想清楚：该不该做、做什么、怎么做。 -

-
- -
-

- - 核心价值点 -

-
-
-
- 行业趋势洞察报告 -
-
-
- 数字化转型成熟度评估 -
-
-
- 个性化实施路径规划 -
-
-
- -
- -
- - - -
-
- -
-
-

- 模块二：信息技术解决方案 · 技术伙伴 -

-

- 让技术真正为业务服务 -

-
-
- -
-

- 我们不追逐“最火”的技术，只选择“最对”的技术。 -

-

- 将前沿技术深度融入您的业务场景，让每一行代码都产生业务价值。 -

-

- 您不必懂技术原理，只需要看见业务在增长。 -

-
- -
-

- - 核心价值点 -

-
-
-
- 业务场景深度调研 -
-
-
- 技术方案定制开发 -
-
-
- 敏捷交付快速迭代 -
-
-
- -
- -
- - - -
-
- -
-
-

- 模块三：长期陪跑服务 · 同行伙伴 -

-

- 交付只是开始，陪伴才是常态 -

-
-
- -
-

- 项目上线那天，是我们真正成为伙伴的开始。 -

-

- 我们建立长效服务机制，定期回访、持续优化、随时响应。 -

-

- 在您需要的时候，我们始终在场。 -

-
- -
-

- - 核心价值点 -

-
-
-
- 专属客户成功经理 -
-
-
- 季度业务复盘会 -
-
-
- 7×24小时响应通道 -
-
-
- -
- -
- - +

Solutions

+

+ 三种角色，一种身份——您的成长伙伴 +

+

+ 我们以伙伴的身份，陪您走过数字化转型的每一步 +

+
-
+
+ +
+
+
+ {modules.map((module, index) => ( + +
+
+ +
+
+

+ 模块{['一', '二', '三'][index]}：{module.title} +

+

{module.subtitle}

+
+
+ +
+ {module.paragraphs.map((p, i) => ( +

{p}

+ ))} +
+ +
+

+ + 核心价值点 +

+
+ {module.values.map((value, i) => ( +
+
+ {value} +
+ ))} +
+
+ +
+ +
+ + ))} +
+
+
- +

准备开始您的数字化转型之旅？

-

+

无论您处于哪个阶段，我们都能为您提供合适的解决方案

- -
- +

); }