src/components/sections/PricingToggle.astro
---
// PricingToggle, recovered from blurr-components.pages.dev
---
<section class="pt" data-component="pricing-toggle"> <div class="pt__inner"> <div class="pt__header"> <p class="pt__eyebrow">Tarieven</p> <h2 class="pt__title">Eenvoudige <em>transparante</em> prijzen</h2> <p class="pt__sub">Geen verborgen kosten. Kies het pakket dat bij je past.</p> </div> <!-- Toggle --> <div class="pt__toggle-wrap"> <span class="pt__toggle-label">Maandelijks</span> <button class="pt__toggle" id="billing-toggle" role="switch" aria-checked="false" aria-label="Schakel naar jaarlijks"> <span class="pt__toggle-thumb"></span> </button> <span class="pt__toggle-label">
Jaarlijks
<span class="pt__discount-badge">2 maanden gratis</span> </span> </div> <!-- Plans --> <div class="pt__grid"> <div class="pt__plan"> <div class="pt__plan-header"> <h3 class="pt__plan-name">Starter</h3> <p class="pt__plan-desc">Ideaal voor kleine bedrijven.</p> </div> <div class="pt__price-wrap"> <div class="pt__price" data-monthly="299" data-yearly="249"> <span class="pt__currency">€</span> <span class="pt__amount">299</span> </div> <span class="pt__period">/ maand</span> </div> <a href="#" class="pt__cta"> Begin nu </a> <ul class="pt__features"> <li class="pt__feature"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none"> <circle cx="8" cy="8" r="8" fill="currentColor" opacity="0.1"></circle> <path d="M5 8.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg> Google Ads management </li><li class="pt__feature"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none"> <circle cx="8" cy="8" r="8" fill="currentColor" opacity="0.1"></circle> <path d="M5 8.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg> Maandrapportage </li><li class="pt__feature"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none"> <circle cx="8" cy="8" r="8" fill="currentColor" opacity="0.1"></circle> <path d="M5 8.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg> 1 campagne </li><li class="pt__feature"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none"> <circle cx="8" cy="8" r="8" fill="currentColor" opacity="0.1"></circle> <path d="M5 8.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg> E-mail support </li> </ul> </div><div class="pt__plan pt__plan--popular"> <div class="pt__popular-badge">Meest gekozen</div> <div class="pt__plan-header"> <h3 class="pt__plan-name">Groei</h3> <p class="pt__plan-desc">Voor bedrijven die willen schalen.</p> </div> <div class="pt__price-wrap"> <div class="pt__price" data-monthly="599" data-yearly="499"> <span class="pt__currency">€</span> <span class="pt__amount">599</span> </div> <span class="pt__period">/ maand</span> </div> <a href="#" class="pt__cta pt__cta--primary"> Begin nu </a> <ul class="pt__features"> <li class="pt__feature"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none"> <circle cx="8" cy="8" r="8" fill="currentColor" opacity="0.1"></circle> <path d="M5 8.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg> Google + Meta Ads </li><li class="pt__feature"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none"> <circle cx="8" cy="8" r="8" fill="currentColor" opacity="0.1"></circle> <path d="M5 8.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg> SEO basis </li><li class="pt__feature"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none"> <circle cx="8" cy="8" r="8" fill="currentColor" opacity="0.1"></circle> <path d="M5 8.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg> Wekelijkse call </li><li class="pt__feature"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none"> <circle cx="8" cy="8" r="8" fill="currentColor" opacity="0.1"></circle> <path d="M5 8.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg> 3 campagnes </li><li class="pt__feature"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none"> <circle cx="8" cy="8" r="8" fill="currentColor" opacity="0.1"></circle> <path d="M5 8.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg> Prioriteit support </li><li class="pt__feature"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none"> <circle cx="8" cy="8" r="8" fill="currentColor" opacity="0.1"></circle> <path d="M5 8.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg> Live dashboard </li> </ul> </div><div class="pt__plan"> <div class="pt__plan-header"> <h3 class="pt__plan-name">Enterprise</h3> <p class="pt__plan-desc">Alle kanalen, dedicated team.</p> </div> <div class="pt__price-wrap"> <div class="pt__price" data-monthly="Op maat" data-yearly="Op maat"> <span class="pt__currency">€</span> <span class="pt__amount">Op maat</span> </div> <span class="pt__period">/ maand</span> </div> <a href="#" class="pt__cta"> Neem contact op </a> <ul class="pt__features"> <li class="pt__feature"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none"> <circle cx="8" cy="8" r="8" fill="currentColor" opacity="0.1"></circle> <path d="M5 8.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg> Alle kanalen </li><li class="pt__feature"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none"> <circle cx="8" cy="8" r="8" fill="currentColor" opacity="0.1"></circle> <path d="M5 8.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg> Dedicated manager </li><li class="pt__feature"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none"> <circle cx="8" cy="8" r="8" fill="currentColor" opacity="0.1"></circle> <path d="M5 8.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg> Maatwerk strategie </li><li class="pt__feature"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none"> <circle cx="8" cy="8" r="8" fill="currentColor" opacity="0.1"></circle> <path d="M5 8.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg> SLA </li><li class="pt__feature"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none"> <circle cx="8" cy="8" r="8" fill="currentColor" opacity="0.1"></circle> <path d="M5 8.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg> Whitelabel opties </li> </ul> </div> </div> </div> </section>
<style>
.pt{background:var(--color-bg, #fff);padding:5rem 1.5rem}
.pt__inner{max-width:1100px;margin:0 auto}
.pt__header{text-align:center;margin-bottom:2.5rem}
.pt__eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent, #6366f1);margin-bottom:.75rem}
.pt__title{font-size:clamp(1.875rem,3vw,2.75rem);font-weight:800;letter-spacing:-.03em;color:var(--color-primary, #0a0a0a);margin-bottom:.875rem}
.pt__title em{font-style:normal;color:var(--color-accent, #6366f1)}
.pt__sub{font-size:1.0625rem;color:var(--color-muted, #6b7280);line-height:1.6}
.pt__toggle-wrap{display:flex;align-items:center;justify-content:center;gap:.875rem;margin-bottom:3rem}
.pt__toggle-label{display:flex;align-items:center;gap:.5rem;font-size:.9375rem;font-weight:500;color:var(--color-primary, #0a0a0a)}
.pt__toggle{width:48px;height:26px;background:#0000001f;border:none;border-radius:100px;cursor:pointer;position:relative;transition:background .25s}
.pt__toggle[aria-checked=true]{background:var(--color-accent, #6366f1)}
.pt__toggle-thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition: transform .25s;box-shadow:0 1px 3px #00000026}
.pt__toggle[aria-checked=true] .pt__toggle-thumb{left:calc(100% - 23px)}
.pt__discount-badge{background:color-mix(in srgb,var(--color-accent, #6366f1) 12%,transparent);color:var(--color-accent, #6366f1);font-size:.75rem;font-weight:700;padding:.2rem .6rem;border-radius:100px}
.pt__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem;align-items:start}
.pt__plan{border:1.5px solid rgba(0,0,0,.08);border-radius:calc(var(--radius, .5rem) * 2);padding:2rem;position:relative;background:#fff;transition:box-shadow .2s}
.pt__plan:hover{box-shadow:0 8px 32px #00000012}
.pt__plan--popular{border-color:var(--color-accent, #6366f1);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-accent, #6366f1) 15%,transparent)}
.pt__popular-badge{position:absolute;top:-.75rem;left:50%;transform:translate(-50%);background:var(--color-accent, #6366f1);color:#fff;font-size:.75rem;font-weight:700;padding:.3rem 1rem;border-radius:100px;white-space:nowrap}
.pt__plan-name{font-size:1.125rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin-bottom:.375rem}
.pt__plan-desc{font-size:.875rem;color:var(--color-muted, #6b7280);margin-bottom:1.5rem}
.pt__price-wrap{display:flex;align-items:flex-end;gap:.25rem;margin-bottom:1.5rem}
.pt__price{display:flex;align-items:flex-start;gap:.125rem}
.pt__currency{font-size:1.25rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin-top:.5rem}
.pt__amount{font-size:3rem;font-weight:800;letter-spacing:-.04em;color:var(--color-primary, #0a0a0a);line-height:1}
.pt__period{font-size:.875rem;color:var(--color-muted, #6b7280);padding-bottom:.25rem}
.pt__cta{display:block;text-align:center;padding:.8125rem;border-radius:var(--radius, .5rem);font-weight:700;font-size:.9375rem;text-decoration:none;margin-bottom:1.75rem;border:1.5px solid rgba(0,0,0,.12);color:var(--color-primary, #0a0a0a);transition: opacity, transform, background-color, color, border-color, box-shadow, filter .2s}
.pt__cta:hover{border-color:var(--color-primary, #0a0a0a)}
.pt__cta--primary{background:var(--color-accent, #6366f1);color:#fff;border-color:transparent}
.pt__cta--primary:hover{filter:brightness(1.1);border-color:transparent}
.pt__features{list-style:none;display:flex;flex-direction:column;gap:.625rem;border-top:1px solid rgba(0,0,0,.07);padding-top:1.25rem}
.pt__feature{display:flex;align-items:flex-start;gap:.625rem;font-size:.9rem;color:var(--color-primary, #0a0a0a)}
.pt__feature svg{flex-shrink:0;margin-top:1px;color:var(--color-accent, #6366f1)}
.pt__grid{grid-template-columns:1fr}
</style>