| class CustomFooter extends HTMLElement { |
| connectedCallback() { |
| this.attachShadow({ mode: 'open' }); |
| this.shadowRoot.innerHTML = ` |
| <style> |
| .footer-link { |
| transition: color 0.3s ease; |
| } |
| |
| .footer-link:hover { |
| color: #dc2626; |
| } |
| </style> |
| <footer class="bg-gray-800 text-white"> |
| <div class="container mx-auto px-6 py-12"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <!-- Company Info --> |
| <div class="col-span-1"> |
| <div class="flex items-center space-x-3 mb-4"> |
| <div class="w-8 h-8 bg-primary rounded-full flex items-center justify-center"> |
| <i data-feather="truck" class="text-white w-4 h-4"></i> |
| </div> |
| <span class="text-xl font-bold">NileFlow Express</span> |
| </div> |
| <p class="text-gray-400 mb-4"> |
| Premium logistics solutions connecting Africa to global markets with speed and reliability. |
| </p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> |
| <i data-feather="facebook"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> |
| <i data-feather="twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> |
| <i data-feather="linkedin"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> |
| <i data-feather="instagram"></i> |
| </a> |
| </div> |
| </div> |
| |
| <!-- Quick Links --> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Quick Links</h3> |
| <ul class="space-y-2"> |
| <li><a href="/" class="footer-link text-gray-400">Home</a></li> |
| <li><a href="/services" class="footer-link text-gray-400">Services</a></li> |
| <li><a href="/tracking" class="footer-link text-gray-400">Tracking</a></li> |
| <li><a href="/about" class="footer-link text-gray-400">About Us</a></li> |
| <li><a href="/contact" class="footer-link text-gray-400">Contact</a></li> |
| </ul> |
| </div> |
| |
| <!-- Services --> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Services</h3> |
| <ul class="space-y-2"> |
| <li><a href="/air-freight" class="footer-link text-gray-400">Air Freight</a></li> |
| <li><a href="/sea-freight" class="footer-link text-gray-400">Sea Freight</a></li> |
| <li><a href="/land-transport" class="footer-link text-gray-400">Land Transport</a></li> |
| <li><a href="/warehousing" class="footer-link text-gray-400">Warehousing</a></li> |
| <li><a href="/customs-clearance" class="footer-link text-gray-400">Customs Clearance</a></li> |
| </ul> |
| </div> |
| |
| <!-- Contact Info --> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Contact</h3> |
| <ul class="space-y-3 text-gray-400"> |
| <li class="flex items-center space-x-2"> |
| <i data-feather="map-pin" class="w-4 h-4"></i> |
| <span>Cairo, Egypt</span> |
| </li> |
| <li class="flex items-center space-x-2"> |
| <i data-feather="phone" class="w-4 h-4"></i> |
| <span>+20 123 456 7890</span> |
| </li> |
| <li class="flex items-center space-x-2"> |
| <i data-feather="mail" class="w-4 h-4"></i> |
| <span>info@nileflowexpress.com</span> |
| </li> |
| <li class="flex items-center space-x-2"> |
| <i data-feather="clock" class="w-4 h-4"></i> |
| <span>24/7 Customer Support</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| |
| <!-- Bottom Bar --> |
| <div class="border-t border-gray-700 pt-8 mt-8"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-400 text-sm"> |
| © 2024 NileFlow Express Logistics. All rights reserved. |
| </p> |
| <div class="flex space-x-6 mt-4 md:mt-0"> |
| <a href="/privacy" class="footer-link text-gray-400 text-sm">Privacy Policy</a> |
| <a href="/terms" class="footer-link text-gray-400 text-sm">Terms of Service</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </footer> |
| `; |
| |
| |
| setTimeout(() => { |
| if (this.shadowRoot.querySelector('[data-feather]')) { |
| feather.replace(); |
| } |
| }, 100); |
| } |
| } |
|
|
| customElements.define('custom-footer', CustomFooter); |
