From dabe6f68b8d9482a69cc7786514b5fdddb91cae0 Mon Sep 17 00:00:00 2001 From: zhxiao1124 Date: Sat, 27 Jun 2026 15:03:22 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E5=85=A8?= =?UTF-8?q?=E7=AB=99SVG=E5=9B=BE=E6=A0=87=E6=A0=B7=E5=BC=8F=E4=B8=8E?= =?UTF-8?q?=E8=A7=86=E8=A7=89=E7=BB=86=E8=8A=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 统一调整多数图标描边宽度为1.8/2.5，优化视觉一致性 - 重构多个页面的空状态、功能项图标，替换为更贴合场景的矢量图形 - 补充视频数据的描述字段，完善视频卡片信息 - 调整繁体文本为简体中文规范写法 - 移除冗余的标题标签容器，简化页面布局结构 - 修正统计组件的动画组件排版顺序 --- src/components/CaseComparison.tsx | 11 +++++---- src/components/FAQ.tsx | 2 +- src/components/ProcessAnimation.tsx | 27 ++++++++++++++------ src/components/ServiceScenes.tsx | 29 ++++++++++------------ src/components/VideoModal.tsx | 3 ++- src/data/videos.ts | 19 ++++++++++----- src/pages/About.tsx | 34 +++++++------------------- src/pages/Contact.tsx | 12 ++++++--- src/pages/Home.tsx | 38 +++++++++++++++-------------- src/pages/Works.tsx | 4 ++- 10 files changed, 94 insertions(+), 85 deletions(-) diff --git a/src/components/CaseComparison.tsx b/src/components/CaseComparison.tsx index 46147ca..a3b50d9 100644 --- a/src/components/CaseComparison.tsx +++ b/src/components/CaseComparison.tsx @@ -60,9 +60,7 @@ export default function CaseComparison() {
-
- 效率對比 -
+

AI vs 傳統 製作對比

@@ -99,7 +97,10 @@ export default function CaseComparison() {
- + + + +

傳統制作

@@ -133,7 +134,7 @@ export default function CaseComparison() {
- +

AI製作

diff --git a/src/components/FAQ.tsx b/src/components/FAQ.tsx index 574d633..2099058 100644 --- a/src/components/FAQ.tsx +++ b/src/components/FAQ.tsx @@ -58,7 +58,7 @@ export default function FAQ() { stroke="currentColor" viewBox="0 0 24 24" > - +
- + + ), gradient: 'from-purple-500 to-pink-500' @@ -21,7 +22,15 @@ const steps = [ detail: '基於需求文檔，我們使用AI快速生成多個創意方案和腳本草稿。您可以從中選擇最喜歡的方案，或融合多個方案的優點。', icon: ( - + + + + + + + + + ), gradient: 'from-blue-500 to-cyan-500' @@ -33,7 +42,10 @@ const steps = [ detail: '根據確認的腳本，我們使用Midjourney、Runway、Stable Diffusion等AI工具生成視頻素材，包括畫面、配音、字幕等。', icon: ( - + + + + ), gradient: 'from-green-500 to-emerald-500' @@ -45,7 +57,8 @@ const steps = [ detail: 'AI生成的初稿會由專業後期團隊進行精修，包括畫面調色、節奏調整、特效添加等，確保最終效果達到商用標準。', icon: ( - + + ), gradient: 'from-orange-500 to-yellow-500' @@ -57,7 +70,8 @@ const steps = [ detail: '我們提供2-3輪免費修改，直至您完全滿意。交付內容包括：成品視頻、源文件、字體版權證明等，方便您後續二次編輯。', icon: ( - + + ), gradient: 'from-pink-500 to-rose-500' @@ -72,9 +86,6 @@ export default function ProcessAnimation() {
-
- 製作流程 -

從創意到成片，高效交付

diff --git a/src/components/ServiceScenes.tsx b/src/components/ServiceScenes.tsx index 1661eec..6056bc9 100644 --- a/src/components/ServiceScenes.tsx +++ b/src/components/ServiceScenes.tsx @@ -6,8 +6,9 @@ const scenes = [ id: 'social', icon: ( - - + + + ), title: '社交媒體', @@ -19,7 +20,9 @@ const scenes = [ id: 'ecommerce', icon: ( - + + + ), title: '電商營銷', @@ -31,7 +34,8 @@ const scenes = [ id: 'education', icon: ( - + + ), title: '教育培訓', @@ -43,7 +47,10 @@ const scenes = [ id: 'brand', icon: ( - + + + + ), title: '企業宣傳', @@ -118,7 +125,7 @@ export default function ServiceScenes() {
- +
{feature} @@ -126,16 +133,6 @@ export default function ServiceScenes() { ))}
-
-
-
- - - -
-

點擊觀看 {activeScene.title} 案例視頻

-
-
diff --git a/src/components/VideoModal.tsx b/src/components/VideoModal.tsx index 16c939d..ee25d4e 100644 --- a/src/components/VideoModal.tsx +++ b/src/components/VideoModal.tsx @@ -39,7 +39,8 @@ export default function VideoModal({ video, onClose }: VideoModalProps) { className="absolute top-4 right-4 z-10 w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center transition-colors" > - + + diff --git a/src/data/videos.ts b/src/data/videos.ts index 9fe9d17..665144b 100644 --- a/src/data/videos.ts +++ b/src/data/videos.ts @@ -1,6 +1,7 @@ export interface Video { id: number title: string + description: string url: string thumbnail: string category: string @@ -13,6 +14,7 @@ export const videos: Video[] = [ { id: 1, title: '只在午夜吻我的王子', + description: 'AI技術生成的浪漫主題宣傳短片，融合夢幻視覺效果與細膩情感表達', url: 'https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4', thumbnail: '/images/post_01.png', category: '宣傳片', @@ -22,7 +24,8 @@ export const videos: Video[] = [ }, { id: 2, - title: '人类宠物店', + title: '人類寵物店', + description: 'AI驅動的產品3D展示動畫，多角度展示產品細節，適用於電商平台', url: 'https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4', thumbnail: '/images/post_02.png', category: '產品展示', @@ -32,7 +35,8 @@ export const videos: Video[] = [ }, { id: 3, - title: '拉斯维加斯', + title: '拉斯維加斯', + description: '用AI講述品牌故事，情感與技術的完美結合，傳遞品牌價值觀', url: 'https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4', thumbnail: '/images/post_03.png', category: '品牌故事', @@ -42,7 +46,8 @@ export const videos: Video[] = [ }, { id: 4, - title: '破碎镜面后的国王', + title: '破碎鏡面後的國王', + description: '為社交媒體平台定製的AI短視頻內容，高完播率，引爆流量', url: 'https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4', thumbnail: '/images/post_04.png', category: '社交媒體', @@ -52,23 +57,25 @@ export const videos: Video[] = [ }, { id: 5, - title: '她焚烧了神的王座', + title: '她焚燒了神的王座', + description: 'AI生成的教育內容片頭，讓知識傳播更生動有趣', url: 'https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4', thumbnail: '/images/post_05.png', category: '教育培訓', duration: '1:00', tech: ['Synthesia', 'D-ID', 'After Effects'], - client: '某在線教育平臺' + client: '某在線教育平台' }, { id: 6, title: 'AI數字人主播', + description: 'AI數字人技術，7x24小時不間斷直播，降低人力成本', url: 'https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4', thumbnail: '/images/post_06.png', category: '數字人', duration: '1:30', tech: ['HeyGen', 'D-ID', 'ElevenLabs'], - client: '某電商平臺' + client: '某電商平台' }, ] diff --git a/src/pages/About.tsx b/src/pages/About.tsx index 10efec4..8f0a623 100644 --- a/src/pages/About.tsx +++ b/src/pages/About.tsx @@ -194,12 +194,10 @@ export default function About() { stroke="currentColor" viewBox="0 0 24 24" > - + + + + ), title: "AI生成技術", @@ -214,18 +212,8 @@ export default function About() { stroke="currentColor" viewBox="0 0 24 24" > - - + + ), title: "智能編輯", @@ -243,8 +231,8 @@ export default function About() { ), @@ -281,11 +269,7 @@ export default function About() {
-
- - 服務流程 - -
+

我們的 工作流程

diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx index ba40c6e..9f4966d 100644 --- a/src/pages/Contact.tsx +++ b/src/pages/Contact.tsx @@ -149,7 +149,8 @@ export default function Contact() { { icon: ( - + + ), title: '郵箱', @@ -159,7 +160,10 @@ export default function Contact() { { icon: ( - + + + + ), title: '電話', @@ -169,8 +173,8 @@ export default function Contact() { { icon: ( - - + + ), title: '地址', diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 387ed1b..8a00ed2 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -89,8 +89,8 @@ export default function Home() { @@ -120,14 +120,14 @@ export default function Home() {
- {/* Right - Video Showcase */} + {/* Right - Image Showcase */}
- {/* Main Video Card */} + {/* Main Image Card */}
-

AI生成的品牌宣傳片

+

AI生成的品牌图片

@@ -148,8 +148,8 @@ export default function Home() {
@@ -177,9 +177,10 @@ export default function Home() { +
@@ -215,8 +216,8 @@ export default function Home() { ].map((stat, index) => (
-

{stat.label}

+
))} @@ -251,8 +252,8 @@ export default function Home() { ), @@ -271,8 +272,8 @@ export default function Home() { ), @@ -291,9 +292,10 @@ export default function Home() { + ), title: "成本優化", @@ -371,8 +373,8 @@ export default function Home() { diff --git a/src/pages/Works.tsx b/src/pages/Works.tsx index d570f7d..97cb98a 100644 --- a/src/pages/Works.tsx +++ b/src/pages/Works.tsx @@ -70,7 +70,9 @@ export default function Works() {
- + + +

暫無該分類的作品