From 3214e4f7820a69993f26d96366251e3cf4580567 Mon Sep 17 00:00:00 2001
From: Haewon Kam <haewon.sv@gmail.com>
Date: Thu, 6 Aug 2026 11:56:59 +0900
Subject: [PATCH] =?UTF-8?q?[feat]=20landing:=20=EA=B0=80=EC=9D=B4=EB=93=9C?=
 =?UTF-8?q?=202=EB=B2=88=20=ED=83=AD=20mp4=20=EC=97=B0=EA=B2=B0=20=C2=B7?=
 =?UTF-8?q?=20=EC=B5=9C=EC=A2=85=20CTA=20=EC=97=90=20=EA=B2=B0=EA=B3=BC=20?=
 =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EB=B0=B0=EC=B9=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

① 이용 가이드 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>
---
 landing/app/components/sections/final-cta.tsx | 85 ++++++++++++-------
 .../components/sections/how-it-works-demo.tsx |  4 +
 2 files changed, 60 insertions(+), 29 deletions(-)

diff --git a/landing/app/components/sections/final-cta.tsx b/landing/app/components/sections/final-cta.tsx
index 38f654f..c44419b 100644
--- a/landing/app/components/sections/final-cta.tsx
+++ b/landing/app/components/sections/final-cta.tsx
@@ -15,41 +15,68 @@ import { useFadeUp } from "@/lib/motion"
  *
  * 섹션 껍데기와 머리도 손으로 짜던 걸 Section/SectionHeading 으로 돌렸다.
  * 우회하는 동안 아이브로우 간격이 여기만 20px 이었다(다른 섹션은 12px).
+ *
+ * 전환을 요청하는 자리에 결과 화면을 같이 둔다. 이용 가이드는 "실제 화면으로 보여드립니다"
+ * 라고 약속해서 재구성 목업을 넣을 수 없지만, 여기는 그 약속이 없어 마케팅 컴포짓이 맞는 자리다.
  */
 export function FinalCTA() {
   const fadeUp = useFadeUp()
+  const mediaFadeUp = useFadeUp(0.12)
 
   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"
-        />
+    /* 영상이 붙으면서 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}>
-          <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>
+          <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>
   )
 }
diff --git a/landing/app/components/sections/how-it-works-demo.tsx b/landing/app/components/sections/how-it-works-demo.tsx
index 6e5ab3e..44d2831 100644
--- a/landing/app/components/sections/how-it-works-demo.tsx
+++ b/landing/app/components/sections/how-it-works-demo.tsx
@@ -238,7 +238,11 @@ const DEMO_TABS: DemoTab[] = [
     ],
     checks: ["협력사별 1:1 비대면 협상 포털", "같은 기준으로 응대해 관계 부담 없음"],
     mockup: "phone",
+    /* mp4 를 붙이기 전까지 이 탭만 1.7MB GIF(390x780)를 내려받고 있었다. 같은 내용의
+       mp4 가 저장소에 있는데 참조가 빠져 있었다 — 786K, 540x1080 으로 더 가볍고 더 크다.
+       (원본 캡쳐가 좌우로 잘려 문장이 끊기는 문제는 남아 있다. 재촬영이 필요하다.) */
     gif: "/gifs/negotiation.gif",
+    video: "/gifs/negotiation.mp4",
     gifAlt: "협력사 포털 모바일 협상 화면",
     fallback: {
       icon: Smartphone,