src/components/text/TextMono.astro
---
// TextMono, recovered from blurr-components.pages.dev
---
<div class="tmono-wrap"> <p class="tmono-headline">Onze werkwijze in vijf stappen</p> <div class="tmono-terminal"> <div class="tmono-bar"> <span class="tmono-dot tmono-dot--r"></span> <span class="tmono-dot tmono-dot--y"></span> <span class="tmono-dot tmono-dot--g"></span> <span class="tmono-file">blurr-process.sh</span> </div> <ul class="tmono-list"> <li class="tmono-item"> <span class="tmono-prompt">$</span> <span>01, Analyse & audit</span> </li><li class="tmono-item"> <span class="tmono-prompt">$</span> <span>02, Strategie & plan</span> </li><li class="tmono-item"> <span class="tmono-prompt">$</span> <span>03, Campagne lancering</span> </li><li class="tmono-item"> <span class="tmono-prompt">$</span> <span>04, Monitoring & optimalisatie</span> </li><li class="tmono-item"> <span class="tmono-prompt">$</span> <span>05, Rapportage & groei</span> </li> </ul> </div> </div>
<style>
.tmono-wrap{--color-accent: #6366f1;--color-primary: #0a0a0a;font-family:system-ui,sans-serif;max-width:680px;padding:24px}
.tmono-headline{margin:0 0 16px;font-size:1rem;font-weight:700;color:var(--color-primary)}
.tmono-terminal{background:#0f0f0f;border-radius:10px;overflow:hidden}
.tmono-bar{display:flex;align-items:center;gap:6px;padding:10px 16px;background:#1a1a1a;border-bottom:1px solid #2a2a2a}
.tmono-dot{width:10px;height:10px;border-radius:50%}
.tmono-dot--r{background:#ff5f56}
.tmono-dot--y{background:#ffbd2e}
.tmono-dot--g{background:#27c93f}
.tmono-file{margin-left:8px;font-size:.72rem;color:#6b7280;font-family:Courier New,monospace}
.tmono-list{list-style:none;margin:0;padding:20px 20px 24px;display:flex;flex-direction:column;gap:10px}
.tmono-item{display:flex;gap:12px;font-family:Courier New,Courier,monospace;font-size:.85rem;color:#e2e8f0;line-height:1.5}
.tmono-prompt{color:var(--color-accent);flex-shrink:0;font-weight:700}
</style>