Mega Menu With Featured

<nav class="ws-mega-menu border-b border-[var(--ws-mega-menu-border)] bg-[var(--ws-mega-menu-bg)]" aria-label="Mega menu with featured content">
  <div class="mx-auto max-w-7xl px-6">
    <div class="grid grid-cols-2 gap-8 py-8 lg:grid-cols-4">
      <!-- Products -->
      <div>
        <h3 class="text-xs font-semibold uppercase tracking-wider text-[var(--ws-mega-menu-text-soft)]">Products</h3>
        <ul class="mt-4 space-y-3" role="list">
          <li><a href="#" class="text-sm text-[var(--ws-mega-menu-text)] transition hover:text-[var(--ws-mega-menu-accent)]">Analytics</a></li>
          <li><a href="#" class="text-sm text-[var(--ws-mega-menu-text)] transition hover:text-[var(--ws-mega-menu-accent)]">Automation</a></li>
          <li><a href="#" class="text-sm text-[var(--ws-mega-menu-text)] transition hover:text-[var(--ws-mega-menu-accent)]">Commerce</a></li>
          <li><a href="#" class="text-sm text-[var(--ws-mega-menu-text)] transition hover:text-[var(--ws-mega-menu-accent)]">Integrations</a></li>
        </ul>
      </div>

      <!-- Solutions -->
      <div>
        <h3 class="text-xs font-semibold uppercase tracking-wider text-[var(--ws-mega-menu-text-soft)]">Solutions</h3>
        <ul class="mt-4 space-y-3" role="list">
          <li><a href="#" class="text-sm text-[var(--ws-mega-menu-text)] transition hover:text-[var(--ws-mega-menu-accent)]">For Startups</a></li>
          <li><a href="#" class="text-sm text-[var(--ws-mega-menu-text)] transition hover:text-[var(--ws-mega-menu-accent)]">For Enterprise</a></li>
          <li><a href="#" class="text-sm text-[var(--ws-mega-menu-text)] transition hover:text-[var(--ws-mega-menu-accent)]">For Agencies</a></li>
        </ul>
      </div>

      <!-- Resources -->
      <div>
        <h3 class="text-xs font-semibold uppercase tracking-wider text-[var(--ws-mega-menu-text-soft)]">Resources</h3>
        <ul class="mt-4 space-y-3" role="list">
          <li><a href="#" class="text-sm text-[var(--ws-mega-menu-text)] transition hover:text-[var(--ws-mega-menu-accent)]">Documentation</a></li>
          <li><a href="#" class="text-sm text-[var(--ws-mega-menu-text)] transition hover:text-[var(--ws-mega-menu-accent)]">API Reference</a></li>
          <li><a href="#" class="text-sm text-[var(--ws-mega-menu-text)] transition hover:text-[var(--ws-mega-menu-accent)]">Community</a></li>
        </ul>
      </div>

      <!-- Featured card -->
      <div class="rounded-xl border border-[var(--ws-mega-menu-border)] bg-[var(--ws-mega-menu-accent)]/5 p-4">
        <div class="flex aspect-[16/9] w-full items-center justify-center rounded-lg bg-gradient-to-br from-indigo-100 to-indigo-200 dark:from-indigo-900 dark:to-indigo-800" aria-label="Featured content image">
          <svg class="h-8 w-8 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/></svg>
        </div>
        <p class="mt-3 text-sm font-semibold text-[var(--ws-mega-menu-text)]">What's New in v3.0</p>
        <p class="mt-1 text-xs text-[var(--ws-mega-menu-text-soft)]">Explore the latest features including AI-powered analytics and real-time collaboration.</p>
        <a href="#" class="mt-3 inline-flex text-sm font-medium text-[var(--ws-mega-menu-accent)] transition hover:opacity-80">Learn more &rarr;</a>
      </div>
    </div>
  </div>
</nav>