<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Infrastructure Deploy Console</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-sans/style.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-mono/style.css"> <style> :root{ --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace; --font:'Geist Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,Helvetica,Arial,sans-serif; --accent:#3fae5a; } *{margin:0;padding:0;box-sizing:border-box} html,body{height:100%} body{ display:flex;align-items:center;justify-content:center;min-height:100vh;padding:26px; background:#ececed;font-family:var(--font);-webkit-font-smoothing:antialiased; } .card{ width:100%;max-width:720px;display:flex;gap:2px;background:#fdfdfd;border-radius:20px; padding:10px;box-shadow:0 34px 70px -34px rgba(20,22,28,.4),inset 0 0 0 1px rgba(0,0,0,.04); animation:cardIn .8s cubic-bezier(.22,1,.36,1) both; } @keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.99)}to{opacity:1;transform:none}} /* ---- left panel ---- */ .left{flex:0 0 42%;padding:20px 20px 17px;display:flex;flex-direction:column;color:#16171a} .eyebrow{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--accent);opacity:0;animation:fade .6s .15s ease both} h1{font-size:clamp(18px,2.5vw,24px);font-weight:700;letter-spacing:-.02em;line-height:1.14;margin-top:10px} h1 .g{color:#b3b4b9} .rev{display:block;overflow:hidden} .rev>span{display:inline-block;transform:translateY(110%)} .rev:nth-of-type(1)>span{animation:rise .7s .26s cubic-bezier(.22,1,.36,1) both} .rev:nth-of-type(2)>span{animation:rise .7s .36s cubic-bezier(.22,1,.36,1) both} .sub{margin-top:11px;font-size:13px;line-height:1.55;color:#6b6c72;max-width:34ch;opacity:0;animation:fade .6s .5s ease both} .spacer{flex:1;min-height:20px} .quote-mark{font-family:Georgia,serif;font-size:40px;line-height:.5;color:#16171a;height:20px} .quote{margin-top:12px;font-size:13.5px;line-height:1.5;font-weight:600;color:#26272c} .quote .g{color:#a9aab0;font-weight:500} .attr{margin-top:13px;font-size:12.5px} .attr b{display:block;font-weight:600;color:#16171a} .attr span{color:#9a9ba1} /* ---- right editor ---- */ .right{flex:1;min-width:0;background:#0d0d10;border-radius:16px;display:flex;flex-direction:column; overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)} .tabs{display:flex;align-items:center;gap:2px;padding:12px 12px 0;position:relative} .tab{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:none;background:none;cursor:pointer; font:inherit;font-size:12px;font-weight:500;color:#6b7078;border-radius:8px;transition:color .2s ease,background .2s ease;white-space:nowrap} .tab:hover{color:#c4c9d0;background:rgba(255,255,255,.04)} .tab.active{color:#f0f2f5} .tab .dot{width:14px;height:14px;border-radius:4px;background:linear-gradient(135deg,#ffd24a,#e58a2a);flex:0 0 auto} .tab-underline{position:absolute;bottom:0;height:2px;background:var(--accent);border-radius:2px; transition:left .3s cubic-bezier(.22,1,.36,1),width .3s cubic-bezier(.22,1,.36,1);opacity:0} .tabs-line{height:1px;background:rgba(255,255,255,.07)} .code{ height:258px;padding:13px 15px;font-family:var(--mono);font-size:11.5px;line-height:1.6; color:#8b929c;overflow-y:auto;overflow-x:hidden;white-space:pre-wrap;word-break:break-word; } .code::-webkit-scrollbar{width:8px} .code::-webkit-scrollbar-thumb{background:rgba(255,255,255,.09);border-radius:8px} .code .ln{min-height:1.62em} .code .k{color:#7bd88f} .code .s{color:#8fb8ff} .code .c{color:#5a6069;font-style:italic} .code .p{color:#79c0ff} .code .em{color:#eef1f5;font-weight:600} .code .num{color:#e3b341} .code .proc{color:#c4c9d0} .code .proc .sp{color:var(--accent);display:inline-block;width:1.1em} .code .proc.done .sp{color:#7bd88f} .code .dimln{color:#6b7078} .code .stopln{color:#ff7b72;font-weight:600} .code .hint{color:#5a6069} .code .ps{color:var(--accent)} .prompt{display:flex;align-items:center;gap:8px} .prompt input{flex:1;min-width:0;background:none;border:none;outline:none;color:#e6edf3; font-family:var(--mono);font-size:11.5px;line-height:1.6;caret-color:#7bd88f;padding:0} .caret{display:inline-block;width:7px;height:1.05em;background:#e6edf3;margin-left:2px;vertical-align:-2px;animation:blink 1.05s steps(1) infinite} @keyframes blink{50%{opacity:0}} .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px} .status{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600} .status .sd{width:8px;height:8px;border-radius:50%} .status.live{background:#12281a;color:#5fd07f} .status.live .sd{background:#5fd07f} .status.warn{background:#2a230f;color:#e3b341} .status.warn .sd{background:#e3b341;animation:sdp 1.4s ease infinite} .status.stopped{background:#2a1414;color:#ff7b72} .status.stopped .sd{background:#ff7b72} @keyframes sdp{0%,100%{opacity:1}50%{opacity:.4}} .deploy{display:inline-flex;align-items:center;gap:9px;padding:8px 14px;border:none;border-radius:999px;cursor:pointer; background:#fff;color:#111214;font:inherit;font-size:12.5px;font-weight:600;transition:transform .16s ease,box-shadow .2s ease} .deploy:hover{transform:translateY(-1px);box-shadow:0 10px 24px -10px rgba(255,255,255,.35)} .deploy:active{transform:scale(.97)} .deploy svg{width:15px;height:15px;transition:transform .2s ease} .deploy:hover svg{transform:translateX(3px)} @keyframes rise{to{transform:none}} @keyframes fade{to{opacity:1}} @media (max-width:720px){ .card{flex-direction:column} .left{flex:none;padding:22px 22px 18px} .spacer{min-height:16px} .code{height:210px} } @media (prefers-reduced-motion:reduce){ .rev>span{animation-duration:.01ms;transform:none} .caret,.status .sd{animation:none} } </style> </head> <body> <div class="card" id="card" tabindex="-1"> <div class="left"> <div class="eyebrow">Encrypted by default</div> <h1> <span class="rev"><span>Harden your stack</span></span> <span class="rev"><span><span class="g">the moment it</span> ships.</span></span> </h1> <p class="sub">Aegis slots into your pipeline with zero rewrites — bring your own IaC, your own cloud, and deploy.</p> <div class="spacer"></div> <div class="quote-mark">”</div> <p class="quote">Since Aegis, our infrastructure hardens itself <span class="g">— every resource provisioned, encrypted, and audited from one file.</span></p> <div class="attr"><b>Dev Okafor</b><span>Head of Platform, Meridian</span></div> </div> <div class="right"> <div class="tabs" id="tabs"> <button class="tab active" data-i="0"><span class="dot"></span>OpenTofu</button> <button class="tab" data-i="1">CloudFormation</button> <button class="tab" data-i="2">CI/CD Pipeline</button> <span class="tab-underline" id="underline"></span> </div> <div class="tabs-line"></div> <div class="code" id="code" tabindex="0" aria-label="Infrastructure console — type commands, Ctrl+C to interrupt"> <div id="hist"></div> <div class="ln proc" id="live" style="display:none"></div> <div class="ln prompt" id="promptLine" style="display:none"><span class="ps">$</span><input id="cmd" spellcheck="false" autocomplete="off" aria-label="command"></div> </div> <div class="foot"> <span class="status warn" id="status"><span class="sd"></span><span class="pt">Provisioning…</span></span> <button class="deploy" id="deploy"><span id="deployLabel">Deploy with OpenTofu</span> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h15M13 6l6 6-6 6"/></svg> </button> </div> </div> </div> <script> (function(){ var TABS = [ { label:"OpenTofu", lines:[ '<span class="k">provider</span> <span class="s">"aegis"</span> {', ' api_token = <span class="k">var</span>.aegis_api_key', ' region = <span class="k">var</span>.network_region', '}', '', '<span class="k">resource</span> <span class="s">"aegis_virtual_network"</span> <span class="em">"core"</span> {', ' <span class="c"># zero-trust mesh, encrypted by default</span>', '}', '', '<span class="k">resource</span> <span class="s">"aegis_user_group"</span> <span class="em">"engineers"</span> {', ' name = <span class="s">"Platform Engineering"</span>', '}', '', '<span class="k">resource</span> <span class="s">"aegis_service"</span> <span class="em">"main_db"</span> {', ' network = aegis_virtual_network.core.id', ' <span class="p">policy</span> {', ' encryption = <span class="s">"aes-256-gcm"</span>', ' }', '}', ]}, { label:"CloudFormation", lines:[ '<span class="p">Resources</span>:', ' <span class="em">CoreNetwork</span>:', ' <span class="p">Type</span>: <span class="s">Aegis::Network::Mesh</span>', ' <span class="p">Properties</span>:', ' Encryption: <span class="s">aes-256-gcm</span>', ' ZeroTrust: <span class="k">true</span>', ' <span class="em">MainDatabase</span>:', ' <span class="p">Type</span>: <span class="s">Aegis::Service::Database</span>', ' <span class="p">Properties</span>:', ' Name: <span class="s">primary-db</span>', ' Network: <span class="k">!Ref</span> CoreNetwork', ]}, { label:"CI/CD Pipeline", lines:[ '<span class="p">steps</span>:', ' - <span class="p">name</span>: validate', ' <span class="p">run</span>: <span class="s">aegis plan --strict</span>', ' - <span class="p">name</span>: secure', ' <span class="p">run</span>: <span class="s">aegis apply --auto-approve</span>', ' - <span class="p">name</span>: verify', ' <span class="p">run</span>: <span class="s">aegis audit --fail-on=critical</span>', ]}, ]; var FRAMES = ['⠋','⠙','⠹','⠸','⠼','⠴','⠦','⠧','⠇','⠏']; var PHASES = ['validating configuration','planning changes','applying · encrypting mesh','syncing state','secured formation']; var codeEl = document.getElementById('code'), histEl = document.getElementById('hist'), liveEl = document.getElementById('live'), promptLine = document.getElementById('promptLine'), cmd = document.getElementById('cmd'), statusEl = document.getElementById('status'), underline = document.getElementById('underline'), deployLabel = document.getElementById('deployLabel'), card = document.getElementById('card'); var ti = 0, mode = 'idle', spin = 0, phase = 0, frame = 0, tId = null, hovered = false, hinted = false; function tab(){ return TABS[ti]; } function clearT(){ if (tId){ clearTimeout(tId); tId = null; } } function scroll(){ codeEl.scrollTop = codeEl.scrollHeight; } function esc(s){ return (s||'').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); } function append(html){ var d = document.createElement('div'); d.className = 'ln'; d.innerHTML = html; histEl.appendChild(d); scroll(); } function setStatus(kind){ if (kind === 'busy'){ statusEl.className = 'status warn'; statusEl.querySelector('.pt').textContent = 'Provisioning…'; } else if (kind === 'stopped'){ statusEl.className = 'status stopped'; statusEl.querySelector('.pt').textContent = 'Interrupted'; } else { statusEl.className = 'status live'; statusEl.querySelector('.pt').textContent = 'Secured Formation'; } } function showPrompt(focus){ liveEl.style.display = 'none'; promptLine.style.display = 'flex'; cmd.value = ''; scroll(); if (focus || hovered || codeEl.contains(document.activeElement)) cmd.focus(); } function hidePrompt(){ promptLine.style.display = 'none'; } // ---- typing the config ---- function typeConfig(done){ mode = 'typing'; setStatus('busy'); hidePrompt(); histEl.innerHTML = ''; var lines = tab().lines, i = 0; (function next(){ if (mode !== 'typing') return; if (i < lines.length){ append(lines[i] === '' ? ' ' : lines[i]); i++; tId = setTimeout(next, lines[i - 1] === '' ? 24 : 58); } else { mode = 'idle'; done && done(); } })(); } // ---- the "background process" ---- function runApply(){ clearT(); hidePrompt(); mode = 'running'; setStatus('busy'); phase = 0; frame = 0; spin = 0; liveEl.style.display = ''; (function tick(){ if (mode !== 'running') return; spin++; frame++; if (frame % 13 === 0) phase++; if (phase >= PHASES.length){ liveEl.style.display = 'none'; append('<span class="proc done"><span class="sp">✓</span> apply complete · secured formation ready</span>'); mode = 'idle'; setStatus('secured'); if (!hinted){ append('<span class="hint">type \'help\' for commands · Ctrl+C to interrupt</span>'); hinted = true; } showPrompt(false); return; } liveEl.innerHTML = '<span class="sp">' + FRAMES[spin % FRAMES.length] + '</span> aegis · ' + PHASES[phase] + '…'; scroll(); tId = setTimeout(tick, 85); })(); } function boot(){ clearT(); typeConfig(function(){ runApply(); }); } function interrupt(){ clearT(); if (mode === 'typing' || mode === 'running'){ mode = 'stopped'; liveEl.style.display = 'none'; append('<span class="dimln">^C</span>'); append('<span class="stopln">Interrupted.</span>'); setStatus('stopped'); showPrompt(true); } else { append('<span class="ps">$</span> ' + esc(cmd.value) + '<span class="dimln"> ^C</span>'); cmd.value = ''; scroll(); } } // ---- commands ---- function exec(raw){ append('<span class="ps">$</span> ' + esc(raw)); var c = raw.trim().replace(/^aegis\s+/, ''); var head = c.split(/\s+/)[0]; if (c === ''){ showPrompt(true); return; } switch (head){ case 'help': append('commands: <span class="em">apply</span>, plan, audit, status, clear, help'); showPrompt(true); break; case 'clear': histEl.innerHTML = ''; showPrompt(true); break; case 'plan': append('<span class="k">Plan:</span> <span class="num">3</span> to add, <span class="num">0</span> to change, <span class="num">0</span> to destroy.'); append(' <span class="k">+</span> aegis_virtual_network.core'); append(' <span class="k">+</span> aegis_user_group.engineers'); append(' <span class="k">+</span> aegis_service.main_db'); showPrompt(true); break; case 'apply': case 'deploy': runApply(); break; case 'audit': append('<span class="proc done"><span class="sp">✓</span> 0 critical · 0 high · encryption verified (aes-256-gcm)</span>'); showPrompt(true); break; case 'status': append('secured formation · <span class="num">3</span> resources · zero-trust mesh'); showPrompt(true); break; default: append('<span class="stopln">command not found:</span> ' + esc(head) + ' <span class="dimln">— try \'help\'</span>'); showPrompt(true); } } // ---- tabs ---- var tabBtns = document.querySelectorAll('.tab'); function moveUnderline(btn){ underline.style.left = btn.offsetLeft + 'px'; underline.style.width = btn.offsetWidth + 'px'; underline.style.opacity = '1'; } tabBtns.forEach(function(btn){ btn.addEventListener('click', function(){ ti = parseInt(btn.dataset.i, 10); tabBtns.forEach(function(b){ b.classList.toggle('active', b === btn); }); moveUnderline(btn); deployLabel.textContent = 'Deploy with ' + tab().label; boot(); }); }); document.getElementById('deploy').addEventListener('click', runApply); codeEl.addEventListener('click', function(){ if (promptLine.style.display !== 'none') cmd.focus(); }); cmd.addEventListener('keydown', function(e){ if (e.key === 'Enter'){ e.preventDefault(); var v = cmd.value; hidePrompt(); exec(v); } else if ((e.ctrlKey || e.metaKey) && (e.key === 'c' || e.key === 'C')){ e.preventDefault(); interrupt(); } }); card.addEventListener('mouseenter', function(){ hovered = true; }); card.addEventListener('mouseleave', function(){ hovered = false; }); window.addEventListener('keydown', function(e){ if (mode !== 'typing' && mode !== 'running') return; if (!(hovered || codeEl.contains(document.activeElement))) return; if ((e.ctrlKey || e.metaKey) && (e.key === 'c' || e.key === 'C')){ e.preventDefault(); interrupt(); } }); moveUnderline(document.querySelector('.tab.active')); boot(); })(); </script> </body> </html>

Code & assets

Design System