Spaces:
Running
Running
| class CustomAbout extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| .about-section { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 4rem 2rem; | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: 3rem; | |
| } | |
| .about-content { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: 2rem; | |
| } | |
| @media (min-width: 768px) { | |
| .about-content { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| } | |
| .about-image { | |
| border-radius: 1rem; | |
| overflow: hidden; | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .about-image img { | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| } | |
| .about-text h2 { | |
| font-size: 2.5rem; | |
| font-weight: 800; | |
| margin-bottom: 1.5rem; | |
| color: #1a1a1a; | |
| } | |
| .about-text p { | |
| font-size: 1.125rem; | |
| line-height: 1.75; | |
| color: #4b5563; | |
| margin-bottom: 1.5rem; | |
| } | |
| .stats { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 1.5rem; | |
| margin-top: 2rem; | |
| } | |
| .stat-item { | |
| background: #f9fafb; | |
| padding: 1.5rem; | |
| border-radius: 0.5rem; | |
| text-align: center; | |
| } | |
| .stat-number { | |
| font-size: 2.25rem; | |
| font-weight: 700; | |
| color: #4f46e5; | |
| margin-bottom: 0.5rem; | |
| } | |
| .stat-label { | |
| font-size: 0.875rem; | |
| color: #6b7280; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| </style> | |
| <section class="about-section"> | |
| <div class="about-content"> | |
| <div class="about-text"> | |
| <h2>We make developers' lives easier</h2> | |
| <p>DevDazzle was born from our frustration with ugly, hard-to-implement UI components. We believe developers deserve beautiful, production-ready components that just work.</p> | |
| <p>Our team of designers and developers work together to create components that are both visually stunning and technically excellent.</p> | |
| <div class="stats"> | |
| <div class="stat-item"> | |
| <div class="stat-number">500+</div> | |
| <div class="stat-label">Components</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-number">50K+</div> | |
| <div class="stat-label">Developers</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-number">100%</div> | |
| <div class="stat-label">Satisfaction</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-number">24/7</div> | |
| <div class="stat-label">Support</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="about-image"> | |
| <img src="http://static.photos/technology/1024x576/42" alt="Team working on components"> | |
| </div> | |
| </div> | |
| </section> | |
| `; | |
| } | |
| } | |
| customElements.define('custom-about', CustomAbout); |