한글 문장 안에 영문 브랜드명이 섞이면 읽는 흐름이 끊긴다. 본문 카피만 바꾸고,
성격이 다른 자리는 남겼다.
바꾼 곳 (한글 문장 안)
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>
56 lines
2.4 KiB
TypeScript
56 lines
2.4 KiB
TypeScript
import { motion } from "motion/react"
|
|
import { ArrowRight } from "lucide-react"
|
|
|
|
import { Button } from "@/components/ui/button"
|
|
import { Section } from "@/components/ui/section"
|
|
import { CTA_GAP, SectionHeading } from "@/components/ui/section-heading"
|
|
import { useFadeUp } from "@/lib/motion"
|
|
|
|
/**
|
|
* 최종 CTA — 히어로와 같은 다크 무대로 페이지를 닫는다.
|
|
*
|
|
* 이 섹션은 원래 디자인 시스템을 우회하고 있었다: bg-ink(무대 색이 아님), font-extrabold,
|
|
* 알약 배지, blur(120px) 글로우 블롭, 다크 배경 위 라이트 토큰(text-ink-muted).
|
|
* 전부 토큰으로 돌렸다. 글로우 블롭은 AI 가 만든 히어로의 대표 장식이라 걷어냈다.
|
|
*
|
|
* 섹션 껍데기와 머리도 손으로 짜던 걸 Section/SectionHeading 으로 돌렸다.
|
|
* 우회하는 동안 아이브로우 간격이 여기만 20px 이었다(다른 섹션은 12px).
|
|
*/
|
|
export function FinalCTA() {
|
|
const fadeUp = useFadeUp()
|
|
|
|
return (
|
|
/* width="md"(max-w-4xl) — sm(max-w-3xl)이면 "조용히 새고 있을지 / 모릅니다" 로 끊겨
|
|
마지막 줄이 고아가 된다. */
|
|
<Section bg="stage" width="md" containerClassName="text-center">
|
|
<motion.div {...fadeUp}>
|
|
<SectionHeading
|
|
align="center"
|
|
tone="stage"
|
|
size="display"
|
|
gap="none"
|
|
eyebrow="Start Today"
|
|
/* 닫는 CTA 라 히어로(74px)보다는 낮추고 섹션 제목(64px)보다는 세운다. */
|
|
titleClassName="text-[32px] sm:text-[44px] md:text-[56px]"
|
|
title={
|
|
<>
|
|
<span className="text-white">지금도 구매 예산은</span>
|
|
<br />
|
|
<span className="text-on-stage-soft/60">조용히 새고 있을지 모릅니다</span>
|
|
</>
|
|
}
|
|
description="협상 테이블에 오르지 못하고 그냥 넘어가던 건들이 있습니다. 네고시움 에이전트가 정해진 기준 안에서 그 건들을 대신 조율합니다."
|
|
descriptionClassName="max-w-xl text-on-stage-soft/75"
|
|
/>
|
|
|
|
<div className={CTA_GAP}>
|
|
<Button href="#contact-section" variant="stage" size="xl" className="group">
|
|
<span>도입 상담 신청</span>
|
|
<ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-0.5" />
|
|
</Button>
|
|
</div>
|
|
</motion.div>
|
|
</Section>
|
|
)
|
|
}
|