78 lines
3.0 KiB
TypeScript
78 lines
3.0 KiB
TypeScript
|
|
||
|
|
import React from 'react';
|
||
|
|
import { ProjectType } from '../types';
|
||
|
|
import { Tv, Music, Smartphone, Sparkles, Clapperboard } from 'lucide-react';
|
||
|
|
|
||
|
|
interface ProjectTypeSelectorProps {
|
||
|
|
onSelect: (type: ProjectType) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
const ProjectTypeSelector: React.FC<ProjectTypeSelectorProps> = ({ onSelect }) => {
|
||
|
|
const options = [
|
||
|
|
{
|
||
|
|
id: ProjectType.NETFLIX_SERIES,
|
||
|
|
title: "Netflix 影集改編",
|
||
|
|
description: "AI 影集統籌模式 (Showrunner)。將小說拆解為季/集結構，並進行長篇敘事規劃。",
|
||
|
|
icon: Tv,
|
||
|
|
color: "text-rose-400",
|
||
|
|
bg: "bg-rose-500/10",
|
||
|
|
border: "hover:border-rose-500/50"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: ProjectType.MUSIC_VIDEO,
|
||
|
|
title: "MV 音樂錄影帶",
|
||
|
|
description: "AI 導演模式 (Director)。視覺化歌詞節奏，創造風格強烈的短片分鏡。",
|
||
|
|
icon: Music,
|
||
|
|
color: "text-purple-400",
|
||
|
|
bg: "bg-purple-500/10",
|
||
|
|
border: "hover:border-purple-500/50"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: ProjectType.VIRTUAL_INFLUENCER,
|
||
|
|
title: "虛擬網紅運營",
|
||
|
|
description: "AI 經紀人模式 (Manager)。生成連續性的人設生活動態與社群內容。",
|
||
|
|
icon: Smartphone,
|
||
|
|
color: "text-cyan-400",
|
||
|
|
bg: "bg-cyan-500/10",
|
||
|
|
border: "hover:border-cyan-500/50"
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="animate-fade-in max-w-6xl mx-auto pt-10">
|
||
|
|
<div className="text-center mb-16">
|
||
|
|
<div className="inline-block p-5 rounded-3xl glass-panel mb-6 shadow-2xl">
|
||
|
|
<Clapperboard className="w-16 h-16 text-indigo-400 drop-shadow-[0_0_15px_rgba(129,140,248,0.5)]" />
|
||
|
|
</div>
|
||
|
|
<h2 className="text-6xl font-bold text-white mb-6 tracking-tighter text-glow">Lumina Studio</h2>
|
||
|
|
<p className="text-xl text-zinc-400 max-w-2xl mx-auto font-light">
|
||
|
|
AI 驅動的影視神經網絡製程平台
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
|
|
{options.map((opt) => (
|
||
|
|
<div
|
||
|
|
key={opt.id}
|
||
|
|
onClick={() => onSelect(opt.id)}
|
||
|
|
className={`glass-card rounded-3xl p-8 cursor-pointer transition-all duration-500 hover:-translate-y-2 group border border-white/5 ${opt.border}`}
|
||
|
|
>
|
||
|
|
<div className={`w-16 h-16 rounded-2xl ${opt.bg} flex items-center justify-center mb-8 shadow-lg backdrop-blur-md group-hover:scale-110 transition-transform duration-300`}>
|
||
|
|
<opt.icon className={`w-8 h-8 ${opt.color}`} />
|
||
|
|
</div>
|
||
|
|
<h3 className="text-2xl font-bold text-white mb-4">{opt.title}</h3>
|
||
|
|
<p className="text-zinc-400 leading-relaxed text-sm font-light">{opt.description}</p>
|
||
|
|
|
||
|
|
<div className="mt-10 flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-zinc-500 group-hover:text-white transition-colors">
|
||
|
|
<span>啟動專案</span>
|
||
|
|
<Sparkles className="w-4 h-4" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ProjectTypeSelector;
|