refactor: 优化全站SVG图标样式与视觉细节
- 统一调整多数图标描边宽度为1.8/2.5,优化视觉一致性 - 重构多个页面的空状态、功能项图标,替换为更贴合场景的矢量图形 - 补充视频数据的描述字段,完善视频卡片信息 - 调整繁体文本为简体中文规范写法 - 移除冗余的标题标签容器,简化页面布局结构 - 修正统计组件的动画组件排版顺序
This commit is contained in:
@@ -60,9 +60,7 @@ export default function CaseComparison() {
|
|||||||
<div className="max-w-7xl mx-auto">
|
<div className="max-w-7xl mx-auto">
|
||||||
<ScrollReveal>
|
<ScrollReveal>
|
||||||
<div className="text-center mb-16">
|
<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">
|
<h2 className="text-4xl md:text-5xl font-bold mb-4">
|
||||||
AI vs 傳統 <span className="gradient-text">製作對比</span>
|
AI vs 傳統 <span className="gradient-text">製作對比</span>
|
||||||
</h2>
|
</h2>
|
||||||
@@ -99,7 +97,10 @@ export default function CaseComparison() {
|
|||||||
<div className="flex items-center gap-3 mb-8">
|
<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">
|
<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">
|
<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" />
|
<circle cx="12" cy="12" r="9" strokeWidth={1.8} />
|
||||||
|
<path strokeLinecap="round" strokeWidth={1.8} d="M12 7v5.5" />
|
||||||
|
<path strokeLinecap="round" strokeWidth={1.8} d="M12 14h.01" />
|
||||||
|
<path strokeLinecap="round" strokeWidth={1.8} d="M9 3l3 3 3-3" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-xl font-bold text-white">傳統制作</h3>
|
<h3 className="text-xl font-bold text-white">傳統制作</h3>
|
||||||
@@ -133,7 +134,7 @@ export default function CaseComparison() {
|
|||||||
<div className="flex items-center gap-3 mb-8">
|
<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">
|
<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">
|
<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" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M12 3l-3 8h4.5l-.5 10 7-9h-4.5l.5-9" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-xl font-bold text-white">AI製作</h3>
|
<h3 className="text-xl font-bold text-white">AI製作</h3>
|
||||||
|
|||||||
@@ -58,7 +58,7 @@ export default function FAQ() {
|
|||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
>
|
>
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M6 9l6 6 6-6" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<div
|
<div
|
||||||
|
|||||||
@@ -9,7 +9,8 @@ const steps = [
|
|||||||
detail: '我們會安排專屬項目經理與您進行1對1溝通,瞭解視頻用途、風格偏好、核心賣點等關鍵信息,並輸出詳細的需求文檔。',
|
detail: '我們會安排專屬項目經理與您進行1對1溝通,瞭解視頻用途、風格偏好、核心賣點等關鍵信息,並輸出詳細的需求文檔。',
|
||||||
icon: (
|
icon: (
|
||||||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18 6.3a5 5 0 00-12 0C6 6.3 3 10.5 3 14c0 2 1.2 3.7 3 4.6V21l3.3-2c.9.3 1.8.4 2.7.4s1.8-.1 2.7-.4L18 21v-2.4c1.8-.9 3-2.6 3-4.6 0-3.5-3-7.7-3-7.7z" />
|
||||||
|
<path strokeLinecap="round" strokeWidth={2} d="M9 11h.03M12 11h.03M15 11h.03" />
|
||||||
</svg>
|
</svg>
|
||||||
),
|
),
|
||||||
gradient: 'from-purple-500 to-pink-500'
|
gradient: 'from-purple-500 to-pink-500'
|
||||||
@@ -21,7 +22,15 @@ const steps = [
|
|||||||
detail: '基於需求文檔,我們使用AI快速生成多個創意方案和腳本草稿。您可以從中選擇最喜歡的方案,或融合多個方案的優點。',
|
detail: '基於需求文檔,我們使用AI快速生成多個創意方案和腳本草稿。您可以從中選擇最喜歡的方案,或融合多個方案的優點。',
|
||||||
icon: (
|
icon: (
|
||||||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M10 21v-1a4 4 0 01-4-4v-1" />
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M14 21v-1a4 4 0 004-4v-1" />
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M10 17.5h4" />
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M12 3v6" />
|
||||||
|
<path strokeLinecap="round" strokeWidth={1.8} d="M5.6 5.6L7 7" />
|
||||||
|
<path strokeLinecap="round" strokeWidth={1.8} d="M18.4 5.6L17 7" />
|
||||||
|
<path strokeLinecap="round" d="M12 11a3 3 0 00-9 0c0 2.5 1.5 4 3 4.8" />
|
||||||
|
<path strokeLinecap="round" d="M12 11a3 3 0 019 0c0 2.5-1.5 4-3 4.8" />
|
||||||
|
<circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none" />
|
||||||
</svg>
|
</svg>
|
||||||
),
|
),
|
||||||
gradient: 'from-blue-500 to-cyan-500'
|
gradient: 'from-blue-500 to-cyan-500'
|
||||||
@@ -33,7 +42,10 @@ const steps = [
|
|||||||
detail: '根據確認的腳本,我們使用Midjourney、Runway、Stable Diffusion等AI工具生成視頻素材,包括畫面、配音、字幕等。',
|
detail: '根據確認的腳本,我們使用Midjourney、Runway、Stable Diffusion等AI工具生成視頻素材,包括畫面、配音、字幕等。',
|
||||||
icon: (
|
icon: (
|
||||||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
<rect x="2" y="3" width="20" height="14" rx="2" strokeWidth={1.8} />
|
||||||
|
<path strokeLinecap="round" strokeWidth={1.8} d="M8 21h8" />
|
||||||
|
<path strokeLinecap="round" strokeWidth={1.8} d="M12 17v4" />
|
||||||
|
<circle cx="12" cy="10" r="1.5" fill="currentColor" stroke="none" />
|
||||||
</svg>
|
</svg>
|
||||||
),
|
),
|
||||||
gradient: 'from-green-500 to-emerald-500'
|
gradient: 'from-green-500 to-emerald-500'
|
||||||
@@ -45,7 +57,8 @@ const steps = [
|
|||||||
detail: 'AI生成的初稿會由專業後期團隊進行精修,包括畫面調色、節奏調整、特效添加等,確保最終效果達到商用標準。',
|
detail: 'AI生成的初稿會由專業後期團隊進行精修,包括畫面調色、節奏調整、特效添加等,確保最終效果達到商用標準。',
|
||||||
icon: (
|
icon: (
|
||||||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M13.7 3.3a2.4 2.4 0 013.4 3.4l-9 9L4 17l1.3-4.1 8.4-8.4z" />
|
||||||
|
<path strokeLinecap="round" strokeWidth={1.8} d="M14.5 4l4.5 4.5" />
|
||||||
</svg>
|
</svg>
|
||||||
),
|
),
|
||||||
gradient: 'from-orange-500 to-yellow-500'
|
gradient: 'from-orange-500 to-yellow-500'
|
||||||
@@ -57,7 +70,8 @@ const steps = [
|
|||||||
detail: '我們提供2-3輪免費修改,直至您完全滿意。交付內容包括:成品視頻、源文件、字體版權證明等,方便您後續二次編輯。',
|
detail: '我們提供2-3輪免費修改,直至您完全滿意。交付內容包括:成品視頻、源文件、字體版權證明等,方便您後續二次編輯。',
|
||||||
icon: (
|
icon: (
|
||||||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
<circle cx="12" cy="12" r="9" strokeWidth={1.8} />
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12.5l2.5 2.5 5-5" />
|
||||||
</svg>
|
</svg>
|
||||||
),
|
),
|
||||||
gradient: 'from-pink-500 to-rose-500'
|
gradient: 'from-pink-500 to-rose-500'
|
||||||
@@ -72,9 +86,6 @@ export default function ProcessAnimation() {
|
|||||||
<div className="max-w-7xl mx-auto">
|
<div className="max-w-7xl mx-auto">
|
||||||
<ScrollReveal>
|
<ScrollReveal>
|
||||||
<div className="text-center mb-16">
|
<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">
|
<h2 className="text-4xl md:text-5xl font-bold mb-4">
|
||||||
從創意到成片,<span className="gradient-text">高效交付</span>
|
從創意到成片,<span className="gradient-text">高效交付</span>
|
||||||
</h2>
|
</h2>
|
||||||
|
|||||||
@@ -6,8 +6,9 @@ const scenes = [
|
|||||||
id: 'social',
|
id: 'social',
|
||||||
icon: (
|
icon: (
|
||||||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<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" />
|
<rect x="5" y="2" width="14" height="20" rx="3" strokeWidth={1.8} />
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 11v6m-3-3h6" />
|
<path strokeLinecap="round" strokeWidth={1.8} d="M12 18h.01" />
|
||||||
|
<path strokeLinecap="round" strokeWidth={1.5} d="M9 6h6" />
|
||||||
</svg>
|
</svg>
|
||||||
),
|
),
|
||||||
title: '社交媒體',
|
title: '社交媒體',
|
||||||
@@ -19,7 +20,9 @@ const scenes = [
|
|||||||
id: 'ecommerce',
|
id: 'ecommerce',
|
||||||
icon: (
|
icon: (
|
||||||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<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" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M6 2h12a4 4 0 014 4v8a4 4 0 01-4 4H6a4 4 0 01-4-4V6a4 4 0 014-4z" />
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M9 9l-2 2 2 2" />
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M15 9l2 2-2 2" />
|
||||||
</svg>
|
</svg>
|
||||||
),
|
),
|
||||||
title: '電商營銷',
|
title: '電商營銷',
|
||||||
@@ -31,7 +34,8 @@ const scenes = [
|
|||||||
id: 'education',
|
id: 'education',
|
||||||
icon: (
|
icon: (
|
||||||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<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" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M4 6a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H6a2 2 0 01-2-2V6z" />
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M8 10h8M8 14h6" />
|
||||||
</svg>
|
</svg>
|
||||||
),
|
),
|
||||||
title: '教育培訓',
|
title: '教育培訓',
|
||||||
@@ -43,7 +47,10 @@ const scenes = [
|
|||||||
id: 'brand',
|
id: 'brand',
|
||||||
icon: (
|
icon: (
|
||||||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<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" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M3 21h18" />
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M5 21V7l3-4h8l3 4v14" />
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M9 21v-6h6v6" />
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M9 9h6M9 13h6" />
|
||||||
</svg>
|
</svg>
|
||||||
),
|
),
|
||||||
title: '企業宣傳',
|
title: '企業宣傳',
|
||||||
@@ -118,7 +125,7 @@ export default function ServiceScenes() {
|
|||||||
<div key={index} className="flex items-center gap-3 p-4 rounded-xl bg-white/5">
|
<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`}>
|
<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">
|
<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" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<span className="text-gray-300">{feature}</span>
|
<span className="text-gray-300">{feature}</span>
|
||||||
@@ -126,16 +133,6 @@ export default function ServiceScenes() {
|
|||||||
))}
|
))}
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -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"
|
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"
|
||||||
>
|
>
|
||||||
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
<path strokeLinecap="round" strokeWidth={2.5} d="M18 6L6 18" />
|
||||||
|
<path strokeLinecap="round" strokeWidth={2.5} d="M6 6l12 12" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
export interface Video {
|
export interface Video {
|
||||||
id: number
|
id: number
|
||||||
title: string
|
title: string
|
||||||
|
description: string
|
||||||
url: string
|
url: string
|
||||||
thumbnail: string
|
thumbnail: string
|
||||||
category: string
|
category: string
|
||||||
@@ -13,6 +14,7 @@ export const videos: Video[] = [
|
|||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
title: '只在午夜吻我的王子',
|
title: '只在午夜吻我的王子',
|
||||||
|
description: 'AI技術生成的浪漫主題宣傳短片,融合夢幻視覺效果與細膩情感表達',
|
||||||
url: 'https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4',
|
url: 'https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4',
|
||||||
thumbnail: '/images/post_01.png',
|
thumbnail: '/images/post_01.png',
|
||||||
category: '宣傳片',
|
category: '宣傳片',
|
||||||
@@ -22,7 +24,8 @@ export const videos: Video[] = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
title: '人类宠物店',
|
title: '人類寵物店',
|
||||||
|
description: 'AI驅動的產品3D展示動畫,多角度展示產品細節,適用於電商平台',
|
||||||
url: 'https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4',
|
url: 'https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4',
|
||||||
thumbnail: '/images/post_02.png',
|
thumbnail: '/images/post_02.png',
|
||||||
category: '產品展示',
|
category: '產品展示',
|
||||||
@@ -32,7 +35,8 @@ export const videos: Video[] = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
title: '拉斯维加斯',
|
title: '拉斯維加斯',
|
||||||
|
description: '用AI講述品牌故事,情感與技術的完美結合,傳遞品牌價值觀',
|
||||||
url: 'https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4',
|
url: 'https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4',
|
||||||
thumbnail: '/images/post_03.png',
|
thumbnail: '/images/post_03.png',
|
||||||
category: '品牌故事',
|
category: '品牌故事',
|
||||||
@@ -42,7 +46,8 @@ export const videos: Video[] = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 4,
|
id: 4,
|
||||||
title: '破碎镜面后的国王',
|
title: '破碎鏡面後的國王',
|
||||||
|
description: '為社交媒體平台定製的AI短視頻內容,高完播率,引爆流量',
|
||||||
url: 'https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4',
|
url: 'https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4',
|
||||||
thumbnail: '/images/post_04.png',
|
thumbnail: '/images/post_04.png',
|
||||||
category: '社交媒體',
|
category: '社交媒體',
|
||||||
@@ -52,23 +57,25 @@ export const videos: Video[] = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 5,
|
id: 5,
|
||||||
title: '她焚烧了神的王座',
|
title: '她焚燒了神的王座',
|
||||||
|
description: 'AI生成的教育內容片頭,讓知識傳播更生動有趣',
|
||||||
url: 'https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4',
|
url: 'https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4',
|
||||||
thumbnail: '/images/post_05.png',
|
thumbnail: '/images/post_05.png',
|
||||||
category: '教育培訓',
|
category: '教育培訓',
|
||||||
duration: '1:00',
|
duration: '1:00',
|
||||||
tech: ['Synthesia', 'D-ID', 'After Effects'],
|
tech: ['Synthesia', 'D-ID', 'After Effects'],
|
||||||
client: '某在線教育平臺'
|
client: '某在線教育平台'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 6,
|
id: 6,
|
||||||
title: 'AI數字人主播',
|
title: 'AI數字人主播',
|
||||||
|
description: 'AI數字人技術,7x24小時不間斷直播,降低人力成本',
|
||||||
url: 'https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4',
|
url: 'https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4',
|
||||||
thumbnail: '/images/post_06.png',
|
thumbnail: '/images/post_06.png',
|
||||||
category: '數字人',
|
category: '數字人',
|
||||||
duration: '1:30',
|
duration: '1:30',
|
||||||
tech: ['HeyGen', 'D-ID', 'ElevenLabs'],
|
tech: ['HeyGen', 'D-ID', 'ElevenLabs'],
|
||||||
client: '某電商平臺'
|
client: '某電商平台'
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|||||||
@@ -194,12 +194,10 @@ export default function About() {
|
|||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
>
|
>
|
||||||
<path
|
<rect x="2" y="3" width="20" height="14" rx="2" strokeWidth={1.8} />
|
||||||
strokeLinecap="round"
|
<path strokeLinecap="round" strokeWidth={1.8} d="M8 21h8" />
|
||||||
strokeLinejoin="round"
|
<path strokeLinecap="round" strokeWidth={1.8} d="M12 17v4" />
|
||||||
strokeWidth={2}
|
<circle cx="12" cy="10" r="1.5" fill="currentColor" stroke="none" />
|
||||||
d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
|
|
||||||
/>
|
|
||||||
</svg>
|
</svg>
|
||||||
),
|
),
|
||||||
title: "AI生成技術",
|
title: "AI生成技術",
|
||||||
@@ -214,18 +212,8 @@ export default function About() {
|
|||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
>
|
>
|
||||||
<path
|
<circle cx="12" cy="12" r="9" strokeWidth={1.8} />
|
||||||
strokeLinecap="round"
|
<path fill="currentColor" stroke="none" d="M10 8l6 4-6 4V8z" />
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
||||||
/>
|
|
||||||
</svg>
|
</svg>
|
||||||
),
|
),
|
||||||
title: "智能編輯",
|
title: "智能編輯",
|
||||||
@@ -243,8 +231,8 @@ export default function About() {
|
|||||||
<path
|
<path
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
strokeWidth={2}
|
strokeWidth={1.8}
|
||||||
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"
|
d="M15 5l-6 7h4l-1 7 6-7h-4l1-7z"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
),
|
),
|
||||||
@@ -281,11 +269,7 @@ export default function About() {
|
|||||||
<div className="max-w-7xl mx-auto">
|
<div className="max-w-7xl mx-auto">
|
||||||
<ScrollReveal>
|
<ScrollReveal>
|
||||||
<div className="text-center mb-16">
|
<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">
|
<h2 className="text-3xl md:text-4xl font-bold">
|
||||||
我們的 <span className="gradient-text">工作流程</span>
|
我們的 <span className="gradient-text">工作流程</span>
|
||||||
</h2>
|
</h2>
|
||||||
|
|||||||
@@ -149,7 +149,8 @@ export default function Contact() {
|
|||||||
{
|
{
|
||||||
icon: (
|
icon: (
|
||||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
<rect x="2" y="5" width="20" height="14" rx="2" strokeWidth={1.8} />
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M2 7l10 6 10-6" />
|
||||||
</svg>
|
</svg>
|
||||||
),
|
),
|
||||||
title: '郵箱',
|
title: '郵箱',
|
||||||
@@ -159,7 +160,10 @@ export default function Contact() {
|
|||||||
{
|
{
|
||||||
icon: (
|
icon: (
|
||||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M21 15v3a2 2 0 01-2 2H5a2 2 0 01-2-2v-3" />
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M8 3h8l2 3H6l2-3z" />
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M12 3v8" />
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M15 11a3 3 0 11-6 0" />
|
||||||
</svg>
|
</svg>
|
||||||
),
|
),
|
||||||
title: '電話',
|
title: '電話',
|
||||||
@@ -169,8 +173,8 @@ export default function Contact() {
|
|||||||
{
|
{
|
||||||
icon: (
|
icon: (
|
||||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7z" />
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
<circle cx="12" cy="9" r="2.5" strokeWidth={1.8} />
|
||||||
</svg>
|
</svg>
|
||||||
),
|
),
|
||||||
title: '地址',
|
title: '地址',
|
||||||
|
|||||||
@@ -89,8 +89,8 @@ export default function Home() {
|
|||||||
<path
|
<path
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
strokeWidth={2}
|
strokeWidth={2.5}
|
||||||
d="M17 8l4 4m0 0l-4 4m4-4H3"
|
d="M4 12h16m0 0l-6-6m6 6l-6 6"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
@@ -120,14 +120,14 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Right - Video Showcase */}
|
{/* Right - Image Showcase */}
|
||||||
<div className="hidden lg:block relative">
|
<div className="hidden lg:block relative">
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
{/* Main Video Card */}
|
{/* Main Image Card */}
|
||||||
<div className="glass-card rounded-3xl overflow-hidden transform rotate-2 hover:rotate-0 transition-transform duration-500">
|
<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="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="text-center">
|
||||||
<p className="text-gray-400">AI生成的品牌宣傳片</p>
|
<p className="text-gray-400">AI生成的品牌图片</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -148,8 +148,8 @@ export default function Home() {
|
|||||||
<path
|
<path
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
strokeWidth={2}
|
strokeWidth={1.8}
|
||||||
d="M13 10V3L4 14h7v7l9-11h-7z"
|
d="M12 3l-3 8h4.5l-.5 10 7-9h-4.5l.5-9"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
@@ -177,9 +177,10 @@ export default function Home() {
|
|||||||
<path
|
<path
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
strokeWidth={2}
|
strokeWidth={1.8}
|
||||||
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"
|
d="M12 2a10 10 0 1010 10" fill="none"
|
||||||
/>
|
/>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M12 6v6l3 2" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@@ -215,8 +216,8 @@ export default function Home() {
|
|||||||
].map((stat, index) => (
|
].map((stat, index) => (
|
||||||
<ScrollReveal key={index} delay={index * 100}>
|
<ScrollReveal key={index} delay={index * 100}>
|
||||||
<div className="text-center glass-card rounded-2xl p-6 hover-lift">
|
<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>
|
<p className="text-gray-400 mt-2 font-medium">{stat.label}</p>
|
||||||
|
<AnimatedCounter end={stat.end} suffix={stat.suffix} />
|
||||||
</div>
|
</div>
|
||||||
</ScrollReveal>
|
</ScrollReveal>
|
||||||
))}
|
))}
|
||||||
@@ -251,8 +252,8 @@ export default function Home() {
|
|||||||
<path
|
<path
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
strokeWidth={2}
|
strokeWidth={1.8}
|
||||||
d="M13 10V3L4 14h7v7l9-11h-7z"
|
d="M12 3l-3 8h4.5l-.5 10 7-9h-4.5l.5-9"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
),
|
),
|
||||||
@@ -271,8 +272,8 @@ export default function Home() {
|
|||||||
<path
|
<path
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
strokeWidth={2}
|
strokeWidth={1.8}
|
||||||
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"
|
d="M15 5l-6 7h4l-1 7 6-7h-4l1-7z"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
),
|
),
|
||||||
@@ -291,9 +292,10 @@ export default function Home() {
|
|||||||
<path
|
<path
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
strokeWidth={2}
|
strokeWidth={1.8}
|
||||||
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"
|
d="M12 2a10 10 0 1010 10" fill="none"
|
||||||
/>
|
/>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M12 6v6l3 2" />
|
||||||
</svg>
|
</svg>
|
||||||
),
|
),
|
||||||
title: "成本優化",
|
title: "成本優化",
|
||||||
@@ -371,8 +373,8 @@ export default function Home() {
|
|||||||
<path
|
<path
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
strokeWidth={2}
|
strokeWidth={2.5}
|
||||||
d="M17 8l4 4m0 0l-4 4m4-4H3"
|
d="M4 12h16m0 0l-6-6m6 6l-6 6"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
@@ -70,7 +70,9 @@ export default function Works() {
|
|||||||
<div className="text-center py-20">
|
<div className="text-center py-20">
|
||||||
<div className="w-20 h-20 mx-auto mb-4 rounded-full glass-card flex items-center justify-center">
|
<div className="w-20 h-20 mx-auto mb-4 rounded-full glass-card flex items-center justify-center">
|
||||||
<svg className="w-10 h-10 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="w-10 h-10 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z" />
|
<rect x="2" y="4" width="20" height="16" rx="2" strokeWidth={1.8} />
|
||||||
|
<path strokeLinecap="round" strokeWidth={1.8} d="M7 4V2m10 0v2" />
|
||||||
|
<path strokeLinecap="round" strokeWidth={1.8} d="M7 13h10M7 17h6" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-gray-400 text-lg mb-2">暫無該分類的作品</p>
|
<p className="text-gray-400 text-lg mb-2">暫無該分類的作品</p>
|
||||||
|
|||||||
Reference in New Issue
Block a user