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/how-it-works-demo.tsx b/landing/app/components/sections/how-it-works-demo.tsx index 8b3858f..54fd11e 100644 --- a/landing/app/components/sections/how-it-works-demo.tsx +++ b/landing/app/components/sections/how-it-works-demo.tsx @@ -221,6 +221,8 @@ const DEMO_TABS: DemoTab[] = [ checks: ["1:1 프라이빗 대화형 역경매 포털 제공", "불필요한 실랑이를 예방하여 파트너십 보호"], mockup: "phone", gif: "/gifs/negotiation.gif", + video: "/gifs/negotiation.mp4", + poster: "/gifs/negotiation.jpg", gifAlt: "AI 모바일 자동 협상 시연", fallback: { icon: Smartphone, diff --git a/landing/app/components/ui/price-sparkline.tsx b/landing/app/components/ui/price-sparkline.tsx new file mode 100644 index 0000000..fef3aea --- /dev/null +++ b/landing/app/components/ui/price-sparkline.tsx @@ -0,0 +1,58 @@ +type PriceSparklineProps = { + /** 스텝별 가격 (시간순) */ + prices: number[] + /** 점선 기준선으로 표시할 목표가 */ + targetPrice: number + /** 그려질 비율 0~1 — 진행도에 맞춰 계단이 드러난다 */ + progress: number +} + +/** 계단식 가격 하락 라인 + 목표가 점선. 진행률만큼 클립으로 드러나는 미니 차트. */ +function PriceSparkline({ prices, targetPrice, progress }: PriceSparklineProps) { + const W = 100 + const H = 44 + // 위아래 여백을 둔 가격 범위 매핑 + const hi = Math.max(...prices, targetPrice) + const lo = Math.min(...prices, targetPrice) + const pad = (hi - lo) * 0.08 || 1 + const MAX = hi + pad + const MIN = lo - pad + const y = (price: number) => ((MAX - price) / (MAX - MIN)) * H + + const stepX = (i: number) => (i / (prices.length - 1)) * W + + // step-after 계단 경로 + let d = `M 0 ${y(prices[0]).toFixed(1)}` + for (let i = 1; i < prices.length; i++) { + d += ` L ${stepX(i).toFixed(1)} ${y(prices[i - 1]).toFixed(1)} L ${stepX(i).toFixed(1)} ${y(prices[i]).toFixed(1)}` + } + + return ( + + + + + + + {/* 목표가 기준선 */} + + + + {/* 가격 하락 계단 — 진행률만큼 클립으로 드러남 */} + + + + + ) +} + +export { PriceSparkline } diff --git a/landing/public/gifs/hero_console.jpg b/landing/public/gifs/hero_console.jpg new file mode 100644 index 0000000..a144400 Binary files /dev/null and b/landing/public/gifs/hero_console.jpg differ diff --git a/landing/public/gifs/hero_console.mp4 b/landing/public/gifs/hero_console.mp4 new file mode 100644 index 0000000..6e70774 Binary files /dev/null and b/landing/public/gifs/hero_console.mp4 differ diff --git a/landing/public/gifs/negotiation.jpg b/landing/public/gifs/negotiation.jpg new file mode 100644 index 0000000..ee6b0ce Binary files /dev/null and b/landing/public/gifs/negotiation.jpg differ diff --git a/landing/public/gifs/negotiation.mp4 b/landing/public/gifs/negotiation.mp4 new file mode 100644 index 0000000..a42482d Binary files /dev/null and b/landing/public/gifs/negotiation.mp4 differ diff --git a/landing/public/gifs/negotiation_annotated.jpg b/landing/public/gifs/negotiation_annotated.jpg new file mode 100644 index 0000000..7e365c0 Binary files /dev/null and b/landing/public/gifs/negotiation_annotated.jpg differ diff --git a/landing/public/gifs/negotiation_annotated.mp4 b/landing/public/gifs/negotiation_annotated.mp4 new file mode 100644 index 0000000..ffb022f Binary files /dev/null and b/landing/public/gifs/negotiation_annotated.mp4 differ diff --git a/landing/public/gifs/negotiation_result.jpg b/landing/public/gifs/negotiation_result.jpg new file mode 100644 index 0000000..885727f Binary files /dev/null and b/landing/public/gifs/negotiation_result.jpg differ diff --git a/landing/public/gifs/negotiation_result.mp4 b/landing/public/gifs/negotiation_result.mp4 new file mode 100644 index 0000000..543a602 Binary files /dev/null and b/landing/public/gifs/negotiation_result.mp4 differ diff --git a/landing/public/gifs/quote_generation.jpg b/landing/public/gifs/quote_generation.jpg new file mode 100644 index 0000000..79d1cfc Binary files /dev/null and b/landing/public/gifs/quote_generation.jpg differ diff --git a/landing/public/gifs/quote_generation.mp4 b/landing/public/gifs/quote_generation.mp4 new file mode 100644 index 0000000..3e82e61 Binary files /dev/null and b/landing/public/gifs/quote_generation.mp4 differ