52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
import { useEffect, useState } from "react"
|
|
import { ArrowUpRight } from "lucide-react"
|
|
|
|
import { Button } from "@/components/ui/button"
|
|
import { Logo } from "@/components/ui/logo"
|
|
|
|
export function Header() {
|
|
const [scrolled, setScrolled] = useState(false)
|
|
|
|
// 스크롤 시 헤더를 반투명 블러 배경으로 전환
|
|
useEffect(() => {
|
|
const handleScroll = () => setScrolled(window.scrollY > 40)
|
|
window.addEventListener("scroll", handleScroll, { passive: true })
|
|
handleScroll()
|
|
return () => window.removeEventListener("scroll", handleScroll)
|
|
}, [])
|
|
|
|
return (
|
|
<header
|
|
className={`fixed top-0 left-0 right-0 z-40 transition-all duration-300 ${
|
|
scrolled ? "py-4 bg-white/80 backdrop-blur-xl border-b border-line" : "py-6 bg-transparent border-b border-transparent"
|
|
}`}
|
|
>
|
|
<div className="max-w-5xl mx-auto px-6 flex items-center justify-between">
|
|
<a href="#">
|
|
<Logo />
|
|
</a>
|
|
|
|
<nav className="hidden md:flex items-center gap-8 text-[15px] font-semibold text-ink-soft">
|
|
{NAV_LINKS.map(({ href, label }) => (
|
|
<a key={href} href={href} className="hover:text-ink transition-colors">
|
|
{label}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
|
|
<Button href="#contact-section" size="pill" className="gap-1.5">
|
|
<span>상담 신청</span>
|
|
<ArrowUpRight className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|
|
|
|
const NAV_LINKS = [
|
|
{ href: "#how-it-works", label: "협상 데모" },
|
|
{ href: "#how-it-works-demo", label: "이용 가이드" },
|
|
{ href: "#comparison", label: "도입 전후 비교" },
|
|
{ href: "#faq", label: "자주 묻는 질문" },
|
|
]
|