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/app/(marketing)/solutions/page.tsx

@@ -1,11 +1,13 @@
 '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 { ArrowRight, Lightbulb, Cpu, Users, CheckCircle2 } 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';
 
 const modules = [
   {
@@ -19,8 +21,10 @@ const modules = [
     ],
     values: ['行业趋势洞察报告', '数字化转型成熟度评估', '个性化实施路径规划'],
     cta: '预约一次免费诊断',
-    ctaVariant: 'default' as const,
     ctaHref: '/contact',
+    accentColor: 'var(--color-brand-primary)',
+    accentBg: 'var(--color-brand-primary-bg)',
+    accentBorder: 'border-l-[var(--color-brand-primary)]',
   },
   {
     icon: Cpu,
@@ -33,8 +37,10 @@ const modules = [
     ],
     values: ['业务场景深度调研', '技术方案定制开发', '敏捷交付快速迭代'],
     cta: '了解技术方案',
-    ctaVariant: 'outline' as const,
     ctaHref: '/products',
+    accentColor: 'var(--color-accent-blue)',
+    accentBg: 'rgba(37, 99, 235, 0.08)',
+    accentBorder: 'border-l-[var(--color-accent-blue)]',
   },
   {
     icon: Users,
@@ -47,28 +53,33 @@ const modules = [
     ],
     values: ['专属客户成功经理', '季度业务复盘会', '7×24小时响应通道'],
     cta: '了解陪跑服务',
-    ctaVariant: 'default' as const,
     ctaHref: '/services',
+    accentColor: 'var(--color-success)',
+    accentBg: 'rgba(22, 163, 74, 0.08)',
+    accentBorder: 'border-l-[var(--color-success)]',
   },
 ];
 
 export default function SolutionsPage() {
+  const shouldReduceMotion = useReducedMotion();
+  const fadeUp = shouldReduceMotion ? {} : { initial: { opacity: 0, y: 20 } };
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-[var(--color-bg-primary)]">
+      <BreadcrumbSchema items={[{ name: '首页', href: '/' }, { name: '解决方案', href: '/solutions' }]} />
       <section className="pt-32 pb-16">
         <div className="container-wide">
           <PageNav items={[{ label: '解决方案' }]} />
           <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
+            {...fadeUp}
+            animate={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
             transition={{ duration: 0.5 }}
             className="max-w-3xl"
           >
-            <p className="text-sm font-medium text-[#C41E3A] mb-4 tracking-wide uppercase">Solutions</p>
-            <h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6 tracking-tight">
+            <p className="text-sm font-medium text-[var(--color-brand-primary)] mb-4 tracking-wide uppercase">Solutions</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-[#595959] leading-relaxed">
+            <p className="text-lg text-[var(--color-text-muted)] leading-relaxed">
               我们以伙伴的身份，陪您走过数字化转型的每一步
             </p>
           </motion.div>
@@ -84,57 +95,65 @@ export default function SolutionsPage() {
               <motion.section
                 key={index}
                 id={anchorIds[index]}
-                initial={{ opacity: 0, y: 20 }}
-                whileInView={{ opacity: 1, y: 0 }}
+                {...fadeUp}
+                whileInView={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
                 viewport={{ once: true }}
                 transition={{ duration: 0.5, delay: index * 0.1 }}
-                className="p-8 md:p-12 rounded-xl border border-[#E5E5E5] bg-white hover:border-[#C41E3A]/30 transition-colors"
+                className={`p-8 md:p-12 rounded-xl border border-[var(--color-border-primary)] border-l-4 ${module.accentBorder} bg-[var(--color-bg-primary)] hover:border-[var(--color-border-primary)] transition-colors`}
               >
                 <div className="flex items-start gap-4 mb-6">
-                  <div className="w-12 h-12 bg-[#C41E3A] rounded-xl flex items-center justify-center shrink-0">
-                    <module.icon className="w-6 h-6 text-white" />
+                  <div className="w-12 h-12 rounded-xl flex items-center justify-center shrink-0" style={{ backgroundColor: module.accentBg }}>
+                    <module.icon className="w-6 h-6" style={{ color: module.accentColor }} />
                   </div>
                   <div>
-                    <h2 className="text-2xl font-bold text-[#1C1C1C] mb-1">
+                    <h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-1">
                       模块{['一', '二', '三'][index]}：{module.title}
                     </h2>
-                    <p className="text-[#595959]">{module.subtitle}</p>
+                    <p className="text-[var(--color-text-muted)]">{module.subtitle}</p>
                   </div>
                 </div>
 
                 <div className="space-y-4 mb-8">
                   {module.paragraphs.map((p, i) => (
-                    <p key={i} className="text-[#1C1C1C] leading-relaxed">{p}</p>
+                    <p key={i} className="text-[var(--color-text-primary)] leading-relaxed">{p}</p>
                   ))}
                 </div>
 
                 <div className="mb-8">
-                  <h3 className="text-lg font-semibold text-[#1C1C1C] mb-4 flex items-center gap-2">
-                    <CheckCircle2 className="w-5 h-5 text-[#C41E3A]" />
+                  <h3 className="text-lg font-semibold text-[var(--color-text-primary)] mb-4 flex items-center gap-2">
+                    <CheckCircle2 className="w-5 h-5" style={{ color: module.accentColor }} />
                     核心价值点
                   </h3>
                   <div className="grid md:grid-cols-3 gap-3">
                     {module.values.map((value, i) => (
-                      <div key={i} className="flex items-start gap-2 p-3 bg-[#F5F5F5] rounded-lg">
-                        <div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 shrink-0" />
-                        <span className="text-sm text-[#1C1C1C]">{value}</span>
+                      <div key={i} className="flex items-start gap-2 p-3 rounded-lg" style={{ backgroundColor: module.accentBg }}>
+                        <div className="w-1.5 h-1.5 rounded-full mt-2 shrink-0" style={{ backgroundColor: module.accentColor }} />
+                        <span className="text-sm text-[var(--color-text-primary)]">{value}</span>
                       </div>
                     ))}
                   </div>
                 </div>
 
                 <div className="flex justify-center">
-                  <Button
-                    size="lg"
-                    variant={module.ctaVariant}
-                    className={module.ctaVariant === 'default' ? 'bg-[#C41E3A] hover:bg-[#A01830] text-white' : 'border-[#C41E3A] text-[#C41E3A] hover:bg-[#C41E3A] hover:text-white'}
-                    asChild
+                  <StaticLink
+                    href={module.ctaHref}
+                    className="inline-flex items-center gap-2 px-6 py-3 rounded-lg border-2 font-medium transition-all duration-200 hover:text-white"
+                    style={{
+                      borderColor: module.accentColor,
+                      color: module.accentColor,
+                    }}
+                    onMouseEnter={(e) => {
+                      e.currentTarget.style.backgroundColor = module.accentColor;
+                      e.currentTarget.style.color = '#fff';
+                    }}
+                    onMouseLeave={(e) => {
+                      e.currentTarget.style.backgroundColor = 'transparent';
+                      e.currentTarget.style.color = module.accentColor;
+                    }}
                   >
-                    <StaticLink href={module.ctaHref}>
-                      {module.cta}
-                      <ArrowRight className="ml-2 w-4 h-4" />
-                    </StaticLink>
-                  </Button>
+                    {module.cta}
+                    <ArrowRight className="w-4 h-4" />
+                  </StaticLink>
                 </div>
               </motion.section>
               );
@@ -145,27 +164,14 @@ export default function SolutionsPage() {
 
       <MethodologySection />
 
-      <section className="bg-[#F5F5F5] py-20">
-        <div className="container-wide text-center">
-          <h2 className="text-3xl font-bold text-[#1C1C1C] mb-6">
-            准备开始您的数字化转型之旅？
-          </h2>
-          <p className="text-lg text-[#595959] mb-8 max-w-2xl mx-auto">
-            无论您处于哪个阶段，我们都能为您提供合适的解决方案
-          </p>
-          <div className="flex justify-center gap-4">
-            <Button size="lg" variant="outline" asChild>
-              <StaticLink href="/contact">联系我们</StaticLink>
-            </Button>
-            <Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white" asChild>
-              <StaticLink href="/contact">
-                立即咨询
-                <ArrowRight className="ml-2 w-4 h-4" />
-              </StaticLink>
-            </Button>
-          </div>
-        </div>
-      </section>
+      <CTASection
+        title="准备开始您的数字化转型之旅？"
+        description="无论您处于哪个阶段，我们都能为您提供合适的解决方案"
+        primaryLabel="立即咨询"
+        primaryHref="/contact"
+        secondaryLabel="联系我们"
+        secondaryHref="/contact"
+      />
     </div>
   );
 }