| class CustomHeader extends HTMLElement { |
| connectedCallback() { |
| this.attachShadow({ mode: 'open' }); |
| this.shadowRoot.innerHTML = ` |
| <style> |
| nav { |
| background: rgba(17, 24, 39, 0.8); |
| backdrop-filter: blur(10px); |
| } |
| .nav-link { |
| transition: all 0.3s ease; |
| } |
| .nav-link:hover { |
| color: #3b82f6; |
| transform: translateY(-2px); |
| } |
| </style> |
| <header class="fixed w-full z-50"> |
| <nav class="border-b border-gray-800"> |
| <div class="container mx-auto px-4 py-4 flex items-center justify-between"> |
| <a href="/" class="flex items-center"> |
| <span class="text-2xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">HeroForge</span> |
| </a> |
| |
| <div class="hidden md:flex items-center space-x-8"> |
| <a href="/" class="nav-link text-white">Home</a> |
| <a href="/examples.html" class="nav-link text-gray-400 hover:text-white">Examples</a> |
| <a href="/pricing.html" class="nav-link text-gray-400 hover:text-white">Pricing</a> |
| <a href="/about.html" class="nav-link text-gray-400 hover:text-white">About</a> |
| <a href="#" class="px-4 py-2 rounded-full bg-gradient-to-r from-primary to-secondary font-medium">Try Now</a> |
| </div> |
| |
| <button class="md:hidden text-white"> |
| <i data-feather="menu"></i> |
| </button> |
| </div> |
| </nav> |
| </header> |
| `; |
| } |
| } |
| customElements.define('custom-header', CustomHeader); |
