src/components/social-proof/PartnerLogos.astro
---
// PartnerLogos, recovered from blurr-components.pages.dev
---
<section class="pl pl--light"> <div class="pl-inner"> <p class="pl-eyebrow">Gecertificeerde partners</p> <div class="pl-grid"> <div class="pl-partner"> <span class="pl-name">Google</span> <span class="pl-badge" style="background: #f59e0b">Premier Partner</span> </div><div class="pl-partner"> <span class="pl-name">Meta</span> <span class="pl-badge" style="background: #9ca3af">Business Partner</span> </div><div class="pl-partner"> <span class="pl-name">HubSpot</span> <span class="pl-badge" style="background: #6366f1">Certified</span> </div><div class="pl-partner"> <span class="pl-name">Semrush</span> <span class="pl-badge" style="background: #6366f1">Agency Partner</span> </div><div class="pl-partner"> <span class="pl-name">Klaviyo</span> <span class="pl-badge" style="background: #f59e0b">Master Partner</span> </div> </div> </div> </section>
<style>
.pl{padding:4rem 2rem}
.pl--white{background:#fff;border-top:1px solid #e5e7eb}
.pl--light{background:#f8fafc;border-top:1px solid #e5e7eb}
.pl-inner{max-width:1100px;margin:0 auto;text-align:center}
.pl-eyebrow{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9ca3af;margin:0 0 .75rem}
.pl-headline{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;color:#0a0a0a;letter-spacing:-.03em;margin:0 0 2.5rem}
.pl-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.pl-partner{display:flex;flex-direction:column;align-items:center;gap:.625rem;padding:1.5rem 2rem;border-radius:.875rem;min-width:140px;position:relative}
.pl--white .pl-partner{background:#f8fafc;border:1px solid #e5e7eb}
.pl--light .pl-partner{background:#fff;border:1px solid #e5e7eb;box-shadow:0 2px 10px #0000000a}
.pl-img{height:36px;width:auto;filter:grayscale(.4)}
.pl-name{font-size:1rem;font-weight:800;color:#374151}
.pl-badge{font-size:.6875rem;font-weight:700;padding:.2rem .625rem;background:var(--color-accent,#6366f1);color:#fff;border-radius:1rem;letter-spacing:.04em;text-transform:uppercase}
</style>