AkurAI Build
Menu

Public repository / 26e3512b142b0e00db819d7db3a89cb3167830a4

AkurAI-Platform / frontend/index.html

Latest change 89b1d9514023049e5c61809487c558d34f0a8c87 - Position Platform as modular SaaS suite by Ólafur Búi Ólafsson

{% include "header" %}
    <main>
      <section class="hero">
        <div class="hero-glow" aria-hidden="true"></div>
        <div class="shell hero-grid">
          <div class="hero-copy">
            <span class="eyebrow">{{ t "hero.eyebrow" }}</span>
            <h1>{{ t "hero.headline" }} <span class="grad">{{ t "hero.headline_accent" }}</span></h1>
            <p class="lede">{{ t "hero.lede" }}</p>
            <div class="btn-row">
              <a class="btn btn-primary" href="#suite">{{ t "hero.cta_primary" }}</a>
              <a class="btn btn-secondary" href="{{ github.url }}">{{ t "hero.cta_secondary" }}</a>
            </div>
            <div id="health" class="health-pill" aria-live="polite">{{ t "hero.checking" }}</div>
            <div class="hero-proof" aria-label='{{ t "hero.proof_label" }}'>
              <span><strong>{{ t "trust.value1" }}</strong>{{ t "hero.proof_apps" }}</span>
              <span><strong>{{ t "trust.value2" }}</strong>{{ t "hero.proof_memory" }}</span>
              <span><strong>{{ t "trust.value4" }}</strong>{{ t "hero.proof_deps" }}</span>
            </div>
          </div>

          <div class="hero-art">
            <div class="control-panel" data-control-panel aria-label='{{ t "control.aria" }}'>
              <div class="control-panel-head">
                <div>
                  <span class="panel-kicker">{{ t "control.kicker" }}</span>
                  <strong>{{ t "control.title" }}</strong>
                </div>
                <span class="panel-live" data-platform-state>{{ t "control.syncing" }}</span>
              </div>

              <div class="control-map" data-control-map>
                <svg class="control-lines" viewBox="0 0 560 360" aria-hidden="true">
                  <path class="route route-a" d="M280 178 C210 86 118 82 88 126" />
                  <path class="route route-b" d="M280 178 C348 72 446 82 472 128" />
                  <path class="route route-c" d="M280 178 C178 176 114 210 86 266" />
                  <path class="route route-d" d="M280 178 C382 176 446 210 474 266" />
                  <path class="route route-e" d="M280 178 C250 250 202 286 158 306" />
                  <path class="route route-f" d="M280 178 C310 250 358 286 402 306" />
                  <path class="route route-g" d="M280 178 C256 118 230 86 202 64" />
                  <path class="route route-h" d="M280 178 C304 118 330 86 358 64" />
                </svg>

                <div class="control-core">
                  <span>{{ t "control.core_label" }}</span>
                  <strong>{{ t "control.core_title" }}</strong>
                  <small>platform.olibuijr.com</small>
                </div>

                <button class="control-node node-mail is-active" data-service="mail" type="button">
                  <span class="node-icon"><svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='m3 7 9 6 9-6'/></svg></span>
                  <span>{{ t "app.mail.name" }}</span>
                </button>
                <button class="control-node node-auth" data-service="auth" type="button">
                  <span class="node-icon"><svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3 5 6v5c0 4 3 7 7 9 4-2 7-5 7-9V6z'/><circle cx='12' cy='11' r='1.7'/><path d='M12 12.6V15'/></svg></span>
                  <span>{{ t "app.auth.name" }}</span>
                </button>
                <button class="control-node node-vpn" data-service="vpn" type="button">
                  <span class="node-icon"><svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.5'/><path d='M3.5 12h17'/><path d='M12 3.5c2.6 2.4 2.6 14.6 0 17'/><path d='M12 3.5c-2.6 2.4-2.6 14.6 0 17'/></svg></span>
                  <span>{{ t "app.vpn.name" }}</span>
                </button>
                <button class="control-node node-drive" data-service="drive" type="button">
                  <span class="node-icon"><svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M7 18h9a4 4 0 0 0 .5-7.97 5.5 5.5 0 0 0-10.6-1.2A3.75 3.75 0 0 0 7 18Z'/><path d='M12 9.5v5'/><path d='m9.8 11.7 2.2-2.2 2.2 2.2'/></svg></span>
                  <span>{{ t "app.drive.name" }}</span>
                </button>
                <button class="control-node node-router" data-service="router" type="button">
                  <span class="node-icon"><svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='2.2'/><circle cx='5' cy='6' r='1.6'/><circle cx='19' cy='6' r='1.6'/><circle cx='5' cy='18' r='1.6'/><circle cx='19' cy='18' r='1.6'/><path d='M10.3 10.6 6.4 7.2M13.7 10.6 17.6 7.2M10.3 13.4 6.4 16.8M13.7 13.4 17.6 16.8'/></svg></span>
                  <span>{{ t "app.router.name" }}</span>
                </button>
                <button class="control-node node-monitor" data-service="monitor" type="button">
                  <span class="node-icon"><svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='13' rx='2'/><path d='M3 13h4l1.6-3.2 2 5 1.4-2.8H21'/><path d='M9 21h6M12 17v4'/></svg></span>
                  <span>{{ t "app.monitor.name" }}</span>
                </button>
                <button class="control-node node-dns" data-service="dns" type="button">
                  <span class="node-icon"><svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v18'/><path d='M6 6h10l2 2-2 2H6z'/><path d='M18 13H8l-2 2 2 2h10z'/></svg></span>
                  <span>{{ t "app.dns.name" }}</span>
                </button>
                <button class="control-node node-framework" data-service="framework" type="button">
                  <span class="node-icon"><svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='m12 3 8 4.5-8 4.5-8-4.5z'/><path d='m4 12 8 4.5 8-4.5'/><path d='m4 16.5 8 4.5 8-4.5'/></svg></span>
                  <span>{{ t "app.framework.name" }}</span>
                </button>
              </div>

              <div class="control-readout">
                <span><strong>{{ t "control.readout_owner" }}</strong>{{ t "control.readout_owner_label" }}</span>
                <span><strong>{{ t "control.readout_route" }}</strong>{{ t "control.readout_route_label" }}</span>
                <span><strong>{{ t "control.readout_runtime" }}</strong>{{ t "control.readout_runtime_label" }}</span>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="deployment-section section" aria-labelledby="deployment-title">
        <div class="shell deployment-grid">
          <div class="deployment-copy">
            <span class="eyebrow">{{ t "deployment.eyebrow" }}</span>
            <h2 id="deployment-title">{{ t "deployment.heading" }}</h2>
            <p>{{ t "deployment.lede" }}</p>
          </div>
          <div class="deployment-options">
            <article class="deployment-option">
              <h3>{{ t "deployment.hosted.title" }}</h3>
              <p>{{ t "deployment.hosted.body" }}</p>
            </article>
            <article class="deployment-option">
              <h3>{{ t "deployment.self.title" }}</h3>
              <p>{{ t "deployment.self.body" }}</p>
            </article>
          </div>
        </div>
      </section>


      <section id="motion" class="motion-section section">
        <div class="shell motion-grid">
          <div class="motion-copy">
            <span class="eyebrow">{{ t "motion.eyebrow" }}</span>
            <h2>{{ t "motion.heading" }}</h2>
            <p>{{ t "motion.lede" }}</p>
            <div class="motion-points" aria-label='{{ t "motion.points_label" }}'>
              <span>{{ t "motion.point1" }}</span>
              <span>{{ t "motion.point2" }}</span>
              <span>{{ t "motion.point3" }}</span>
            </div>
          </div>
          <div class="motion-stage">
            <video class="motion-video" src="/assets/akurai-platform-infographic.mp4" autoplay muted loop playsinline preload="metadata" aria-label='{{ t "motion.video_label" }}'></video>
          </div>
        </div>
      </section>

      <section id="suite" class="shell section">
        <div class="section-head">
          <span class="eyebrow">{{ t "suite.eyebrow" }}</span>
          <h2>{{ t "suite.title" }}</h2>
          <p>{{ t "suite.lede" }}</p>
        </div>

        <div class="suite">
          <!-- Category 1: Communication -->
          <section class="cat">
            <header class="cat-head">
              <span class="cat-icon"><svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a8 8 0 0 1-11.5 7.2L4 20l1-4.2A8 8 0 1 1 21 12Z'/></svg></span>
              <div>
                <h3>{{ t "category.communication" }}</h3>
                <p>{{ t "category.communication.tagline" }}</p>
              </div>
            </header>
            <div class="cat-grid">
              <article class="tile">
                <span class="tile-icon"><img src="/img/icons/mail.svg" alt="" width="48" height="48" loading="lazy"></span>
                <div class="tile-body">
                  <div class="tile-top">
                    <h4>{{ t "app.mail.name" }}</h4>
                    <span class="tile-kind">{{ t "app.mail.kind" }}</span>
                  </div>
                  <p class="tile-prop">{{ t "app.mail.valueprop" }}</p>
                </div>
                <div class="tile-foot">
                  <a class="tile-open" href="https://mail.olibuijr.com">{{ t "app.action.open" }}<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7M9 7h8v8"/></svg></a>
                  <a class="tile-src" href="https://akurai-build.olibuijr.com/repos/AkurAI-Mail">{{ t "app.action.source" }}: AkurAI-Mail</a>
                  <a class="tile-src" href="https://akurai-build.olibuijr.com/repos/AkurAI-MailAPI">{{ t "app.action.source" }}: AkurAI-MailAPI</a>
                </div>
              </article>
            </div>
          </section>

          <!-- Category 2: Security & privacy -->
          <section class="cat">
            <header class="cat-head">
              <span class="cat-icon"><svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='11' width='14' height='9' rx='2'/><path d='M8 11V8a4 4 0 0 1 8 0v3'/></svg></span>
              <div>
                <h3>{{ t "category.security" }}</h3>
                <p>{{ t "category.security.tagline" }}</p>
              </div>
            </header>
            <div class="cat-grid">
              <article class="tile">
                <span class="tile-icon"><img src="/img/icons/auth.svg" alt="" width="48" height="48" loading="lazy"></span>
                <div class="tile-body">
                  <div class="tile-top">
                    <h4>{{ t "app.auth.name" }}</h4>
                    <span class="tile-kind">{{ t "app.auth.kind" }}</span>
                  </div>
                  <p class="tile-prop">{{ t "app.auth.valueprop" }}</p>
                </div>
                <div class="tile-foot">
                  <a class="tile-open" href="https://auth.olibuijr.com">{{ t "app.action.open" }}<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7M9 7h8v8"/></svg></a>
                  <a class="tile-src" href="https://akurai-build.olibuijr.com/repos/AkurAI-IDP">{{ t "app.action.source" }}: AkurAI-IDP</a>
                </div>
              </article>

              <article class="tile">
                <span class="tile-icon"><img src="/img/icons/vpn.svg" alt="" width="48" height="48" loading="lazy"></span>
                <div class="tile-body">
                  <div class="tile-top">
                    <h4>{{ t "app.vpn.name" }}</h4>
                    <span class="tile-kind">{{ t "app.vpn.kind" }}</span>
                  </div>
                  <p class="tile-prop">{{ t "app.vpn.valueprop" }}</p>
                </div>
                <div class="tile-foot">
                  <a class="tile-open" href="https://akurai-vpn.olibuijr.com">{{ t "app.action.open" }}<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7M9 7h8v8"/></svg></a>
                  <a class="tile-src" href="https://akurai-build.olibuijr.com/repos/AkurAI-VPN">{{ t "app.action.source" }}: AkurAI-VPN</a>
                </div>
              </article>

              <article class="tile">
                <span class="tile-icon"><img src="/img/icons/passvault.svg" alt="" width="48" height="48" loading="lazy"></span>
                <div class="tile-body">
                  <div class="tile-top">
                    <h4>{{ t "app.passvault.name" }}</h4>
                    <span class="tile-kind">{{ t "app.passvault.kind" }}</span>
                  </div>
                  <p class="tile-prop">{{ t "app.passvault.valueprop" }}</p>
                </div>
                <div class="tile-foot">
                  <a class="tile-open" href="https://akurai-passvault.olibuijr.com">{{ t "app.action.open" }}<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7M9 7h8v8"/></svg></a>
                  <a class="tile-src" href="https://akurai-build.olibuijr.com/repos/AkurAI-PassVault">{{ t "app.action.source" }}: AkurAI-PassVault</a>
                </div>
              </article>
            </div>
          </section>

          <!-- Category 3: Storage -->
          <section class="cat">
            <header class="cat-head">
              <span class="cat-icon"><svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M7 18h9a4 4 0 0 0 .5-7.97 5.5 5.5 0 0 0-10.6-1.2A3.75 3.75 0 0 0 7 18Z'/></svg></span>
              <div>
                <h3>{{ t "category.storage" }}</h3>
                <p>{{ t "category.storage.tagline" }}</p>
              </div>
            </header>
            <div class="cat-grid">
              <article class="tile">
                <span class="tile-icon"><img src="/img/icons/drive.svg" alt="" width="48" height="48" loading="lazy"></span>
                <div class="tile-body">
                  <div class="tile-top">
                    <h4>{{ t "app.drive.name" }}</h4>
                    <span class="tile-kind">{{ t "app.drive.kind" }}</span>
                  </div>
                  <p class="tile-prop">{{ t "app.drive.valueprop" }}</p>
                </div>
                <div class="tile-foot">
                  <a class="tile-open" href="https://akurai-drive.olibuijr.com">{{ t "app.action.open" }}<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7M9 7h8v8"/></svg></a>
                  <a class="tile-src" href="https://akurai-build.olibuijr.com/repos/AkurAI-Drive">{{ t "app.action.source" }}: AkurAI-Drive</a>
                </div>
              </article>
            </div>
          </section>

          <!-- Category 4: Knowledge -->
          <section class="cat">
            <header class="cat-head">
              <span class="cat-icon"><svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4.5A1.5 1.5 0 0 1 5.5 3H17l2.5 2.5V20.5A1.5 1.5 0 0 1 18 22H5.5A1.5 1.5 0 0 1 4 20.5z'/><path d='M8 7h8M8 11h8M8 15h5'/><circle cx='18.5' cy='17.5' r='3.5'/><path d='m21 20-1.5-1.5'/></svg></span>
              <div>
                <h3>{{ t "category.knowledge" }}</h3>
                <p>{{ t "category.knowledge.tagline" }}</p>
              </div>
            </header>
            <div class="cat-grid">
              <article class="tile">
                <span class="tile-icon"><img src="/img/icons/notes.svg" alt="" width="48" height="48" loading="lazy"></span>
                <div class="tile-body">
                  <div class="tile-top">
                    <h4>{{ t "app.notes.name" }}</h4>
                    <span class="tile-kind">{{ t "app.notes.kind" }}</span>
                  </div>
                  <p class="tile-prop">{{ t "app.notes.valueprop" }}</p>
                </div>
                <div class="tile-foot">
                  <a class="tile-open" href="https://akurai-notes.olibuijr.com">{{ t "app.action.open" }}<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7M9 7h8v8"/></svg></a>
                  <a class="tile-src" href="https://akurai-build.olibuijr.com/repos/AkurAI-Notes">{{ t "app.action.source" }}: AkurAI-Notes</a>
                </div>
              </article>

            </div>
          </section>

          <!-- Category 5: Business -->
          <section class="cat">
            <header class="cat-head">
              <span class="cat-icon"><svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='7' width='18' height='13' rx='2'/><path d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/><path d='M3 12h18'/></svg></span>
              <div>
                <h3>{{ t "category.business" }}</h3>
                <p>{{ t "category.business.tagline" }}</p>
              </div>
            </header>
            <div class="cat-grid">
              <article class="tile">
                <span class="tile-icon"><img src="/img/icons/crm.svg" alt="" width="48" height="48" loading="lazy"></span>
                <div class="tile-body">
                  <div class="tile-top">
                    <h4>{{ t "app.crm.name" }}</h4>
                    <span class="tile-kind">{{ t "app.crm.kind" }}</span>
                  </div>
                  <p class="tile-prop">{{ t "app.crm.valueprop" }}</p>
                </div>
                <div class="tile-foot">
                  <span class="tile-flag">{{ t "app.action.dev" }}</span>
                  <a class="tile-src" href="https://akurai-build.olibuijr.com/repos/AkurAI-CRM">{{ t "app.action.source" }}: AkurAI-CRM</a>
                </div>
              </article>

              <article class="tile">
                <span class="tile-icon"><img src="/img/icons/tasks.svg" alt="" width="48" height="48" loading="lazy"></span>
                <div class="tile-body">
                  <div class="tile-top">
                    <h4>{{ t "app.tasks.name" }}</h4>
                    <span class="tile-kind">{{ t "app.tasks.kind" }}</span>
                  </div>
                  <p class="tile-prop">{{ t "app.tasks.valueprop" }}</p>
                </div>
                <div class="tile-foot">
                  <a class="tile-open" href="https://akurai-tasks.olibuijr.com">{{ t "app.action.open" }}<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7M9 7h8v8"/></svg></a>
                  <a class="tile-src" href="https://akurai-build.olibuijr.com/repos/akurai-tasks">{{ t "app.action.source" }}: akurai-tasks</a>
                </div>
              </article>
            </div>
          </section>

          <!-- Category 5: Infrastructure -->
          <section class="cat">
            <header class="cat-head">
              <span class="cat-icon"><svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='7' rx='1.5'/><rect x='3' y='13' width='18' height='7' rx='1.5'/><path d='M7 7.5h.01M7 16.5h.01'/></svg></span>
              <div>
                <h3>{{ t "category.infrastructure" }}</h3>
                <p>{{ t "category.infrastructure.tagline" }}</p>
              </div>
            </header>
            <div class="cat-grid">
              <article class="tile">
                <span class="tile-icon"><img src="/img/icons/router.svg" alt="" width="48" height="48" loading="lazy"></span>
                <div class="tile-body">
                  <div class="tile-top">
                    <h4>{{ t "app.router.name" }}</h4>
                    <span class="tile-kind">{{ t "app.router.kind" }}</span>
                  </div>
                  <p class="tile-prop">{{ t "app.router.valueprop" }}</p>
                </div>
                <div class="tile-foot">
                  <a class="tile-open" href="https://akurai-router.olibuijr.com/health">{{ t "app.action.status" }}<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7M9 7h8v8"/></svg></a>
                  <a class="tile-src" href="https://akurai-build.olibuijr.com/repos/AkurAI-Router">{{ t "app.action.source" }}: AkurAI-Router</a>
                </div>
              </article>

              <article class="tile">
                <span class="tile-icon"><img src="/img/icons/monitor.svg" alt="" width="48" height="48" loading="lazy"></span>
                <div class="tile-body">
                  <div class="tile-top">
                    <h4>{{ t "app.monitor.name" }}</h4>
                    <span class="tile-kind">{{ t "app.monitor.kind" }}</span>
                  </div>
                  <p class="tile-prop">{{ t "app.monitor.valueprop" }}</p>
                </div>
                <div class="tile-foot">
                  <a class="tile-open" href="https://monitor.olibuijr.com">{{ t "app.action.open" }}<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7M9 7h8v8"/></svg></a>
                  <a class="tile-src" href="https://akurai-build.olibuijr.com/repos/AkurAI-Monitor">{{ t "app.action.source" }}: AkurAI-Monitor</a>
                </div>
              </article>

              <article class="tile">
                <span class="tile-icon"><img src="/img/icons/dns.svg" alt="" width="48" height="48" loading="lazy"></span>
                <div class="tile-body">
                  <div class="tile-top">
                    <h4>{{ t "app.dns.name" }}</h4>
                    <span class="tile-kind">{{ t "app.dns.kind" }}</span>
                  </div>
                  <p class="tile-prop">{{ t "app.dns.valueprop" }}</p>
                </div>
                <div class="tile-foot">
                  <span class="tile-flag">{{ t "app.action.dns" }}</span>
                  <a class="tile-src" href="https://akurai-build.olibuijr.com/repos/AkurAI-DNS">{{ t "app.action.source" }}: AkurAI-DNS</a>
                </div>
              </article>

              <article class="tile">
                <span class="tile-icon"><img src="/img/icons/build.svg" alt="" width="48" height="48" loading="lazy"></span>
                <div class="tile-body">
                  <div class="tile-top">
                    <h4>{{ t "app.build.name" }}</h4>
                    <span class="tile-kind">{{ t "app.build.kind" }}</span>
                  </div>
                  <p class="tile-prop">{{ t "app.build.valueprop" }}</p>
                </div>
                <div class="tile-foot">
                  <a class="tile-open" href="https://akurai-build.olibuijr.com">{{ t "app.action.open" }}<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7M9 7h8v8"/></svg></a>
                  <a class="tile-src" href="https://akurai-build.olibuijr.com/repos/AkurAI-Build">{{ t "app.action.source" }}: AkurAI-Build</a>
                </div>
              </article>
            </div>
          </section>

          <!-- Category 6: Developer -->
          <section class="cat">
            <header class="cat-head">
              <span class="cat-icon"><svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='m9 8-4 4 4 4'/><path d='m15 8 4 4-4 4'/></svg></span>
              <div>
                <h3>{{ t "category.developer" }}</h3>
                <p>{{ t "category.developer.tagline" }}</p>
              </div>
            </header>
            <div class="cat-grid">
              <article class="tile">
                <span class="tile-icon"><img src="/img/icons/framework.svg" alt="" width="48" height="48" loading="lazy"></span>
                <div class="tile-body">
                  <div class="tile-top">
                    <h4>{{ t "app.framework.name" }}</h4>
                    <span class="tile-kind">{{ t "app.framework.kind" }}</span>
                  </div>
                  <p class="tile-prop">{{ t "app.framework.valueprop" }}</p>
                </div>
                <div class="tile-foot">
                  <a class="tile-open" href="https://akurai-framework.olibuijr.com">{{ t "app.action.open" }}<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7M9 7h8v8"/></svg></a>
                  <a class="tile-src" href="https://akurai-build.olibuijr.com/repos/AkurAI-Framework">{{ t "app.action.source" }}: AkurAI-Framework</a>
                </div>
              </article>

              <article class="tile">
                <span class="tile-icon"><img src="/img/icons/platform.svg" alt="" width="48" height="48" loading="lazy"></span>
                <div class="tile-body">
                  <div class="tile-top">
                    <h4>{{ t "app.platform.name" }}</h4>
                    <span class="tile-kind">{{ t "app.platform.kind" }}</span>
                  </div>
                  <p class="tile-prop">{{ t "app.platform.valueprop" }}</p>
                </div>
                <div class="tile-foot">
                  <a class="tile-open" href="https://platform.olibuijr.com">{{ t "app.action.open" }}<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7M9 7h8v8"/></svg></a>
                  <a class="tile-src" href="https://akurai-build.olibuijr.com/repos/AkurAI-Platform">{{ t "app.action.source" }}: AkurAI-Platform</a>
                </div>
              </article>

              <article class="tile">
                <span class="tile-icon"><img src="/img/icons/akurai.svg" alt="" width="48" height="48" loading="lazy"></span>
                <div class="tile-body">
                  <div class="tile-top">
                    <h4>{{ t "app.gateway.name" }}</h4>
                    <span class="tile-kind">{{ t "app.gateway.kind" }}</span>
                  </div>
                  <p class="tile-prop">{{ t "app.gateway.valueprop" }}</p>
                </div>
                <div class="tile-foot">
                  <a class="tile-open" href="http://mail.olibuijr.com:8644/health">{{ t "app.action.status" }}<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7M9 7h8v8"/></svg></a>
                  <a class="tile-src" href="https://github.com/olibuijr/AkurAI-RustAgent">AkurAI-RustAgent</a>
                </div>
              </article>
            </div>
          </section>
        </div>
      </section>

      <section id="why" class="shell section">
        <div class="section-head">
          <span class="eyebrow">{{ t "why.eyebrow" }}</span>
          <h2>{{ t "why.heading" }}</h2>
          <p>{{ t "why.lede" }}</p>
        </div>
        <div class="features">
          <article class="feature">
            <span class="feature-icon"><svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 11 12 4l8 7'/><path d='M6 10v9h12v-9'/><rect x='10' y='13' width='4' height='6' rx='1'/></svg></span>
            <h3>{{ t "why.feature1.title" }}</h3>
            <p>{{ t "why.feature1.body" }}</p>
          </article>
          <article class="feature">
            <span class="feature-icon"><svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M20 4C13 4 8 9 6 16l-2 4 4-2c7-2 12-7 12-14Z'/><path d='M9 17 18 8'/><path d='M14 7h.01'/></svg></span>
            <h3>{{ t "why.feature2.title" }}</h3>
            <p>{{ t "why.feature2.body" }}</p>
          </article>
          <article class="feature">
            <span class="feature-icon"><svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3.2'/><path d='M12 3v2.5M12 18.5V21M3 12h2.5M18.5 12H21M5.6 5.6l1.8 1.8M16.6 16.6l1.8 1.8M18.4 5.6l-1.8 1.8M7.4 16.6l-1.8 1.8'/></svg></span>
            <h3>{{ t "why.feature3.title" }}</h3>
            <p>{{ t "why.feature3.body" }}</p>
          </article>
          <article class="feature">
            <span class="feature-icon"><svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 19h18'/><path d='m6 19 5-9 3 4 2-3 4 8'/></svg></span>
            <h3>{{ t "why.feature4.title" }}</h3>
            <p>{{ t "why.feature4.body" }}</p>
          </article>
        </div>
      </section>

      <section class="shell section proof">
        <div class="section-head">
          <span class="eyebrow">{{ t "proof.eyebrow" }}</span>
          <h2>{{ t "proof.heading" }}</h2>
          <p>{{ t "proof.lede" }}</p>
        </div>
        <div class="proof-grid">
          <!-- Card 1: Auth -->
          <article class="proof-card">
            <p class="proof-task">{{ t "proof.card1.name" }}</p>
            <p class="proof-big">{{ proof.card1.akur_memory }}</p>
            <p class="proof-sub">{{ t "proof.card1.akur_label" }}</p>
            <div class="proof-vs">
              <span>{{ t "methodology.vs" }} {{ proof.card1.other_memory }}</span>
              <span class="proof-other">{{ t "proof.card1.other_product" }}</span>
            </div>
            <p class="proof-diff">{{ t "proof.card1.difference" }}</p>
            <a class="proof-src" href="{{ proof.card1.source_url }}">{{ t "proof.card1.source_label" }}</a>
          </article>

          <!-- Card 2: Monitor -->
          <article class="proof-card">
            <p class="proof-task">{{ t "proof.card2.name" }}</p>
            <p class="proof-big">{{ proof.card2.akur_memory }}</p>
            <p class="proof-sub">{{ t "proof.card2.akur_label" }}</p>
            <div class="proof-vs">
              <span>{{ t "methodology.vs" }} {{ proof.card2.other_memory }}</span>
              <span class="proof-other">{{ t "proof.card2.other_product" }}</span>
            </div>
            <p class="proof-diff">{{ t "proof.card2.difference" }}</p>
            <a class="proof-src" href="{{ proof.card2.source_url }}">{{ t "proof.card2.source_label" }}</a>
          </article>

          <!-- Card 3: DNS -->
          <article class="proof-card">
            <p class="proof-task">{{ t "proof.card3.name" }}</p>
            <p class="proof-big">{{ proof.card3.akur_memory }}</p>
            <p class="proof-sub">{{ t "proof.card3.akur_label" }}</p>
            <div class="proof-vs">
              <span>{{ t "methodology.vs" }} {{ proof.card3.other_memory }}</span>
              <span class="proof-other">{{ t "proof.card3.other_product" }}</span>
            </div>
            <p class="proof-diff">{{ t "proof.card3.difference" }}</p>
            <a class="proof-src" href="{{ proof.card3.source_url }}">{{ t "proof.card3.source_label" }}</a>
          </article>

          <!-- Card 4: Serve Page -->
          <article class="proof-card">
            <p class="proof-task">{{ t "proof.card4.name" }}</p>
            <p class="proof-big">{{ proof.card4.akur_memory }}</p>
            <p class="proof-sub">{{ t "proof.card4.akur_label" }}</p>
            <div class="proof-vs">
              <span>{{ t "methodology.vs" }} {{ proof.card4.other_memory }}</span>
              <span class="proof-other">{{ t "proof.card4.other_product" }}</span>
            </div>
            <p class="proof-diff">{{ t "proof.card4.difference" }}</p>
            <a class="proof-src" href="{{ proof.card4.source_url }}">{{ t "proof.card4.source_label" }}</a>
          </article>
        </div>
      </section>

      <section class="trust-band">
        <div class="shell trust">
          <div class="trust-cell">
            <strong>{{ t "trust.value1" }}</strong>
            <span>{{ t "trust.label1" }}</span>
          </div>
          <div class="trust-cell">
            <strong>{{ t "trust.value2" }}</strong>
            <span>{{ t "trust.label2" }}</span>
          </div>
          <div class="trust-cell">
            <strong>{{ t "trust.value3" }}</strong>
            <span>{{ t "trust.label3" }}</span>
          </div>
          <div class="trust-cell">
            <strong>{{ t "trust.value4" }}</strong>
            <span>{{ t "trust.label4" }}</span>
          </div>
        </div>
      </section>

      <section id="cta" class="shell section cta">
        <span class="eyebrow">{{ t "cta.eyebrow" }}</span>
        <h2>{{ t "cta.heading" }}</h2>
        <p>{{ t "cta.lede" }}</p>
        <div class="btn-row center">
          <a class="btn btn-primary" href="#suite">{{ t "cta.primary" }}</a>
          <a class="btn btn-secondary" href="{{ github.url }}">{{ t "cta.secondary" }}</a>
        </div>
      </section>

      <section id="sources" class="shell section sources-section">
        <div>
          <span class="eyebrow">{{ t "methodology.label" }}</span>
          <h2>{{ t "methodology.title" }}</h2>
          <p>{{ t "methodology.text" }}</p>
        </div>
        <div class="source-list">
          {% for source in sources %}
          <a href="{{ source.url }}">{{ source.label }}</a>
          {% endfor %}
        </div>
      </section>
    </main>
{% include "footer" %}