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

src/pages/Home.tsx

@@ -0,0 +1,380 @@
+import { useState } from 'react'
+import { Link } from 'react-router-dom'
+import VideoCard from '../components/VideoCard'
+import VideoModal from '../components/VideoModal'
+import ParticleBackground from '../components/ParticleBackground'
+import AnimatedCounter from '../components/AnimatedCounter'
+import MarqueeTicker from '../components/MarqueeTicker'
+import TestimonialCard from '../components/TestimonialCard'
+import ScrollReveal from '../components/ScrollReveal'
+import ServiceScenes from '../components/ServiceScenes'
+import CaseComparison from '../components/CaseComparison'
+import ProcessAnimation from '../components/ProcessAnimation'
+import FAQ from '../components/FAQ'
+import { videos, Video } from '../data/videos'
+
+const testimonials = [
+  {
+    name: '张总',
+    role: '市场总监',
+    company: '某科技公司',
+    content: 'CYH Technology 的 AI 短视频制作效率令人惊叹，原本需要两周的工作现在一天就能完成，而且质量非常出色！',
+    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=zhang'
+  },
+  {
+    name: '李经理',
+    role: '品牌负责人',
+    company: '某电商平台',
+    content: '他们的创意团队非常专业，能够精准把握我们的品牌调性，制作出的视频在社交媒体上获得了极高的传播率。',
+    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=li'
+  },
+  {
+    name: '王女士',
+    role: '创始人',
+    company: '某新消费品牌',
+    content: '作为初创公司，CYH Technology 帮我们用有限预算实现了高品质的品牌视频，性价比非常高！',
+    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=wang'
+  }
+]
+
+export default function Home() {
+  const [selectedVideo, setSelectedVideo] = useState<Video | null>(null)
+  const featuredVideos = videos.slice(0, 6)
+
+  return (
+    <div>
+      {/* Hero Section */}
+      <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
+        <ParticleBackground />
+
+        <div className="absolute inset-0">
+          <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-purple-600/20 rounded-full blur-[128px] animate-float" />
+          <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-blue-600/20 rounded-full blur-[128px] animate-float" style={{ animationDelay: '2s' }} />
+        </div>
+
+        <div className="relative z-10 px-4 max-w-7xl mx-auto">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+            {/* Left Content */}
+            <div className="animate-fade-in-up">
+              <div className="inline-flex items-center px-4 py-2 rounded-full glass-card mb-6">
+                <span className="w-2 h-2 bg-green-400 rounded-full mr-2 animate-pulse" />
+                <span className="text-gray-300 text-sm">香港领先的 AI 短视频制作公司</span>
+              </div>
+
+              <h1 className="text-5xl md:text-6xl font-bold mb-6 leading-tight">
+                <span className="gradient-text">AI短视频</span>
+                <br />
+                <span className="text-white">让创意触手可及</span>
+              </h1>
+
+              <p className="text-lg text-gray-400 mb-8 max-w-lg leading-relaxed">
+                用前沿 AI 科技，10倍效率提升，80%成本降低。
+                从品牌宣传片到社交媒体内容，一站式视频解决方案。
+              </p>
+
+              <div className="flex flex-col sm:flex-row gap-4 mb-12">
+                <Link
+                  to="/works"
+                  className="group px-8 py-4 gradient-bg-animated rounded-2xl text-white font-bold text-lg overflow-hidden relative"
+                >
+                  <span className="relative z-10 flex items-center justify-center">
+                    查看作品
+                    <svg className="w-5 h-5 ml-2 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                    </svg>
+                  </span>
+                </Link>
+                <Link
+                  to="/contact"
+                  className="px-8 py-4 border-2 border-purple-500/50 rounded-2xl text-purple-400 font-bold text-lg hover:border-purple-400 hover:bg-purple-500/10 transition-all duration-300"
+                >
+                  免费咨询
+                </Link>
+              </div>
+
+              {/* Quick Stats */}
+              <div className="flex gap-8">
+                {[
+                  { value: '500+', label: '成功案例' },
+                  { value: '98%', label: '满意度' },
+                  { value: '10x', label: '效率提升' }
+                ].map((stat, index) => (
+                  <div key={index}>
+                    <div className="text-2xl font-bold gradient-text">{stat.value}</div>
+                    <div className="text-sm text-gray-500">{stat.label}</div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Right - Video Showcase */}
+            <div className="hidden lg:block relative">
+              <div className="relative">
+                {/* Main Video Card */}
+                <div className="glass-card rounded-3xl overflow-hidden transform rotate-2 hover:rotate-0 transition-transform duration-500">
+                  <div className="aspect-video 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 animate-pulse-glow">
+                        <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">AI生成的品牌宣传片</p>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Floating Cards */}
+                <div className="absolute -bottom-6 -left-6 glass-card rounded-2xl p-4 animate-float" style={{ animationDelay: '1s' }}>
+                  <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 rounded-lg bg-green-500/20 flex items-center justify-center">
+                      <svg className="w-5 h-5 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>
+                    <div>
+                      <div className="text-sm font-semibold text-white">10x 效率</div>
+                      <div className="text-xs text-gray-500">相比传统制作</div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="absolute -top-6 -right-6 glass-card rounded-2xl p-4 animate-float" style={{ animationDelay: '2s' }}>
+                  <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 rounded-lg bg-purple-500/20 flex items-center justify-center">
+                      <svg className="w-5 h-5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                      </svg>
+                    </div>
+                    <div>
+                      <div className="text-sm font-semibold text-white">80% 节省</div>
+                      <div className="text-xs text-gray-500">制作成本</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="absolute bottom-12 left-1/2 transform -translate-x-1/2 animate-bounce">
+          <div className="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center">
+            <div className="w-1.5 h-3 bg-white/50 rounded-full mt-2 animate-pulse" />
+          </div>
+        </div>
+      </section>
+
+      {/* Partners Marquee */}
+      <section className="py-12 bg-[#0d0d2b]/50">
+        <ScrollReveal>
+          <div className="text-center mb-6">
+            <p className="text-gray-500 text-sm uppercase tracking-widest">受信赖的合作伙伴</p>
+          </div>
+        </ScrollReveal>
+        <MarqueeTicker />
+      </section>
+
+      {/* Stats Section */}
+      <section className="py-20 px-4 relative overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-b from-purple-900/10 to-transparent" />
+        <div className="max-w-7xl mx-auto relative z-10">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+            {[
+              { end: 500, suffix: '+', label: '完成项目' },
+              { end: 100, suffix: '+', label: '合作客户' },
+              { end: 50, suffix: '+', label: '团队成员' },
+              { end: 98, suffix: '%', label: '客户满意度' }
+            ].map((stat, index) => (
+              <ScrollReveal key={index} delay={index * 100}>
+                <div className="text-center glass-card rounded-2xl p-6 hover-lift">
+                  <AnimatedCounter end={stat.end} suffix={stat.suffix} />
+                  <p className="text-gray-400 mt-2 font-medium">{stat.label}</p>
+                </div>
+              </ScrollReveal>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Features Section */}
+      <section className="py-20 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-4">
+                <span className="text-purple-400 text-sm font-medium">核心优势</span>
+              </div>
+              <h2 className="text-3xl md:text-4xl font-bold mb-4">
+                为什么选择 <span className="gradient-text">CYH</span>
+              </h2>
+              <p className="text-gray-400 max-w-xl mx-auto">
+                我们将人工智能技术与创意完美融合，为您提供前所未有的视频制作体验
+              </p>
+            </div>
+          </ScrollReveal>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {[
+              {
+                icon: (
+                  <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                  </svg>
+                ),
+                title: '高效产出',
+                desc: 'AI驱动的制作流程，将传统数周的制作周期缩短至数小时',
+                gradient: 'from-yellow-500 to-orange-500'
+              },
+              {
+                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 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
+                  </svg>
+                ),
+                title: '创意无限',
+                desc: '突破传统制作限制，实现任何想象中的视觉效果',
+                gradient: 'from-purple-500 to-pink-500'
+              },
+              {
+                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 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                ),
+                title: '成本优化',
+                desc: '大幅降低视频制作成本，让高品质视频触手可及',
+                gradient: 'from-green-500 to-emerald-500'
+              }
+            ].map((feature, index) => (
+              <ScrollReveal key={index} delay={index * 150}>
+                <div className="group glass-card rounded-2xl p-8 hover-lift relative overflow-hidden">
+                  <div className={`absolute top-0 right-0 w-32 h-32 bg-gradient-to-br ${feature.gradient} opacity-10 rounded-full blur-3xl group-hover:opacity-20 transition-opacity`} />
+                  <div className={`w-14 h-14 rounded-xl bg-gradient-to-br ${feature.gradient} flex items-center justify-center mb-5 text-white shadow-lg`}>
+                    {feature.icon}
+                  </div>
+                  <h3 className="text-xl font-bold text-white mb-3">{feature.title}</h3>
+                  <p className="text-gray-400 leading-relaxed">{feature.desc}</p>
+                </div>
+              </ScrollReveal>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Service Scenes */}
+      <ServiceScenes />
+
+      {/* Process Animation */}
+      <ProcessAnimation />
+
+      {/* Featured Videos */}
+      <section className="py-20 px-4 bg-[#0d0d2b]/50 relative overflow-hidden">
+        <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-purple-500/50 to-transparent" />
+
+        <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-4">
+                <span className="text-purple-400 text-sm font-medium">精选作品</span>
+              </div>
+              <h2 className="text-3xl md:text-4xl font-bold mb-4">
+                探索 <span className="gradient-text">AI创作</span>
+              </h2>
+              <p className="text-gray-400">
+                点击作品，立即观看AI生成的精彩视频
+              </p>
+            </div>
+          </ScrollReveal>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
+            {featuredVideos.map((video, index) => (
+              <ScrollReveal key={video.id} delay={index * 100}>
+                <VideoCard video={video} onClick={setSelectedVideo} />
+              </ScrollReveal>
+            ))}
+          </div>
+
+          <ScrollReveal>
+            <div className="text-center">
+              <Link
+                to="/works"
+                className="group inline-flex items-center px-8 py-4 gradient-bg-animated rounded-2xl text-white font-bold hover:shadow-2xl hover:shadow-purple-500/25 transition-all duration-300"
+              >
+                查看全部作品
+                <svg className="w-5 h-5 ml-2 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                </svg>
+              </Link>
+            </div>
+          </ScrollReveal>
+        </div>
+      </section>
+
+      {/* Case Comparison */}
+      <CaseComparison />
+
+      {/* Testimonials */}
+      <section className="py-20 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-4">
+                <span className="text-purple-400 text-sm font-medium">客户评价</span>
+              </div>
+              <h2 className="text-3xl md:text-4xl font-bold mb-4">
+                他们都在说
+              </h2>
+              <p className="text-gray-400">
+                来自合作伙伴的真实反馈
+              </p>
+            </div>
+          </ScrollReveal>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {testimonials.map((testimonial, index) => (
+              <ScrollReveal key={index} delay={index * 150}>
+                <TestimonialCard testimonial={testimonial} />
+              </ScrollReveal>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* FAQ */}
+      <FAQ />
+
+      {/* CTA Section */}
+      <section className="py-24 px-4 relative overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-b from-purple-900/20 to-[#0a0a1a]" />
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-purple-500/10 rounded-full blur-[128px]" />
+
+        <div className="max-w-4xl mx-auto text-center relative z-10">
+          <ScrollReveal>
+            <h2 className="text-4xl md:text-5xl font-bold mb-6">
+              准备好开始 <span className="gradient-text">AI视频之旅</span> 了吗？
+            </h2>
+            <p className="text-gray-400 text-lg mb-10 max-w-2xl mx-auto">
+              立即联系我们，获取免费咨询和定制方案
+            </p>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <Link
+                to="/contact"
+                className="px-10 py-5 gradient-bg-animated rounded-2xl text-white font-bold text-lg hover:shadow-2xl hover:shadow-purple-500/25 transition-all duration-300"
+              >
+                免费咨询
+              </Link>
+              <Link
+                to="/works"
+                className="px-10 py-5 border-2 border-purple-500/50 rounded-2xl text-purple-400 font-bold text-lg hover:border-purple-400 hover:bg-purple-500/10 transition-all duration-300"
+              >
+                查看案例
+              </Link>
+            </div>
+          </ScrollReveal>
+        </div>
+      </section>
+
+      <VideoModal video={selectedVideo} onClose={() => setSelectedVideo(null)} />
+    </div>
+  )
+}