FooterModern Footer

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

<footer class="fmod"> <div class="fmod-inner"> <div class="fmod-brand"> <a href="/" class="fmod-logo">BLURR</a> <p class="fmod-tagline">Data-gedreven online marketing voor ambitieuze merken in Nederland.</p> <div class="fmod-socials"> <a href="#" class="fmod-social" aria-label="LinkedIn"></a><a href="#" class="fmod-social" aria-label="Instagram"></a><a href="#" class="fmod-social" aria-label="YouTube">▶</a> </div> </div> <div class="fmod-col"> <h4 class="fmod-col-title">Diensten</h4> <ul class="fmod-col-links"> <li class="fmod-col-item"> <a href="#" class="fmod-col-link">Google Ads</a> <span class="fmod-badge">Populair</span> </li><li class="fmod-col-item"> <a href="#" class="fmod-col-link">Meta Ads</a>  </li><li class="fmod-col-item"> <a href="#" class="fmod-col-link">SEO</a>  </li><li class="fmod-col-item"> <a href="#" class="fmod-col-link">Analytics</a>  </li> </ul> </div><div class="fmod-col"> <h4 class="fmod-col-title">Bureau</h4> <ul class="fmod-col-links"> <li class="fmod-col-item"> <a href="#" class="fmod-col-link">Over ons</a>  </li><li class="fmod-col-item"> <a href="#" class="fmod-col-link">Cases</a>  </li><li class="fmod-col-item"> <a href="#" class="fmod-col-link">Blog</a>  </li><li class="fmod-col-item"> <a href="#" class="fmod-col-link">Vacatures</a> <span class="fmod-badge">Nieuw</span> </li> </ul> </div> </div> <div class="fmod-bottom"> <div class="fmod-bottom-inner"> <p class="fmod-copy">© 2026 BLURR. Alle rechten voorbehouden.</p> <div class="fmod-trust"> <span class="fmod-trust-item">→ SSL beveiligd</span> <span class="fmod-trust-item"> Made in NL</span> </div> </div> </div> </footer>

<style>
.fmod{background:#f8fafc;border-top:1px solid #e5e7eb}
.fmod-inner{max-width:1280px;margin:0 auto;padding:3.5rem 2rem 2.5rem;display:grid;grid-template-columns:260px repeat(auto-fit,minmax(130px,1fr));gap:3rem}
.fmod-logo{font-weight:900;font-size:1.125rem;color:#0a0a0a;text-decoration:none;letter-spacing:-.03em;display:block;margin-bottom:.75rem}
.fmod-tagline{font-size:.875rem;color:#6b7280;line-height:1.6;margin:0 0 1.25rem}
.fmod-socials{display:flex;gap:.5rem}
.fmod-social{width:34px;height:34px;border-radius:.5rem;background:#fff;border:1px solid #e5e7eb;display:flex;align-items:center;justify-content:center;font-size:.9375rem;text-decoration:none;color:#374151;transition: opacity, transform, background-color, color, border-color, box-shadow, filter .15s}
.fmod-social:hover{border-color:var(--color-accent,#6366f1);color:var(--color-accent,#6366f1)}
.fmod-col-title{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9ca3af;margin:0 0 .875rem}
.fmod-col-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.375rem}
.fmod-col-item{display:flex;align-items:center;gap:.5rem}
.fmod-col-link{font-size:.875rem;color:#374151;text-decoration:none;transition:color .15s}
.fmod-col-link:hover{color:var(--color-accent,#6366f1)}
.fmod-badge{font-size:.625rem;font-weight:700;background:#dcfce7;color:#16a34a;padding:.1rem .4rem;border-radius:999px}
.fmod-bottom{border-top:1px solid #e5e7eb;background:#fff}
.fmod-bottom-inner{max-width:1280px;margin:0 auto;padding:1.25rem 2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.fmod-copy{font-size:.8125rem;color:#9ca3af;margin:0}
.fmod-trust{display:flex;gap:1.5rem}
.fmod-trust-item{font-size:.75rem;color:#9ca3af}
.fmod-inner{grid-template-columns:1fr;gap:2rem}
</style>