src/components/footer/FooterSocial.astro
---
// FooterSocial, recovered from blurr-components.pages.dev
---
<footer class="fsoc"> <div class="fsoc-inner"> <div class="fsoc-brand"> <a href="/" class="fsoc-logo">BLURR</a> <p class="fsoc-tagline">Volg ons voor dagelijkse marketing-inzichten.</p> </div> <div class="fsoc-socials"> <a href="#" class="fsoc-social" aria-label="LinkedIn"> <span class="fsoc-social-icon"></span> <div class="fsoc-social-info"> <span class="fsoc-social-platform">LinkedIn</span> <span class="fsoc-social-followers">2.400 volgers</span> </div> </a><a href="#" class="fsoc-social" aria-label="Instagram"> <span class="fsoc-social-icon"></span> <div class="fsoc-social-info"> <span class="fsoc-social-platform">Instagram</span> <span class="fsoc-social-followers">1.800 volgers</span> </div> </a><a href="#" class="fsoc-social" aria-label="YouTube"> <span class="fsoc-social-icon">▶</span> <div class="fsoc-social-info"> <span class="fsoc-social-platform">YouTube</span> <span class="fsoc-social-followers">890 abonnees</span> </div> </a> </div> <nav class="fsoc-links"> <a href="#" class="fsoc-link">Diensten</a><a href="#" class="fsoc-link">Cases</a><a href="#" class="fsoc-link">Blog</a><a href="#" class="fsoc-link">Privacy</a> </nav> </div> <div class="fsoc-bottom"> <p class="fsoc-copy">© 2026 BLURR</p> </div> </footer>
<style>
.fsoc{background:#fff;border-top:1px solid #e5e7eb}
.fsoc-inner{max-width:1280px;margin:0 auto;padding:3rem 2rem 2rem;display:grid;grid-template-columns:1fr auto 1fr;gap:3rem;align-items:start}
.fsoc-logo{font-weight:900;font-size:1.125rem;color:#0a0a0a;text-decoration:none;letter-spacing:-.03em;display:block;margin-bottom:.75rem}
.fsoc-tagline{font-size:.875rem;color:#6b7280;line-height:1.6;margin:0}
.fsoc-socials{display:flex;flex-direction:column;gap:.625rem}
.fsoc-social{display:flex;align-items:center;gap:.875rem;padding:.625rem 1rem;border:1px solid #e5e7eb;border-radius:.625rem;text-decoration:none;transition: opacity, transform, background-color, color, border-color, box-shadow, filter .15s}
.fsoc-social:hover{border-color:var(--color-accent,#6366f1);box-shadow:0 2px 8px #6366f11a}
.fsoc-social-icon{font-size:1.25rem}
.fsoc-social-platform{display:block;font-size:.875rem;font-weight:600;color:#0a0a0a}
.fsoc-social-followers{display:block;font-size:.75rem;color:#9ca3af}
.fsoc-links{display:flex;flex-direction:column;gap:.5rem;justify-self:end}
.fsoc-link{font-size:.875rem;color:#6b7280;text-decoration:none;text-align:right;transition:color .15s}
.fsoc-link:hover{color:#0a0a0a}
.fsoc-bottom{border-top:1px solid #f1f5f9}
.fsoc-copy{max-width:1280px;margin:0 auto;padding:1rem 2rem;font-size:.8125rem;color:#9ca3af}
.fsoc-inner{grid-template-columns:1fr;gap:2rem}
.fsoc-links{justify-self:start}
.fsoc-link{text-align:left}
</style>