AkurAI-Platform / frontend/index.html

Latest change 0e63589daf324a79243fb3f782a526db9d2dd874 - style: refactor platform landing page by Olafur Bui

{% include "header" %}
    <main>
      <section class="hero">
        <img class="hero-image" src="{{ hero.image }}" alt="{{ hero.image_alt }}" />
        <div class="hero-overlay"></div>
        <div class="hero-content">
          <p class="eyebrow">{{ hero.eyebrow }}</p>
          <h1>{{ hero.headline }}</h1>
          <p class="lede">{{ hero.lede }}</p>
          <div class="hero-actions">
            <a class="button primary" href="#projects">Open apps</a>
            <a class="button secondary" href="{{ github.url }}">View GitHub</a>
          </div>
          <div id="health" class="health-pill" aria-live="polite">checking platform</div>
        </div>
      </section>

      <section class="metric-strip" aria-label="Platform highlights">
        {% for stat in stats %}
        <div class="metric">
          <strong>{{ stat.value }}</strong>
          <span>{{ stat.label }}</span>
        </div>
        {% endfor %}
      </section>

      <section id="source" class="section source-callout">
        <div>
          <p class="eyebrow">GitHub</p>
          <h2>Live projects with their code beside them.</h2>
          <p>{{ github.text }}</p>
        </div>
        <a class="button primary" href="{{ github.url }}">{{ github.label }}</a>
      </section>

      <section id="projects" class="section">
        <div class="section-head">
          <p class="eyebrow">Apps</p>
          <h2>What you can open from here</h2>
          <p>Each card explains what the project does, where to open it, and where its code lives.</p>
        </div>

        <div class="app-grid">
          {% for app in applications %}
          <article class="app-card">
            <div class="app-card-head">
              <p>{{ app.kind }}</p>
              <strong>{{ app.memory }}</strong>
            </div>
            <h3>{{ app.name }}</h3>
            <p class="app-description">{{ app.description }}</p>
            <div class="app-actions">
              <a class="live-link" href="{{ app.url }}">{{ app.action }}</a>
              <span class="no-link">{{ app.action }}</span>
            </div>
            <div class="repo-links" aria-label="{{ app.name }} code links">
              {% for repo in app.repos %}
              <a href="{{ repo.url }}">{{ repo.label }}</a>
              {% endfor %}
            </div>
          </article>
          {% endfor %}
        </div>
      </section>

      <section id="memory" class="section memory-section">
        <div class="memory-copy">
          <p class="eyebrow">Memory</p>
          <h2>Small services leave more room for the actual product</h2>
          <p>{{ methodology.text }}</p>
          <span class="updated">{{ updated }}</span>
        </div>
        <div class="memory-ledger" aria-label="Memory comparison bars">
          {% for app in applications %}
          <div class="ledger-row">
            <span>{{ app.name }}</span>
            <div class="ledger-track"><strong style="--bar: {{ app.bar }}%;"></strong></div>
            <em>{{ app.memory }}</em>
          </div>
          {% endfor %}
        </div>
      </section>

      <section id="comparisons" class="section">
        <div class="section-head">
          <p class="eyebrow">Reference points</p>
          <h2>What the numbers mean</h2>
          <p>These comparisons are not lab benchmarks. They show the order of magnitude next to familiar tools and published starting points.</p>
        </div>

        <div class="comparison-grid">
          {% for comparison in comparisons %}
          <article class="comparison-card">
            <p>{{ comparison.name }}</p>
            <h3>{{ comparison.akur_memory }}</h3>
            <div class="comparison-line">
              <span>AkurAI</span>
              <strong>{{ comparison.other_memory }}</strong>
              <span>{{ comparison.other_product }}</span>
            </div>
            <p class="comparison-difference">{{ comparison.difference }}</p>
            <a href="{{ comparison.source_url }}">{{ comparison.source_label }}</a>
          </article>
          {% endfor %}
        </div>
      </section>

      <section id="methodology" class="section sources-section">
        <div>
          <p class="eyebrow">{{ methodology.label }}</p>
          <h2>Where the reference 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" %}