onionanime/cyh-web-hk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: 切换为香港繁体本地化版本，优化构建配置

Browse Source 
1.  全局替换简体中文文本为香港繁体本地化译文
2.  新增pnpm-workspace.yaml配置esbuild构建允许项
3.  vite.config中启用esbuild压缩并移除注释
4.  调整页脚联系方式与公司名称为香港本地格式
This commit is contained in:
zhxiao1124
2026-06-26 17:11:49 +08:00
parent 44f0b43fcc
commit 53e312af69
18 changed files with 2289 additions and 3218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@@ -1,10 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh-HK">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HK CYH Technology - AI短视频专家</title> <title>HK CYH Technology - AI短視頻專家</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

2761
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1669
pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

2
pnpm-workspace.yaml Normal file
View File

@@ -0,0 +1,2 @@
allowBuilds:
esbuild: true

62
src/components/CaseComparison.tsx
View File

@@ -4,50 +4,50 @@ import ScrollReveal from './ScrollReveal'
const comparisons = [ const comparisons = [
{ {
id: 1, id: 1,
title: '品牌宣传片', title: '品牌宣傳片',
traditional: { traditional: {
time: '2-4周', time: '2-4周',
cost: '¥50,000-200,000', cost: '¥50,000-200,000',
team: '导演+摄影+后期+演员', team: '導演+攝影+後期+演員',
process: '脚本撰写→选角→拍摄→后期制作→修改→交付' process: '腳本撰寫→選角→拍攝→後期製作→修改→交付'
}, },
ai: { ai: {
time: '1-3天', time: '1-3天',
cost: '¥5,000-20,000', cost: '¥5,000-20,000',
team: 'AI工程师+创意策划', team: 'AI工程師+創意策劃',
process: '需求确认→AI生成→人工优化→交付' process: '需求確認→AI生成→人工優化→交付'
} }
}, },
{ {
id: 2, id: 2,
title: '产品展示视频', title: '產品展示視頻',
traditional: { traditional: {
time: '1-2周', time: '1-2周',
cost: '¥20,000-80,000', cost: '¥20,000-80,000',
team: '摄影师+灯光师+后期', team: '攝影師+燈光師+後期',
process: '产品准备→场景搭建→拍摄→精修→交付' process: '產品準備→場景搭建→拍攝→精修→交付'
}, },
ai: { ai: {
time: '4-8小时', time: '4-8小時',
cost: '¥2,000-8,000', cost: '¥2,000-8,000',
team: 'AI工程师', team: 'AI工程師',
process: '产品图片→AI建模→动画生成→交付' process: '產品圖片→AI建模→動畫生成→交付'
} }
}, },
{ {
id: 3, id: 3,
title: '社交媒体短视频', title: '社交媒體短視頻',
traditional: { traditional: {
time: '3-7天', time: '3-7天',
cost: '¥10,000-30,000', cost: '¥10,000-30,000',
team: '编导+拍摄+剪辑', team: '編導+拍攝+剪輯',
process: '策划→拍摄→剪辑→字幕→交付' process: '策劃→拍攝→剪輯→字幕→交付'
}, },
ai: { ai: {
time: '2-4小时', time: '2-4小時',
cost: '¥1,000-3,000', cost: '¥1,000-3,000',
team: 'AI工程师', team: 'AI工程師',
process: '文案输入→AI生成→一键发布' process: '文案輸入→AI生成→一鍵發佈'
} }
} }
] ]
@@ -61,13 +61,13 @@ export default function CaseComparison() {
<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"> <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> <span className="text-purple-400 text-sm font-medium">效率對比</span>
</div> </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>
<p className="text-gray-400 text-lg max-w-2xl mx-auto"> <p className="text-gray-400 text-lg max-w-2xl mx-auto">
数据说话，AI制作效率提升10倍，成本降低80% 數據說話，AI製作效率提升10倍，成本降低80%
</p> </p>
</div> </div>
</ScrollReveal> </ScrollReveal>
@@ -102,24 +102,24 @@ export default function CaseComparison() {
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg> </svg>
</div> </div>
<h3 className="text-xl font-bold text-white">传统制作</h3> <h3 className="text-xl font-bold text-white">傳統制作</h3>
</div> </div>
<div className="space-y-6"> <div className="space-y-6">
<div className="flex items-center justify-between py-4 border-b border-white/5"> <div className="flex items-center justify-between py-4 border-b border-white/5">
<span className="text-gray-400">制作周期</span> <span className="text-gray-400">製作週期</span>
<span className="text-red-400 font-semibold">{activeCase.traditional.time}</span> <span className="text-red-400 font-semibold">{activeCase.traditional.time}</span>
</div> </div>
<div className="flex items-center justify-between py-4 border-b border-white/5"> <div className="flex items-center justify-between py-4 border-b border-white/5">
<span className="text-gray-400">制作成本</span> <span className="text-gray-400">製作成本</span>
<span className="text-red-400 font-semibold">{activeCase.traditional.cost}</span> <span className="text-red-400 font-semibold">{activeCase.traditional.cost}</span>
</div> </div>
<div className="flex items-center justify-between py-4 border-b border-white/5"> <div className="flex items-center justify-between py-4 border-b border-white/5">
<span className="text-gray-400">团队配置</span> <span className="text-gray-400">團隊配置</span>
<span className="text-gray-300 text-sm text-right">{activeCase.traditional.team}</span> <span className="text-gray-300 text-sm text-right">{activeCase.traditional.team}</span>
</div> </div>
<div> <div>
<span className="text-gray-400 block mb-3">制作流程</span> <span className="text-gray-400 block mb-3">製作流程</span>
<p className="text-gray-300 text-sm leading-relaxed">{activeCase.traditional.process}</p> <p className="text-gray-300 text-sm leading-relaxed">{activeCase.traditional.process}</p>
</div> </div>
</div> </div>
@@ -128,7 +128,7 @@ export default function CaseComparison() {
{/* AI */} {/* AI */}
<div className="glass-card rounded-3xl p-8 border-green-500/20 relative overflow-hidden"> <div className="glass-card rounded-3xl p-8 border-green-500/20 relative overflow-hidden">
<div className="absolute top-4 right-4 px-3 py-1 rounded-full text-xs font-semibold gradient-bg-animated"> <div className="absolute top-4 right-4 px-3 py-1 rounded-full text-xs font-semibold gradient-bg-animated">
推荐 推薦
</div> </div>
<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">
@@ -136,24 +136,24 @@ export default function CaseComparison() {
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg> </svg>
</div> </div>
<h3 className="text-xl font-bold text-white">AI制作</h3> <h3 className="text-xl font-bold text-white">AI製作</h3>
</div> </div>
<div className="space-y-6"> <div className="space-y-6">
<div className="flex items-center justify-between py-4 border-b border-white/5"> <div className="flex items-center justify-between py-4 border-b border-white/5">
<span className="text-gray-400">制作周期</span> <span className="text-gray-400">製作週期</span>
<span className="text-green-400 font-semibold">{activeCase.ai.time}</span> <span className="text-green-400 font-semibold">{activeCase.ai.time}</span>
</div> </div>
<div className="flex items-center justify-between py-4 border-b border-white/5"> <div className="flex items-center justify-between py-4 border-b border-white/5">
<span className="text-gray-400">制作成本</span> <span className="text-gray-400">製作成本</span>
<span className="text-green-400 font-semibold">{activeCase.ai.cost}</span> <span className="text-green-400 font-semibold">{activeCase.ai.cost}</span>
</div> </div>
<div className="flex items-center justify-between py-4 border-b border-white/5"> <div className="flex items-center justify-between py-4 border-b border-white/5">
<span className="text-gray-400">团队配置</span> <span className="text-gray-400">團隊配置</span>
<span className="text-gray-300 text-sm">{activeCase.ai.team}</span> <span className="text-gray-300 text-sm">{activeCase.ai.team}</span>
</div> </div>
<div> <div>
<span className="text-gray-400 block mb-3">制作流程</span> <span className="text-gray-400 block mb-3">製作流程</span>
<p className="text-gray-300 text-sm leading-relaxed">{activeCase.ai.process}</p> <p className="text-gray-300 text-sm leading-relaxed">{activeCase.ai.process}</p>
</div> </div>
</div> </div>

29
src/components/FAQ.tsx
View File

@@ -3,28 +3,24 @@ import ScrollReveal from './ScrollReveal'
const faqs = [ const faqs = [
{ {
question: 'AI生成的视频质量如何？能达到商用标准吗？', question: 'AI生成的視頻質量如何？能達到商用標準嗎？',
answer: '我们的AI视频已经可以达到商用标准。通过多轮优化和人工精修，最终输出的视频在画面质量、流畅度和创意表现上都能满足品牌宣传、社交媒体等商业场景的需求。我们服务过的100+客户中，98%对最终效果表示满意。' answer: '我們的AI視頻已經可以達到商用標準。通過多輪優化和人工精修，最終輸出的視頻在畫面質量、流暢度和創意表現上都能滿足品牌宣傳、社交媒體等商業場景的需求。我們服務過的100+客戶中，98%對最終效果表示滿意。'
}, },
{ {
question: '制作一个AI视频需要多长时间？', question: '製作一個AI視頻需要多長時間？',
answer: '根据视频复杂度不同，制作周期从2小时到3天不等。简单的社交媒体短视频通常4-8小时即可完成，而复杂的品牌宣传片可能需要1-3天。相比传统制作方式，效率提升10倍以上。' answer: '根據視頻複雜度不同，製作週期從2小時到3天不等。簡單的社交媒體短視頻通常4-8小時即可完成，而複雜的品牌宣傳片可能需要1-3天。相比傳統制作方式，效率提升10倍以上。'
}, },
{ {
question: 'AI视频的版权归属如何？', question: 'AI視頻的版權歸屬如何？',
answer: '所有通过我们生成的AI视频，版权完全归属客户所有。我们使用的AI工具均拥有合法授权，生成的内容不存在版权纠纷风险。同时，我们会提供完整的版权证明文件。' answer: '所有通過我們生成的AI視頻，版權完全歸屬客戶所有。我們使用的AI工具均擁有合法授權，生成的內容不存在版權糾紛風險。同時，我們會提供完整的版權證明文件。'
}, },
{ {
question: '你们使用哪些AI技术？', question: '如何保證視頻符合品牌調性？',
answer: '我们综合使用业界领先的AI工具，包括：Midjourney/Stable Diffusion（图像生成）、Runway/Pika Labs（视频生成）、HeyGen/D-ID（数字人）、ElevenLabs（语音合成）等。根据项目需求选择最合适的工具组合。' answer: '我們有專業的創意團隊會在項目初期深入瞭解您的品牌調性、目標受衆和傳播目標。通過品牌指南學習、風格參考收集和多輪溝通確認，確保AI生成的視頻精準傳達品牌價值。'
}, },
{ {
question: '如何保证视频符合品牌调性？', question: '支持哪些視頻格式和尺寸？',
answer: '我们有专业的创意团队会在项目初期深入了解您的品牌调性、目标受众和传播目标。通过品牌指南学习、风格参考收集和多轮沟通确认，确保AI生成的视频精准传达品牌价值。' answer: '我們支持所有主流視頻格式和尺寸，包括：橫屏16:9（1920x1080/3840x2160）、豎屏9:16（1080x1920）、方形1:1（1080x1080）等。同時支持MP4、MOV、AVI等格式輸出，滿足不同平臺的發佈需求。'
},
{
question: '支持哪些视频格式和尺寸？',
answer: '我们支持所有主流视频格式和尺寸，包括：横屏16:9（1920x1080/3840x2160）、竖屏9:16（1080x1920）、方形1:1（1080x1080）等。同时支持MP4、MOV、AVI等格式输出，满足不同平台的发布需求。'
} }
] ]
@@ -36,14 +32,11 @@ export default function FAQ() {
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl 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">FAQ</span> <span className="gradient-text">FAQ</span>
</h2> </h2>
<p className="text-gray-400 text-lg"> <p className="text-gray-400 text-lg">
关于AI视频制作，您可能想了解的问题 關於AI視頻製作，您可能想了解的問題
</p> </p>
</div> </div>
</ScrollReveal> </ScrollReveal>

54
src/components/Footer.tsx
View File

@@ -1,4 +1,4 @@
import { Link } from 'react-router-dom' import { Link } from "react-router-dom";
export default function Footer() { export default function Footer() {
return ( return (
@@ -7,32 +7,54 @@ export default function Footer() {
<div className="grid grid-cols-1 md:grid-cols-3 gap-8"> <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div> <div>
<div className="flex items-center space-x-2 mb-4"> <div className="flex items-center space-x-2 mb-4">
<div className="w-10 h-10 gradient-bg rounded-lg flex items-center justify-center"> <span className="text-xl font-bold gradient-text">
<span className="text-white font-bold text-xl">C</span> 赤焰虎（香港）數技科技有限公司
</div> </span>
<span className="text-xl font-bold gradient-text">CYH Technology</span>
</div> </div>
<p className="text-gray-400 text-sm"> <p className="text-gray-400 text-sm">
香港领先的AI短视频制作公司，用科技创意赋能品牌传播。 香港領先的AI短視頻製作公司，用科技創意賦能品牌傳播。
</p> </p>
</div> </div>
<div> <div>
<h3 className="text-white font-semibold mb-4">快速链接</h3> <h3 className="text-white font-semibold mb-4">快速鏈接</h3>
<div className="flex flex-col space-y-2"> <div className="flex flex-col space-y-2">
<Link to="/" className="text-gray-400 hover:text-white text-sm transition-colors">首页</Link> <Link
<Link to="/about" className="text-gray-400 hover:text-white text-sm transition-colors">关于我们</Link> to="/"
<Link to="/works" className="text-gray-400 hover:text-white text-sm transition-colors">作品展示</Link> className="text-gray-400 hover:text-white text-sm transition-colors"
<Link to="/contact" className="text-gray-400 hover:text-white text-sm transition-colors">联系我们</Link> >
首頁
</Link>
<Link
to="/about"
className="text-gray-400 hover:text-white text-sm transition-colors"
>
關於我們
</Link>
<Link
to="/works"
className="text-gray-400 hover:text-white text-sm transition-colors"
>
作品展示
</Link>
<Link
to="/contact"
className="text-gray-400 hover:text-white text-sm transition-colors"
>
聯繫我們
</Link>
</div> </div>
</div> </div>
<div> <div>
<h3 className="text-white font-semibold mb-4">联系方式</h3> <h3 className="text-white font-semibold mb-4">聯繫方式</h3>
<div className="flex flex-col space-y-2 text-gray-400 text-sm"> <div className="flex flex-col space-y-2 text-gray-400 text-sm">
<p>邮箱: info@cyhtechnology.com</p> <p>郵箱: service@cyhtecdrama.com</p>
<p>电话: +852 XXXX XXXX</p> <p>電話: 17329311495</p>
<p>地址: 香港九龙湾XX大厦</p> <p>
地址: RM A5,7/F, ASTORIA BUILDING, NO.34 ASHLEY ROAD, TSIM SHA
TSUI ，HONG KONG
</p>
</div> </div>
</div> </div>
</div> </div>
@@ -42,5 +64,5 @@ export default function Footer() {
</div> </div>
</div> </div>
</footer> </footer>
) );
} }

6
src/components/MarqueeTicker.tsx
View File

@@ -1,7 +1,7 @@
const partners = [ const partners = [
'腾讯', '阿里巴巴', '字节跳动', '华为', '小米', '騰訊', '阿里巴巴', '字節跳動', '華爲', '小米',
'百度', '京东', '美团', '网易', '快手', '百度', '京東', '美團', '網易', '快手',
'B站', '小红书', '滴滴', '拼多多', '携程' 'B站', '小紅書', '滴滴', '拼多多', '攜程'
] ]
export default function MarqueeTicker() { export default function MarqueeTicker() {

6
src/components/Navbar.tsx
View File

@@ -2,10 +2,10 @@ import { useState, useEffect } from 'react'
import { Link, useLocation } from 'react-router-dom' import { Link, useLocation } from 'react-router-dom'
const navLinks = [ const navLinks = [
{ path: '/', label: '首页' }, { path: '/', label: '首頁' },
{ path: '/about', label: '关于我们' }, { path: '/about', label: '關於我們' },
{ path: '/works', label: '作品展示' }, { path: '/works', label: '作品展示' },
{ path: '/contact', label: '联系我们' }, { path: '/contact', label: '聯繫我們' },
] ]
export default function Navbar() { export default function Navbar() {

38
src/components/ProcessAnimation.tsx
View File

@@ -4,9 +4,9 @@ import ScrollReveal from './ScrollReveal'
const steps = [ const steps = [
{ {
id: 1, id: 1,
title: '需求沟通', title: '需求溝通',
desc: '深入了解您的品牌、目标受众和传播目标', desc: '深入瞭解您的品牌、目標受衆和傳播目標',
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="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" />
@@ -16,9 +16,9 @@ const steps = [
}, },
{ {
id: 2, id: 2,
title: '创意策划', title: '創意策劃',
desc: 'AI辅助生成创意方案，快速产出多版脚本', desc: 'AI輔助生成創意方案，快速產出多版腳本',
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={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" />
@@ -29,8 +29,8 @@ const steps = [
{ {
id: 3, id: 3,
title: 'AI生成', title: 'AI生成',
desc: '使用前沿AI技术，高效生成视频素材', desc: '使用前沿AI技術，高效生成視頻素材',
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" /> <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" />
@@ -41,8 +41,8 @@ const steps = [
{ {
id: 4, id: 4,
title: '人工精修', title: '人工精修',
desc: '专业团队优化细节，确保品质达标', desc: '專業團隊優化細節，確保品質達標',
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={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" />
@@ -52,9 +52,9 @@ const steps = [
}, },
{ {
id: 5, id: 5,
title: '交付验收', title: '交付驗收',
desc: '多轮修改直至满意，提供完整源文件', desc: '多輪修改直至滿意，提供完整源文件',
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" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
@@ -73,13 +73,13 @@ export default function ProcessAnimation() {
<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"> <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> <span className="text-purple-400 text-sm font-medium">製作流程</span>
</div> </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>
<p className="text-gray-400 text-lg max-w-2xl mx-auto"> <p className="text-gray-400 text-lg max-w-2xl mx-auto">
标准化流程，让每一个环节都可控、可追溯 標準化流程，讓每一個環節都可控、可追溯
</p> </p>
</div> </div>
</ScrollReveal> </ScrollReveal>
@@ -106,7 +106,7 @@ export default function ProcessAnimation() {
</div> </div>
<div> <div>
<div className="flex items-center gap-2 mb-1"> <div className="flex items-center gap-2 mb-1">
<span className="text-xs text-gray-500">步骤 {step.id}</span> <span className="text-xs text-gray-500">步驟 {step.id}</span>
<h3 className={`font-semibold transition-colors ${ <h3 className={`font-semibold transition-colors ${
activeStep === index ? 'text-white' : 'text-gray-400' activeStep === index ? 'text-white' : 'text-gray-400'
}`}> }`}>
@@ -129,7 +129,7 @@ export default function ProcessAnimation() {
{steps[activeStep].icon} {steps[activeStep].icon}
</div> </div>
<div> <div>
<span className="text-sm text-gray-500">步骤 {steps[activeStep].id}</span> <span className="text-sm text-gray-500">步驟 {steps[activeStep].id}</span>
<h3 className="text-2xl font-bold text-white">{steps[activeStep].title}</h3> <h3 className="text-2xl font-bold text-white">{steps[activeStep].title}</h3>
</div> </div>
</div> </div>
@@ -146,7 +146,7 @@ export default function ProcessAnimation() {
/> />
</div> </div>
<div className="flex justify-between mt-3 text-sm text-gray-500"> <div className="flex justify-between mt-3 text-sm text-gray-500">
<span>开始</span> <span>開始</span>
<span>{activeStep + 1}/{steps.length}</span> <span>{activeStep + 1}/{steps.length}</span>
<span>交付</span> <span>交付</span>
</div> </div>

33
src/components/ServiceScenes.tsx
View File

@@ -10,9 +10,9 @@ const scenes = [
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 11v6m-3-3h6" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 11v6m-3-3h6" />
</svg> </svg>
), ),
title: '社交媒体', title: '社交媒體',
desc: '抖音、小红书、Instagram等平台爆款内容', desc: '抖音、小紅書、Instagram等平臺爆款內容',
features: ['15秒竖屏视频', '高完播率设计', '爆款文案生成', '多平台适配'], features: ['15秒豎屏視頻', '高完播率設計', '爆款文案生成', '多平臺適配'],
gradient: 'from-pink-500 to-rose-500' gradient: 'from-pink-500 to-rose-500'
}, },
{ {
@@ -22,9 +22,9 @@ const scenes = [
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
</svg> </svg>
), ),
title: '电商营销', title: '電商營銷',
desc: '产品展示、直播切片、详情页视频', desc: '產品展示、直播切片、詳情頁視頻',
features: ['3D产品展示', '卖点可视化', '多角度展示', '批量生成'], features: ['3D產品展示', '賣點可視化', '多角度展示', '批量生成'],
gradient: 'from-orange-500 to-yellow-500' gradient: 'from-orange-500 to-yellow-500'
}, },
{ {
@@ -34,9 +34,9 @@ const scenes = [
<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={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> </svg>
), ),
title: '教育培训', title: '教育培訓',
desc: '在线课程、知识科普、企业内训', desc: '在線課程、知識科普、企業內訓',
features: ['知识可视化', 'AI讲师生成', '课程片头制作', '互动元素'], features: ['知識可視化', 'AI講師生成', '課程片頭製作', '互動元素'],
gradient: 'from-blue-500 to-cyan-500' gradient: 'from-blue-500 to-cyan-500'
}, },
{ {
@@ -46,9 +46,9 @@ const scenes = [
<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={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> </svg>
), ),
title: '企业宣传', title: '企業宣傳',
desc: '品牌故事、企业宣传片、招聘视频', desc: '品牌故事、企業宣傳片、招聘視頻',
features: ['品牌形象塑造', '企业文化展示', '数字人代言', '多语言版本'], features: ['品牌形象塑造', '企業文化展示', '數字人代言', '多語言版本'],
gradient: 'from-purple-500 to-violet-500' gradient: 'from-purple-500 to-violet-500'
} }
] ]
@@ -61,14 +61,11 @@ export default function ServiceScenes() {
<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">AI视频</span> 需求 覆蓋全場景 <span className="gradient-text">AI視頻</span> 需求
</h2> </h2>
<p className="text-gray-400 text-lg max-w-2xl mx-auto"> <p className="text-gray-400 text-lg max-w-2xl mx-auto">
无论您是什么行业，我们都能提供专业的AI视频解决方案 無論您是什麼行業，我們都能提供專業的AI視頻解決方案
</p> </p>
</div> </div>
</ScrollReveal> </ScrollReveal>
@@ -136,7 +133,7 @@ export default function ServiceScenes() {
<path d="M8 5v14l11-7z" /> <path d="M8 5v14l11-7z" />
</svg> </svg>
</div> </div>
<p className="text-gray-400">点击观看 {activeScene.title} 案例视频</p> <p className="text-gray-400">點擊觀看 {activeScene.title} 案例視頻</p>
</div> </div>
</div> </div>
</div> </div>

2
src/components/VideoModal.tsx
View File

@@ -51,7 +51,7 @@ export default function VideoModal({ video, onClose }: VideoModalProps) {
className="w-full h-full" className="w-full h-full"
poster={video.thumbnail} poster={video.thumbnail}
> >
您的浏览器不支持视频播放 您的瀏覽器不支持視頻播放
</video> </video>
</div> </div>

90
src/data/videos.ts
View File

@@ -13,136 +13,136 @@ export interface Video {
export const videos: Video[] = [ export const videos: Video[] = [
{ {
id: 1, id: 1,
title: 'AI智能城市宣传片', title: 'AI智能城市宣傳片',
description: '利用AI技术生成的未来城市概念视频，展示智慧城市蓝图，融合3D建模与实拍素材', 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: 'https://picsum.photos/seed/cyh1/640/360', thumbnail: 'https://picsum.photos/seed/cyh1/640/360',
category: '宣传片', category: '宣傳片',
duration: '2:30', duration: '2:30',
tech: ['Stable Diffusion', 'Runway Gen-2', 'After Effects'], tech: ['Stable Diffusion', 'Runway Gen-2', 'After Effects'],
client: '某市政府' client: '某市政府'
}, },
{ {
id: 2, id: 2,
title: '电商产品展示动画', title: '電商產品展示動畫',
description: 'AI驱动的产品3D展示动画，多角度展示产品细节，适用于电商平台', 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: 'https://picsum.photos/seed/cyh2/640/360', thumbnail: 'https://picsum.photos/seed/cyh2/640/360',
category: '产品展示', category: '產品展示',
duration: '0:45', duration: '0:45',
tech: ['Midjourney', 'Blender', 'ComfyUI'], tech: ['Midjourney', 'Blender', 'ComfyUI'],
client: '某电商品牌' client: '某電商品牌'
}, },
{ {
id: 3, id: 3,
title: '品牌故事短片', title: '品牌故事短片',
description: '用AI讲述品牌故事，情感与技术的完美结合，传递品牌价值观', 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: 'https://picsum.photos/seed/cyh3/640/360', thumbnail: 'https://picsum.photos/seed/cyh3/640/360',
category: '品牌故事', category: '品牌故事',
duration: '3:15', duration: '3:15',
tech: ['Pika Labs', 'ElevenLabs', 'Premiere Pro'], tech: ['Pika Labs', 'ElevenLabs', 'Premiere Pro'],
client: '某新消费品牌' client: '某新消費品牌'
}, },
{ {
id: 4, id: 4,
title: '抖音爆款短视频', title: '抖音爆款短視頻',
description: '为社交媒体平台定制的AI短视频内容，高完播率，引爆流量', 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: 'https://picsum.photos/seed/cyh4/640/360', thumbnail: 'https://picsum.photos/seed/cyh4/640/360',
category: '社交媒体', category: '社交媒體',
duration: '0:15', duration: '0:15',
tech: ['HeyGen', 'CapCut', 'D-ID'], tech: ['HeyGen', 'CapCut', 'D-ID'],
client: '某MCN机构' client: '某MCN機構'
}, },
{ {
id: 5, id: 5,
title: '在线课程片头', title: '在線課程片頭',
description: 'AI生成的教育内容片头，让知识传播更生动有趣', 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: 'https://picsum.photos/seed/cyh5/640/360', thumbnail: 'https://picsum.photos/seed/cyh5/640/360',
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小时不间断直播，降低人力成本', 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: 'https://picsum.photos/seed/cyh6/640/360', thumbnail: 'https://picsum.photos/seed/cyh6/640/360',
category: '数字人', category: '數字人',
duration: '1:30', duration: '1:30',
tech: ['HeyGen', 'D-ID', 'ElevenLabs'], tech: ['HeyGen', 'D-ID', 'ElevenLabs'],
client: '某电商平台' client: '某電商平臺'
}, },
{ {
id: 7, id: 7,
title: '房地产虚拟看房', title: '房地產虛擬看房',
description: 'AI生成的房产展示视频，虚拟漫游+实景融合，提升看房体验', 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: 'https://picsum.photos/seed/cyh7/640/360', thumbnail: 'https://picsum.photos/seed/cyh7/640/360',
category: '产品展示', category: '產品展示',
duration: '2:00', duration: '2:00',
tech: ['Unreal Engine', 'Stable Diffusion', 'Runway'], tech: ['Unreal Engine', 'Stable Diffusion', 'Runway'],
client: '某地产开发商' client: '某地產開發商'
}, },
{ {
id: 8, id: 8,
title: '游戏宣传CG', title: '遊戲宣傳CG',
description: 'AI辅助生成的游戏宣传CG，史诗级视觉效果，成本仅为传统1/10', description: 'AI輔助生成的遊戲宣傳CG，史詩級視覺效果，成本僅爲傳統1/10',
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: 'https://picsum.photos/seed/cyh8/640/360', thumbnail: 'https://picsum.photos/seed/cyh8/640/360',
category: '宣传片', category: '宣傳片',
duration: '1:45', duration: '1:45',
tech: ['Midjourney', 'Runway Gen-2', 'Nuke'], tech: ['Midjourney', 'Runway Gen-2', 'Nuke'],
client: '某游戏公司' client: '某遊戲公司'
}, },
{ {
id: 9, id: 9,
title: '医疗科普动画', title: '醫療科普動畫',
description: '专业医疗知识可视化，AI生成的医学动画让复杂概念通俗易懂', 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: 'https://picsum.photos/seed/cyh9/640/360', thumbnail: 'https://picsum.photos/seed/cyh9/640/360',
category: '教育培训', category: '教育培訓',
duration: '2:20', duration: '2:20',
tech: ['Stable Diffusion', 'After Effects', 'Blender'], tech: ['Stable Diffusion', 'After Effects', 'Blender'],
client: '某医疗机构' client: '某醫療機構'
}, },
{ {
id: 10, id: 10,
title: '餐饮品牌宣传片', title: '餐飲品牌宣傳片',
description: 'AI生成的美食展示视频，诱人画面+品牌故事，提升品牌调性', 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: 'https://picsum.photos/seed/cyh10/640/360', thumbnail: 'https://picsum.photos/seed/cyh10/640/360',
category: '品牌故事', category: '品牌故事',
duration: '1:50', duration: '1:50',
tech: ['Midjourney', 'Pika Labs', 'Premiere Pro'], tech: ['Midjourney', 'Pika Labs', 'Premiere Pro'],
client: '某连锁餐饮品牌' client: '某連鎖餐飲品牌'
}, },
{ {
id: 11, id: 11,
title: '小红书种草视频', title: '小紅書種草視頻',
description: '为小红书平台定制的种草视频，高转化率，精准触达目标用户', description: '爲小紅書平臺定製的種草視頻，高轉化率，精準觸達目標用戶',
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: 'https://picsum.photos/seed/cyh11/640/360', thumbnail: 'https://picsum.photos/seed/cyh11/640/360',
category: '社交媒体', category: '社交媒體',
duration: '0:30', duration: '0:30',
tech: ['HeyGen', 'CapCut', 'ComfyUI'], tech: ['HeyGen', 'CapCut', 'ComfyUI'],
client: '某美妆品牌' client: '某美妝品牌'
}, },
{ {
id: 12, id: 12,
title: 'AI虚拟偶像直播', title: 'AI虛擬偶像直播',
description: '全栈AI虚拟偶像解决方案，从形象设计到实时驱动，一站式服务', 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: 'https://picsum.photos/seed/cyh12/640/360', thumbnail: 'https://picsum.photos/seed/cyh12/640/360',
category: '数字人', category: '數字人',
duration: '3:00', duration: '3:00',
tech: ['D-ID', 'ElevenLabs', 'OBS'], tech: ['D-ID', 'ElevenLabs', 'OBS'],
client: '某直播平台' client: '某直播平臺'
} }
] ]
export const categories = ['全部', '宣传片', '产品展示', '品牌故事', '社交媒体', '教育培训', '数字人'] export const categories = ['全部', '宣傳片', '產品展示', '品牌故事', '社交媒體', '教育培訓', '數字人']

331
src/pages/About.tsx
View File

@@ -1,20 +1,40 @@
import AnimatedCounter from '../components/AnimatedCounter' import AnimatedCounter from "../components/AnimatedCounter";
import ScrollReveal from '../components/ScrollReveal' import ScrollReveal from "../components/ScrollReveal";
const timeline = [ const timeline = [
{ year: '2020', title: '公司成立', desc: '在香港成立，专注于AI视频技术研发' }, { year: "2020", title: "公司成立", desc: "在香港成立，專注於AI視頻技術研發" },
{ year: '2021', title: '技术突破', desc: '自研AI视频生成算法，效率提升5倍' }, { year: "2021", title: "技術突破", desc: "自研AI視頻生成算法，效率提升5倍" },
{ year: '2022', title: '业务拓展', desc: '服务客户超过50家，覆盖多个行业' }, { year: "2022", title: "業務拓展", desc: "服務客戶超過50家，覆蓋多個行業" },
{ year: '2023', title: '团队壮大', desc: '团队扩展至50人，建立完整服务体系' }, { year: "2023", title: "團隊壯大", desc: "團隊擴展至50人，建立完整服務體系" },
{ year: '2024', title: '行业领先', desc: '累计服务500+项目，成为行业标杆' } { year: "2024", title: "行業領先", desc: "累計服務500+項目，成爲行業標杆" },
] ];
const team = [ const team = [
{ name: '陈博士', role: '首席技术官', desc: '前Google AI研究员，10年深度学习经验', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=cto' }, {
{ name: '林总监', role: '创意总监', desc: '资深广告人，服务过50+知名品牌', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=cd' }, name: "陳博士",
{ name: '王经理', role: '项目总监', desc: 'PMP认证，管理过200+视频项目', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=pm' }, role: "首席技術官",
{ name: '张工程师', role: 'AI工程师', desc: 'Stable Diffusion专家，精通多款AI工具', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=ai' } desc: "前Google AI研究員，10年深度學習經驗",
] avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=cto",
},
{
name: "林總監",
role: "創意總監",
desc: "資深廣告人，服務過50+知名品牌",
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=cd",
},
{
name: "王經理",
role: "項目總監",
desc: "PMP認證，管理過200+視頻項目",
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=pm",
},
{
name: "張工程師",
role: "AI工程師",
desc: "Stable Diffusion專家，精通多款AI工具",
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=ai",
},
];
export default function About() { export default function About() {
return ( return (
@@ -29,14 +49,14 @@ export default function About() {
<div className="max-w-7xl mx-auto relative z-10"> <div className="max-w-7xl mx-auto relative z-10">
<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"> <h1 className="text-4xl md:text-5xl font-bold mb-4">
<span className="text-purple-400 text-sm font-medium">关于我们</span> <span className="gradient-text">關於</span> 我們
</div> </h1>
<h1 className="text-4xl md:text-5xl font-bold mb-4"> <h1 className="text-4xl md:text-5xl font-bold mb-4">
<span className="gradient-text">CYH Technology</span> <span className="gradient-text">CYH Technology</span>
</h1> </h1>
<p className="text-lg text-gray-400 max-w-2xl mx-auto"> <p className="text-lg text-gray-400 max-w-2xl mx-auto">
香港领先的AI短视频制作公司，致力于用前沿人工智能技术革新视频内容创作 香港領先的AI短視頻製作公司，致力於用前沿人工智能技術革新視頻內容創作
</p> </p>
</div> </div>
</ScrollReveal> </ScrollReveal>
@@ -50,25 +70,28 @@ export default function About() {
<ScrollReveal direction="left"> <ScrollReveal direction="left">
<div> <div>
<div className="inline-flex items-center px-4 py-2 rounded-full glass-card mb-4"> <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> <span className="text-purple-400 text-sm font-medium">
我們的故事
</span>
</div> </div>
<h2 className="text-3xl md:text-4xl font-bold mb-6 text-white"> <h2 className="text-3xl md:text-4xl font-bold mb-6 text-white">
用 AI 重新定义 <span className="gradient-text">视频创作</span> 用 AI 重新定義 <span className="gradient-text">視頻創作</span>
</h2> </h2>
<div className="space-y-4 text-gray-400 leading-relaxed"> <div className="space-y-4 text-gray-400 leading-relaxed">
<p> <p>
HK CYH Technology 成立于香港，是一家专注于AI短视频制作的创新科技公司。 HK CYH Technology
我们见证了人工智能技术在视觉内容创作领域的革命性突破，并致力于将这些前沿技术 成立於香港，是一家專注於AI短視頻製作的創新科技公司。
带给每一位客户。 我們見證了人工智能技術在視覺內容創作領域的革命性突破，並致力於將這些前沿技術
帶給每一位客戶。
</p> </p>
<p> <p>
我们的团队汇集了AI算法专家、创意设计师和影视制作人才， 我們的團隊彙集了AI算法專家、創意設計師和影視製作人才，
通过深度学习、计算机视觉和自然语言处理等技术， 通過深度學習、計算機視覺和自然語言處理等技術，
为客户打造高品质、高效率的短视频内容。 爲客戶打造高品質、高效率的短視頻內容。
</p> </p>
<p> <p>
从品牌宣传片到社交媒体内容，从产品展示到教育培训视频， 從品牌宣傳片到社交媒體內容，從產品展示到教育培訓視頻，
我们用AI技术重新定义视频制作的边界。 我們用AI技術重新定義視頻製作的邊界。
</p> </p>
</div> </div>
</div> </div>
@@ -77,14 +100,41 @@ export default function About() {
<ScrollReveal direction="right"> <ScrollReveal direction="right">
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
{[ {[
{ end: 500, suffix: '+', label: '完成项目', gradient: 'from-purple-500 to-pink-500' }, {
{ end: 100, suffix: '+', label: '合作客户', gradient: 'from-blue-500 to-cyan-500' }, end: 500,
{ end: 50, suffix: '+', label: '团队成员', gradient: 'from-green-500 to-emerald-500' }, suffix: "+",
{ end: 98, suffix: '%', label: '客户满意度', gradient: 'from-yellow-500 to-orange-500' } label: "完成項目",
gradient: "from-purple-500 to-pink-500",
},
{
end: 1000,
suffix: "+",
label: "合作客戶",
gradient: "from-blue-500 to-cyan-500",
},
{
end: 200,
suffix: "+",
label: "團隊成員",
gradient: "from-green-500 to-emerald-500",
},
{
end: 98,
suffix: "%",
label: "客戶滿意度",
gradient: "from-yellow-500 to-orange-500",
},
].map((stat, index) => ( ].map((stat, index) => (
<div key={index} className="glass-card rounded-2xl p-6 text-center hover-lift group"> <div
<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`}> key={index}
<span className="text-xl font-bold text-white">{stat.suffix === '%' ? '%' : '+'}</span> 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> </div>
<AnimatedCounter end={stat.end} suffix={stat.suffix} /> <AnimatedCounter end={stat.end} suffix={stat.suffix} />
<p className="text-gray-400 mt-2 text-sm">{stat.label}</p> <p className="text-gray-400 mt-2 text-sm">{stat.label}</p>
@@ -96,58 +146,17 @@ export default function About() {
</div> </div>
</section> </section>
{/* Timeline */}
<section className="py-20 px-4 bg-[#0d0d2b]/50">
<div className="max-w-5xl 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">
我们的 <span className="gradient-text">成长足迹</span>
</h2>
</div>
</ScrollReveal>
<div className="relative">
{/* Timeline Line */}
<div className="absolute left-1/2 transform -translate-x-1/2 w-0.5 h-full bg-gradient-to-b from-purple-500 to-blue-500 hidden md:block" />
<div className="space-y-8">
{timeline.map((item, index) => (
<ScrollReveal key={index} delay={index * 100}>
<div className={`flex items-center gap-8 ${index % 2 === 0 ? 'md:flex-row' : 'md:flex-row-reverse'}`}>
<div className={`flex-1 ${index % 2 === 0 ? 'md:text-right' : 'md:text-left'}`}>
<div className="glass-card rounded-2xl p-6 inline-block">
<div className="text-2xl font-bold gradient-text mb-2">{item.year}</div>
<h3 className="text-white font-semibold mb-1">{item.title}</h3>
<p className="text-gray-400 text-sm">{item.desc}</p>
</div>
</div>
<div className="hidden md:flex w-4 h-4 rounded-full gradient-bg flex-shrink-0" />
<div className="flex-1" />
</div>
</ScrollReveal>
))}
</div>
</div>
</div>
</section>
{/* Team */} {/* Team */}
<section className="py-20 px-4"> <section className="py-20 px-4">
<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 mb-4"> <h2 className="text-3xl md:text-4xl font-bold mb-4">
专业的 <span className="gradient-text">团队配置</span> 專業的 <span className="gradient-text">團隊配置</span>
</h2> </h2>
<p className="text-gray-400 max-w-xl mx-auto"> <p className="text-gray-400 max-w-xl mx-auto">
AI专家+创意人才，为您提供最专业的服务 AI專家+創意人才，爲您提供最專業的服務
</p> </p>
</div> </div>
</ScrollReveal> </ScrollReveal>
@@ -157,9 +166,15 @@ export default function About() {
<ScrollReveal key={index} delay={index * 100}> <ScrollReveal key={index} delay={index * 100}>
<div className="glass-card rounded-2xl p-6 text-center hover-lift group"> <div className="glass-card rounded-2xl p-6 text-center hover-lift group">
<div className="w-20 h-20 mx-auto mb-4 rounded-full overflow-hidden border-2 border-purple-500/30 group-hover:border-purple-500 transition-colors"> <div className="w-20 h-20 mx-auto mb-4 rounded-full overflow-hidden border-2 border-purple-500/30 group-hover:border-purple-500 transition-colors">
<img src={member.avatar} alt={member.name} className="w-full h-full object-cover" /> <img
src={member.avatar}
alt={member.name}
className="w-full h-full object-cover"
/>
</div> </div>
<h3 className="text-white font-semibold mb-1">{member.name}</h3> <h3 className="text-white font-semibold mb-1">
{member.name}
</h3>
<p className="text-purple-400 text-sm mb-2">{member.role}</p> <p className="text-purple-400 text-sm mb-2">{member.role}</p>
<p className="text-gray-500 text-sm">{member.desc}</p> <p className="text-gray-500 text-sm">{member.desc}</p>
</div> </div>
@@ -174,67 +189,98 @@ 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>
</div> </div>
</ScrollReveal> </ScrollReveal>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{[ {[
{ {
icon: ( icon: (
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg
<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" /> 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"
/>
</svg> </svg>
), ),
title: 'AI生成技术', title: "AI生成技術",
desc: '先进的深度学习模型，实现高质量视频内容自动生成', desc: "先進的深度學習模型，實現高質量視頻內容自動生成",
gradient: 'from-violet-500 to-purple-500' gradient: "from-violet-500 to-purple-500",
}, },
{ {
icon: ( icon: (
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg
<path strokeLinecap="round" 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" /> className="w-8 h-8"
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
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: "智能編輯",
desc: 'AI驱动的智能剪辑系统，自动优化视频节奏和效果', desc: "AI驅動的智能剪輯系統，自動優化視頻節奏和效果",
gradient: 'from-blue-500 to-cyan-500' gradient: "from-blue-500 to-cyan-500",
}, },
{ {
icon: ( icon: (
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg
<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" /> 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> </svg>
), ),
title: '风格迁移', title: "風格遷移",
desc: '独特的艺术风格迁移技术，让视频呈现多样化视觉效果', desc: "獨特的藝術風格遷移技術，讓視頻呈現多樣化視覺效果",
gradient: 'from-pink-500 to-rose-500' gradient: "from-pink-500 to-rose-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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
),
title: '数字人技术',
desc: '逼真的AI数字人生成，打造虚拟形象代言人',
gradient: 'from-green-500 to-emerald-500'
} }
].map((tech, index) => ( ].map((tech, index) => (
<ScrollReveal key={index} delay={index * 100}> <ScrollReveal key={index} delay={index * 100}>
<div className="group glass-card rounded-2xl p-6 hover-lift relative overflow-hidden h-full"> <div className="group glass-card rounded-2xl p-6 hover-lift relative overflow-hidden h-full">
<div className={`absolute -top-10 -right-10 w-40 h-40 bg-gradient-to-br ${tech.gradient} opacity-10 rounded-full blur-3xl group-hover:opacity-20 transition-opacity`} /> <div
<div className={`w-14 h-14 rounded-xl bg-gradient-to-br ${tech.gradient} flex items-center justify-center mb-4 text-white shadow-lg group-hover:scale-110 transition-transform duration-300`}> className={`absolute -top-10 -right-10 w-40 h-40 bg-gradient-to-br ${tech.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 ${tech.gradient} flex items-center justify-center mb-4 text-white shadow-lg group-hover:scale-110 transition-transform duration-300`}
>
{tech.icon} {tech.icon}
</div> </div>
<h3 className="text-lg font-bold text-white mb-2">{tech.title}</h3> <h3 className="text-lg font-bold text-white mb-2">
<p className="text-gray-400 text-sm leading-relaxed">{tech.desc}</p> {tech.title}
</h3>
<p className="text-gray-400 text-sm leading-relaxed">
{tech.desc}
</p>
</div> </div>
</ScrollReveal> </ScrollReveal>
))} ))}
@@ -248,37 +294,58 @@ export default function About() {
<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"> <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> <span className="text-purple-400 text-sm font-medium">
服務流程
</span>
</div> </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>
</div> </div>
</ScrollReveal> </ScrollReveal>
<div className="grid grid-cols-1 md:grid-cols-4 gap-6"> <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
{[ {[
{ step: '01', title: '需求沟通', desc: '深入了解客户需求和品牌调性', gradient: 'from-purple-500 to-pink-500' }, {
{ step: '02', title: '创意策划', desc: 'AI辅助生成创意方案和脚本', gradient: 'from-blue-500 to-cyan-500' }, step: "01",
{ step: '03', title: '视频制作', desc: 'AI技术驱动的高效视频生成', gradient: 'from-green-500 to-emerald-500' }, title: "需求溝通",
{ step: '04', title: '交付优化', desc: '专业团队审核优化，确保品质', gradient: 'from-yellow-500 to-orange-500' } desc: "深入瞭解客戶需求和品牌調性",
gradient: "from-purple-500 to-pink-500",
},
{
step: "02",
title: "創意策劃",
desc: "AI輔助生成創意方案和腳本",
gradient: "from-blue-500 to-cyan-500",
},
{
step: "03",
title: "視頻製作",
desc: "AI技術驅動的高效視頻生成",
gradient: "from-green-500 to-emerald-500",
},
{
step: "04",
title: "交付優化",
desc: "專業團隊審覈優化，確保品質",
gradient: "from-yellow-500 to-orange-500",
},
].map((process, index) => ( ].map((process, index) => (
<ScrollReveal key={index} delay={index * 100}> <ScrollReveal key={index} delay={index * 100}>
<div className="relative group"> <div className="relative group">
<div className="glass-card rounded-2xl p-6 text-center hover-lift h-full"> <div className="glass-card rounded-2xl p-6 text-center hover-lift h-full">
<div className={`w-14 h-14 gradient-bg-animated rounded-xl flex items-center justify-center mx-auto mb-4 shadow-lg`}> <div
<span className="text-xl font-bold text-white">{process.step}</span> className={`w-14 h-14 gradient-bg-animated rounded-xl flex items-center justify-center mx-auto mb-4 shadow-lg`}
>
<span className="text-xl font-bold text-white">
{process.step}
</span>
</div> </div>
<h3 className="text-lg font-bold text-white mb-2">{process.title}</h3> <h3 className="text-lg font-bold text-white mb-2">
{process.title}
</h3>
<p className="text-gray-400 text-sm">{process.desc}</p> <p className="text-gray-400 text-sm">{process.desc}</p>
</div> </div>
{index < 3 && (
<div className="hidden md:block absolute top-1/2 -right-3 transform -translate-y-1/2 z-10">
<svg className="w-6 h-6 text-purple-500/50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
</svg>
</div>
)}
</div> </div>
</ScrollReveal> </ScrollReveal>
))} ))}
@@ -286,5 +353,5 @@ export default function About() {
</div> </div>
</section> </section>
</div> </div>
) );
} }

80
src/pages/Contact.tsx
View File

@@ -17,7 +17,7 @@ export default function Contact() {
e.preventDefault() e.preventDefault()
setIsSubmitting(true) setIsSubmitting(true)
await new Promise(resolve => setTimeout(resolve, 1500)) await new Promise(resolve => setTimeout(resolve, 1500))
alert('感谢您的留言，我们会尽快与您联系！') alert('感謝您的留言，我們會盡快與您聯繫！')
setFormData({ name: '', email: '', phone: '', company: '', budget: '', message: '' }) setFormData({ name: '', email: '', phone: '', company: '', budget: '', message: '' })
setIsSubmitting(false) setIsSubmitting(false)
} }
@@ -34,14 +34,11 @@ export default function Contact() {
<div className="max-w-7xl mx-auto relative z-10"> <div className="max-w-7xl mx-auto relative z-10">
<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>
<h1 className="text-4xl md:text-5xl font-bold mb-4"> <h1 className="text-4xl md:text-5xl font-bold mb-4">
<span className="gradient-text">联系</span> 我们 <span className="gradient-text">聯繫</span> 我們
</h1> </h1>
<p className="text-lg text-gray-400 max-w-2xl mx-auto"> <p className="text-lg text-gray-400 max-w-2xl mx-auto">
无论您有任何问题或合作意向，我们都期待与您取得联系 無論您有任何問題或合作意向，我們都期待與您取得聯繫
</p> </p>
</div> </div>
</ScrollReveal> </ScrollReveal>
@@ -50,7 +47,7 @@ export default function Contact() {
{/* Form */} {/* Form */}
<ScrollReveal direction="left"> <ScrollReveal direction="left">
<div className="glass-card rounded-3xl p-8"> <div className="glass-card rounded-3xl p-8">
<h2 className="text-2xl font-bold mb-6 text-white">发送消息</h2> <h2 className="text-2xl font-bold mb-6 text-white">發送消息</h2>
<form onSubmit={handleSubmit} className="space-y-5"> <form onSubmit={handleSubmit} className="space-y-5">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-5"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
<div> <div>
@@ -60,52 +57,52 @@ export default function Contact() {
value={formData.name} value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })} onChange={(e) => setFormData({ ...formData, name: e.target.value })}
className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white focus:outline-none focus:border-purple-500/50 transition-all placeholder-gray-500" className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white focus:outline-none focus:border-purple-500/50 transition-all placeholder-gray-500"
placeholder="请输入您的姓名" placeholder="請輸入您的姓名"
required required
/> />
</div> </div>
<div> <div>
<label className="block text-gray-400 mb-2 text-sm font-medium">邮箱 *</label> <label className="block text-gray-400 mb-2 text-sm font-medium">郵箱 *</label>
<input <input
type="email" type="email"
value={formData.email} value={formData.email}
onChange={(e) => setFormData({ ...formData, email: e.target.value })} onChange={(e) => setFormData({ ...formData, email: e.target.value })}
className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white focus:outline-none focus:border-purple-500/50 transition-all placeholder-gray-500" className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white focus:outline-none focus:border-purple-500/50 transition-all placeholder-gray-500"
placeholder="请输入您的邮箱" placeholder="請輸入您的郵箱"
required required
/> />
</div> </div>
</div> </div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-5"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
<div> <div>
<label className="block text-gray-400 mb-2 text-sm font-medium">电话</label> <label className="block text-gray-400 mb-2 text-sm font-medium">電話</label>
<input <input
type="tel" type="tel"
value={formData.phone} value={formData.phone}
onChange={(e) => setFormData({ ...formData, phone: e.target.value })} onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white focus:outline-none focus:border-purple-500/50 transition-all placeholder-gray-500" className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white focus:outline-none focus:border-purple-500/50 transition-all placeholder-gray-500"
placeholder="请输入您的电话" placeholder="請輸入您的電話"
/> />
</div> </div>
<div> <div>
<label className="block text-gray-400 mb-2 text-sm font-medium">公司名称</label> <label className="block text-gray-400 mb-2 text-sm font-medium">公司名稱</label>
<input <input
type="text" type="text"
value={formData.company} value={formData.company}
onChange={(e) => setFormData({ ...formData, company: e.target.value })} onChange={(e) => setFormData({ ...formData, company: e.target.value })}
className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white focus:outline-none focus:border-purple-500/50 transition-all placeholder-gray-500" className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white focus:outline-none focus:border-purple-500/50 transition-all placeholder-gray-500"
placeholder="请输入您的公司名称" placeholder="請輸入您的公司名稱"
/> />
</div> </div>
</div> </div>
<div> <div>
<label className="block text-gray-400 mb-2 text-sm font-medium">预算范围</label> <label className="block text-gray-400 mb-2 text-sm font-medium">預算範圍</label>
<select <select
value={formData.budget} value={formData.budget}
onChange={(e) => setFormData({ ...formData, budget: e.target.value })} onChange={(e) => setFormData({ ...formData, budget: e.target.value })}
className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white focus:outline-none focus:border-purple-500/50 transition-all appearance-none" className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white focus:outline-none focus:border-purple-500/50 transition-all appearance-none"
> >
<option value="" className="bg-[#0a0a1a]">请选择预算范围</option> <option value="" className="bg-[#0a0a1a]">請選擇預算範圍</option>
<option value="5000" className="bg-[#0a0a1a]">5,000 以下</option> <option value="5000" className="bg-[#0a0a1a]">5,000 以下</option>
<option value="10000" className="bg-[#0a0a1a]">5,000 - 10,000</option> <option value="10000" className="bg-[#0a0a1a]">5,000 - 10,000</option>
<option value="30000" className="bg-[#0a0a1a]">10,000 - 30,000</option> <option value="30000" className="bg-[#0a0a1a]">10,000 - 30,000</option>
@@ -114,13 +111,13 @@ export default function Contact() {
</select> </select>
</div> </div>
<div> <div>
<label className="block text-gray-400 mb-2 text-sm font-medium">留言内容 *</label> <label className="block text-gray-400 mb-2 text-sm font-medium">留言內容 *</label>
<textarea <textarea
value={formData.message} value={formData.message}
onChange={(e) => setFormData({ ...formData, message: e.target.value })} onChange={(e) => setFormData({ ...formData, message: e.target.value })}
rows={4} rows={4}
className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white focus:outline-none focus:border-purple-500/50 transition-all resize-none placeholder-gray-500" className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white focus:outline-none focus:border-purple-500/50 transition-all resize-none placeholder-gray-500"
placeholder="请描述您的需求，包括视频类型、时长、用途等" placeholder="請描述您的需求，包括視頻類型、時長、用途等"
required required
/> />
</div> </div>
@@ -132,10 +129,10 @@ export default function Contact() {
{isSubmitting ? ( {isSubmitting ? (
<div className="flex items-center justify-center"> <div className="flex items-center justify-center">
<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin mr-2" /> <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin mr-2" />
发送中... 發送中...
</div> </div>
) : ( ) : (
'发送消息' '發送消息'
)} )}
</button> </button>
</form> </form>
@@ -146,7 +143,7 @@ export default function Contact() {
<ScrollReveal direction="right"> <ScrollReveal direction="right">
<div className="space-y-6"> <div className="space-y-6">
<div className="glass-card rounded-3xl p-8"> <div className="glass-card rounded-3xl p-8">
<h2 className="text-2xl font-bold mb-6 text-white">联系方式</h2> <h2 className="text-2xl font-bold mb-6 text-white">聯繫方式</h2>
<div className="space-y-6"> <div className="space-y-6">
{[ {[
{ {
@@ -155,8 +152,8 @@ export default function Contact() {
<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" /> <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" />
</svg> </svg>
), ),
title: '邮箱', title: '郵箱',
content: 'info@cyhtechnology.com', content: 'service@cyhtecdrama.com',
gradient: 'from-purple-500 to-pink-500' gradient: 'from-purple-500 to-pink-500'
}, },
{ {
@@ -165,8 +162,8 @@ export default function Contact() {
<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={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" />
</svg> </svg>
), ),
title: '电话', title: '電話',
content: '+852 XXXX XXXX', content: '17329311495',
gradient: 'from-blue-500 to-cyan-500' gradient: 'from-blue-500 to-cyan-500'
}, },
{ {
@@ -177,7 +174,7 @@ export default function Contact() {
</svg> </svg>
), ),
title: '地址', title: '地址',
content: '香港九龙湾XX大厦', content: 'RM A5,7/F, ASTORIA BUILDING, NO.34 ASHLEY ROAD, TSIM SHA TSUI ，HONG KONG',
gradient: 'from-green-500 to-emerald-500' gradient: 'from-green-500 to-emerald-500'
} }
].map((contact, index) => ( ].map((contact, index) => (
@@ -196,42 +193,29 @@ export default function Contact() {
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
<div className="glass-card rounded-2xl p-6"> <div className="glass-card rounded-2xl p-6">
<h3 className="text-lg font-bold text-white mb-4">工作时间</h3> <h3 className="text-lg font-bold text-white mb-4">工作時間</h3>
<div className="space-y-3 text-sm"> <div className="space-y-3 text-sm">
<div className="flex justify-between"> <div className="flex justify-between">
<span className="text-gray-400">周一至周五</span> <span className="text-gray-400">週一至週五</span>
<span className="text-white">9:00-18:00</span> <span className="text-white">10:00-17:00</span>
</div> </div>
<div className="flex justify-between"> <div className="flex justify-between">
<span className="text-gray-400">周六</span> <span className="text-gray-400">週六</span>
<span className="text-white">10:00-14:00</span> <span className="text-gray-500">休息</span>
</div> </div>
<div className="flex justify-between"> <div className="flex justify-between">
<span className="text-gray-400">周日</span> <span className="text-gray-400">週日</span>
<span className="text-gray-500">休息</span> <span className="text-gray-500">休息</span>
</div> </div>
</div> </div>
</div> </div>
<div className="glass-card rounded-2xl p-6 gradient-bg-animated"> <div className="glass-card rounded-2xl p-6 gradient-bg-animated">
<h3 className="text-lg font-bold text-white mb-4">紧急联系</h3> <h3 className="text-lg font-bold text-white mb-4">緊急聯繫</h3>
<p className="text-white/80 text-sm mb-4"> <p className="text-white/80 text-sm mb-4">
24小时热线，随时为您服务 24小時熱線，隨時爲您服務
</p> </p>
<div className="text-2xl font-bold text-white">+852 XXXX XXXX</div> <div className="text-2xl font-bold text-white">17329311495</div>
</div>
</div>
{/* Map Placeholder */}
<div className="glass-card rounded-2xl overflow-hidden">
<div className="aspect-[16/9] bg-gradient-to-br from-purple-900/50 to-blue-900/50 flex items-center justify-center">
<div className="text-center">
<svg className="w-12 h-12 text-gray-500 mx-auto mb-3" 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={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<p className="text-gray-400">香港九龙湾</p>
</div>
</div> </div>
</div> </div>
</div> </div>

321
src/pages/Home.tsx
View File

@@ -1,45 +1,48 @@
import { useState } from 'react' import { useState } from "react";
import { Link } from 'react-router-dom' import { Link } from "react-router-dom";
import VideoCard from '../components/VideoCard' import VideoCard from "../components/VideoCard";
import VideoModal from '../components/VideoModal' import VideoModal from "../components/VideoModal";
import ParticleBackground from '../components/ParticleBackground' import ParticleBackground from "../components/ParticleBackground";
import AnimatedCounter from '../components/AnimatedCounter' import AnimatedCounter from "../components/AnimatedCounter";
import MarqueeTicker from '../components/MarqueeTicker' import MarqueeTicker from "../components/MarqueeTicker";
import TestimonialCard from '../components/TestimonialCard' import TestimonialCard from "../components/TestimonialCard";
import ScrollReveal from '../components/ScrollReveal' import ScrollReveal from "../components/ScrollReveal";
import ServiceScenes from '../components/ServiceScenes' import ServiceScenes from "../components/ServiceScenes";
import CaseComparison from '../components/CaseComparison' import CaseComparison from "../components/CaseComparison";
import ProcessAnimation from '../components/ProcessAnimation' import ProcessAnimation from "../components/ProcessAnimation";
import FAQ from '../components/FAQ' import FAQ from "../components/FAQ";
import { videos, Video } from '../data/videos' import { videos, Video } from "../data/videos";
const testimonials = [ const testimonials = [
{ {
name: '张总', name: "張總",
role: '市场总监', role: "市場總監",
company: '某科技公司', company: "某科技公司",
content: 'CYH Technology 的 AI 短视频制作效率令人惊叹，原本需要两周的工作现在一天就能完成，而且质量非常出色！', content:
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=zhang' "CYH Technology 的 AI 短視頻製作效率令人驚歎，原本需要兩週的工作現在一天就能完成，而且質量非常出色！",
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=zhang",
}, },
{ {
name: '李经理', name: "李經理",
role: '品牌负责人', role: "品牌負責人",
company: '某电商平台', company: "某電商平臺",
content: '他们的创意团队非常专业，能够精准把握我们的品牌调性，制作出的视频在社交媒体上获得了极高的传播率。', content:
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=li' "他們的創意團隊非常專業，能夠精準把握我們的品牌調性，製作出的視頻在社交媒體上獲得了極高的傳播率。",
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=li",
}, },
{ {
name: '王女士', name: "王女士",
role: '创始人', role: "創始人",
company: '某新消费品牌', company: "某新消費品牌",
content: '作为初创公司，CYH Technology 帮我们用有限预算实现了高品质的品牌视频，性价比非常高！', content:
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=wang' "作爲初創公司，CYH Technology 幫我們用有限預算實現了高品質的品牌視頻，性價比非常高！",
} avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=wang",
] },
];
export default function Home() { export default function Home() {
const [selectedVideo, setSelectedVideo] = useState<Video | null>(null) const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);
const featuredVideos = videos.slice(0, 6) const featuredVideos = videos.slice(0, 6);
return ( return (
<div> <div>
@@ -49,7 +52,10 @@ export default function Home() {
<div className="absolute inset-0"> <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 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
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>
<div className="relative z-10 px-4 max-w-7xl mx-auto"> <div className="relative z-10 px-4 max-w-7xl mx-auto">
@@ -58,18 +64,20 @@ export default function Home() {
<div className="animate-fade-in-up"> <div className="animate-fade-in-up">
<div className="inline-flex items-center px-4 py-2 rounded-full glass-card mb-6"> <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="w-2 h-2 bg-green-400 rounded-full mr-2 animate-pulse" />
<span className="text-gray-300 text-sm">香港领先的 AI 短视频制作公司</span> <span className="text-gray-300 text-sm">
香港領先的 AI 短視頻製作公司
</span>
</div> </div>
<h1 className="text-5xl md:text-6xl font-bold mb-6 leading-tight"> <h1 className="text-5xl md:text-6xl font-bold mb-6 leading-tight">
<span className="gradient-text">AI短视频</span> <span className="gradient-text">AI短視頻</span>
<br /> <br />
<span className="text-white">让创意触手可及</span> <span className="text-white">讓創意觸手可及</span>
</h1> </h1>
<p className="text-lg text-gray-400 mb-8 max-w-lg leading-relaxed"> <p className="text-lg text-gray-400 mb-8 max-w-lg leading-relaxed">
用前沿 AI 科技，10倍效率提升，80%成本降低。 用前沿 AI 科技，10倍效率提升，80%成本降低。
从品牌宣传片到社交媒体内容，一站式视频解决方案。 從品牌宣傳片到社交媒體內容，一站式視頻解決方案。
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 mb-12"> <div className="flex flex-col sm:flex-row gap-4 mb-12">
@@ -79,8 +87,18 @@ export default function Home() {
> >
<span className="relative z-10 flex items-center justify-center"> <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"> <svg
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" /> 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> </svg>
</span> </span>
</Link> </Link>
@@ -88,19 +106,21 @@ export default function Home() {
to="/contact" 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" 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> </Link>
</div> </div>
{/* Quick Stats */} {/* Quick Stats */}
<div className="flex gap-8"> <div className="flex gap-8">
{[ {[
{ value: '500+', label: '成功案例' }, { value: "500+", label: "成功案例" },
{ value: '98%', label: '满意度' }, { value: "98%", label: "滿意度" },
{ value: '10x', label: '效率提升' } { value: "10x", label: "效率提升" },
].map((stat, index) => ( ].map((stat, index) => (
<div key={index}> <div key={index}>
<div className="text-2xl font-bold gradient-text">{stat.value}</div> <div className="text-2xl font-bold gradient-text">
{stat.value}
</div>
<div className="text-sm text-gray-500">{stat.label}</div> <div className="text-sm text-gray-500">{stat.label}</div>
</div> </div>
))} ))}
@@ -115,40 +135,74 @@ export default function Home() {
<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">
<div className="w-20 h-20 mx-auto mb-4 rounded-full gradient-bg-animated flex items-center justify-center animate-pulse-glow"> <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"> <svg
className="w-10 h-10 text-white ml-1"
fill="currentColor"
viewBox="0 0 24 24"
>
<path d="M8 5v14l11-7z" /> <path d="M8 5v14l11-7z" />
</svg> </svg>
</div> </div>
<p className="text-gray-400">AI生成的品牌宣传片</p> <p className="text-gray-400">AI生成的品牌宣傳片</p>
</div> </div>
</div> </div>
</div> </div>
{/* Floating Cards */} {/* Floating Cards */}
<div className="absolute -bottom-6 -left-6 glass-card rounded-2xl p-4 animate-float" style={{ animationDelay: '1s' }}> <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="flex items-center gap-3">
<div className="w-10 h-10 rounded-lg bg-green-500/20 flex items-center justify-center"> <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"> <svg
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" /> 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> </svg>
</div> </div>
<div> <div>
<div className="text-sm font-semibold text-white">10x 效率</div> <div className="text-sm font-semibold text-white">
<div className="text-xs text-gray-500">相比传统制作</div> 10x 效率
</div>
<div className="text-xs text-gray-500">相比傳統制作</div>
</div> </div>
</div> </div>
</div> </div>
<div className="absolute -top-6 -right-6 glass-card rounded-2xl p-4 animate-float" style={{ animationDelay: '2s' }}> <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="flex items-center gap-3">
<div className="w-10 h-10 rounded-lg bg-purple-500/20 flex items-center justify-center"> <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"> <svg
<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" /> 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> </svg>
</div> </div>
<div> <div>
<div className="text-sm font-semibold text-white">80% 节省</div> <div className="text-sm font-semibold text-white">
<div className="text-xs text-gray-500">制作成本</div> 80% 節省
</div>
<div className="text-xs text-gray-500">製作成本</div>
</div> </div>
</div> </div>
</div> </div>
@@ -164,26 +218,16 @@ export default function Home() {
</div> </div>
</section> </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 */} {/* Stats Section */}
<section className="py-20 px-4 relative overflow-hidden"> <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="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="max-w-7xl mx-auto relative z-10">
<div className="grid grid-cols-2 md:grid-cols-4 gap-6"> <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
{[ {[
{ end: 500, suffix: '+', label: '完成项目' }, { end: 500, suffix: "+", label: "完成項目" },
{ end: 100, suffix: '+', label: '合作客户' }, { end: 1000, suffix: "+", label: "合作客戶" },
{ end: 50, suffix: '+', label: '团队成员' }, { end: 200, suffix: "+", label: "團隊成員" },
{ end: 98, suffix: '%', label: '客户满意度' } { end: 98, suffix: "%", label: "客戶滿意度" },
].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">
@@ -201,59 +245,94 @@ export default function Home() {
<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 mb-4"> <h2 className="text-3xl md:text-4xl font-bold mb-4">
为什么选择 <span className="gradient-text">CYH</span> 爲什麼選擇 <span className="gradient-text">CYH</span>
</h2> </h2>
<p className="text-gray-400 max-w-xl mx-auto"> <p className="text-gray-400 max-w-xl mx-auto">
我们将人工智能技术与创意完美融合，为您提供前所未有的视频制作体验 我們將人工智能技術與創意完美融合，爲您提供前所未有的視頻製作體驗
</p> </p>
</div> </div>
</ScrollReveal> </ScrollReveal>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-3 gap-6 h-[234px]">
{[ {[
{ {
icon: ( icon: (
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" /> 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> </svg>
), ),
title: '高效产出', title: "高效產出",
desc: 'AI驱动的制作流程，将传统数周的制作周期缩短至数小时', desc: "AI驅動的製作流程，將傳統數週的製作週期縮短至數小時",
gradient: 'from-yellow-500 to-orange-500' gradient: "from-yellow-500 to-orange-500",
}, },
{ {
icon: ( icon: (
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg
<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" /> 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> </svg>
), ),
title: '创意无限', title: "創意無限",
desc: '突破传统制作限制，实现任何想象中的视觉效果', desc: "突破傳統制作限制，實現任何想象中的視覺效果",
gradient: 'from-purple-500 to-pink-500' gradient: "from-purple-500 to-pink-500",
}, },
{ {
icon: ( icon: (
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg
<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" /> 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> </svg>
), ),
title: '成本优化', title: "成本優化",
desc: '大幅降低视频制作成本，让高品质视频触手可及', desc: "大幅降低視頻製作成本，讓高品質視頻觸手可及",
gradient: 'from-green-500 to-emerald-500' gradient: "from-green-500 to-emerald-500",
} },
].map((feature, index) => ( ].map((feature, index) => (
<ScrollReveal key={index} delay={index * 150}> <ScrollReveal key={index} delay={index * 150}>
<div className="group glass-card rounded-2xl p-8 hover-lift relative overflow-hidden"> <div className="group glass-card h-full 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
<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`}> 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} {feature.icon}
</div> </div>
<h3 className="text-xl font-bold text-white mb-3">{feature.title}</h3> <h3 className="text-xl font-bold text-white mb-3">
<p className="text-gray-400 leading-relaxed">{feature.desc}</p> {feature.title}
</h3>
<p className="text-gray-400 leading-relaxed">
{feature.desc}
</p>
</div> </div>
</ScrollReveal> </ScrollReveal>
))} ))}
@@ -275,13 +354,15 @@ export default function Home() {
<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"> <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> <span className="text-purple-400 text-sm font-medium">
精選作品
</span>
</div> </div>
<h2 className="text-3xl md:text-4xl font-bold mb-4"> <h2 className="text-3xl md:text-4xl font-bold mb-4">
探索 <span className="gradient-text">AI创作</span> 探索 <span className="gradient-text">AI創作</span>
</h2> </h2>
<p className="text-gray-400"> <p className="text-gray-400">
点击作品，立即观看AI生成的精彩视频 點擊作品，立即觀看AI生成的精彩視頻
</p> </p>
</div> </div>
</ScrollReveal> </ScrollReveal>
@@ -301,8 +382,18 @@ export default function Home() {
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" 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"> <svg
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" /> 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> </svg>
</Link> </Link>
</div> </div>
@@ -319,14 +410,14 @@ export default function Home() {
<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"> <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> <span className="text-purple-400 text-sm font-medium">
客戶評價
</span>
</div> </div>
<h2 className="text-3xl md:text-4xl font-bold mb-4"> <h2 className="text-3xl md:text-4xl font-bold mb-4">
他们都在说 他們都在說
</h2> </h2>
<p className="text-gray-400"> <p className="text-gray-400">來自合作伙伴的真實反饋</p>
来自合作伙伴的真实反馈
</p>
</div> </div>
</ScrollReveal> </ScrollReveal>
@@ -351,17 +442,18 @@ export default function Home() {
<div className="max-w-4xl mx-auto text-center relative z-10"> <div className="max-w-4xl mx-auto text-center relative z-10">
<ScrollReveal> <ScrollReveal>
<h2 className="text-4xl md:text-5xl font-bold mb-6"> <h2 className="text-4xl md:text-5xl font-bold mb-6">
准备好开始 <span className="gradient-text">AI视频之旅</span> 了吗？ 準備好開始 <span className="gradient-text">AI視頻之旅</span>{" "}
了嗎？
</h2> </h2>
<p className="text-gray-400 text-lg mb-10 max-w-2xl mx-auto"> <p className="text-gray-400 text-lg mb-10 max-w-2xl mx-auto">
立即联系我们，获取免费咨询和定制方案 立即聯繫我們，獲取免費諮詢和定製方案
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <div className="flex flex-col sm:flex-row gap-4 justify-center">
<Link <Link
to="/contact" 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" 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>
<Link <Link
to="/works" to="/works"
@@ -374,7 +466,10 @@ export default function Home() {
</div> </div>
</section> </section>
<VideoModal video={selectedVideo} onClose={() => setSelectedVideo(null)} /> <VideoModal
video={selectedVideo}
onClose={() => setSelectedVideo(null)}
/>
</div> </div>
) );
} }

11
src/pages/Works.tsx
View File

@@ -24,14 +24,11 @@ export default function Works() {
<div className="max-w-7xl mx-auto relative z-10"> <div className="max-w-7xl mx-auto relative z-10">
<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>
<h1 className="text-4xl md:text-5xl font-bold mb-4"> <h1 className="text-4xl md:text-5xl font-bold mb-4">
<span className="gradient-text">作品</span> 展示 <span className="gradient-text">作品</span> 展示
</h1> </h1>
<p className="text-lg text-gray-400 max-w-2xl mx-auto"> <p className="text-lg text-gray-400 max-w-2xl mx-auto">
探索我们用AI技术创作的精彩短视频作品，点击即可观看 探索我們用AI技術創作的精彩短視頻作品，點擊即可觀看
</p> </p>
</div> </div>
</ScrollReveal> </ScrollReveal>
@@ -58,7 +55,7 @@ export default function Works() {
{/* Video Count */} {/* Video Count */}
<div className="text-center mb-8"> <div className="text-center mb-8">
<p className="text-gray-500 text-sm"> <p className="text-gray-500 text-sm">
共 <span className="text-purple-400 font-semibold">{filteredVideos.length}</span> 个作品 共 <span className="text-purple-400 font-semibold">{filteredVideos.length}</span> 個作品
</p> </p>
</div> </div>
@@ -78,8 +75,8 @@ export default function Works() {
<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" /> <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" />
</svg> </svg>
</div> </div>
<p className="text-gray-400 text-lg mb-2">暂无该分类的作品</p> <p className="text-gray-400 text-lg mb-2">暫無該分類的作品</p>
<p className="text-gray-500 text-sm">请尝试其他分类</p> <p className="text-gray-500 text-sm">請嘗試其他分類</p>
</div> </div>
)} )}
</div> </div>

8
vite.config.ts
View File

@@ -6,5 +6,11 @@ export default defineConfig({
server: { server: {
port: 3000, port: 3000,
open: true open: true
} },
build: {
minify: 'esbuild',
},
esbuild: {
legalComments: 'none',
},
}) })