52 lines
2.0 KiB
TypeScript
52 lines
2.0 KiB
TypeScript
import { motion } from "motion/react"
|
|
import { ArrowDown, ArrowRight } from "lucide-react"
|
|
|
|
import { Button } from "@/components/ui/button"
|
|
|
|
/** 히어로 변형 — 실시간 협상 콘솔 시즐 영상을 전면에 세운 풀와이드 히어로. */
|
|
export function HeroConsole() {
|
|
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-[-260px] left-[-160px] opacity-40 pointer-events-none" />
|
|
|
|
<div className="max-w-6xl mx-auto px-6 w-full relative z-10">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 28, scale: 0.98 }}
|
|
animate={{ opacity: 1, y: 0, scale: 1 }}
|
|
transition={{ duration: 0.8, delay: 0.1 }}
|
|
className="rounded-[28px] overflow-hidden border border-line-strong shadow-[0_30px_80px_rgba(20,25,45,0.12)] bg-white"
|
|
>
|
|
<video
|
|
src="/gifs/hero_console.mp4"
|
|
poster="/gifs/hero_console.jpg"
|
|
autoPlay
|
|
muted
|
|
loop
|
|
playsInline
|
|
className="w-full h-auto block"
|
|
/>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.35 }}
|
|
className="flex flex-col sm:flex-row justify-center gap-5 pt-10"
|
|
>
|
|
<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>
|
|
</section>
|
|
)
|
|
}
|