<header class="group bg-color-surface w-full" aria-label="Plus UI header">
  <div class="bg-color-modal flex h-18 w-full items-center justify-between px-6 md:px-8 lg:px-10">
    <a href="#" class="flex size-8 items-center justify-center" aria-label="Plus UI home">
      <img src="https://www.plusui.com/logo.svg" alt="Plus UI" class="size-6 object-contain" />
    </a>

    <nav class="hidden items-center gap-6 lg:flex" aria-label="Primary navigation">
      <div class="relative">
        <a href="#" class="bg-color-default-default text-color-default flex h-10 items-center rounded px-3 text-base font-medium" aria-current="page" aria-haspopup="true" aria-expanded="true">Products</a>

        <nav class="bg-color-modal border-color-default invisible pointer-events-none absolute top-full left-0 z-20 mt-2 flex w-48 translate-y-1 flex-col gap-1 rounded border p-2 shadow-lg group-hover:visible group-hover:pointer-events-auto group-hover:translate-y-0 group-focus-within:visible group-focus-within:pointer-events-auto group-focus-within:translate-y-0" aria-label="Products submenu">
          <a href="#" class="text-color-default hover:bg-color-default-hovered flex h-8 items-center rounded px-2 text-sm">Our Story</a>
          <a href="#" class="bg-color-default-default text-color-default flex h-8 items-center rounded px-2 text-sm" aria-current="page">Mission</a>
          <a href="#" class="text-color-default hover:bg-color-default-hovered flex h-8 items-center rounded px-2 text-sm">Vision</a>
          <a href="#" class="text-color-default hover:bg-color-default-hovered flex h-8 items-center rounded px-2 text-sm">Partners</a>
        </nav>
      </div>

      <a href="#" class="text-color-default hover:bg-color-default-hovered flex h-10 items-center rounded px-3 text-base font-medium">Solutions</a>
      <a href="#" class="text-color-default hover:bg-color-default-hovered flex h-10 items-center rounded px-3 text-base font-medium">Playground</a>
    </nav>

    <div class="hidden items-center gap-7 lg:flex">
      <div class="flex items-center gap-1" aria-label="Header utilities">
        <button type="button" class="text-color-caption hover:bg-color-default-hovered flex size-8 items-center justify-center rounded" aria-label="Notifications">
          <i class="fa-regular fa-bell text-lg" aria-hidden="true"></i>
        </button>
        <button type="button" class="text-color-caption hover:bg-color-default-hovered flex size-8 items-center justify-center rounded" aria-label="Account">
          <i class="fa-regular fa-user text-lg" aria-hidden="true"></i>
        </button>
        <button type="button" class="text-color-caption hover:bg-color-default-hovered flex size-8 items-center justify-center rounded" aria-label="Settings">
          <i class="fa-solid fa-gear text-lg" aria-hidden="true"></i>
        </button>
      </div>

      <plus-divider orientation="vertical" class="h-10"></plus-divider>

      <div class="flex items-center gap-3">
        <plus-button kind="outlined" status="default" size="md">Sign In</plus-button>
        <plus-button kind="filled" status="primary" size="md" suffix="true">
          Demo
          <i class="fa-solid fa-arrow-right text-sm" slot="suffix" aria-hidden="true"></i>
        </plus-button>
      </div>
    </div>

    <button type="button" class="text-color-default flex size-10 items-center justify-center rounded lg:hidden" aria-label="Open navigation menu">
      <i class="fa-solid fa-bars text-xl" aria-hidden="true"></i>
    </button>
  </div>

  <nav class="bg-color-modal flex w-full flex-col gap-1 px-6 pb-6 md:px-8 lg:hidden" aria-label="Mobile products menu">
    <a href="#" class="text-color-default hover:bg-color-default-hovered flex h-9 items-center rounded px-2 text-sm">Our Story</a>
    <a href="#" class="bg-color-default-default text-color-default flex h-9 items-center rounded px-2 text-sm" aria-current="page">Mission</a>
    <a href="#" class="text-color-default hover:bg-color-default-hovered flex h-9 items-center rounded px-2 text-sm">Vision</a>
    <a href="#" class="text-color-default hover:bg-color-default-hovered flex h-9 items-center rounded px-2 text-sm">Partners</a>
  </nav>
</header>

<header class="group bg-color-surface flex w-full flex-col" aria-label="Plus UI product navigation">
  <div class="bg-color-modal flex h-18 w-full items-center justify-between gap-4 px-6 md:px-9 lg:grid lg:grid-cols-3 lg:px-10">
    <nav class="hidden items-center gap-1 lg:flex" aria-label="Primary navigation">
      <a href="#headers-2-products-menu" aria-current="page" aria-haspopup="true" aria-expanded="true" class="bg-color-default-default hover:bg-color-default-hovered text-color-default flex h-10 items-center gap-2 rounded px-3 text-base font-medium">
        <span>Products</span>
        <i class="fa-solid fa-chevron-down text-xs" aria-hidden="true"></i>
      </a>
      <a href="#" class="hover:bg-color-default-hovered text-color-default flex h-10 items-center gap-2 rounded px-3 text-base font-medium">
        <span>Solutions</span>
        <i class="fa-solid fa-chevron-down text-xs" aria-hidden="true"></i>
      </a>
      <a href="#" class="hover:bg-color-default-hovered text-color-default flex h-10 items-center gap-2 rounded px-3 text-base font-medium">
        <span>Playground</span>
        <i class="fa-solid fa-chevron-down text-xs" aria-hidden="true"></i>
      </a>
    </nav>

    <a href="#" class="flex size-8 items-center justify-center lg:justify-self-center" aria-label="Plus UI home">
      <img src="https://www.plusui.com/logo.svg" alt="Plus UI" class="size-6 object-contain" />
    </a>

    <button type="button" class="text-color-default flex size-10 items-center justify-center rounded lg:hidden" aria-label="Open navigation menu">
      <i class="fa-solid fa-bars text-xl" aria-hidden="true"></i>
    </button>

    <div class="hidden items-center justify-end gap-7 lg:flex">
      <div class="flex items-center gap-1" aria-label="Quick links">
        <a href="#" class="hover:bg-color-default-hovered text-color-caption flex size-8 items-center justify-center rounded" aria-label="Notifications">
          <i class="fa-regular fa-bell text-lg" aria-hidden="true"></i>
        </a>
        <a href="#" class="hover:bg-color-default-hovered text-color-caption flex size-8 items-center justify-center rounded" aria-label="Account">
          <i class="fa-regular fa-user text-lg" aria-hidden="true"></i>
        </a>
        <a href="#" class="hover:bg-color-default-hovered text-color-caption flex size-8 items-center justify-center rounded" aria-label="Favorites">
          <i class="fa-regular fa-star text-lg" aria-hidden="true"></i>
        </a>
        <a href="#" class="hover:bg-color-default-hovered text-color-caption flex size-8 items-center justify-center rounded" aria-label="Recent activity">
          <i class="fa-regular fa-clock text-lg" aria-hidden="true"></i>
        </a>
      </div>

      <plus-divider orientation="vertical" class="h-10"></plus-divider>

      <div class="flex items-center gap-3">
        <plus-button kind="text" status="default" size="md">Sign In</plus-button>
        <plus-button kind="filled" status="primary" size="md" suffix="true">
          Get all-access
          <i class="fa-solid fa-arrow-right text-sm" slot="suffix" aria-hidden="true"></i>
        </plus-button>
      </div>
    </div>
  </div>

  <nav id="headers-2-products-menu" class="bg-color-modal grid max-h-none w-full grid-cols-1 gap-7 overflow-hidden p-6 opacity-100 shadow-lg md:grid-cols-3 md:p-9 lg:max-h-0 lg:max-w-4xl lg:grid-cols-3 lg:p-0 lg:opacity-0 lg:shadow-lg lg:group-hover:max-h-none lg:group-hover:p-8 lg:group-hover:opacity-100 lg:group-focus-within:max-h-none lg:group-focus-within:p-8 lg:group-focus-within:opacity-100" aria-label="Products menu">
    <section class="flex flex-col gap-2" aria-labelledby="headers-2-about">
      <p id="headers-2-about" class="text-color-placeholder px-2 text-sm">About</p>
      <a href="#" class="hover:bg-color-default-hovered text-color-default flex flex-col gap-1 rounded p-2">
        <span class="text-sm font-semibold md:text-base">Mission</span>
        <span class="text-color-caption text-xs md:text-sm">Our core purpose and focus</span>
      </a>
      <a href="#" class="hover:bg-color-default-hovered text-color-default flex flex-col gap-1 rounded p-2">
        <span class="text-sm font-semibold md:text-base">Vision</span>
        <span class="text-color-caption text-xs md:text-sm">Our long-term direction</span>
      </a>
    </section>

    <section class="flex flex-col gap-2" aria-labelledby="headers-2-company">
      <p id="headers-2-company" class="text-color-placeholder px-2 text-sm">Company</p>
      <a href="#" class="hover:bg-color-default-hovered text-color-default flex flex-col gap-1 rounded p-2">
        <span class="flex items-center gap-2 text-sm font-semibold md:text-base">
          <span class="flex-1">Partners</span>
          <plus-chip status="info" size="sm">New</plus-chip>
        </span>
        <span class="text-color-caption text-xs md:text-sm">The people and organisations</span>
      </a>
      <a href="#" class="hover:bg-color-default-hovered text-color-default flex flex-col gap-1 rounded p-2">
        <span class="text-sm font-semibold md:text-base">Our Story</span>
        <span class="text-color-caption text-xs md:text-sm">How we began and evolved</span>
      </a>
    </section>

    <aside class="flex flex-col gap-3" aria-labelledby="headers-2-featured-guide">
      <p id="headers-2-featured-guide" class="text-color-placeholder text-sm">Featured guide</p>
      <figure class="border-color-default bg-color-default-default flex min-h-32 w-full items-center justify-center overflow-hidden rounded border">
        <picture class="block w-full">
          <source media="(max-width: 767px)" srcset="https://www.plusui.com/images/blocks/headers/headers-2-featured-guide-mobile.png" />
          <img src="https://www.plusui.com/images/blocks/headers/headers-2-featured-guide.png" alt="Featured Plus UI product guide preview" class="h-32 w-full object-cover" />
        </picture>
        <figcaption class="sr-only">Illustrated product guide preview</figcaption>
      </figure>
      <plus-button kind="text" status="default" size="md" suffix="true">
        Get insight
        <i class="fa-solid fa-arrow-right text-sm" slot="suffix" aria-hidden="true"></i>
      </plus-button>
    </aside>
  </nav>
