components/promo.js

class PromoBanners extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .promo-card {
          transition: all 0.3s ease;
        }
        .promo-card:hover {
          transform: scale(1.02);
        }
        .promo-tag {
          background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        }
      </style>
      <section class="py-20">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <!-- Promo 1 -->
            <div class="promo-card bg-gradient-to-r from-blue-500 to-blue-700 rounded-2xl overflow-hidden shadow-xl">
              <div class="p-8 md:p-12">
                <div class="flex justify-between items-start">
                  <div>
                    <span class="promo-tag text-white text-xs font-bold px-3 py-1 rounded-full">Checken</span>
                    <h3 class="text-2xl font-bold text-white mt-4 mb-2">Maak je eigen website met AI</h3>
                    <p class="text-blue-100 mb-6">Nu 3 maanden gratis</p>
                    <a href="#" class="inline-flex items-center text-white font-medium">
                      Ontdek nu
                      <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
                    </a>
                  </div>
                  <div class="bg-white bg-opacity-20 rounded-lg p-2">
                    <i data-feather="star" class="w-6 h-6 text-white"></i>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- Promo 2 -->
            <div class="promo-card bg-gradient-to-r from-purple-500 to-purple-700 rounded-2xl overflow-hidden shadow-xl">
              <div class="p-8 md:p-12">
                <div class="flex justify-between items-start">
                  <div>
                    <span class="promo-tag text-white text-xs font-bold px-3 py-1 rounded-full">Actie</span>
                    <h3 class="text-2xl font-bold text-white mt-4 mb-2">Hosting voor WordPress</h3>
                    <p class="text-purple-100 mb-2">Maak je website met het populairste cms ter wereld.</p>
                    <p class="text-white font-bold text-xl">v.a. €4,99 p/m</p>
                    <a href="#" class="inline-flex items-center text-white font-medium mt-4">
                      Naar Hosting voor WordPress
                      <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
                    </a>
                  </div>
                  <div class="bg-white bg-opacity-20 rounded-lg p-2">
                    <i data-feather="code" class="w-6 h-6 text-white"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-8">
            <!-- Small promo 1 -->
            <div class="promo-card bg-white border border-gray-200">
              <div class="p-6">
                <span class="promo-tag text-white text-xs font-bold px-3 py-1 rounded-full">Actie</span>
                <h4 class="font-bold text-lg mt-4 mb-2">Webhosting</h4>
                <p class="text-gray-600 text-sm mb-4">Host je website op ons stabiele shared platform.</p>
                <p class="font-bold text-blue-600">v.a. €4,99 p/m</p>
                <a href="#" class="text-blue-600 text-sm font-medium mt-4 inline-block">Naar Webhosting</a>
              </div>
            </div>
            
            <!-- Small promo 2 -->
            <div class="promo-card bg-white border border-gray-200">
              <div class="p-6">
                <span class="promo-tag text-white text-xs font-bold px-3 py-1 rounded-full">Actie</span>
                <h4 class="font-bold text-lg mt-4 mb-2">E-mail</h4>
                <p class="text-gray-600 text-sm mb-4">Professioneel e-mailen met je eigen domeinnaam.</p>
                <p class="font-bold text-blue-600">v.a. €0,- p/m</p>
                <a href="#" class="text-blue-600 text-sm font-medium mt-4 inline-block">Naar E-mail</a>
              </div>
            </div>
            
            <!-- Small promo 3 -->
            <div class="promo-card bg-white border border-gray-200">
              <div class="p-6">
                <span class="promo-tag text-white text-xs font-bold px-3 py-1 rounded-full">Actie</span>
                <h4 class="font-bold text-lg mt-4 mb-2">Website Builder</h4>
                <p class="text-gray-600 text-sm mb-4">Je eigen website in slechts 3 stappen.</p>
                <p class="font-bold text-blue-600">v.a. €0,- p/m</p>
                <a href="#" class="text-blue-600 text-sm font-medium mt-4 inline-block">Naar Website Builder</a>
              </div>
            </div>
            
            <!-- Small promo 4 -->
            <div class="promo-card bg-gradient-to-r from-blue-500 to-blue-700 text-white">
              <div class="p-6">
                <h4 class="font-bold text-lg mb-2">Veilig betalen</h4>
                <p class="text-blue-100 text-sm">Betalen via iDEAL, PayPal of creditcard</p>
                <div class="flex space-x-2 mt-4">
                  <div class="bg-white bg-opacity-20 rounded w-8 h-5"></div>
                  <div class="bg-white bg-opacity-20 rounded w-8 h-5"></div>
                  <div class="bg-white bg-opacity-20 rounded w-8 h-5"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    `;
    
    feather.replace();
  }
}

customElements.define('promo-banners', PromoBanners);