Header.astro

---
import Navigation from './Navigation.astro';
import MobileMenu from './MobileMenu.astro';
import MobileNav from './MobileNav.astro';
---
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-purple-700 text-white px-4 py-2 rounded-lg z-50 focus:outline-none focus:ring-2 focus:ring-white">
  Skip to main content
</a>

<header class="sticky top-0 bg-gray-900 dark:bg-gray-950 shadow-sm z-30">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex items-center">
        <a href="/" class="flex-shrink-0 flex items-center" aria-label="OSS Communities Homepage">
          <span class="text-xl font-bold bg-gradient-to-r from-purple-700 to-pink-700 bg-clip-text text-transparent">OSS Communities</span>
        </a>
      </div>
      <Navigation />
      <MobileMenu />
    </div>
  </div>
  <MobileNav />
</header>