components/footer.js

class CustomFooter extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    width: 100%;
                    background-color: white;
                    border-top: 1px solid #e5e7eb;
                }
                
                footer {
                    padding: 2rem 0;
                }
                
                .footer-links a {
                    transition: color 0.2s ease;
                }
                
                .footer-links a:hover {
                    color: rgb(14 165 233);
                }
            </style>
            
            <footer class="bg-white">
                <div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
                    <nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
                        <div class="px-5 py-2">
                            <a href="#" class="text-base text-gray-500 hover:text-gray-900">About</a>
                        </div>
                        <div class="px-5 py-2">
                            <a href="#" class="text-base text-gray-500 hover:text-gray-900">Blog</a>
                        </div>
                        <div class="px-5 py-2">
                            <a href="#" class="text-base text-gray-500 hover:text-gray-900">Jobs</a>
                        </div>
                        <div class="px-5 py-2">
                            <a href="#" class="text-base text-gray-500 hover:text-gray-900">Press</a>
                        </div>
                        <div class="px-5 py-2">
                            <a href="#" class="text-base text-gray-500 hover:text-gray-900">Accessibility</a>
                        </div>
                        <div class="px-5 py-2">
                            <a href="#" class="text-base text-gray-500 hover:text-gray-900">Partners</a>
                        </div>
                    </nav>
                    <div class="mt-8 flex justify-center space-x-6">
                        <a href="#" class="text-gray-400 hover:text-gray-500">
                            <span class="sr-only">Facebook</span>
                            <i data-feather="facebook" class="h-6 w-6"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-gray-500">
                            <span class="sr-only">Instagram</span>
                            <i data-feather="instagram" class="h-6 w-6"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-gray-500">
                            <span class="sr-only">Twitter</span>
                            <i data-feather="twitter" class="h-6 w-6"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-gray-500">
                            <span class="sr-only">GitHub</span>
                            <i data-feather="github" class="h-6 w-6"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-gray-500">
                            <span class="sr-only">LinkedIn</span>
                            <i data-feather="linkedin" class="h-6 w-6"></i>
                        </a>
                    </div>
                    <p class="mt-8 text-center text-base text-gray-400">
                        &copy; 2023 DiagnoScan Pro. All rights reserved.
                    </p>
                </div>
            </footer>
        `;
    }
}

customElements.define('custom-footer', CustomFooter);