Spaces:
Running
Running
| class CustomHero extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| .hero { | |
| background: linear-gradient(135deg, #6e8efb, #a777e3); | |
| color: white; | |
| padding: 120px 0; | |
| text-align: center; | |
| } | |
| .hero-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| .hero-title { | |
| font-size: 48px; | |
| font-weight: 700; | |
| margin-bottom: 20px; | |
| } | |
| .hero-subtitle { | |
| font-size: 22px; | |
| margin-bottom: 40px; | |
| max-width: 700px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .hero-buttons { | |
| display: flex; | |
| gap: 15px; | |
| justify-content: center; | |
| } | |
| .hero-button { | |
| padding: 15px 30px; | |
| border-radius: 50px; | |
| font-weight: 600; | |
| font-size: 16px; | |
| transition: all 0.3s ease; | |
| } | |
| .primary-button { | |
| background: white; | |
| color: #6e8efb; | |
| } | |
| .secondary-button { | |
| background: rgba(255,255,255,0.2); | |
| color: white; | |
| border: 2px solid white; | |
| } | |
| .hero-button:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| </style> | |
| <section class="hero"> | |
| <div class="hero-container"> | |
| <h1 class="hero-title">Mobile Solutions for Argentina</h1> | |
| <p class="hero-subtitle">Get the best mobile plans with unlimited data, calls and international coverage at competitive prices.</p> | |
| <div class="hero-buttons"> | |
| <a href="#plans" class="hero-button primary-button">View Plans</a> | |
| <a href="#contact" class="hero-button secondary-button">Contact Us</a> | |
| </div> | |
| </div> | |
| </section> | |
| `; | |
| } | |
| } | |
| customElements.define('custom-hero', CustomHero); |