components/footer.js

class CustomFooter extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .social-icon {
                    transition: all 0.3s ease;
                }
                .social-icon:hover {
                    transform: translateY(-3px);
                }
            </style>
            <footer class="bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 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">
                            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Codextki</h3>
                            <p class="text-gray-600 dark:text-gray-300">Building the future, one line at a time.</p>
                        </div>
                        
                        <div class="flex space-x-6">
                            <a href="#" class="social-icon text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400">
                                <i data-feather="github"></i>
                            </a>
                            <a href="#" class="social-icon text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400">
                                <i data-feather="twitter"></i>
                            </a>
                            <a href="#" class="social-icon text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400">
                                <i data-feather="linkedin"></i>
                            </a>
                            <a href="#" class="social-icon text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400">
                                <i data-feather="mail"></i>
                            </a>
                        </div>
                    </div>
                    
                    <div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700 text-center text-gray-500 dark:text-gray-400 text-sm">
                        <p>© ${new Date().getFullYear()} Codextki Clone. All rights reserved.</p>
                    </div>
                </div>
            </footer>
        `;
    }
}
customElements.define('custom-footer', CustomFooter);