워드마크와 시작하기 알약 버튼이 있는 가벼운 상단 바

const LOGO = "https://nnuer.site/brand/logo-on-light.png";

/** A transparent top bar: wordmark on the left, two text links and a black pill on the right */
export default function LandingNavbar() {
  return (
    <section className="w-full bg-[#fbfbfc]">
      <header className="flex items-center justify-between px-4 py-3.5 sm:px-7 sm:py-[18px]">
        <a href="#" aria-label="홈" className="rounded-md focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#7c3aed]">
          <img src={LOGO} alt="nnuer" className="h-[29px] w-auto" />
        </a>
        <nav aria-label="계정" className="flex items-center gap-[18px] text-[14px] text-[#5c5c68]">
          <a href="#" className="hidden hover:text-[#111114] sm:inline">
            둘러보기
          </a>
          <a href="#" className="hidden hover:text-[#111114] sm:inline">
            로그인
          </a>
          <a
            href="#"
            className="inline-flex h-9 items-center justify-center whitespace-nowrap rounded-full bg-[#111114] px-4 text-[14px] font-semibold text-white transition-[transform,background-color] duration-150 hover:bg-[#2a2a31] focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#7c3aed] active:scale-[0.97]"
          >
            시작하기
          </a>
        </nav>
      </header>
    </section>
  );
}