src/components/sections/ContentProCons.astro
---
// ContentProCons, recovered from blurr-components.pages.dev
---
<div class="cpc-wrap"> <h2 class="cpc-heading">Voordelen & nadelen van performance marketing</h2> <div class="cpc-grid"> <div class="cpc-col"> <div class="cpc-col-header cpc-col-header--pro"> <span class="cpc-col-icon" aria-hidden="true"></span>
Voordelen
</div> <ul class="cpc-list"> <li class="cpc-item cpc-item--pro"> <span class="cpc-check" aria-hidden="true">+</span> Directe meetbaarheid van resultaten </li><li class="cpc-item cpc-item--pro"> <span class="cpc-check" aria-hidden="true">+</span> Volledig stuurbaar budget </li><li class="cpc-item cpc-item--pro"> <span class="cpc-check" aria-hidden="true">+</span> Snel schaalbaar </li> </ul> </div> <div class="cpc-col"> <div class="cpc-col-header cpc-col-header--con"> <span class="cpc-col-icon" aria-hidden="true"></span>
Nadelen
</div> <ul class="cpc-list"> <li class="cpc-item cpc-item--con"> <span class="cpc-check" aria-hidden="true">−</span> Vereist initiële investering om te testen </li><li class="cpc-item cpc-item--con"> <span class="cpc-check" aria-hidden="true">−</span> Resultaten stoppen direct wanneer budget stopt </li> </ul> </div> </div> </div>
<style>
.cpc-wrap{padding:2rem 0}
.cpc-heading{font-size:1.75rem;font-weight:800;color:var(--color-primary, #0a0a0a);margin:0 0 1.75rem}
.cpc-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.cpc-grid{grid-template-columns:1fr}
.cpc-col-header{display:flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:.75rem 1rem;border-radius:6px 6px 0 0}
.cpc-col-header--pro{background:#dcfce7;color:#15803d}
.cpc-col-header--con{background:#fee2e2;color:#b91c1c}
.cpc-col-icon{font-size:1rem}
.cpc-list{list-style:none;padding:0;margin:0;border:1px solid #e5e5e5;border-top:none;border-radius:0 0 6px 6px;overflow:hidden}
.cpc-item{display:flex;align-items:flex-start;gap:.75rem;padding:.85rem 1rem;font-size:.95rem;line-height:1.5;color: #e8e8e8;border-bottom:1px solid #f0f0f0}
.cpc-item:last-child{border-bottom:none}
.cpc-check{font-weight:900;font-size:1.1rem;flex-shrink:0;margin-top:-.05rem}
.cpc-item--pro .cpc-check{color:#22c55e}
.cpc-item--con .cpc-check{color:#ef4444}
</style>