</header>

<header class="group bg-color-surface flex w-full flex-col" aria-label="Plus UI product navigation">
  <div class="bg-color-modal flex h-18 w-full items-center px-6 sm:px-8 lg:px-10">
    <div class="flex w-full items-center justify-between gap-6">
      <a href="#" class="text-color-default flex size-8 items-center justify-center" aria-label="Plus UI home">
        <img src="https://www.plusui.com/logo.svg" alt="Plus UI" class="size-6 object-contain" />
      </a>

      <nav class="hidden items-center overflow-hidden rounded lg:flex" aria-label="Main navigation">
        <a href="#" class="hover:bg-color-default-hovered text-color-default flex h-10 items-center gap-2 rounded px-3 text-base font-medium">
          <span>Products</span>
          <i class="fa-solid fa-chevron-down text-xs" aria-hidden="true"></i>
        </a>
        <a href="#headers-3-solutions-menu" class="bg-color-default-default hover:bg-color-default-hovered text-color-default flex h-10 items-center gap-2 rounded px-3 text-base font-medium" aria-current="page" aria-haspopup="true" aria-expanded="true">
          <span>Solutions</span>
          <i class="fa-solid fa-chevron-down text-xs" aria-hidden="true"></i>
        </a>
        <a href="#" class="hover:bg-color-default-hovered text-color-default flex h-10 items-center gap-2 rounded px-3 text-base font-medium">
          <span>Playground</span>
          <i class="fa-solid fa-chevron-down text-xs" aria-hidden="true"></i>
        </a>
        <a href="#" class="hover:bg-color-default-hovered text-color-default flex h-10 items-center rounded px-3 text-base font-semibold">Contact</a>
      </nav>

      <div class="hidden items-center gap-5 lg:flex">
        <div class="flex items-center gap-1" aria-label="Utility navigation">
          <plus-button kind="text" status="default" size="sm" aria-label="Notifications">
            <i class="fa-regular fa-bell text-base" aria-hidden="true"></i>
          </plus-button>
          <plus-button kind="text" status="default" size="sm" aria-label="Account">
            <i class="fa-regular fa-user text-base" aria-hidden="true"></i>
          </plus-button>
          <plus-button kind="text" status="default" size="sm" aria-label="Favorites">
            <i class="fa-regular fa-star text-base" aria-hidden="true"></i>
          </plus-button>
          <plus-button kind="text" status="default" size="sm" aria-label="Recent activity">
            <i class="fa-regular fa-clock text-base" aria-hidden="true"></i>
          </plus-button>
        </div>
        <plus-divider orientation="vertical" class="h-10"></plus-divider>
        <div class="flex items-center gap-3">
          <plus-button kind="text" status="default" size="md">Sign In</plus-button>
          <plus-button kind="filled" status="primary" size="md" suffix="true">
            Get all-access
            <i class="fa-solid fa-arrow-right text-sm" slot="suffix" aria-hidden="true"></i>
          </plus-button>
        </div>
      </div>

      <button type="button" class="text-color-default flex size-10 items-center justify-center rounded lg:hidden" aria-label="Open navigation menu">
        <i class="fa-solid fa-bars text-xl" aria-hidden="true"></i>
      </button>
    </div>
  </div>

  <div id="headers-3-solutions-menu" class="max-h-none overflow-hidden opacity-100 lg:max-h-0 lg:opacity-0 lg:group-hover:max-h-none lg:group-hover:opacity-100 lg:group-focus-within:max-h-none lg:group-focus-within:opacity-100" role="region" aria-label="Expanded solutions menu">
    <plus-divider></plus-divider>

    <section class="bg-color-surface flex w-full flex-col gap-8 p-6 sm:gap-9 sm:p-8 lg:flex-row lg:gap-10 lg:p-10">
      <div class="grid min-w-px flex-1 grid-cols-1 gap-8 sm:grid-cols-3 lg:gap-10">
        <nav class="flex flex-col gap-5" aria-label="Product resources">
          <p class="text-color-placeholder text-sm font-medium sm:text-base">Resources</p>
          <div class="flex flex-col gap-4">
            <a href="#" class="text-color-default hover:bg-color-default-hovered flex items-center gap-2 rounded p-2">
              <span class="flex size-7 items-center justify-center"><i class="fa-solid fa-user text-base" aria-hidden="true"></i></span>
              <span class="text-base font-medium sm:text-lg">Roadmap</span>
            </a>
            <a href="#" class="text-color-default hover:bg-color-default-hovered flex items-center gap-2 rounded p-2">
              <span class="flex size-7 items-center justify-center"><i class="fa-solid fa-hand-point-up text-base" aria-hidden="true"></i></span>
              <span class="text-base font-medium sm:text-lg">Features Request</span>
            </a>
            <a href="#" class="text-color-default hover:bg-color-default-hovered flex items-center gap-2 rounded p-2">
              <span class="flex size-7 items-center justify-center"><i class="fa-solid fa-clock-rotate-left text-base" aria-hidden="true"></i></span>
              <span class="text-base font-medium sm:text-lg">Changelog</span>
            </a>
          </div>
        </nav>

        <nav class="flex flex-col gap-5" aria-label="Company resources">
          <p class="text-color-placeholder text-sm font-medium sm:text-base">Resources</p>
          <div class="flex flex-col gap-4">
            <a href="#" class="text-color-default hover:bg-color-default-hovered flex items-center gap-2 rounded p-2">
              <span class="flex size-7 items-center justify-center"><i class="fa-solid fa-link text-base" aria-hidden="true"></i></span>
              <span class="text-base font-medium sm:text-lg">Blog</span>
            </a>
            <a href="#" class="text-color-default hover:bg-color-default-hovered flex items-center gap-2 rounded p-2">
              <span class="flex size-7 items-center justify-center"><i class="fa-solid fa-podcast text-base" aria-hidden="true"></i></span>
              <span class="text-base font-medium sm:text-lg">Podcasts</span>
            </a>
            <a href="#" class="text-color-default hover:bg-color-default-hovered flex items-center gap-2 rounded p-2">
              <span class="flex size-7 items-center justify-center"><i class="fa-solid fa-circle-question text-base" aria-hidden="true"></i></span>
              <span class="text-base font-medium sm:text-lg">Help Center</span>
            </a>
          </div>
        </nav>

        <nav class="flex flex-col gap-5" aria-label="Tools">
          <p class="text-color-placeholder text-sm font-medium sm:text-base">Tools</p>
          <div class="flex flex-col gap-4">
            <a href="#" class="text-color-default hover:bg-color-default-hovered flex items-center gap-2 rounded p-2">
              <span class="flex size-7 items-center justify-center"><i class="fa-solid fa-person-circle-check text-base" aria-hidden="true"></i></span>
              <span class="text-base font-medium sm:text-lg">Accessibility Checker</span>
            </a>
            <a href="#" class="text-color-default hover:bg-color-default-hovered flex items-center gap-2 rounded p-2">
              <span class="flex size-7 items-center justify-center"><i class="fa-solid fa-credit-card text-base" aria-hidden="true"></i></span>
              <span class="text-base font-medium sm:text-lg">Credit Card Generator</span>
            </a>
            <a href="#" class="text-color-default hover:bg-color-default-hovered flex items-center gap-2 rounded p-2">
              <span class="flex size-7 items-center justify-center"><i class="fa-solid fa-qrcode text-base" aria-hidden="true"></i></span>
              <span class="text-base font-medium sm:text-lg">QR Code Generator</span>
              <plus-chip invert status="success" size="sm">New</plus-chip>
            </a>
          </div>
        </nav>
      </div>

      <plus-divider class="lg:hidden"></plus-divider>

      <aside class="border-color-default flex w-full flex-col gap-3 lg:w-72 lg:border-l lg:pl-10" aria-label="Featured guide">
        <p class="text-color-placeholder text-sm font-medium sm:text-base">Featured guide</p>
        <article class="border-color-default bg-color-modal flex w-full flex-col overflow-hidden rounded border shadow-lg">
          <img src="https://www.plusui.com/images/blocks/headers/design-system-directory.png" alt="Design system directory preview" class="aspect-video w-full object-cover" />
          <div class="flex flex-col gap-3 p-4 sm:p-6">
            <h2 class="text-color-default text-sm font-semibold sm:text-base">How to build a team hub on Plus UI</h2>
          </div>
        </article>
        <plus-button kind="text" status="default" size="md" suffix="true" full-width>
          Get insight
          <i class="fa-solid fa-arrow-right text-sm" slot="suffix" aria-hidden="true"></i>
        </plus-button>
      </aside>
    </section>

    <footer class="bg-color-modal flex w-full flex-col gap-4 px-6 py-4 sm:px-8 lg:flex-row lg:items-center lg:justify-between lg:px-10" aria-label="Menu promotion">
      <div class="flex min-w-px items-center gap-3">
        <span class="bg-color-default-invert-default text-color-default-invert flex size-9 shrink-0 items-center justify-center rounded-full">
          <i class="fa-regular fa-font-awesome text-base" aria-hidden="true"></i>
        </span>
        <p class="text-color-caption min-w-px flex-1 text-sm sm:text-base">Discover how our solutions can support your school.</p>
      </div>
      <plus-button kind="outlined" status="default" size="md" class="w-full sm:w-auto">Get Started</plus-button>
    </footer>
  </div>
