Spaces:
Running
Running
| class CustomFooter extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| .footer-link:hover { | |
| color: #3B82F6; | |
| } | |
| </style> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">SkyWork</h3> | |
| <p class="text-gray-400"> | |
| The all-in-one platform for modern teams to collaborate and get work done faster. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Product</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="footer-link text-gray-400 hover:text-blue-400 transition">Features</a></li> | |
| <li><a href="#" class="footer-link text-gray-400 hover:text-blue-400 transition">Pricing</a></li> | |
| <li><a href="#" class="footer-link text-gray-400 hover:text-blue-400 transition">API</a></li> | |
| <li><a href="#" class="footer-link text-gray-400 hover:text-blue-400 transition">Integrations</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="footer-link text-gray-400 hover:text-blue-400 transition">About</a></li> | |
| <li><a href="#" class="footer-link text-gray-400 hover:text-blue-400 transition">Careers</a></li> | |
| <li><a href="#" class="footer-link text-gray-400 hover:text-blue-400 transition">Blog</a></li> | |
| <li><a href="#" class="footer-link text-gray-400 hover:text-blue-400 transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Connect</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-blue-400 transition"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-blue-400 transition"> | |
| <i data-feather="facebook"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-blue-400 transition"> | |
| <i data-feather="linkedin"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-blue-400 transition"> | |
| <i data-feather="github"></i> | |
| </a> | |
| </div> | |
| <div class="mt-6"> | |
| <p class="text-gray-400 text-sm"> | |
| © 2023 SkyWork. All rights reserved. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| `; | |
| } | |
| } | |
| customElements.define('custom-footer', CustomFooter); |