| class CustomFooter extends HTMLElement { |
| connectedCallback() { |
| this.attachShadow({ mode: 'open' }); |
| this.shadowRoot.innerHTML = ` |
| <style> |
| .footer-link:hover { |
| color: #38bdf8; |
| transform: translateX(4px); |
| } |
| </style> |
| <footer class="bg-gray-900 border-t border-gray-800"> |
| <div class="container mx-auto px-4 py-12"> |
| <div class="grid md:grid-cols-4 gap-12"> |
| <div> |
| <div class="flex items-center gap-2 mb-6"> |
| <div class="w-8 h-8 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-lg flex items-center justify-center"> |
| <span class="text-white font-bold text-xs">PD</span> |
| </div> |
| <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-blue-500">PHANTOM DIGITAL</span> |
| </div> |
| <p class="text-gray-400 mb-6"> |
| Crafting digital experiences that captivate and convert. |
| </p> |
| <div class="flex gap-4"> |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-cyan-500/10 hover:text-cyan-400 transition"> |
| <i data-feather="twitter"></i> |
| </a> |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-cyan-500/10 hover:text-cyan-400 transition"> |
| <i data-feather="linkedin"></i> |
| </a> |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-cyan-500/10 hover:text-cyan-400 transition"> |
| <i data-feather="instagram"></i> |
| </a> |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-cyan-500/10 hover:text-cyan-400 transition"> |
| <i data-feather="github"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-semibold mb-6">Services</h3> |
| <ul class="space-y-3"> |
| <li><a href="#" class="footer-link text-gray-400 hover:text-cyan-400 transition flex items-center gap-2"> |
| <i data-feather="chevron-right" class="w-4 h-4"></i> Web Development |
| </a></li> |
| <li><a href="#" class="footer-link text-gray-400 hover:text-cyan-400 transition flex items-center gap-2"> |
| <i data-feather="chevron-right" class="w-4 h-4"></i> Mobile Apps |
| </a></li> |
| <li><a href="#" class="footer-link text-gray-400 hover:text-cyan-400 transition flex items-center gap-2"> |
| <i data-feather="chevron-right" class="w-4 h-4"></i> UI/UX Design |
| </a></li> |
| <li><a href="#" class="footer-link text-gray-400 hover:text-cyan-400 transition flex items-center gap-2"> |
| <i data-feather="chevron-right" class="w-4 h-4"></i> Digital Strategy |
| </a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-semibold mb-6">Company</h3> |
| <ul class="space-y-3"> |
| <li><a href="#" class="footer-link text-gray-400 hover:text-cyan-400 transition flex items-center gap-2"> |
| <i data-feather="chevron-right" class="w-4 h-4"></i> About Us |
| </a></li> |
| <li><a href="#" class="footer-link text-gray-400 hover:text-cyan-400 transition flex items-center gap-2"> |
| <i data-feather="chevron-right" class="w-4 h-4"></i> Careers |
| </a></li> |
| <li><a href="#" class="footer-link text-gray-400 hover:text-cyan-400 transition flex items-center gap-2"> |
| <i data-feather="chevron-right" class="w-4 h-4"></i> Blog |
| </a></li> |
| <li><a href="#" class="footer-link text-gray-400 hover:text-cyan-400 transition flex items-center gap-2"> |
| <i data-feather="chevron-right" class="w-4 h-4"></i> Contact |
| </a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-semibold mb-6">Contact</h3> |
| <ul class="space-y-3"> |
| <li class="flex items-start gap-3 text-gray-400"> |
| <i data-feather="map-pin" class="w-5 h-5 mt-0.5 text-cyan-400"></i> |
| <span>123 Digital Street, Tech City, TC 10101</span> |
| </li> |
| <li class="flex items-center gap-3 text-gray-400"> |
| <i data-feather="mail" class="w-5 h-5 text-cyan-400"></i> |
| <span>hello@phantom-digital.com</span> |
| </li> |
| <li class="flex items-center gap-3 text-gray-400"> |
| <i data-feather="phone" class="w-5 h-5 text-cyan-400"></i> |
| <span>+1 (555) 123-4567</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-500 text-sm mb-4 md:mb-0"> |
| © ${new Date().getFullYear()} Phantom Digital. All rights reserved. |
| </p> |
| <div class="flex gap-6"> |
| <a href="#" class="text-gray-500 hover:text-gray-300 text-sm transition">Privacy Policy</a> |
| <a href="#" class="text-gray-500 hover:text-gray-300 text-sm transition">Terms of Service</a> |
| <a href="#" class="text-gray-500 hover:text-gray-300 text-sm transition">Cookies</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
| `; |
| } |
| } |
| customElements.define('custom-footer', CustomFooter); |
