| class CustomFooter extends HTMLElement { |
| connectedCallback() { |
| this.attachShadow({ mode: 'open' }); |
| this.shadowRoot.innerHTML = ` |
| <style> |
| .footer-link { |
| transition: all 0.3s ease; |
| } |
| .footer-link:hover { |
| color: #81c784; |
| transform: translateX(3px); |
| } |
| .social-icon { |
| transition: all 0.3s ease; |
| } |
| .social-icon:hover { |
| color: #81c784; |
| transform: translateY(-3px); |
| } |
| </style> |
| <footer class="bg-gray-800 text-white pt-16 pb-8"> |
| <div class="container mx-auto px-6"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-12"> |
| <div class="md:col-span-2"> |
| <div class="flex items-center mb-6"> |
| <i data-feather="shopping-bag" class="mr-2 text-primary"></i> |
| <span class="text-2xl font-bold">WasteLess</span> |
| </div> |
| <p class="text-gray-400 mb-6">Making sustainable shopping accessible to everyone by reducing food waste and saving you money.</p> |
| <div class="flex space-x-4"> |
| <a href="#" class="social-icon"><i data-feather="facebook"></i></a> |
| <a href="#" class="social-icon"><i data-feather="twitter"></i></a> |
| <a href="#" class="social-icon"><i data-feather="instagram"></i></a> |
| <a href="#" class="social-icon"><i data-feather="linkedin"></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 flex items-center"><i data-feather="chevron-right" class="mr-1 w-4 h-4"></i> Home</a></li> |
| <li><a href="features.html" class="footer-link text-gray-400 flex items-center"><i data-feather="chevron-right" class="mr-1 w-4 h-4"></i> Features</a></li> |
| <li><a href="about.html" class="footer-link text-gray-400 flex items-center"><i data-feather="chevron-right" class="mr-1 w-4 h-4"></i> About</a></li> |
| <li><a href="#" class="footer-link text-gray-400 flex items-center"><i data-feather="chevron-right" class="mr-1 w-4 h-4"></i> Get App</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Contact</h3> |
| <ul class="space-y-2 text-gray-400"> |
| <li class="flex items-center"><i data-feather="mail" class="mr-2 w-4 h-4"></i> hello@wasteless.com</li> |
| <li class="flex items-center"><i data-feather="phone" class="mr-2 w-4 h-4"></i> (123) 456-7890</li> |
| <li class="flex items-center"><i data-feather="map-pin" class="mr-2 w-4 h-4"></i> 123 Green St, Eco City</li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400"> |
| <p>© ${new Date().getFullYear()} WasteLess. All rights reserved.</p> |
| </div> |
| </div> |
| </footer> |
| `; |
| } |
| } |
|
|
| customElements.define('custom-footer', CustomFooter); |
