components/footer.js

class CustomFooter extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .footer {
                    background-color: #f8fafc;
                    border-top: 1px solid #e2e8f0;
                }
                .footer-link {
                    transition: color 0.2s ease;
                }
                .footer-link:hover {
                    color: #3b82f6;
                }
                .social-icon {
                    transition: all 0.2s ease;
                }
                .social-icon:hover {
                    color: #3b82f6;
                    transform: translateY(-2px);
                }
            </style>
            <footer class="footer py-8">
                <div class="container mx-auto px-4">
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                        <div>
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">Structa Clone</h3>
                            <p class="text-gray-600 mb-4">
                                An interactive tool to visualize and understand data structures and algorithms
                            </p>
                            <div class="flex space-x-4">
                                <a href="#" class="social-icon text-gray-500">
                                    <i data-feather="github"></i>
                                </a>
                                <a href="#" class="social-icon text-gray-500">
                                    <i data-feather="twitter"></i>
                                </a>
                                <a href="#" class="social-icon text-gray-500">
                                    <i data-feather="linkedin"></i>
                                </a>
                            </div>
                        </div>
                        
                        <div>
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">Structures</h3>
                            <ul class="space-y-2">
                                <li><a href="array.html" class="footer-link text-gray-600">Array</a></li>
                                <li><a href="linked-list.html" class="footer-link text-gray-600">Linked List</a></li>
                                <li><a href="stack.html" class="footer-link text-gray-600">Stack</a></li>
                                <li><a href="queue.html" class="footer-link text-gray-600">Queue</a></li>
                                <li><a href="tree.html" class="footer-link text-gray-600">Tree</a></li>
                                <li><a href="graph.html" class="footer-link text-gray-600">Graph</a></li>
                            </ul>
                        </div>
                        
                        <div>
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">Resources</h3>
                            <ul class="space-y-2">
                                <li><a href="#" class="footer-link text-gray-600">Documentation</a></li>
                                <li><a href="#" class="footer-link text-gray-600">Tutorials</a></li>
                                <li><a href="#" class="footer-link text-gray-600">Examples</a></li>
                                <li><a href="#" class="footer-link text-gray-600">Blog</a></li>
                            </ul>
                        </div>
                        
                        <div>
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">Company</h3>
                            <ul class="space-y-2">
                                <li><a href="#" class="footer-link text-gray-600">About</a></li>
                                <li><a href="#" class="footer-link text-gray-600">Contact</a></li>
                                <li><a href="#" class="footer-link text-gray-600">Privacy Policy</a></li>
                                <li><a href="#" class="footer-link text-gray-600">Terms of Service</a></li>
                            </ul>
                        </