Menu
Public repository / master
AkurAI-Drive / site/frontend/index.html
Latest change ef17532dc9d989dfc0e023bf7dc1d65272366cb7 - site: capture the live Framework i18n site; deploy frontend + backend by AkurAI Agent
<!doctype html>
<html lang="{{ __locale }}">
<head>
<meta charset="utf-8">
<script>(function(){try{var m=document.cookie.match(/(?:^|; )akurai-theme=([^;]*)/);var t=(m?decodeURIComponent(m[1]):null)||localStorage.getItem("akurai-theme");if(!t)t=matchMedia("(prefers-color-scheme: light)").matches?"akurai-light":"akurai";document.documentElement.setAttribute("data-theme",t)}catch(e){}})()</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AkurAI Drive — your private cloud, hosted in Iceland</title>
<meta name="description" content="AkurAI Drive is a private, Iceland-hosted file cloud for businesses and teams. Single sign-on with AkurAI, S3-backed storage, your data on infrastructure you control.">
<meta property="og:title" content="AkurAI Drive — your private cloud, hosted in Iceland">
<meta property="og:description" content="A private, Iceland-hosted file cloud. Sign in with AkurAI, unlimited S3-backed storage, real data residency.">
<meta property="og:type" content="website">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;450;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/themes.css">
<link rel="stylesheet" href="/shared-shell.css">
<style>
/* nav */
nav{position:sticky;top:0;z-index:40;backdrop-filter:blur(12px);background:color-mix(in srgb, var(--bg) 78%, transparent);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:18px}
.brand small{display:block;font-family:var(--body);font-weight:450;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.mark{width:32px;height:32px;flex:none}
.nav-links{display:flex;align-items:center;gap:8px}
.nav-links a.txt{color:var(--muted);padding:8px 12px;border-radius:6px;font-size:14.5px;font-weight:500}
.nav-links a.txt:hover{color:var(--ink);background:rgba(255,255,255,.04)}
@media(max-width:720px){.nav-links a.txt{display:none}}
/* lang toggle */
.lang-toggle{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:6px;overflow:hidden}
.lang-opt{appearance:none;border:0;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:700;letter-spacing:.02em;padding:5px 9px;min-width:44px;min-height:44px;cursor:pointer;line-height:1;transition:background-color .15s ease,color .15s ease}
.lang-opt+.lang-opt{border-left:1px solid var(--line2)}
.lang-opt:hover{color:var(--ink)}
.lang-opt.is-active{background:var(--brand);color:var(--on-accent)}
.lang-opt:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
/* hero */
.hero{padding:78px 0 54px}
.hero h1{font-size:clamp(38px,6.4vw,68px);font-weight:800;margin:18px 0 18px}
.lede{font-size:clamp(17px,2.2vw,21px);color:var(--muted);max-width:60ch;margin:0 0 30px}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:30px;color:var(--faint);font-size:13.5px}
.hero-meta b{color:var(--muted);font-weight:600}
/* trust strip */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.015)}
.trust-in{display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center;justify-content:center;padding:18px 24px;color:var(--faint);font-size:13px}
.trust-in span{display:inline-flex;align-items:center;gap:8px}
.trust-in svg{width:16px;height:16px;color:var(--brand2)}
/* sections */
section.block{padding:74px 0}
.sec-head{text-align:center;max-width:660px;margin:0 auto 46px}
.sec-head h2{font-size:clamp(28px,4vw,40px);font-weight:700}
.sec-head p{color:var(--muted);margin:14px 0 0;font-size:17px}
.kicker{color:var(--brand2);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.grid{display:grid;gap:18px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:920px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr}}
@media(max-width:560px){.g4{grid-template-columns:1fr}}
.card .ico{width:26px;height:26px;color:var(--brand);margin-bottom:12px}
.card h3{font-size:16.5px;font-weight:600;margin-bottom:7px}
.card p{color:var(--muted);font-size:14.5px;margin:0}
/* steps */
.steps{counter-reset:s}
.step{position:relative;padding-left:60px}
.step::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:-2px;width:40px;height:40px;border-radius:6px;
display:grid;place-items:center;font-family:var(--display);font-weight:700;color:var(--on-accent);background:linear-gradient(92deg,var(--brand),var(--brand2))}
.step h3{font-size:17px;margin-bottom:6px}
.step p{color:var(--muted);font-size:14.5px;margin:0}
/* pricing */
.price-grid{align-items:stretch}
.plan{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:6px;padding:26px;background:var(--panel)}
.plan.feat{border-color:color-mix(in srgb, var(--brand) 55%, transparent);box-shadow:0 0 0 1px color-mix(in srgb, var(--brand) 26%, transparent),0 24px 60px color-mix(in srgb, var(--brand) 14%, transparent);position:relative}
.plan.feat::after{content:"{{ t "plan.pro.badge" }}";position:absolute;top:-11px;left:50%;transform:translateX(-50%);
font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--on-accent);background:linear-gradient(92deg,var(--brand),var(--brand2));padding:4px 12px;border-radius:6px}
.plan h3{font-size:18px;font-weight:700}
.plan .price{font-family:var(--display);font-weight:800;font-size:38px;margin:14px 0 2px}
.plan .price span{font-family:var(--body);font-size:15px;font-weight:500;color:var(--faint)}
.plan .sub{color:var(--muted);font-size:14px;min-height:40px}
.plan ul{list-style:none;margin:18px 0 22px;padding:0;display:grid;gap:11px}
.plan li{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:14.5px}
.plan li svg{width:18px;height:18px;color:var(--good);flex:none;margin-top:1px}
.plan .btn{justify-content:center;margin-top:auto}
/* security band */
.band{border:1px solid var(--line);border-radius:6px;padding:40px;background:
radial-gradient(600px 300px at 100% 0,color-mix(in srgb, var(--brand2) 14%, transparent),transparent 60%),
linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01))}
.band-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:34px;align-items:center}
@media(max-width:820px){.band-grid{grid-template-columns:1fr}}
.band h2{font-size:clamp(24px,3.4vw,32px)}
.band p{color:var(--muted);margin:14px 0 0}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.chip{font-size:13px;color:var(--muted);border:1px solid var(--line2);border-radius:6px;padding:7px 13px;background:rgba(255,255,255,.02)}
/* final cta */
.final{text-align:center;border:1px solid var(--line);border-radius:6px;padding:54px 28px;background:
radial-gradient(700px 360px at 50% 0,color-mix(in srgb, var(--brand) 18%, transparent),transparent 60%),var(--panel)}
.final h2{font-size:clamp(28px,4.4vw,44px);font-weight:800}
.final p{color:var(--muted);max-width:52ch;margin:14px auto 26px;font-size:17px}
footer{border-top:1px solid var(--line);margin-top:30px;padding:30px 0;color:var(--faint);font-size:13.5px}
.foot-in{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center}
footer a{color:var(--muted)}footer a:hover{color:var(--ink)}
@media(max-width:600px){
.theme-picker,.nav-links>.btn{display:none}
.plan{min-width:0;padding:20px}
.plan .btn{white-space:normal}
}
</style>
</head>
<body>
<!-- NAV -->
<nav>
<div class="container nav-in">
<a class="brand" href="/">
<svg class="mark" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.38 3.23c1.05-2.23 4.19-2.23 5.24 0l11.05 23.62A2.91 2.91 0 0 1 27.03 31h-3.42c-1.17 0-2.22-.7-2.67-1.78l-2.05-4.93h-5.78l-2.05 4.93A2.9 2.9 0 0 1 8.39 31H4.97a2.91 2.91 0 0 1-2.64-4.15L13.38 3.23ZM16 11.17l-5.13 13.1h10.26L16 11.17Z"/><path d="M10.38 20.54h11.24a2.23 2.23 0 0 1 0 4.46H10.38a2.23 2.23 0 0 1 0-4.46Z"/></svg>
<span>AkurAI Drive<small>Hosted in Iceland</small></span>
</a>
<div class="nav-links">
<a class="txt" href="#features">{{ t "nav.features" }}</a>
<a class="txt" href="#pricing">{{ t "nav.pricing" }}</a>
<a class="txt" href="#how">{{ t "nav.how" }}</a>
<a class="btn btn-primary btn-sm" href="/auth/login">{{ t "hero.signin" }}</a>
<span data-lang-toggle></span>
<span class="theme-picker" data-theme-picker></span>
</div>
</div>
</nav>
<!-- HERO -->
<header class="hero">
<div class="container">
<span class="eyebrow"><span class="dot"></span> {{ t "hero.eyebrow" }}</span>
<h1>{{ t "hero.headline1" }}<br><span class="grad">{{ t "hero.headline2" }}</span></h1>
<p class="lede">{{ t "hero.lede" }}</p>
<div class="btn-row">
<a class="btn btn-primary" href="/auth/login">{{ t "hero.signin" }}
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</a>
</div>
<div class="hero-meta">
<span><b>{{ t "hero.meta.sso" }}</b></span>
<span><b>{{ t "hero.meta.s3" }}</b></span>
<span><b>🇮🇸</b> {{ t "hero.meta.residency" }}</span>
<span><b>{{ t "hero.meta.nogatekeeper" }}</b></span>
</div>
</div>
</header>
<!-- TRUST -->
<div class="trust">
<div class="trust-in">
<span><svg viewBox="0 0 24 24" fill="none"><path d="M12 2 4 6v6c0 5 3.4 8 8 10 4.6-2 8-5 8-10V6l-8-4Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg> {{ t "trust.tls" }}</span>
<span><svg viewBox="0 0 24 24" fill="none"><rect x="4" y="10" width="16" height="11" rx="2" stroke="currentColor" stroke-width="1.8"/><path d="M8 10V7a4 4 0 0 1 8 0v3" stroke="currentColor" stroke-width="1.8"/></svg> {{ t "trust.sso" }}</span>
<span><svg viewBox="0 0 24 24" fill="none"><path d="M3 7h18M3 7l2-3h14l2 3M5 7v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg> {{ t "trust.storage" }}</span>
<span><svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.8"/><path d="M3 12h18M12 3c2.5 2.7 2.5 15 0 18" stroke="currentColor" stroke-width="1.6"/></svg> {{ t "trust.region" }}</span>
</div>
</div>
<!-- FEATURES -->
<section class="block" id="features">
<div class="container">
<div class="sec-head">
<div class="kicker">{{ t "features.kicker" }}</div>
<h2>{{ t "features.headline" }}</h2>
<p>{{ t "features.sub" }}</p>
</div>
<div class="grid g4">
<article class="card">
<svg class="ico" viewBox="0 0 24 24" fill="none"><path d="M12 2 4 6v6c0 5 3.4 8 8 10 4.6-2 8-5 8-10V6l-8-4Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="m9 12 2 2 4-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
<h3>{{ t "feature.identity.title" }}</h3>
<p>{{ t "feature.identity.body" }}</p>
</article>
<article class="card">
<svg class="ico" viewBox="0 0 24 24" fill="none"><ellipse cx="12" cy="6" rx="8" ry="3" stroke="currentColor" stroke-width="1.8"/><path d="M4 6v12c0 1.7 3.6 3 8 3s8-1.3 8-3V6M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3" stroke="currentColor" stroke-width="1.8"/></svg>
<h3>{{ t "feature.storage.title" }}</h3>
<p>{{ t "feature.storage.body" }}</p>
</article>
<article class="card">
<svg class="ico" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.8"/><path d="M3 12h18M12 3c2.5 2.7 2.5 15 0 18M12 3C9.5 5.7 9.5 18 12 21" stroke="currentColor" stroke-width="1.6"/></svg>
<h3>{{ t "feature.residency.title" }}</h3>
<p>{{ t "feature.residency.body" }}</p>
</article>
<article class="card">
<svg class="ico" viewBox="0 0 24 24" fill="none"><path d="M13 2 3 14h7l-1 8 10-12h-7l1-8Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
<h3>{{ t "feature.provisioning.title" }}</h3>
<p>{{ t "feature.provisioning.body" }}</p>
</article>
</div>
</div>
</section>
<!-- HOW IT WORKS -->
<section class="block" id="how" style="padding-top:10px">
<div class="container">
<div class="sec-head">
<div class="kicker">{{ t "how.kicker" }}</div>
<h2>{{ t "how.headline" }}</h2>
</div>
<div class="grid g3 steps">
<div class="step"><h3>{{ t "how.step1.title" }}</h3><p>{{ t "how.step1.body" }}</p></div>
<div class="step"><h3>{{ t "how.step2.title" }}</h3><p>{{ t "how.step2.body" }}</p></div>
<div class="step"><h3>{{ t "how.step3.title" }}</h3><p>{{ t "how.step3.body" }}</p></div>
</div>
</div>
</section>
<!-- PRICING -->
<section class="block" id="pricing">
<div class="container">
<div class="sec-head">
<div class="kicker">{{ t "pricing.kicker" }}</div>
<h2>{{ t "pricing.headline" }}</h2>
<p>{{ t "pricing.sub" }}</p>
</div>
<div class="grid g3 price-grid">
<div class="plan">
<h3>{{ t "plan.starter.name" }}</h3>
<div class="price">2.490 kr<span>/mo</span></div>
<div class="sub">{{ t "plan.starter.sub" }}</div>
<ul>
<li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4 10-10" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg> {{ t "plan.feature.100gb" }}</li>
<li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4 10-10" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg> {{ t "plan.feature.5members" }}</li>
<li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4 10-10" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg> {{ t "plan.feature.sso" }}</li>
</ul>
<a class="btn btn-ghost" href="/auth/login">{{ t "hero.signin" }}</a>
</div>
<div class="plan feat">
<h3>{{ t "plan.pro.name" }}</h3>
<div class="price">6.990 kr<span>/mo</span></div>
<div class="sub">{{ t "plan.pro.sub" }}</div>
<ul>
<li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4 10-10" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg> {{ t "plan.feature.1tb" }}</li>
<li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4 10-10" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg> {{ t "plan.feature.25members" }}</li>
<li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4 10-10" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg> {{ t "plan.feature.versioning" }}</li>
<li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4 10-10" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg> {{ t "plan.feature.priority" }}</li>
</ul>
<a class="btn btn-primary" href="/auth/login">{{ t "hero.signin" }}</a>
</div>
<div class="plan">
<h3>{{ t "plan.business.name" }}</h3>
<div class="price">{{ t "plan.business.price" }}</div>
<div class="sub">{{ t "plan.business.sub" }}</div>
<ul>
<li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4 10-10" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg> {{ t "plan.feature.unlimited" }}</li>
<li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4 10-10" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg> {{ t "plan.feature.unlimitedmembers" }}</li>
<li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4 10-10" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg> {{ t "plan.feature.dedicated" }}</li>
<li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4 10-10" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg> {{ t "plan.feature.onboarding" }}</li>
</ul>
<a class="btn btn-ghost" href="mailto:olibuijr@olibuijr.com?subject=AkurAI%20Drive%20Business">{{ t "plan.business.cta" }}</a>
</div>
</div>
</div>
</section>
<!-- SECURITY BAND -->
<section class="block" style="padding-top:10px">
<div class="container">
<div class="band">
<div class="band-grid">
<div>
<div class="kicker">{{ t "security.kicker" }}</div>
<h2>{{ t "security.headline" }}</h2>
<p>{{ t "security.body" }}</p>
<div class="chips">
<span class="chip">{{ t "security.chip.tls" }}</span><span class="chip">{{ t "security.chip.argon" }}</span>
<span class="chip">{{ t "security.chip.isolation" }}</span><span class="chip">{{ t "security.chip.signed" }}</span>
<span class="chip">{{ t "security.chip.audit" }}</span><span class="chip">{{ t "security.chip.residency" }}</span>
</div>
</div>
<div>
<article class="card" style="background:rgba(255,255,255,.03)">
<svg class="ico" viewBox="0 0 24 24" fill="none" style="width:30px;height:30px"><rect x="3" y="11" width="18" height="10" rx="2" stroke="currentColor" stroke-width="1.8"/><path d="M7 11V7a5 5 0 0 1 10 0v4" stroke="currentColor" stroke-width="1.8"/><circle cx="12" cy="16" r="1.6" fill="currentColor"/></svg>
<h3>{{ t "security.card.title" }}</h3>
<p>{{ t "security.card.body" }}</p>
</article>
</div>
</div>
</div>
</div>
</section>
<!-- FINAL CTA -->
<section class="block" style="padding-top:0">
<div class="container">
<div class="final">
<h2>{{ t "cta.headline1" }} <span class="grad">{{ t "cta.headline2" }}</span>?</h2>
<p>{{ t "cta.sub" }}</p>
<div class="btn-row" style="justify-content:center">
<a class="btn btn-primary" href="/auth/login">{{ t "hero.signin" }}</a>
</div>
</div>
</div>
</section>
<footer>
<div class="container foot-in">
<span>{{ t "footer.copy" }}</span>
<span><a href="https://auth.olibuijr.com">Account</a> · <a href="https://auth.olibuijr.com/health">Status</a> · <a href="https://github.com/olibuijr/AkurAI">AkurAI</a></span>
</div>
</footer>
<script type="module" src="/theme.js"></script>
<script type="module" src="/lang.js"></script>
</body>
</html>