o2o-negosium-original/landing/app/components/sections/core-values.tsx

80 lines
3.2 KiB
TypeScript

import { motion } from "motion/react"
import { Briefcase, Clock, Lock, Users, 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"
/** 가격 외 보조 이점 4종 스트립. */
export function CoreValues() {
const fadeUp = useFadeUp()
return (
<Section id="core-values">
<motion.div {...fadeUp} className="mb-24">
<SectionHeading
align="center"
eyebrow="BEYOND EXPECTED VALUE"
title="가격 그 이상의 이점"
description="단순 업무 긴축을 넘어선 진정한 구매 거버넌스 혁신"
descriptionClassName="mt-4 text-[17px]"
/>
</motion.div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-8">
{VALUES.map((value, idx) => (
<ValueStrip key={value.title} value={value} delay={0.1 * (idx + 1)} />
))}
</div>
</Section>
)
}
type Value = { icon: LucideIcon; title: string; description: string }
function ValueStrip({ value, delay }: { value: Value; delay: number }) {
const fadeUp = useFadeUp(delay)
return (
<motion.div {...fadeUp} className="bg-surface p-8 rounded-[32px] flex items-start gap-5 transition-all hover:translate-y-[-4px]">
<div className="w-10 h-10 rounded-full bg-primary/5 flex items-center justify-center text-primary shrink-0 mt-1">
<value.icon className="w-5 h-5" />
</div>
<div>
<Typography variant="cardTitle" className="mb-2">
{value.title}
</Typography>
<Typography variant="small">{value.description}</Typography>
</div>
</motion.div>
)
}
const VALUES: Value[] = [
{
icon: Users,
title: "파트너사 관계 수호",
description:
"단가를 조율하는 과정에서 수반되는 피로감과 실랑이는 온전히 봇이 감당합니다. 담당 부서는 협력사 담당자와 신뢰할 수 있는 인간적 유대를 단단히 하고 동반 성장을 도모하는 큰 틀의 파트너십에만 집중할 수 있습니다.",
},
{
icon: Lock,
title: "완벽하고 투명한 거버넌스",
description:
"모든 제안 접수와 흥정 로그, 조율 타임라인이 위변조가 차단된 고유 원장에 실시간 적재됩니다. 감사 대응이나 의사결정 추적 분석 시 완벽에 가까운 거버넌스를 보장합니다.",
},
{
icon: Briefcase,
title: "핵심 전략에만 집중",
description:
"수많은 이메일 교환, 메신저 단가 실랑이 등 정형적이고 반복적인 흥정 수작업에서 구매 부서를 구해냅니다. 공급망 위기 대처, 우량 소스 발굴과 같은 진정 가치 있는 혁신적 과업에 인재들을 투입하세요.",
},
{
icon: Clock,
title: "협상 리드타임 대폭 긴축",
description:
"수백 공급사와 동시에 병렬 조율을 자동으로 전개하므로 업무량의 한계가 없습니다. 통상 수주일 동안 지루하게 이어지던 최종 가격 타결 주기를 단 수일 안으로 긴축 단축시킬 수 있습니다.",
},
]