zhxiao1124
b957703d94
本次提交完成多项改进： 1. 新增6个作品展示图片资源 2. 添加平滑滚动全局配置与路由跳转自动回顶功能 3. 调整开发服务器为0.0.0.0监听方便局域网访问 4. 优化页面布局：调整作品网格为4列布局、修正统计组件排版 5. 简化作品数据结构，移除冗余描述字段，更新作品标题与封面 6. 禁用部分交互特效与分类筛选功能，简化页面UI 7. 优化首页与关于页面的标题排版
461 lines
19 KiB
TypeScript
461 lines
19 KiB
TypeScript
import { useState } from "react";
|
||
import { Link } from "react-router-dom";
|
||
import VideoCard from "../components/VideoCard";
|
||
import VideoModal from "../components/VideoModal";
|
||
import ParticleBackground from "../components/ParticleBackground";
|
||
import AnimatedCounter from "../components/AnimatedCounter";
|
||
import MarqueeTicker from "../components/MarqueeTicker";
|
||
import TestimonialCard from "../components/TestimonialCard";
|
||
import ScrollReveal from "../components/ScrollReveal";
|
||
import ServiceScenes from "../components/ServiceScenes";
|
||
import CaseComparison from "../components/CaseComparison";
|
||
import ProcessAnimation from "../components/ProcessAnimation";
|
||
import FAQ from "../components/FAQ";
|
||
import { videos, Video } from "../data/videos";
|
||
|
||
const testimonials = [
|
||
{
|
||
name: "張總",
|
||
role: "市場總監",
|
||
company: "某科技公司",
|
||
content:
|
||
"CYH Technology 的 AI 短視頻製作效率令人驚歎，原本需要兩週的工作現在一天就能完成，而且質量非常出色！",
|
||
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=zhang",
|
||
},
|
||
{
|
||
name: "李經理",
|
||
role: "品牌負責人",
|
||
company: "某電商平臺",
|
||
content:
|
||
"他們的創意團隊非常專業，能夠精準把握我們的品牌調性，製作出的視頻在社交媒體上獲得了極高的傳播率。",
|
||
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=li",
|
||
},
|
||
{
|
||
name: "王女士",
|
||
role: "創始人",
|
||
company: "某新消費品牌",
|
||
content:
|
||
"作爲初創公司，CYH Technology 幫我們用有限預算實現了高品質的品牌視頻，性價比非常高！",
|
||
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=wang",
|
||
},
|
||
];
|
||
|
||
export default function Home() {
|
||
const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);
|
||
const featuredVideos = videos.slice(0, 6);
|
||
|
||
return (
|
||
<div>
|
||
{/* Hero Section */}
|
||
<section className="relative min-h-screen flex items-center justify-center overflow-hidden">
|
||
<ParticleBackground />
|
||
|
||
<div className="absolute inset-0">
|
||
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-purple-600/20 rounded-full blur-[128px] animate-float" />
|
||
<div
|
||
className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-blue-600/20 rounded-full blur-[128px] animate-float"
|
||
style={{ animationDelay: "2s" }}
|
||
/>
|
||
</div>
|
||
|
||
<div className="relative z-10 px-4 max-w-7xl mx-auto">
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||
{/* Left Content */}
|
||
<div className="animate-fade-in-up">
|
||
<h1 className="text-5xl md:text-6xl font-bold mb-6 leading-tight">
|
||
<div className="gradient-text mb-5">AI短視頻</div>
|
||
|
||
<span className="text-white">讓創意觸手可及</span>
|
||
</h1>
|
||
|
||
<p className="text-lg text-gray-400 mb-8 max-w-lg leading-relaxed">
|
||
用前沿 AI 科技，10倍效率提升，80%成本降低。
|
||
從品牌宣傳片到社交媒體內容，一站式視頻解決方案。
|
||
</p>
|
||
|
||
<div className="flex flex-col sm:flex-row gap-4 mb-12">
|
||
<Link
|
||
to="/works"
|
||
className="group px-8 py-4 gradient-bg-animated rounded-2xl text-white font-bold text-lg overflow-hidden relative"
|
||
>
|
||
<span className="relative z-10 flex items-center justify-center">
|
||
查看作品
|
||
<svg
|
||
className="w-5 h-5 ml-2 transform group-hover:translate-x-1 transition-transform"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M17 8l4 4m0 0l-4 4m4-4H3"
|
||
/>
|
||
</svg>
|
||
</span>
|
||
</Link>
|
||
<Link
|
||
to="/contact"
|
||
className="px-8 py-4 border-2 border-purple-500/50 rounded-2xl text-purple-400 font-bold text-lg hover:border-purple-400 hover:bg-purple-500/10 transition-all duration-300"
|
||
>
|
||
免費諮詢
|
||
</Link>
|
||
</div>
|
||
|
||
{/* Quick Stats */}
|
||
<div className="flex gap-8">
|
||
{[
|
||
{ value: "500+", label: "成功案例" },
|
||
{ value: "98%", label: "滿意度" },
|
||
{ value: "10x", label: "效率提升" },
|
||
].map((stat, index) => (
|
||
<div key={index}>
|
||
<div className="text-2xl font-bold gradient-text">
|
||
{stat.value}
|
||
</div>
|
||
<div className="text-sm text-gray-500">{stat.label}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Right - Video Showcase */}
|
||
<div className="hidden lg:block relative">
|
||
<div className="relative">
|
||
{/* Main Video Card */}
|
||
<div className="glass-card rounded-3xl overflow-hidden transform rotate-2 hover:rotate-0 transition-transform duration-500">
|
||
<div className="aspect-video bg-gradient-to-br from-purple-900/50 to-blue-900/50 flex items-center justify-center">
|
||
<div className="text-center">
|
||
<div className="w-20 h-20 mx-auto mb-4 rounded-full gradient-bg-animated flex items-center justify-center animate-pulse-glow">
|
||
<svg
|
||
className="w-10 h-10 text-white ml-1"
|
||
fill="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path d="M8 5v14l11-7z" />
|
||
</svg>
|
||
</div>
|
||
<p className="text-gray-400">AI生成的品牌宣傳片</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Floating Cards */}
|
||
<div
|
||
className="absolute -bottom-6 -left-6 glass-card rounded-2xl p-4 animate-float"
|
||
style={{ animationDelay: "1s" }}
|
||
>
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-10 h-10 rounded-lg bg-green-500/20 flex items-center justify-center">
|
||
<svg
|
||
className="w-5 h-5 text-green-400"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M13 10V3L4 14h7v7l9-11h-7z"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<div className="text-sm font-semibold text-white">
|
||
10x 效率
|
||
</div>
|
||
<div className="text-xs text-gray-500">相比傳統制作</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
className="absolute -top-6 -right-6 glass-card rounded-2xl p-4 animate-float"
|
||
style={{ animationDelay: "2s" }}
|
||
>
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-10 h-10 rounded-lg bg-purple-500/20 flex items-center justify-center">
|
||
<svg
|
||
className="w-5 h-5 text-purple-400"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<div className="text-sm font-semibold text-white">
|
||
80% 節省
|
||
</div>
|
||
<div className="text-xs text-gray-500">製作成本</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="absolute bottom-12 left-1/2 transform -translate-x-1/2 animate-bounce">
|
||
<div className="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center">
|
||
<div className="w-1.5 h-3 bg-white/50 rounded-full mt-2 animate-pulse" />
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Stats Section */}
|
||
<section className="py-20 px-4 relative overflow-hidden">
|
||
<div className="absolute inset-0 bg-gradient-to-b from-purple-900/10 to-transparent" />
|
||
<div className="max-w-7xl mx-auto relative z-10">
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||
{[
|
||
{ end: 500, suffix: "+", label: "完成項目" },
|
||
{ end: 1000, suffix: "+", label: "合作客戶" },
|
||
{ end: 200, suffix: "+", label: "團隊成員" },
|
||
{ end: 98, suffix: "%", label: "客戶滿意度" },
|
||
].map((stat, index) => (
|
||
<ScrollReveal key={index} delay={index * 100}>
|
||
<div className="text-center glass-card rounded-2xl p-6 hover-lift">
|
||
<AnimatedCounter end={stat.end} suffix={stat.suffix} />
|
||
<p className="text-gray-400 mt-2 font-medium">{stat.label}</p>
|
||
</div>
|
||
</ScrollReveal>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Features Section */}
|
||
<section className="py-20 px-4">
|
||
<div className="max-w-7xl mx-auto">
|
||
<ScrollReveal>
|
||
<div className="text-center mb-16">
|
||
<h2 className="text-3xl md:text-4xl font-bold mb-4">
|
||
爲什麼選擇 <span className="gradient-text">CYH</span>
|
||
</h2>
|
||
<p className="text-gray-400 max-w-xl mx-auto">
|
||
我們將人工智能技術與創意完美融合，爲您提供前所未有的視頻製作體驗
|
||
</p>
|
||
</div>
|
||
</ScrollReveal>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 h-[234px]">
|
||
{[
|
||
{
|
||
icon: (
|
||
<svg
|
||
className="w-8 h-8"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M13 10V3L4 14h7v7l9-11h-7z"
|
||
/>
|
||
</svg>
|
||
),
|
||
title: "高效產出",
|
||
desc: "AI驅動的製作流程，將傳統數週的製作週期縮短至數小時",
|
||
gradient: "from-yellow-500 to-orange-500",
|
||
},
|
||
{
|
||
icon: (
|
||
<svg
|
||
className="w-8 h-8"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"
|
||
/>
|
||
</svg>
|
||
),
|
||
title: "創意無限",
|
||
desc: "突破傳統制作限制，實現任何想象中的視覺效果",
|
||
gradient: "from-purple-500 to-pink-500",
|
||
},
|
||
{
|
||
icon: (
|
||
<svg
|
||
className="w-8 h-8"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||
/>
|
||
</svg>
|
||
),
|
||
title: "成本優化",
|
||
desc: "大幅降低視頻製作成本，讓高品質視頻觸手可及",
|
||
gradient: "from-green-500 to-emerald-500",
|
||
},
|
||
].map((feature, index) => (
|
||
<ScrollReveal key={index} delay={index * 150}>
|
||
<div className="group glass-card 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
|
||
className={`w-14 h-14 rounded-xl bg-gradient-to-br ${feature.gradient} flex items-center justify-center mb-5 text-white shadow-lg`}
|
||
>
|
||
{feature.icon}
|
||
</div>
|
||
<h3 className="text-xl font-bold text-white mb-3">
|
||
{feature.title}
|
||
</h3>
|
||
<p className="text-gray-400 leading-relaxed">
|
||
{feature.desc}
|
||
</p>
|
||
</div>
|
||
</ScrollReveal>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Service Scenes */}
|
||
<ServiceScenes />
|
||
|
||
{/* Process Animation */}
|
||
<ProcessAnimation />
|
||
|
||
{/* Featured Videos */}
|
||
<section className="py-20 px-4 bg-[#0d0d2b]/50 relative overflow-hidden">
|
||
<div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-purple-500/50 to-transparent" />
|
||
|
||
<div className="max-w-7xl mx-auto">
|
||
<ScrollReveal>
|
||
<div className="text-center mb-16">
|
||
|
||
<h2 className="text-3xl md:text-4xl font-bold mb-4">
|
||
探索 <span className="gradient-text">AI創作</span>
|
||
</h2>
|
||
<p className="text-gray-400">
|
||
探索我們用AI技術創作的精彩短視頻作品
|
||
</p>
|
||
</div>
|
||
</ScrollReveal>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 mb-12">
|
||
{featuredVideos.map((video, index) => (
|
||
<ScrollReveal key={video.id} delay={index * 100}>
|
||
<VideoCard video={video} onClick={setSelectedVideo} />
|
||
</ScrollReveal>
|
||
))}
|
||
</div>
|
||
|
||
<ScrollReveal>
|
||
<div className="text-center">
|
||
<Link
|
||
to="/works"
|
||
className="group inline-flex items-center px-8 py-4 gradient-bg-animated rounded-2xl text-white font-bold hover:shadow-2xl hover:shadow-purple-500/25 transition-all duration-300"
|
||
>
|
||
查看全部作品
|
||
<svg
|
||
className="w-5 h-5 ml-2 transform group-hover:translate-x-1 transition-transform"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M17 8l4 4m0 0l-4 4m4-4H3"
|
||
/>
|
||
</svg>
|
||
</Link>
|
||
</div>
|
||
</ScrollReveal>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Case Comparison */}
|
||
<CaseComparison />
|
||
|
||
{/* Testimonials */}
|
||
<section className="py-20 px-4">
|
||
<div className="max-w-7xl mx-auto">
|
||
<ScrollReveal>
|
||
<div className="text-center mb-16">
|
||
|
||
<h2 className="text-3xl md:text-4xl font-bold mb-4">
|
||
他們都在說
|
||
</h2>
|
||
<p className="text-gray-400">來自合作伙伴的真實反饋</p>
|
||
</div>
|
||
</ScrollReveal>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
{testimonials.map((testimonial, index) => (
|
||
<ScrollReveal key={index} delay={index * 150}>
|
||
<TestimonialCard testimonial={testimonial} />
|
||
</ScrollReveal>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* FAQ */}
|
||
<FAQ />
|
||
|
||
{/* CTA Section */}
|
||
<section className="py-24 px-4 relative overflow-hidden">
|
||
<div className="absolute inset-0 bg-gradient-to-b from-purple-900/20 to-[#0a0a1a]" />
|
||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-purple-500/10 rounded-full blur-[128px]" />
|
||
|
||
<div className="max-w-4xl mx-auto text-center relative z-10">
|
||
<ScrollReveal>
|
||
<h2 className="text-4xl md:text-5xl font-bold mb-6">
|
||
準備好開始 <span className="gradient-text">AI視頻之旅</span>{" "}
|
||
了嗎？
|
||
</h2>
|
||
<p className="text-gray-400 text-lg mb-10 max-w-2xl mx-auto">
|
||
立即聯繫我們，獲取免費諮詢和定製方案
|
||
</p>
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<Link
|
||
to="/contact"
|
||
className="px-10 py-5 gradient-bg-animated rounded-2xl text-white font-bold text-lg hover:shadow-2xl hover:shadow-purple-500/25 transition-all duration-300"
|
||
>
|
||
免費諮詢
|
||
</Link>
|
||
<Link
|
||
to="/works"
|
||
className="px-10 py-5 border-2 border-purple-500/50 rounded-2xl text-purple-400 font-bold text-lg hover:border-purple-400 hover:bg-purple-500/10 transition-all duration-300"
|
||
>
|
||
查看案例
|
||
</Link>
|
||
</div>
|
||
</ScrollReveal>
|
||
</div>
|
||
</section>
|
||
|
||
<VideoModal
|
||
video={selectedVideo}
|
||
onClose={() => setSelectedVideo(null)}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|