Zoeken...  ⌘K GitHub

FooterApp Footer

FooterApp component.

/footer-app
src/components/footer/FooterApp.astro
---
// FooterApp, recovered from blurr-components.pages.dev
---

<footer class="fa"> <div class="fa-inner"> <div class="fa-brand"> <span class="fa-logo">BLURR</span> <p class="fa-tagline">Beheer je marketing campagnes onderweg.</p> </div> <div class="fa-app-badges"> <a href="#" class="fa-badge"> <span class="fa-badge-icon"></span> <span class="fa-badge-text"><small>Download in de</small>App Store</span> </a> <a href="#" class="fa-badge"> <span class="fa-badge-icon">▶</span> <span class="fa-badge-text"><small>Beschikbaar op</small>Google Play</span> </a> </div> <nav class="fa-links"> <a href="#" class="fa-link">Privacy</a><a href="#" class="fa-link">Voorwaarden</a><a href="#" class="fa-link">Support</a> </nav> <div class="fa-socials"> <a href="#" class="fa-social" aria-label="LinkedIn"></a><a href="#" class="fa-social" aria-label="Instagram"></a> </div> </div> <div class="fa-bottom"> <span class="fa-copy">© 2026 BLURR</span> </div> </footer>

<style>
.fa{background:#0a0a0a}
.fa-inner{max-width:1100px;margin:0 auto;padding:4rem 2rem;display:flex;align-items:center;gap:3rem;flex-wrap:wrap;justify-content:space-between}
.fa-logo{font-size:1.375rem;font-weight:900;color:#fff;letter-spacing:-.04em;display:block;margin-bottom:.375rem}
.fa-tagline{font-size:.875rem;color:#fff6;margin:0}
.fa-app-badges{display:flex;gap:.75rem;flex-wrap:wrap}
.fa-badge{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:.625rem;text-decoration:none;transition:background .15s}
.fa-badge:hover{background:#ffffff1a}
.fa-badge-icon{font-size:1.375rem}
.fa-badge-text{display:flex;flex-direction:column;font-size:1rem;font-weight:700;color:#fff;line-height:1.25}
.fa-badge-text small{font-size:.6875rem;font-weight:400;color:#ffffff80}
.fa-links{display:flex;gap:1.5rem;flex-wrap:wrap}
.fa-link{font-size:.875rem;color:#fff6;text-decoration:none;transition:color .15s}
.fa-link:hover{color:#ffffffbf}
.fa-socials{display:flex;gap:.625rem}
.fa-social{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#ffffff0f;border-radius:50%;text-decoration:none;transition:background .15s}
.fa-social:hover{background:#ffffff1f}
.fa-bottom{border-top:1px solid rgba(255,255,255,.06);padding:1rem 2rem;text-align:center}
.fa-copy{font-size:.8125rem;color:#fff3}
</style>