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

src/components/ServiceScenes.tsx

@@ -0,0 +1,148 @@
+import { useState } from 'react'
+import ScrollReveal from './ScrollReveal'
+
+const scenes = [
+  {
+    id: 'social',
+    icon: (
+      <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 4V2a1 1 0 011-1h8a1 1 0 011 1v2m-9 0h10m-10 0H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2h-2" />
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 11v6m-3-3h6" />
+      </svg>
+    ),
+    title: '社交媒体',
+    desc: '抖音、小红书、Instagram等平台爆款内容',
+    features: ['15秒竖屏视频', '高完播率设计', '爆款文案生成', '多平台适配'],
+    gradient: 'from-pink-500 to-rose-500'
+  },
+  {
+    id: 'ecommerce',
+    icon: (
+      <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
+      </svg>
+    ),
+    title: '电商营销',
+    desc: '产品展示、直播切片、详情页视频',
+    features: ['3D产品展示', '卖点可视化', '多角度展示', '批量生成'],
+    gradient: 'from-orange-500 to-yellow-500'
+  },
+  {
+    id: 'education',
+    icon: (
+      <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+      </svg>
+    ),
+    title: '教育培训',
+    desc: '在线课程、知识科普、企业内训',
+    features: ['知识可视化', 'AI讲师生成', '课程片头制作', '互动元素'],
+    gradient: 'from-blue-500 to-cyan-500'
+  },
+  {
+    id: 'brand',
+    icon: (
+      <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+      </svg>
+    ),
+    title: '企业宣传',
+    desc: '品牌故事、企业宣传片、招聘视频',
+    features: ['品牌形象塑造', '企业文化展示', '数字人代言', '多语言版本'],
+    gradient: 'from-purple-500 to-violet-500'
+  }
+]
+
+export default function ServiceScenes() {
+  const [activeScene, setActiveScene] = useState(scenes[0])
+
+  return (
+    <section className="py-24 px-4">
+      <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">
+              覆盖全场景 <span className="gradient-text">AI视频</span> 需求
+            </h2>
+            <p className="text-gray-400 text-lg max-w-2xl mx-auto">
+              无论您是什么行业，我们都能提供专业的AI视频解决方案
+            </p>
+          </div>
+        </ScrollReveal>
+
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
+          {/* Scene Tabs */}
+          <div className="lg:col-span-4 space-y-3">
+            {scenes.map((scene) => (
+              <button
+                key={scene.id}
+                onClick={() => setActiveScene(scene)}
+                className={`w-full text-left p-5 rounded-2xl transition-all duration-300 ${
+                  activeScene.id === scene.id
+                    ? 'glass-card border-purple-500/50'
+                    : 'hover:bg-white/5'
+                }`}
+              >
+                <div className="flex items-center gap-4">
+                  <div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${scene.gradient} flex items-center justify-center text-white flex-shrink-0`}>
+                    {scene.icon}
+                  </div>
+                  <div>
+                    <h3 className={`font-semibold transition-colors ${
+                      activeScene.id === scene.id ? 'text-white' : 'text-gray-400'
+                    }`}>
+                      {scene.title}
+                    </h3>
+                    <p className="text-sm text-gray-500">{scene.desc}</p>
+                  </div>
+                </div>
+              </button>
+            ))}
+          </div>
+
+          {/* Scene Detail */}
+          <div className="lg:col-span-8">
+            <div className="glass-card rounded-3xl p-8 md:p-10">
+              <div className="flex items-center gap-4 mb-8">
+                <div className={`w-16 h-16 rounded-2xl bg-gradient-to-br ${activeScene.gradient} flex items-center justify-center text-white`}>
+                  {activeScene.icon}
+                </div>
+                <div>
+                  <h3 className="text-2xl font-bold text-white">{activeScene.title}</h3>
+                  <p className="text-gray-400">{activeScene.desc}</p>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
+                {activeScene.features.map((feature, index) => (
+                  <div key={index} className="flex items-center gap-3 p-4 rounded-xl bg-white/5">
+                    <div className={`w-8 h-8 rounded-lg bg-gradient-to-br ${activeScene.gradient} flex items-center justify-center flex-shrink-0`}>
+                      <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                      </svg>
+                    </div>
+                    <span className="text-gray-300">{feature}</span>
+                  </div>
+                ))}
+              </div>
+
+              <div className="aspect-video rounded-2xl overflow-hidden bg-gradient-to-br from-purple-900/50 to-blue-900/50 flex items-center justify-center">
+                <div className="text-center">
+                  <div className="w-20 h-20 mx-auto mb-4 rounded-full gradient-bg-animated flex items-center justify-center">
+                    <svg className="w-10 h-10 text-white ml-1" fill="currentColor" viewBox="0 0 24 24">
+                      <path d="M8 5v14l11-7z" />
+                    </svg>
+                  </div>
+                  <p className="text-gray-400">点击观看 {activeScene.title} 案例视频</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}