[feat] landing: 비교 토글 자동재개·헤더 nav 4개 정리·모바일 가운데 정렬·Phone Demo 히어로 디폴트, FAQ 연동답변·중개대행·역경매·와일드카드 등 논란 문구 정리
This commit is contained in:
parent
9ccf42cf6b
commit
6ffdb9a389
@ -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"
|
||||
}`}
|
||||
|
||||
@ -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 연동은 도입 상담에서 사내 환경에 맞춰 협의합니다.",
|
||||
},
|
||||
]
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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: "자주 묻는 질문" },
|
||||
]
|
||||
|
||||
@ -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 모바일 자동 협상 시연",
|
||||
|
||||
@ -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()}
|
||||
|
||||
@ -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={
|
||||
|
||||
@ -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">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user