feat(website): 三轮视觉改造与页面过渡动画

改造概要（30项）：
- 第一轮：Hero重构/Section差异化/SocialProof强化/CTA对比度/About架构
- 第二轮：字体优化/背景交替/Solutions差异化/Footer五列/MegaDropdown修复
- 第三轮：卡片交互/表单层级/CTA统一/时间线标记/连接线/三列布局/移动导航/Button微交互/SEO Schema
- P3-2：template.tsx+Framer Motion页面过渡/loading.tsx加载状态
- 清理：删除未用组件/hooks，修复重复移动导航，清理冗余CSS

src/components/sections/hero-section-v2.tsx

@@ -1,101 +1,198 @@
 'use client';
 
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { motion } from 'framer-motion';
 import { StaticLink } from '@/components/ui/static-link';
 import { Button } from '@/components/ui/button';
 import { COMPANY_INFO } from '@/lib/constants';
-import { ArrowRight } from 'lucide-react';
+import { ArrowRight, MessageSquare, Search, Rocket, Handshake } from 'lucide-react';
 import { useReducedMotion } from '@/hooks/use-reduced-motion';
 
+const EASE = [0.16, 1, 0.3, 1] as const;
+
+const CAPABILITIES = [
+  { icon: MessageSquare, label: '需求沟通' },
+  { icon: Search, label: '方案诊断' },
+  { icon: Rocket, label: '敏捷交付' },
+  { icon: Handshake, label: '长期陪跑' },
+];
+
+const JOURNEY_STEPS = [
+  { icon: MessageSquare, label: '需求沟通', desc: '深入理解您的业务痛点' },
+  { icon: Search, label: '方案诊断', desc: '量身定制技术路径' },
+  { icon: Rocket, label: '敏捷交付', desc: '快速迭代持续验证' },
+  { icon: Handshake, label: '长期陪跑', desc: '持续优化保障落地' },
+];
+
 export function HeroSectionV2() {
-  const [isVisible, setIsVisible] = useState(false);
-  const sectionRef = useRef<HTMLElement>(null);
+  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
+  const [isCardHovered, setIsCardHovered] = useState(false);
+  const cardRef = useRef<HTMLDivElement>(null);
   const shouldReduceMotion = useReducedMotion();
 
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry?.isIntersecting) {
-          setIsVisible(true);
-        }
-      },
-      { threshold: 0.1 }
-    );
-
-    if (sectionRef.current) {
-      observer.observe(sectionRef.current);
-    }
-
-    return () => observer.disconnect();
+  const handleCardMouseMove = useCallback((e: React.MouseEvent) => {
+    if (!cardRef.current) { return; }
+    const rect = cardRef.current.getBoundingClientRect();
+    setMousePos({
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top,
+    });
   }, []);
 
-  const fadeUp = {
+  const fadeUp = (delay: number) => ({
     initial: shouldReduceMotion ? {} : { opacity: 0, y: 24 },
-    animate: isVisible ? { opacity: 1, y: 0 } : {},
-  };
+    animate: { opacity: 1, y: 0 },
+    transition: { duration: 0.5, delay, ease: EASE },
+  });
 
   return (
     <section
       id="home"
-      ref={sectionRef}
       aria-labelledby="hero-heading"
-      className="relative min-h-screen flex flex-col justify-center overflow-hidden bg-white"
+      className="relative min-h-screen flex flex-col justify-center overflow-hidden bg-[var(--color-bg-primary)]"
     >
+      <div
+        className="pointer-events-none absolute inset-0"
+        style={{
+          background:
+            'radial-gradient(ellipse at 15% 40%, rgba(var(--color-brand-primary-rgb), 0.05) 0%, transparent 55%), radial-gradient(ellipse at 85% 25%, rgba(var(--color-primary-rgb), 0.04) 0%, transparent 50%), radial-gradient(ellipse at 50% 90%, rgba(var(--color-brand-primary-rgb), 0.03) 0%, transparent 40%)',
+        }}
+      />
+
       <div className="container-wide py-24 md:py-32 lg:py-40 relative z-10 flex-1 flex items-center">
-        <div className="max-w-3xl">
-          <motion.div
-            {...fadeUp}
-            transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
-            className="mb-6"
-          >
-            <span className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[#FEF2F4] text-[#C41E3A] text-sm font-medium border border-[#C41E3A]/10">
-              智连未来，成长伙伴
-            </span>
-          </motion.div>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center w-full">
+          <div>
+            <motion.div
+              {...fadeUp(0)}
+              className="mb-8"
+            >
+              <span className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)] text-sm font-medium border border-[var(--color-brand-primary)]/10">
+                {COMPANY_INFO.slogan}
+              </span>
+            </motion.div>
 
-          <motion.h1
-            id="hero-heading"
-            {...fadeUp}
-            transition={{ duration: 0.5, delay: 0.1, ease: [0.16, 1, 0.3, 1] }}
-            className="text-5xl sm:text-6xl lg:text-7xl tracking-tight mb-6 font-brand"
-            style={{ fontWeight: 'normal' }}
-          >
-            {COMPANY_INFO.shortName}
-          </motion.h1>
+            <motion.h1
+              id="hero-heading"
+              {...fadeUp(0.1)}
+              className="text-6xl sm:text-7xl lg:text-8xl tracking-tight mb-6 font-brand"
+              style={{ fontWeight: 'normal' }}
+            >
+              {COMPANY_INFO.shortName}
+            </motion.h1>
 
