Announcement Bar Navbar

<!--
  A promo strip above the bar, dismissible on its own. The close button carries
  an aria-label; once dismissed the strip is removed, not just hidden, so it
  leaves no empty row. The text wraps rather than truncating at 320px, and the
  nav below collapses to a hamburger as usual.
-->
<div>
  <div class="bg-blue-600 text-white">
    <div class="mx-auto flex max-w-6xl items-center gap-3 px-4 py-2">
      <p class="min-w-0 flex-1 text-center text-sm">
        New: v2 is live.
        <a href="/changelog" class="font-semibold underline underline-offset-2 hover:text-blue-100">Read the changelog</a>
      </p>
      <button type="button" aria-label="Dismiss announcement" class="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-white/90 hover:bg-white/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80">
        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M6 6l12 12M18 6L6 18" /></svg>
      </button>
    </div>
  </div>

  <header class="border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
    <nav class="mx-auto flex h-14 max-w-6xl items-center gap-4 px-4" aria-label="Main">
      <a href="/" class="mr-auto font-bold text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-50 dark:focus-visible:ring-blue-400">Adysre</a>

      <ul class="hidden items-center gap-1 md:flex">
        <li><a href="/product" class="rounded-md px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-50">Product</a></li>
        <li><a href="/pricing" class="rounded-md px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-50">Pricing</a></li>
        <li><a href="/docs" class="rounded-md px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-50">Docs</a></li>
      </ul>

      <a href="/signup" class="hidden rounded-lg bg-blue-600 px-3.5 py-1.5 text-sm font-semibold text-white hover:bg-blue-700 md:block">Get started</a>

      <button
        type="button"
        aria-expanded="false"
        aria-controls="nav-announce-menu"
        aria-label="Open main menu"
        class="inline-flex h-9 w-9 items-center justify-center rounded-md text-gray-700 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 md:hidden dark:text-gray-300 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400"
      >
        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M4 6h16M4 12h16M4 18h16" /></svg>
      </button>
    </nav>

    <ul id="nav-announce-menu" hidden class="flex flex-col gap-1 border-t border-gray-200 px-4 pb-4 pt-2 md:hidden dark:border-gray-800">
      <li><a href="/product" class="block rounded-md px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800">Product</a></li>
      <li><a href="/pricing" class="block rounded-md px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800">Pricing</a></li>
      <li><a href="/docs" class="block rounded-md px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800">Docs</a></li>
      <li><a href="/signup" class="block rounded-lg bg-blue-600 px-3 py-2 text-center text-sm font-semibold text-white hover:bg-blue-700">Get started</a></li>
    </ul>
  </header>
</div>