src/components/footer/FooterTech.astro
---
// FooterTech, recovered from blurr-components.pages.dev
---
<footer class="ftech"> <div class="ftech-inner"> <div class="ftech-brand"> <a href="/" class="ftech-logo">BLURR</a> <code class="ftech-version">v2.4.1</code> <div class="ftech-status ftech-status--ok"> <span class="ftech-status-dot"></span> Alle systemen operationeel </div> </div> <div class="ftech-col"> <h4 class="ftech-col-title">Product</h4> <ul class="ftech-col-links"> <li><a href="#" class="ftech-col-link">Dashboard</a></li><li><a href="#" class="ftech-col-link">API docs</a></li><li><a href="#" class="ftech-col-link">Changelog</a></li><li><a href="#" class="ftech-col-link">Status</a></li> </ul> </div><div class="ftech-col"> <h4 class="ftech-col-title">Bedrijf</h4> <ul class="ftech-col-links"> <li><a href="#" class="ftech-col-link">Over ons</a></li><li><a href="#" class="ftech-col-link">Blog</a></li><li><a href="#" class="ftech-col-link">Vacatures</a></li> </ul> </div><div class="ftech-col"> <h4 class="ftech-col-title">Legal</h4> <ul class="ftech-col-links"> <li><a href="#" class="ftech-col-link">Privacy</a></li><li><a href="#" class="ftech-col-link">Terms</a></li><li><a href="#" class="ftech-col-link">Security</a></li> </ul> </div> </div> <div class="ftech-bottom"> <div class="ftech-bottom-inner"> <p class="ftech-copy">© 2026 BLURR</p> <code class="ftech-build">build 2026-04-14</code> </div> </div> </footer>
<style>
.ftech{background:#0f172a;border-top:1px solid #1e293b}
.ftech-inner{max-width:1280px;margin:0 auto;padding:3rem 2rem 2rem;display:grid;grid-template-columns:220px repeat(auto-fit,minmax(130px,1fr));gap:3rem}
.ftech-logo{font-weight:800;font-size:1.0625rem;color:#fff;text-decoration:none;letter-spacing:-.02em;display:block;margin-bottom:.75rem;font-family:monospace}
.ftech-version{display:block;font-size:.75rem;color:#ffffff4d;background:#ffffff0d;padding:.2rem .5rem;border-radius:.25rem;width:fit-content;margin-bottom:.75rem}
.ftech-status{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:#ffffff8c}
.ftech-status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.ftech-status--ok .ftech-status-dot{background:#22c55e;box-shadow:0 0 6px #22c55e}
.ftech-status--warn .ftech-status-dot{background:#f59e0b}
.ftech-col-title{font-size:.625rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#ffffff4d;margin:0 0 .875rem;font-family:monospace}
.ftech-col-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.ftech-col-link{font-size:.8125rem;color:#ffffff80;text-decoration:none;transition:color .15s}
.ftech-col-link:hover{color:#fff}
.ftech-bottom{border-top:1px solid #1e293b}
.ftech-bottom-inner{max-width:1280px;margin:0 auto;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center}
.ftech-copy{font-size:.75rem;color:#fff3;margin:0}
.ftech-build{font-size:.6875rem;color:#ffffff26;font-family:monospace}
.ftech-inner{grid-template-columns:1fr;gap:2rem}
</style>