src/components/footer/FooterEditorial.astro
---
// FooterEditorial, recovered from blurr-components.pages.dev
---
<footer class="fed"> <div class="fed-rule"></div> <div class="fed-inner"> <div class="fed-top"> <div class="fed-brand"> <a href="/" class="fed-logo">BLURR</a> <p class="fed-tagline">Online Marketing Bureau, Amsterdam</p> </div> <span class="fed-issue">April 2025, Editie #12</span> </div> <div class="fed-rule-thin"></div> <div class="fed-cols"> <div class="fed-col"> <h4 class="fed-col-title">Diensten</h4> <ul class="fed-col-links"> <li><a href="#" class="fed-col-link">Google Ads</a></li><li><a href="#" class="fed-col-link">Meta Ads</a></li><li><a href="#" class="fed-col-link">SEO</a></li><li><a href="#" class="fed-col-link">Analytics</a></li> </ul> </div><div class="fed-col"> <h4 class="fed-col-title">Bureau</h4> <ul class="fed-col-links"> <li><a href="#" class="fed-col-link">Over ons</a></li><li><a href="#" class="fed-col-link">Cases</a></li><li><a href="#" class="fed-col-link">Blog</a></li> </ul> </div><div class="fed-col"> <h4 class="fed-col-title">Juridisch</h4> <ul class="fed-col-links"> <li><a href="#" class="fed-col-link">Privacybeleid</a></li><li><a href="#" class="fed-col-link">Voorwaarden</a></li> </ul> </div> </div> </div> <div class="fed-bottom"> <div class="fed-bottom-inner"> <p class="fed-copy">© 2026 BLURR. Alle rechten voorbehouden.</p> </div> </div> </footer>
<style>
.fed{background:#fafaf8}
.fed-rule{height:3px;background:#0a0a0a}
.fed-inner{max-width:1280px;margin:0 auto;padding:3rem 2rem 2rem}
.fed-top{display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;margin-bottom:2rem}
.fed-logo{font-size:1.75rem;font-weight:900;color:#0a0a0a;text-decoration:none;letter-spacing:-.04em;display:block;line-height:1}
.fed-tagline{font-size:.8125rem;color:#6b7280;margin:.375rem 0 0;letter-spacing:.04em}
.fed-issue{font-size:.75rem;color:#9ca3af;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.fed-rule-thin{height:1px;background:#e5e7eb;margin-bottom:2rem}
.fed-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:2rem}
.fed-col-title{font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#9ca3af;margin:0 0 1rem}
.fed-col-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.fed-col-link{font-size:.875rem;color:#374151;text-decoration:none;transition:color .15s}
.fed-col-link:hover{color:#0a0a0a}
.fed-bottom{border-top:1px solid #e5e7eb}
.fed-bottom-inner{max-width:1280px;margin:0 auto;padding:1.25rem 2rem}
.fed-copy{font-size:.8125rem;color:#9ca3af;margin:0}
</style>