Menu
Public repository / 54864d769f47e4b584afb75e6ecc5b19890c21b4
AkurAI-Platform / frontend/index.html
Latest change 54864d769f47e4b584afb75e6ecc5b19890c21b4 - Add modular subscriptions with myPOS checkout 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="subscribe"
class="subscription-section section"
data-subscriptions
data-count-suffix='{{ t "subscription.count_suffix" }}'
data-per-month='{{ t "subscription.per_month" }}'
data-per-year='{{ t "subscription.per_year" }}'
data-unavailable='{{ t "subscription.unavailable" }}'
data-load-error='{{ t "subscription.load_error" }}'
data-validation-error='{{ t "subscription.validation_error" }}'
data-consent-error='{{ t "subscription.consent_error" }}'
data-checkout-error='{{ t "subscription.checkout_error" }}'
data-submitting='{{ t "subscription.submitting" }}'
>
<div class="shell">
<div class="section-head">
<span class="eyebrow">{{ t "subscription.eyebrow" }}</span>
<h2>{{ t "subscription.title" }}</h2>
<p>{{ t "subscription.lede" }}</p>
</div>
<div class="subscription-layout">
<div class="plan-builder">
<div class="billing-switch" aria-label='{{ t "subscription.summary" }}'>
<button class="billing-option is-active" type="button" data-interval="monthly" aria-pressed="true">
{{ t "subscription.monthly" }}
</button>
<button class="billing-option" type="button" data-interval="annual" aria-pressed="false">
{{ t "subscription.annual" }}
<span>{{ t "subscription.annual_save" }}</span>
</button>
</div>
<div id="subscription-products" class="subscription-products" aria-live="polite">
<p class="subscription-loading">{{ t "subscription.loading" }}</p>
</div>
</div>
<aside class="plan-summary" aria-live="polite">
<span class="eyebrow">{{ t "subscription.summary" }}</span>
<p id="subscription-empty" class="plan-empty">{{ t "subscription.empty" }}</p>
<ul id="subscription-selection" class="plan-selection"></ul>
<div class="plan-total">
<span id="subscription-count">0 {{ t "subscription.count_suffix" }}</span>
<strong id="subscription-total">€0.00</strong>
<small id="subscription-period">{{ t "subscription.per_month" }}</small>
</div>
<button id="subscription-continue" class="btn btn-primary plan-continue" type="button" disabled>
{{ t "subscription.continue" }}
</button>
<p class="secure-note">{{ t "subscription.secure" }}</p>
</aside>
</div>
</div>
</section>
<div id="subscription-modal" class="subscription-modal" hidden>
<div class="modal-backdrop" data-modal-close></div>
<section class="subscription-dialog" role="dialog" aria-modal="true" aria-labelledby="subscription-dialog-title">
<button class="modal-close" type="button" data-modal-close aria-label='{{ t "subscription.close" }}'>×</button>
<span class="eyebrow">{{ t "subscription.modal_eyebrow" }}</span>
<h2 id="subscription-dialog-title">{{ t "subscription.modal_title" }}</h2>
<p>{{ t "subscription.modal_lede" }}</p>
<form id="subscription-form" novalidate>
<label class="field">
<span>{{ t "subscription.name" }}</span>
<input name="name" type="text" autocomplete="name" maxlength="120" />
</label>
<label class="field">
<span>{{ t "subscription.email" }}</span>
<input name="email" type="email" autocomplete="email" maxlength="254" inputmode="email" />
</label>
<label class="field">
<span>{{ t "subscription.company" }}</span>
<input name="company" type="text" autocomplete="organization" maxlength="160" />
</label>
<button id="subscription-consent" class="consent-control" type="button" role="checkbox" aria-checked="false">
<span class="consent-mark" aria-hidden="true"></span>
<span>{{ t "subscription.consent" }}</span>
</button>
<button id="subscription-submit" class="btn btn-primary modal-submit" type="submit">
{{ t "subscription.pay" }}
</button>
</form>
</section>
</div>
<div id="payment-toasts" class="payment-toasts" aria-live="polite" aria-atomic="true"></div>
<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" %}