Delete components/navbar.js

components/navbar.js

@@ -1,171 +0,0 @@
-class Navbar extends HTMLElement {
-    constructor() {
-        super();
-    }
-
-    connectedCallback() {
-        this.attachShadow({ mode: 'open' });
-        
-        // Styles are internal to Shadow DOM for encapsulation.
-        // We mimic Tailwind's utility classes with standard CSS.
-        const styles = `
-            <style>
-                @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
-                
-                :host {
-                    display: block;
-                    position: fixed;
-                    top: 0;
-                    left: 0;
-                    right: 0;
-                    z-index: 50;
-                    background: rgba(255, 255, 255, 0.85);
-                    backdrop-filter: blur(12px);
-                    -webkit-backdrop-filter: blur(12px);
-                    border-bottom: 1px solid rgba(0,0,0,0.05);
-                    height: 70px;
-                    display: flex;
-                    align-items: center;
-                }
-
-                .container {
-                    max-width: 1280px;
-                    width: 100%;
-                    margin: 0 auto;
-                    padding: 0 1.5rem;
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                }
-
-                .logo {
-                    font-family: 'Inter', sans-serif;
-                    font-weight: 800;
-                    font-size: 1.5rem;
-                    color: #0f172a;
-                    text-decoration: none;
-                    display: flex;
-                    align-items: center;
-                    gap: 0.5rem;
-                }
-
-                .logo span {
-                    color: #4f46e5; /* Primary Color */
-                }
-
-                .nav-links {
-                    display: flex;
-                    gap: 2rem;
-                    list-style: none;
-                    margin: 0;
-                    padding: 0;
-                }
-
-                .nav-links a {
-                    text-decoration: none;
-                    color: #475569;
-                    font-family: 'Inter', sans-serif;
-                    font-weight: 500;
-                    font-size: 0.95rem;
-                    transition: color 0.2s;
-                }
-
-                .nav-links a:hover {
-                    color: #4f46e5;
-                }
-
-                .btn-primary {
-                    background-color: #4f46e5;
-                    color: white;
-                    padding: 0.6rem 1.25rem;
-                    border-radius: 0.5rem;
-                    text-decoration: none;
-                    font-family: 'Inter', sans-serif;
-                    font-weight: 600;
-                    font-size: 0.9rem;
-                    transition: background-color 0.2s;
-                    display: inline-flex;
-                    align-items: center;
-                    gap: 0.5rem;
-                }
-
-                .btn-primary:hover {
-                    background-color: #4338ca;
-                }
-
-                .menu-toggle {
-                    display: none;
-                    background: none;
-                    border: none;
-                    cursor: pointer;
-                    color: #334155;
-                }
-
-                @media (max-width: 768px) {
-                    .nav-links {
-                        display: none;
-                        position: absolute;
-                        top: 70px;
-                        left: 0;
-                        right: 0;
-                        background: white;
-                        flex-direction: column;
-                        padding: 2rem;
-                        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-                        text-align: center;
-                    }
-
-                    .nav-links.active {
-                        display: flex;
-                    }
-
-                    .menu-toggle {
-                        display: block;
-                    }
-                    
-                    .desktop-cta {
-                        display: none;
-                    }
-                }
-            </style>
-        `;
-
-        this.shadowRoot.innerHTML = `
-            ${styles}
-            <nav class="container">
-                <a href="#" class="logo">
-                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#4f46e5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"></polygon></svg>
-                    Nebula<span>Nexus</span>
-                </a>
-                
-                <button class="menu-toggle">
-                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                </button>
-
-                <ul class="nav-links">
-                    <li><a href="#">Features</a></li>
-                    <li><a href="#">Solutions</a></li>
-                    <li><a href="#">Resources</a></li>
-                    <li><a href="#">Pricing</a></li>
-                </ul>
-
-                <div class="desktop-cta">
-                    <a href="#" class="btn-primary">
-                        Get Started 
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
-                    </a>
-                </div>
-            </nav>
-        `;
-
-        // Mobile Menu Logic
-        const toggleBtn = this.shadowRoot.querySelector('.menu-toggle');
-        const navLinks = this.shadowRoot.querySelector('.nav-links');
-
-        toggleBtn.addEventListener('click', () => {
-            navLinks.classList.toggle('active');
-        });
-    }
-}
-
-customElements.define('app-navbar', Navbar);