components/footer.js

class CustomFooter extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .footer-link:hover {
          color: #4f46e5;
        }
      </style>
      <footer class="bg-gray-50 border-t border-gray-200">
        <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
          <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <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 hover:text-indigo-600">Documentation</a></li>
                <li><a href="/tutorials" class="footer-link text-gray-600 hover:text-indigo-600">Tutorials</a></li>
                <li><a href="/api" class="footer-link text-gray-600 hover:text-indigo-600">API Reference</a></li>
              </ul>
            </div>
            <div>
              <h3 class="text-sm font-semibold text-gray-500 tracking-wider uppercase mb-4">Community</h3>
              <ul class="space-y-2">
                <li><a href="/discord" class="footer-link text-gray-600 hover:text-indigo-600">Discord</a></li>
                <li><a href="/twitter" class="footer-link text-gray-600 hover:text-indigo-600">Twitter</a></li>
                <li><a href="/blog" class="footer-link text-gray-600 hover:text-indigo-600">Blog</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 hover:text-indigo-600">Privacy Policy</a></li>
                <li><a href="/terms" class="footer-link text-gray-600 hover:text-indigo-600">Terms of Service</a></li>
                <li><a href="/license" class="footer-link text-gray-600 hover:text-indigo-600">License</a></li>
              </ul>
            </div>
          </div>
          <div class="mt-8 pt-8 border-t border-gray-200 text-center">
            <p class="text-gray-500 text-sm">© ${new Date().getFullYear()} LocalAI. All rights reserved.</p>
          </div>
        </div>
      </footer>
    `;
  }
}
customElements.define('custom-footer', CustomFooter);