From 6ffdb9a389e73efa0ef6dd065bf417cada3cd5aa Mon Sep 17 00:00:00 2001
From: Mina Choi <mnchoi@o2o.kr>
Date: Tue, 21 Jul 2026 13:49:18 +0900
Subject: [PATCH] =?UTF-8?q?[feat]=20landing:=20=EB=B9=84=EA=B5=90=20?=
 =?UTF-8?q?=ED=86=A0=EA=B8=80=20=EC=9E=90=EB=8F=99=EC=9E=AC=EA=B0=9C=C2=B7?=
 =?UTF-8?q?=ED=97=A4=EB=8D=94=20nav=204=EA=B0=9C=20=EC=A0=95=EB=A6=AC?=
 =?UTF-8?q?=C2=B7=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EA=B0=80=EC=9A=B4=EB=8D=B0?=
 =?UTF-8?q?=20=EC=A0=95=EB=A0=AC=C2=B7Phone=20Demo=20=ED=9E=88=EC=96=B4?=
 =?UTF-8?q?=EB=A1=9C=20=EB=94=94=ED=8F=B4=ED=8A=B8,=20FAQ=20=EC=97=B0?=
 =?UTF-8?q?=EB=8F=99=EB=8B=B5=EB=B3=80=C2=B7=EC=A4=91=EA=B0=9C=EB=8C=80?=
 =?UTF-8?q?=ED=96=89=C2=B7=EC=97=AD=EA=B2=BD=EB=A7=A4=C2=B7=EC=99=80?=
 =?UTF-8?q?=EC=9D=BC=EB=93=9C=EC=B9=B4=EB=93=9C=20=EB=93=B1=20=EB=85=BC?=
 =?UTF-8?q?=EB=9E=80=20=EB=AC=B8=EA=B5=AC=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/components/sections/comparison.tsx    | 26 ++++++++++++-------
 landing/app/components/sections/faq.tsx       |  5 ++--
 landing/app/components/sections/footer.tsx    |  5 ++--
 landing/app/components/sections/header.tsx    |  5 ++--
 .../components/sections/how-it-works-demo.tsx | 14 +++++-----
 .../sections/negotiation-console.tsx          |  6 ++---
 .../app/components/sections/reinforcement.tsx |  1 +
 landing/app/routes/home.tsx                   |  4 +--
 8 files changed, 37 insertions(+), 29 deletions(-)

diff --git a/landing/app/components/sections/comparison.tsx b/landing/app/components/sections/comparison.tsx
index c239f20..af6ea76 100644
--- a/landing/app/components/sections/comparison.tsx
+++ b/landing/app/components/sections/comparison.tsx
@@ -7,22 +7,33 @@ import { SectionHeading } from "@/components/ui/section-heading"
 import { Typography } from "@/components/ui/typography"
 import { useFadeUp } from "@/lib/motion"
 
