반응형 네비게이션 바
스크롤을 내리면 네비게이션 바의 배경이 blur 효과와 함께 나타납니다.
모바일에서는 햄버거 메뉴로 전환되며, 메뉴는 오른쪽에서 슬라이드됩니다.
ESC 키를 누르면 모바일 메뉴가 닫힙니다.
Features Section
스크롤 동작을 테스트하기 위한 섹션입니다.
Pricing Section
네비게이션 링크를 클릭하면 해당 섹션으로 이동합니다.
2. 반응형 네비게이션 바
Create a responsive navigation bar component:
**Desktop (>1024px)**:
- Height: 72px, max-width: 1280px centered
- Logo: Left-aligned, 32px height, clickable to home
- Nav links: Center-aligned, 16px font, 600 weight, 32px gap
- Hover state: Underline animation (expand from center, 2px height, 200ms ease)
- CTA button: Right-aligned, primary style
**Scroll Behavior**:
- Sticky positioning with backdrop-blur(12px) on scroll
- Background: rgba(255,255,255,0.8) when scrolled
- Subtle box-shadow: 0 1px 3px rgba(0,0,0,0.1)
**Mobile (<1024px)**:
- Hamburger icon: 24px, 3 lines with 6px gap
- Full-screen overlay menu on toggle
- Menu animation: Slide from right (300ms cubic-bezier)
- Nav links: 24px font, stacked, 24px gap
**Accessibility**:
- aria-expanded on hamburger
- Focus-visible outlines (2px offset)
- Escape key closes mobile menu
Tech: React + Tailwind + Headless UI
cubic-bezier 이란, 커브 비어셔 함수를 말합니다. 커브 비어셔 함수는 애니메이션의 속도를 조절하는 함수를 말합니다.