</header>

<header class="group bg-color-modal flex w-full flex-col" aria-label="Product navigation with mega menu">
  <div class="flex h-18 w-full min-w-0 items-center justify-between px-6 sm:px-8 lg:px-10">
    <a href="#" class="flex size-8 items-center justify-center" aria-label="Plus UI home">
      <img src="https://www.plusui.com/logo.svg" alt="Plus UI" class="size-6 object-contain" />
    </a>

    <nav class="hidden items-center overflow-hidden rounded lg:flex" aria-label="Primary navigation">
      <a href="#" class="hover:bg-color-default-hovered text-color-default flex h-10 items-center gap-2 rounded px-3 text-base font-semibold">
        Products
        <i class="fa-solid fa-chevron-down text-xs" aria-hidden="true"></i>
      </a>
      <a href="#headers-4-solutions-menu" aria-current="page" aria-haspopup="true" aria-expanded="true" class="bg-color-default-default hover:bg-color-default-hovered text-color-default flex h-10 items-center gap-2 rounded px-3 text-base font-semibold">
        Solutions
        <i class="fa-solid fa-chevron-down text-xs" aria-hidden="true"></i>
      </a>
      <a href="#" class="hover:bg-color-default-hovered text-color-default flex h-10 items-center gap-2 rounded px-3 text-base font-semibold">
        Playground
        <i class="fa-solid fa-chevron-down text-xs" aria-hidden="true"></i>
      </a>
      <a href="#" class="hover:bg-color-default-hovered text-color-default flex h-10 items-center rounded px-3 text-base font-semibold">Contact</a>
    </nav>

    <div class="hidden items-center gap-5 lg:flex">
      <div class="flex items-center gap-1" aria-label="Utility links">
        <a href="#" class="hover:bg-color-default-hovered text-color-default flex size-8 items-center justify-center rounded" aria-label="Notifications">
          <i class="fa-regular fa-bell text-lg" aria-hidden="true"></i>
        </a>
        <a href="#" class="hover:bg-color-default-hovered text-color-default flex size-8 items-center justify-center rounded" aria-label="Account">
          <i class="fa-regular fa-user text-lg" aria-hidden="true"></i>
        </a>
        <a href="#" class="hover:bg-color-default-hovered text-color-default flex size-8 items-center justify-center rounded" aria-label="Favorites">
          <i class="fa-regular fa-star text-lg" aria-hidden="true"></i>
        </a>
        <a href="#" class="hover:bg-color-default-hovered text-color-default flex size-8 items-center justify-center rounded" aria-label="Recent activity">
          <i class="fa-regular fa-clock text-lg" aria-hidden="true"></i>
        </a>
      </div>
      <plus-divider orientation="vertical" class="h-10"></plus-divider>
      <div class="flex items-center gap-3">
        <plus-button kind="text" status="default" size="md">Sign In</plus-button>
        <plus-button kind="filled" status="primary" size="md" suffix="true">
          Get all-access
          <i class="fa-solid fa-arrow-right text-sm" slot="suffix" aria-hidden="true"></i>
        </plus-button>
      </div>
    </div>

    <button type="button" class="text-color-default flex size-10 items-center justify-center rounded lg:hidden" aria-label="Open navigation menu">
      <i class="fa-solid fa-bars text-xl" aria-hidden="true"></i>
    </button>
  </div>

  <div id="headers-4-solutions-menu" class="max-h-none overflow-hidden opacity-100 lg:max-h-0 lg:opacity-0 lg:group-hover:max-h-none lg:group-hover:opacity-100 lg:group-focus-within:max-h-none lg:group-focus-within:opacity-100" role="region" aria-label="Solutions menu">
    <plus-divider></plus-divider>

    <section class="bg-color-surface border-color-default grid w-full min-w-0 grid-cols-1 gap-8 border-b px-6 py-8 sm:gap-9 sm:px-8 sm:py-9 md:grid-cols-3 lg:gap-10 lg:px-10 lg:py-10">
      <article class="flex min-w-0 flex-col gap-7 py-4">
        <div class="flex flex-col gap-4">
          <h2 class="text-color-default text-base font-semibold sm:text-lg">Design System</h2>
          <figure class="bg-color-default-default aspect-video w-full min-w-0 overflow-hidden rounded" aria-label="Design system preview">
            <img src="https://www.plusui.com/images/blocks/headers/headers-4-design-system.png" alt="Design system preview card" class="size-full object-cover" />
          </figure>
        </div>

        <div class="flex flex-col gap-6">
          <div class="flex flex-col gap-1">
            <h3 class="text-color-default text-sm font-medium sm:text-base">Open-source</h3>
            <p class="text-color-caption text-xs sm:text-sm">Free and community-driven library.</p>
          </div>
          <div class="flex flex-col gap-1">
            <h3 class="text-color-default text-sm font-medium sm:text-base">Multi-framework support</h3>
            <p class="text-color-caption text-xs sm:text-sm">Works with React, Vue, Angular and more.</p>
          </div>
          <div class="flex flex-col gap-1">
            <div class="flex flex-wrap items-center gap-2">
              <h3 class="text-color-default text-sm font-medium sm:text-base">Integrations</h3>
              <plus-chip invert status="success" size="sm">New</plus-chip>
            </div>
            <p class="text-color-caption text-xs sm:text-sm">Easy connection with popular tools.</p>
          </div>
        </div>

        <div class="text-color-caption flex items-center gap-4" aria-label="Integration icons">
          <i class="fa-brands fa-react text-lg" aria-hidden="true"></i>
          <i class="fa-brands fa-angular text-lg" aria-hidden="true"></i>
          <i class="fa-brands fa-vuejs text-lg" aria-hidden="true"></i>
          <i class="fa-brands fa-js text-lg" aria-hidden="true"></i>
        </div>
      </article>

      <article class="border-color-default flex min-w-0 flex-col gap-7 border-t py-4 md:border-t-0 md:border-l md:pl-8 lg:pl-10">
        <div class="flex flex-col gap-4">
          <h2 class="text-color-default text-base font-semibold sm:text-lg">Auto Layout</h2>
          <figure class="bg-color-default-default aspect-video w-full min-w-0 overflow-hidden rounded" aria-label="Auto layout preview">
            <img src="https://www.plusui.com/images/blocks/headers/headers-4-auto-layout.png" alt="Auto layout preview card" class="size-full object-cover" />
          </figure>
        </div>

        <div class="flex flex-col gap-6">
          <div class="flex flex-col gap-1">
            <h3 class="text-color-default text-sm font-medium sm:text-base">Foundations</h3>
            <p class="text-color-caption text-xs sm:text-sm">Core styles and rules for all designs.</p>
          </div>
          <div class="flex flex-col gap-1">
            <h3 class="text-color-default text-sm font-medium sm:text-base">Components</h3>
            <p class="text-color-caption text-xs sm:text-sm">Ready-to-use UI building blocks.</p>
          </div>
          <div class="flex flex-col gap-1">
            <h3 class="text-color-default text-sm font-medium sm:text-base">Blocks &amp; Templates</h3>
            <p class="text-color-caption text-xs sm:text-sm">Pre-made layouts to start faster.</p>
          </div>
        </div>

        <div class="text-color-caption flex items-center gap-3" aria-label="Design tool icons">
          <i class="fa-brands fa-figma text-lg" aria-hidden="true"></i>
        </div>
      </article>

      <article class="border-color-default flex min-w-0 flex-col gap-7 border-t py-4 md:border-t-0 md:border-l md:pl-8 lg:pl-10">
        <div class="flex flex-col gap-4">
          <h2 class="text-color-default text-base font-semibold sm:text-lg">Foundations</h2>
          <figure class="bg-color-default-default aspect-video w-full min-w-0 overflow-hidden rounded" aria-label="Foundations preview">
            <img src="https://www.plusui.com/images/blocks/headers/headers-4-foundations.png" alt="Foundations preview card" class="size-full object-cover" />
          </figure>
        </div>

        <div class="flex flex-col gap-6">
          <div class="flex flex-col gap-1">
            <h3 class="text-color-default text-sm font-medium sm:text-base">Monitoring Dashboard</h3>
            <p class="text-color-caption text-xs sm:text-sm">Track design and dev in real time.</p>
          </div>
          <div class="flex flex-col gap-1">
            <h3 class="text-color-default text-sm font-medium sm:text-base">Performance Overview</h3>
            <p class="text-color-caption text-xs sm:text-sm">See efficiency across all projects.</p>
          </div>
          <div class="flex flex-col gap-1">
            <h3 class="text-color-default text-sm font-medium sm:text-base">AI Suggestion</h3>
            <p class="text-color-caption text-xs sm:text-sm">Smart tips for better workflows.</p>
          </div>
        </div>

        <div>
          <plus-chip invert status="default" size="sm">Coming Soon</plus-chip>
        </div>
      </article>
    </section>

    <aside class="bg-color-modal flex w-full flex-col gap-4 px-6 py-4 sm:px-8 md:flex-row md:items-center md:justify-between lg:px-10" aria-label="Solutions callout">
      <div class="flex items-center gap-3">
        <span class="bg-color-default-invert-default text-color-default-invert flex size-9 shrink-0 items-center justify-center rounded-full">
          <i class="fa-regular fa-font-awesome text-base" aria-hidden="true"></i>
        </span>
        <p class="text-color-caption text-sm sm:text-base">Discover how our solutions can support your school — get started in just a few steps.</p>
      </div>
      <plus-button kind="outlined" status="default" size="sm">Get Started</plus-button>
    </aside>
  </div>
