components/navbar.js

class CustomNavbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    width: 100%;
                    position: fixed;
                    top: 0;
                    left: 0;
                    z-index: 50;
                    transition: all 0.3s ease;
                }
                
                .scrolled {
                    background-color: black;
                    box-shadow: 0 4px 6px -1px rgba(255, 255, 255, 0.1), 0 2px 4px -1px rgba(255, 255, 255, 0.06);
}
                
                .nav-link {
                    position: relative;
                }
                
                .nav-link::after {
                    content: '';
                    position: absolute;
                    width: 0;
                    height: 2px;
                    bottom: -2px;
                    left: 0;
                    background-color: currentColor;
                    transition: width 0.3s ease;
                }
                
                .nav-link:hover::after {
                    width: 100%;
                }
                
                .mobile-menu {
                    transition: all 0.3s ease;
                    transform-origin: top;
                }
            </style>
            
            <nav class="py-4 px-6 transition-all duration-300">
                <div class="container mx-auto flex justify-between items-center">
                    <div class="flex items-center">
                        <a href="/" class="flex items-center">
                            <span class="text-2xl font-bold text-white bg-black p-2 rounded-lg">BizElegance</span>
</a>
                    </div>
                    
                    <div class="hidden md:flex items-center space-x-8">
                        <a href="#features" class="nav-link text-gray-300 hover:text-white font-medium">Features</a>
                        <a href="#solutions" class="nav-link text-gray-300 hover:text-white font-medium">Solutions</a>
                        <a href="#pricing" class="nav-link text-gray-300 hover:text-white font-medium">Pricing</a>
                        <a href="#resources" class="nav-link text-gray-300 hover:text-white font-medium">Resources</a>
                        <a href="#contact" class="nav-link text-gray-300 hover:text-white font-medium">Contact</a>
                        <a href="cv.html" class="nav-link text-gray-300 hover:text-white font-medium">CV</a>
</div>
                    
                    <div class="hidden md:flex items-center space-x-4">
                        <a href="#" class="text-white hover:text-gray-300 font-medium">Log In</a>
                        <a href="#" class="bg-white hover:bg-gray-200 text-black font-medium rounded-lg px-5 py-2.5 transition-all">
Get Started
                        </a>
                    </div>
                    
                    <button id="mobile-menu-button" class="md:hidden text-gray-700 focus:outline-none">
                        <i data-feather="menu" class="w-6 h-6"></i>
                    </button>
                </div>
                
                <div id="mobile-menu" class="hidden flex-col items-center space-y-4 py-6 px-6 mt-4 bg-white rounded-lg shadow-lg md:hidden">
                    <a href="#features" class="w-full text-center py-2 text-gray-300 hover:text-white font-medium">Features</a>
                    <a href="#solutions" class="w-full text-center py-2 text-gray-300 hover:text-white font-medium">Solutions</a>
                    <a href="#pricing" class="w-full text-center py-2 text-gray-300 hover:text-white font-medium">Pricing</a>
                    <a href="#resources" class="w-full text-center py-2 text-gray-300 hover:text-white font-medium">Resources</a>
                    <a href="#contact" class="w-full text-center py-2 text-gray-300 hover:text-white font-medium">Contact</a>
                    <a href="cv.html" class="w-full text-center py-2 text-gray-300 hover:text-white font-medium">CV</a>
                    <div class="w-full border-t border-gray-700 pt-4 flex flex-col space-y-4">
                        <a href="#" class="w-full text-center py-2 text-white font-medium">Log In</a>
                        <a href="#" class="w-full text-center py-2 bg-white text-black font-medium rounded-lg px-5 py-2.5 transition-all">
Get Started
                        </a>
                    </div>
                </div>
            </nav>
            
            <script>
                feather.replace();
                
                const mobileMenuButton = this.shadowRoot.getElementById('mobile-menu-button');
                const mobileMenu = this.shadowRoot.getElementById('mobile-menu');
                
                mobileMenuButton.addEventListener('click', () => {
                    mobileMenu.classList.toggle('hidden');
                    mobileMenu.classList.toggle('flex');
                    
                    const icon = mobileMenuButton.querySelector('i');
                    if (mobileMenu.classList.contains('hidden')) {
                        icon.setAttribute('data-feather', 'menu');
                    } else {
                        icon.setAttribute('data-feather', 'x');
                    }
                    feather.replace();
                });
                
                // Change navbar style on scroll
                window.addEventListener('scroll', () => {
                    const nav = this.shadowRoot.querySelector('nav');
                    if (window.scrollY > 10) {
                        nav.classList.add('scrolled');
                    } else {
                        nav.classList.remove('scrolled');
                    }
                });
            </script>
        `;
    }
}

customElements.define('custom-navbar', CustomNavbar);