Seraph-Array/Seraphim

1class CustomFooter extends HTMLElement {2    connectedCallback() {3        this.attachShadow({ mode: 'open' });4        this.shadowRoot.innerHTML = `5            <style>6                .footer {7                    background-color: #f8fafc;8                }9                .social-icon:hover {10                    color: #4F46E5;11                    transform: translateY(-2px);12                }13            </style>14            <footer class="footer border-t border-gray-200">15                <div class="container mx-auto px-4 py-8">16                    <div class="flex flex-col md:flex-row justify-between items-center">17                        <div class="mb-4 md:mb-0">18                            <p class="text-gray-500">&copy; ${new Date().getFullYear()} Blank Canvas Studio. All rights reserved.</p>19                        </div>20                        <div class="flex space-x-4">21                            <a href="#" class="social-icon text-gray-500 hover:text-primary-500 transition duration-200">22                                <i data-feather="twitter" class="w-5 h-5"></i>23                            </a>24                            <a href="#" class="social-icon text-gray-500 hover:text-primary-500 transition duration-200">25                                <i data-feather="instagram" class="w-5 h-5"></i>26                            </a>27                            <a href="#" class="social-icon text-gray-500 hover:text-primary-500 transition duration-200">28                                <i data-feather="github" class="w-5 h-5"></i>29                            </a>30                        </div>31                    </div>32                </div>33            </footer>34        `;35    }36}37 38customElements.define('custom-footer', CustomFooter);