feat(pages): 添加联系、首页和作品页面，更新样式和配置文件

src/components/CaseComparison.tsx

@@ -0,0 +1,166 @@
+import { useState } from 'react'
+import ScrollReveal from './ScrollReveal'
+
+const comparisons = [
+  {
+    id: 1,
+    title: '品牌宣传片',
+    traditional: {
+      time: '2-4周',
+      cost: '¥50,000-200,000',
+      team: '导演+摄影+后期+演员',
+      process: '脚本撰写→选角→拍摄→后期制作→修改→交付'
+    },
+    ai: {
+      time: '1-3天',
+      cost: '¥5,000-20,000',
+      team: 'AI工程师+创意策划',
+      process: '需求确认→AI生成→人工优化→交付'
+    }
+  },
+  {
+    id: 2,
+    title: '产品展示视频',
+    traditional: {
+      time: '1-2周',
+      cost: '¥20,000-80,000',
+      team: '摄影师+灯光师+后期',
+      process: '产品准备→场景搭建→拍摄→精修→交付'
+    },
+    ai: {
+      time: '4-8小时',
+      cost: '¥2,000-8,000',
+      team: 'AI工程师',
+      process: '产品图片→AI建模→动画生成→交付'
+    }
+  },
+  {
+    id: 3,
+    title: '社交媒体短视频',
+    traditional: {
+      time: '3-7天',
+      cost: '¥10,000-30,000',
+      team: '编导+拍摄+剪辑',
+      process: '策划→拍摄→剪辑→字幕→交付'
+    },
+    ai: {
+      time: '2-4小时',
+      cost: '¥1,000-3,000',
+      team: 'AI工程师',
+      process: '文案输入→AI生成→一键发布'
+    }
+  }
+]
+
+export default function CaseComparison() {
+  const [activeCase, setActiveCase] = useState(comparisons[0])
+
+  return (
+    <section className="py-24 px-4 bg-[#0d0d2b]/50">
+      <div className="max-w-7xl mx-auto">
+        <ScrollReveal>
+          <div className="text-center mb-16">
+            <div className="inline-flex items-center px-4 py-2 rounded-full glass-card mb-6">
+              <span className="text-purple-400 text-sm font-medium">效率对比</span>
+            </div>
+            <h2 className="text-4xl md:text-5xl font-bold mb-4">
+              AI vs 传统 <span className="gradient-text">制作对比</span>
+            </h2>
+            <p className="text-gray-400 text-lg max-w-2xl mx-auto">
+              数据说话，AI制作效率提升10倍，成本降低80%
+            </p>
+          </div>
+        </ScrollReveal>
+
+        {/* Case Tabs */}
+        <ScrollReveal delay={100}>
+          <div className="flex flex-wrap justify-center gap-3 mb-12">
+            {comparisons.map((comp) => (
+              <button
+                key={comp.id}
+                onClick={() => setActiveCase(comp)}
+                className={`px-5 py-2.5 rounded-xl font-medium transition-all duration-300 ${
+                  activeCase.id === comp.id
+                    ? 'gradient-bg-animated text-white'
+                    : 'glass-card text-gray-400 hover:text-white'
+                }`}
+              >
+                {comp.title}
+              </button>
+            ))}
+          </div>
+        </ScrollReveal>
+
+        {/* Comparison Cards */}
+        <ScrollReveal delay={200}>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            {/* Traditional */}
+            <div className="glass-card rounded-3xl p-8 border-red-500/20">
+              <div className="flex items-center gap-3 mb-8">
+                <div className="w-12 h-12 rounded-xl bg-red-500/20 flex items-center justify-center">
+                  <svg className="w-6 h-6 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                </div>
+                <h3 className="text-xl font-bold text-white">传统制作</h3>
+              </div>
+
+              <div className="space-y-6">
+                <div className="flex items-center justify-between py-4 border-b border-white/5">
+                  <span className="text-gray-400">制作周期</span>
+                  <span className="text-red-400 font-semibold">{activeCase.traditional.time}</span>
+                </div>
+                <div className="flex items-center justify-between py-4 border-b border-white/5">
+                  <span className="text-gray-400">制作成本</span>
+                  <span className="text-red-400 font-semibold">{activeCase.traditional.cost}</span>
+                </div>
+                <div className="flex items-center justify-between py-4 border-b border-white/5">
+                  <span className="text-gray-400">团队配置</span>
+                  <span className="text-gray-300 text-sm text-right">{activeCase.traditional.team}</span>
+                </div>
+                <div>
+                  <span className="text-gray-400 block mb-3">制作流程</span>
+                  <p className="text-gray-300 text-sm leading-relaxed">{activeCase.traditional.process}</p>
+                </div>
+              </div>
+            </div>
+
+            {/* AI */}
+            <div className="glass-card rounded-3xl p-8 border-green-500/20 relative overflow-hidden">
+              <div className="absolute top-4 right-4 px-3 py-1 rounded-full text-xs font-semibold gradient-bg-animated">
+                推荐
+              </div>
+              <div className="flex items-center gap-3 mb-8">
+                <div className="w-12 h-12 rounded-xl bg-green-500/20 flex items-center justify-center">
+                  <svg className="w-6 h-6 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                  </svg>
+                </div>
+                <h3 className="text-xl font-bold text-white">AI制作</h3>
+              </div>
+
+              <div className="space-y-6">
+                <div className="flex items-center justify-between py-4 border-b border-white/5">
+                  <span className="text-gray-400">制作周期</span>
+                  <span className="text-green-400 font-semibold">{activeCase.ai.time}</span>
+                </div>
+                <div className="flex items-center justify-between py-4 border-b border-white/5">
+                  <span className="text-gray-400">制作成本</span>
+                  <span className="text-green-400 font-semibold">{activeCase.ai.cost}</span>
+                </div>
+                <div className="flex items-center justify-between py-4 border-b border-white/5">
+                  <span className="text-gray-400">团队配置</span>
+                  <span className="text-gray-300 text-sm">{activeCase.ai.team}</span>
+                </div>
+                <div>
+                  <span className="text-gray-400 block mb-3">制作流程</span>
+                  <p className="text-gray-300 text-sm leading-relaxed">{activeCase.ai.process}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </ScrollReveal>
+      </div>
+    </section>
+  )
+}