Page Header Base

<section class="ws-page-header bg-[var(--ws-color-surface-alt)] py-14">
  <div class="mx-auto max-w-4xl px-6 text-center">
    <span class="inline-flex items-center gap-1.5 rounded-full border border-blue-200 bg-blue-50 px-3 py-1 text-xs font-medium text-blue-700">
      <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
      New features available
    </span>
    <h1 class="mt-4 text-3xl font-bold text-slate-900 sm:text-4xl">Pricing Plans</h1>
    <p class="mt-3 mx-auto max-w-xl text-lg text-slate-500">Simple, transparent pricing that grows with your team. No hidden fees.</p>
    <nav class="mt-5" aria-label="Breadcrumb">
      <ol class="flex items-center justify-center gap-1.5 text-sm text-slate-400">
        <li><a href="#" class="hover:text-slate-600 dark:hover:text-slate-300">Home</a></li>
        <li><span class="mx-1">›</span></li>
        <li class="font-medium text-slate-700">Pricing</li>
      </ol>
    </nav>
  </div>
</section>