components/hero.js

class CustomHero extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .hero-image {
          background-image: url('http://static.photos/museum/1200x630/1');
          background-size: cover;
          background-position: center;
        }
        @media (max-width: 768px) {
          .hero-image {
            background-image: url('http://static.photos/museum/640x360/1');
          }
        }
      </style>
      <div class="relative bg-gray-900 overflow-hidden">
        <div class="hero-image absolute inset-0 opacity-50"></div>
        <div class="relative max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8">
          <div class="text-center animate-on-scroll">
            <h1 class="text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl">
              La solution de billetterie unifiée pour les musées
            </h1>
            <p class="mt-6 max-w-3xl mx-auto text-xl text-indigo-100">
              Une plateforme SaaS "Tout-en-un" alliant puissance industrielle et expertise culturelle
            </p>
            <div class="mt-10 flex justify-center space-x-4">
              <a href="#demo" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">
                Demander une démo
              </a>
              <a href="#fonctionnalites" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-800 bg-opacity-60 hover:bg-opacity-70">
                <i data-feather="play" class="mr-2"></i> Voir la vidéo
              </a>
            </div>
          </div>
        </div>
      </div>
    `;
  }
}
customElements.define('custom-hero', CustomHero);