deepakswami88/sparkle-subscriptions-showdown

1class CustomHeader extends HTMLElement {2    connectedCallback() {3        this.attachShadow({ mode: 'open' });4        this.shadowRoot.innerHTML = `5            <style>6                nav {7                    background: white;8                    box-shadow: 0 2px 10px rgba(0,0,0,0.1);9                }10                .nav-link:hover {11                    color: #6366f1;12                }13                .btn-primary {14                    background: #6366f1;15                    transition: all 0.3s ease;16                }17                .btn-primary:hover {18                    background: #4f46e5;19                }20            </style>21            <nav class="py-4 px-6">22                <div class="container mx-auto flex justify-between items-center">23                    <a href="/" class="text-2xl font-bold text-gray-900 flex items-center">24                        <i data-feather="zap" class="text-primary mr-2"></i>25                        SparkleShow26                    </a>27                    28                    <div class="hidden md:flex space-x-8 items-center">29                        <a href="#" class="nav-link text-gray-600 hover:text-primary">Features</a>30                        <a href="#" class="nav-link text-gray-600 hover:text-primary">Pricing</a>31                        <a href="#" class="nav-link text-gray-600 hover:text-primary">About</a>32                        <a href="#" class="px-4 py-2 rounded-lg btn-primary text-white font-medium">Sign In</a>33                    </div>34                    35                    <button class="md:hidden focus:outline-none">36                        <i data-feather="menu"></i>37                    </button>38                </div>39            </nav>40        `;41    }42}43customElements.define('custom-header', CustomHeader);