feat: 完成站点内容更新与体验优化

本次提交完成多项改进： 1. 新增6个作品展示图片资源 2. 添加平滑滚动全局配置与路由跳转自动回顶功能 3. 调整开发服务器为0.0.0.0监听方便局域网访问 4. 优化页面布局：调整作品网格为4列布局、修正统计组件排版 5. 简化作品数据结构，移除冗余描述字段，更新作品标题与封面 6. 禁用部分交互特效与分类筛选功能，简化页面UI 7. 优化首页与关于页面的标题排版
2026-06-27 14:50:53 +08:00
parent 53e312af69
commit b957703d94
15 changed files with 53 additions and 143 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,5 @@
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
+import { useEffect } from 'react'
+import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom'
 import Navbar from './components/Navbar'
 import Footer from './components/Footer'
 import Home from './pages/Home'
@@ -6,9 +7,20 @@ import About from './pages/About'
 import Works from './pages/Works'
 import Contact from './pages/Contact'

+function ScrollToTop() {
+  const { pathname } = useLocation()
+
+  useEffect(() => {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }, [pathname])
+
+  return null
+}
+
 function App() {
  return (
    <Router>
+      <ScrollToTop />
      <div className="min-h-screen flex flex-col">
        <Navbar />
        <main className="flex-1">
--- a/src/components/AnimatedCounter.tsx
+++ b/src/components/AnimatedCounter.tsx
@@ -54,7 +54,7 @@ export default function AnimatedCounter({ end, suffix = '', duration = 2000 }: A
  }, [isVisible, end, duration])

  return (
-    <div ref={ref} className="text-4xl md:text-5xl font-bold gradient-text">
+    <div ref={ref} className="text-4xl py-2 mt-3 md:text-5xl font-bold gradient-text">
      {count}{suffix}
    </div>
  )
--- a/src/components/VideoCard.tsx
+++ b/src/components/VideoCard.tsx
@@ -29,15 +29,15 @@ export default function VideoCard({ video, onClick }: VideoCardProps) {
    <div
      ref={cardRef}
      className="group cursor-pointer rounded-2xl overflow-hidden gradient-border glow-on-hover"
-      onClick={() => onClick(video)}
-      onMouseMove={handleMouseMove}
-      onMouseLeave={handleMouseLeave}
+      // onClick={() => onClick(video)}
+      // onMouseMove={handleMouseMove}
+      // onMouseLeave={handleMouseLeave}
      style={{
        transform: `perspective(1000px) rotateX(${tilt.x}deg) rotateY(${tilt.y}deg)`,
        transition: 'transform 0.3s ease'
      }}
    >
-      <div className="relative aspect-video overflow-hidden">
+      <div className="relative aspect-[9/16] overflow-hidden">
        <img
          src={video.thumbnail}
          alt={video.title}
@@ -46,16 +46,12 @@ export default function VideoCard({ video, onClick }: VideoCardProps) {
        <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-all duration-500" />

        <div className="absolute inset-0 flex items-center justify-center">
-          <div className="w-20 h-20 rounded-full gradient-bg-animated flex items-center justify-center opacity-0 group-hover:opacity-100 transform scale-0 group-hover:scale-100 transition-all duration-500 shadow-2xl shadow-purple-500/50">
-            <svg className="w-10 h-10 text-white ml-1" fill="currentColor" viewBox="0 0 24 24">
-              <path d="M8 5v14l11-7z" />
-            </svg>
-          </div>
+          
        </div>

-        <div className="absolute top-4 right-4 px-3 py-1.5 rounded-full text-xs font-semibold gradient-bg-animated shadow-lg">
+        {/* <div className="absolute top-4 right-4 px-3 py-1.5 rounded-full text-xs font-semibold gradient-bg-animated shadow-lg">
          {video.category}
-        </div>
+        </div> */}

        <div className="absolute bottom-0 left-0 right-0 h-1 gradient-bg-animated transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left" />
      </div>
@@ -64,9 +60,9 @@ export default function VideoCard({ video, onClick }: VideoCardProps) {
        <h3 className="text-white font-bold text-lg mb-2 group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-r group-hover:from-purple-400 group-hover:to-pink-400 transition-all duration-300">
          {video.title}
        </h3>
-        <p className="text-gray-400 text-sm line-clamp-2 group-hover:text-gray-300 transition-colors">
+        {/* <p className="text-gray-400 text-sm line-clamp-2 group-hover:text-gray-300 transition-colors">
          {video.description}
-        </p>
+        </p> */}
      </div>
    </div>
  )
--- a/src/data/videos.ts
+++ b/src/data/videos.ts
@@ -1,7 +1,6 @@
 export interface Video {
  id: number
  title: string
-  description: string
  url: string
  thumbnail: string
  category: string
@@ -13,10 +12,9 @@ export interface Video {
 export const videos: Video[] = [
  {
    id: 1,
-    title: 'AI智能城市宣傳片',
-    description: '利用AI技術生成的未來城市概念視頻，展示智慧城市藍圖，融合3D建模與實拍素材',
+    title: '只在午夜吻我的王子',
    url: 'https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4',
-    thumbnail: 'https://picsum.photos/seed/cyh1/640/360',
+    thumbnail: '/images/post_01.png',
    category: '宣傳片',
    duration: '2:30',
    tech: ['Stable Diffusion', 'Runway Gen-2', 'After Effects'],
@@ -24,10 +22,9 @@ export const videos: Video[] = [
  },
  {
    id: 2,
-    title: '電商產品展示動畫',
-    description: 'AI驅動的產品3D展示動畫，多角度展示產品細節，適用於電商平臺',
+    title: '人类宠物店',
    url: 'https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4',
-    thumbnail: 'https://picsum.photos/seed/cyh2/640/360',
+    thumbnail: '/images/post_02.png',
    category: '產品展示',
    duration: '0:45',
    tech: ['Midjourney', 'Blender', 'ComfyUI'],
@@ -35,10 +32,9 @@ export const videos: Video[] = [
  },
  {
    id: 3,
-    title: '品牌故事短片',
-    description: '用AI講述品牌故事，情感與技術的完美結合，傳遞品牌價值觀',
+    title: '拉斯维加斯',
    url: 'https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4',
-    thumbnail: 'https://picsum.photos/seed/cyh3/640/360',
+    thumbnail: '/images/post_03.png',
    category: '品牌故事',
    duration: '3:15',
    tech: ['Pika Labs', 'ElevenLabs', 'Premiere Pro'],
@@ -46,10 +42,9 @@ export const videos: Video[] = [
  },
  {
    id: 4,
-    title: '抖音爆款短視頻',
-    description: '爲社交媒體平臺定製的AI短視頻內容，高完播率，引爆流量',
+    title: '破碎镜面后的国王',
    url: 'https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4',
-    thumbnail: 'https://picsum.photos/seed/cyh4/640/360',
+    thumbnail: '/images/post_04.png',
    category: '社交媒體',
    duration: '0:15',
    tech: ['HeyGen', 'CapCut', 'D-ID'],
@@ -57,10 +52,9 @@ export const videos: Video[] = [
  },
  {
    id: 5,
-    title: '在線課程片頭',
-    description: 'AI生成的教育內容片頭，讓知識傳播更生動有趣',
+    title: '她焚烧了神的王座',
    url: 'https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4',
-    thumbnail: 'https://picsum.photos/seed/cyh5/640/360',
+    thumbnail: '/images/post_05.png',
    category: '教育培訓',
    duration: '1:00',
    tech: ['Synthesia', 'D-ID', 'After Effects'],
@@ -69,80 +63,13 @@ export const videos: Video[] = [
  {
    id: 6,
    title: 'AI數字人主播',
-    description: 'AI數字人技術，7x24小時不間斷直播，降低人力成本',
    url: 'https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4',
-    thumbnail: 'https://picsum.photos/seed/cyh6/640/360',
+    thumbnail: '/images/post_06.png',
    category: '數字人',
    duration: '1:30',
    tech: ['HeyGen', 'D-ID', 'ElevenLabs'],
    client: '某電商平臺'
  },
-  {
-    id: 7,
-    title: '房地產虛擬看房',
-    description: 'AI生成的房產展示視頻，虛擬漫遊+實景融合，提升看房體驗',
-    url: 'https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4',
-    thumbnail: 'https://picsum.photos/seed/cyh7/640/360',
-    category: '產品展示',
-    duration: '2:00',
-    tech: ['Unreal Engine', 'Stable Diffusion', 'Runway'],
-    client: '某地產開發商'
-  },
-  {
-    id: 8,
-    title: '遊戲宣傳CG',
-    description: 'AI輔助生成的遊戲宣傳CG，史詩級視覺效果，成本僅爲傳統1/10',
-    url: 'https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4',
-    thumbnail: 'https://picsum.photos/seed/cyh8/640/360',
-    category: '宣傳片',
-    duration: '1:45',
-    tech: ['Midjourney', 'Runway Gen-2', 'Nuke'],
-    client: '某遊戲公司'
-  },
-  {
-    id: 9,
-    title: '醫療科普動畫',
-    description: '專業醫療知識可視化，AI生成的醫學動畫讓複雜概念通俗易懂',
-    url: 'https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4',
-    thumbnail: 'https://picsum.photos/seed/cyh9/640/360',
-    category: '教育培訓',
-    duration: '2:20',
-    tech: ['Stable Diffusion', 'After Effects', 'Blender'],
-    client: '某醫療機構'
-  },
-  {
-    id: 10,
-    title: '餐飲品牌宣傳片',
-    description: 'AI生成的美食展示視頻，誘人畫面+品牌故事，提升品牌調性',
-    url: 'https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4',
-    thumbnail: 'https://picsum.photos/seed/cyh10/640/360',
-    category: '品牌故事',
-    duration: '1:50',
-    tech: ['Midjourney', 'Pika Labs', 'Premiere Pro'],
-    client: '某連鎖餐飲品牌'
-  },
-  {
-    id: 11,
-    title: '小紅書種草視頻',
-    description: '爲小紅書平臺定製的種草視頻，高轉化率，精準觸達目標用戶',
-    url: 'https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4',
-    thumbnail: 'https://picsum.photos/seed/cyh11/640/360',
-    category: '社交媒體',
-    duration: '0:30',
-    tech: ['HeyGen', 'CapCut', 'ComfyUI'],
-    client: '某美妝品牌'
-  },
-  {
-    id: 12,
-    title: 'AI虛擬偶像直播',
-    description: '全棧AI虛擬偶像解決方案，從形象設計到實時驅動，一站式服務',
-    url: 'https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4',
-    thumbnail: 'https://picsum.photos/seed/cyh12/640/360',
-    category: '數字人',
-    duration: '3:00',
-    tech: ['D-ID', 'ElevenLabs', 'OBS'],
-    client: '某直播平臺'
-  }
 ]

 export const categories = ['全部', '宣傳片', '產品展示', '品牌故事', '社交媒體', '教育培訓', '數字人']
--- a/src/index.css
+++ b/src/index.css
@@ -4,6 +4,10 @@
@tailwind components;
@tailwind utilities;

+html {
+  scroll-behavior: smooth;
+}
+
 * {
  margin: 0;
  padding: 0;
--- a/src/pages/About.tsx
+++ b/src/pages/About.tsx
@@ -69,11 +69,6 @@ export default function About() {
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
            <ScrollReveal direction="left">
              <div>
-                <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-6 text-white">
                  用 AI 重新定義 <span className="gradient-text">視頻創作</span>
                </h2>
@@ -129,15 +124,8 @@ export default function About() {
                    key={index}
                    className="glass-card rounded-2xl p-6 text-center hover-lift group"
                  >
-                    <div
-                      className={`w-14 h-14 mx-auto mb-3 rounded-xl bg-gradient-to-br ${stat.gradient} flex items-center justify-center opacity-80 group-hover:opacity-100 transition-opacity`}
-                    >
-                      <span className="text-xl font-bold text-white">
-                        {stat.suffix === "%" ? "%" : "+"}
-                      </span>
-                    </div>
-                    <AnimatedCounter end={stat.end} suffix={stat.suffix} />
                    <p className="text-gray-400 mt-2 text-sm">{stat.label}</p>
+                    <AnimatedCounter end={stat.end} suffix={stat.suffix} />
                  </div>
                ))}
              </div>
@@ -196,7 +184,7 @@ export default function About() {
            </div>
          </ScrollReveal>

-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
            {[
              {
                icon: (
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -62,16 +62,9 @@ export default function Home() {
          <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 />
+                <div className="gradient-text mb-5">AI短視頻</div>
+
                <span className="text-white">讓創意觸手可及</span>
              </h1>

@@ -353,21 +346,17 @@ export default function Home() {
        <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生成的精彩視頻
+                探索我們用AI技術創作的精彩短視頻作品
              </p>
            </div>
          </ScrollReveal>

-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
+          <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 mb-12">
            {featuredVideos.map((video, index) => (
              <ScrollReveal key={video.id} delay={index * 100}>
                <VideoCard video={video} onClick={setSelectedVideo} />
@@ -409,11 +398,7 @@ export default function Home() {
        <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>
--- a/src/pages/Works.tsx
+++ b/src/pages/Works.tsx
@@ -28,12 +28,12 @@ export default function Works() {
                <span className="gradient-text">作品</span> 展示
              </h1>
              <p className="text-lg text-gray-400 max-w-2xl mx-auto">
-                探索我們用AI技術創作的精彩短視頻作品，點擊即可觀看
+                探索我們用AI技術創作的精彩短視頻作品
              </p>
            </div>
          </ScrollReveal>

-          {/* Category Filter */}
+          {/* Category Filter
          <ScrollReveal delay={100}>
            <div className="flex flex-wrap justify-center gap-3 mb-12">
              {categories.map((category) => (
@@ -50,17 +50,15 @@ export default function Works() {
                </button>
              ))}
            </div>
-          </ScrollReveal>
+          </ScrollReveal> */}

          {/* Video Count */}
-          <div className="text-center mb-8">
-            <p className="text-gray-500 text-sm">
-              共 <span className="text-purple-400 font-semibold">{filteredVideos.length}</span> 個作品
-            </p>
+          <div className="text-center mb-10">
+           
          </div>

          {/* Video Grid */}
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
            {filteredVideos.map((video, index) => (
              <ScrollReveal key={video.id} delay={index * 50}>
                <VideoCard video={video} onClick={setSelectedVideo} />