46 lines
1.7 KiB
TypeScript
46 lines
1.7 KiB
TypeScript
import { PROBLEM_CARDS, PROBLEM_CARD_STAGGER } from "@/features/home/content/problem";
|
|
import { useInView } from "@/hooks/useInView";
|
|
|
|
export function ProblemSection() {
|
|
const { ref, inView } = useInView<HTMLElement>();
|
|
|
|
return (
|
|
<section id="problem" ref={ref} className="py-24 bg-neutral-10 px-6 relative overflow-hidden">
|
|
<div className="max-w-6xl mx-auto">
|
|
|
|
<div className={`text-center mb-16 ${inView ? "animate-fade-in-up" : "opacity-0"}`}>
|
|
<h2 className="headline-30 md:display-48 text-navy-900 mb-4 break-keep">
|
|
Premium Medical Marketing is Hard
|
|
</h2>
|
|
<p className="body-18 text-neutral-70 max-w-2xl mx-auto break-keep">
|
|
병원 마케팅이 직면한 3가지 핵심 과제
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-3 gap-6">
|
|
{PROBLEM_CARDS.map((problem, idx) => (
|
|
<div
|
|
key={problem.title}
|
|
className={`bg-white rounded-2xl p-8 md:p-10 border border-neutral-20 shadow-sm hover:shadow-md transition-shadow flex flex-col justify-center ${
|
|
inView ? `animate-fade-in-up ${PROBLEM_CARD_STAGGER[idx]}` : "opacity-0"
|
|
}`}
|
|
>
|
|
<h3
|
|
className={`font-sans headline-24 mb-4 break-keep ${
|
|
problem.highlight
|
|
? "text-transparent bg-clip-text bg-gradient-to-r from-violet-700 to-violet-500"
|
|
: "text-navy-900"
|
|
}`}
|
|
>
|
|
{problem.title}
|
|
</h3>
|
|
<p className="body-16 text-neutral-70 leading-relaxed break-keep">{problem.desc}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|