components/hero.js

class CustomHero extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          position: relative;
          overflow: hidden;
          padding-top: 6rem;
          padding-bottom: 6rem;
          background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
        }
        
        .dark :host {
          background: linear-gradient(135deg, #0c1a32 0%, #1e3a8a 100%);
        }
        
        .container {
          max-width: 1280px;
          margin: 0 auto;
          padding: 0 1.5rem;
          position: relative;
          z-index: 10;
        }
        
        .content {
          max-width: 42rem;
        }
        
        .title {
          font-size: 3.75rem;
          line-height: 1;
          font-weight: 800;
          color: #1e3a8a;
          margin-bottom: 1.5rem;
        }
        
        .dark .title {
          color: #f8fafc;
        }
        
        .subtitle {
          font-size: 1.25rem;
          line-height: 1.75rem;
          color: #475569;
          margin-bottom: 2rem;
        }
        
        .dark .subtitle {
          color: #e2e8f0;
        }
        
        .cta-buttons {
          display: flex;
          gap: 1rem;
          margin-bottom: 3rem;
        }
        
        .btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          padding: 0.75rem 1.5rem;
          border-radius: 0.5rem;
          font-weight: 500;
          transition: all 0.2s;
          text-decoration: none;
        }
        
        .btn-primary {
          background-color: #3b82f6;
          color: white;
        }
        
        .btn-primary:hover {
          background-color: #2563eb;
          transform: translateY(-1px);
          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        
        .btn-secondary {
          background-color: white;
          color: #3b82f6;
          border: 1px solid #e2e8f0;
        }
        
        .dark .btn-secondary {
          background-color: #1e293b;
          color: #93c5fd;
          border-color: #334155;
        }
        
        .btn-secondary:hover {
          background-color: #f8fafc;
          transform: translateY(-1px);
          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        
        .dark .btn-secondary:hover {
          background-color: #1e293b;
        }
        
        .btn-icon {
          margin-right: 0.5rem;
        }
        
        .tech-stack {
          display: flex;
          align-items: center;
          gap: 1.5rem;
          color: #64748b;
          font-size: 0.875rem;
        }
        
        .dark .tech-stack {
          color: #94a3b8;
        }
        
        .tech-icons {
          display: flex;
          gap: 1rem;
        }
        
        .tech-icon {
          width: 2rem;
          height: 2rem;
          color: #64748b;
          transition: all 0.3s ease;
        }
        
        .tech-icon:hover {
          color: #3b82f6;
          transform: translateY(-2px);
        }
        
        .dark .tech-icon {
          color: #94a3b8;
        }
        
        .dark .tech-icon:hover {
          color: #93c5fd;
        }
        
        .hero-image {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 50%;
          max-width: 640px;
          height: auto;
          opacity: 0.9;
        }
        
        @media (max-width: 1024px) {
          .hero-image {
            display: none;
          }
          
          .content {
            max-width: 100%;
            text-align: center;
          }
          
          .cta-buttons {
            justify-content: center;
          }
          
          .tech-stack {
            justify-content: center;
          }
        }
        
        @media (max-width: 640px) {
          .title {
            font-size: 2.5rem;
          }
          
          .subtitle {
            font-size: 1.125rem;
          }
          
          .cta-buttons {
            flex-direction: column;
          }
        }
      </style>
      
      <div class="container">
        <div class="content">
          <h1 class="title">Craft Digital Experiences That Inspire</h1>
          <p class="subtitle">
            A developer's toolkit with modern solutions, clean code examples, and powerful 
            components to accelerate your workflow and elevate your projects.
          </p>
          
          <div class="cta-buttons">
            <a href="#" class="btn btn-primary glow-effect">
              <i data-feather="rocket" class="btn-icon"></i>
              Get Started
            </a>
            <a href="#" class="btn btn-secondary glow-effect">
              <i data-feather="github" class="btn-icon"></i>
              View on GitHub
            </a>
          </div>
          
          <div class="tech-stack">
            <span>Trusted by developers at</span>
            <div class="tech-icons">
              <i data-feather="react"></i>
              <i data-feather="vue"></i>
              <i data-feather="angular"></i>
              <i data-feather="node"></i>
            </div>
          </div>
        </div>
        
        <img src="http://static.photos/technology/1200x630/42" alt="Developer workspace" class="hero-image">
      </div>
    `;
  }
}

customElements.define('custom-hero', CustomHero);