| class CustomCta extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| :host { | |
| display: block; | |
| padding: 6rem 0; | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); | |
| color: white; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 2rem; | |
| text-align: center; | |
| } | |
| .cta-content { | |
| max-width: 700px; | |
| margin: 0 auto; | |
| } | |
| .cta-title { | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| margin-bottom: 1.5rem; | |
| line-height: 1.2; | |
| } | |
| .cta-text { | |
| font-size: 1.125rem; | |
| margin-bottom: 2rem; | |
| opacity: 0.9; | |
| line-height: 1.6; | |
| } | |
| .cta-button { | |
| display: inline-block; | |
| background-color: white; | |
| color: var(--primary); | |
| padding: 1rem 2.5rem; | |
| border-radius: 0.5rem; | |
| font-weight: 600; | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| } | |
| .cta-button:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2); | |
| } | |
| @media (max-width: 768px) { | |
| .cta-title { | |
| font-size: 2rem; | |
| } | |
| } | |
| </style> | |
| <div class="container" id="contact"> | |
| <div class="cta-content observe-me"> | |
| <h2 class="cta-title">Ready to elevate your digital presence?</h2> | |
| <p class="cta-text">Let's discuss how we can help you achieve your business goals with a custom digital solution tailored to your needs.</p> | |
| <a href="#contact" class="cta-button">Get in Touch</a> | |
| </div> | |
| </div> | |
| `; | |
| } | |
| } | |
| customElements.define('custom-cta', CustomCta); |