Responsive Header with Logo, Nav and CTA

<header class="flex items-center justify-between gap-4 w-full max-w-5xl">
  <div class="flex items-center gap-3">
    <div
      class="h-9 w-9 rounded-xl bg-neutral-900 text-white flex items-center justify-center shadow-sm ring-1 ring-black/10">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="leaf"
        class="lucide lucide-leaf h-4 w-4">
        <path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z"></path>
        <path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"></path>
      </svg>
    </div>
    <span class="text-lg tracking-tight font-medium text-neutral-900">solace</span>
  </div>
  <nav class="hidden md:flex items-center gap-6 text-sm text-neutral-600">
    <a href="#" class="hover:text-neutral-900 transition-colors">Home</a>
    <a href="#" class="hover:text-neutral-900 transition-colors">Device</a>
    <a href="#" class="hover:text-neutral-900 transition-colors">Story</a>
    <a href="#" class="hover:text-neutral-900 transition-colors">Support</a>
  </nav>
  <div class="flex items-center gap-3">
    <button class="md:hidden inline-flex items-center justify-center h-10 w-10 rounded-lg ring-1 ring-black/10 bg-white text-neutral-700">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="menu" class="lucide lucide-menu h-5 w-5"><path d="M4 12h16"></path><path d="M4 18h16"></path><path d="M4 6h16"></path></svg>
            </button>
    <a href="#"
      class="hidden md:inline-flex items-center justify-center rounded-xl bg-amber-500 text-neutral-900 px-4 py-2.5 text-sm font-medium shadow-sm hover:bg-amber-400 transition-colors">
      Preorder
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right"
        class="lucide lucide-arrow-right h-4 w-4 ml-2">
        <path d="M5 12h14"></path>
        <path d="m12 5 7 7-7 7"></path>
      </svg>
    </a>
  </div>
</header>