42 lines
2.0 KiB
TypeScript
42 lines
2.0 KiB
TypeScript
import ArrowUpRightIcon from "@/assets/report/arrow-up-right.svg?react";
|
|
import DownloadIcon from "@/assets/report/download.svg?react";
|
|
import TrendingUpIcon from "@/assets/icons/trending-up.svg?react";
|
|
import { Link } from "react-router-dom";
|
|
|
|
export function KpiTransformationCtaCard() {
|
|
return (
|
|
<div
|
|
className="rounded-2xl bg-gradient-to-r from-marketing-cream via-marketing-lilac to-marketing-ice p-8 md:p-12 text-center relative overflow-hidden animate-fade-in-up animation-delay-300"
|
|
data-cta-card
|
|
>
|
|
<div className="relative">
|
|
<div className="w-14 h-14 rounded-2xl bg-navy-950/10 flex items-center justify-center mx-auto mb-6 [&_svg]:block">
|
|
<TrendingUpIcon width={28} height={28} className="text-navy-950" aria-hidden />
|
|
</div>
|
|
<h3 className="font-serif text-2xl md:text-3xl font-bold text-navy-950 mb-3 break-keep">
|
|
Start Your Transformation
|
|
</h3>
|
|
<p className="body-16 text-navy-950/60 mb-8 max-w-xl mx-auto break-keep">
|
|
INFINITH와 함께 데이터 기반 마케팅 전환을 시작하세요. 90일 안에 측정 가능한 성과를 만들어 드립니다.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
<Link
|
|
to="/"
|
|
className="inline-flex items-center gap-2 btn-primary font-semibold px-8 py-4 rounded-full hover:shadow-xl transition-all"
|
|
>
|
|
마케팅 기획
|
|
<ArrowUpRightIcon width={18} height={18} aria-hidden />
|
|
</Link>
|
|
<button
|
|
type="button"
|
|
className="inline-flex items-center gap-2 bg-white border border-neutral-20 text-navy-950 font-semibold px-8 py-4 rounded-full hover:bg-neutral-10 shadow-sm hover:shadow-md transition-all cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed break-keep"
|
|
>
|
|
<DownloadIcon width={18} height={18} aria-hidden />
|
|
리포트 다운로드
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|