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>
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="협상 테이블에 오르지 못하고 그냥 넘어가던 건들이 있습니다. negotium 에이전트가 정해진 기준 안에서 그 건들을 대신 조율합니다."
|
|
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>
|
|
)
|
|
}
|