73 lines
3.3 KiB
TypeScript
73 lines
3.3 KiB
TypeScript
import { motion } from "motion/react"
|
|
import { ArrowDown, ArrowRight } from "lucide-react"
|
|
|
|
import { Button } from "@/components/ui/button"
|
|
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: 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>
|
|
|
|
{/* 우: 협력사 모바일 협상 실제 화면 (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>
|
|
)
|
|
}
|