src/components/sections/PricingMenu.astro
---
// PricingMenu, recovered from blurr-components.pages.dev
---
<section class="pm" data-component="pricing-menu"> <div class="pm__inner"> <div class="pm__header"> <p class="pm__eyebrow">Diensten & tarieven</p> <h2 class="pm__title">Wat kost het?</h2> <p class="pm__sub">Transparante tarieven. Alles op maat, maar altijd helder.</p> </div> <div class="pm__categories"> <div class="pm__category"> <h3 class="pm__cat-heading">Online Adverteren</h3> <div class="pm__items"> <div class="pm__item"> <div class="pm__item-left"> <div class="pm__item-name"> Google Ads, Starter </div> <div class="pm__item-desc">Tot €1.000 ad spend per maand</div> </div> <div class="pm__item-price"> <span class="pm__price">€299</span> <span class="pm__unit">/mnd</span> </div> </div><div class="pm__item pm__item--popular"> <div class="pm__item-left"> <div class="pm__item-name"> Google Ads, Groei <span class="pm__popular">Populair</span> </div> <div class="pm__item-desc">Tot €5.000 ad spend per maand</div> </div> <div class="pm__item-price"> <span class="pm__price">€599</span> <span class="pm__unit">/mnd</span> </div> </div><div class="pm__item"> <div class="pm__item-left"> <div class="pm__item-name"> Google Ads, Scale </div> <div class="pm__item-desc">Onbeperkt ad spend</div> </div> <div class="pm__item-price"> <span class="pm__price">€999</span> <span class="pm__unit">/mnd</span> </div> </div><div class="pm__item"> <div class="pm__item-left"> <div class="pm__item-name"> Meta Ads </div> <div class="pm__item-desc">Facebook en Instagram</div> </div> <div class="pm__item-price"> <span class="pm__price">€399</span> <span class="pm__unit">/mnd</span> </div> </div> </div> </div><div class="pm__category"> <h3 class="pm__cat-heading">SEO</h3> <div class="pm__items"> <div class="pm__item"> <div class="pm__item-left"> <div class="pm__item-name"> SEO Audit </div> <div class="pm__item-desc">Eenmalig</div> </div> <div class="pm__item-price"> <span class="pm__price">€495</span> </div> </div><div class="pm__item"> <div class="pm__item-left"> <div class="pm__item-name"> SEO Maandpakket </div> <div class="pm__item-desc">Continu optimalisatie</div> </div> <div class="pm__item-price"> <span class="pm__price">€699</span> <span class="pm__unit">/mnd</span> </div> </div> </div> </div><div class="pm__category"> <h3 class="pm__cat-heading">Webdesign</h3> <div class="pm__items"> <div class="pm__item"> <div class="pm__item-left"> <div class="pm__item-name"> Landing page </div> <div class="pm__item-desc">Op maat gebouwde conversiepagina</div> </div> <div class="pm__item-price"> <span class="pm__price">v.a. €995</span> </div> </div><div class="pm__item"> <div class="pm__item-left"> <div class="pm__item-name"> Complete website </div> <div class="pm__item-desc">5-10 pagina's, Astro + Cloudflare</div> </div> <div class="pm__item-price"> <span class="pm__price">v.a. €2.495</span> </div> </div> </div> </div> </div> <div class="pm__footer"> <p class="pm__note">Alle prijzen excl. BTW. Advertentiebudget is apart.</p> <a href="#" class="pm__cta">Bespreek je behoefte</a> </div> </div> </section>
<style>
.pm{background:var(--color-bg, #fff);padding:5rem 1.5rem}
.pm__inner{max-width:800px;margin:0 auto}
.pm__header{text-align:center;margin-bottom:3.5rem}
.pm__eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent, #6366f1);margin-bottom:.75rem}
.pm__title{font-size:clamp(1.875rem,3vw,2.75rem);font-weight:800;letter-spacing:-.03em;color:var(--color-primary, #0a0a0a);margin-bottom:.875rem}
.pm__title em{font-style:normal;color:var(--color-accent, #6366f1)}
.pm__sub{font-size:1.0625rem;color:var(--color-muted, #6b7280);line-height:1.6}
.pm__categories{display:flex;flex-direction:column;gap:2.5rem}
.pm__cat-heading{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted, #6b7280);margin-bottom:.75rem;padding-bottom:.625rem;border-bottom:1px solid rgba(0,0,0,.07)}
.pm__items{display:flex;flex-direction:column}
.pm__item{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.25rem 0;border-bottom:1px solid rgba(0,0,0,.05)}
.pm__item:last-child{border-bottom:none}
.pm__item--popular{background:color-mix(in srgb,var(--color-accent, #6366f1) 5%,transparent);margin:0 -1rem;padding:1.25rem 1rem;border-radius:var(--radius, .5rem);border-bottom:none}
.pm__item-name{font-size:1rem;font-weight:600;color:var(--color-primary, #0a0a0a);display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem}
.pm__popular{display:inline-block;font-size:.6875rem;font-weight:700;background:var(--color-accent, #6366f1);color:#fff;padding:.15rem .5rem;border-radius:100px}
.pm__item-desc{font-size:.875rem;color:var(--color-muted, #6b7280);line-height:1.5}
.pm__item-price{text-align:right;flex-shrink:0}
.pm__price{font-size:1.25rem;font-weight:800;letter-spacing:-.02em;color:var(--color-primary, #0a0a0a)}
.pm__unit{font-size:.8125rem;color:var(--color-muted, #6b7280)}
.pm__footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:2.5rem;border-top:1px solid rgba(0,0,0,.07);margin-top:2.5rem;flex-wrap:wrap}
.pm__note{font-size:.875rem;color:var(--color-muted, #6b7280)}
.pm__cta{display:inline-block;background:var(--color-accent, #6366f1);color:#fff;padding:.8125rem 1.75rem;border-radius:var(--radius, .5rem);font-weight:700;font-size:.9375rem;text-decoration:none;transition:filter .2s}
.pm__cta:hover{filter:brightness(1.1)}
</style>