Banner Announcement

<div id="announcement-banner" class="ws-banner relative bg-[var(--ws-banner-bg)]">
  <div class="mx-auto flex max-w-7xl items-center justify-between gap-x-6 px-6 py-2.5">
    <div class="flex items-center gap-x-3 text-sm text-[var(--ws-banner-text)]">
      <svg class="h-4 w-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456z" />
      </svg>
      <p class="truncate">
        <strong class="font-semibold">Webspire v2.0</strong> — New patterns, CLI tools, and more.
        <a href="#" class="ml-2 inline-flex items-center gap-1 whitespace-nowrap font-semibold underline underline-offset-2 hover:no-underline">
          Learn more <span aria-hidden="true">&rarr;</span>
        </a>
      </p>
    </div>
    <button type="button" onclick="document.getElementById('announcement-banner').remove()" class="-m-1.5 flex-shrink-0 rounded-md p-1.5 text-[var(--ws-banner-text)]/80 transition hover:text-[var(--ws-banner-text)] focus:outline-none focus:ring-2 focus:ring-white" aria-label="Dismiss">
      <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
    </button>
  </div>
</div>