components/cta-banner.js

class CustomCtaBanner extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                }
                .cta-gradient {
                    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(59, 130, 246, 0.2) 100%);
                }
                .cta-animate {
                    animation: pulse 2s infinite;
                }
                @keyframes pulse {
                    0% { transform: scale(1); }
                    50% { transform: scale(1.05); }
                    100% { transform: scale(1); }
                }
            </style>
            <section class="py-16 cta-gradient">
                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
                    <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Start Trading?</h2>
                    <p class="text-xl text-gray-300 max-w-3xl mx-auto mb-8">Join thousands of traders who are already earning with CryptoPulse Pro</p>
                    <div class="flex flex-col sm:flex-row justify-center gap-4">
                        <a href="/register" class="bg-white text-gray-900 hover:bg-gray-100 font-bold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl text-center">
                            Get Started Free
                        </a>
                        <a href="/contact" class="bg-transparent border-2 border-white hover:bg-white/10 text-white font-bold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 text-center">
                            Contact Sales
                        </a>
                    </div>
                </div>
            </section>
        `;
    }
}

customElements.define('custom-cta-banner', CustomCtaBanner);