components/hero.js

class CustomHero extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .hero {
          position: relative;
          height: 90vh;
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 0 4rem;
          color: white;
        }
        
        .hero::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
          z-index: 1;
        }
        
        .hero-background {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        
        .hero-content {
          position: relative;
          z-index: 2;
          max-width: 600px;
        }
        
        .hero-title {
          font-size: 3rem;
          font-weight: bold;
          margin-bottom: 1rem;
        }
        
        .hero-description {
          font-size: 1.2rem;
          line-height: 1.5;
          margin-bottom: 2rem;
        }
        
        .hero-buttons {
          display: flex;
          gap: 1rem;
        }
        
        .hero-btn {
          padding: 0.8rem 2rem;
          border-radius: 4px;
          font-weight: bold;
          font-size: 1.1rem;
          cursor: pointer;
          display: flex;
          align-items: center;
          gap: 0.5rem;
        }
        
        .play-btn {
          background-color: white;
          color: black;
        }
        
        .info-btn {
          background-color: rgba(109, 109, 110, 0.7);
          color: white;
        }
        
        @media (max-width: 768px) {
          .hero {
            padding: 0 2rem;
            height: 80vh;
          }
          
          .hero-title {
            font-size: 2rem;
          }
          
          .hero-description {
            font-size: 1rem;
          }
          
          .hero-buttons {
            flex-direction: column;
          }
        }
      </style>
      
      <div class="hero">
        <img src="http://static.photos/technology/1920x1080/5" alt="Hero background" class="hero-background">
        <div class="hero-content">
          <h1 class="hero-title">Stranger Things</h1>
          <p class="hero-description">
            When a young boy vanishes, a small town uncovers a mystery involving secret experiments, terrifying supernatural forces and one strange little girl.
          </p>
          <div class="hero-buttons">
            <button class="hero-btn play-btn">
              <i data-feather="play"></i>
              Play
            </button>
            <button class="hero-btn info-btn">
              <i data-feather="info"></i>
              More Info
            </button>
          </div>
        </div>
      </div>
    `;
  }
}

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