86 lines
4.5 KiB
TypeScript
86 lines
4.5 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"
|
|
import { EASE_OUT_EXPO } from "@/lib/motion"
|
|
|
|
/** 기본 히어로 — 파스텔 블롭 + 그리드 + 떠다니는 와이어프레임 도형. */
|
|
export function HeroGlassmorphic() {
|
|
return (
|
|
<section className="relative min-h-screen bg-surface text-ink flex flex-col justify-center pt-32 overflow-hidden">
|
|
{/* 흐릿한 파스텔 블롭 배경 */}
|
|
<div className="absolute top-[10%] right-[15%] w-[480px] h-[480px] bg-primary/10 rounded-full filter blur-[120px] pointer-events-none" />
|
|
<div className="absolute bottom-[10%] left-[10%] w-[450px] h-[450px] bg-accent/10 rounded-full filter blur-[120px] pointer-events-none" />
|
|
<div className="absolute top-[30%] left-[30%] w-[380px] h-[380px] bg-primary/10 rounded-full filter blur-[100px] pointer-events-none" />
|
|
|
|
{/* 저채도 그리드 패턴 오버레이 */}
|
|
<div className="absolute inset-0 bg-[linear-gradient(rgba(0,0,0,0.01)_1px,transparent_1px),linear-gradient(90deg,rgba(0,0,0,0.01)_1px,transparent_1px)] bg-[size:40px_40px] pointer-events-none" />
|
|
|
|
{/* 떠다니는 와이어프레임 도형 — max-w-7xl 안에 가둠 */}
|
|
<div className="absolute inset-0 max-w-7xl mx-auto pointer-events-none z-0">
|
|
<motion.div
|
|
animate={{ y: [0, -18, 0], rotate: [12, 42, 12] }}
|
|
transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }}
|
|
className="absolute top-[15%] left-[8vw] lg:left-[10%] w-16 h-16 sm:w-28 sm:h-28 border-2 border-primary/40 bg-white/40 shadow-[0_8px_32px_rgba(49,130,246,0.05)] rounded-[28px] pointer-events-none z-0"
|
|
/>
|
|
<motion.div
|
|
animate={{ rotate: -360 }}
|
|
transition={{ duration: 80, repeat: Infinity, ease: "linear" }}
|
|
className="absolute bottom-[18%] left-[6vw] lg:left-[12%] w-28 h-28 sm:w-48 sm:h-48 border-2 border-dashed border-accent/30 rounded-full pointer-events-none z-0"
|
|
/>
|
|
<motion.div
|
|
animate={{ x: [0, 10, 0], y: [0, 10, 0] }}
|
|
transition={{ duration: 10, repeat: Infinity, ease: "easeInOut" }}
|
|
className="absolute top-[30%] right-[8vw] lg:right-[12%] w-20 h-20 sm:w-36 sm:h-36 border-2 border-primary/20 rounded-[40px] pointer-events-none z-0"
|
|
>
|
|
<div className="w-full h-full bg-gradient-to-tr from-primary/5 to-transparent rounded-[38px]" />
|
|
</motion.div>
|
|
</div>
|
|
|
|
<div className="max-w-4xl mx-auto px-6 w-full py-24 relative z-10 flex flex-col items-center text-center">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 24 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.9, delay: 0.1, ease: EASE_OUT_EXPO }}
|
|
>
|
|
<Typography variant="display" className="mb-8">
|
|
구매 협상, 이제 <span className="text-primary">봇이 알아서</span> <br className="hidden sm:inline" />
|
|
흥정부터 낙찰까지 자동으로
|
|
</Typography>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 24 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.9, delay: 0.2, ease: EASE_OUT_EXPO }}
|
|
>
|
|
<Typography variant="lead" className="md:text-[20px] max-w-2xl mb-12">
|
|
협상할수록 강화학습으로 흥정 전략을 알아서 다듬어갑니다. <br className="hidden sm:inline" />
|
|
감정 없이, 지치지 않고, 24시간 연중무휴 — 결렬 대신 성사로 이끕니다.
|
|
</Typography>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 24 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.9, delay: 0.3, ease: EASE_OUT_EXPO }}
|
|
className="flex flex-col sm:flex-row gap-4 items-center justify-center w-full max-w-md z-20"
|
|
>
|
|
<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>
|
|
)
|
|
}
|