62 lines
2.5 KiB
TypeScript
62 lines
2.5 KiB
TypeScript
import { motion } from 'motion/react';
|
|
|
|
// PART II 피봇: 현장 고충 중심으로 재작성. #3 "데이터 기반의 마케팅 부족"은 유지(사용자 피드백).
|
|
const problems = [
|
|
{
|
|
title: "콘텐츠, 소진되는 비용과 시간",
|
|
desc: "매주 쏟아지는 콘텐츠 제작 요구에 인력·시간·예산이 빠르게 소진됩니다. ROI를 측정할 여력도 부족합니다."
|
|
},
|
|
{
|
|
title: "트렌드와 경쟁사 분석 부재",
|
|
desc: "강남언니·네이버·유튜브에서 경쟁 병원이 어떤 콘텐츠·메시지로 움직이는지 체계적으로 추적할 방법이 없습니다.",
|
|
highlight: true
|
|
},
|
|
{
|
|
title: "데이터 기반의 마케팅 부족",
|
|
desc: "콘텐츠·광고·채널 성과가 어디에서 어떻게 작동하는지 데이터로 증명하기 어렵고, 의사결정은 감에 의존합니다."
|
|
}
|
|
];
|
|
|
|
export default function Problems() {
|
|
return (
|
|
<section className="py-24 bg-slate-50 px-6 relative overflow-hidden">
|
|
<div className="max-w-6xl mx-auto">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
className="text-center mb-16"
|
|
>
|
|
<h2 className="text-3xl md:text-5xl font-serif font-bold text-primary-900 mb-4">
|
|
Premium Medical Marketing is Hard
|
|
</h2>
|
|
<p className="text-lg text-slate-600 max-w-2xl mx-auto">
|
|
병원 마케팅이 직면한 3가지 핵심 과제
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid md:grid-cols-3 gap-6">
|
|
{problems.map((problem, idx) => (
|
|
<motion.div
|
|
key={idx}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: idx * 0.1 }}
|
|
className="bg-white rounded-2xl p-8 md:p-10 border border-slate-100 shadow-sm hover:shadow-md transition-shadow flex flex-col justify-center"
|
|
>
|
|
<h3 className={`text-2xl font-bold mb-4 ${problem.highlight ? 'text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-purple-600' : 'text-primary-900'}`}>
|
|
{problem.title}
|
|
</h3>
|
|
<p className="text-slate-600 text-base leading-relaxed">
|
|
{problem.desc}
|
|
</p>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|