AkurAI-Platform / frontend/index.html

Latest change 0183a48e4f75fa9dcea1bf01af89c93ddb3fe5be - Refactor platform into a polished SaaS product-suite front door by Olafur Bui

{% 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">{{ hero.eyebrow }}</span>
            <h1>{{ hero.headline }} <span class="grad">{{ hero.headline_accent }}</span></h1>
            <p class="lede">{{ hero.lede }}</p>
            <div class="btn-row">
              <a class="btn btn-primary" href="#suite">{{ hero.cta_primary }}</a>
              <a class="btn btn-secondary" href="{{ github.url }}">{{ hero.cta_secondary }}</a>
            </div>
            <div id="health" class="health-pill" aria-live="polite">checking platform…</div>
          </div>

          <div class="hero-art" aria-hidden="true">
            <div class="preview-card">
              <div class="preview-bar">
                <span class="dot"></span><span class="dot"></span><span class="dot"></span>
                <span class="preview-title">AkurAI suite</span>
              </div>
              <div class="preview-grid">
                {% for cat in suite %}{% for app in cat.apps %}
                <div class="preview-chip">
                  <span class="preview-icon">{{{ app.icon }}}</span>
                  <span class="preview-name">{{ app.name }}</span>
                </div>
                {% endfor %}{% endfor %}
              </div>
            </div>
          </div>
        </div>
      </section>

      <section id="suite" class="shell section">
        <div class="section-head">
          <span class="eyebrow">The suite</span>
          <h2>One account. Every app you actually need.</h2>
          <p>A private alternative to the big platforms — grouped the way you'd reach for them. Open any app, or read the code behind it.</p>
        </div>

        <div class="suite">
          {% for cat in suite %}
          <section class="cat">
            <header class="cat-head">
              <span class="cat-icon">{{{ cat.icon }}}</span>
              <div>
                <h3>{{ cat.category }}</h3>
                <p>{{ cat.tagline }}</p>
              </div>
            </header>
            <div class="cat-grid">
              {% for app in cat.apps %}
              <article class="tile">
                <span class="tile-icon">{{{ app.icon }}}</span>
                <div class="tile-body">
                  <div class="tile-top">
                    <h4>{{ app.name }}</h4>
                    <span class="tile-kind">{{ app.kind }}</span>
                  </div>
                  <p class="tile-prop">{{ app.valueprop }}</p>
                </div>
                <div class="tile-foot">
                  {% if app.url %}<a class="tile-open" href="{{ app.url }}">{{ app.action }}<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>{% else %}<span class="tile-flag">{{ app.action }}</span>{% endif %}
                  {% for repo in app.repos %}<a class="tile-src" href="{{ repo.url }}">{{ repo.label }}</a>{% endfor %}
                </div>
              </article>
              {% endfor %}
            </div>
          </section>
          {% endfor %}
        </div>
      </section>

      <section id="why" class="shell section">
        <div class="section-head">
          <span class="eyebrow">{{ why.eyebrow }}</span>
          <h2>{{ why.heading }}</h2>
          <p>{{ why.lede }}</p>
        </div>
        <div class="features">
          {% for f in why.features %}
          <article class="feature">
            <span class="feature-icon">{{{ f.icon }}}</span>
            <h3>{{ f.title }}</h3>
            <p>{{ f.body }}</p>
          </article>
          {% endfor %}
        </div>
      </section>

      <section class="shell section proof">
        <div class="section-head">
          <span class="eyebrow">{{ proof.eyebrow }}</span>
          <h2>{{ proof.heading }}</h2>
          <p>{{ proof.lede }}</p>
        </div>
        <div class="proof-grid">
          {% for c in proof.cards %}
          <article class="proof-card">
            <p class="proof-task">{{ c.name }}</p>
            <p class="proof-big">{{ c.akur_memory }}</p>
            <p class="proof-sub">{{ c.akur_label }}</p>
            <div class="proof-vs">
              <span>vs {{ c.other_memory }}</span>
              <span class="proof-other">{{ c.other_product }}</span>
            </div>
            <p class="proof-diff">{{ c.difference }}</p>
            <a class="proof-src" href="{{ c.source_url }}">{{ c.source_label }}</a>
          </article>
          {% endfor %}
        </div>
      </section>

      <section class="trust-band">
        <div class="shell trust">
          {% for s in trust %}
          <div class="trust-cell">
            <strong>{{ s.value }}</strong>
            <span>{{ s.label }}</span>
          </div>
          {% endfor %}
        </div>
      </section>

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

      <section id="sources" class="shell section sources-section">
        <div>
          <span class="eyebrow">{{ methodology.label }}</span>
          <h2>Where the comparison numbers come from</h2>
          <p>{{ 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" %}