Haewon Kam
3214e4f782
① 이용 가이드 2번 탭 (협력사별 1:1 협상) video 필드가 빠져 있어 이 탭만 1.7MB GIF(390x780)를 내려받고 있었다. 같은 내용의 mp4 가 저장소에 있는데 참조만 없었다 — 786K, 540x1080 으로 더 가볍고 더 크다. GifSlot 이 video 를 우선 재생하므로 한 줄로 끝난다. 원본 캡쳐가 좌우로 잘려 문장이 중간에 끊기는 문제는 남아 있다(540x1080 원본 파일 자체에 잘린 채로 들어 있어 CSS 로 못 고친다). 재촬영이 필요하고 주석에 남겼다. ③ 최종 CTA — negotiation_annotated_3d.mp4 이용 가이드에는 넣지 않았다. 그 섹션은 "실제 화면으로 보여드립니다" 라고 약속하는데 이 영상은 재구성 목업이다(실제 UI 는 "아이마켓코리아 (구매 MD)", 영상은 "아이마켓 구매 MD"). 1·3번 탭이 실제 캡쳐인데 2번만 목업이면 register 도 어긋난다. 전환을 요청하는 자리에는 그 약속이 없으므로 마케팅 컴포짓이 맞는 자리다. - 영상 배경이 밝은 회색(#EEF4F5)이라 무대 위에 그냥 놓으면 구멍처럼 뜬다. 모서리를 깎고 그림자를 깔아 "떠 있는 물체"로 만들면 밝기 차이가 의도로 읽힌다. - 폰 프레임이 영상에 내장돼 있어 PhoneFrame 으로 감싸지 않는다. 감싸면 이중 프레임이다. - 2단이 되면서 width md(max-w-4xl) → lg(max-w-5xl), 제목은 lg 부터 한 단계 축소. 4xl 안에 세로 목업과 카피를 밀어넣으면 양쪽 다 좁아진다. - preload="none" — 페이지 최하단이라 첫 로드에 677K 를 미리 받을 이유가 없다. 검증: 1280x900 2단 정상, 375x812 카피→영상 중앙 적층·가로 넘침 없음. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
83 lines
4.1 KiB
TypeScript
83 lines
4.1 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()
|
|
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>
|
|
|
|
{/* 결과 화면. 영상 배경이 밝은 회색(#EEF4F5)이라 무대 위에 그냥 놓으면 구멍처럼 뜬다.
|
|
모서리를 깎고 그림자를 깔아 "떠 있는 물체"로 만들면 밝기 차이가 의도로 읽힌다.
|
|
폰 프레임은 영상에 내장돼 있어서 PhoneFrame 으로 감싸지 않는다 — 감싸면 이중 프레임이 된다. */}
|
|
<motion.div {...mediaFadeUp} className="lg:col-span-5">
|
|
<div className="mx-auto max-w-[300px] lg:max-w-none rounded-card overflow-hidden ring-1 ring-white/10 shadow-[0_30px_80px_-30px_rgba(3,6,15,0.95)]">
|
|
<video
|
|
className="w-full h-auto block"
|
|
src="/gifs/negotiation_annotated_3d.mp4"
|
|
poster="/gifs/negotiation_annotated_3d.jpg"
|
|
autoPlay
|
|
muted
|
|
loop
|
|
playsInline
|
|
preload="none"
|
|
aria-label="협상 타결 후 낙찰가와 절감액이 표시된 화면"
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</Section>
|
|
)
|
|
}
|