src/components/icon/IconWithText.astro
---
// IconWithText, recovered from blurr-components.pages.dev
---
<div class="iwt-wrap"> <div class="iwt-icon-col"> <div class="iwt-icon-ring"> <span class="iwt-icon">→</span> </div> </div> <div class="iwt-text-col"> <span class="iwt-sub">Data-driven beslissingen voor maximale ROI.</span> <h2 class="iwt-headline">Slimme marketing keuzes</h2> <p class="iwt-body">BLURR is geen traditioneel bureau. We werken als verlengstuk van jouw team, strategisch, transparant en volledig gericht op resultaten die tellen. Van de eerste campagne tot een volledig geautomatiseerd marketing ecosysteem.</p> </div> </div>
<style>
.iwt-wrap{--color-accent: #6366f1;--color-primary: #0a0a0a;display:flex;gap:32px;align-items:flex-start;padding:40px 32px;font-family:system-ui,sans-serif;max-width:720px}
.iwt-wrap{flex-direction:column}
.iwt-icon-col{flex-shrink:0}
.iwt-icon-ring{width:80px;height:80px;border-radius:20px;background:linear-gradient(135deg,#6366f1,#818cf8);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px #6366f14d}
.iwt-icon{font-size:2rem}
.iwt-text-col{flex:1;display:flex;flex-direction:column;gap:8px}
.iwt-sub{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-accent)}
.iwt-headline{margin:0;font-size:1.5rem;font-weight:800;color:var(--color-primary);letter-spacing:-.02em;line-height:1.25}
.iwt-body{margin:0;font-size:.925rem;line-height:1.7;color:#4b5563}
</style>