components/navbar.js

class CustomNavbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .navbar {
                    transition: all 0.3s ease;
                }
                .navbar.scrolled {
                    background-color: rgba(255, 255, 255, 0.95);
                    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
                }
                .mobile-menu {
                    max-height: 0;
                    overflow: hidden;
                    transition: max-height 0.3s ease-out;
                }
                .mobile-menu.open {
                    max-height: 500px;
                }
                @media (min-width: 1024px) {
                    .mobile-menu {
                        max-height: none !important;
                    }
                }
            </style>
            <nav class="navbar fixed w-full z-50 top-0">
                <div class="container mx-auto px-6 py-4">
                    <div class="flex items-center justify-between">
                        <!-- Logo -->
                        <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">PixelPulse</span>
                        </a>
                        
                        <!-- Desktop Menu -->
                        <div class="hidden lg:flex items-center space-x-10">
                            <a href="#work" class="text-dark hover:text-primary transition-colors font-medium">Work</a>
                            <a href="#services" class="text-dark hover:text-primary transition-colors font-medium">Services</a>
                            <a href="#about" class="text-dark hover:text-primary transition-colors font-medium">About</a>
                            <a href="#contact" class="text-dark hover:text-primary transition-colors font-medium">Contact</a>
                            <a href="#contact" class="px-6 py-2 bg-gradient-to-r from-primary to-secondary text-white rounded-full font-medium hover:opacity-90 transition-opacity">Get a Quote</a>
                        </div>
                        
                        <!-- Mobile Menu Button -->
                        <button class="lg:hidden focus:outline-none mobile-menu-button">
                            <i data-feather="menu" class="w-6 h-