feat: 营销页面HSI架构改造与四层叙事对齐

- 产品页:双区展示(企业套装+专业产品),分类筛选,统计数据更新
- 方案页:删除服务方式区域,替换为轻量关联推荐卡片
- 方案详情页:添加L3信任层条件渲染,使用V3 Hero+V2 CTA
- 独立产品页:从V1组件迁移到V2/V3
- 服务页:视觉升级与组件更新
- 首页:产品矩阵和CTA区域优化

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 (
     <div className="min-h-screen bg-[var(--color-bg-primary)]">
-      <section className="pt-32 pb-16">
-        <div className="container-wide">
-          <PageNav items={[{ label: '服务' }]} />
-          <motion.div
-            {...fadeUp}
-            animate={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
-            transition={{ duration: 0.5 }}
-            className="max-w-3xl"
-          >
-            <p className="text-sm font-medium text-[var(--color-brand-primary)] mb-4 tracking-wide uppercase">Services</p>
-            <h1 className="text-4xl md:text-5xl font-bold text-[var(--color-text-primary)] mb-6 tracking-tight">
-              服务
-            </h1>
-            <p className="text-lg text-[var(--color-text-muted)] leading-relaxed">
-              专业技术团队，为您提供全方位的数字化解决方案
-            </p>
-          </motion.div>
-        </div>
-      </section>
+      {/* Hero 区域 (V3) */}
+      <ListPageHeroV3
+        title="专业服务"
+        subtitle="从咨询规划到落地实施，全生命周期数字化支持"
+        description="提供咨询、开发、数据、解决方案等全方位服务"
+        stats={[
+          { value: '4', label: '服务类型' },
+          { value: '7×24', label: '响应时间' },
+          { value: '100%', label: '客户满意' },
+        ]}
+      />
 
-      <section className="pb-20">
+      <section className="pb-16">
         <div className="container-wide">
           <LoadingState isLoading={isLoading} variant="card">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-              {SERVICES.map((service, index) => (
-                <motion.div
-                  key={service.id}
-                  {...fadeUp}
-                  whileInView={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
-                  viewport={{ once: true }}
-                  transition={{ duration: 0.4, delay: index * 0.1, ease: [0.16, 1, 0.3, 1] }}
-                >
-                  <StaticLink
-                    href={`/services/${service.id}`}
-                    className="group block p-6 rounded-xl border border-[var(--color-border-primary)] bg-[var(--color-bg-primary)] hover:border-[var(--color-brand-primary)]/40 hover:shadow-lg transition-all duration-300 h-full"
-                  >
-                    <div className="flex items-start justify-between mb-4">
-                      <span className="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)] text-sm font-bold">
-                        {String(index + 1).padStart(2, '0')}
-                      </span>
-                      <ArrowUpRight className="w-5 h-5 text-[var(--color-text-muted)] group-hover:text-[var(--color-brand-primary)] transition-colors" />
-                    </div>
-                    <h3 className="text-lg font-semibold text-[var(--color-text-primary)] mb-2 group-hover:text-[var(--color-brand-primary)] transition-colors">
-                      {service.title}
-                    </h3>
-                    <p className="text-sm text-[var(--color-text-muted)] leading-relaxed mb-4">
-                      {service.description}
-                    </p>
-                    <div className="flex flex-wrap gap-1.5">
-                      {service.features.slice(0, 3).map((feature, idx) => (
-                        <span
-                          key={idx}
-                          className="inline-flex items-center text-xs px-2 py-1 bg-[var(--color-bg-tertiary)] text-[var(--color-text-muted)] rounded"
-                        >
-                          {feature.split('：')[0]}
-                        </span>
-                      ))}
-                    </div>
-                  </StaticLink>
-                </motion.div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+              {SERVICES.map((service) => (
+                <ServiceCardV3 key={service.id} service={service} />
               ))}
             </div>
           </LoadingState>
         </div>
       </section>
 
-      <section className="bg-[var(--color-bg-tertiary)] py-20">
+      {/* 服务流程概览 */}
+      <section className="bg-gray-50/50 py-16">
+        <div className="container-wide">
+          <motion.h2
+            {...fadeUp}
+            whileInView={{ opacity: 1 }}
+            viewport={{ once: true }}
+            className="mb-10 max-w-2xl text-center text-2xl font-bold text-gray-900 lg:text-3xl"
+          >
+            我们的服务流程
+          </motion.h2>
+
+          <div className="mx-auto grid max-w-4xl grid-cols-1 gap-8 md:grid-cols-4">
+            {[
+              { step: '01', title: '需求分析', desc: '深入了解业务场景与痛点' },
+              { step: '02', title: '方案设计', desc: '量身定制技术解决方案' },
+              { step: '03', title: '敏捷交付', desc: '快速迭代，持续优化' },
+              { step: '04', title: '持续支持', desc: '长期陪伴，随时响应' },
+            ].map((item, index) => (
+              <motion.div
+                key={item.step}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.4, delay: index * 0.1 }}
+                className="text-center"
+              >
+                <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-[#C41E3A] text-lg font-bold text-white shadow-md">
+                  {item.step}
+                </div>
+                <h3 className="mb-2 text-base font-semibold text-gray-900">{item.title}</h3>
+                <p className="text-sm text-gray-500">{item.desc}</p>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="py-20">
         <div className="container-wide text-center">
           <h2 className="text-3xl font-bold text-[var(--color-text-primary)] mb-6">
             准备开始您的数字化转型之旅？