FooterAccordion Footer

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

<footer class="facc"> <div class="facc-inner"> <div class="facc-brand"> <a href="/" class="facc-logo">BLURR</a> <p class="facc-tagline">Meetbare groei voor ambitieuze bedrijven.</p> </div> <div class="facc-cols"> <details class="facc-detail" open> <summary class="facc-summary"> Diensten <svg class="facc-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"></path></svg> </summary> <ul class="facc-links"> <li><a href="#" class="facc-link">Google Ads</a></li><li><a href="#" class="facc-link">Meta Ads</a></li><li><a href="#" class="facc-link">SEO</a></li><li><a href="#" class="facc-link">E-mail Marketing</a></li> </ul> </details><details class="facc-detail"> <summary class="facc-summary"> Bedrijf <svg class="facc-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"></path></svg> </summary> <ul class="facc-links"> <li><a href="#" class="facc-link">Over ons</a></li><li><a href="#" class="facc-link">Cases</a></li><li><a href="#" class="facc-link">Blog</a></li><li><a href="#" class="facc-link">Vacatures</a></li> </ul> </details><details class="facc-detail"> <summary class="facc-summary"> Juridisch <svg class="facc-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"></path></svg> </summary> <ul class="facc-links"> <li><a href="#" class="facc-link">Privacybeleid</a></li><li><a href="#" class="facc-link">Voorwaarden</a></li><li><a href="#" class="facc-link">Cookies</a></li> </ul> </details> </div> </div> <div class="facc-bottom"> <div class="facc-bottom-inner"> <p class="facc-copy">© 2026 BLURR</p> </div> </div> </footer>

<style>
.facc{background:#fff;border-top:1px solid #e5e7eb}
.facc-inner{max-width:1280px;margin:0 auto;padding:3rem 2rem 2rem;display:grid;grid-template-columns:260px 1fr;gap:4rem}
.facc-logo{font-weight:900;font-size:1.125rem;color:#0a0a0a;text-decoration:none;letter-spacing:-.03em;display:block;margin-bottom:.75rem}
.facc-tagline{font-size:.875rem;color:#6b7280;line-height:1.6;margin:0;max-width:200px}
.facc-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.5rem;align-content:start}
.facc-summary{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#374151;padding:.75rem 0;border-bottom:1px solid #f1f5f9;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.facc-summary::-webkit-details-marker{display:none}
.facc-detail[open] .facc-arrow{transform:rotate(180deg)}
.facc-arrow{transition:transform .2s;flex-shrink:0;color:#9ca3af}
.facc-links{list-style:none;padding:.5rem 0 0;margin:0;display:flex;flex-direction:column;gap:.375rem}
.facc-link{font-size:.875rem;color:#6b7280;text-decoration:none;display:block;padding:.25rem 0;transition:color .15s}
.facc-link:hover{color:var(--color-accent,#6366f1)}
.facc-bottom{border-top:1px solid #f1f5f9}
.facc-bottom-inner{max-width:1280px;margin:0 auto;padding:1.25rem 2rem}
.facc-copy{font-size:.8125rem;color:#9ca3af;margin:0}
.facc-inner{grid-template-columns:1fr;gap:2rem}
</style>