o2o-negosium-original/landing/app/components/sections/final-cta.tsx
Haewon Kam ab77900dac [feat] landing: 본문 브랜드 표기를 네고시움으로 한글화
한글 문장 안에 영문 브랜드명이 섞이면 읽는 흐름이 끊긴다. 본문 카피만 바꾸고,
성격이 다른 자리는 남겼다.

바꾼 곳 (한글 문장 안)
  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>
2026-08-06 11:19:30 +09:00

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>
)
}