-/** 기존 방식 ↔ 도입 후 토글 비교 — 화면 진입 시 자동으로 오가고, 사용자가 누르면 수동 고정. */
+/** 기존 방식 ↔ 도입 후 토글 비교 — 화면 진입 시 자동으로 오가고, 누르면 잠시 수동(8초 후 자동 재개). */
 export function Comparison() {
   const fadeUp = useFadeUp()
   const toggleFadeUp = useFadeUp(0.1)
   const [mode, setMode] = useState<Mode>("before")
-  // 사용자가 직접 토글을 누르면 자동 전환 중단
+  // 사용자가 토글을 누르면 잠시 자동 전환 중단, 8초 무조작 시 재개
   const [locked, setLocked] = useState(false)
   const [inView, setInView] = useState(false)
   const sectionRef = useRef<HTMLDivElement>(null)
+  const lockTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const selectMode = (key: Mode) => {
+    setMode(key)
+    setLocked(true)
+    if (lockTimerRef.current) clearTimeout(lockTimerRef.current)
+    lockTimerRef.current = setTimeout(() => setLocked(false), 8000)
+  }
 
   useEffect(() => {
     const el = sectionRef.current
     if (!el) return
     const observer = new IntersectionObserver(([entry]) => setInView(entry.isIntersecting), { threshold: 0.35 })
     observer.observe(el)
-    return () => observer.disconnect()
+    return () => {
+      observer.disconnect()
+      if (lockTimerRef.current) clearTimeout(lockTimerRef.current)
+    }
   }, [])
 
   useEffect(() => {
@@ -32,13 +43,13 @@ export function Comparison() {
   }, [inView, locked])
 
   return (
-    <Section id="comparison" bordered>
+    <Section id="comparison">
       <motion.div {...fadeUp} className="mb-12">
         <SectionHeading
           align="center"
           eyebrow="WHY NEGOTIUM"
           title="협상 방식을 바꾸면, 무엇이 달라질까요"
-          description="기존 가격 협상의 문제는 사람이 아니라 구조입니다. 버튼을 눌러 직접 비교해 보세요."
+          description="기존 가격 협상의 문제는 사람이 아니라 구조입니다."
           descriptionClassName="mt-4 text-[17px] max-w-2xl"
         />
       </motion.div>
@@ -49,10 +60,7 @@ export function Comparison() {
           {MODES.map((m) => (
             <button
               key={m.key}
-              onClick={() => {
-                setLocked(true)
-                setMode(m.key)
-              }}
+              onClick={() => selectMode(m.key)}
               className={`px-5 py-2.5 rounded-[10px] text-xs sm:text-sm font-bold transition-all flex items-center gap-2 cursor-pointer ${
                 mode === m.key ? "bg-white text-primary shadow-sm" : "text-ink-soft hover:text-ink"
               }`}
diff --git a/landing/app/components/sections/faq.tsx b/landing/app/components/sections/faq.tsx
index ef608e7..b68fb00 100644
--- a/landing/app/components/sections/faq.tsx
+++ b/landing/app/components/sections/faq.tsx
@@ -13,7 +13,7 @@ export function Faq() {
   const [openIndex, setOpenIndex] = useState<number | null>(0)
 
   return (
-    <Section id="faq" width="sm" bordered>
+    <Section id="faq" width="sm">
       <motion.div {...fadeUp} className="mb-24">
         <SectionHeading
           align="center"
@@ -107,6 +107,7 @@ const FAQS: FaqEntry[] = [
   },
   {
     question: "기존 시스템과 연동되나요?",
-    answer: "견적·발주 데이터 연동을 지원합니다. 도입 상담에서 사내 ERP 환경에 맞는 연동 방식을 안내해 드립니다.",
+    answer:
+      "별도 연동 없이 바로 시작할 수 있습니다. 상품·공급사 데이터는 엑셀 일괄 업로드로 쉽게 등록되고, ERP 연동은 도입 상담에서 사내 환경에 맞춰 협의합니다.",
   },
 ]
diff --git a/landing/app/components/sections/footer.tsx b/landing/app/components/sections/footer.tsx
index 9b59d63..4125419 100644
--- a/landing/app/components/sections/footer.tsx
+++ b/landing/app/components/sections/footer.tsx
@@ -4,12 +4,11 @@ import { Typography } from "@/components/ui/typography"
 export function Footer() {
   return (
     <footer className="bg-white text-ink-soft border-t border-line py-24 font-sans text-sm relative z-10">
-      <div className="max-w-4xl mx-auto px-6 grid grid-cols-1 md:grid-cols-12 gap-12">
+      <div className="max-w-4xl mx-auto px-6 grid grid-cols-1 md:grid-cols-12 gap-12 text-center md:text-left">
         <div className="md:col-span-8">
           <Logo className="mb-6" />
           <Typography variant="caption" className="max-w-sm mb-6 font-medium">
-            negotium은 기업 구매 부서가 통제 가이드라인을 정의해두면 지능형 흥정 봇이 대신하여 다수 공급자와 투명하게 단가를
-            조율하는 B2B 자동 중개 대행 플랫폼입니다.
+            negotium은 협상 봇이 공급사와 1:1로 단가를 조율하고 낙찰까지 처리하는 B2B 구매 협상 자동화 솔루션입니다.
           </Typography>
           <p className="text-xs text-ink-faint font-semibold">
             © {new Date().getFullYear()} negotium Co., Ltd. All rights reserved.
diff --git a/landing/app/components/sections/header.tsx b/landing/app/components/sections/header.tsx
index 075fa70..a38d845 100644
--- a/landing/app/components/sections/header.tsx
+++ b/landing/app/components/sections/header.tsx
@@ -44,9 +44,8 @@ export function Header() {
 }
 
 const NAV_LINKS = [
-  { href: "#how-it-works", label: "실시간 협상" },
+  { href: "#how-it-works", label: "협상 데모" },
   { href: "#how-it-works-demo", label: "이용 가이드" },
-  { href: "#core-values", label: "솔루션 이점" },
-  { href: "#reinforcement", label: "강화학습" },
+  { href: "#comparison", label: "도입 전후 비교" },
   { href: "#faq", label: "자주 묻는 질문" },
 ]
diff --git a/landing/app/components/sections/how-it-works-demo.tsx b/landing/app/components/sections/how-it-works-demo.tsx
index 8b3858f..f093256 100644
--- a/landing/app/components/sections/how-it-works-demo.tsx
+++ b/landing/app/components/sections/how-it-works-demo.tsx
@@ -44,7 +44,7 @@ export function HowItWorksDemo() {
 
       <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center min-h-[500px]">
         {/* 좌: 단계 설명 */}
-        <div className="lg:col-span-5 space-y-6">
+        <div className="lg:col-span-5 space-y-6 text-center lg:text-left">
           <AnimatePresence mode="wait">
             <motion.div
               key={`${activeTab.key}-text`}
@@ -67,7 +67,7 @@ export function HowItWorksDemo() {
 
               <div className="border-t border-line pt-5 mt-2 space-y-3">
                 {activeTab.checks.map((check, idx) => (
-                  <div key={idx} className="flex items-center gap-2 text-xs font-bold text-ink-soft">
+                  <div key={idx} className="flex items-center gap-2 text-xs font-bold text-ink-soft justify-center lg:justify-start">
                     <Check className={`w-4 h-4 ${activeTab.checkClassName}`} />
                     <span>{check}</span>
                   </div>
@@ -201,12 +201,12 @@ const DEMO_TABS: DemoTab[] = [
     key: "negotiate",
     tabIcon: Smartphone,
     tabLabel: "2단계: AI 자동 밀당 협상",
-    badge: { icon: Bot, label: "협력사 모바일 포털 (모바일)", className: "bg-emerald-50 border border-emerald-100 text-positive" },
+    badge: { icon: Bot, label: "협력사 협상 포털 (웹·모바일)", className: "bg-emerald-50 border border-emerald-100 text-positive" },
     checkClassName: "text-emerald-500",
     heading: (
       <>
         공급사는 설치 없이 <br />
-        모바일 웹으로 언제든 협상
+        웹·모바일 어디서든 협상
       </>
     ),
     paragraphs: [
@@ -214,11 +214,11 @@ const DEMO_TABS: DemoTab[] = [
         각 파트너사 담당자는 초대 메일로 <b>비대면 협상 모바일 포털</b>에 접속해, 언제든 단가를 조율합니다.
       </>,
       <>
-        단순 마진 깎기가 아닌, <b>"물량 보증"</b> 혹은 <b>"지불 주기 단축"</b> 등의 와일드카드 거래 카드를 연동 제안하여
-        파트너사의 자발적인 마진 타협을 부드럽게 이끌어냅니다.
+        단순 마진 깎기가 아닙니다. 봇은 준비된 협상 카드를 상황에 맞게 꺼내, 파트너사의 자발적인 마진 타협을 부드럽게
+        이끌어냅니다.
       </>,
     ],
-    checks: ["1:1 프라이빗 대화형 역경매 포털 제공", "불필요한 실랑이를 예방하여 파트너십 보호"],
+    checks: ["1:1 비대면 협상 포털 제공", "불필요한 실랑이를 예방하여 파트너십 보호"],
     mockup: "phone",
     gif: "/gifs/negotiation.gif",
     gifAlt: "AI 모바일 자동 협상 시연",
diff --git a/landing/app/components/sections/negotiation-console.tsx b/landing/app/components/sections/negotiation-console.tsx
index 9330c23..00e0b75 100644
--- a/landing/app/components/sections/negotiation-console.tsx
+++ b/landing/app/components/sections/negotiation-console.tsx
@@ -75,16 +75,16 @@ export function NegotiationConsole() {
             Live Replay
           </Typography>
           <Typography variant="heading" as="h2" className="mt-1">
-            봇이 깎아내는 과정, 그대로 재생
+            봇은 물러서지 않습니다
           </Typography>
         </div>
 
         <div className="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-16 items-center w-full">
           {/* 좌: 실시간 단가 패널 */}
-          <div className="md:col-span-5 flex flex-col justify-center space-y-6">
+          <div className="md:col-span-5 flex flex-col justify-center space-y-6 text-center md:text-left">
             <div>
               <span className="text-[11px] font-bold text-ink-muted uppercase tracking-wider block mb-1">실시간 협상 단가</span>
-              <div className="flex items-baseline gap-1.5">
+              <div className="flex items-baseline gap-1.5 justify-center md:justify-start">
                 <span className="text-3xl font-bold text-primary">₩</span>
                 <span className="text-4xl md:text-5xl font-black tracking-tight text-primary">
                   {animatedPrice.toLocaleString()}
diff --git a/landing/app/components/sections/reinforcement.tsx b/landing/app/components/sections/reinforcement.tsx
index 9ba7a2e..ec13d4b 100644
--- a/landing/app/components/sections/reinforcement.tsx
+++ b/landing/app/components/sections/reinforcement.tsx
@@ -14,6 +14,7 @@ export function Reinforcement() {
     <Section id="reinforcement" bg="surface" bordered className="border-b border-line">
       <motion.div {...fadeUp} className="mb-20">
         <SectionHeading
+          className="text-center md:text-left"
           eyebrow="REINFORCEMENT LEARNING"
           title="협상할수록, 더 좋은 조건으로"
           description={
diff --git a/landing/app/routes/home.tsx b/landing/app/routes/home.tsx
index 36d825b..1d92b2a 100644
--- a/landing/app/routes/home.tsx
+++ b/landing/app/routes/home.tsx
@@ -32,8 +32,8 @@ export function meta() {
 type HeroTheme = "neumorphic" | "glassmorphic";
 
 export default function Home() {
-  // 히어로 디자인 비교용 — 스위처는 dev 에서만 노출, 배포본은 glassmorphic 고정
-  const [heroTheme, setHeroTheme] = useState<HeroTheme>("glassmorphic");
+  // 히어로 디자인 비교용 — 스위처는 dev 에서만 노출, 배포본은 neumorphic(Phone Demo) 고정
+  const [heroTheme, setHeroTheme] = useState<HeroTheme>("neumorphic");
 
   return (
     <div className="min-h-screen bg-white text-ink font-sans antialiased selection:bg-primary/10 selection:text-primary">