</header>

<header class="group bg-color-surface flex w-full flex-col" aria-label="Plus UI compact product navigation">
  <div class="bg-color-modal flex h-18 w-full items-center px-4 sm:px-6 lg:px-10">
    <div class="flex w-full items-center justify-between gap-4">
      <a href="#" class="text-color-default flex size-9 items-center justify-center" aria-label="Plus UI home">
        <img src="https://www.plusui.com/logo.svg" alt="Plus UI" class="size-6 object-contain" />
      </a>

      <nav class="hidden items-center gap-1 lg:flex" aria-label="Main navigation">
        <a href="#" class="hover:bg-color-default-hovered text-color-default flex h-10 items-center gap-2 rounded px-3 text-base font-semibold">
          <span>Products</span>
          <i class="fa-solid fa-chevron-down text-xs" aria-hidden="true"></i>
        </a>
        <a href="#headers-5-solutions-menu" class="bg-color-default-default hover:bg-color-default-hovered text-color-default flex h-10 items-center gap-2 rounded px-3 text-base font-semibold" aria-current="page" aria-haspopup="true" aria-expanded="true">
          <span>Solutions</span>
          <i class="fa-solid fa-chevron-down text-xs" aria-hidden="true"></i>
        </a>
        <a href="#" class="hover:bg-color-default-hovered text-color-default flex h-10 items-center gap-2 rounded px-3 text-base font-semibold">
          <span>Playground</span>
          <i class="fa-solid fa-chevron-down text-xs" aria-hidden="true"></i>
        </a>
        <a href="#" class="hover:bg-color-default-hovered text-color-default flex h-10 items-center rounded px-3 text-base font-semibold">Contact</a>
      </nav>

      <div class="hidden min-w-px flex-1 justify-end gap-5 lg:flex">
        <plus-input placeholder="Search" aria-label="Search Plus UI" size="sm" class="w-48">
          <i slot="suffix" class="fa-solid fa-magnifying-glass text-color-caption text-sm" aria-hidden="true"></i>
        </plus-input>
        <plus-divider orientation="vertical" class="h-10"></plus-divider>
        <div class="flex items-center gap-2">
          <plus-button kind="text" status="default" size="md">Sign In</plus-button>
          <plus-button kind="filled" status="primary" size="md" suffix="true">
            Get all-access
            <i class="fa-solid fa-arrow-right text-sm" slot="suffix" aria-hidden="true"></i>
          </plus-button>
        </div>
      </div>

      <button type="button" class="text-color-default flex size-10 items-center justify-center rounded lg:hidden" aria-label="Open navigation menu">
        <i class="fa-solid fa-bars text-xl" aria-hidden="true"></i>
      </button>
    </div>
  </div>

  <div id="headers-5-solutions-menu" class="max-h-none overflow-hidden opacity-100 lg:max-h-0 lg:opacity-0 lg:group-hover:max-h-none lg:group-hover:opacity-100 lg:group-focus-within:max-h-none lg:group-focus-within:opacity-100" role="region" aria-label="Expanded solutions menu">
    <plus-divider></plus-divider>

    <section class="bg-color-surface flex w-full flex-col gap-6 px-6 py-8 sm:px-8 sm:py-9 lg:px-10 lg:py-10">
      <div class="grid w-full grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4 lg:gap-10">
        <article class="flex min-w-px flex-col gap-5" aria-labelledby="headers-5-ecosystem">
          <h2 id="headers-5-ecosystem" class="text-color-default text-base font-semibold sm:text-lg">Notion Ecosystem</h2>
          <img src="https://www.plusui.com/images/blocks/headers/headers-5-notion-ecosystem.png" alt="Design system workspace preview" class="aspect-video w-full rounded object-cover" />
          <div class="flex flex-col gap-4">
            <nav class="flex flex-col gap-4" aria-label="Notion ecosystem links">
              <a href="#" class="text-color-default flex flex-col gap-1 rounded hover:bg-color-default-hovered">
                <span class="text-sm font-medium sm:text-base">Open-source</span>
                <span class="text-color-caption text-xs sm:text-sm">Free and community-driven library.</span>
              </a>
              <a href="#" class="text-color-default flex flex-col gap-1 rounded hover:bg-color-default-hovered">
                <span class="text-sm font-medium sm:text-base">Multi-framework support</span>
                <span class="text-color-caption text-xs sm:text-sm">Works with React, Vue, Angular and more.</span>
              </a>
              <a href="#" class="text-color-default flex flex-col gap-1 rounded hover:bg-color-default-hovered">
                <span class="flex items-center gap-2 text-sm font-medium sm:text-base">
                  <span>Integrations</span>
                  <plus-chip invert status="success" size="sm">New</plus-chip>
                </span>
                <span class="text-color-caption text-xs sm:text-sm">Easy connection with popular tools.</span>
              </a>
            </nav>
            <div class="text-color-placeholder flex items-center gap-4" aria-label="Supported frameworks">
              <i class="fa-brands fa-react text-lg" aria-hidden="true"></i>
              <i class="fa-brands fa-vuejs text-lg" aria-hidden="true"></i>
              <i class="fa-brands fa-angular text-lg" aria-hidden="true"></i>
              <i class="fa-brands fa-js text-lg" aria-hidden="true"></i>
            </div>
          </div>
        </article>

        <article class="flex min-w-px flex-col gap-5" aria-labelledby="headers-5-assets">
          <h2 id="headers-5-assets" class="text-color-default text-base font-semibold sm:text-lg">Figma Assets</h2>
          <img src="https://www.plusui.com/images/blocks/headers/headers-5-figma-assets.png" alt="Design system UI kit preview" class="aspect-video w-full rounded object-cover" />
          <div class="flex flex-col gap-4">
            <nav class="flex flex-col gap-4" aria-label="Figma asset links">
              <a href="#" class="text-color-default flex flex-col gap-1 rounded hover:bg-color-default-hovered">
                <span class="text-sm font-medium sm:text-base">Foundations</span>
                <span class="text-color-caption text-xs sm:text-sm">Core styles and rules for all designs.</span>
              </a>
              <a href="#" class="text-color-default flex flex-col gap-1 rounded hover:bg-color-default-hovered">
                <span class="text-sm font-medium sm:text-base">Components</span>
                <span class="text-color-caption text-xs sm:text-sm">Ready-to-use UI building blocks.</span>
              </a>
              <a href="#" class="text-color-default flex flex-col gap-1 rounded hover:bg-color-default-hovered">
                <span class="text-sm font-medium sm:text-base">Blocks &amp; Templates</span>
                <span class="text-color-caption text-xs sm:text-sm">Pre-made layouts to start faster.</span>
              </a>
            </nav>
            <div class="text-color-placeholder flex items-center gap-3" aria-label="Asset categories">
              <i class="fa-brands fa-figma text-lg" aria-hidden="true"></i>
            </div>
          </div>
        </article>

        <article class="flex min-w-px flex-col gap-5" aria-labelledby="headers-5-analytics">
          <h2 id="headers-5-analytics" class="text-color-default text-base font-semibold sm:text-lg">Analytics &amp; Tracking</h2>
          <img src="https://www.plusui.com/images/blocks/headers/headers-5-analytics-tracking.png" alt="Analytics dashboard preview" class="aspect-video w-full rounded object-cover" />
          <div class="flex flex-col gap-4">
            <nav class="flex flex-col gap-4" aria-label="Analytics links">
              <a href="#" class="text-color-default flex flex-col gap-1 rounded hover:bg-color-default-hovered">
                <span class="text-sm font-medium sm:text-base">Monitoring Dashboard</span>
                <span class="text-color-caption text-xs sm:text-sm">Track design and dev in real time.</span>
              </a>
              <a href="#" class="text-color-default flex flex-col gap-1 rounded hover:bg-color-default-hovered">
                <span class="text-sm font-medium sm:text-base">Performance Overview</span>
                <span class="text-color-caption text-xs sm:text-sm">See efficiency across all projects.</span>
              </a>
              <a href="#" class="text-color-default flex flex-col gap-1 rounded hover:bg-color-default-hovered">
                <span class="text-sm font-medium sm:text-base">AI Suggestion</span>
                <span class="text-color-caption text-xs sm:text-sm">Smart tips for better workflows.</span>
              </a>
            </nav>
            <plus-chip invert status="default" size="sm">Coming Soon</plus-chip>
          </div>
        </article>

        <article class="flex min-w-px flex-col gap-5" aria-labelledby="headers-5-docs">
          <h2 id="headers-5-docs" class="text-color-default text-base font-semibold sm:text-lg">System Documentation</h2>
          <img src="https://www.plusui.com/images/blocks/headers/headers-5-system-documentation.png" alt="Design system directory preview" class="aspect-video w-full rounded object-cover" />
          <div class="flex flex-col gap-4">
            <nav class="flex flex-col gap-4" aria-label="Documentation links">
              <a href="#" class="text-color-default flex flex-col gap-1 rounded hover:bg-color-default-hovered">
                <span class="text-sm font-medium sm:text-base">Dashboard Doc</span>
                <span class="text-color-caption text-xs sm:text-sm">Track design and dev in real time.</span>
              </a>
              <a href="#" class="text-color-default flex flex-col gap-1 rounded hover:bg-color-default-hovered">
                <span class="text-sm font-medium sm:text-base">Performance Doc</span>
                <span class="text-color-caption text-xs sm:text-sm">See efficiency across all projects.</span>
              </a>
              <a href="#" class="text-color-default flex flex-col gap-1 rounded hover:bg-color-default-hovered">
                <span class="text-sm font-medium sm:text-base">AI Doc</span>
                <span class="text-color-caption text-xs sm:text-sm">Smart tips for better workflows.</span>
              </a>
            </nav>
            <plus-chip invert status="default" size="sm">Coming Soon</plus-chip>
          </div>
        </article>
      </div>
    </section>

    <footer class="bg-color-default-default flex w-full items-center justify-center px-6 py-5 text-center sm:px-8" aria-label="Menu promotion">
      <p class="text-color-default max-w-3xl text-sm sm:text-base">Discover how our solutions can support your school — get started in just a few steps.</p>
    </footer>
  </div>
