bossman21/cryptosight-institutional-intelligence

1class CustomFooter extends HTMLElement {2  connectedCallback() {3    this.attachShadow({ mode: 'open' });4    this.shadowRoot.innerHTML = `5      <style>6        :host {7          display: block;8          width: 100%;9          background-color: rgba(17, 24, 39, 0.8);10          border-top: 1px solid rgba(255, 255, 255, 0.05);11        }12        13        .container {14          max-width: 1280px;15          margin: 0 auto;16          padding: 4rem 1.5rem 2rem;17        }18        19        .footer-content {20          display: flex;21          flex-direction: column;22          gap: 3rem;23        }24        25        .footer-top {26          display: flex;27          flex-wrap: wrap;28          justify-content: space-between;29          gap: 2rem;30        }31        32        .footer-brand {33          max-width: 300px;34        }35        36        .logo {37          font-size: 1.25rem;38          font-weight: 700;39          background: linear-gradient(90deg, #7C3AED 0%, #EC4899 100%);40          -webkit-background-clip: text;41          -webkit-text-fill-color: transparent;42          margin-bottom: 1rem;43          display: inline-block;44        }45        46        .description {47          color: rgba(255, 255, 255, 0.6);48          line-height: 1.6;49        }50        51        .footer-links {52          display: flex;53          flex-wrap: wrap;54          gap: 3rem;55        }56        57        .link-group {58          min-width: 150px;59        }60        61        .link-title {62          font-weight: 600;63          margin-bottom: 1rem;64          color: white;65        }66        67        .link-list {68          display: flex;69          flex-direction: column;70          gap: 0.75rem;71        }72        73        .link-item {74          color: rgba(255, 255, 255, 0.6);75          transition: color 0.2s;76        }77        78        .link-item:hover {79          color: white;80        }81        82        .footer-bottom {83          border-top: 1px solid rgba(255, 255, 255, 0.05);84          padding-top: 2rem;85          display: flex;86          flex-wrap: wrap;87          justify-content: space-between;88          gap: 1rem;89        }90        91        .copyright {92          color: rgba(255, 255, 255, 0.4);93          font-size: 0.875rem;94        }95        96        .legal-links {97          display: flex;98          gap: 1.5rem;99        }100        101        .legal-link {102          color: rgba(255, 255, 255, 0.4);103          font-size: 0.875rem;104          transition: color 0.2s;105        }106        107        .legal-link:hover {108          color: white;109        }110        111        .disclaimer {112          color: rgba(255, 255, 255, 0.3);113          font-size: 0.75rem;114          margin-top: 0.5rem;115        }116      </style>117      118      <div class="container">119        <div class="footer-content">120          <div class="footer-top">121            <div class="footer-brand">122              <div class="logo">CryptoSight</div>123              <p class="description">124                Institutional-grade crypto intelligence for traders, analysts, and funds.125              </p>126            </div>127            128            <div class="footer-links">129              <div class="link-group">130                <h4 class="link-title">Product</h4>131                <div class="link-list">132                  <a href="#" class="link-item">Features</a>133                  <a href="#" class="link-item">Pricing</a>134                  <a href="#" class="link-item">API</a>135                  <a href="#" class="link-item">Demo</a>136                </div>137              </div>138              139              <div class="link-group">140                <h4 class="link-title">Resources</h4>141                <div class="link-list">142                  <a href="#" class="link-item">Documentation</a>143                  <a href="#" class="link-item">Research</a>144                  <a href="#" class="link-item">Blog</a>145                  <a href="#" class="link-item">Support</a>146                </div>147              </div>148              149              <div class="link-group">150                <h4 class="link-title">Company</h4>151                <div class="link-list">152                  <a href="#" class="link-item">About</a>153                  <a href="#" class="link-item">Careers</a>154                  <a href="#" class="link-item">Contact</a>155                  <a href="#" class="link-item">Press</a>156                </div>157              </div>158            </div>159          </div>160          161          <div class="footer-bottom">162            <div>163              <p class="copyright">© 2023 CryptoSight. All rights reserved.</p>164              <p class="disclaimer">Not financial advice. Data provided for informational purposes only.</p>165            </div>166            167            <div class="legal-links">168              <a href="#" class="legal-link">Privacy Policy</a>169              <a href="#" class="legal-link">Terms of Service</a>170              <a href="#" class="legal-link">Cookie Policy</a>171            </div>172          </div>173        </div>174      </div>175    `;176  }177}178 179customElements.define('custom-footer', CustomFooter);