HeroSplitReversed Hero

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

<section class="hsr" data-component="hero-split-reversed"> <div class="hsr__inner"> <!-- Image links --> <div class="hsr__visual"> <div class="hsr__img-frame"> <img data-allow-img src="/img/ext/photo-1553877522-43269d4ea984-w800-fc1c82.jpg" alt="" class="hsr__img" loading="eager" fetchpriority="high" decoding="async" > <div class="hsr__img-decor"></div> </div> </div> <!-- Text rechts --> <div class="hsr__content"> <h1 class="hsr__headline"><em>Slimmer</em> adverteren met minder budget</h1> <p class="hsr__sub">Wij optimaliseren je campagnes zodat elke euro rendeert. Bewezen aanpak, meetbaar resultaat.</p> <ul class="hsr__features"> <li class="hsr__feature"> <svg class="hsr__check" width="16" height="16" viewBox="0 0 16 16" fill="none"> <circle cx="8" cy="8" r="8" fill="currentColor" opacity="0.12"></circle> <path d="M5 8.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg> Campagnes live binnen 48 uur </li><li class="hsr__feature"> <svg class="hsr__check" width="16" height="16" viewBox="0 0 16 16" fill="none"> <circle cx="8" cy="8" r="8" fill="currentColor" opacity="0.12"></circle> <path d="M5 8.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg> Maandelijkse rapportage </li><li class="hsr__feature"> <svg class="hsr__check" width="16" height="16" viewBox="0 0 16 16" fill="none"> <circle cx="8" cy="8" r="8" fill="currentColor" opacity="0.12"></circle> <path d="M5 8.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg> Direct contact met je expert </li> </ul> <a href="#" class="hsr__cta">Gratis audit aanvragen</a> <div class="hsr__trust">  <p class="hsr__trust-text"> <strong>500+</strong> ondernemers gingen je voor </p> </div> </div> </div> </section>

<style>
.hsr{background:var(--color-bg, #fff);padding:5rem 1.5rem;overflow:hidden}
.hsr__inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.hsr__img-frame{position:relative}
.hsr__img{width:100%;height:520px;object-fit:cover;border-radius:calc(var(--radius, .5rem) * 2);display:block;position:relative;z-index:1}
.hsr__img-decor{position:absolute;inset:1.5rem -1.5rem -1.5rem 1.5rem;background:color-mix(in srgb,var(--color-accent, #6366f1) 12%,transparent);border-radius:calc(var(--radius, .5rem) * 2);z-index:0}
.hsr__headline{font-size:clamp(2rem,3.5vw,3.25rem);font-weight:800;line-height:1.1;letter-spacing:-.03em;color:var(--color-primary, #0a0a0a);margin-bottom:1.25rem}
.hsr__headline em{font-style:normal;color:var(--color-accent, #6366f1)}
.hsr__sub{font-size:1.0625rem;line-height:1.65;color:var(--color-muted, #6b7280);margin-bottom:1.5rem}
.hsr__features{list-style:none;margin-bottom:2rem;display:flex;flex-direction:column;gap:.625rem}
.hsr__feature{display:flex;align-items:center;gap:.625rem;font-size:.9375rem;color:var(--color-primary, #0a0a0a);font-weight:500}
.hsr__check{flex-shrink:0;color:var(--color-accent, #6366f1)}
.hsr__cta{display:inline-block;background:var(--color-accent, #6366f1);color:#fff;padding:.875rem 2rem;border-radius:var(--radius, .5rem);font-weight:700;font-size:.9375rem;text-decoration:none;margin-bottom:2rem;transition: opacity, transform, background-color, color, border-color, box-shadow, filter .2s}
.hsr__cta:hover{filter:brightness(1.1);transform:translateY(-1px)}
.hsr__trust{display:flex;align-items:center;gap:.875rem;padding-top:1.25rem;border-top:1px solid rgba(0,0,0,.07)}
.hsr__avatars{display:flex}
.hsr__avatar-img{width:32px;height:32px;border-radius:50%;border:2px solid var(--color-bg, #fff);object-fit:cover;margin-left:-8px}
.hsr__avatars .hsr__avatar-img:first-child{margin-left:0}
.hsr__trust-text{font-size:.8125rem;color:var(--color-muted, #6b7280)}
.hsr__trust-text strong{color:var(--color-primary, #0a0a0a);font-weight:700}
.hsr__inner{grid-template-columns:1fr;gap:2rem}
.hsr__img{height:280px}
.hsr__img-decor{display:none}
</style>