</header>

<section class="group bg-color-surface flex w-full flex-col" aria-label="Header with open solutions menu">
  <header class="border-color-default bg-color-modal flex h-18 w-full items-center border-b px-6 sm:px-8 lg:px-10">
    <div class="flex w-full items-center justify-between gap-4">
      <a href="#" class="flex size-8 items-center justify-center" aria-label="Plus UI home">
        <img src="https://www.plusui.com/logo.svg" alt="Plus UI" class="size-6 object-contain" />
      </a>

      <nav class="hidden flex-1 items-center justify-center gap-2 lg:flex" aria-label="Primary navigation">
        <a href="#" class="text-color-default hover:bg-color-default-hovered flex h-10 items-center gap-2 rounded px-3 text-base font-medium">
          Products
          <i class="fa-solid fa-chevron-down text-xs" aria-hidden="true"></i>
        </a>
        <a href="#headers-6-solutions-menu" class="bg-color-default-default text-color-default hover:bg-color-default-hovered flex h-10 items-center gap-2 rounded px-3 text-base font-medium" aria-current="page" aria-haspopup="true" aria-expanded="true">
          Solutions
          <i class="fa-solid fa-chevron-down text-xs" aria-hidden="true"></i>
        </a>
        <a href="#" class="text-color-default hover:bg-color-default-hovered flex h-10 items-center gap-2 rounded px-3 text-base font-medium">
          Playground
          <i class="fa-solid fa-chevron-down text-xs" aria-hidden="true"></i>
        </a>
        <a href="#" class="text-color-default hover:bg-color-default-hovered flex h-10 items-center rounded px-3 text-base font-medium">Contact</a>
      </nav>

      <div class="hidden items-center gap-5 lg:flex">
        <div class="flex items-center gap-1" aria-label="Utility actions">
          <button type="button" class="text-color-default hover:bg-color-default-hovered flex size-8 items-center justify-center rounded" aria-label="Notifications">
            <i class="fa-regular fa-bell text-lg" aria-hidden="true"></i>
          </button>
          <button type="button" class="text-color-default hover:bg-color-default-hovered flex size-8 items-center justify-center rounded" aria-label="Account">
            <i class="fa-regular fa-user text-lg" aria-hidden="true"></i>
          </button>
          <button type="button" class="text-color-default hover:bg-color-default-hovered flex size-8 items-center justify-center rounded" aria-label="Saved items">
            <i class="fa-regular fa-star text-lg" aria-hidden="true"></i>
          </button>
          <button type="button" class="text-color-default hover:bg-color-default-hovered flex size-8 items-center justify-center rounded" aria-label="Recent activity">
            <i class="fa-regular fa-clock text-lg" aria-hidden="true"></i>
          </button>
        </div>
        <plus-divider orientation="vertical" class="h-10"></plus-divider>
        <div class="flex items-center gap-3">
          <plus-button kind="text" status="default" size="md">Sign In</plus-button>
          <plus-button kind="filled" status="primary" size="md" suffix="true">
            Get all-access
            <i class="fa-solid fa-arrow-right text-sm" slot="suffix" aria-hidden="true"></i>
          </plus-button>
        </div>
      </div>

      <button type="button" class="text-color-default flex size-10 items-center justify-center rounded lg:hidden" aria-label="Open menu">
        <i class="fa-solid fa-bars text-xl" aria-hidden="true"></i>
      </button>
    </div>
  </header>

  <div id="headers-6-solutions-menu" class="bg-color-modal max-h-none overflow-hidden opacity-100 lg:max-h-0 lg:opacity-0 lg:group-hover:max-h-none lg:group-hover:opacity-100 lg:group-focus-within:max-h-none lg:group-focus-within:opacity-100" role="region" aria-label="Solutions mega menu">
    <div class="grid gap-8 p-6 sm:p-8 lg:grid-cols-5 lg:gap-8 lg:p-10">
      <nav class="flex flex-col gap-4" aria-label="About solutions">
        <p class="text-color-default text-sm font-medium">About</p>
        <a href="#" class="bg-color-default-default text-color-default rounded p-3">
          <span class="block text-base font-medium sm:text-lg">Mission</span>
          <span class="text-color-caption mt-1 block text-sm sm:text-base">Simplifying education through smart technology.</span>
        </a>
        <a href="#" class="text-color-default hover:bg-color-default-hovered rounded p-3">
          <span class="block text-base font-medium sm:text-lg">Vision</span>
          <span class="text-color-caption mt-1 block text-sm sm:text-base">Leading the future of digital education.</span>
        </a>
        <a href="#" class="text-color-default hover:bg-color-default-hovered rounded p-3">
          <span class="block text-base font-medium sm:text-lg">Mission</span>
          <span class="text-color-caption mt-1 block text-sm sm:text-base">Leading the future of digital education.</span>
        </a>
      </nav>

      <nav class="flex flex-col gap-4" aria-label="Company links">
        <p class="text-color-default text-sm font-medium">Company</p>
        <a href="#" class="text-color-default hover:bg-color-default-hovered rounded p-3">
          <span class="flex items-center gap-2 text-base font-medium sm:text-lg">
            Our Story
            <plus-chip invert status="success" size="sm">New</plus-chip>
          </span>
          <span class="text-color-caption mt-1 block text-sm sm:text-base">Built to transform how schools work, together.</span>
        </a>
        <a href="#" class="text-color-default hover:bg-color-default-hovered rounded p-3">
          <span class="block text-base font-medium sm:text-lg">Partners</span>
          <span class="text-color-caption mt-1 block text-sm sm:text-base">Collaboration that drives better education outcomes.</span>
        </a>
        <a href="#" class="text-color-default hover:bg-color-default-hovered rounded p-3">
          <span class="block text-base font-medium sm:text-lg">Partners</span>
          <span class="text-color-caption mt-1 block text-sm sm:text-base">Collaboration that drives better education outcomes.</span>
        </a>
      </nav>

      <figure class="lg:border-color-default flex items-start justify-center lg:border-l lg:pl-8">
        <div class="border-color-default bg-color-default-default relative w-full max-w-xs overflow-hidden rounded border shadow-sm">
          <img src="https://www.plusui.com/images/blocks/headers/header-6-design-system.png" alt="Design system preview card" class="h-full min-h-72 w-full object-cover object-center" />
          <figcaption class="sr-only">Featured design system preview for education products</figcaption>
        </div>
      </figure>

      <nav class="flex flex-col gap-6 lg:col-span-2" aria-label="Solution videos">
        <a href="#" class="text-color-default hover:bg-color-default-hovered flex flex-col gap-4 rounded p-2 sm:flex-row">
          <span class="border-color-default bg-color-default-default block min-h-24 w-full shrink-0 overflow-hidden rounded border sm:w-32">
            <img src="https://www.plusui.com/images/blocks/headers/header-6-featured.png" alt="UI UX case study preview" class="h-full min-h-24 w-full object-cover object-center" />
          </span>
          <span class="flex flex-col justify-center gap-2">
            <span class="block text-base font-medium sm:text-lg">Seamless Student Tracking</span>
            <span class="text-color-caption block text-sm">Track students easily.</span>
            <span class="text-color-primary flex items-center gap-2 text-sm font-medium"><i class="fa-regular fa-circle-play" aria-hidden="true"></i>Watch video</span>
          </span>
        </a>
        <a href="#" class="text-color-default hover:bg-color-default-hovered flex flex-col gap-4 rounded p-2 sm:flex-row">
          <span class="border-color-default bg-color-default-default block min-h-24 w-full shrink-0 overflow-hidden rounded border sm:w-32">
            <img src="https://www.plusui.com/images/blocks/headers/header-6-video-2.png" alt="Design handoff preview" class="h-full min-h-24 w-full object-cover object-center" />
          </span>
          <span class="flex flex-col justify-center gap-2">
            <span class="block text-base font-medium sm:text-lg">Smart Classroom Control</span>
            <span class="text-color-caption block text-sm">Manage classrooms effortlessly.</span>
            <span class="text-color-primary flex items-center gap-2 text-sm font-medium"><i class="fa-regular fa-circle-play" aria-hidden="true"></i>Watch video</span>
          </span>
        </a>
        <a href="#" class="text-color-default hover:bg-color-default-hovered flex flex-col gap-4 rounded p-2 sm:flex-row">
          <span class="border-color-default bg-color-default-default block min-h-24 w-full shrink-0 overflow-hidden rounded border sm:w-32">
            <img src="https://www.plusui.com/images/blocks/headers/header-6-video-3.png" alt="Design system workspace preview" class="h-full min-h-24 w-full object-cover object-center" />
          </span>
          <span class="flex flex-col justify-center gap-2">
            <span class="block text-base font-medium sm:text-lg">Simplified School Operations</span>
            <span class="text-color-caption block text-sm">Make school admin simple.</span>
            <span class="text-color-primary flex items-center gap-2 text-sm font-medium"><i class="fa-regular fa-circle-play" aria-hidden="true"></i>Watch video</span>
          </span>
        </a>
      </nav>
    </div>

    <div class="bg-color-default-default px-6 py-4 text-center sm:px-8 lg:px-10">
      <p class="text-color-default text-sm sm:text-base">Discover how our solutions can support your school — get started in just a few steps.</p>
    </div>
  </div>
