From e9427543c8f764c503b0c2c9b2fd93edca72cae9 Mon Sep 17 00:00:00 2001 From: Mina Choi Date: Wed, 22 Jul 2026 08:29:54 +0900 Subject: [PATCH] =?UTF-8?q?[feat]=20landing:=20=ED=9E=88=EC=96=B4=EB=A1=9C?= =?UTF-8?q?/=EB=8D=B0=EB=AA=A8=20=EB=A6=AC=EB=89=B4=EC=96=BC=20=E2=80=94?= =?UTF-8?q?=20=EC=BD=98=EC=86=94=ED=98=95=20=ED=9E=88=EC=96=B4=EB=A1=9C?= =?UTF-8?q?=C2=B7price-sparkline=20=EC=B6=94=EA=B0=80,=20=EB=8D=B0?= =?UTF-8?q?=EB=AA=A8=20=EB=AF=B8=EB=94=94=EC=96=B4(mp4/jpg)=20=EC=84=B8?= =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80,=20ROI=20=EC=8B=9C=EB=AE=AC?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=ED=84=B0=C2=B7negotiation-console=C2=B7?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=C2=B7=ED=99=88=20=EB=9D=BC=EC=9A=B0=ED=8A=B8?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- landing/app/app.css | 10 ++- .../app/components/sections/hero-console.tsx | 51 +++++++++++++++ .../components/sections/hero-glassmorphic.tsx | 6 +- .../components/sections/hero-neumorphic.tsx | 21 ++++--- .../components/sections/how-it-works-demo.tsx | 36 ++++++++--- .../sections/negotiation-console.tsx | 57 +++-------------- .../app/components/sections/roi-simulator.tsx | 2 +- landing/app/components/ui/button.tsx | 9 +-- landing/app/components/ui/price-sparkline.tsx | 58 ++++++++++++++++++ landing/app/routes/home.tsx | 9 ++- landing/public/gifs/hero_console.jpg | Bin 0 -> 113386 bytes landing/public/gifs/hero_console.mp4 | Bin 0 -> 636141 bytes landing/public/gifs/negotiation.jpg | Bin 0 -> 43413 bytes landing/public/gifs/negotiation.mp4 | Bin 0 -> 805130 bytes landing/public/gifs/negotiation_annotated.jpg | Bin 0 -> 101035 bytes landing/public/gifs/negotiation_annotated.mp4 | Bin 0 -> 549878 bytes landing/public/gifs/negotiation_result.jpg | Bin 0 -> 36316 bytes landing/public/gifs/negotiation_result.mp4 | Bin 0 -> 384192 bytes landing/public/gifs/quote_generation.jpg | Bin 0 -> 57804 bytes landing/public/gifs/quote_generation.mp4 | Bin 0 -> 650522 bytes 20 files changed, 178 insertions(+), 81 deletions(-) create mode 100644 landing/app/components/sections/hero-console.tsx create mode 100644 landing/app/components/ui/price-sparkline.tsx create mode 100644 landing/public/gifs/hero_console.jpg create mode 100644 landing/public/gifs/hero_console.mp4 create mode 100644 landing/public/gifs/negotiation.jpg create mode 100644 landing/public/gifs/negotiation.mp4 create mode 100644 landing/public/gifs/negotiation_annotated.jpg create mode 100644 landing/public/gifs/negotiation_annotated.mp4 create mode 100644 landing/public/gifs/negotiation_result.jpg create mode 100644 landing/public/gifs/negotiation_result.mp4 create mode 100644 landing/public/gifs/quote_generation.jpg create mode 100644 landing/public/gifs/quote_generation.mp4 diff --git a/landing/app/app.css b/landing/app/app.css index e83ae98..14df723 100644 --- a/landing/app/app.css +++ b/landing/app/app.css @@ -19,9 +19,9 @@ --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* 브랜드 */ - --color-primary: #3182F6; - --color-primary-deep: #1B64DA; /* hover */ - --color-primary-soft: #E8F3FF; /* 연한 파랑 배경 — 봇 말풍선, 배지 */ + --color-primary: #476EFF; + --color-primary-deep: #2F52E0; /* hover */ + --color-primary-soft: #ECF0FF; /* 연한 파랑 배경 — 봇 말풍선, 배지 */ /* 텍스트. ink 는 다크 섹션에선 배경색으로도 쓴다 */ --color-ink: #191F28; @@ -38,6 +38,10 @@ --color-line-strong: #E5E8EB; /* 카드 테두리 */ --color-positive: #0B8F57; /* 낙찰·성공 강조 */ + --color-positive-soft: #E8F7EF; /* 연한 초록 배경 — 낙찰 배지 */ + + --color-accent: #8F52FF; /* 보라 강조 — 결과 탭·히어로 장식 */ + --color-accent-soft: #F4EFFF; /* 연한 보라 배경 */ } html { diff --git a/landing/app/components/sections/hero-console.tsx b/landing/app/components/sections/hero-console.tsx new file mode 100644 index 0000000..944c811 --- /dev/null +++ b/landing/app/components/sections/hero-console.tsx @@ -0,0 +1,51 @@ +import { motion } from "motion/react" +import { ArrowDown, ArrowRight } from "lucide-react" + +import { Button } from "@/components/ui/button" + +/** 히어로 변형 — 실시간 협상 콘솔 시즐 영상을 전면에 세운 풀와이드 히어로. */ +export function HeroConsole() { + return ( +
+
+ +
+ + + + + + + +
+
+ ) +} diff --git a/landing/app/components/sections/hero-glassmorphic.tsx b/landing/app/components/sections/hero-glassmorphic.tsx index a98ab5a..d5ff1b9 100644 --- a/landing/app/components/sections/hero-glassmorphic.tsx +++ b/landing/app/components/sections/hero-glassmorphic.tsx @@ -11,8 +11,8 @@ export function HeroGlassmorphic() {
{/* 흐릿한 파스텔 블롭 배경 */}
-
-
+
+
{/* 저채도 그리드 패턴 오버레이 */}
@@ -27,7 +27,7 @@ export function HeroGlassmorphic() { -
+ {/* 우측 상단 메시 제거 — 영상 배경(#F2F4F7)과 섹션 배경을 완전 동일하게 유지해 경계선 없이 블렌딩 */}
{/* 좌: 카피 + CTA */} @@ -49,7 +48,7 @@ export function HeroNeumorphic() {
- {/* 우: 협력사 모바일 협상 실제 화면 (GIF) */} + {/* 우: 모바일 협상 채팅 + 외부 설명 UI(제안가·협상카드·낙찰 하이라이트) 합성 영상 */}
- - 협력사 모바일 협상 포털 실제 화면 - +
diff --git a/landing/app/components/sections/how-it-works-demo.tsx b/landing/app/components/sections/how-it-works-demo.tsx index f093256..64dbbd2 100644 --- a/landing/app/components/sections/how-it-works-demo.tsx +++ b/landing/app/components/sections/how-it-works-demo.tsx @@ -128,6 +128,22 @@ function GifSlot({ tab }: { tab: DemoTab }) { ) } + // video(mp4)가 있으면 우선 재생 — 줌 스크린캐스트는 GIF보다 용량 1/5·화질 우위. 없으면 GIF. + if (tab.video) { + return ( +