src/components/hero/HeroTypography.astro
---
// HeroTypography, recovered from blurr-components.pages.dev
---
<section class="htg__root htg__root--white" aria-label="Hero"> <div class="htg__container"> <div class="htg__pre-wrap" aria-hidden="false"> <span class="htg__pre-label">Online Marketing Bureau</span> </div> <div class="htg__headline-block"> <span class="htg__line htg__line--1">Wij maken</span> <span class="htg__line htg__line--2" aria-hidden="true">marketing</span> <span class="htg__line htg__line--3">die werkt.</span> </div> <div class="htg__rule-wrap" aria-hidden="true"> <div class="htg__rule"></div> </div> <div class="htg__footer"> <p class="htg__sub">Data-gedreven campagnes voor ambitieuze Nederlandse bedrijven.</p> <a href="#" class="htg__cta"> Start vandaag </a> </div> </div> <div class="htg__ticker-track" aria-hidden="true"> <div class="htg__ticker-inner"> <span class="htg__ticker-item"> Google Ads <span class="htg__ticker-sep" aria-hidden="true">-</span> </span><span class="htg__ticker-item"> Meta Ads <span class="htg__ticker-sep" aria-hidden="true">-</span> </span><span class="htg__ticker-item"> SEO <span class="htg__ticker-sep" aria-hidden="true">-</span> </span><span class="htg__ticker-item"> LinkedIn <span class="htg__ticker-sep" aria-hidden="true">-</span> </span><span class="htg__ticker-item"> TikTok <span class="htg__ticker-sep" aria-hidden="true">-</span> </span><span class="htg__ticker-item"> Analytics <span class="htg__ticker-sep" aria-hidden="true">-</span> </span><span class="htg__ticker-item"> Conversie <span class="htg__ticker-sep" aria-hidden="true">-</span> </span><span class="htg__ticker-item"> Google Ads <span class="htg__ticker-sep" aria-hidden="true">-</span> </span><span class="htg__ticker-item"> Meta Ads <span class="htg__ticker-sep" aria-hidden="true">-</span> </span><span class="htg__ticker-item"> SEO <span class="htg__ticker-sep" aria-hidden="true">-</span> </span><span class="htg__ticker-item"> LinkedIn <span class="htg__ticker-sep" aria-hidden="true">-</span> </span><span class="htg__ticker-item"> TikTok <span class="htg__ticker-sep" aria-hidden="true">-</span> </span><span class="htg__ticker-item"> Analytics <span class="htg__ticker-sep" aria-hidden="true">-</span> </span><span class="htg__ticker-item"> Conversie <span class="htg__ticker-sep" aria-hidden="true">-</span> </span> </div> </div> </section>
<style>
.htg__root{position:relative;width:100%;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.htg__root--white{background:var(--color-bg);--htg-text: var(--color-primary);--htg-muted: var(--color-muted);--htg-stroke: var(--color-primary);--htg-rule: var(--color-primary);--htg-pre-bg: rgba(10, 10, 10, .07);--htg-pre-color: var(--color-primary);--htg-ticker-bg: var(--color-primary);--htg-ticker-color: #fff}
.htg__root--light{background:#f5f5f7;--htg-text: var(--color-primary);--htg-muted: var(--color-muted);--htg-stroke: var(--color-primary);--htg-rule: var(--color-primary);--htg-pre-bg: rgba(10, 10, 10, .07);--htg-pre-color: var(--color-primary);--htg-ticker-bg: var(--color-primary);--htg-ticker-color: #fff}
.htg__root--dark{background:var(--color-primary);--htg-text: #fff;--htg-muted: rgba(255, 255, 255, .55);--htg-stroke: #fff;--htg-rule: rgba(255, 255, 255, .2);--htg-pre-bg: rgba(255, 255, 255, .1);--htg-pre-color: rgba(255, 255, 255, .85);--htg-ticker-bg: #fff;--htg-ticker-color: var(--color-primary)}
.htg__container{max-width:1440px;width:100%;margin:0 auto;padding:clamp(5rem, 5vw, 5rem) clamp(1.5rem, 6vw, 5rem) clamp(3rem,6vw,5rem);display:flex;flex-direction:column;gap:2.5rem}
.htg__pre-wrap{animation:htg-fadein .6s cubic-bezier(.16,1,.3,1) both}
.htg__pre-label{display:inline-block;font-size:.8125rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:var(--htg-pre-bg);color:var(--htg-pre-color);padding:.35rem .875rem;border-radius:999px}
.htg__headline-block{display:flex;flex-direction:column;gap:0;line-height:1;letter-spacing:-.04em}
.htg__line{display:block;font-weight:900;font-size:clamp(4rem, 5vw, 5rem)}
.htg__line--1{color:var(--htg-text);animation:htg-fadein .7s .1s cubic-bezier(.16,1,.3,1) both}
.htg__line--2{color:transparent;-webkit-text-stroke:2px var(--htg-stroke);text-stroke:2px var(--htg-stroke);animation:htg-fadein .7s .2s cubic-bezier(.16,1,.3,1) both}
.htg__line--3{background:linear-gradient(90deg,var(--color-accent) 0%,#a855f7 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--color-accent);animation:htg-fadein .7s .3s cubic-bezier(.16,1,.3,1) both}
.htg__rule-wrap{overflow:hidden;animation:htg-fadein .5s .5s both}
.htg__rule{height:1px;background:var(--htg-rule);width:100%;transform-origin:left;animation:htg-scalex .8s .55s cubic-bezier(.16,1,.3,1) both}
.htg__footer{display:flex;flex-wrap:wrap;align-items:center;gap:2rem;animation:htg-fadein .6s .7s cubic-bezier(.16,1,.3,1) both}
.htg__sub{font-size:clamp(.9375rem,1.3vw,1.125rem);color:var(--htg-muted);line-height:1.65;margin:0;max-width:48ch;flex:1 1 280px}
.htg__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);white-space:nowrap;flex-shrink:0;transition:opacity .2s,transform .2s}
.htg__cta:hover{opacity:.88;transform:translateY(-1px)}
.htg__ticker-track{background:var(--htg-ticker-bg);overflow:hidden;padding:.875rem 0;width:100%;margin-top:auto}
.htg__ticker-inner{display:flex;width:max-content;animation:htg-ticker 20s linear infinite;will-change:transform}
.htg__ticker-item{display:inline-flex;align-items:center;gap:.875rem;font-size:clamp(.875rem,1.1vw,1rem);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--htg-ticker-color);padding:0 1rem;white-space:nowrap}
.htg__ticker-sep{opacity:.35}
.htg__line--2{-webkit-text-stroke-width:1.5px}
.htg__footer{flex-direction:column;align-items:flex-start;gap:1.25rem}
</style>