feat(content): deepen Bain differentiation across product, solution and service pages

- Replace decorative numbering and side-stripe borders with structured copy
- Add scenario positioning, capability metrics and verifiable dimensions
- Refine service timelines, deliverables and case-study narratives
- Update content constants to support CMS seeding

src/app/(marketing)/services/services-content-v3.tsx

@@ -1,48 +1,53 @@
 'use client';
 
 import { motion } from 'framer-motion';
-import { ArrowUpRight, Code, BarChart3, Lightbulb, Puzzle, type LucideIcon } from 'lucide-react';
+import { ArrowUpRight, CheckCircle2 } from 'lucide-react';
 import type { Service } from '@/lib/constants/services';
 
 const EASE_OUT = [0.22, 1, 0.36, 1] as const;
 
-/** Icon name-to-component mapping for CMS string-based icons */
-const ICON_MAP: Record<string, LucideIcon> = {
-  Lightbulb,
-  Code,
-  BarChart3,
-  Puzzle,
-};
-
 /** UI metadata keyed by service ID — presentation-only fields not stored in CMS */
-const SERVICE_UI_META: Record<string, { subtitle: string; metrics: { value: string; label: string }[] }> = {
-  consulting: { subtitle: 'Strategy Consulting', metrics: [{ value: '90%+', label: '方案落地率' }, { value: '50+', label: '咨询项目' }] },
-  software: { subtitle: 'Enterprise Software', metrics: [{ value: '95%+', label: '准时交付率' }, { value: 'A+', label: '代码质量' }] },
-  data: { subtitle: 'Technology Services', metrics: [{ value: '100+', label: '技术方案' }, { value: '24/7', label: '运维支持' }] },
-  solutions: { subtitle: 'AI Empowerment', metrics: [{ value: '30+', label: 'AI 场景' }, { value: '85%', label: '效率提升' }] },
+const SERVICE_UI_META: Record<string, { metrics: { value: string; label: string }[] }> = {
+  consulting: { metrics: [{ value: '90%+', label: '方案落地率' }, { value: '50+', label: '咨询项目' }] },
+  software: { metrics: [{ value: '95%+', label: '准时交付率' }, { value: 'A+', label: '代码质量' }] },
+  data: { metrics: [{ value: '100+', label: '技术方案' }, { value: '24/7', label: '运维支持' }] },
+  solutions: { metrics: [{ value: '30+', label: 'AI 场景' }, { value: '85%', label: '效率提升' }] },
 };
 
 function mapServicesToCards(services: Service[]) {
-  return services.map((svc, i) => {
+  return services.map((svc) => {
     const uiMeta = SERVICE_UI_META[svc.id];
     return {
-      number: String(i + 1).padStart(2, '0'),
+      id: svc.id,
       title: svc.title,
-      subtitle: uiMeta?.subtitle ?? '',
-      desc: svc.description,
-      href: `/services/${svc.id}`,
-      icon: ICON_MAP[svc.icon] ?? Lightbulb,
-      highlights: svc.features?.slice(0, 4) ?? [],
+      description: svc.description,
+      capabilities: svc.capabilities?.slice(0, 4) ?? [],
       metrics: uiMeta?.metrics ?? [],
     };
   });
 }
 
 const SERVICE_PROCESS = [
-  { step: '01', title: '需求分析', desc: '深入了解业务场景与真实痛点，而非凭空假设' },
-  { step: '02', title: '方案设计', desc: '量身定制技术路线，拒绝千篇一律的模板' },
-  { step: '03', title: '敏捷交付', desc: '快速迭代，每个冲刺周期都有可交付成果' },
-  { step: '04', title: '持续支持', desc: '上线不是终点，长期陪伴才是真正的承诺' },
+  {
+    phase: '需求分析',
+    duration: '2-3 周',
+    deliverables: ['业务痛点清单', '现状评估报告', '项目范围说明书'],
+  },
+  {
+    phase: '方案设计',
+    duration: '4-6 周',
+    deliverables: ['系统架构设计', '实施路线图', '投资测算模型'],
+  },
+  {
+    phase: '敏捷交付',
+    duration: '3-6 个月',
+    deliverables: ['分阶段上线版本', '用户培训材料', '数据迁移方案'],
+  },
+  {
+    phase: '持续支持',
+    duration: '长期',
+    deliverables: ['运维监控体系', '迭代优化计划', '知识转移文档'],
+  },
 ];
 
 const SERVICE_MODES = [
@@ -68,20 +73,11 @@ function HeroSection() {
     <section className="relative min-h-[85vh] flex items-center overflow-hidden bg-white">
       <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-28 sm:py-36 md:py-44 lg:py-56">
         <div className="max-w-4xl">
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.8, delay: 0.1, ease: EASE_OUT }}
-            className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-8"
-          >
-            Professional Services
-          </motion.div>
-
           <motion.h1
             initial={{ opacity: 0, y: 40 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 1, delay: 0.2, ease: EASE_OUT }}
-            className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black text-ink leading-[0.88] tracking-tightest mb-10 sm:mb-12 md:mb-16"
+            className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black text-ink leading-[0.92] tracking-tightest mb-10 sm:mb-12 md:mb-16"
           >
             <div className="block">从规划到运维</div>
             <div className="block mt-4 sm:mt-6">
@@ -189,82 +185,56 @@ function ServicesGridSection({ services }: { services?: Service[] }) {
           transition={{ duration: 0.8, ease: EASE_OUT }}
           className="max-w-3xl mb-16 sm:mb-20 md:mb-24"
         >
-          <div className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-6">
-            Service Capabilities
-          </div>
           <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-ink tracking-tight leading-[0.95]">
             四大核心服务，<br className="sm:hidden" />覆盖数字化全链路
           </h2>
         </motion.div>
 
         <div className="grid md:grid-cols-2 gap-px bg-border-primary">
-          {displayServices.map((service, i) => {
-            const Icon = service.icon;
-            return (
-              <motion.a
-                key={i}
-                href={service.href}
-                initial={{ opacity: 0, y: 30 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true, margin: '-60px' }}
-                transition={{ duration: 0.6, delay: i * 0.08, ease: EASE_OUT }}
-                className="group relative block p-8 sm:p-10 md:p-12 transition-all duration-500 hover:bg-bg-secondary bg-white border border-transparent hover:border-border-primary"
-              >
-                <div className="absolute top-0 left-0 h-0 w-[2px] group-hover:h-full transition-all duration-500 origin-top bg-brand" />
+          {displayServices.map((service, i) => (
+            <motion.a
+              key={service.id}
+              href={`/services/${service.id}`}
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, margin: '-60px' }}
+              transition={{ duration: 0.6, delay: i * 0.08, ease: EASE_OUT }}
+              className="group relative block p-8 sm:p-10 md:p-12 transition-all duration-500 hover:bg-bg-secondary hover:shadow-lg hover:-translate-y-1 bg-white border border-transparent hover:border-border-primary"
+            >
+              <div className="relative z-10">
+                <h3 className="text-xl sm:text-2xl font-bold text-ink group-hover:text-brand transition-colors duration-300 mb-3">
+                  {service.title}
+                </h3>
 
-                <div className="relative z-10">
-                  <div className="flex items-start justify-between mb-8">
-                    <div className={`w-12 h-12 flex items-center justify-center ${
-                      i === 0 ? 'text-brand' : 'text-text-secondary'
-                    }`}>
-                      <Icon className="w-6 h-6" strokeWidth={1.5} />
+                <p className="text-text-secondary leading-relaxed mb-6 text-[15px]">
+                  {service.description}
+                </p>
+
+                <ul className="space-y-2 mb-6">
+                  {service.capabilities.map((cap) => (
+                    <li key={cap} className="flex items-start gap-2 text-sm text-text-secondary">
+                      <CheckCircle2 className="w-4 h-4 text-brand shrink-0 mt-0.5" />
+                      {cap}
+                    </li>
+                  ))}
+                </ul>
+
+                <div className="flex gap-6 pt-5 border-t border-border-primary mb-6">
+                  {service.metrics.map((m) => (
+                    <div key={m.label}>
+                      <div className="text-xl font-bold text-ink">{m.value}</div>
+                      <div className="text-xs text-text-muted mt-1">{m.label}</div>
                     </div>
-                    <span className="text-5xl sm:text-6xl font-black text-ink/[0.04] tracking-tighter leading-none">
-                      {service.number}
-                    </span>
-                  </div>
-
-                  <div className="mb-6">
-                    <div className="text-[11px] tracking-[0.3em] uppercase text-text-muted mb-3 font-semibold">
-                      {service.subtitle}
-                    </div>
-                    <h3 className="text-xl sm:text-2xl md:text-3xl font-bold text-ink group-hover:text-brand transition-colors duration-300">
-                      {service.title}
-                    </h3>
-                  </div>
-
-                  <p className="text-text-secondary leading-relaxed mb-6 text-[15px]">
-                    {service.desc}
-                  </p>
-
-                  <div className="flex flex-wrap gap-2 mb-6">
-                    {service.highlights.map((h, j) => (
-                      <span
-                        key={j}
-                        className="px-3 py-1 text-xs text-text-secondary border border-border-primary group-hover:border-ink/20 group-hover:text-ink transition-all duration-300 font-medium"
-                      >
-                        {h}
-                      </span>
-                    ))}
-                  </div>
-
-                  <div className="flex items-center gap-8 pt-5 border-t border-border-primary mb-6">
-                    {service.metrics.map((m, j) => (
-                      <div key={j}>
-                        <div className="text-xl font-bold text-ink">{m.value}</div>
-                        <div className="text-xs text-text-muted mt-1">{m.label}</div>
-                      </div>
-                    ))}
-                  </div>
-
-                  <div className="inline-flex items-center gap-2 text-sm font-semibold text-text-secondary group-hover:text-brand transition-colors duration-300">
-                    <span>了解详情</span>
-                    <ArrowUpRight className="w-4 h-4 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-300" />
-                  </div>
+                  ))}
                 </div>
-              </motion.a>
-            );
-          })}
+
+                <div className="inline-flex items-center gap-2 text-sm font-semibold text-text-secondary group-hover:text-brand transition-colors duration-300">
+                  <span>了解详情</span>
+                  <ArrowUpRight className="w-4 h-4 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-300" />
+                </div>
+              </div>
+            </motion.a>
+          ))}
         </div>
       </div>
     </section>
@@ -284,33 +254,26 @@ function ProcessModesSection() {
             transition={{ duration: 0.8, ease: EASE_OUT }}
             className="lg:col-span-7"
           >
-            <div className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-6">
-              Our Process
-            </div>
             <h2 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-ink tracking-tight leading-[0.95] mb-10 sm:mb-14">
               我们的做事方式
             </h2>
 
-            <div className="space-y-0">
-              {SERVICE_PROCESS.map((item, idx) => (
-                <div
-                  key={item.step}
-                  className="relative pl-8 sm:pl-12 pb-8 sm:pb-10 last:pb-0"
-                >
-                  <div className="absolute left-0 top-3 bottom-0 w-px bg-border-primary last:hidden" />
-                  <div className={`absolute left-0 top-3 w-2.5 h-2.5 rounded-full -translate-x-1/2 ${
-                    idx === 0 ? 'bg-brand' : 'bg-text-muted'
-                  }`} />
+            <div className="relative">
+              {SERVICE_PROCESS.map((step) => (
+                <div key={step.phase} className="relative pl-8 sm:pl-12 pb-10 sm:pb-12 last:pb-0">
+                  <div className="absolute left-0 top-1.5 bottom-0 w-px bg-border-primary last:hidden" />
+                  <div className="absolute left-0 top-1.5 w-2.5 h-2.5 rounded-full -translate-x-1/2 bg-brand" />
 
-                  <div className="flex items-start gap-6">
-                    <div className="text-2xl sm:text-3xl font-black text-ink/[0.06] font-mono shrink-0 leading-none w-14">
-                      {item.step}
-                    </div>
-                    <div className="flex-1">
-                      <h3 className="text-lg sm:text-xl font-bold text-ink mb-2">{item.title}</h3>
-                      <p className="text-text-secondary leading-relaxed text-sm sm:text-base">{item.desc}</p>
-                    </div>
+                  <div className="flex items-center gap-3 mb-3">
+                    <h3 className="text-lg sm:text-xl font-bold text-ink">{step.phase}</h3>
+                    <span className="text-xs text-text-muted">{step.duration}</span>
                   </div>
+                  <div className="text-xs text-text-muted mb-2">阶段产出</div>
+                  <ul className="space-y-1">
+                    {step.deliverables.map((d) => (
+                      <li key={d} className="text-sm text-text-secondary">{d}</li>
+                    ))}
+                  </ul>
                 </div>
               ))}
             </div>
@@ -324,9 +287,6 @@ function ProcessModesSection() {
             transition={{ duration: 0.8, delay: 0.15, ease: EASE_OUT }}
             className="lg:col-span-5"
           >
-            <div className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-6">
-              Engagement Models
-            </div>
             <h2 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-ink tracking-tight leading-[0.95] mb-10 sm:mb-14">
               合作方式
             </h2>
@@ -335,10 +295,8 @@ function ProcessModesSection() {
               {SERVICE_MODES.map((mode) => (
                 <div
                   key={mode.title}
-                  className="group relative p-6 sm:p-7 border border-border-primary bg-white hover:bg-bg-secondary hover:border-ink/20 transition-all duration-300"
+                  className="group relative p-6 sm:p-7 border border-border-primary bg-white hover:bg-bg-secondary hover:border-brand/20 hover:shadow-md transition-all duration-300"
                 >
-                  <div className="absolute top-0 left-0 w-1 h-0 bg-brand group-hover:h-full transition-all duration-500" />
-
                   <div className="relative z-10">
                     <h3 className="text-xl font-bold text-ink mb-3 group-hover:text-brand transition-colors duration-300">
                       {mode.title}