FeaturesShowcase Sections

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

<section class="fs" data-component="features-showcase"> <div class="fs__inner"> <!-- Header --> <div class="fs__header"> <p class="fs__pre">Onze aanpak</p> <h2 class="fs__headline">Alles wat je nodig hebt om te <em>groeien</em></h2> <p class="fs__sub">Eén bureau dat al je marketing kanalen beheert, optimaliseert en laat samenwerken.</p> </div> <!-- Showcase grid --> <div class="fs__body"> <!-- Feature list (left) --> <div class="fs__list"> <div class="fs__item" data-index="0"> <div class="fs__item-header"> <span class="fs__num">01</span> <span class="fs__tag">Paid Search</span> </div> <h3 class="fs__title">Google Ads</h3> <p class="fs__desc">Search, Shopping en Performance Max campagnes die direct omzet genereren.</p> <div class="fs__progress"><div class="fs__progress-bar"></div></div> </div><div class="fs__item" data-index="1"> <div class="fs__item-header"> <span class="fs__num">02</span> <span class="fs__tag">Paid Social</span> </div> <h3 class="fs__title">Social Media Ads</h3> <p class="fs__desc">Meta, TikTok en LinkedIn campagnes afgestemd op jouw doelgroep en doelen.</p> <div class="fs__progress"><div class="fs__progress-bar"></div></div> </div><div class="fs__item" data-index="2"> <div class="fs__item-header"> <span class="fs__num">03</span> <span class="fs__tag">Organisch</span> </div> <h3 class="fs__title">SEO &amp; Content</h3> <p class="fs__desc">Technische SEO, keyword strategie en content die organisch blijft groeien.</p> <div class="fs__progress"><div class="fs__progress-bar"></div></div> </div><div class="fs__item" data-index="3"> <div class="fs__item-header"> <span class="fs__num">04</span> <span class="fs__tag">Data</span> </div> <h3 class="fs__title">Analytics &amp; Dashboards</h3> <p class="fs__desc">GA4, conversietracking en live dashboards zodat je altijd weet hoe het gaat.</p> <div class="fs__progress"><div class="fs__progress-bar"></div></div> </div> </div> <!-- Preview panel (right, sticky) --> <div class="fs__preview-wrap"> <div class="fs__preview-stack"> <div data-slide="0" class="fs__preview-slide fs__preview-slide--active"> <div class="fs__preview-placeholder"> <span class="fs__preview-num">01</span> <span class="fs__preview-title-lg">Google Ads</span> </div> </div><div data-slide="1" class="fs__preview-slide"> <div class="fs__preview-placeholder"> <span class="fs__preview-num">02</span> <span class="fs__preview-title-lg">Social Media Ads</span> </div> </div><div data-slide="2" class="fs__preview-slide"> <div class="fs__preview-placeholder"> <span class="fs__preview-num">03</span> <span class="fs__preview-title-lg">SEO &amp; Content</span> </div> </div><div data-slide="3" class="fs__preview-slide"> <div class="fs__preview-placeholder"> <span class="fs__preview-num">04</span> <span class="fs__preview-title-lg">Analytics &amp; Dashboards</span> </div> </div> </div> </div> </div> </div> </section>

<style>
.fs{padding:6rem 1.5rem;background:var(--color-bg, #fff);overflow:hidden}
.fs__inner{max-width:1200px;margin:0 auto}
.fs__header{text-align:center;max-width:640px;margin:0 auto 5rem}
.fs__pre{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent, #6366f1);margin-bottom:1rem}
.fs__headline{font-size:clamp(2rem,4vw,3.25rem);font-weight:800;line-height:1.1;letter-spacing:-.035em;color:var(--color-primary, #0a0a0a);margin-bottom:1rem}
.fs__headline em{font-style:normal;color:var(--color-accent, #6366f1)}
.fs__sub{font-size:1.0625rem;line-height:1.65;color:var(--color-muted, #6b7280)}
.fs__body{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.fs__list{display:flex;flex-direction:column;gap:0}
.fs__item{padding:2rem 0;border-top:1px solid rgba(0,0,0,.07);cursor:pointer;transition: opacity .3s}
.fs__item:last-child{border-bottom:1px solid rgba(0,0,0,.07)}
.fs__item--active{padding:2rem 1.5rem;background:var(--color-bg, #fff);border-radius:.75rem;box-shadow:0 2px 24px #0000000f;border-top-color:transparent}
.fs__item-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.625rem}
.fs__num{font-size:.6875rem;font-weight:700;letter-spacing:.1em;color:var(--color-muted, #6b7280);font-feature-settings:"tnum"}
.fs__tag{font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:#6366f114;color:var(--color-accent, #6366f1);padding:.1875rem .5rem;border-radius:999px}
.fs__title{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;color:var(--color-primary, #0a0a0a);margin-bottom:.5rem}
.fs__desc{font-size:.9375rem;line-height:1.65;color:var(--color-muted, #6b7280);max-height:0;overflow:hidden;/* blurr-lint-disable A2 */ transition:max-height .35s cubic-bezier(.22,1,.36,1),opacity .3s;opacity:0}
.fs__item--active .fs__desc{max-height:160px;opacity:1}
.fs__progress{height:2px;background:#0000000f;border-radius:1px;margin-top:1rem;overflow:hidden;opacity:0;transition:opacity .3s}
.fs__item--active .fs__progress{opacity:1}
.fs__progress-bar{height:100%;background:var(--color-accent, #6366f1);border-radius:1px;width:0%}
.fs__item--active .fs__progress-bar{animation:fs-progress 5s linear forwards}
.fs__preview-wrap{position:sticky;top:2rem}
.fs__preview-stack{position:relative;width:100%;aspect-ratio:4/3;border-radius:1rem;overflow:hidden;background:#f3f4f6;box-shadow:0 8px 48px #0000001a}
.fs__preview-slide{position:absolute;inset:0;opacity:0;transform:scale(.97) translateY(8px);transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1);pointer-events:none}
.fs__preview-slide--active{opacity:1;transform:scale(1) translateY(0);pointer-events:auto}
.fs__preview-img{width:100%;height:100%;object-fit:cover}
.fs__preview-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:linear-gradient(135deg,#f0f1ff,#e8eaff);padding:2rem;text-align:center}
.fs__preview-num{font-size:4rem;font-weight:900;color:var(--color-accent, #6366f1);opacity:.2;line-height:1;letter-spacing:-.05em}
.fs__preview-title-lg{font-size:1.5rem;font-weight:700;color:var(--color-primary, #0a0a0a);letter-spacing:-.02em}
.fs__body{grid-template-columns:1fr}
.fs__preview-wrap{position:relative;top:0;order:-1}
.fs__preview-stack{aspect-ratio:16/9}
</style>