components/footer.js

class CustomFooter extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .footer-link:hover {
          color: #3b82f6;
        }
      </style>
      <footer class="bg-gray-50 border-t border-gray-200 py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
            <div>
              <h3 class="text-sm font-semibold text-gray-500 tracking-wider uppercase mb-4">Product</h3>
              <ul class="space-y-2">
                <li><a href="/features" class="footer-link text-gray-600 transition">Features</a></li>
                <li><a href="/pricing" class="footer-link text-gray-600 transition">Pricing</a></li>
                <li><a href="/integrations" class="footer-link text-gray-600 transition">Integrations</a></li>
                <li><a href="/changelog" class="footer-link text-gray-600 transition">Changelog</a></li>
              </ul>
            </div>
            <div>
              <h3 class="text-sm font-semibold text-gray-500 tracking-wider uppercase mb-4">Company</h3>
              <ul class="space-y-2">
                <li><a href="/about" class="footer-link text-gray-600 transition">About</a></li>
                <li><a href="/blog" class="footer-link text-gray-600 transition">Blog</a></li>
                <li><a href="/careers" class="footer-link text-gray-600 transition">Careers</a></li>
                <li><a href="/press" class="footer-link text-gray-600 transition">Press</a></li>
              </ul>
            </div>
            <div>
              <h3 class="text-sm font-semibold text-gray-500 tracking-wider uppercase mb-4">Resources</h3>
              <ul class="space-y-2">
                <li><a href="/docs" class="footer-link text-gray-600 transition">Documentation</a></li>
                <li><a href="/community" class="footer-link text-gray-600 transition">Community</a></li>
                <li><a href="/support" class="footer-link text-gray-600 transition">Support</a></li>
                <li><a href="/status" class="footer-link text-gray-600 transition">Status</a></li>
              </ul>
            </div>
            <div>
              <h3 class="text-sm font-semibold text-gray-500 tracking-wider uppercase mb-4">Legal</h3>
              <ul class="space-y-2">
                <li><a href="/privacy" class="footer-link text-gray-600 transition">Privacy</a></li>
                <li><a href="/terms" class="footer-link text-gray-600 transition">Terms</a></li>
                <li><a href="/security" class="footer-link text-gray-600 transition">Security</a></li>
              </ul>
            </div>
          </div>
          <div class="mt-12 pt-8 border-t border-gray-200 flex flex-col md:flex-row justify-between items-center">
            <div class="flex space-x-6 mb-4 md:mb-0">
              <a href="https://twitter.com" class="text-gray-400 hover:text-primary-500 transition">
                <i data-feather="twitter"></i>
              </a>
              <a href="https://github.com" class="text-gray-400 hover:text-primary-500 transition">
                <i data-feather="github"></i>
              </a>
              <a href="https://linkedin.com" class="text-gray-400 hover:text-primary-500 transition">
                <i data-feather="linkedin"></i>
              </a>
            </div>
            <p class="text-gray-500 text-sm">© 2023 LinearLite. All rights reserved.</p>
          </div>
        </div>
      </footer>
    `;
  }
}
customElements.define('custom-footer', CustomFooter);