| class FeatureCard extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| .feature-card { | |
| background: white; | |
| border-radius: 0.5rem; | |
| padding: 1.5rem; | |
| box-shadow: 0 1px 3px rgba(0,0,0,0.1); | |
| transition: all 0.3s ease; | |
| height: 100%; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .icon-container { | |
| display: inline-flex; | |
| padding: 0.75rem; | |
| border-radius: 50%; | |
| margin-bottom: 1rem; | |
| } | |
| h3 { | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| margin-bottom: 0.75rem; | |
| color: #1f2937; | |
| } | |
| p { | |
| color: #6b7280; | |
| margin-bottom: 1rem; | |
| } | |
| .feature-content { | |
| margin-top: 1rem; | |
| } | |
| </style> | |
| <div class="feature-card"> | |
| <div class="icon-container" style="background: ${this.getAttribute('icon-bg') || '#eef2ff'}; color: ${this.getAttribute('icon-color') || '#6366f1'}"> | |
| <i data-feather="${this.getAttribute('icon') || 'star'}"></i> | |
| </div> | |
| <h3>${this.getAttribute('title') || 'Feature'}</h3> | |
| <p>${this.getAttribute('description') || 'Feature description'}</p> | |
| <div class="feature-content"> | |
| <slot></slot> | |
| </div> | |
| </div> | |
| `; | |
| } | |
| } | |
| customElements.define('feature-card', FeatureCard); |