Zoeken...  ⌘K GitHub

FooterDark Footer

FooterDark component.

/footer-dark
src/components/footer/FooterDark.astro
---
// FooterDark, recovered from blurr-components.pages.dev
---

<footer class="fd" style="--ac:#6366f1"> <div class="fd-inner"> <div class="fd-brand"> <a href="/" class="fd-logo">BLURR</a> <p class="fd-tagline">Data-gedreven online marketing voor ambitieuze bedrijven.</p> <div class="fd-socials"> <a href="#" class="fd-social" aria-label="LinkedIn"></a><a href="#" class="fd-social" aria-label="Instagram"></a><a href="#" class="fd-social" aria-label="X"></a> </div> </div> <div class="fd-columns"> <div class="fd-col"> <h4 class="fd-col-title">Diensten</h4> <ul class="fd-col-links"> <li><a href="#" class="fd-col-link">Google Ads</a></li><li><a href="#" class="fd-col-link">Meta Ads</a></li><li><a href="#" class="fd-col-link">SEO</a></li><li><a href="#" class="fd-col-link">Analytics</a></li> </ul> </div><div class="fd-col"> <h4 class="fd-col-title">Bedrijf</h4> <ul class="fd-col-links"> <li><a href="#" class="fd-col-link">Over ons</a></li><li><a href="#" class="fd-col-link">Cases</a></li><li><a href="#" class="fd-col-link">Blog</a></li><li><a href="#" class="fd-col-link">Carrière</a></li> </ul> </div><div class="fd-col"> <h4 class="fd-col-title">Juridisch</h4> <ul class="fd-col-links"> <li><a href="#" class="fd-col-link">Privacybeleid</a></li><li><a href="#" class="fd-col-link">Cookiebeleid</a></li><li><a href="#" class="fd-col-link">Algemene voorwaarden</a></li> </ul> </div> </div> </div> <div class="fd-bottom"> <div class="fd-bottom-inner"> <p class="fd-copy">© 2025 BLURR Marketing. Alle rechten voorbehouden.</p> </div> </div> </footer>

<style>
.fd{background:#0a0a0a;color:#fff;padding-top:4rem}
.fd-inner{max-width:1280px;margin:0 auto;padding:0 2rem 3rem;display:grid;grid-template-columns:280px 1fr;gap:4rem}
.fd-logo{font-weight:900;font-size:1.25rem;color:#fff;text-decoration:none;letter-spacing:-.03em;display:block;margin-bottom:.75rem}
.fd-tagline{font-size:.875rem;color:#ffffff73;line-height:1.6;margin:0 0 1.5rem;max-width:220px}
.fd-socials{display:flex;gap:.5rem}
.fd-social{width:36px;height:36px;border-radius:50%;background:#ffffff12;display:flex;align-items:center;justify-content:center;font-size:1rem;text-decoration:none;transition:background .2s;color:#ffffffb3}
.fd-social:hover{background:var(--ac);color:#fff}
.fd-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:2rem}
.fd-col-title{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#ffffff59;margin:0 0 1rem}
.fd-col-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.fd-col-link{font-size:.875rem;color:#ffffff8c;text-decoration:none;transition:color .15s}
.fd-col-link:hover{color:#fff}
.fd-bottom{border-top:1px solid rgba(255,255,255,.07)}
.fd-bottom-inner{max-width:1280px;margin:0 auto;padding:1.25rem 2rem}
.fd-copy{font-size:.8125rem;color:#ffffff4d;margin:0}
.fd-inner{grid-template-columns:1fr;gap:2.5rem}
</style>