acs-dev/codecrafted-ios-portfolio

1class CustomFooter extends HTMLElement {2    connectedCallback() {3        this.attachShadow({ mode: 'open' });4        this.shadowRoot.innerHTML = `5            <style>6                .social-link {7                    transition: transform 0.3s ease, color 0.3s ease;8                }9                .social-link:hover {10                    transform: translateY(-3px);11                    color: #6366f1;12                }13                .dark .social-link:hover {14                    color: #a5b4fc;15                }16            </style>17            <footer class="bg-gray-100 dark:bg-gray-800 py-12">18                <div class="container mx-auto px-4">19                    <div class="flex flex-col md:flex-row justify-between items-center">20                        <div class="mb-6 md:mb-0">21                            <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">22                                <span class="text-primary-500">iOS</span>Dev23                            </h2>24                            <p class="text-gray-600 dark:text-gray-400">Crafting exceptional iOS experiences</p>25                        </div>26                        <div class="flex space-x-6">27                            <a href="#" class="social-link text-gray-700 dark:text-gray-300">28                                <i data-feather="github" class="w-6 h-6"></i>29                            </a>30                            <a href="#" class="social-link text-gray-700 dark:text-gray-300">31                                <i data-feather="twitter" class="w-6 h-6"></i>32                            </a>33                            <a href="#" class="social-link text-gray-700 dark:text-gray-300">34                                <i data-feather="linkedin" class="w-6 h-6"></i>35                            </a>36                            <a href="#" class="social-link text-gray-700 dark:text-gray-300">37                                <i data-feather="mail" class="w-6 h-6"></i>38                            </a>39                        </div>40                    </div>41                    <div class="border-t border-gray-200 dark:border-gray-700 mt-8 pt-8 text-center text-gray-600 dark:text-gray-400">42                        <p>&copy; ${new Date().getFullYear()} iOS Developer Portfolio. All rights reserved.</p>43                    </div>44                </div>45            </footer>46        `;47    }48}49 50customElements.define('custom-footer', CustomFooter);