67 lines
2.8 KiB
TypeScript
67 lines
2.8 KiB
TypeScript
import { motion } from 'motion/react';
|
|
import { useNavigate, useParams } from 'react-router';
|
|
import { RocketFilled, DownloadFilled } from '../icons/FilledIcons';
|
|
import { useExportPDF } from '../../hooks/useExportPDF';
|
|
|
|
export default function PlanCTA() {
|
|
const { exportPDF, isExporting } = useExportPDF();
|
|
const navigate = useNavigate();
|
|
const { id } = useParams<{ id: string }>();
|
|
|
|
return (
|
|
<motion.section
|
|
className="py-16 md:py-20 px-6"
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, ease: 'easeOut' }}
|
|
>
|
|
<div className="max-w-7xl mx-auto">
|
|
<div
|
|
data-cta-card
|
|
className="rounded-2xl bg-gradient-to-r from-[#fff3eb] via-[#e4cfff] to-[#f5f9ff] p-10 md:p-14 text-center"
|
|
>
|
|
<div className="flex justify-center mb-6">
|
|
<div className="w-14 h-14 rounded-full bg-white/80 backdrop-blur-sm border border-white/40 flex items-center justify-center">
|
|
<RocketFilled size={28} className="text-[#4F1DA1]" />
|
|
</div>
|
|
</div>
|
|
|
|
<h3 className="font-serif text-2xl md:text-3xl font-bold text-[#021341] mb-3">
|
|
콘텐츠 제작을 시작하세요
|
|
</h3>
|
|
|
|
<p className="text-[#021341]/60 mb-8 max-w-lg mx-auto">
|
|
INFINITH가 브랜딩부터 콘텐츠 제작, 채널 배포까지 자동화합니다.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-3 justify-center">
|
|
<button
|
|
type="button"
|
|
onClick={() => navigate(`/studio/${id || 'live'}`)}
|
|
className="inline-flex items-center justify-center gap-2 rounded-full bg-gradient-to-r from-[#4F1DA1] to-[#021341] px-6 py-3 text-sm font-medium text-white shadow-md hover:shadow-lg transition-shadow"
|
|
>
|
|
콘텐츠 제작 시작
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => exportPDF('INFINITH_Marketing_Plan')}
|
|
disabled={isExporting}
|
|
className="inline-flex items-center justify-center gap-2 rounded-full bg-white border border-slate-200 px-6 py-3 text-sm font-medium text-[#021341] shadow-sm hover:shadow-md transition-shadow disabled:opacity-60"
|
|
>
|
|
{isExporting ? (
|
|
<svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" />
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
|
|
</svg>
|
|
) : (
|
|
<DownloadFilled size={16} />
|
|
)}
|
|
플랜 다운로드
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.section>
|
|
);
|
|
}
|