</section>

<section class="bg-color-surface flex w-full flex-col overflow-hidden" aria-label="Resources header">
  <header class="border-color-disabled bg-color-modal flex min-h-16 w-full items-center border-b px-6 sm:px-8 lg:px-10">
    <div class="flex w-full items-center justify-between gap-4">
      <a href="#" class="flex size-8 items-center justify-center" aria-label="Plus UI home"><img src="https://www.plusui.com/logo.svg" alt="Plus UI" class="size-6 object-contain" /></a>
      <nav class="hidden flex-1 items-center justify-center gap-1 lg:flex" aria-label="Primary navigation">
        <a href="#" class="text-color-default flex h-9 items-center rounded px-3 text-sm font-medium">Product</a>
        <a href="#headers-7-menu" class="bg-color-default-default text-color-default flex h-9 items-center gap-2 rounded px-3 text-sm font-medium" aria-haspopup="true" aria-expanded="true">Resources<i class="fa-solid fa-chevron-down text-xs" aria-hidden="true"></i></a>
        <a href="#" class="text-color-default flex h-9 items-center rounded px-3 text-sm font-medium">Pricing</a>
        <a href="#" class="text-color-default flex h-9 items-center rounded px-3 text-sm font-medium">Customers</a>
      </nav>
      <div class="hidden items-center gap-2 lg:flex">
        <plus-button kind="text" status="default" size="sm" aria-label="Search"><i class="fa-solid fa-magnifying-glass text-sm" aria-hidden="true"></i></plus-button>
        <plus-button kind="text" status="default" size="sm">Sign in</plus-button>
        <plus-button kind="filled" status="primary" size="sm">Open resources</plus-button>
      </div>
      <plus-button kind="text" status="default" size="sm" class="lg:hidden" aria-label="Open menu"><i class="fa-solid fa-bars text-lg" aria-hidden="true"></i></plus-button>
    </div>
  </header>
  <div id="headers-7-menu" class="bg-color-modal p-6 sm:p-8 lg:p-10" role="region" aria-label="Resources menu">
    <div class="grid gap-6 lg:grid-cols-4">
      <nav class="flex flex-col gap-3" aria-label="Resources links">
        <p class="text-color-caption text-xs font-medium">Resources</p>
        <a href="#" class="bg-color-default-default text-color-default rounded p-3"><span class="block text-sm font-semibold">Guides</span><span class="text-color-caption mt-1 block text-sm">Start with curated patterns and guidance.</span></a>
        <a href="#" class="text-color-default hover:bg-color-default-hovered rounded p-3"><span class="block text-sm font-semibold">Templates</span><span class="text-color-caption mt-1 block text-sm">Compare options without leaving the menu.</span></a>
        <a href="#" class="text-color-default hover:bg-color-default-hovered rounded p-3"><span class="block text-sm font-semibold">Release notes</span><span class="text-color-caption mt-1 block text-sm">Keep common decisions one click away.</span></a>
      </nav>
      <div class="border-color-disabled bg-color-surface rounded border p-5 lg:col-span-2">
        <div class="flex items-start justify-between gap-4">
          <div>
            <p class="text-color-default text-lg font-semibold">Featured resources</p>
            <p class="text-color-caption mt-2 text-sm">A compact menu card for product education, account entry, and conversion paths.</p>
          </div>
          <span class="bg-color-primary-invert-default text-color-primary flex size-10 items-center justify-center rounded"><i class="fa-solid fa-layer-group" aria-hidden="true"></i></span>
        </div>
        <div class="mt-5 grid gap-3 sm:grid-cols-3">
          <div class="bg-color-default-default rounded p-3"><p class="text-color-default text-sm font-medium">Fast setup</p></div>
          <div class="bg-color-default-default rounded p-3"><p class="text-color-default text-sm font-medium">Token styling</p></div>
          <div class="bg-color-default-default rounded p-3"><p class="text-color-default text-sm font-medium">Static state</p></div>
        </div>
      </div>
      <aside class="bg-color-default-default flex flex-col justify-between gap-4 rounded p-5">
        <div>
          <plus-chip status="success" invert size="sm">New</plus-chip>
          <p class="text-color-default mt-4 text-base font-semibold">Need help choosing?</p>
          <p class="text-color-caption mt-2 text-sm">Use this space for a guide, release note, or sales route.</p>
        </div>
        <plus-button kind="filled" status="default" size="sm">Open resources</plus-button>
      </aside>
    </div>
  </div>
