IconShowcase icon

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

<div class="ishow-wrap"> <div class="ishow-icon-area"> <div class="ishow-ring"> <span class="ishow-icon">&rarr;</span> </div> </div> <div class="ishow-content"> <h2 class="ishow-headline">Groei op autopilot</h2> <p class="ishow-sub">BLURR combineert bewezen strategie met slimme uitvoering. Het resultaat: meer leads, betere conversies en duurzame groei.</p> <ul class="ishow-list"> <li class="ishow-list-item"> <span class="ishow-check">&#10003;</span> Strategisch marketingadvies op maat </li><li class="ishow-list-item"> <span class="ishow-check">&#10003;</span> Campagnes op Google, Meta en LinkedIn </li><li class="ishow-list-item"> <span class="ishow-check">&#10003;</span> Content die je klant overtuigt </li><li class="ishow-list-item"> <span class="ishow-check">&#10003;</span> Transparante maandrapportages </li> </ul> </div> </div>

<style>
.ishow-wrap{--color-accent: #6366f1;--color-primary: #0a0a0a;display:flex;align-items:center;gap:48px;padding:48px 32px;font-family:system-ui,sans-serif;max-width:840px;margin:0 auto}
.ishow-wrap{flex-direction:column;text-align:center}
.ishow-icon-area{flex-shrink:0}
.ishow-ring{width:120px;height:120px;border-radius:50%;border:3px solid var(--color-accent);display:flex;align-items:center;justify-content:center;background:#f5f3ff;animation:ishow-spin-ring 8s linear infinite}
.ishow-icon{font-size:3rem;display:block;animation:ishow-spin-ring 8s linear infinite reverse}
.ishow-content{flex:1}
.ishow-headline{margin:0 0 12px;font-size:1.75rem;font-weight:800;color:var(--color-primary);letter-spacing:-.02em}
.ishow-sub{margin:0 0 20px;font-size:.95rem;line-height:1.65;color:#4b5563}
.ishow-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ishow-list-item{display:flex;align-items:center;gap:10px;font-size:.9rem;font-weight:500;color:#1f2937}
.ishow-check{color:var(--color-accent);font-weight:800;font-size:1rem;flex-shrink:0}
</style>