149 lines
6.7 KiB
TypeScript
149 lines
6.7 KiB
TypeScript
import { useState } from 'react'
|
||
import ScrollReveal from './ScrollReveal'
|
||
|
||
const scenes = [
|
||
{
|
||
id: 'social',
|
||
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 4V2a1 1 0 011-1h8a1 1 0 011 1v2m-9 0h10m-10 0H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2h-2" />
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 11v6m-3-3h6" />
|
||
</svg>
|
||
),
|
||
title: '社交媒体',
|
||
desc: '抖音、小红书、Instagram等平台爆款内容',
|
||
features: ['15秒竖屏视频', '高完播率设计', '爆款文案生成', '多平台适配'],
|
||
gradient: 'from-pink-500 to-rose-500'
|
||
},
|
||
{
|
||
id: 'ecommerce',
|
||
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 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
|
||
</svg>
|
||
),
|
||
title: '电商营销',
|
||
desc: '产品展示、直播切片、详情页视频',
|
||
features: ['3D产品展示', '卖点可视化', '多角度展示', '批量生成'],
|
||
gradient: 'from-orange-500 to-yellow-500'
|
||
},
|
||
{
|
||
id: 'education',
|
||
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 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>
|
||
),
|
||
title: '教育培训',
|
||
desc: '在线课程、知识科普、企业内训',
|
||
features: ['知识可视化', 'AI讲师生成', '课程片头制作', '互动元素'],
|
||
gradient: 'from-blue-500 to-cyan-500'
|
||
},
|
||
{
|
||
id: 'brand',
|
||
icon: (
|
||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
||
</svg>
|
||
),
|
||
title: '企业宣传',
|
||
desc: '品牌故事、企业宣传片、招聘视频',
|
||
features: ['品牌形象塑造', '企业文化展示', '数字人代言', '多语言版本'],
|
||
gradient: 'from-purple-500 to-violet-500'
|
||
}
|
||
]
|
||
|
||
export default function ServiceScenes() {
|
||
const [activeScene, setActiveScene] = useState(scenes[0])
|
||
|
||
return (
|
||
<section className="py-24 px-4">
|
||
<div className="max-w-7xl mx-auto">
|
||
<ScrollReveal>
|
||
<div className="text-center mb-16">
|
||
<div className="inline-flex items-center px-4 py-2 rounded-full glass-card mb-6">
|
||
<span className="text-purple-400 text-sm font-medium">应用场景</span>
|
||
</div>
|
||
<h2 className="text-4xl md:text-5xl font-bold mb-4">
|
||
覆盖全场景 <span className="gradient-text">AI视频</span> 需求
|
||
</h2>
|
||
<p className="text-gray-400 text-lg max-w-2xl mx-auto">
|
||
无论您是什么行业，我们都能提供专业的AI视频解决方案
|
||
</p>
|
||
</div>
|
||
</ScrollReveal>
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
||
{/* Scene Tabs */}
|
||
<div className="lg:col-span-4 space-y-3">
|
||
{scenes.map((scene) => (
|
||
<button
|
||
key={scene.id}
|
||
onClick={() => setActiveScene(scene)}
|
||
className={`w-full text-left p-5 rounded-2xl transition-all duration-300 ${
|
||
activeScene.id === scene.id
|
||
? 'glass-card border-purple-500/50'
|
||
: 'hover:bg-white/5'
|
||
}`}
|
||
>
|
||
<div className="flex items-center gap-4">
|
||
<div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${scene.gradient} flex items-center justify-center text-white flex-shrink-0`}>
|
||
{scene.icon}
|
||
</div>
|
||
<div>
|
||
<h3 className={`font-semibold transition-colors ${
|
||
activeScene.id === scene.id ? 'text-white' : 'text-gray-400'
|
||
}`}>
|
||
{scene.title}
|
||
</h3>
|
||
<p className="text-sm text-gray-500">{scene.desc}</p>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{/* Scene Detail */}
|
||
<div className="lg:col-span-8">
|
||
<div className="glass-card rounded-3xl p-8 md:p-10">
|
||
<div className="flex items-center gap-4 mb-8">
|
||
<div className={`w-16 h-16 rounded-2xl bg-gradient-to-br ${activeScene.gradient} flex items-center justify-center text-white`}>
|
||
{activeScene.icon}
|
||
</div>
|
||
<div>
|
||
<h3 className="text-2xl font-bold text-white">{activeScene.title}</h3>
|
||
<p className="text-gray-400">{activeScene.desc}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
|
||
{activeScene.features.map((feature, index) => (
|
||
<div key={index} className="flex items-center gap-3 p-4 rounded-xl bg-white/5">
|
||
<div className={`w-8 h-8 rounded-lg bg-gradient-to-br ${activeScene.gradient} flex items-center justify-center flex-shrink-0`}>
|
||
<svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
</div>
|
||
<span className="text-gray-300">{feature}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="aspect-video rounded-2xl overflow-hidden bg-gradient-to-br from-purple-900/50 to-blue-900/50 flex items-center justify-center">
|
||
<div className="text-center">
|
||
<div className="w-20 h-20 mx-auto mb-4 rounded-full gradient-bg-animated flex items-center justify-center">
|
||
<svg className="w-10 h-10 text-white ml-1" fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M8 5v14l11-7z" />
|
||
</svg>
|
||
</div>
|
||
<p className="text-gray-400">点击观看 {activeScene.title} 案例视频</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|