</section>

<section class="bg-color-surface flex w-full flex-col overflow-hidden" aria-label="Templates centered header">
  <div class="bg-color-default-default flex w-full items-center justify-center px-6 py-2 text-center sm:px-8 lg:px-10">
    <p class="text-color-caption text-xs font-medium"><i class="fa-solid fa-wand-magic-sparkles" aria-hidden="true"></i> Templates update is available for Plus UI customers.</p>
  </div>
  <header class="border-color-disabled bg-color-modal flex min-h-16 w-full items-center border-b px-6 sm:px-8 lg:px-10">
    <div class="grid w-full grid-cols-2 items-center gap-4 lg:grid-cols-3">
      <nav class="hidden items-center gap-1 lg:flex" aria-label="Left navigation">
        <a href="#" class="text-color-default hover:bg-color-default-hovered flex h-9 items-center rounded px-3 text-sm font-medium">Product</a>
        <a href="#headers-8-menu" class="bg-color-default-default text-color-default flex h-9 items-center gap-2 rounded px-3 text-sm font-medium" aria-haspopup="true" aria-expanded="true">Templates<i class="fa-solid fa-chevron-down text-xs" aria-hidden="true"></i></a>
      </nav>
      <a href="#" class="flex size-8 items-center justify-start lg:mx-auto lg:justify-center" aria-label="Plus UI home"><img src="https://www.plusui.com/logo.svg" alt="Plus UI" class="size-6 object-contain" /></a>
      <div class="flex items-center justify-end gap-2">
        <plus-button kind="text" status="default" size="sm" class="hidden sm:inline-flex">Sign in</plus-button>
        <plus-button kind="filled" status="primary" size="sm" class="hidden sm:inline-flex">Browse templates</plus-button>
        <plus-button kind="text" status="default" size="sm" aria-label="Open menu"><i class="fa-solid fa-bars text-lg" aria-hidden="true"></i></plus-button>
      </div>
    </div>
  </header>
  <div id="headers-8-menu" class="bg-color-modal p-6 sm:p-8 lg:p-10" role="region" aria-label="Templates card menu">
    <div class="grid gap-4 md:grid-cols-3">
      <a href="#" class="border-color-disabled bg-color-surface rounded border p-5"
        ><span class="bg-color-primary-invert-default text-color-primary flex size-10 items-center justify-center rounded"><i class="fa-solid fa-wand-magic-sparkles" aria-hidden="true"></i></span><span class="text-color-default mt-4 block text-base font-semibold">Landing pages</span><span class="text-color-caption mt-2 block text-sm">A focused path for teams comparing reusable page sections.</span></a
      >
      <a href="#" class="border-color-disabled bg-color-surface rounded border p-5"
        ><span class="bg-color-info-invert-default text-color-info flex size-10 items-center justify-center rounded"><i class="fa-solid fa-table-cells-large" aria-hidden="true"></i></span><span class="text-color-default mt-4 block text-base font-semibold">Dashboards</span><span class="text-color-caption mt-2 block text-sm">Preview practical options without opening a separate page.</span></a
      >
      <a href="#" class="border-color-disabled bg-color-surface rounded border p-5"
        ><span class="bg-color-success-invert-default text-color-success flex size-10 items-center justify-center rounded"><i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i></span><span class="text-color-default mt-4 block text-base font-semibold">Forms</span><span class="text-color-caption mt-2 block text-sm">Continue with release notes, guides, or team resources.</span></a
      >
    </div>
  </div>
