src/components/sections/PricingCompact.astro
---
// PricingCompact, recovered from blurr-components.pages.dev
---
<section class="pc" data-component="pricing-compact"> <div class="pc__inner"> <div class="pc__header"> <p class="pc__pre">Tarieven</p> <h2 class="pc__headline">Vergelijk onze <em>pakketten</em></h2> <p class="pc__sub">Transparant en eerlijk. Geen verborgen kosten.</p> </div> <div class="pc__table-wrap"> <div class="pc__table" style="--cols:4"> <!-- Header row: plan names --> <div class="pc__row pc__row--header"> <div class="pc__cell pc__cell--label"></div> <div class="pc__cell pc__cell--plan"> <span class="pc__plan-name">Starter</span> <div class="pc__price-wrap"> <span class="pc__price">€299</span> <span class="pc__period">/mnd</span> </div> <p class="pc__plan-desc">Voor starters</p> <a href="#" class="pc__cta"> Begin nu </a> </div><div class="pc__cell pc__cell--plan pc__cell--highlighted"> <span class="pc__badge">Popular</span> <span class="pc__plan-name">Groei</span> <div class="pc__price-wrap"> <span class="pc__price">€599</span> <span class="pc__period">/mnd</span> </div> <p class="pc__plan-desc">Meest gekozen</p> <a href="#" class="pc__cta pc__cta--primary"> Begin nu </a> </div><div class="pc__cell pc__cell--plan"> <span class="pc__plan-name">Enterprise</span> <div class="pc__price-wrap"> <span class="pc__price">Op maat</span> </div> <p class="pc__plan-desc">Alles inbegrepen</p> <a href="#" class="pc__cta"> Contact </a> </div> </div> <!-- Feature rows --> <div class="pc__row"> <div class="pc__cell pc__cell--label">Google Ads</div> <div class="pc__cell"> <svg class="pc__check" width="18" height="18" viewBox="0 0 18 18" fill="none"> <path d="M3.5 9l4 4 7-7" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </div><div class="pc__cell pc__cell--highlighted"> <svg class="pc__check" width="18" height="18" viewBox="0 0 18 18" fill="none"> <path d="M3.5 9l4 4 7-7" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </div><div class="pc__cell"> <svg class="pc__check" width="18" height="18" viewBox="0 0 18 18" fill="none"> <path d="M3.5 9l4 4 7-7" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </div> </div><div class="pc__row"> <div class="pc__cell pc__cell--label">Meta Ads</div> <div class="pc__cell"> <svg class="pc__cross" width="18" height="18" viewBox="0 0 18 18" fill="none"> <path d="M5 5l8 8M13 5l-8 8" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"></path> </svg> </div><div class="pc__cell pc__cell--highlighted"> <svg class="pc__check" width="18" height="18" viewBox="0 0 18 18" fill="none"> <path d="M3.5 9l4 4 7-7" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </div><div class="pc__cell"> <svg class="pc__check" width="18" height="18" viewBox="0 0 18 18" fill="none"> <path d="M3.5 9l4 4 7-7" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </div> </div><div class="pc__row"> <div class="pc__cell pc__cell--label">SEO</div> <div class="pc__cell"> <svg class="pc__cross" width="18" height="18" viewBox="0 0 18 18" fill="none"> <path d="M5 5l8 8M13 5l-8 8" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"></path> </svg> </div><div class="pc__cell pc__cell--highlighted"> <svg class="pc__check" width="18" height="18" viewBox="0 0 18 18" fill="none"> <path d="M3.5 9l4 4 7-7" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </div><div class="pc__cell"> <svg class="pc__check" width="18" height="18" viewBox="0 0 18 18" fill="none"> <path d="M3.5 9l4 4 7-7" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </div> </div><div class="pc__row"> <div class="pc__cell pc__cell--label">Campagnes</div> <div class="pc__cell"> <span class="pc__val">1</span> </div><div class="pc__cell pc__cell--highlighted"> <span class="pc__val">3</span> </div><div class="pc__cell"> <span class="pc__val">Onbeperkt</span> </div> </div><div class="pc__row"> <div class="pc__cell pc__cell--label">Support</div> <div class="pc__cell"> <span class="pc__val">E-mail</span> </div><div class="pc__cell pc__cell--highlighted"> <span class="pc__val">Prioriteit</span> </div><div class="pc__cell"> <span class="pc__val">Dedicated</span> </div> </div><div class="pc__row"> <div class="pc__cell pc__cell--label">Rapportage</div> <div class="pc__cell"> <span class="pc__val">Maandelijks</span> </div><div class="pc__cell pc__cell--highlighted"> <span class="pc__val">Wekelijks</span> </div><div class="pc__cell"> <span class="pc__val">Real-time</span> </div> </div> </div> </div> <p class="pc__note">Alle prijzen excl. BTW. Advertentiebudget is apart.</p> </div> </section>
<style>
.pc{padding:6rem 1.5rem;background:var(--color-bg, #fff)}
.pc__inner{max-width:1100px;margin:0 auto}
.pc__header{text-align:center;max-width:600px;margin:0 auto 4rem}
.pc__pre{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent, #6366f1);margin-bottom:.875rem}
.pc__headline{font-size:clamp(1.75rem,3.5vw,3rem);font-weight:800;letter-spacing:-.035em;line-height:1.1;color:var(--color-primary, #0a0a0a);margin-bottom:.875rem}
.pc__headline em{font-style:normal;color:var(--color-accent, #6366f1)}
.pc__sub{font-size:1rem;line-height:1.65;color:var(--color-muted, #6b7280)}
.pc__table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:1rem;border:1px solid rgba(0,0,0,.07)}
.pc__table{min-width:640px;display:grid;grid-template-columns:1.5fr repeat(calc(var(--cols) - 1),1fr)}
.pc__row{display:contents}
.pc__cell{padding:1.125rem 1.25rem;border-bottom:1px solid rgba(0,0,0,.05);display:flex;align-items:center;justify-content:center;font-size:.9375rem;color:var(--color-primary, #0a0a0a)}
.pc__cell--label{justify-content:flex-start;font-size:.875rem;color:var(--color-muted, #6b7280)}
.pc__cell--highlighted{background:#6366f10a}
.pc__row--header .pc__cell{flex-direction:column;align-items:center;gap:.5rem;padding:2rem 1.25rem;border-bottom:2px solid rgba(0,0,0,.07)}
.pc__row--header .pc__cell--highlighted{background:#6366f10f;border-bottom-color:var(--color-accent, #6366f1)}
.pc__badge{font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--color-accent, #6366f1);color:#fff;padding:.1875rem .625rem;border-radius:999px}
.pc__plan-name{font-size:.875rem;font-weight:700;letter-spacing:.02em;color:var(--color-primary, #0a0a0a)}
.pc__price-wrap{display:flex;align-items:baseline;gap:.1875rem}
.pc__price{font-size:2rem;font-weight:900;letter-spacing:-.04em;color:var(--color-primary, #0a0a0a);line-height:1}
.pc__period{font-size:.8125rem;color:var(--color-muted, #6b7280)}
.pc__plan-desc{font-size:.8125rem;color:var(--color-muted, #6b7280);text-align:center;line-height:1.4}
.pc__cta{display:inline-flex;align-items:center;background:#0000000f;color:var(--color-primary, #0a0a0a);padding:.625rem 1.25rem;border-radius:var(--radius, .5rem);font-size:.875rem;font-weight:700;text-decoration:none;transition:background .2s;margin-top:.25rem}
.pc__cta:hover{background:#0000001a}
.pc__cta--primary{background:var(--color-accent, #6366f1);color:#fff}
.pc__cta--primary:hover{background:#4f52d4}
.pc__check{color:var(--color-accent, #6366f1)}
.pc__cross{color:#0003}
.pc__val{font-size:.875rem;font-weight:600;color:var(--color-primary, #0a0a0a)}
.pc__note{text-align:center;font-size:.8125rem;color:var(--color-muted, #6b7280);margin-top:1.5rem}
</style>