Generate a modern web app landing + dashboard UI for an app called "PySQL Labs" — a Python + SQL interactive learning platform with hands-on labs and interview-style drills. Create a polished, developer-focused, slightly playful but professional design.
509f3c2
verified
| class CustomFeatureCard extends HTMLElement { | |
| constructor() { | |
| super(); | |
| this.icon = this.getAttribute('icon') || 'code'; | |
| this.title = this.getAttribute('title') || 'Feature'; | |
| this.description = this.getAttribute('description') || 'Description'; | |
| this.ctaText = this.getAttribute('cta-text') || 'Try Now'; | |
| this.color = this.getAttribute('color') || 'primary'; | |
| } | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| :host { | |
| display: block; | |
| } | |
| .feature-card { | |
| background: linear-gradient(145deg, rgba(31, 41, 55, 0.8), rgba(17, 24, 39, 0.8)); | |
| border: 1px solid rgba(55, 65, 81, 0.3); | |
| border-radius: 1rem; | |
| padding: 1.5rem; | |
| transition: all 0.3s ease; | |
| height: 100%; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3); | |
| border-color: rgba(34, 197, 94, 0.5); | |
| } | |
| .icon-container { | |
| width: 3.5rem; | |
| height: 3.5rem; | |
| border-radius: 0.75rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 1rem; | |
| } | |
| .primary-icon { | |
| background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05)); | |
| } | |
| .secondary-icon { | |
| background: linear-gradient(135deg, rgba(217, 70, 239, 0.15), rgba(217, 70, 239, 0.05)); | |
| } | |
| .primary-text { | |
| color: #22c55e; | |
| } | |
| .secondary-text { | |
| color: #d946ef; | |
| } | |
| h3 { | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| margin-bottom: 0.75rem; | |
| } | |
| p { | |
| color: #d1d5db; | |
| margin-bottom: 1rem; | |
| line-height: 1.5; | |
| } | |
| .cta-button { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 0.5rem 1rem; | |
| border-radius: 0.5rem; | |
| font-weight: 500; | |
| transition: all 0.2s ease; | |
| } | |
| .primary-cta { | |
| background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05)); | |
| color: #22c55e; | |
| } | |
| .secondary-cta { | |
| background: linear-gradient(135deg, rgba(217, 70, 239, 0.15), rgba(217, 70, 239, 0.05)); | |
| color: #d946ef; | |
| } | |
| .cta-button:hover { | |
| transform: translateX(3px); | |
| } | |
| </style> | |
| <div class="feature-card fade-in hover-lift"> | |
| <div class="icon-container ${this.color === 'primary' ? 'primary-icon' : 'secondary-icon'}"> | |
| <i data-feather="${this.icon}" class="w-6 h-6 ${this.color === 'primary' ? 'primary-text' : 'secondary-text'}"></i> | |
| </div> | |
| <h3>${this.title}</h3> | |
| <p>${this.description}</p> | |
| <a href="#try-sample" class="cta-button ${this.color === 'primary' ? 'primary-cta' : 'secondary-cta'}"> | |
| <i data-feather="arrow-right" class="w-4 h-4 mr-2"></i> | |
| ${this.ctaText} | |
| </a> | |
| </div> | |
| `; | |
| setTimeout(() => { | |
| if (typeof feather !== 'undefined') { | |
| feather.replace(); | |
| } | |
| }, 100); | |
| } | |
| } | |
| customElements.define('custom-feature-card', CustomFeatureCard); |