src/components/footer/FooterRetro.astro
---
// FooterRetro, recovered from blurr-components.pages.dev
---
<footer class="fret"> <div class="fret-top-border"></div> <div class="fret-inner"> <div class="fret-main"> <a href="/" class="fret-logo">BLURR</a> <p class="fret-tagline">Marketing dat werkt. Punt.</p> </div> <nav class="fret-links"> <a href="#" class="fret-link">Diensten</a><a href="#" class="fret-link">Cases</a><a href="#" class="fret-link">Contact</a><a href="#" class="fret-link">Privacy</a> </nav> <div class="fret-contact">info@blurr.nl, +31 20 123 45 67</div> </div> <div class="fret-bottom"> <div class="fret-bottom-inner"> <p class="fret-copy">© 2026 BLURR</p> <div class="fret-mono">EST. 2024</div> </div> </div> </footer>
<style>
.fret{background:#f5f0e8}
.fret-top-border{height:4px;background:#0a0a0a}
.fret-inner{max-width:1280px;margin:0 auto;padding:2.5rem 2rem;display:grid;grid-template-columns:1fr auto auto;gap:3rem;align-items:start}
.fret-logo{font-weight:900;font-size:1.5rem;color:#0a0a0a;text-decoration:none;letter-spacing:-.04em;display:block;margin-bottom:.5rem}
.fret-tagline{font-size:.875rem;color:#6b7280;font-style:italic;margin:0}
.fret-links{display:flex;flex-direction:column;gap:.375rem}
.fret-link{font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#0a0a0a;text-decoration:none;padding:.25rem 0;border-bottom:1px solid transparent;transition:border-color .15s}
.fret-link:hover{border-bottom-color:#0a0a0a}
.fret-contact{font-family:monospace;font-size:.8125rem;color:#374151}
.fret-bottom{border-top:2px solid #0a0a0a}
.fret-bottom-inner{max-width:1280px;margin:0 auto;padding:.875rem 2rem;display:flex;justify-content:space-between;align-items:center}
.fret-copy{font-size:.8125rem;color:#6b7280;margin:0}
.fret-mono{font-family:monospace;font-size:.75rem;letter-spacing:.12em;color:#9ca3af}
.fret-inner{grid-template-columns:1fr;gap:1.5rem}
</style>