23:I[26879,["/_next/static/chunks/3i4dfrtuoj1bo.js","/_next/static/chunks/3a0xu0gdjs81p.js","/_next/static/chunks/3yakebpd54m1s.js","/_next/static/chunks/3ok2vzxu24_lc.js"],"LibraryDetail"] 24:T26cf,"use client"; /* eslint-disable @next/next/no-img-element -- Portable React component; no Next.js runtime required. */ import { useEffect, useId, useRef, useState, type MouseEventHandler } from "react"; import { ArrowRight, ArrowUpRight, Menu, Orbit, Play, X } from "lucide-react"; export interface NavLink { label: string; href: string; isActive?: boolean } export interface Partner { logoUrl?: string; name?: string; href: string } export interface ResponsiveHeroBannerProps { logoUrl?: string; logoLabel?: string; logoHref?: string; backgroundImageUrl?: string; navLinks?: NavLink[]; ctaButtonText?: string; ctaButtonHref?: string; badgeText?: string; badgeLabel?: string; title?: string; titleLine2?: string; description?: string; primaryButtonText?: string; primaryButtonHref?: string; secondaryButtonText?: string; secondaryButtonHref?: string; onSecondaryClick?: MouseEventHandler; partnersTitle?: string; partners?: Partner[]; } export const SPACE_BACKGROUND = "https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?auto=format&fit=crop&w=1800&q=80"; export default function ResponsiveHeroBanner({ logoUrl, logoLabel = "ORBIT", logoHref = "#home", backgroundImageUrl = SPACE_BACKGROUND, navLinks = [{ label: "Home", href: "#home", isActive: true }, { label: "Missions", href: "#missions" }, { label: "Experience", href: "#experience" }, { label: "FAQ", href: "#faq" }], ctaButtonText = "Reserve Seat", ctaButtonHref = "#reserve", badgeLabel = "Explore", badgeText = "The next chapter of human exploration", title = "Journey Beyond Earth", titleLine2 = "Into the Cosmos", description = "Experience a new perspective. Discover the missions, the people, and the possibilities that bring the universe closer.", primaryButtonText = "Book Your Journey", primaryButtonHref = "#reserve", secondaryButtonText = "Explore the Experience", secondaryButtonHref = "#experience", onSecondaryClick, partnersTitle = "A new perspective. One extraordinary journey.", partners = [], }: ResponsiveHeroBannerProps) { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const menuId = useId(); const menuButton = useRef(null); useEffect(() => { if (!mobileMenuOpen) return; const close = (event: KeyboardEvent) => { if (event.key === "Escape") { setMobileMenuOpen(false); menuButton.current?.focus(); } }; const desktop = window.matchMedia("(min-width: 768px)"); const resize = () => { if (desktop.matches) setMobileMenuOpen(false); }; document.addEventListener("keydown", close); desktop.addEventListener("change", resize); return () => { document.removeEventListener("keydown", close); desktop.removeEventListener("change", resize); }; }, [mobileMenuOpen]); return

{/* Ordinary img keeps this reusable outside Next.js too. */}

{logoUrl ?

: <>

{mobileMenuOpen && }

{badgeLabel}{badgeText}

{title}
{titleLine2}

{description}

{primaryButtonText} {secondaryButtonText}

{(partnersTitle || partners.length > 0) &&

{partnersTitle}

{partners.length > 0 &&

{partners.map((partner, index) => {partner.logoUrl ?

: {partner.name ?? `PARTNER ${index + 1}`}})}

}

; }25:T203e1,

19:["$","main",null,{"id":"main-content","tabIndex":-1,"className":"library-module__hPw9rq__page","children":[["$","div",null,{"className":"library-module__hPw9rq__headerSpace","children":"$L22"}],["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"LearningResource\",\"name\":\"반응형 우주 히어로 배너\",\"description\":\"우주 사진, 유리 질감 메뉴, 순차 등장 효과와 실제로 열리는 모바일 메뉴를 갖춘 히어로\",\"url\":\"https://aicoder.kr/library/responsive-hero-banner\",\"inLanguage\":\"ko-KR\",\"learningResourceType\":\"코드 예제 및 실습\",\"educationalLevel\":\"기초\"},{\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"홈\",\"item\":\"https://aicoder.kr/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"라이브러리\",\"item\":\"https://aicoder.kr/library\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"반응형 우주 히어로 배너\",\"item\":\"https://aicoder.kr/library/responsive-hero-banner\"}]}]}"}}],["$","div",null,{"className":"library-module__hPw9rq__container","children":["$","$L23",null,{"item":{"slug":"responsive-hero-banner","tags":["React","Tailwind","히어로","반응형","우주","모바일 메뉴"],"files":[{"name":"responsive-hero-banner.tsx","content":"$24","language":"tsx"},{"name":"demo.tsx","content":"import ResponsiveHeroBanner from \"@/components/ui/responsive-hero-banner\";\n\nexport default function HeroDemo() {\n return <>

Your next chapter starts here.

제목·이미지·링크를 원하는 서비스에 맞게 바꿔 보세요. 전체 페이지가 필요하다면 라이브러리의 ‘우주 여행 랜딩페이지 템플릿’을 확인하세요.

처음으로 돌아가기 ↑

;\n}","language":"tsx"}],"level":"기초","title":"반응형 우주 히어로 배너","author":"사용자 제공 · AI Coder 통합","license":"사용자 제공 코드 · 원본 제공 조건 적용","category":"hero","exercise":"demo.tsx의 제목과 버튼 링크를 서비스에 맞게 바꾸세요. navLinks와 partners에 실제 데이터를 전달하고 모바일 메뉴를 확인하세요. 추가 설치는 기존 lucide-react만 필요합니다. 전체 페이지는 ‘우주 여행 랜딩페이지 템플릿’을 참고하세요.","sourceUrl":"","objectives":["props로 문구·이미지·메뉴·버튼·파트너 목록 교체하기","모바일 메뉴 열기·닫기·Escape 키와 화면 크기 변경 처리하기","컴포넌트 범위 CSS로 등장 애니메이션과 동작 줄이기 지원하기","배경 위의 명암과 포커스 표시로 가독성·키보드 접근성 확보하기"],"description":"우주 사진, 유리 질감 메뉴, 순차 등장 효과와 실제로 열리는 모바일 메뉴를 갖춘 히어로","previewHtml":"$25","dependencies":"React · Tailwind CSS · lucide-react"},"highlighted":[{"name":"responsive-hero-banner.tsx","lines":[[{"content":"\"use client\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":"/* eslint-disable @next/next/no-img-element -- Portable React component; no Next.js runtime required. */","color":"#8B949E"}],[],[{"content":"import","color":"#FF7B72"},{"content":" { useEffect, useId, useRef, useState, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" MouseEventHandler } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"react\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":"import","color":"#FF7B72"},{"content":" { ArrowRight, ArrowUpRight, Menu, Orbit, Play, X } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"lucide-react\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"interface","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"NavLink","color":"#FFA657"},{"content":" { ","color":"#E6EDF3"},{"content":"label","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"href","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"isActive","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"boolean","color":"#79C0FF"},{"content":" }","color":"#E6EDF3"}],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"interface","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Partner","color":"#FFA657"},{"content":" { ","color":"#E6EDF3"},{"content":"logoUrl","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"name","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"href","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":" }","color":"#E6EDF3"}],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"interface","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ResponsiveHeroBannerProps","color":"#FFA657"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"logoUrl","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"logoLabel","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"logoHref","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"backgroundImageUrl","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"navLinks","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"NavLink","color":"#FFA657"},{"content":"[]; ","color":"#E6EDF3"},{"content":"ctaButtonText","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"ctaButtonHref","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"badgeText","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"badgeLabel","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"title","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"titleLine2","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"description","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"primaryButtonText","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"primaryButtonHref","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"secondaryButtonText","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"secondaryButtonHref","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"onSecondaryClick","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"MouseEventHandler","color":"#FFA657"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLAnchorElement","color":"#FFA657"},{"content":">;","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"partnersTitle","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"partners","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Partner","color":"#FFA657"},{"content":"[];","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"SPACE_BACKGROUND","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?auto=format&fit=crop&w=1800&q=80\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"default","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"ResponsiveHeroBanner","color":"#D2A8FF"},{"content":"({","color":"#FFA657"}],[{"content":" logoUrl, logoLabel ","color":"#FFA657"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"\"ORBIT\"","color":"#A5D6FF"},{"content":", logoHref ","color":"#FFA657"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"\"#home\"","color":"#A5D6FF"},{"content":", backgroundImageUrl ","color":"#FFA657"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"SPACE_BACKGROUND","color":"#79C0FF"},{"content":",","color":"#FFA657"}],[{"content":" navLinks ","color":"#FFA657"},{"content":"=","color":"#FF7B72"},{"content":" [{ ","color":"#FFA657"},{"content":"label: ","color":"#E6EDF3"},{"content":"\"Home\"","color":"#A5D6FF"},{"content":", ","color":"#FFA657"},{"content":"href: ","color":"#E6EDF3"},{"content":"\"#home\"","color":"#A5D6FF"},{"content":", ","color":"#FFA657"},{"content":"isActive: ","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"}, { ","color":"#FFA657"},{"content":"label: ","color":"#E6EDF3"},{"content":"\"Missions\"","color":"#A5D6FF"},{"content":", ","color":"#FFA657"},{"content":"href: ","color":"#E6EDF3"},{"content":"\"#missions\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"}, { ","color":"#FFA657"},{"content":"label: ","color":"#E6EDF3"},{"content":"\"Experience\"","color":"#A5D6FF"},{"content":", ","color":"#FFA657"},{"content":"href: ","color":"#E6EDF3"},{"content":"\"#experience\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"}, { ","color":"#FFA657"},{"content":"label: ","color":"#E6EDF3"},{"content":"\"FAQ\"","color":"#A5D6FF"},{"content":", ","color":"#FFA657"},{"content":"href: ","color":"#E6EDF3"},{"content":"\"#faq\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"}],","color":"#FFA657"}],[{"content":" ctaButtonText ","color":"#FFA657"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"\"Reserve Seat\"","color":"#A5D6FF"},{"content":", ctaButtonHref ","color":"#FFA657"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"\"#reserve\"","color":"#A5D6FF"},{"content":",","color":"#FFA657"}],[{"content":" badgeLabel ","color":"#FFA657"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"\"Explore\"","color":"#A5D6FF"},{"content":", badgeText ","color":"#FFA657"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"\"The next chapter of human exploration\"","color":"#A5D6FF"},{"content":",","color":"#FFA657"}],[{"content":" title ","color":"#FFA657"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"\"Journey Beyond Earth\"","color":"#A5D6FF"},{"content":", titleLine2 ","color":"#FFA657"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"\"Into the Cosmos\"","color":"#A5D6FF"},{"content":",","color":"#FFA657"}],[{"content":" description ","color":"#FFA657"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"\"Experience a new perspective. Discover the missions, the people, and the possibilities that bring the universe closer.\"","color":"#A5D6FF"},{"content":",","color":"#FFA657"}],[{"content":" primaryButtonText ","color":"#FFA657"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"\"Book Your Journey\"","color":"#A5D6FF"},{"content":", primaryButtonHref ","color":"#FFA657"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"\"#reserve\"","color":"#A5D6FF"},{"content":",","color":"#FFA657"}],[{"content":" secondaryButtonText ","color":"#FFA657"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"\"Explore the Experience\"","color":"#A5D6FF"},{"content":", secondaryButtonHref ","color":"#FFA657"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"\"#experience\"","color":"#A5D6FF"},{"content":", onSecondaryClick,","color":"#FFA657"}],[{"content":" partnersTitle ","color":"#FFA657"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"\"A new perspective. One extraordinary journey.\"","color":"#A5D6FF"},{"content":", partners ","color":"#FFA657"},{"content":"=","color":"#FF7B72"},{"content":" [],","color":"#FFA657"}],[{"content":"}","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ResponsiveHeroBannerProps) ","color":"#FFA657"},{"content":"{","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"mobileMenuOpen","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setMobileMenuOpen","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useState","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"menuId","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useId","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"menuButton","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useRef","color":"#D2A8FF"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLButtonElement","color":"#FFA657"},{"content":">(","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"useEffect","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"mobileMenuOpen) ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"close","color":"#D2A8FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"event","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"KeyboardEvent","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" { ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (event.key ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"Escape\"","color":"#A5D6FF"},{"content":") { ","color":"#E6EDF3"},{"content":"setMobileMenuOpen","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":"); menuButton.current?.","color":"#E6EDF3"},{"content":"focus","color":"#D2A8FF"},{"content":"(); } };","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"desktop","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" window.","color":"#E6EDF3"},{"content":"matchMedia","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"(min-width: 768px)\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"resize","color":"#D2A8FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" () ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" { ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (desktop.matches) ","color":"#E6EDF3"},{"content":"setMobileMenuOpen","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":"); };","color":"#E6EDF3"}],[{"content":" document.","color":"#E6EDF3"},{"content":"addEventListener","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"keydown\"","color":"#A5D6FF"},{"content":", close); desktop.","color":"#E6EDF3"},{"content":"addEventListener","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"change\"","color":"#A5D6FF"},{"content":", resize);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" () ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" { document.","color":"#E6EDF3"},{"content":"removeEventListener","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"keydown\"","color":"#A5D6FF"},{"content":", close); desktop.","color":"#E6EDF3"},{"content":"removeEventListener","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"change\"","color":"#A5D6FF"},{"content":", resize); };","color":"#E6EDF3"}],[{"content":" }, [mobileMenuOpen]);","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"section","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"id","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"home\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"responsive-hero relative isolate min-h-[min(880px,100svh)] w-full overflow-hidden bg-[#070c14] text-white\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"/* Ordinary img keeps this reusable outside Next.js too. */","color":"#8B949E"},{"content":"}","color":"#FF7B72"}],[{"content":" <","color":"#E6EDF3"},{"content":"img","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"src","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"backgroundImageUrl","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"alt","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"fetchPriority","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"high\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"absolute inset-0 h-full w-full object-cover\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"pointer-events-none absolute inset-0 bg-gradient-to-b from-black/50 via-black/45 to-[#070c14]\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"pointer-events-none absolute inset-0 ring-1 ring-inset ring-white/10\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"header","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"relative z-20 mx-auto max-w-7xl px-5 pt-6 sm:px-8\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"flex min-h-11 items-center justify-between gap-4\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"a","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"href","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"logoHref","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"inline-flex min-h-11 shrink-0 items-center gap-2.5 text-lg font-semibold tracking-[.18em]\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"aria-label","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`${","color":"#A5D6FF"},{"content":"logoLabel","color":"#E6EDF3"},{"content":"} home`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"logoUrl ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"img","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"src","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"logoUrl","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"alt","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"logoLabel","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"h-10 w-[100px] object-contain\"","color":"#A5D6FF"},{"content":" /> ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" <><","color":"#E6EDF3"},{"content":"Orbit","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"size","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"27","color":"#79C0FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"strokeWidth","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"1.2","color":"#79C0FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"true\"","color":"#A5D6FF"},{"content":" /><","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"logoLabel","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"nav","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-label","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"Main navigation\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"hidden items-center rounded-full bg-white/5 p-1 ring-1 ring-white/15 backdrop-blur md:flex\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"navLinks.","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"((","color":"#E6EDF3"},{"content":"link","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"index","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"a","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`${","color":"#A5D6FF"},{"content":"link","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"href","color":"#E6EDF3"},{"content":"}-${","color":"#A5D6FF"},{"content":"index","color":"#E6EDF3"},{"content":"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"href","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"link.href","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"aria-current","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"link.isActive ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"page\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"undefined","color":"#79C0FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`rounded-full px-3 py-3 text-sm transition-colors hover:bg-white/10 hover:text-white ${","color":"#A5D6FF"},{"content":"link","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"isActive","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"text-white\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"text-white/75\"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"link.label","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":")","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" <","color":"#E6EDF3"},{"content":"a","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"href","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"ctaButtonHref","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"ml-1 inline-flex min-h-11 items-center gap-2 rounded-full bg-white px-4 py-2 text-sm font-medium text-neutral-900 transition hover:bg-white/90\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"ctaButtonText","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"<","color":"#E6EDF3"},{"content":"ArrowUpRight","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"size","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"16","color":"#79C0FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"true\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"button","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"ref","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"menuButton","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"type","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"button\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"onClick","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setMobileMenuOpen","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"value","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"value)","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"inline-flex size-11 items-center justify-center rounded-full bg-white/10 ring-1 ring-white/20 backdrop-blur md:hidden\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"aria-expanded","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"mobileMenuOpen","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"aria-controls","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"menuId","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"aria-label","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"mobileMenuOpen ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"Close menu\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"Open menu\"","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"mobileMenuOpen ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"X","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"size","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"21","color":"#79C0FF"},{"content":"}","color":"#FF7B72"},{"content":" /> ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"Menu","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"size","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"21","color":"#79C0FF"},{"content":"}","color":"#FF7B72"},{"content":" />","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"mobileMenuOpen ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"nav","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"id","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"menuId","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"aria-label","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"Mobile navigation\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mt-4 rounded-2xl border border-white/15 bg-[#0b1422]/95 p-3 shadow-xl backdrop-blur md:hidden\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"navLinks.","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"((","color":"#E6EDF3"},{"content":"link","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"index","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"a","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`${","color":"#A5D6FF"},{"content":"link","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"href","color":"#E6EDF3"},{"content":"}-${","color":"#A5D6FF"},{"content":"index","color":"#E6EDF3"},{"content":"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"href","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"link.href","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"aria-current","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"link.isActive ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"page\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"undefined","color":"#79C0FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"onClick","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setMobileMenuOpen","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":")","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"block rounded-xl px-4 py-3 text-sm text-white/90 hover:bg-white/10\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"link.label","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":")","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" <","color":"#E6EDF3"},{"content":"a","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"href","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"ctaButtonHref","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"onClick","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setMobileMenuOpen","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":")","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mt-2 flex min-h-11 items-center justify-between rounded-xl bg-white px-4 py-3 text-sm font-medium text-neutral-900\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"ctaButtonText","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"<","color":"#E6EDF3"},{"content":"ArrowUpRight","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"size","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"16","color":"#79C0FF"},{"content":"}","color":"#FF7B72"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"hero-content relative z-10 mx-auto max-w-7xl px-5 pb-14 pt-24 sm:px-8 sm:pb-20 sm:pt-32 lg:pt-40\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mx-auto max-w-4xl text-center\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"hero-enter hero-enter-1 mb-7 inline-flex max-w-full items-center gap-3 rounded-full bg-white/10 px-3 py-2 ring-1 ring-white/20 backdrop-blur\"","color":"#A5D6FF"},{"content":"><","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"shrink-0 rounded-full bg-white/90 px-2 py-0.5 text-xs font-medium text-neutral-900\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"badgeLabel","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"<","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"break-keep text-left text-xs font-medium text-white/90 sm:text-sm\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"badgeText","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"h1","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"hero-enter hero-enter-2 hero-serif text-[clamp(2.8rem,6.4vw,5.5rem)] font-normal leading-[1.02] tracking-[-.04em]\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"title","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"<","color":"#E6EDF3"},{"content":"br","color":"#7EE787"},{"content":" /><","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"text-white/80\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"titleLine2","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"hero-enter hero-enter-3 mx-auto mt-7 max-w-xl text-base leading-7 text-white/80 sm:text-lg\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"description","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"hero-enter hero-enter-4 mt-9 flex flex-col items-center justify-center gap-3 sm:flex-row sm:gap-5\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"a","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"href","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"primaryButtonHref","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"inline-flex min-h-12 w-full items-center justify-center gap-3 rounded-full bg-white px-6 py-3 text-sm font-medium text-[#102033] transition hover:bg-white/90 sm:w-auto\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"primaryButtonText","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"<","color":"#E6EDF3"},{"content":"ArrowRight","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"size","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"17","color":"#79C0FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"true\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"a","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"href","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"secondaryButtonHref","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"onClick","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"onSecondaryClick","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"inline-flex min-h-12 items-center gap-3 rounded-full px-5 py-3 text-sm font-medium text-white/90 transition hover:bg-white/10 hover:text-white\"","color":"#A5D6FF"},{"content":"><","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"grid size-8 place-items-center rounded-full border border-white/30\"","color":"#A5D6FF"},{"content":"><","color":"#E6EDF3"},{"content":"Play","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"size","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"12","color":"#79C0FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"true\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"secondaryButtonText","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"(partnersTitle ","color":"#E6EDF3"},{"content":"||","color":"#FF7B72"},{"content":" partners.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":">","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"hero-enter hero-enter-4 mx-auto mt-20 max-w-5xl border-t border-white/15 pt-6\"","color":"#A5D6FF"},{"content":"><","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"text-center text-xs tracking-wide text-white/60\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"partnersTitle","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"partners.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":">","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mt-6 flex flex-wrap items-center justify-center gap-x-10 gap-y-5\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"partners.","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"((","color":"#E6EDF3"},{"content":"partner","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"index","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"a","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"index","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"href","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"partner.href","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"aria-label","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"partner.name ","color":"#E6EDF3"},{"content":"??","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"`Partner ${","color":"#A5D6FF"},{"content":"index","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"+","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"1","color":"#79C0FF"},{"content":"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"inline-flex min-h-11 items-center justify-center opacity-75 transition-opacity hover:opacity-100\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"partner.logoUrl ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"img","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"src","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"partner.logoUrl","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"alt","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"partner.name ","color":"#E6EDF3"},{"content":"??","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"`Partner ${","color":"#A5D6FF"},{"content":"index","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"+","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"1","color":"#79C0FF"},{"content":"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"loading","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"lazy\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"h-9 max-w-[120px] object-contain\"","color":"#A5D6FF"},{"content":" /> ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"text-sm font-semibold tracking-[.14em]\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"partner.name ","color":"#E6EDF3"},{"content":"??","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"`PARTNER ${","color":"#A5D6FF"},{"content":"index","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"+","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"1","color":"#79C0FF"},{"content":"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":")","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"style","color":"#7EE787"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"`","color":"#A5D6FF"}],[{"content":" .responsive-hero { font-family: Inter, system-ui, sans-serif; }","color":"#A5D6FF"}],[{"content":" .responsive-hero .hero-serif { font-family: \"Instrument Serif\", Georgia, serif; }","color":"#A5D6FF"}],[{"content":" .responsive-hero :is(a,button):focus-visible { outline: 2px solid #bae6fd; outline-offset: 5px; }","color":"#A5D6FF"}],[{"content":" @keyframes responsiveHeroFadeSlideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }","color":"#A5D6FF"}],[{"content":" .responsive-hero .hero-enter { animation: responsiveHeroFadeSlideIn .75s cubic-bezier(.2,.7,.2,1) both; }","color":"#A5D6FF"}],[{"content":" .responsive-hero .hero-enter-1 { animation-delay: .05s; } .responsive-hero .hero-enter-2 { animation-delay: .15s; }","color":"#A5D6FF"}],[{"content":" .responsive-hero .hero-enter-3 { animation-delay: .25s; } .responsive-hero .hero-enter-4 { animation-delay: .35s; }","color":"#A5D6FF"}],[{"content":" @media (prefers-reduced-motion: reduce) { .responsive-hero .hero-enter { animation: none; } }","color":"#A5D6FF"}],[{"content":" @media (max-height: 400px) {","color":"#A5D6FF"}],[{"content":" .responsive-hero { min-height: 100svh; } .responsive-hero header { padding-top: 12px; }","color":"#A5D6FF"}],[{"content":" .responsive-hero .hero-content { padding-top: 25px; padding-bottom: 22px; }","color":"#A5D6FF"}],[{"content":" .responsive-hero .hero-enter-1 { margin-bottom: 14px; padding-block: 5px; }","color":"#A5D6FF"}],[{"content":" .responsive-hero h1 { font-size: clamp(1.9rem, 6vw, 3rem); }","color":"#A5D6FF"}],[{"content":" .responsive-hero .hero-content p { margin-top: 12px; font-size: 11px; line-height: 1.5; }","color":"#A5D6FF"}],[{"content":" .responsive-hero .hero-enter-4 { margin-top: 16px; flex-direction: row; gap: 10px; }","color":"#A5D6FF"}],[{"content":" .responsive-hero .hero-enter-4 a { width: auto; min-height: 36px; padding: 8px 12px; font-size: 10px; }","color":"#A5D6FF"}],[{"content":" .responsive-hero .hero-content > .hero-enter-4 { display: none; }","color":"#A5D6FF"}],[{"content":" }","color":"#A5D6FF"}],[{"content":" `","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" ;","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}]]},{"name":"demo.tsx","lines":[[{"content":"import","color":"#FF7B72"},{"content":" ResponsiveHeroBanner ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"@/components/ui/responsive-hero-banner\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"default","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"HeroDemo","color":"#D2A8FF"},{"content":"() ","color":"#FFA657"},{"content":"{","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" <><","color":"#E6EDF3"},{"content":"ResponsiveHeroBanner","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"badgeLabel","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"Explore\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"badgeText","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"A new perspective awaits\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"primaryButtonText","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"여정 살펴보기\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"primaryButtonHref","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"#experience\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"secondaryButtonText","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"더 알아보기\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"secondaryButtonHref","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"#experience\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"ctaButtonText","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"프로그램 안내\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"ctaButtonHref","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"#experience\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"navLinks","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"[{ label: ","color":"#E6EDF3"},{"content":"\"Home\"","color":"#A5D6FF"},{"content":", href: ","color":"#E6EDF3"},{"content":"\"#home\"","color":"#A5D6FF"},{"content":", isActive: ","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":" }, { label: ","color":"#E6EDF3"},{"content":"\"Experience\"","color":"#A5D6FF"},{"content":", href: ","color":"#E6EDF3"},{"content":"\"#experience\"","color":"#A5D6FF"},{"content":" }]","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" /><","color":"#E6EDF3"},{"content":"section","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"id","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"experience\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"bg-[#070c14] px-7 py-16 text-center text-white\"","color":"#A5D6FF"},{"content":"><","color":"#E6EDF3"},{"content":"h2","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"font-serif text-3xl\"","color":"#A5D6FF"},{"content":">Your next chapter starts here.<","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mx-auto mt-4 max-w-lg text-sm leading-7 text-white/60\"","color":"#A5D6FF"},{"content":">제목·이미지·링크를 원하는 서비스에 맞게 바꿔 보세요. 전체 페이지가 필요하다면 라이브러리의 ‘우주 여행 랜딩페이지 템플릿’을 확인하세요.<","color":"#E6EDF3"},{"content":"a","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"href","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"#home\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mt-6 inline-block rounded-full border border-white/25 px-6 py-3 text-sm\"","color":"#A5D6FF"},{"content":">처음으로 돌아가기 ↑;","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}]]}]}]}]]}]

{title}{titleLine2}

Your next chapter starts here.

{title}
{titleLine2}

예제에 포함된 파일