Haewon Kam
ab77900dac
한글 문장 안에 영문 브랜드명이 섞이면 읽는 흐름이 끊긴다. 본문 카피만 바꾸고,
성격이 다른 자리는 남겼다.
바꾼 곳 (한글 문장 안)
reinforcement · final-cta · footer 소개문 · how-it-works-demo · comparison 토글 · roi-simulator
남긴 곳과 이유
logo.tsx alt="NEGOTIUM" 로고는 영문 워드마크 이미지다. alt 만 한글로 바꾸면
보이는 것과 읽히는 것이 어긋난다.
footer © negotium Co., Ltd. 법인 표기. 등기된 이름이라 임의로 한글화할 수 없다.
console.negotium.ai 실제 도메인.
og:site_name 브랜드 정식 핸들.
코드 주석 내부 문서.
메타 타이틀은 "네고시움(negotium)" 으로 둘 다 담았다. 영문을 빼면 negotium 으로
검색해 들어오던 유입이 끊긴다 — 검색 질의는 사용자가 정하지 우리가 못 정한다.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
99 lines
4.2 KiB
TypeScript
99 lines
4.2 KiB
TypeScript
import { motion } from "motion/react"
|
|
import { GitMerge, RefreshCw, Scale, type LucideIcon } from "lucide-react"
|
|
|
|
import { Section } from "@/components/ui/section"
|
|
import { HEADING_GAP, SectionHeading } from "@/components/ui/section-heading"
|
|
import { Typography } from "@/components/ui/typography"
|
|
import { OrbitRing } from "@/components/ui/orbit-ring"
|
|
import { useFadeUp } from "@/lib/motion"
|
|
|
|
/** 강화학습 섹션 — 협상할수록 좋아진다는 3개 필러 카드. */
|
|
export function Reinforcement() {
|
|
const fadeUp = useFadeUp()
|
|
|
|
return (
|
|
<Section id="reinforcement" bg="stage" width="lg">
|
|
{/* 순환 링은 원래 히어로에 있었는데, 루프가 의미상 속하는 자리는 여기다 —
|
|
"협상할수록 좋아진다"를 말하는 섹션이고, 히어로는 이미 세로 예산이 포화였다. */}
|
|
{/* 머리가 그리드 셀 안에 들어가 있어서 여기만 gap="none" 이다. 그리드 아이템은
|
|
독립 서식 문맥이라 마진이 상쇄되지 않고, 머리에 mb 를 걸면 items-center 의
|
|
세로 정렬을 밀어버린다. 섹션 간격은 그리드 래퍼가 대신 진다. */}
|
|
<motion.div {...fadeUp} className={`grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center ${HEADING_GAP}`}>
|
|
<div className="lg:col-span-7">
|
|
<SectionHeading
|
|
className="text-center lg:text-left"
|
|
gap="none"
|
|
tone="stage"
|
|
eyebrow="Reinforcement Learning"
|
|
/* 쉼표에서 줄을 명시적으로 끊는다. break-keep + text-balance 에 맡기면
|
|
두 줄 길이를 맞추려고 "협상할수록, 더 / 좋은 조건으로" 처럼 쉼표를
|
|
넘어가서 끊어진다 — 조건절과 결과절이 한 줄에 섞여 의미가 흐려진다. */
|
|
title={
|
|
<>
|
|
협상할수록,
|
|
<br />더 좋은 조건으로
|
|
</>
|
|
}
|
|
description={
|
|
<>
|
|
잘 깎는 요령은 담당자 머릿속에만 남고, 결과는 그날 컨디션에 흔들립니다. 네고시움은 지난 거래 기록과
|
|
협력사가 거절한 지점을 <span className="font-semibold text-on-stage">강화학습</span>에 넣습니다. 어디까지가
|
|
받아들여지는 선인지를 데이터로 익혀서, 결렬 없이 도달 가능한 최선을 찾아갑니다.
|
|
</>
|
|
}
|
|
/>
|
|
</div>
|
|
<div className="lg:col-span-5 flex justify-center">
|
|
<OrbitRing className="w-[280px] md:w-[340px] h-auto" />
|
|
</div>
|
|
</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-stage-raised border border-stage-line p-8 rounded-card flex flex-col justify-between h-[240px]">
|
|
<div className="w-11 h-11 rounded-control bg-primary/15 text-on-stage flex items-center justify-center">
|
|
<pillar.icon className="w-5 h-5" />
|
|
</div>
|
|
<div>
|
|
<Typography variant="cardTitle" className="mb-2 text-on-stage">
|
|
{pillar.title}
|
|
</Typography>
|
|
<Typography variant="caption" className="text-on-stage-soft">
|
|
{pillar.description}
|
|
</Typography>
|
|
</div>
|
|
</motion.div>
|
|
)
|
|
}
|
|
|
|
const PILLARS: Pillar[] = [
|
|
{
|
|
icon: Scale,
|
|
title: "협상 기준의 일관성",
|
|
description: "개인 감정이나 친분에 휘둘리지 않고, 사내 기준과 가이드라인대로만 협상합니다.",
|
|
},
|
|
{
|
|
icon: RefreshCw,
|
|
title: "쓸수록 올라가는 기준선",
|
|
description: "협상이 쌓일수록 기준선이 올라갑니다. 운영 기간이 그대로 협상력이 됩니다.",
|
|
},
|
|
{
|
|
icon: GitMerge,
|
|
title: "결렬 없는 합의",
|
|
description: "성사되지 않을 선까지 밀지 않습니다. 합의 가능한 범위 안에서 최선을 찾습니다.",
|
|
},
|
|
]
|