feat(marketing): 重构营销页面与四层叙事组件体系

- 重构 About、Contact、Team 等静态营销页面
- 重构 News 新闻列表与详情页
- 重构 Products 产品目录、详情与独立产品页面
- 重构 Services 与 Solutions 服务/解决方案页面
- 重构 Detail 四层叙事组件 (Hero → Value → Trust → CTA)
- 重构 Sections 页面区块组件 (Hero, CTA, SocialProof, WhyUs 等)
- 新增 SectionHeader、ServiceCard、CaseCard 等可复用组件

src/components/detail/detail-cta-section.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 import { motion } from 'framer-motion';
-import { ArrowRight } from 'lucide-react';
+import { ArrowRight, MessageCircle, Download } from 'lucide-react';
 import type { HeroTheme } from '@/lib/constants/hero-themes';
+import { DESIGN_SYSTEM } from '@/lib/constants/design-system';
 
 interface DetailCTASectionProps {
   theme: HeroTheme;
@@ -13,46 +14,69 @@ interface DetailCTASectionProps {
 }
 
 export function DetailCTASection({
-  theme,
+  theme: _theme,
   title = '准备好开始了吗？',
   description = '联系我们，获取专属方案和报价',
   primaryAction,
   secondaryAction,
 }: DetailCTASectionProps) {
   return (
-    <section
-      className="py-16 lg:py-20"
-      style={{
-        background: `linear-gradient(135deg, ${theme.gradientFrom}, ${theme.gradientTo})`,
-      }}
-    >
-      <div className="container-wide text-center">
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.5 }}
-        >
-          <h2 className="text-2xl font-bold text-white lg:text-3xl">{title}</h2>
-          <p className="mx-auto mt-3 max-w-xl text-sm text-white/70">{description}</p>
+    <section className="relative py-24 lg:py-32 overflow-hidden bg-bg-secondary">
+      <div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
+      <div className="absolute bottom-0 left-0 right-0 h-px bg-border-primary" />
 
-          <div className="mt-8 flex flex-wrap justify-center gap-4">
-            <a
+      <div className="container-wide relative">
+        <motion.div
+          initial={{ opacity: 0, y: 32 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: '-100px' }}
+          transition={{ duration: 0.8, ease: [0.4, 0, 0.2, 1] }}
+          className="max-w-3xl mx-auto text-center"
+        >
+          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-soft text-brand text-sm font-medium mb-6 border border-brand/20">
+            <MessageCircle className="w-4 h-4" />
+            免费咨询
+          </div>
+
+          <h2 className={`${DESIGN_SYSTEM.typography.hero.title} text-ink mb-6`}>
+            {title}
+          </h2>
+          
+          <p className="text-lg md:text-xl text-text-secondary mb-12 max-w-2xl mx-auto leading-relaxed">
+            {description}
+          </p>
+
+          <div className="flex flex-col sm:flex-row items-center justify-center gap-5">
+            <motion.a
               href={primaryAction.href}
-              className="inline-flex items-center gap-2 rounded-lg bg-white px-8 py-3 text-sm font-semibold text-gray-900 shadow-lg transition-all hover:shadow-xl"
+              whileHover={{ scale: 1.02, y: -2 }}
+              whileTap={{ scale: 0.98 }}
+              className="group relative inline-flex items-center gap-3 px-10 py-4 bg-brand text-white font-bold rounded-xl shadow-md hover:shadow-lg transition-all duration-300"
             >
-              {primaryAction.label}
-              <ArrowRight className="h-4 w-4" />
-            </a>
+              <span>{primaryAction.label}</span>
+              <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
+            </motion.a>
+
             {secondaryAction && (
               <a
                 href={secondaryAction.href}
-                className="inline-flex items-center rounded-lg border border-white/30 px-6 py-3 text-sm font-semibold text-white transition-all hover:bg-white/10"
+                className="group inline-flex items-center gap-2.5 px-8 py-4 text-ink font-semibold rounded-xl border-2 border-border-primary hover:bg-white hover:border-brand/30 transition-all duration-300"
               >
+                <Download className="w-5 h-5 transition-transform duration-300 group-hover:-translate-y-0.5" />
                 {secondaryAction.label}
               </a>
             )}
           </div>
+
+          <motion.p
+            initial={{ opacity: 0 }}
+            whileInView={{ opacity: 1 }}
+            viewport={{ once: true }}
+            transition={{ delay: 0.5, duration: 0.6 }}
+            className="mt-10 text-sm text-text-muted"
+          >
+            平均响应时间 &lt; 2小时 · 7×24小时技术支持 · 无需预付费用
+          </motion.p>
         </motion.div>
       </div>
     </section>