feat: V2/V3组件体系与水墨雅致视觉改造

- 新增detail-v2组件库(HeroV2/V3, TrustSectionV2, CTASectionV2等)
- Hero组件水墨雅致改造:浅色宣纸底/深色墨色文字/墨韵纹理
- 方案卡片添加推荐组合徽标(Package图标)
- 独立产品页从V1组件迁移到V2/V3
- 修复why-us-section未使用导入和ESLint引号转义错误

src/components/sections/cta-section.tsx

@@ -4,8 +4,7 @@ import { useRef, useState } from 'react';
 import { motion, useMotionValue, useSpring, useTransform } from 'framer-motion';
 import { StaticLink } from '@/components/ui/static-link';
 import { Button } from '@/components/ui/button';
-import { ArrowRight, Sparkles } from 'lucide-react';
-import { COMPANY_INFO } from '@/lib/constants';
+import { ArrowRight, Sparkles, MessageCircle, Clock, ShieldCheck } from 'lucide-react';
 import { useReducedMotion } from '@/hooks/use-reduced-motion';
 
 interface CTASectionProps {
@@ -18,12 +17,12 @@ interface CTASectionProps {
 }
 
 export function CTASection({
-  title = '开启您的数字化转型之旅',
-  description = `与${COMPANY_INFO.shortName}一起，让技术成为您业务增长的核心引擎`,
-  primaryLabel = '开启数字化转型之旅',
+  title = '一起聊聊您的数字化需求',
+  description = `无论您处于数字化转型的哪个阶段，我们都愿意坐下来一起想办法。首次咨询免费，无任何销售压力。`,
+  primaryLabel = '预约免费咨询',
   primaryHref = '/contact',
-  secondaryLabel = '了解方案',
-  secondaryHref = '/solutions',
+  secondaryLabel = '了解我们的方法',
+  secondaryHref = '/team',
 }: CTASectionProps) {
   const shouldReduceMotion = useReducedMotion();
   const containerRef = useRef<HTMLDivElement>(null);
@@ -94,19 +93,36 @@ export function CTASection({
             className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/5 border border-white/10 mb-8"
           >
             <Sparkles className="w-3.5 h-3.5 text-[var(--color-brand-primary)]" />
-            <span className="text-sm font-medium text-white/80">开始合作</span>
+            <span className="text-sm font-medium text-white/80">开始对话</span>
           </motion.div>
 
           <h2 className="text-4xl sm:text-5xl lg:text-6xl font-semibold text-white mb-6 tracking-tight leading-tight">
             {title}
           </h2>
-          <p className="text-lg md:text-xl text-white/65 leading-relaxed mb-12 max-w-2xl mx-auto">
+          <p className="text-lg md:text-xl text-white/65 leading-relaxed mb-10 max-w-2xl mx-auto">
             {description}
           </p>
+
+          <div className="flex flex-wrap items-center justify-center gap-3 mb-10">
+            <div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-white/5 border border-white/10 text-white/60 text-xs">
+              <MessageCircle className="w-3.5 h-3.5" />
+              <span>免费咨询</span>
+            </div>
+            <div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-white/5 border border-white/10 text-white/60 text-xs">
+              <Clock className="w-3.5 h-3.5" />
+              <span>30 分钟内响应</span>
+            </div>
+            <div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-white/5 border border-white/10 text-white/60 text-xs">
+              <ShieldCheck className="w-3.5 h-3.5" />
+              <span>无销售压力</span>
+            </div>
+          </div>
+
           <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
             <Button size="lg" asChild className="group relative overflow-hidden">
               <StaticLink href={primaryHref}>
                 <span className="relative z-10 flex items-center">
+                  <MessageCircle className="w-4 h-4 mr-2" />
                   {primaryLabel}
                   <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
                 </span>

src/components/sections/product-matrix-section.tsx

@@ -23,12 +23,18 @@ export function ProductMatrixSection() {
               产品矩阵
             </h2>
             <p className="text-base text-[var(--color-text-muted)] max-w-lg">
-              覆盖企业数字化全场景，从管理到决策，一站式解决方案规划
+              6 款自研产品覆盖企业数字化全场景，目前全部<span className="text-[var(--color-brand-primary)] font-medium">研发中</span>，欢迎提前了解规划
             </p>
           </div>
-          <span className="text-sm text-[var(--color-text-subtle)] font-mono tracking-wider hidden md:block">
-            {PRODUCTS.length} PRODUCTS
-          </span>
+          <div className="flex items-center gap-2">
+            <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)] text-xs font-medium border border-[var(--color-brand-primary)]/10">
+              <span className="w-1.5 h-1.5 rounded-full bg-[var(--color-brand-primary)] animate-pulse" />
+              研发中 · 即将上线
+            </span>
+            <span className="text-sm text-[var(--color-text-subtle)] font-mono tracking-wider hidden md:block">
+              {PRODUCTS.length} PRODUCTS
+            </span>
+          </div>
         </motion.div>
 
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">

src/components/sections/why-us-section.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { StaticLink } from '@/components/ui/static-link';
+import { Button } from '@/components/ui/button';
+import { Shield, Building2, Users, Code, Target, ArrowRight } from 'lucide-react';
+import { useReducedMotion } from '@/hooks/use-reduced-motion';
+
+const TRUST_PILLARS = [
+  {
+    icon: Shield,
+    title: '12年+ 行业深耕',
+    description: '核心团队长期从事技术咨询、企业数字化，服务覆盖金融、制造、零售、政务等多个行业',
+    stat: '12+',
+    statLabel: '年行业经验',
+  },
+  {
+    icon: Building2,
+    title: '大型 IT 企业背景',
+    description: '开发团队来自多个大型传统 IT 企业，具备扎实的工程能力和规范化交付经验',
+    stat: '10+',
+    statLabel: '人核心团队',
+  },
+  {
+    icon: Users,
+    title: '复合型技术团队',
+    description: '既懂技术又懂业务，深入理解客户真实场景，提供真正可落地的解决方案',
+    stat: '6',
+    statLabel: '款自研产品',
+  },
+  {
+    icon: Code,
+    title: '全栈技术能力',
+    description: '从前端到后端、云原生到数据智能、移动端到物联网的全栈技术能力',
+    stat: '5+',
+    statLabel: '个覆盖行业',
+  },
+  {
+    icon: Target,
+    title: '结果导向交付',
+    description: '不以"项目上线"为终点，以"客户业务是否真正改善"为衡量标准',
+    stat: '100%',
+    statLabel: '项目交付率',
+  },
+];
+
+export function WhyUsSection() {
+  const shouldReduceMotion = useReducedMotion();
+
+  return (
+    <section id="why-us" className="relative py-20 md:py-28 bg-[var(--color-bg-section)] overflow-hidden">
+      <div className="container-wide">
+        <motion.div
+          initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: '-100px' }}
+          transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
+          className="text-center max-w-3xl mx-auto mb-14"
+        >
+          <div className="flex items-center justify-center gap-4 mb-4">
+            <div className="h-px flex-1 max-w-[80px] bg-[var(--color-border-primary)]" />
+            <span className="text-xs font-mono tracking-widest text-[var(--color-text-subtle)]">WHY US</span>
+            <div className="h-px flex-1 max-w-[80px] bg-[var(--color-border-primary)]" />
+          </div>
+          <h2 className="text-3xl sm:text-4xl font-semibold text-[var(--color-text-primary)] mb-4">
+            为什么选择<span className="text-[var(--color-brand-primary)] font-calligraphy">我们</span>
+          </h2>
+          <p className="text-base text-[var(--color-text-muted)] max-w-xl mx-auto">
+            我们不是一家&ldquo;做完就跑&rdquo;的外包公司，而是愿意与您一起成长的数字化转型同行者
+          </p>
+        </motion.div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 mb-16">
+          {TRUST_PILLARS.slice(0, 5).map((pillar, idx) => {
+            const Icon = pillar.icon;
+            return (
+              <motion.div
+                key={pillar.title}
+                initial={shouldReduceMotion ? {} : { opacity: 0, y: 24, scale: 0.96 }}
+                whileInView={{ opacity: 1, y: 0, scale: 1 }}
+                viewport={{ once: true, margin: '-60px' }}
+                transition={{ duration: 0.5, delay: idx * 0.08, ease: [0.16, 1, 0.3, 1] }}
+                className="relative group p-6 md:p-8 rounded-2xl bg-[var(--color-bg-primary)] border border-[var(--color-border-primary)] hover:border-[rgba(var(--color-brand-primary-rgb),0.25)] transition-all duration-300"
+              >
+                <div className="flex items-start justify-between mb-4">
+                  <div className="w-11 h-11 rounded-xl bg-[var(--color-brand-primary-bg)] flex items-center justify-center">
+                    <Icon className="w-5 h-5 text-[var(--color-brand-primary)]" strokeWidth={1.8} />
+                  </div>
+                  <div className="text-right">
+                    <div className="text-2xl font-bold text-[var(--color-brand-primary)] leading-none">{pillar.stat}</div>
+                    <div className="text-[10px] text-[var(--color-text-subtle)] mt-0.5">{pillar.statLabel}</div>
+                  </div>
+                </div>
+                <h3 className="text-base font-semibold text-[var(--color-text-primary)] mb-2">{pillar.title}</h3>
+                <p className="text-sm text-[var(--color-text-muted)] leading-relaxed">{pillar.description}</p>
+              </motion.div>
+            );
+          })}
+        </div>
+
+        <motion.div
+          initial={shouldReduceMotion ? {} : { opacity: 0, y: 16 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: '-80px' }}
+          transition={{ duration: 0.5, delay: 0.3, ease: [0.16, 1, 0.3, 1] }}
+          className="text-center"
+        >
+          <p className="text-sm text-[var(--color-text-muted)] mb-6">想深入了解我们的团队能力？</p>
+          <Button variant="outline" asChild className="group">
+            <StaticLink href="/team">
+              了解核心团队
+              <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
+            </StaticLink>
+          </Button>
+        </motion.div>
+      </div>
+    </section>
+  );
+}