Zoeken...  ⌘K GitHub

FooterGrid Footer

FooterGrid component.

/footer-grid
src/components/footer/FooterGrid.astro
---
// FooterGrid, recovered from blurr-components.pages.dev
---

<footer class="fgrid"> <div class="fgrid-inner"> <div class="fgrid-brand"> <a href="/" class="fgrid-logo">BLURR</a> <p class="fgrid-tagline">Meetbare marketing voor ambitieuze bedrijven.</p> <div class="fgrid-socials"> <a href="#" class="fgrid-social" aria-label="LinkedIn"></a><a href="#" class="fgrid-social" aria-label="Instagram"></a> </div> </div> <div class="fgrid-col"> <h4 class="fgrid-col-title">Diensten</h4> <ul class="fgrid-col-links"> <li><a href="#" class="fgrid-col-link">Google Ads</a></li><li><a href="#" class="fgrid-col-link">Meta Ads</a></li><li><a href="#" class="fgrid-col-link">SEO</a></li><li><a href="#" class="fgrid-col-link">E-mail</a></li> </ul> </div><div class="fgrid-col"> <h4 class="fgrid-col-title">Bureau</h4> <ul class="fgrid-col-links"> <li><a href="#" class="fgrid-col-link">Over ons</a></li><li><a href="#" class="fgrid-col-link">Cases</a></li><li><a href="#" class="fgrid-col-link">Blog</a></li> </ul> </div><div class="fgrid-col"> <h4 class="fgrid-col-title">Support</h4> <ul class="fgrid-col-links"> <li><a href="#" class="fgrid-col-link">FAQ</a></li><li><a href="#" class="fgrid-col-link">Contact</a></li><li><a href="#" class="fgrid-col-link">Status</a></li> </ul> </div><div class="fgrid-col"> <h4 class="fgrid-col-title">Juridisch</h4> <ul class="fgrid-col-links"> <li><a href="#" class="fgrid-col-link">Privacy</a></li><li><a href="#" class="fgrid-col-link">Voorwaarden</a></li><li><a href="#" class="fgrid-col-link">Cookies</a></li> </ul> </div> </div> <div class="fgrid-bottom"> <div class="fgrid-bottom-inner"> <p class="fgrid-copy">© 2026 BLURR. Alle rechten voorbehouden.</p> <nav class="fgrid-bottom-links"> <a href="#" class="fgrid-bottom-link">Sitemap</a><a href="#" class="fgrid-bottom-link">Toegankelijkheid</a> </nav> </div> </div> </footer>

<style>
.fgrid{background:#fff;border-top:1px solid #e5e7eb}
.fgrid-inner{max-width:1280px;margin:0 auto;padding:3.5rem 2rem 2rem;display:grid;grid-template-columns:repeat(5,1fr);gap:2.5rem}
.fgrid-logo{font-weight:900;font-size:1.125rem;color:#0a0a0a;text-decoration:none;letter-spacing:-.03em;display:block;margin-bottom:.75rem}
.fgrid-tagline{font-size:.875rem;color:#6b7280;line-height:1.6;margin:0 0 1.25rem}
.fgrid-socials{display:flex;gap:.5rem}
.fgrid-social{width:32px;height:32px;border-radius:.375rem;background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-size:.875rem;text-decoration:none;color:#374151;transition: opacity, transform, background-color, color, border-color, box-shadow, filter .15s}
.fgrid-social:hover{background:var(--color-accent,#6366f1);color:#fff}
.fgrid-col-title{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9ca3af;margin:0 0 .875rem}
.fgrid-col-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.fgrid-col-link{font-size:.875rem;color:#374151;text-decoration:none;transition:color .15s}
.fgrid-col-link:hover{color:var(--color-accent,#6366f1)}
.fgrid-bottom{border-top:1px solid #f1f5f9}
.fgrid-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}
.fgrid-copy{font-size:.8125rem;color:#9ca3af;margin:0}
.fgrid-bottom-links{display:flex;gap:1.5rem}
.fgrid-bottom-link{font-size:.8125rem;color:#9ca3af;text-decoration:none;transition:color .15s}
.fgrid-bottom-link:hover{color:#6b7280}
.fgrid-inner{grid-template-columns:repeat(3,1fr)}
.fgrid-inner{grid-template-columns:1fr 1fr}
</style>