60 lines
2.5 KiB
TypeScript
60 lines
2.5 KiB
TypeScript
import { motion } from "motion/react"
|
|
import { ArrowRight } from "lucide-react"
|
|
|
|
import { Button } from "@/components/ui/button"
|
|
|
|
/** 최종 CTA — 다크 몰입 섹션. */
|
|
export function FinalCTA() {
|
|
return (
|
|
<section className="relative bg-ink text-white py-36 md:py-48 overflow-hidden">
|
|
{/* 다크 섹션 중앙의 은은한 파란 글로우 */}
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] rounded-full bg-primary/15 blur-[120px] pointer-events-none" />
|
|
|
|
<div className="max-w-3xl mx-auto px-6 text-center relative z-10">
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
viewport={{ once: true }}
|
|
className="inline-flex items-center gap-2 px-4 py-1.5 bg-primary/10 border border-primary/20 rounded-full text-xs font-bold text-primary mb-8"
|
|
>
|
|
<span>START RECLAIMING YOUR BUDGET TODAY</span>
|
|
</motion.div>
|
|
|
|
<motion.h2
|
|
initial={{ opacity: 0, y: 24 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8, delay: 0.1 }}
|
|
className="text-3xl sm:text-4xl md:text-[54px] font-extrabold tracking-tighter mb-8 text-white leading-[1.2] break-keep"
|
|
>
|
|
지금도 구매 예산은 <br className="sm:hidden" />
|
|
조용히 새고 있을지 모릅니다
|
|
</motion.h2>
|
|
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 24 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
className="text-[17px] text-ink-muted max-w-xl mx-auto mb-14 leading-relaxed font-semibold break-keep"
|
|
>
|
|
수작업으로 진행되어 수많은 단가 타협 기회를 흘려보내던 파트너사 흥정, 규칙 준수에 압도적으로 특화된 negotium 봇에
|
|
위임하고 재무 마진을 안전히 지키십시오.
|
|
</motion.p>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 16 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8, delay: 0.3 }}
|
|
>
|
|
<Button href="#contact-section" size="xl" className="gap-2.5 hover:-translate-y-px">
|
|
<span>도입 및 계약 상담 신청하기</span>
|
|
<ArrowRight className="w-5 h-5" />
|
|
</Button>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|