src/components/icon/IconAccordion.astro
---
// IconAccordion, recovered from blurr-components.pages.dev
---
<div class="ia-wrap"> <details class="ia-item" open> <summary class="ia-summary"> <span class="ia-icon">→</span> <span class="ia-title">Strategie op maat</span> <span class="ia-chevron">▾</span> </summary> <div class="ia-body"> <p>We beginnen elk project met een diepgaande analyse van jouw markt, doelgroep en concurrenten. Zo bouwen we campagnes die écht werken.</p> </div> </details><details class="ia-item"> <summary class="ia-summary"> <span class="ia-icon">→</span> <span class="ia-title">Data-gedreven aanpak</span> <span class="ia-chevron">▾</span> </summary> <div class="ia-body"> <p>Elk besluit wordt onderbouwd met harde cijfers. Van A/B-tests tot heatmaps, we optimaliseren continu op basis van data.</p> </div> </details><details class="ia-item"> <summary class="ia-summary"> <span class="ia-icon">→</span> <span class="ia-title">Snelle lancering</span> <span class="ia-chevron">▾</span> </summary> <div class="ia-body"> <p>Van briefing tot live campagne in twee weken. Ons team werkt gestructureerd en snel zonder in te leveren op kwaliteit.</p> </div> </details><details class="ia-item"> <summary class="ia-summary"> <span class="ia-icon"></span> <span class="ia-title">Continue optimalisatie</span> <span class="ia-chevron">▾</span> </summary> <div class="ia-body"> <p>We stoppen niet bij de lancering. Maandelijkse rapportages en doorlopende optimalisatie zorgen voor groeiende resultaten.</p> </div> </details> </div>
<style>
.ia-wrap{--color-accent: #6366f1;--color-primary: #0a0a0a;max-width:680px;margin:0 auto;font-family:system-ui,sans-serif;display:flex;flex-direction:column;gap:8px}
.ia-item{border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;transition:border-color .2s}
.ia-item[open]{border-color:var(--color-accent)}
.ia-summary{display:flex;align-items:center;gap:12px;padding:16px 20px;cursor:pointer;list-style:none;user-select:none;background:#fff}
.ia-summary::-webkit-details-marker{display:none}
.ia-icon{font-size:1.4rem;flex-shrink:0;width:32px;text-align:center}
.ia-title{flex:1;font-size:1rem;font-weight:600;color:var(--color-primary)}
.ia-chevron{font-size:1.1rem;color:var(--color-accent);transition:transform .25s}
.ia-item[open] .ia-chevron{transform:rotate(180deg)}
.ia-body{padding:0 20px 18px 64px;background:#fafafa}
.ia-body p{margin:0;font-size:.925rem;line-height:1.65;color:#374151}
</style>