components/footer.js

class CustomFooter extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                footer {
                    font-family: 'IBM Plex Mono', monospace;
                }
                .social-link {
                    transition: all 0.3s ease;
                }
                .social-link:hover {
                    transform: translateY(-3px);
                }
            </style>
            <footer class="bg-primary text-white py-12">
                <div class="container mx-auto px-4">
                    <div class="flex flex-col md:flex-row justify-between items-center">
                        <div class="mb-6 md:mb-0">
                            <h2 class="text-2xl font-bold mb-2">CODECANVAS</h2>
                            <p class="text-gray-300">Building digital foundations</p>
                        </div>
                        <div class="flex space-x-6">
                            <a href="#" class="social-link">
                                <i data-feather="github" class="w-6 h-6"></i>
                            </a>
                            <a href="#" class="social-link">
                                <i data-feather="linkedin" class="w-6 h-6"></i>
                            </a>
                            <a href="#" class="social-link">
                                <i data-feather="twitter" class="w-6 h-6"></i>
                            </a>
                            <a href="#" class="social-link">
                                <i data-feather="mail" class="w-6 h-6"></i>
                            </a>
                        </div>
                    </div>
                    <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
                        <p>&copy; ${new Date().getFullYear()} CodeCanvas. All rights reserved.</p>
                    </div>
                </div>
            </footer>
        `;
    }
}

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