Haewon Kam
d3e33b10f4
negotiation_annotated_3d.mp4(677K)를 NegotiationReplay 컴포넌트로 대체했다.
영상이라 두 가지를 못 고쳤고, 둘 다 픽셀에 구워진 것이 원인이었다.
화자
"아이마켓 구매 MD" 가 박혀 있었다. POC 고객사 이름이라 다른 MRO 회사에 영업할 때
쓸 수 없다. 이제 "구매 담당자" 로, 회사명 없이 역할만 쓴다 — 상수라 언제든 바꾼다.
색
실측하면 말풍선 #5A68CD, 목표가 라벨 #B96175, 와일드카드 배지 #DB840B 로 셋 다
토큰에 없는 색이었고, 정작 브랜드의 핵심 대비 장치인 민트(#0FFFD6, 상대편 색)는
한 번도 쓰이지 않았다. 이제 토큰만 쓴다 — 우리 쪽 파랑, 상대편 민트.
진행 막대도 파랑에서 민트로 차오르며 양쪽이 만나는 지점을 그린다.
부수 효과
- 다크 무대에 네이티브로 그리니 밝은 영상이 구멍처럼 뜨던 문제가 사라졌다.
카드로 감싸고 그림자로 띄우던 처리가 더는 필요 없다.
- 677K + 포스터 85K → 0. 어느 해상도에서도 선명하다(영상은 840x1260 고정이었다).
- role="img" + aria-label 로 스크린리더가 결론을 읽는다. 영상은 못 읽었다.
숫자는 지어내지 않고 DEMO_ITEMS[0] 을 그대로 쓴다. 위쪽 인터랙티브 데모와 같은
품목·같은 가격이라 둘을 다 본 사람에게 앞뒤가 맞는다.
구현 메모
- 화면 밖에서는 타이머를 멈춘다(IntersectionObserver). 페이지 최하단이라
대부분의 시간 동안 보이지 않는데 계속 도는 건 배터리를 쓰는 일이다.
- prefers-reduced-motion 이면 최종 상태를 정지 표시한다.
- 낙찰 카드 자리를 h-[74px] 로 항상 확보하고 내용만 켜고 끈다. 나타날 때 아래가
밀리면 페이지가 주기적으로 흔들린다. 대신 금액은 whitespace-nowrap — 고정 높이라
한 줄이라도 접히면 잘린다(실제로 "1,080,000" 뒤 "원" 이 접혔다).
검증: 1280x900 카드 319x74 · 375x812 285x74, 슬롯 초과·가로 넘침 없음.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
73 lines
3.7 KiB
TypeScript
73 lines
3.7 KiB
TypeScript
import { motion } from "motion/react"
|
|
import { ArrowRight } from "lucide-react"
|
|
|
|
import { Button } from "@/components/ui/button"
|
|
import { NegotiationReplay } from "@/components/ui/negotiation-replay"
|
|
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()
|
|
const mediaFadeUp = useFadeUp(0.12)
|
|
|
|
return (
|
|
/* 영상이 붙으면서 width 를 md(max-w-4xl) → lg(max-w-5xl) 로 넓혔다.
|
|
세로 목업과 카피를 4xl 안에 2단으로 밀어넣으면 양쪽 다 좁아진다. */
|
|
<Section bg="stage" width="lg">
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">
|
|
<motion.div {...fadeUp} className="lg:col-span-7 text-center lg:text-left">
|
|
<SectionHeading
|
|
align="left"
|
|
className="text-center lg:text-left"
|
|
tone="stage"
|
|
size="display"
|
|
gap="none"
|
|
eyebrow="Start Today"
|
|
/* 닫는 CTA 라 히어로(74px)보다는 낮추고 섹션 제목(64px)보다는 세운다.
|
|
2단이 되면서 한 줄이 짧아져 lg 부터 한 단계 더 줄인다. */
|
|
titleClassName="text-[32px] sm:text-[44px] md:text-[56px] lg:text-[48px]"
|
|
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 mx-auto lg:mx-0"
|
|
/>
|
|
|
|
<div className={`${CTA_GAP} flex justify-center lg:justify-start`}>
|
|
<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>
|
|
|
|
{/* 결과 화면. 예전엔 negotiation_annotated_3d.mp4 였는데 컴포넌트로 바꿨다 —
|
|
영상은 화자("아이마켓 구매 MD")와 색이 픽셀에 구워져 있어 둘 다 못 고쳤다.
|
|
다크 무대에 네이티브로 그리니 밝은 영상이 구멍처럼 뜨던 문제도 같이 사라져서,
|
|
카드로 감싸고 그림자로 띄우던 처리가 더는 필요 없다. */}
|
|
<motion.div {...mediaFadeUp} className="lg:col-span-5">
|
|
<NegotiationReplay className="mx-auto max-w-[360px] lg:max-w-none" />
|
|
</motion.div>
|
|
</div>
|
|
</Section>
|
|
)
|
|
}
|