Navigation Header with Brand Logo

<div class="bg-zinc-950 w-full">
  <style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');</style>
  <header class="w-full">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
      <div class="flex h-16 items-center justify-between">
        <a href="#" class="inline-flex items-center gap-2">
          <span class="inline-flex h-8 w-8 items-center justify-center ring-1 ring-blue-400/20 bg-blue-950 rounded-full">
            <i data-lucide="compass" class="h-4 w-4 text-blue-400" style="stroke-width: 1.5px"></i>
          </span>
          <span class="text-2xl font-semibold tracking-tight text-zinc-100" style="font-family: Inter, 'Helvetica Neue', sans-serif;">Wanderlust</span>
        </a>
        <nav class="hidden md:flex items-center gap-8 text-sm text-zinc-300">
          <a href="#" class="hover:text-zinc-100 transition-colors">Explore</a>
          <a href="#" class="hover:text-zinc-100 transition-colors">Plan</a>
          <a href="#" class="hover:text-zinc-100 transition-colors">Discover</a>
          <a href="#" class="hover:text-zinc-100 transition-colors">Community</a>
        </nav>
        <div class="flex items-center gap-3">
          <button class="hidden sm:inline-flex gap-2 hover:text-zinc-100
            hover:bg-white/5 ring-1 ring-white/5 text-sm text-zinc-300
            rounded-md pt-1.5 pr-3 pb-1.5 pl-3 items-center">
            <span class="font-medium">Sign In</span>
          </button>
          <button type="button" class="group relative inline-flex
            shadow-[0_8px_16px_-4px_rgba(59,130,246,0.3)]
            hover:shadow-[0_12px_20px_-6px_rgba(59,130,246,0.4)]
            transition duration-300 ease-out select-none cursor-pointer
            focus-visible:outline-none focus-visible:ring-2
            focus-visible:ring-blue-400/60 transform-gpu
            hover:-translate-y-0.5 text-white rounded-lg pt-[1px]
            pr-[1px] pb-[1px] pl-[1px] items-center justify-center" style="background: linear-gradient(144deg, rgba(59,130,246,0.8), rgba(59,130,246,0.4) 50%, rgba(59,130,246,0.6));">
            <span class="flex items-center justify-center gap-2 leading-none
              min-w-[140px] w-full h-full transition-colors duration-300
              group-hover:bg-black/30 font-medium bg-black/20 rounded-lg
              pt-1.5 pr-3 pb-1.5 pl-3">
              <span class="text-sm">Start Journey</span>
            </span>
          </button>
          <button class="md:hidden inline-flex h-9 w-9 items-center justify-center
            rounded-md ring-1 ring-white/10 hover:bg-white/5
            text-zinc-100">
            <i data-lucide="menu" class="h-5 w-5" style="stroke-width: 1.5px"></i>
          </button>
        </div>
      </div>
    </div>
  </header>
  <script>window.addEventListener('DOMContentLoaded', () => { if (typeof lucide !== 'undefined') lucide.createIcons(); });</script>
</div>