src/components/nav/NavTopBar.astro
---
// NavTopBar, recovered from blurr-components.pages.dev
---
<div class="ntb"> <div class="ntb-topbar"> <div class="ntb-topbar-inner"> <span class="ntb-info">Maandag t/m vrijdag, 09:00–17:00</span> <div class="ntb-toplinks"> <a href="mailto:info@blurr.nl" class="ntb-toplink">info@blurr.nl</a><a href="tel:+31201234567" class="ntb-toplink">020 123 45 67</a> </div> </div> </div> <header class="ntb-nav"> <div class="ntb-nav-inner"> <a href="/" class="ntb-logo">BLURR</a> <ul class="ntb-links"> <li><a href="#" class="ntb-link ntb-link--active">Diensten</a></li><li><a href="#" class="ntb-link">Cases</a></li><li><a href="#" class="ntb-link">Over ons</a></li><li><a href="#" class="ntb-link">Blog</a></li> </ul> <a href="#" class="ntb-cta">Offerte aanvragen</a> </div> </header> </div>
<style>
.ntb-topbar{background:#1e293b}
.ntb-topbar-inner{max-width:1280px;margin:0 auto;padding:.375rem 2rem;display:flex;align-items:center;justify-content:space-between}
.ntb-info{font-size:.75rem;color:#fff9}
.ntb-toplinks{display:flex;gap:1rem}
.ntb-toplink{font-size:.75rem;color:#ffffffa6;text-decoration:none;transition:color .15s}
.ntb-toplink:hover{color:#fff}
.ntb-nav{background:#fff;border-bottom:2px solid #f1f5f9;position:sticky;top:0;z-index:100}
.ntb-nav-inner{max-width:1280px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;height:64px;gap:2rem}
.ntb-logo{font-weight:800;font-size:1.125rem;color:#0a0a0a;text-decoration:none;letter-spacing:-.02em}
.ntb-links{list-style:none;padding:0;margin:0;display:flex;flex:1;gap:0}
.ntb-link{display:block;font-size:.875rem;font-weight:500;color:#374151;text-decoration:none;padding:.375rem .875rem;border-radius:.375rem;transition: opacity, transform, background-color, color, border-color, box-shadow, filter .15s}
.ntb-link:hover,.ntb-link--active{color:var(--color-accent,#6366f1);background:#6366f112}
.ntb-cta{margin-left:auto;font-size:.875rem;font-weight:600;padding:.5rem 1.25rem;background:var(--color-accent,#6366f1);color:#fff;border-radius:.5rem;text-decoration:none;transition:opacity .2s;white-space:nowrap}
.ntb-cta:hover{opacity:.88}
.ntb-topbar,.ntb-links{display:none}
</style>