Haewon Kam
55e3ab02aa
디자인 시스템이 색·활자만 소유하고 간격은 각 섹션 파일에 흩어져 있어, 같은 관계에 값이 여러 개 생겼다. 스크롤할 때 섹션마다 호흡이 달라지던 원인. eyebrow → title 12/20px → 16px title → description 16/20/32px → 20px (display 티어 32px) 머리 → 본문 48~96px 5종 → 56px / 80px(md) 컨트롤 → 본문 56/64px → 48px 리드 → CTA 56/48px → 48px - SectionHeading 이 리듬을 소유하고 HEADING_GAP·CONTROL_GAP·CTA_GAP· DISPLAY_LEAD_GAP 를 노출. 섹션 파일에서 mb-24 같은 값을 직접 쓰지 않는다. - negotiation-demo·final-cta 가 Section/SectionHeading 을 우회해 머리를 직접 조판하고 있었다 — 아이브로우 간격이 이 둘만 20px 이던 원인. 프리미티브로 환원. - SectionHeading 이 eyebrow 없이도 빈 span 을 렌더해 유령 여백이 생기던 버그 수정. - descriptionClassName 의 text-[17px] 중복 선언 제거. lead 변형이 이미 갖고 있는 모바일 축소 단계(text-[16px] sm:text-[17px])를 지우고 있었다. - reinforcement: text-balance 가 쉼표를 넘어 끊던 헤드라인을 <br /> 로 명시. reinforcement 만 gap="none" 인데, 머리가 그리드 셀 안이라 마진이 상쇄되지 않아 items-center 정렬을 밀기 때문. 간격은 그리드 래퍼가 진다. 검증: tsc --noEmit 통과, 프로덕션 빌드 통과. DOM 실측으로 375/868/1440px 전 구간에서 머리→본문·eyebrow→title·컨트롤→본문 값 일치 확인. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
79 lines
2.7 KiB
TypeScript
79 lines
2.7 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}>
|
|
<SectionHeading
|
|
align="center"
|
|
eyebrow="Beyond Price"
|
|
title="가격 그 이상의 이점"
|
|
description="절감액은 시작일 뿐 — 관계, 투명성, 그리고 사람의 시간까지 지킵니다."
|
|
/>
|
|
</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-card 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:
|
|
"수백 공급사와 동시에 협상하므로 사람 수에 얽매이지 않습니다. 수주씩 걸리던 가격 타결을 수일 안에 끝냅니다.",
|
|
},
|
|
]
|