Menu
Public repository / ab5af3b4bf8dbd84fe1c393cd0649b929a224d26
AkurAI-Platform / frontend/index.html
Latest change 71c9827b6d9b8cfa3663c85cdeaefbd354f97788 - feat: add Platform OIDC browser session (AKURAI-PLATFORM-39) 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="#subscribe">{{ t "hero.cta_primary" }}</a>
<a class="btn btn-secondary" href="/auth/login">{{ t "hero.cta_signin" }}</a>
<button class="btn btn-tertiary" type="button" data-contact-trigger>{{ t "hero.cta_contact" }}</button>
<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>
</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="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" data-cat="communication"></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" data-cat="security"></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" data-cat="storage"></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" data-cat="knowledge"></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" data-cat="business"></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" data-cat="infrastructure"></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" data-cat="developer"></div>
</section>
</div>
</section>
<script type="module" src="/suite-tiles.js"></script>
<script type="module" src="/subscriptions.js"></script>
<script type="module" src="/contact.js"></script>
<script type="module" src="/portal.js"></script>
<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-checkout-unavailable='{{ t "subscription.checkout_unavailable" }}'
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 id="subscription-payment-note" class="secure-note">{{ t "subscription.secure" }}</p>
<div class="policy-links" style="display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px;font-size:12px">
<a href="/policies">{{ t "subscription.terms" }}</a>
<span style="color:var(--border)">·</span>
<a href="/policies#privacy">{{ t "subscription.privacy" }}</a>
<span style="color:var(--border)">·</span>
<a href="/policies#refund">{{ t "subscription.cancel" }}</a>
</div>
<p style="margin:8px 0 0;color:var(--muted);font-size:11px;text-align:center">{{ t "subscription.tax_note" }}</p>
</aside>
</div>
</div>
</section>
<section id="customer-portal" class="section control-plane" data-control-plane aria-labelledby="control-plane-title">
<div class="shell">
<div class="section-head">
<span class="eyebrow">Customer portal</span>
<h2 id="control-plane-title">Your managed workspace control plane</h2>
<p>Sign in with AkurAI ID to view organization-scoped members, plan, deployment health, verified backups, invoices, immutable audit history, and support recovery.</p>
</div>
<div class="portal-toolbar">
<a class="btn btn-primary" href="/auth/login">Sign in with AkurAI ID</a>
<button class="btn btn-secondary" type="button" data-portal-refresh>Refresh portal</button>
</div>
<p class="portal-state" data-portal-state aria-live="polite">Loading your organization portal…</p>
<div class="portal-organizations" data-portal-organizations></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>
<div id="contact-modal" class="contact-modal" hidden>
<div class="modal-backdrop" data-contact-close></div>
<section class="contact-dialog" role="dialog" aria-modal="true" aria-labelledby="contact-dialog-title">
<button class="modal-close" type="button" data-contact-close aria-label='{{ t "contact.close" }}'>×</button>
<span class="eyebrow">{{ t "contact.modal_eyebrow" }}</span>
<h2 id="contact-dialog-title">{{ t "contact.modal_title" }}</h2>
<p>{{ t "contact.modal_lede" }}</p>
<form id="contact-form" novalidate>
<label class="field">
<span>{{ t "subscription.name" }}</span>
<input name="name" type="text" autocomplete="name" maxlength="120" required />
</label>
<label class="field">
<span>{{ t "subscription.email" }}</span>
<input name="email" type="email" autocomplete="email" maxlength="254" inputmode="email" required />
</label>
<label class="field">
<span>{{ t "subscription.company" }}</span>
<input name="company" type="text" autocomplete="organization" maxlength="160" />
</label>
<fieldset class="field outcome-group">
<legend>{{ t "contact.outcome_label" }}</legend>
<label class="outcome-opt">
<input type="radio" name="outcome" value="demo" checked />
<span>{{ t "contact.outcome_demo" }}</span>
</label>
<label class="outcome-opt">
<input type="radio" name="outcome" value="waitlist" />
<span>{{ t "contact.outcome_waitlist" }}</span>
</label>
<label class="outcome-opt">
<input type="radio" name="outcome" value="contact" />
<span>{{ t "contact.outcome_contact" }}</span>
</label>
</fieldset>
<label class="field">
<span>{{ t "contact.intent_label" }}</span>
<textarea name="intent" rows="3" maxlength="500"></textarea>
</label>
<button id="contact-consent" class="consent-control" type="button" role="checkbox" aria-checked="false">
<span class="consent-mark" aria-hidden="true"></span>
<span>{{ t "contact.consent" }}</span>
</button>
<button id="contact-submit" class="btn btn-primary modal-submit" type="submit">
{{ t "contact.submit" }}
</button>
<p id="contact-confirmation" class="contact-confirmation" hidden></p>
</form>
</section>
</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="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>
<button class="btn btn-tertiary" type="button" data-contact-trigger>{{ t "cta.contact_primary" }}</button>
<a class="btn btn-secondary" href="{{ github.url }}">{{ t "cta.secondary" }}</a>
</div>
</section>
<details class="shell section" style="cursor:pointer" id="detail">
<summary style="font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;padding:16px 0;list-style:none">
{{ t "nav.detail" }}
</summary>
<!-- Control panel / architecture diagram (previously hero-art) -->
<section class="control-panel" aria-label='{{ t "control.aria" }}' style="margin-top:24px">
<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-state="unknown">{{ t "control.static" }}</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>
<div class="control-node node-mail" data-service="mail">
<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>
</div>
<div class="control-node node-auth" data-service="auth">
<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>
</div>
<div class="control-node node-vpn" data-service="vpn">
<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>
</div>
<div class="control-node node-drive" data-service="drive">
<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>
</div>
<div class="control-node node-router" data-service="router">
<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>
</div>
<div class="control-node node-monitor" data-service="monitor">
<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>
</div>
<div class="control-node node-dns" data-service="dns">
<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>
</div>
<div class="control-node node-framework" data-service="framework">
<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>
</div>
<p class="control-map-note">
<span>{{ t "control.status_unknown" }}</span>
<span>{{ t "control.source" }}</span>
<time datetime="2026-07-20">{{ t "control.updated" }}</time>
</p>
<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>
</section>
<!-- Motion video -->
<section id="motion" class="motion-section section" style="padding-block:40px">
<div class="shell motion-grid" style="--shell:100%">
<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>
<!-- Benchmark proof cards -->
<section class="shell section proof" style="padding-block:40px">
<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">
<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>
<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>
<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>
<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>
<!-- Methodology / sources -->
<section class="shell section sources-section" style="padding-block:40px;border-top:1px solid var(--border)">
<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>
</details>
</main>
{% include "footer" %}