-          <motion.p
-            {...fadeUp}
-            transition={{ duration: 0.5, delay: 0.2, ease: [0.16, 1, 0.3, 1] }}
-            className="text-xl sm:text-2xl text-[#1C1C1C] mb-4"
-          >
-            <span className="font-semibold text-[#C41E3A]">企业数字化转型服务商</span>
-          </motion.p>
+            <motion.p
+              {...fadeUp(0.2)}
+              className="text-xl sm:text-2xl text-[var(--color-text-primary)] mb-4"
+            >
+              <span className="font-semibold text-[var(--color-brand-primary)] font-calligraphy">
+                企业数字化转型服务商
+              </span>
+            </motion.p>
 
-          <motion.p
-            {...fadeUp}
-            transition={{ duration: 0.5, delay: 0.3, ease: [0.16, 1, 0.3, 1] }}
-            className="text-lg text-[#595959] max-w-2xl leading-relaxed mb-10"
-          >
-            以智慧连接数字趋势，以伙伴身份陪您成长——您的数字化转型同行者
-          </motion.p>
+            <motion.p
+              {...fadeUp(0.3)}
+              className="text-lg text-[var(--color-text-muted)] max-w-xl leading-relaxed mb-10"
+            >
+              {COMPANY_INFO.description}
+            </motion.p>
+
+            <motion.div
+              {...fadeUp(0.4)}
+              className="flex flex-col sm:flex-row items-start gap-4"
+            >
+              <Button size="lg" asChild>
+                <StaticLink href="/contact">
+                  立即咨询
+                  <ArrowRight className="w-4 h-4 ml-2" />
+                </StaticLink>
+              </Button>
+              <Button size="lg" variant="outline" asChild>
+                <StaticLink href="/products">探索产品</StaticLink>
+              </Button>
+            </motion.div>
+
+            <motion.div
+              {...fadeUp(0.5)}
+              className="flex flex-wrap gap-3 mt-10 lg:hidden"
+            >
+              {CAPABILITIES.map((cap) => {
+                const Icon = cap.icon;
+                return (
+                  <div
+                    key={cap.label}
+                    className="flex items-center gap-2 px-3 py-2 rounded-lg bg-[var(--color-bg-section)] border border-[var(--color-border-primary)]"
+                  >
+                    <Icon className="w-4 h-4 text-[var(--color-brand-primary)]" strokeWidth={1.8} />
+                    <span className="text-xs font-medium text-[var(--color-text-primary)]">{cap.label}</span>
+                  </div>
+                );
+              })}
+            </motion.div>
+          </div>
 
           <motion.div
-            {...fadeUp}
-            transition={{ duration: 0.5, delay: 0.4, ease: [0.16, 1, 0.3, 1] }}
-            className="flex flex-col sm:flex-row items-start gap-4"
+            initial={shouldReduceMotion ? {} : { opacity: 0, y: 32 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.5, ease: EASE }}
+            className="hidden lg:block"
           >
-            <Button size="lg" asChild>
-              <StaticLink href="/contact">
-                立即咨询
-                <ArrowRight className="w-4 h-4 ml-2" />
-              </StaticLink>
-            </Button>
-            <Button size="lg" variant="outline" asChild>
-              <StaticLink href="/products">
-                探索产品
-              </StaticLink>
-            </Button>
+            <div
+              ref={cardRef}
+              className="relative ink-glow-border rounded-2xl"
+              style={
+                {
+                  '--glow-start': 'var(--color-brand-primary)',
+                  '--glow-end': 'var(--color-warning)',
+                } as React.CSSProperties
+              }
+              onMouseMove={handleCardMouseMove}
+              onMouseEnter={() => setIsCardHovered(true)}
+              onMouseLeave={() => setIsCardHovered(false)}
+            >
+              <div
+                className="absolute inset-0 rounded-2xl pointer-events-none transition-opacity duration-500"
+                style={{
+                  opacity: isCardHovered ? 1 : 0,
+                  background: `radial-gradient(400px circle at ${mousePos.x}px ${mousePos.y}px, rgba(var(--color-brand-primary-rgb), 0.06), transparent 40%)`,
+                }}
+              />
+
+              <div className="relative rounded-2xl bg-white/80 backdrop-blur-sm p-8 lg:p-10">
+                <div className="w-14 h-14 rounded-xl bg-[var(--color-brand-primary-bg)] flex items-center justify-center mb-6">
+                  <Handshake className="w-6 h-6 text-[var(--color-brand-primary)]" strokeWidth={1.8} />
+                </div>
+
+                <h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-2">
+                  从沟通到落地，全程陪伴
+                </h3>
+                <p className="text-sm text-[var(--color-text-muted)] leading-relaxed mb-8">
+                  四步合作流程，确保每个项目科学推进、高效交付
+                </p>
+
+                <div className="space-y-4">
+                  {JOURNEY_STEPS.map((step, idx) => {
+                    const Icon = step.icon;
+                    return (
+                      <div
+                        key={step.label}
+                        className="flex items-center gap-4 p-3 rounded-lg bg-[var(--color-bg-section)]/60"
+                      >
+                        <div className="w-9 h-9 rounded-lg bg-[var(--color-brand-primary-bg)] flex items-center justify-center shrink-0">
+                          <Icon className="w-4 h-4 text-[var(--color-brand-primary)]" strokeWidth={1.8} />
+                        </div>
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-2">
+                            <span className="text-xs font-bold text-[var(--color-brand-primary)]">0{idx + 1}</span>
+                            <span className="text-sm font-medium text-[var(--color-text-primary)]">{step.label}</span>
+                          </div>
+                          <p className="text-xs text-[var(--color-text-muted)] mt-0.5">{step.desc}</p>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            </div>
           </motion.div>
         </div>
       </div>