components/footer.js

class CustomFooter extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .footer-link:hover {
                    color: #4f46e5;
                }
            </style>
            <footer class="bg-gray-900 text-gray-400 py-16">
                <div class="container mx-auto px-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12">
                        <div class="lg:col-span-2">
                            <div class="flex items-center space-x-2 mb-6">
                                <div class="w-10 h-10 bg-indigo-600 rounded-lg flex items-center justify-center">
                                    <i data-feather="zap" class="text-white w-5 h-5"></i>
                                </div>
                                <span class="text-xl font-bold text-white">LaunchPad Pro</span>
                            </div>
                            <p class="mb-6">Empowering businesses with innovative solutions to scale efficiently and effectively.</p>
                            <div class="flex space-x-4">
                                <a href="#" class="text-gray-400 hover:text-white transition-colors"><i data-feather="twitter"></i></a>
                                <a href="#" class="text-gray-400 hover:text-white transition-colors"><i data-feather="facebook"></i></a>
                                <a href="#" class="text-gray-400 hover:text-white transition-colors"><i data-feather="linkedin"></i></a>
                                <a href="#" class="text-gray-400 hover:text-white transition-colors"><i data-feather="github"></i></a>
                            </div>
                        </div>
                        <div>
                            <h3 class="text-white font-semibold text-lg mb-4">Product</h3>
                            <ul class="space-y-2">
                                <li><a href="#" class="footer-link transition-colors">Features</a></li>
                                <li><a href="#" class="footer-link transition-colors">Pricing</a></li>
                                <li><a href="#" class="footer-link transition-colors">API</a></li>
                                <li><a href="#" class="footer-link transition-colors">Integrations</a></li>
                            </ul>
                        </div>
                        <div>
                            <h3 class="text-white font-semibold text-lg mb-4">Company</h3>
                            <ul class="space-y-2">
                                <li><a href="#" class="footer-link transition-colors">About Us</a></li>
                                <li><a href="#" class="footer-link transition-colors">Careers</a></li>
                                <li><a href="#" class="footer-link transition-colors">Blog</a></li>
                                <li><a href="#" class="footer-link transition-colors">Press</a></li>
                            </ul>
                        </div>
                        <div>
                            <h3 class="text-white font-semibold text-lg mb-4">Legal</h3>
                            <ul class="space-y-2">
                                <li><a href="#" class="footer-link transition-colors">Privacy</a></li>
                                <li><a href="#" class="footer-link transition-colors">Terms</a></li>
                                <li><a href="#" class="footer-link transition-colors">Cookies</a></li>
                                <li><a href="#" class="footer-link transition-colors">GDPR</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
                        <p class="text-sm mb-4 md:mb-0">© 2023 LaunchPad Pro. All rights reserved.</p>
                        <div class="flex space-x-6">
                            <a href="#" class="text-sm footer-link transition-colors">Privacy Policy</a>
                            <a href="#" class="text-sm footer-link transition-colors">Terms of Service</a>
                            <a href="#" class="text-sm footer-link transition-colors">Contact Us</a>
                        </div>
                    </div>
                </div>
            </footer>
            <script>feather.replace();</script>
        `;
    }
}

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