From 38ae991ea761d100b5c9e0c7789a41bf8d89f709 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E7=BF=94?= Date: Sun, 7 Jun 2026 16:21:15 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=90=A5=E9=94=80=E9=A1=B5=E9=9D=A2HSI?= =?UTF-8?q?=E6=9E=B6=E6=9E=84=E6=94=B9=E9=80=A0=E4=B8=8E=E5=9B=9B=E5=B1=82?= =?UTF-8?q?=E5=8F=99=E4=BA=8B=E5=AF=B9=E9=BD=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 产品页:双区展示(企业套装+专业产品),分类筛选,统计数据更新 - 方案页:删除服务方式区域,替换为轻量关联推荐卡片 - 方案详情页:添加L3信任层条件渲染,使用V3 Hero+V2 CTA - 独立产品页:从V1组件迁移到V2/V3 - 服务页:视觉升级与组件更新 - 首页:产品矩阵和CTA区域优化 --- src/app/(marketing)/home-content-v2.tsx | 16 +- .../(marketing)/products/[id]/page.test.tsx | 13 +- src/app/(marketing)/products/[id]/page.tsx | 181 +++---------- .../products/erp-upgrade-v3/page.tsx | 57 +++++ .../(marketing)/products/erp-upgrade/page.tsx | 57 +++++ src/app/(marketing)/products/page.tsx | 174 ++++++++++--- .../products/standalone/[id]/client.tsx | 179 +++++++++++++ .../products/standalone/[id]/page.tsx | 37 +++ src/app/(marketing)/services/[id]/client.tsx | 213 +++------------- src/app/(marketing)/services/page.tsx | 118 +++++---- src/app/(marketing)/solutions/[id]/client.tsx | 176 +++---------- src/app/(marketing)/solutions/[id]/page.tsx | 5 +- src/app/(marketing)/solutions/page.tsx | 241 ++++++------------ 13 files changed, 740 insertions(+), 727 deletions(-) create mode 100644 src/app/(marketing)/products/erp-upgrade-v3/page.tsx create mode 100644 src/app/(marketing)/products/erp-upgrade/page.tsx create mode 100644 src/app/(marketing)/products/standalone/[id]/client.tsx create mode 100644 src/app/(marketing)/products/standalone/[id]/page.tsx diff --git a/src/app/(marketing)/home-content-v2.tsx b/src/app/(marketing)/home-content-v2.tsx index 560e04e..2f45a06 100644 --- a/src/app/(marketing)/home-content-v2.tsx +++ b/src/app/(marketing)/home-content-v2.tsx @@ -4,11 +4,6 @@ import dynamic from 'next/dynamic'; import { HeroSectionV2 } from '@/components/sections/hero-section-v2'; import { SectionSkeleton } from '@/components/ui/loading-skeleton'; -const SocialProofSection = dynamic( - () => import('@/components/sections/social-proof-section').then(mod => ({ default: mod.SocialProofSection })), - { loading: () => , ssr: false } -); - const ProductMatrixSection = dynamic( () => import('@/components/sections/product-matrix-section').then(mod => ({ default: mod.ProductMatrixSection })), { loading: () => , ssr: false } @@ -19,6 +14,16 @@ const ChallengeSection = dynamic( { loading: () => , ssr: false } ); +const SocialProofSection = dynamic( + () => import('@/components/sections/social-proof-section').then(mod => ({ default: mod.SocialProofSection })), + { loading: () => , ssr: false } +); + +const WhyUsSection = dynamic( + () => import('@/components/sections/why-us-section').then(mod => ({ default: mod.WhyUsSection })), + { loading: () => , ssr: false } +); + const CTASection = dynamic( () => import('@/components/sections/cta-section').then(mod => ({ default: mod.CTASection })), { loading: () => , ssr: false } @@ -31,6 +36,7 @@ function HomeContentV2() { + ); diff --git a/src/app/(marketing)/products/[id]/page.test.tsx b/src/app/(marketing)/products/[id]/page.test.tsx index 630e863..3808abd 100644 --- a/src/app/(marketing)/products/[id]/page.test.tsx +++ b/src/app/(marketing)/products/[id]/page.test.tsx @@ -27,7 +27,9 @@ jest.mock('@/lib/constants', () => ({ { id: 'test-product', title: '测试产品', - category: '企业软件', + category: '企业旗舰系列', + categoryId: 'enterprise', + tags: ['测试', '示例'], status: '研发中', description: '这是测试产品描述', overview: '这是测试产品概述', @@ -37,6 +39,13 @@ jest.mock('@/lib/constants', () => ({ specs: ['规格1', '规格2'], }, ], + PRODUCT_CATEGORIES: [ + { + id: 'enterprise', + title: '企业旗舰系列', + description: '测试分类描述', + }, + ], })); describe('ProductDetailPage', () => { @@ -66,7 +75,7 @@ describe('ProductDetailPage', () => { const page = await ProductDetailPage({ params: Promise.resolve({ id: 'test-product' }) }); render(page); - const category = screen.getByText('企业软件'); + const category = screen.getByText('企业旗舰系列'); expect(category).toBeInTheDocument(); }); diff --git a/src/app/(marketing)/products/[id]/page.tsx b/src/app/(marketing)/products/[id]/page.tsx index 788d645..728df5d 100644 --- a/src/app/(marketing)/products/[id]/page.tsx +++ b/src/app/(marketing)/products/[id]/page.tsx @@ -1,10 +1,13 @@ import { notFound } from 'next/navigation'; -import { StaticLink } from '@/components/ui/static-link'; import { PRODUCTS, COMPANY_INFO } from '@/lib/constants'; -import { Button } from '@/components/ui/button'; -import { PageNav } from '@/components/layout/page-nav'; +import { getHeroTheme } from '@/lib/constants/hero-themes'; +import { getProductCrossRefs } from '@/lib/constants/cross-references'; import { DetailSwipeNav } from '@/components/ui/detail-swipe-nav'; -import { CheckCircle2, Zap, Target, Layers, ArrowRight, FlaskConical } from 'lucide-react'; +import { DetailHeroV3 } from '@/components/detail-v2/detail-hero-v3'; +import { ProductValueSectionV3 } from '@/components/detail-v2/detail-product-value-v3'; +import { DetailTrustSectionV2 } from '@/components/detail-v2/detail-trust-section-v2'; +import { DetailCTASectionV2 } from '@/components/detail-v2/detail-cta-section-v2'; +import { CrossRecommendGrid } from '@/components/detail/detail-cross-recommend'; export async function generateStaticParams() { return PRODUCTS.map((product) => ({ @@ -22,7 +25,7 @@ export async function generateMetadata({ params }: { params: Promise<{ id: strin return { title: `${product.title} - ${COMPANY_INFO.displayName}`, - description: product.description, + description: `${product.description} | 现代东方美学设计`, }; } @@ -34,151 +37,45 @@ export default async function ProductDetailPage({ params }: { params: Promise<{ notFound(); } + const theme = getHeroTheme(product.heroThemeId); + const crossRefs = getProductCrossRefs(product.id); + return (
-
-
- -
-
-

{product.category}

- - {product.status} - -
-

- {product.title} -

-

- {product.description} -

-
-
-
-
-
-
-

产品概述

-

- {product.overview} -

-
+ {/* L1 - Hero 情感入口 (V3) */} + -
-

- - 规划功能 -

-
- {product.features.map((feature, index) => ( -
- - {feature} -
- ))} -
-
+ {/* L2 - 价值理性支撑 (V3) */} + -
-

- - 产品优势 -

-
- {product.benefits.map((benefit, index) => ( -
-
- {benefit} -
- ))} -
-
+ {/* L3 - 信任证明 (V2) */} + -
-

- - 预期实施流程 -

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

{step}

-
- ))} -
-
+ {/* L4 - CTA + 交叉推荐 (V2) */} + -
-

技术规格

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

定价待公布

-

- 本产品正在研发中，正式定价将在产品发布时公布。如果您对产品方向感兴趣，欢迎预约早期体验，您的反馈将帮助我们打造更贴合需求的产品。 -

-
- - -
-
-
-
- -
- - -
-
-
+
); } diff --git a/src/app/(marketing)/products/erp-upgrade-v3/page.tsx b/src/app/(marketing)/products/erp-upgrade-v3/page.tsx new file mode 100644 index 0000000..19500e3 --- /dev/null +++ b/src/app/(marketing)/products/erp-upgrade-v3/page.tsx @@ -0,0 +1,57 @@ +import { Metadata } from 'next'; +import { PRODUCTS, COMPANY_INFO } from '@/lib/constants'; +import { getHeroTheme } from '@/lib/constants/hero-themes'; +import { getProductCrossRefs } from '@/lib/constants/cross-references'; +import { DetailSwipeNav } from '@/components/ui/detail-swipe-nav'; +import { DetailHeroV3 } from '@/components/detail-v2/detail-hero-v3'; +import { ProductValueSectionV3 } from '@/components/detail-v2/detail-product-value-v3'; +import { DetailTrustSectionV2 } from '@/components/detail-v2/detail-trust-section-v2'; +import { DetailCTASectionV2 } from '@/components/detail-v2/detail-cta-section-v2'; +import { CrossRecommendGrid } from '@/components/detail/detail-cross-recommend'; + +export const metadata: Metadata = { + title: `睿新ERP管理系统（V3深度精细化版） - ${COMPANY_INFO.displayName}`, + description: 'ERP产品页V3版本 - 现代东方美学设计系统 + L1-L5全层次精细化打磨', +}; + +export default function ERPUpgradeV3Page() { + const product = PRODUCTS.find((p) => p.id === 'erp')!; + + const theme = getHeroTheme(product.heroThemeId); + const crossRefs = getProductCrossRefs(product.id); + + return ( +
+ + + + + + + + + + + +
+ ); +} diff --git a/src/app/(marketing)/products/erp-upgrade/page.tsx b/src/app/(marketing)/products/erp-upgrade/page.tsx new file mode 100644 index 0000000..e7aadbd --- /dev/null +++ b/src/app/(marketing)/products/erp-upgrade/page.tsx @@ -0,0 +1,57 @@ +import { Metadata } from 'next'; +import { PRODUCTS, COMPANY_INFO } from '@/lib/constants'; +import { getHeroTheme } from '@/lib/constants/hero-themes'; +import { getProductCrossRefs } from '@/lib/constants/cross-references'; +import { DetailSwipeNav } from '@/components/ui/detail-swipe-nav'; +import { DetailHeroV2 } from '@/components/detail-v2/detail-hero-v2'; +import { ProductValueSectionV2 } from '@/components/detail-v2/detail-product-value-v2'; +import { DetailTrustSectionV2 } from '@/components/detail-v2/detail-trust-section-v2'; +import { DetailCTASectionV2 } from '@/components/detail-v2/detail-cta-section-v2'; +import { CrossRecommendGrid } from '@/components/detail/detail-cross-recommend'; + +export const metadata: Metadata = { + title: `睿新ERP管理系统（升级版原型） - ${COMPANY_INFO.displayName}`, + description: '升级版ERP产品页 - 现代东方美学设计系统', +}; + +export default function ERPUpgradePage() { + const product = PRODUCTS.find((p) => p.id === 'erp')!; + + const theme = getHeroTheme(product.heroThemeId); + const crossRefs = getProductCrossRefs(product.id); + + return ( +
+ + + + + + + + + + + +
+ ); +} diff --git a/src/app/(marketing)/products/page.tsx b/src/app/(marketing)/products/page.tsx index b82ae5e..08eb9e0 100644 --- a/src/app/(marketing)/products/page.tsx +++ b/src/app/(marketing)/products/page.tsx @@ -1,63 +1,168 @@ 'use client'; -import { useState, useEffect } from 'react'; -import { PRODUCTS } from '@/lib/constants'; -import { ProductCard } from '@/components/ui/product-card'; +import { useState, useEffect, useMemo } from 'react'; +import { PRODUCTS, PRODUCT_CATEGORIES, type ProductCategory as ProductCategoryType } from '@/lib/constants'; import { motion } from 'framer-motion'; -import { useReducedMotion } from '@/hooks/use-reduced-motion'; -import { PageNav } from '@/components/layout/page-nav'; import { CTASection } from '@/components/sections/cta-section'; import { BreadcrumbSchema } from '@/components/seo/structured-data'; import { LoadingState } from '@/components/ui/loading-state'; +import { ListPageHeroV3 } from '@/components/detail-v2/list-page-hero-v3'; +import { ProductCardV3 } from '@/components/detail-v2/product-card-v3'; +import { Package, Lock, Cpu, ArrowRight } from 'lucide-react'; + +const enterpriseProducts = PRODUCTS.filter(p => p.categoryId === 'enterprise'); +const specializedProducts = PRODUCTS.filter(p => p.categoryId === 'specialized'); export default function ProductsPage() { - const shouldReduceMotion = useReducedMotion(); - const fadeUp = shouldReduceMotion ? {} : { initial: { opacity: 0, y: 20 } }; const [isLoading, setIsLoading] = useState(true); + const [activeCategory, setActiveCategory] = useState('all'); useEffect(() => { const timer = setTimeout(() => setIsLoading(false), 500); return () => clearTimeout(timer); }, []); + + const filteredProducts = useMemo(() => { + if (activeCategory === 'all') return PRODUCTS; + return PRODUCTS.filter(product => product.categoryId === activeCategory); + }, [activeCategory]); + return (
-
+ + {/* Hero 区域 (V3) */} + + + {/* 双区展示：企业套装 + 专业产品 */} +
- + {/* 企业套装区域 */} -

Products

-

- 产品 -

-

- 我们正在打造的企业级产品，致力于助力企业高效运营，实现数字化转型 -

+
+
+ +
+
+

企业套装

+

6 大核心产品互为补充，覆盖企业数字化全场景

+
+
+ + +
+ {enterpriseProducts.map((product) => ( + + ))} +
+ + + + {/* 专业产品区域 */} + +
+
+ +
+
+

专业产品

+

自成体系的独立产品线

+
+
+ + {specializedProducts.length > 0 ? ( +
+ {specializedProducts.map((product) => ( + + ))} +
+ ) : ( +
+ +

独立产品即将上线

+

+ 安全产品、特种行业软件、硬件产品等独立产品线正在规划中， + 敬请期待。如有需求可提前联系我们。 +

+ + 联系我们了解详情 + + +
+ )}
-
+ {/* 分类标签导航（保留作为辅助筛选） */} +
- -
- {PRODUCTS.map((product, index) => ( - - ))} -
- +

按分类浏览

+
+ + {PRODUCT_CATEGORIES.map((category: ProductCategoryType) => { + const count = PRODUCTS.filter(p => p.categoryId === category.id).length; + return ( + + ); + })} +
+ + {activeCategory !== 'all' && filteredProducts.length > 0 && ( + +
+ {filteredProducts.map((product) => ( + + ))} +
+ + )}
@@ -72,3 +177,4 @@ export default function ProductsPage() {
); } + diff --git a/src/app/(marketing)/products/standalone/[id]/client.tsx b/src/app/(marketing)/products/standalone/[id]/client.tsx new file mode 100644 index 0000000..026707d --- /dev/null +++ b/src/app/(marketing)/products/standalone/[id]/client.tsx @@ -0,0 +1,179 @@ +'use client'; + +import { getHeroTheme } from '@/lib/constants/hero-themes'; +import { DetailHeroV3 } from '@/components/detail-v2/detail-hero-v3'; +import { DetailTrustSectionV2 } from '@/components/detail-v2/detail-trust-section-v2'; +import { DetailCTASectionV2 } from '@/components/detail-v2/detail-cta-section-v2'; +import { DetailSwipeNav } from '@/components/ui/detail-swipe-nav'; +import { motion } from 'framer-motion'; +import { CheckCircle2, Clock, Shield, Lock, Cpu, HardDrive, ArrowRight } from 'lucide-react'; +import type { StandaloneProduct } from '@/lib/constants/standalone-products'; + +interface StandaloneProductClientProps { + product: StandaloneProduct; +} + +const categoryIcons: Record = { + security: Shield, + 'specialized-software': Cpu, + hardware: HardDrive, +}; + +export function StandaloneProductClient({ product }: StandaloneProductClientProps) { + const theme = getHeroTheme(product.heroThemeId); + const Icon = categoryIcons[product.category] || Shield; + + return ( +
+ + + + + {product.status === 'coming-soon' ? ( +
+
+ +
+
+ +
+
+ +

产品即将上线

+

+ {product.title}正在紧张开发中，我们将为您带来更专业的{product.category === 'security' ? '安全防护' : product.category === 'specialized-software' ? '行业解决方案' : '硬件产品'}体验。 +

+ +
+ {product.previewFeatures.map((feature, index) => ( + +
+ +
+

{feature.title}

+

{feature.description}

+ + ))} +
+ + + + {product.expectedLaunch && ( +

+ 预计上线时间：{product.expectedLaunch} +

+ )} + +
+
+ ) : ( + <> +
+
+
+ +

核心能力

+
    + {(product.features ?? []).map((feature, index) => ( + + + {feature} + + ))} +
+ + + +

+ + 适用场景 +

+
+ {(product.useCases ?? []).map((useCase, index) => ( + +

{useCase.title}

+

{useCase.description}

+ + ))} +
+ +
+
+
+ + + + + + )} +
+ ); +} diff --git a/src/app/(marketing)/products/standalone/[id]/page.tsx b/src/app/(marketing)/products/standalone/[id]/page.tsx new file mode 100644 index 0000000..1f50902 --- /dev/null +++ b/src/app/(marketing)/products/standalone/[id]/page.tsx @@ -0,0 +1,37 @@ +import { Metadata } from 'next'; +import { notFound } from 'next/navigation'; +import { STANDALONE_PRODUCTS } from '@/lib/constants/standalone-products'; +import { StandaloneProductClient } from './client'; + +export async function generateStaticParams() { + return STANDALONE_PRODUCTS.map((product) => ({ + id: product.id, + })); +} + +export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise { + const { id } = await params; + const product = STANDALONE_PRODUCTS.find((p) => p.id === id); + + if (!product) { + return { + title: '产品未找到', + }; + } + + return { + title: `${product.title} - ${process.env.NEXT_PUBLIC_COMPANY_NAME || 'Novalon'}`, + description: product.description, + }; +} + +export default async function StandaloneProductPage({ params }: { params: Promise<{ id: string }> }) { + const { id } = await params; + const product = STANDALONE_PRODUCTS.find((p) => p.id === id); + + if (!product) { + notFound(); + } + + return ; +} diff --git a/src/app/(marketing)/services/[id]/client.tsx b/src/app/(marketing)/services/[id]/client.tsx index 90ebf3e..9791035 100644 --- a/src/app/(marketing)/services/[id]/client.tsx +++ b/src/app/(marketing)/services/[id]/client.tsx @@ -1,196 +1,57 @@ 'use client'; -import { StaticLink } from '@/components/ui/static-link'; -import { Button } from '@/components/ui/button'; -import { PageNav } from '@/components/layout/page-nav'; +import { getHeroTheme } from '@/lib/constants/hero-themes'; +import { getServiceCrossRefs } from '@/lib/constants/cross-references'; +import { DetailHeroV3 } from '@/components/detail-v2/detail-hero-v3'; +import { ServiceValueSectionV3 } from '@/components/detail-v2/service-value-v3'; +import { DetailTrustSectionV2 } from '@/components/detail-v2/detail-trust-section-v2'; +import { DetailCTASectionV2 } from '@/components/detail-v2/detail-cta-section-v2'; +import { CrossRecommendGrid } from '@/components/detail/detail-cross-recommend'; import { DetailSwipeNav } from '@/components/ui/detail-swipe-nav'; -import { - CheckCircle2, - TrendingUp, - Target, - Clock, - MessageCircle, - ArrowRight, -} from 'lucide-react'; -import { SERVICES } from '@/lib/constants'; +import type { Service } from '@/lib/constants/services'; interface ServiceDetailClientProps { - service: typeof SERVICES[number]; + service: Service; } -const challenges: Record = { - software: [ - { title: '需求不明确', description: '业务部门提不出清晰需求，开发团队反复返工' }, - { title: '技术选型困难', description: '技术栈更新快，不知道该选什么技术方案' }, - { title: '项目延期', description: '开发进度难以把控，上线时间一拖再拖' }, - { title: '维护成本高', description: '系统上线后问题不断，运维压力巨大' }, - ], - data: [ - { title: '数据孤岛', description: '各系统数据分散，无法整合分析' }, - { title: '决策盲区', description: '缺乏数据支撑，决策凭感觉' }, - { title: '报表滞后', description: '手工制作报表，时效性差' }, - { title: '价值难挖', description: '数据很多，但不知道怎么用' }, - ], - consulting: [ - { title: '方向不明', description: '数字化转型不知道从哪里入手' }, - { title: '技术债务', description: '历史系统包袱重，新技术难以引入' }, - { title: '人才短缺', description: '缺乏专业的技术规划和架构人才' }, - { title: '投入浪费', description: 'IT投入不少，但看不到明显效果' }, - ], - solutions: [ - { title: '行业壁垒', description: '不了解行业最佳实践，走弯路' }, - { title: '方案碎片化', description: '各系统各自为政，无法协同' }, - { title: '实施风险', description: '大型项目实施失败率高' }, - { title: '效果难量化', description: '投入产出比不清晰，难以评估' }, - ], -}; - -const outcomes: Record = { - software: [ - { value: '30%+', label: '预期开发效率提升' }, - { value: '50%+', label: '预期返工率降低' }, - { value: '严格', label: '交付质量把控' }, - ], - data: [ - { value: '实时', label: '数据更新' }, - { value: '自助式', label: '分析模式' }, - { value: '多维度', label: '可视化报表' }, - ], - consulting: [ - { value: '清晰', label: '转型方向规划' }, - { value: '系统化', label: '技术选型评估' }, - { value: '可落地', label: '实施路径设计' }, - ], - solutions: [ - { value: '标准化', label: '行业方案交付' }, - { value: '端到端', label: '全流程实施' }, - { value: '持续化', label: '运维优化支持' }, - ], -}; - export function ServiceDetailClient({ service }: ServiceDetailClientProps) { - const serviceChallenges = challenges[service.id] ?? []; - const serviceOutcomes = outcomes[service.id] ?? []; + const theme = getHeroTheme(service.heroThemeId); + const crossRefs = getServiceCrossRefs(service.id); return (
-
-
- -
-

Services

-

- {service.title} -

-

- {service.description} -

-
-
-
-
-
-
-
-
- -
-

您可能面临的挑战

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

{challenge.title}

-

{challenge.description}

-
- ))} -
-
+ {/* L1 - Hero 情感入口 (V3) */} + -
-
-
- -
-

我们如何帮助您

-
-

- {service.overview} -

-
- {service.features.map((feature, index) => ( -
- - {feature} -
- ))} -
-
+ {/* L2 - 价值理性支撑 (V3) */} + -
-
-
- -
-

服务流程

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

{step}

-
- ))} -
-
+ {/* L3 - 信任证明 (V2) */} + -
-
-
- -
-

您将获得的改变

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

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

-
-
+ {/* L4 - CTA转化 (V2) */} + -
- - - - - - -
-
-
+
); } diff --git a/src/app/(marketing)/services/page.tsx b/src/app/(marketing)/services/page.tsx index 401556e..3bbd10f 100644 --- a/src/app/(marketing)/services/page.tsx +++ b/src/app/(marketing)/services/page.tsx @@ -4,11 +4,12 @@ import { useState, useEffect } from 'react'; import { SERVICES } from '@/lib/constants'; import { StaticLink } from '@/components/ui/static-link'; import { Button } from '@/components/ui/button'; -import { ArrowRight, ArrowUpRight } from 'lucide-react'; +import { ArrowRight } from 'lucide-react'; import { motion } from 'framer-motion'; import { useReducedMotion } from '@/hooks/use-reduced-motion'; -import { PageNav } from '@/components/layout/page-nav'; import { LoadingState } from '@/components/ui/loading-state'; +import { ListPageHeroV3 } from '@/components/detail-v2/list-page-hero-v3'; +import { ServiceCardV3 } from '@/components/detail-v2/solution-service-card-v3'; export default function ServicesPage() { const shouldReduceMotion = useReducedMotion(); @@ -19,75 +20,72 @@ export default function ServicesPage() { const timer = setTimeout(() => setIsLoading(false), 500); return () => clearTimeout(timer); }, []); + return (
-
-
- - -

Services

-

- 服务 -

-

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

- -
-
+ {/* Hero 区域 (V3) */} + -
+
-
- {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]} - - ))} -
- - +
+ {SERVICES.map((service) => ( + ))}
-
+ {/* 服务流程概览 */} +
+
+ + 我们的服务流程 + + +
+ {[ + { step: '01', title: '需求分析', desc: '深入了解业务场景与痛点' }, + { step: '02', title: '方案设计', desc: '量身定制技术解决方案' }, + { step: '03', title: '敏捷交付', desc: '快速迭代，持续优化' }, + { step: '04', title: '持续支持', desc: '长期陪伴，随时响应' }, + ].map((item, index) => ( + +
+ {item.step} +
+

{item.title}

+

{item.desc}

+ + ))} +
+
+
+ +

准备开始您的数字化转型之旅？ diff --git a/src/app/(marketing)/solutions/[id]/client.tsx b/src/app/(marketing)/solutions/[id]/client.tsx index 00e6f97..5e119a1 100644 --- a/src/app/(marketing)/solutions/[id]/client.tsx +++ b/src/app/(marketing)/solutions/[id]/client.tsx @@ -1,151 +1,59 @@ 'use client'; -import { motion } from 'framer-motion'; -import { useReducedMotion } from '@/hooks/use-reduced-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 { DetailSwipeNav } from '@/components/ui/detail-swipe-nav'; +import { DetailHeroV3 } from '@/components/detail-v2/detail-hero-v3'; +import { SolutionValueSectionV3 } from '@/components/detail-v2/solution-value-v3'; +import { DetailTrustSectionV2 } from '@/components/detail-v2/detail-trust-section-v2'; +import { DetailCTASectionV2 } from '@/components/detail-v2/detail-cta-section-v2'; +import { CrossRecommendGrid } from '@/components/detail/detail-cross-recommend'; +import { getHeroTheme } from '@/lib/constants/hero-themes'; +import { getSolutionCrossRefs } from '@/lib/constants/cross-references'; 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) { - const shouldReduceMotion = useReducedMotion(); - const fadeUp = shouldReduceMotion ? {} : { initial: { opacity: 0, y: 20 } }; +export function SolutionDetailClient({ solution }: SolutionDetailClientProps) { + const theme = getHeroTheme(solution.heroThemeId || 'solution'); + const crossRefs = getSolutionCrossRefs(solution.id); + return (
-
-
- - -

- {solution.industry} -

-

- {solution.title} -

-

{solution.subtitle}

-

- {solution.description} -

- -
-
+ -
-
- -

- - 行业痛点 -

-
- {solution.challenges.map((challenge, index) => ( -
- - {challenge} -
- ))} -
- + {/* L1 - Hero 情感入口 (V3) */} + - -

- - 解决方案 -

-
- {solution.solutions.map((sol, index) => ( -
-
- {index + 1} -
-

{sol}

-
- ))} -
- + {/* L2 - 价值理性支撑 (V3) */} + - {relatedProducts.length > 0 && ( - -

- - 相关产品 -

-
- {relatedProducts.map((product) => ( - -
-

- {product.title} -

- {product.status && ( - - {product.status} - - )} -
-

- {product.description} -

- - ))} -
- - )} + {/* L3 - 信任证明 (V2) — 条件渲染：有案例/数据/资质时才显示 */} + -
- - -
-
-
+ {/* L4 - CTA转化 (V2) */} + + +
); } diff --git a/src/app/(marketing)/solutions/[id]/page.tsx b/src/app/(marketing)/solutions/[id]/page.tsx index ae974d0..49e30f1 100644 --- a/src/app/(marketing)/solutions/[id]/page.tsx +++ b/src/app/(marketing)/solutions/[id]/page.tsx @@ -1,7 +1,6 @@ import { Metadata } from 'next'; import { notFound } from 'next/navigation'; import { SOLUTIONS } from '@/lib/constants/solutions'; -import { PRODUCTS } from '@/lib/constants/products'; import { COMPANY_INFO } from '@/lib/constants'; import { SolutionDetailClient } from './client'; @@ -33,7 +32,5 @@ export default async function SolutionDetailPage({ params }: { params: Promise<{ notFound(); } - const relatedProducts = PRODUCTS.filter((p) => solution.relatedProducts.includes(p.id)); - - return ; + return ; } diff --git a/src/app/(marketing)/solutions/page.tsx b/src/app/(marketing)/solutions/page.tsx index 95d0483..6d9314d 100644 --- a/src/app/(marketing)/solutions/page.tsx +++ b/src/app/(marketing)/solutions/page.tsx @@ -1,83 +1,25 @@ 'use client'; -import { useState } from 'react'; -import { motion, AnimatePresence } from 'framer-motion'; +import { motion } from 'framer-motion'; import { useReducedMotion } from '@/hooks/use-reduced-motion'; import { StaticLink } from '@/components/ui/static-link'; -import { ArrowRight, Lightbulb, Cpu, Users, CheckCircle2, ChevronDown } from 'lucide-react'; +import { + Lightbulb, + Cpu, + Users, +} from 'lucide-react'; import { MethodologySection } from '@/components/sections/methodology-section'; import { CTASection } from '@/components/sections/cta-section'; -import { PageNav } from '@/components/layout/page-nav'; import { BreadcrumbSchema } from '@/components/seo/structured-data'; import { SwipeNavigation } from '@/hooks/use-swipe-gesture'; - -const modules = [ - { - icon: Lightbulb, - title: '数字化转型咨询', - subtitle: '参谋伙伴 — 帮您看清前路，迈对第一步', - paragraphs: [ - '数字化转型最大的成本，是走错方向的成本。', - '我们用行业智慧帮您洞察趋势，用理性分析帮您避开陷阱。', - '不堆砌概念，只帮您想清楚：该不该做、做什么、怎么做。', - ], - values: ['行业趋势洞察报告', '数字化转型成熟度评估', '个性化实施路径规划'], - cta: '预约一次免费诊断', - ctaHref: '/contact', - accentColor: 'var(--color-brand-primary)', - accentBg: 'var(--color-brand-primary-bg)', - accentBorder: 'border-l-[var(--color-brand-primary)]', - }, - { - icon: Cpu, - title: '信息技术解决方案', - subtitle: '技术伙伴 — 让技术真正为业务服务', - paragraphs: [ - '我们不追逐"最火"的技术，只选择"最对"的技术。', - '将前沿技术深度融入您的业务场景，让每一行代码都产生业务价值。', - '您不必懂技术原理，只需要看见业务在增长。', - ], - values: ['业务场景深度调研', '技术方案定制开发', '敏捷交付快速迭代'], - cta: '了解技术方案', - ctaHref: '/products', - accentColor: 'var(--color-accent-blue)', - accentBg: 'rgba(37, 99, 235, 0.08)', - accentBorder: 'border-l-[var(--color-accent-blue)]', - }, - { - icon: Users, - title: '长期陪跑服务', - subtitle: '同行伙伴 — 从需求到落地，持续陪伴', - paragraphs: [ - '当产品真正为您所用那天，才是我们成为伙伴的开始。', - '我们建立长效服务机制，定期回访、持续优化、随时响应。', - '在您需要的时候，我们始终在场。', - ], - values: ['专属客户成功经理', '季度业务复盘会', '7×24小时响应通道'], - cta: '了解陪跑服务', - ctaHref: '/services', - accentColor: 'var(--color-success)', - accentBg: 'rgba(22, 163, 74, 0.08)', - accentBorder: 'border-l-[var(--color-success)]', - }, -]; +import { ListPageHeroV3 } from '@/components/detail-v2/list-page-hero-v3'; +import { SolutionCardV3 } from '@/components/detail-v2/solution-service-card-v3'; +import { SOLUTIONS } from '@/lib/constants/solutions'; export default function SolutionsPage() { const shouldReduceMotion = useReducedMotion(); const fadeUp = shouldReduceMotion ? {} : { initial: { opacity: 0, y: 20 } }; - const [expandedModules, setExpandedModules] = useState>(new Set([0])); - const toggleModule = (index: number) => { - setExpandedModules(prev => { - const next = new Set(prev); - if (next.has(index)) { - next.delete(index); - } else { - next.add(index); - } - return next; - }); - }; return (
@@ -87,118 +29,77 @@ export default function SolutionsPage() { prevLabel="产品方案" nextLabel="服务支持" /> -
+ + {/* Hero 区域 (V3) */} + + + {/* 行业解决方案网格 */} +
- - -

Solutions

-

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

-

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

- +
+ {SOLUTIONS.map((solution) => ( + + ))} +
-
+ {/* 方案→服务关联推荐 */} +
-
- {modules.map((module, index) => { - const anchorIds = ['consulting', 'tech', 'accompany']; - return ( - +

+ 从方案到落地，全程陪伴 +

+

+ 我们不仅提供行业解决方案，更通过专业服务确保方案真正落地见效 +

+ + +
+ {[ + { icon: Lightbulb, title: '数字化转型咨询', desc: '帮您看清前路，迈对第一步', href: '/services', bgColor: 'rgba(196,30,58,0.06)', color: '#C41E3A' }, + { icon: Cpu, title: '信息技术解决方案', desc: '让技术真正为业务服务', href: '/products', bgColor: 'rgba(37,99,235,0.06)', color: '#2563eb' }, + { icon: Users, title: '长期陪跑服务', desc: '从需求到落地，持续陪伴', href: '/services', bgColor: 'rgba(22,163,74,0.06)', color: '#16a34a' }, + ].map((item, i) => ( + -
-
- -
-
-

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

-

{module.subtitle}

-
-
- -
- - - {expandedModules.has(index) && ( - - {module.paragraphs.map((p, i) => ( -

{p}

- ))} - - )} - -
- -
-

- - 核心价值点 + +

+

+ {item.title}

-
- {module.values.map((value, i) => ( -
-
- {value} -
- ))} -
-
- -
- { - e.currentTarget.style.backgroundColor = module.accentColor; - e.currentTarget.style.color = '#fff'; - }} - onMouseLeave={(e) => { - e.currentTarget.style.backgroundColor = 'transparent'; - e.currentTarget.style.color = module.accentColor; - }} - > - {module.cta} - - -
- - ); - })} +

{item.desc}

+ + + ))}