o2o-negosium-original/landing/app/components/sections/reinforcement.tsx

80 lines
3.1 KiB
TypeScript

import { motion } from "motion/react"
import { GitMerge, RefreshCw, Scale, type LucideIcon } from "lucide-react"
import { Section } from "@/components/ui/section"
import { SectionHeading } from "@/components/ui/section-heading"
import { Typography } from "@/components/ui/typography"
import { useFadeUp } from "@/lib/motion"
/** 강화학습 섹션 — 협상할수록 좋아진다는 3개 필러 카드. */
export function Reinforcement() {
const fadeUp = useFadeUp()
return (
<Section id="reinforcement" bg="surface" bordered className="border-b border-line">
<motion.div {...fadeUp} className="mb-20">
<SectionHeading
className="text-center md:text-left"
eyebrow="REINFORCEMENT LEARNING"
title="협상할수록, 더 좋은 조건으로"
description={
<>
릿 , . negotium은
<span className="font-bold text-primary"> </span> .
,
.
</>
}
descriptionClassName="mt-8 max-w-3xl"
/>
</motion.div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{PILLARS.map((pillar, idx) => (
<PillarCard key={pillar.title} pillar={pillar} delay={0.1 * (idx + 1)} />
))}
</div>
</Section>
)
}
type Pillar = { icon: LucideIcon; title: string; description: string }
function PillarCard({ pillar, delay }: { pillar: Pillar; delay: number }) {
const fadeUp = useFadeUp(delay)
return (
<motion.div {...fadeUp} className="bg-white p-8 rounded-[28px] flex flex-col justify-between h-[240px]">
<div className="w-12 h-12 rounded-2xl bg-primary/5 text-primary flex items-center justify-center">
<pillar.icon className="w-6 h-6" />
</div>
<div>
<Typography variant="cardTitle" className="mb-2">
{pillar.title}
</Typography>
<Typography variant="caption" className="text-ink-soft">
{pillar.description}
</Typography>
</div>
</motion.div>
)
}
const PILLARS: Pillar[] = [
{
icon: Scale,
title: "협상 기준의 일관성",
description: "개인 감정이나 친분에 휘둘리지 않고, 사내 기준과 가이드라인대로만 협상합니다.",
},
{
icon: RefreshCw,
title: "지속적인 전략 최적화",
description: "전략 강화 학습을 통해 기준선이 상승하고, 점진적으로 개선됩니다. 시간이 곧 협상력이 됩니다.",
},
{
icon: GitMerge,
title: "낙찰 성사율 극대화",
description: "무리하게 후려쳐 관계를 깨는 대신, 성사되는 선에서 최대한 끌어냅니다.",
},
]