ServiceCards Sections

---
// ServiceCards, recovered from blurr-components.pages.dev
---

<section class="sc" data-service-cards> <div class="sc-inner"> <div class="sc-header"> <h2 class="sc-headline">Wat wij doen</h2> <p class="sc-sub">Van advertenties tot organisch verkeer, wij pakken het volledig aan.</p> </div> <div class="sc-grid sc-grid--3"> <a href="#" class="sc-card sc-card--link"> <span class="sc-tag">Populair</span> <span class="sc-icon">→</span> <h3 class="sc-title">Google Ads</h3> <p class="sc-body">Search, Shopping en Performance Max campagnes die converteren.</p>  <span class="sc-arrow">→</span> </a><a href="#" class="sc-card sc-card--link">  <span class="sc-icon"></span> <h3 class="sc-title">Meta Ads</h3> <p class="sc-body">Facebook en Instagram campagnes met precieze doelgroeptargeting.</p>  <span class="sc-arrow">→</span> </a><a href="#" class="sc-card sc-card--link">  <span class="sc-icon"></span> <h3 class="sc-title">SEO</h3> <p class="sc-body">Duurzame organische groei via technische en content SEO.</p>  <span class="sc-arrow">→</span> </a><a href="#" class="sc-card sc-card--link">  <span class="sc-icon">→</span> <h3 class="sc-title">Analytics</h3> <p class="sc-body">GA4 inrichting, dashboards en datagedreven beslissingen.</p>  <span class="sc-arrow">→</span> </a><a href="#" class="sc-card sc-card--link">  <span class="sc-icon"></span> <h3 class="sc-title">E-mail Marketing</h3> <p class="sc-body">Geautomatiseerde flows en nieuwsbrieven die verkopen.</p>  <span class="sc-arrow">→</span> </a><a href="#" class="sc-card sc-card--link">  <span class="sc-icon">→</span> <h3 class="sc-title">Strategie</h3> <p class="sc-body">Marketingstrategie op maat. Van funnel tot budget-allocatie.</p> <span class="sc-price">Vanaf €995/mnd</span> <span class="sc-arrow">→</span> </a> </div> </div> </section>

<style>
.sc{padding:5rem 2rem;background:#f8fafc}
.sc-inner{max-width:1280px;margin:0 auto}
.sc-header{text-align:center;max-width:640px;margin:0 auto 3.5rem}
.sc-headline{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:800;letter-spacing:-.03em;margin:0 0 .75rem}
.sc-sub{font-size:1.0625rem;color:#6b7280;line-height:1.6;margin:0}
.sc-grid{display:grid;gap:1.25rem;grid-template-columns:1fr}
.sc-grid--2,.sc-grid--3,.sc-grid--4{grid-template-columns:1fr 1fr}
.sc-grid--3{grid-template-columns:repeat(3,1fr)}
.sc-grid--4{grid-template-columns:repeat(4,1fr)}
.sc-card{position:relative;background:#fff;border-radius:1rem;padding:2rem;display:flex;flex-direction:column;gap:.75rem;border:1px solid #e2e8f0;transition:border-color .2s,box-shadow .2s,transform .2s}
.sc-card--link{text-decoration:none;color:inherit;cursor:pointer}
.sc-card:hover,.sc-card--link:hover{border-color:var(--color-accent,#6366f1);box-shadow:0 8px 30px #6366f114;transform:translateY(-2px)}
.sc-tag{font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent,#6366f1);background:#6366f114;padding:.2rem .6rem;border-radius:100px;width:fit-content}
.sc-icon{font-size:1.75rem}
.sc-title{font-size:1.0625rem;font-weight:700;color:#0a0a0a;margin:0}
.sc-body{font-size:.9375rem;color:#6b7280;line-height:1.6;margin:0;flex:1}
.sc-price{font-size:.875rem;font-weight:700;color:#0a0a0a;margin-top:auto}
.sc-arrow{font-size:1.25rem;color:var(--color-accent,#6366f1);transition:transform .2s;margin-top:auto}
.sc-card:hover .sc-arrow{transform:translate(4px)}
</style>