bossman21/cryptosight-institutional-intelligence

1class CustomNavbar extends HTMLElement {2  connectedCallback() {3    this.attachShadow({ mode: 'open' });4    this.shadowRoot.innerHTML = `5      <style>6        :host {7          display: block;8          width: 100%;9          position: fixed;10          top: 0;11          left: 0;12          z-index: 50;13          background-color: rgba(17, 24, 39, 0.8);14          backdrop-filter: blur(10px);15          border-bottom: 1px solid rgba(255, 255, 255, 0.05);16        }17        18        .container {19          max-width: 1280px;20          margin: 0 auto;21          padding: 0 1.5rem;22          height: 5rem;23          display: flex;24          align-items: center;25          justify-content: space-between;26        }27        28        .logo {29          font-size: 1.25rem;30          font-weight: 700;31          background: linear-gradient(90deg, #7C3AED 0%, #EC4899 100%);32          -webkit-background-clip: text;33          -webkit-text-fill-color: transparent;34          display: flex;35          align-items: center;36        }37        38        .nav-links {39          display: flex;40          gap: 2rem;41        }42        43        .nav-link {44          color: rgba(255, 255, 255, 0.9);45          font-weight: 500;46          transition: color 0.2s;47          position: relative;48        }49        50        .nav-link:hover {51          color: white;52        }53        54        .nav-link::after {55          content: '';56          position: absolute;57          bottom: -2px;58          left: 0;59          width: 0;60          height: 2px;61          background: linear-gradient(90deg, #7C3AED 0%, #EC4899 100%);62          transition: width 0.3s;63        }64        65        .nav-link:hover::after {66          width: 100%;67        }68        69        .auth-buttons {70          display: flex;71          gap: 1rem;72        }73        74        .sign-in {75          padding: 0.5rem 1.5rem;76          border: 1px solid rgba(255, 255, 255, 0.1);77          border-radius: 0.5rem;78          transition: all 0.2s;79        }80        81        .sign-in:hover {82          background-color: rgba(255, 255, 255, 0.05);83        }84        85        .get-started {86          padding: 0.5rem 1.5rem;87          border-radius: 0.5rem;88          background: linear-gradient(90deg, #7C3AED 0%, #EC4899 100%);89          transition: all 0.2s;90        }91        92        .get-started:hover {93          opacity: 0.9;94        }95        96        @media (max-width: 1024px) {97          .nav-links {98            display: none;99          }100        }101      </style>102      103      <div class="container">104        <a href="/" class="logo">105          CryptoSight106        </a>107        108        <div class="nav-links">109          <a href="#" class="nav-link">Features</a>110          <a href="#" class="nav-link">Intelligence</a>111          <a href="#" class="nav-link">Reports</a>112          <a href="#" class="nav-link">Pricing</a>113        </div>114        115        <div class="auth-buttons">116          <a href="#" class="sign-in">Sign In</a>117          <a href="#" class="get-started">Get Started</a>118        </div>119      </div>120    `;121  }122}123 124customElements.define('custom-navbar', CustomNavbar);