67 lines
3.2 KiB
TypeScript
67 lines
3.2 KiB
TypeScript
import { useState } from 'react';
|
|
import { useNavigate } from 'react-router';
|
|
import { motion } from 'motion/react';
|
|
import { ArrowRight } from 'lucide-react';
|
|
|
|
export default function CTA() {
|
|
const [url, setUrl] = useState('');
|
|
const navigate = useNavigate();
|
|
|
|
const handleAnalyze = () => {
|
|
if (url.trim()) navigate('/report/loading', { state: { url } });
|
|
};
|
|
|
|
return (
|
|
<section className="py-20 md:py-24 bg-primary-900 text-white px-6 relative overflow-hidden">
|
|
<div className="absolute inset-0 -z-10 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-indigo-900 via-primary-900 to-primary-900 opacity-80"></div>
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-purple-500/20 rounded-full blur-[100px] pointer-events-none"></div>
|
|
|
|
<div className="max-w-4xl mx-auto text-center relative z-10">
|
|
<motion.h2
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
className="text-4xl md:text-5xl font-serif font-bold mb-4 leading-tight text-transparent bg-clip-text bg-gradient-to-r from-[#fff3eb] via-[#e4cfff] to-[#f5f9ff]"
|
|
>
|
|
Ready to Transform Your Marketing?
|
|
</motion.h2>
|
|
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: 0.1 }}
|
|
className="text-lg md:text-xl text-purple-200 mb-10 max-w-2xl mx-auto font-light"
|
|
>
|
|
URL 하나로 시작하는 완벽한 마케팅 자동화. 지금 바로 무료 진단을 받아보세요.
|
|
</motion.p>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
className="flex flex-col items-center justify-center gap-4 max-w-md mx-auto"
|
|
>
|
|
<input
|
|
type="url"
|
|
placeholder="Enter Your URL"
|
|
value={url}
|
|
onChange={(e) => setUrl(e.target.value)}
|
|
onKeyDown={(e) => e.key === 'Enter' && handleAnalyze()}
|
|
className="w-full px-8 py-4 text-base font-medium bg-gradient-to-r from-[#fff3eb] via-[#e4cfff] to-[#f5f9ff] border border-white/20 rounded-full focus:outline-none focus:ring-2 focus:ring-white/50 shadow-sm text-center text-primary-900 placeholder:text-primary-900/60"
|
|
/>
|
|
<button onClick={handleAnalyze} className="w-full px-10 py-4 text-lg font-medium text-white rounded-full transition-all shadow-xl hover:shadow-2xl flex items-center justify-center gap-2 group bg-gradient-to-r from-[#4F1DA1] to-[#021341] hover:from-[#AF90FF] hover:to-[#AF90FF]">
|
|
Analyze
|
|
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
|
</button>
|
|
<p className="text-sm text-purple-200/80 mt-2">
|
|
네이버 블로그, 플레이스, 소셜미디어 종합 분석 리포트 받아보기
|
|
</p>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|