FooterNewsletter Footer

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

<footer class="fnl"> <div class="fnl-newsletter"> <div class="fnl-nl-inner"> <div class="fnl-nl-text"> <h3 class="fnl-nl-headline">Marketing insights, direct in je inbox.</h3> <p class="fnl-nl-sub">Wekelijks de beste tips over Google Ads, Meta en SEO. Gratis, altijd opzegbaar.</p> </div> <form class="fnl-nl-form" action="#" method="post"> <input type="email" name="email" placeholder="jouw@email.nl" class="fnl-nl-input" required> <button type="submit" class="fnl-nl-btn">Inschrijven →</button> </form> </div> </div> <div class="fnl-main"> <div class="fnl-main-inner"> <a href="/" class="fnl-logo">BLURR</a> <div class="fnl-col"> <h4 class="fnl-col-title">Diensten</h4> <ul class="fnl-col-links"> <li><a href="#" class="fnl-col-link">Google Ads</a></li><li><a href="#" class="fnl-col-link">Meta Ads</a></li><li><a href="#" class="fnl-col-link">SEO</a></li> </ul> </div><div class="fnl-col"> <h4 class="fnl-col-title">Bedrijf</h4> <ul class="fnl-col-links"> <li><a href="#" class="fnl-col-link">Over ons</a></li><li><a href="#" class="fnl-col-link">Cases</a></li><li><a href="#" class="fnl-col-link">Blog</a></li> </ul> </div> </div> <div class="fnl-bottom"> <p class="fnl-copy">© 2026 BLURR</p> </div> </div> </footer>

<style>
.fnl{background:#fff;border-top:1px solid #e5e7eb}
.fnl-newsletter{background:var(--color-accent,#6366f1);padding:3rem 2rem}
.fnl-nl-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:3rem;flex-wrap:wrap}
.fnl-nl-headline{font-size:1.375rem;font-weight:800;color:#fff;margin:0 0 .25rem;letter-spacing:-.02em}
.fnl-nl-sub{font-size:.9375rem;color:#ffffffb3;margin:0}
.fnl-nl-text{flex:1;min-width:200px}
.fnl-nl-form{display:flex;gap:.5rem;flex:1;max-width:440px}
.fnl-nl-input{flex:1;padding:.75rem 1rem;font-size:.9375rem;border:none;border-radius:.5rem;outline:none}
.fnl-nl-btn{padding:.75rem 1.5rem;background:#0a0a0a;color:#fff;font-weight:600;font-size:.9375rem;border:none;border-radius:.5rem;cursor:pointer;white-space:nowrap;transition:opacity .2s}
.fnl-nl-btn:hover{opacity:.85}
.fnl-main{padding:0}
.fnl-main-inner{max-width:1280px;margin:0 auto;padding:2.5rem 2rem;display:grid;grid-template-columns:1fr repeat(auto-fit,minmax(130px,1fr));gap:2rem}
.fnl-logo{font-weight:900;font-size:1.0625rem;color:#0a0a0a;text-decoration:none;letter-spacing:-.03em;align-self:start}
.fnl-col-title{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9ca3af;margin:0 0 .875rem}
.fnl-col-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.fnl-col-link{font-size:.875rem;color:#6b7280;text-decoration:none;transition:color .15s}
.fnl-col-link:hover{color:#0a0a0a}
.fnl-bottom{max-width:1280px;margin:0 auto;padding:1rem 2rem 1.5rem;border-top:1px solid #f1f5f9}
.fnl-copy{font-size:.8125rem;color:#9ca3af;margin:0}
</style>