</section>

<section class="bg-color-surface flex w-full flex-col overflow-hidden" aria-label="Developers documentation header">
  <header class="border-color-disabled bg-color-modal grid gap-4 border-b px-6 py-4 sm:px-8 lg:grid-cols-3 lg:items-center lg:px-10">
    <div class="flex items-center justify-between gap-4">
      <a href="#" class="flex size-8 items-center" aria-label="Plus UI home"><img src="https://www.plusui.com/logo.svg" alt="Plus UI" class="size-6 object-contain" /></a>
      <plus-button kind="text" status="default" size="sm" class="lg:hidden" aria-label="Open menu"><i class="fa-solid fa-bars text-lg" aria-hidden="true"></i></plus-button>
    </div>
    <div class="flex min-w-0 flex-col gap-3 md:flex-row md:items-center">
      <nav class="flex min-w-0 items-center gap-1 overflow-x-auto" aria-label="Documentation navigation">
        <a href="#" class="text-color-default flex h-9 items-center rounded px-3 text-sm font-medium">Overview</a>
        <a href="#headers-9-menu" class="bg-color-default-default text-color-default flex h-9 items-center gap-2 rounded px-3 text-sm font-medium" aria-haspopup="true" aria-expanded="true">Developers<i class="fa-solid fa-chevron-down text-xs" aria-hidden="true"></i></a>
        <a href="#" class="text-color-default flex h-9 items-center rounded px-3 text-sm font-medium">API</a>
      </nav>
      <div class="border-color-disabled bg-color-surface flex min-h-10 min-w-0 flex-1 items-center gap-2 rounded border px-3">
        <i class="fa-solid fa-magnifying-glass text-color-caption text-sm" aria-hidden="true"></i>
        <span class="text-color-placeholder truncate text-sm">Search developers resources</span>
      </div>
    </div>
    <div class="hidden items-center gap-2 lg:flex">
      <plus-chip status="info" invert size="sm">v2.4</plus-chip>
      <plus-button kind="outlined" status="default" size="sm">Read docs</plus-button>
    </div>
  </header>
  <div id="headers-9-menu" class="bg-color-modal grid gap-6 p-6 sm:p-8 lg:grid-cols-4 lg:p-10" role="region" aria-label="Developers documentation menu">
    <nav class="flex flex-col gap-3 lg:col-span-2" aria-label="Developers documentation links">
      <a href="#" class="bg-color-default-default text-color-default rounded p-4"
        ><span class="flex items-center gap-2 text-sm font-semibold"><i class="fa-solid fa-book-open" aria-hidden="true"></i>HTML examples</span><span class="text-color-caption mt-2 block text-sm">Start with the recommended implementation path.</span></a
      >
      <a href="#" class="text-color-default hover:bg-color-default-hovered rounded p-4"><span class="text-sm font-semibold">React patterns</span><span class="text-color-caption mt-2 block text-sm">Review reusable states, tokens, and layout notes.</span></a>
    </nav>
    <aside class="border-color-disabled bg-color-surface rounded border p-5 lg:col-span-2">
      <p class="text-color-default text-base font-semibold">API notes</p>
      <p class="text-color-caption mt-2 text-sm">Use this static panel for release context, code links, or support handoff.</p>
      <div class="mt-5 flex flex-wrap gap-2"><plus-chip status="success" invert size="sm">Stable</plus-chip><plus-chip status="primary" invert size="sm">Updated</plus-chip><plus-chip status="default" size="sm">Docs</plus-chip></div>
    </aside>
  </div>
</section>

<section class="bg-color-surface flex w-full flex-col overflow-hidden" aria-label="Collections app header">
  <header class="border-color-disabled bg-color-modal flex w-full flex-col gap-4 border-b px-6 py-4 sm:px-8 lg:px-10">
    <div class="flex w-full items-center justify-between gap-4">
      <div class="flex items-center gap-3">
        <a href="#" class="flex size-8 items-center" aria-label="Plus UI home"><img src="https://www.plusui.com/logo.svg" alt="Plus UI" class="size-6 object-contain" /></a><plus-chip status="default" size="sm">Collections</plus-chip>
      </div>
      <div class="flex items-center gap-2">
        <plus-button kind="text" status="default" size="sm" aria-label="Notifications"><i class="fa-regular fa-bell text-sm" aria-hidden="true"></i></plus-button>
        <plus-button kind="text" status="default" size="sm" aria-label="Settings"><i class="fa-solid fa-gear text-sm" aria-hidden="true"></i></plus-button>
        <plus-button kind="filled" status="primary" size="sm" class="hidden sm:inline-flex">Explore market</plus-button>
      </div>
    </div>
    <nav class="flex min-w-0 items-center gap-1 overflow-x-auto" aria-label="Workspace modules">
      <a href="#" class="text-color-default flex h-9 items-center rounded px-3 text-sm font-medium">Home</a>
      <a href="#headers-10-menu" class="bg-color-default-default text-color-default flex h-9 items-center gap-2 rounded px-3 text-sm font-medium" aria-current="page">Featured kits</a>
      <a href="#" class="text-color-default flex h-9 items-center rounded px-3 text-sm font-medium">Commerce blocks</a>
      <a href="#" class="text-color-default flex h-9 items-center rounded px-3 text-sm font-medium">Saved items</a>
    </nav>
  </header>
  <div id="headers-10-menu" class="bg-color-modal p-6 sm:p-8 lg:p-10" role="region" aria-label="Collections workspace menu">
    <div class="grid gap-5 lg:grid-cols-3">
      <div class="border-color-disabled bg-color-surface rounded border p-5 lg:col-span-2">
        <div class="flex items-center justify-between gap-3">
          <p class="text-color-default text-lg font-semibold">Collections overview</p>
          <plus-chip status="success" invert size="sm">Active</plus-chip>
        </div>
        <div class="mt-5 grid gap-3 sm:grid-cols-3">
          <div class="bg-color-default-default rounded p-3">
            <p class="text-color-caption text-xs">Open tasks</p>
            <p class="text-color-default text-xl font-semibold">18</p>
          </div>
          <div class="bg-color-default-default rounded p-3">
            <p class="text-color-caption text-xs">Reviews</p>
            <p class="text-color-default text-xl font-semibold">7</p>
          </div>
          <div class="bg-color-default-default rounded p-3">
            <p class="text-color-caption text-xs">Owners</p>
            <p class="text-color-default text-xl font-semibold">4</p>
          </div>
        </div>
      </div>
      <aside class="bg-color-default-default rounded p-5">
        <p class="text-color-default text-base font-semibold">Team shortcut</p>
        <p class="text-color-caption mt-2 text-sm">A compact place for account, upgrade, or member switching actions.</p>
        <plus-button kind="outlined" status="default" size="sm" class="mt-4">Explore market</plus-button>
      </aside>
    </div>
  </div>
</section>