Spaces:
Running
Running
File size: 5,676 Bytes
72b6287 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
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); |