Mina Choi
4f9789c08a
- 공급사 포털: 채팅 말풍선·남은시간 표기·헤더바·채팅 화면 정비 - landing: how-it-works 데모를 GIF 재생으로 되돌리고 히어로·디바이스 목업 조정, negotiation_annotated_3d 미디어 갱신
74 lines
3.4 KiB
TypeScript
74 lines
3.4 KiB
TypeScript
import { motion } from "motion/react"
|
|
import { ArrowDown, ArrowRight } from "lucide-react"
|
|
|
|
import { Button } from "@/components/ui/button"
|
|
import { Typography } from "@/components/ui/typography"
|
|
|
|
/** 대안 히어로 — 뉴모피즘 배경 + 실제 모바일 협상 화면(GIF) 폰 목업. */
|
|
export function HeroNeumorphic() {
|
|
return (
|
|
<section className="relative min-h-screen bg-surface-neu text-ink flex flex-col justify-center pt-32 pb-20 overflow-hidden">
|
|
{/* 우측 상단 메시 제거 — 영상 배경(#F2F4F7)과 섹션 배경을 완전 동일하게 유지해 경계선 없이 블렌딩 */}
|
|
|
|
<div className="max-w-5xl mx-auto px-6 w-full relative z-10 grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
|
|
{/* 좌: 카피 + CTA */}
|
|
<div className="lg:col-span-7 space-y-8 text-left">
|
|
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8, delay: 0.1 }}>
|
|
<Typography variant="display" className="text-4xl sm:text-5xl lg:text-[54px] leading-[1.15]">
|
|
구매 협상, <br />
|
|
이제 <span className="text-primary">봇이 알아서</span> <br />
|
|
흥정부터 낙찰까지 자동으로
|
|
</Typography>
|
|
</motion.div>
|
|
|
|
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8, delay: 0.2 }}>
|
|
<Typography variant="lead" className="max-w-xl">
|
|
불필요한 실랑이와 감정 소모 없이, 예산 상한선 내에서 최적의 원가 절감을 달성하세요. 데이터 기반의 자율 흥정 봇이
|
|
24시간 실시간 대리 협상을 완료합니다.
|
|
</Typography>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.3 }}
|
|
className="flex flex-col sm:flex-row gap-5 pt-4"
|
|
>
|
|
<Button
|
|
href="#contact-section"
|
|
className="w-full sm:w-auto group shadow-[0_8px_24px_rgba(49,130,246,0.15)] hover:scale-[1.02] active:scale-[0.98]"
|
|
>
|
|
<span>도입 문의 상담 받기</span>
|
|
<ArrowRight className="w-5 h-5 transition-transform group-hover:translate-x-1" />
|
|
</Button>
|
|
<Button href="#how-it-works" variant="glass" className="w-full sm:w-auto gap-1.5">
|
|
<span>작동 방식 보기</span>
|
|
<ArrowDown className="w-4 h-4 text-ink-soft" />
|
|
</Button>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* 우: 모바일 협상 채팅 + 외부 설명 UI(제안가·협상카드·낙찰 하이라이트) 합성 영상 */}
|
|
<div className="lg:col-span-5 flex justify-center">
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
className="w-full flex justify-center"
|
|
>
|
|
<video
|
|
src="/gifs/negotiation_annotated_3d.mp4?v=w3"
|
|
poster="/gifs/negotiation_annotated_3d.jpg?v=w3"
|
|
autoPlay
|
|
muted
|
|
loop
|
|
playsInline
|
|
className="w-full max-w-[440px] h-auto"
|
|
/>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|