HeroPortfolio Hero

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

<section class="hpf__root" aria-label="Hero"> <div class="hpf__container"> <!-- Left: content --> <div class="hpf__left"> <span class="hpf__eyebrow">Selected Work</span> <h1 class="hpf__headline">Cases die <em>spreken</em></h1> <p class="hpf__sub">Van Google Ads tot volledige rebrands, resultaten die tellen.</p> <a href="#" class="hpf__cta"> <span>Alle projecten</span> <svg class="hpf__cta-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"> <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </a> </div> <!-- Right: case cards --> <div class="hpf__right" aria-label="Portfolio cases"> <article class="hpf__card" style="animation-delay: 0ms" data-index="0"> <a href="#" class="hpf__card-link" tabindex="0"> <div class="hpf__card-img-wrap"> <img data-allow-img src="/img/ext/photo-1460925895917-afdab827c52f-w600-18aff0.jpg" alt="TechCorp, 4.2× ROAS in 60 dagen" class="hpf__card-img" loading="eager" fetchpriority="high" decoding="async" > </div> <div class="hpf__card-body"> <span class="hpf__card-cat">Google Ads</span> <h2 class="hpf__card-title">TechCorp, 4.2× ROAS in 60 dagen</h2> </div> </a> </article><article class="hpf__card" style="animation-delay: 120ms" data-index="1"> <a href="#" class="hpf__card-link" tabindex="0"> <div class="hpf__card-img-wrap"> <img data-allow-img src="/img/ext/photo-1542744173-8e7e53415bb0-w600-d54003.jpg" alt="Modehaus, Rebranding &#38; Launch" class="hpf__card-img" loading="lazy" fetchpriority="auto" decoding="async" > </div> <div class="hpf__card-body"> <span class="hpf__card-cat">Brand + Web</span> <h2 class="hpf__card-title">Modehaus, Rebranding &amp; Launch</h2> </div> </a> </article><article class="hpf__card" style="animation-delay: 240ms" data-index="2"> <a href="#" class="hpf__card-link" tabindex="0"> <div class="hpf__card-img-wrap"> <img data-allow-img src="/img/ext/photo-1551434678-e076c223a692-w600-4c2995.jpg" alt="B2B SaaS, LinkedIn leadgen" class="hpf__card-img" loading="lazy" fetchpriority="auto" decoding="async" > </div> <div class="hpf__card-body"> <span class="hpf__card-cat">LinkedIn Ads</span> <h2 class="hpf__card-title">B2B SaaS, LinkedIn leadgen</h2> </div> </a> </article> </div> </div> </section>

<style>
.hpf__root{background:var(--color-primary);color:#fff;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:clamp(4rem, 5vw, 5rem) clamp(1.5rem, 6vw, 5rem)}
.hpf__container{width:100%;max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem, 6vw, 5rem);align-items:center}
.hpf__left{display:flex;flex-direction:column;gap:1.5rem}
.hpf__eyebrow{display:inline-block;font-size:.8125rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent);padding:.3rem .875rem;border:1px solid var(--color-accent);border-radius:999px;width:fit-content}
.hpf__headline{font-size:clamp(3.5rem, 5.5vw, 5rem);font-weight:900;line-height:1;letter-spacing:-.035em;color:#fff;margin:0}
.hpf__headline em{font-style:normal;color:var(--color-accent)}
.hpf__sub{font-size:clamp(1rem,1.4vw,1.1875rem);color:#fff9;line-height:1.7;margin:0;max-width:44ch}
.hpf__cta{display:inline-flex;align-items:center;gap:.5rem;background:var(--color-accent);color:#fff;text-decoration:none;font-weight:600;font-size:.9375rem;padding:.875rem 1.875rem;border-radius:var(--radius);width:fit-content;transition:opacity .2s,transform .2s}
.hpf__cta:hover{opacity:.88;transform:translateY(-1px)}
.hpf__cta-arrow{flex-shrink:0;transition:transform .2s}
.hpf__cta:hover .hpf__cta-arrow{transform:translate(3px)}
.hpf__right{display:flex;flex-direction:column;gap:1.25rem;position:relative}
.hpf__card{border-radius:calc(var(--radius) * 1.5);overflow:hidden;background:#161616;border:1px solid rgba(255,255,255,.07);animation:hpf-cardin .65s cubic-bezier(.16,1,.3,1) both;transition:transform .28s cubic-bezier(.16,1,.3,1);will-change:transform}
.hpf__card:hover{transform:translateY(-4px)}
.hpf__card[data-index="0"]{flex:0 0 auto}
.hpf__card-link{display:block;text-decoration:none;color:inherit}
.hpf__card-img-wrap{width:100%;overflow:hidden;aspect-ratio:16 / 7;background:#222}
.hpf__card[data-index="0"] .hpf__card-img-wrap{aspect-ratio:16 / 8}
.hpf__card-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.hpf__card:hover .hpf__card-img{transform:scale(1.04)}
.hpf__card-body{padding:1.125rem 1.375rem 1.25rem;display:flex;flex-direction:column;gap:.375rem}
.hpf__card-cat{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent)}
.hpf__card-title{font-size:clamp(1rem,1.5vw,1.1875rem);font-weight:700;color:#fff;margin:0;line-height:1.3}
.hpf__container{grid-template-columns:1fr}
.hpf__right{flex-direction:row;overflow-x:auto;gap:1rem;padding-bottom:.5rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.hpf__card{min-width:min(280px,78vw);scroll-snap-align:start}
.hpf__card-img-wrap,.hpf__card[data-index="0"] .hpf__card-img-wrap{aspect-ratio:4 / 3}
</style>