84 lines
4.3 KiB
TypeScript
84 lines
4.3 KiB
TypeScript
import { motion } from "motion/react"
|
|
import { ArrowDown, ArrowRight, Sparkles } from "lucide-react"
|
|
|
|
import { PhoneFrame } from "@/components/ui/device-mockups"
|
|
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">
|
|
<div className="mesh-bg absolute top-[-300px] right-[-100px] opacity-40 pointer-events-none" />
|
|
|
|
<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: 15 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.7 }}
|
|
className="inline-flex items-center gap-2 px-3.5 py-1.5 bg-surface-neu rounded-full text-xs font-bold text-primary shadow-[3px_3px_6px_#dbdee3,-3px_-3px_6px_#ffffff]"
|
|
>
|
|
<Sparkles className="w-3.5 h-3.5" />
|
|
<span>LIVE NEGOTIATION DEMO</span>
|
|
</motion.div>
|
|
|
|
<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]">
|
|
구매 협상, 이제 <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"
|
|
>
|
|
<a
|
|
href="#contact-section"
|
|
className="px-8 py-4.5 bg-primary hover:bg-primary-deep text-white text-base font-bold rounded-[20px] cursor-pointer flex items-center justify-center gap-2 group transition-all shadow-[6px_6px_12px_rgba(49,130,246,0.25),-6px_-6px_12px_#ffffff] hover:shadow-[4px_4px_8px_rgba(49,130,246,0.25),-4px_-4px_8px_#ffffff] active:shadow-none translate-y-0 active:translate-y-0.5"
|
|
>
|
|
<span>도입 문의 상담 받기</span>
|
|
<ArrowRight className="w-5 h-5 transition-transform group-hover:translate-x-1" />
|
|
</a>
|
|
<a
|
|
href="#how-it-works"
|
|
className="px-8 py-4.5 bg-surface-neu text-ink-soft hover:text-ink text-base font-bold rounded-[20px] transition-all flex items-center justify-center gap-1.5 shadow-[6px_6px_12px_#dbdee3,-6px_-6px_12px_#ffffff] hover:shadow-[4px_4px_8px_#dbdee3,-4px_-4px_8px_#ffffff] active:shadow-[inset_3px_3px_6px_#dbdee3,inset_-3px_-3px_6px_#ffffff] translate-y-0 active:translate-y-0.5"
|
|
>
|
|
<span>작동 방식 보기</span>
|
|
<ArrowDown className="w-4 h-4 text-ink-soft" />
|
|
</a>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* 우: 협력사 모바일 협상 실제 화면 (GIF) */}
|
|
<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"
|
|
>
|
|
<PhoneFrame>
|
|
<img
|
|
src="/gifs/negotiation.gif"
|
|
alt="협력사 모바일 협상 포털 실제 화면"
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</PhoneFrame>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|