components/footer.js

class CustomFooter extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .footer {
                    background: linear-gradient(to right, #667eea, #764ba2);
                    color: white;
                    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
                }
.footer-link {
                    transition: all 0.2s ease;
                }
                .footer-link:hover {
                    color: #3B82F6;
                }
            </style>
            <footer class="footer py-4">
<div class="container mx-auto px-4">
                    <div class="flex flex-col md:flex-row justify-between items-center">
                        <div class="mb-4 md:mb-0">
                            <p class="text-blue-100">© 2023 ProjectTracker Pro. Tous droits réservés.</p>
                        </div>
                        <div class="flex space-x-6">
                            <a href="#" class="footer-link text-white hover:text-blue-100">Conditions d'utilisation</a>
                            <a href="#" class="footer-link text-white hover:text-blue-100">Politique de confidentialité</a>
                            <a href="#" class="footer-link text-white hover:text-blue-100">Contact</a>
</div>
                    </div>
                </div>
            </footer>
        `;
    }
}
customElements.define('custom-footer', CustomFooter);