| class CustomFooter extends HTMLElement { |
| connectedCallback() { |
| this.attachShadow({ mode: 'open' }); |
| this.shadowRoot.innerHTML = ` |
| <style> |
| .footer-link:hover { |
| color: #4f46e5; |
| transform: translateX(4px); |
| } |
| .footer-link { |
| transition: all 0.2s ease; |
| } |
| .social-icon { |
| transition: all 0.2s ease; |
| } |
| .social-icon:hover { |
| transform: translateY(-3px); |
| } |
| </style> |
| <footer class="bg-gray-800 text-white py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div class="md:col-span-2"> |
| <div class="flex items-center mb-4"> |
| <i data-feather="brain" class="text-indigo-400 w-8 h-8 mr-2"></i> |
| <span class="text-xl font-bold">M!ND Research Group</span> |
| </div> |
| <p class="text-gray-400 mb-4">Mapping the neural basis of intelligent behavior through interdisciplinary research.</p> |
| <div class="flex space-x-4"> |
| <a href="#" class="social-icon text-gray-400 hover:text-white"> |
| <i data-feather="twitter" class="w-5 h-5"></i> |
| </a> |
| <a href="#" class="social-icon text-gray-400 hover:text-white"> |
| <i data-feather="github" class="w-5 h-5"></i> |
| </a> |
| <a href="#" class="social-icon text-gray-400 hover:text-white"> |
| <i data-feather="linkedin" class="w-5 h-5"></i> |
| </a> |
| <a href="#" class="social-icon text-gray-400 hover:text-white"> |
| <i data-feather="youtube" class="w-5 h-5"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Quick Links</h3> |
| <ul class="space-y-2"> |
| <li><a href="index.html" class="footer-link text-gray-400 hover:text-white flex items-center"><i data-feather="chevron-right" class="w-4 h-4 mr-1"></i> Home</a></li> |
| <li><a href="projects.html" class="footer-link text-gray-400 hover:text-white flex items-center"><i data-feather="chevron-right" class="w-4 h-4 mr-1"></i> Projects</a></li> |
| <li><a href="publications.html" class="footer-link text-gray-400 hover:text-white flex items-center"><i data-feather="chevron-right" class="w-4 h-4 mr-1"></i> Publications</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-semibold mb-4">More</h3> |
| <ul class="space-y-2"> |
| <li><a href="people.html" class="footer-link text-gray-400 hover:text-white flex items-center"><i data-feather="chevron-right" class="w-4 h-4 mr-1"></i> People</a></li> |
| <li><a href="resources.html" class="footer-link text-gray-400 hover:text-white flex items-center"><i data-feather="chevron-right" class="w-4 h-4 mr-1"></i> Resources</a></li> |
| <li><a href="#" class="footer-link text-gray-400 hover:text-white flex items-center"><i data-feather="chevron-right" class="w-4 h-4 mr-1"></i> Contact</a></li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> |
| <p>© ${new Date().getFullYear()} Brainy Bunch Neuro Lab. All rights reserved.</p> |
| </div> |
| </div> |
| </footer> |
| <script>feather.replace();</script> |
| `; |
| } |
| } |
| customElements.define('custom-footer', CustomFooter); |
