{% extends "base.html" %}
{% block content %}
<section class="pagehead">
  <div class="container">
    <div class="breadcrumb"><a href="/">Home</a> / Apps</div>
    <div class="eyebrow">Our Applications</div>
    <h1>Every AlexaMods Labs app, in one place</h1>
    <p>Ten Android applications, one consistent standard. Each app below links to its full details, privacy policy, terms, support, FAQ, and release notes.</p>
  </div>
</section>

<section class="section--tight">
  <div class="container">
    <div class="grid grid-3" data-stagger>
      {% for app in apps %}
      <a href="/apps/{{ app.slug }}/" class="card app-card reveal">
        <div class="app-card-top">
          <div class="app-icon" style="background: linear-gradient(135deg, {{ app.gradient[0] }}, {{ app.gradient[1] }});">{{ app.icon_letters }}</div>
          <div>
            <span class="cat">{{ app.category }}</span>
            <h3>{{ app.full_name }}</h3>
          </div>
        </div>
        <p>{{ app.short_description }}</p>
        <div class="app-card-foot">
          <span class="ver">v{{ app.version }}</span>
          <span class="badge badge-cyan">Updated {{ app.version_date }}</span>
        </div>
      </a>
      {% endfor %}
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="cta-band reveal">
      <div class="eyebrow" style="justify-content:center;">Scaling the catalog</div>
      <h2>New applications join this same structure automatically</h2>
      <p>Every future AlexaMods Labs release gets its own detail page, privacy policy, terms, support, FAQ, and release notes — without changing anything else on this site.</p>
      <div class="cta-actions">
        <a href="/contact/" class="btn btn-primary">Suggest an app</a>
      </div>
    </div>
  </div>
</section>
{% endblock %}