{% extends 'layouts/base.html.j2' %}

{% block title %}API Enhancement Proposals{% endblock %}

{% block css %}
<link rel="stylesheet" type="text/css" media="screen" href="{{ site.relative_uri }}/assets/css/hero.css?v={{ site.revision }}">
{% endblock %}

{% block main %}
<main role="main" class="aep-hero" id="page-content">
  <div class="aep-hero-banner">
    <div class="aep-hero-title">
      API Enhancement Proposals
    </div>
    <div class="aep-hero-subtitle">
      Focused design documents for flexible API development.
    </div>
    <div class="aep-buttons">
      {% for button in site.config.hero.buttons -%}
      <a href="{{ site.relative_uri }}{{ button.href }}" class="glue-button glue-button--high-emphasis">
        {{ button.text }}
      </a>
      {% endfor %}
    </div>
  </div>

  <div class="aep-landing-content">
    <h1>Welcome</h1>
    <p>
      AEPs are design documents that summarize Google's API design
      decisions. They also provide a framework and system for others to
      document their own API design rules and practices.
    </p>
  </div>

  <div class="aep-shortcuts glue-grid glue-grid__col--align-middle">
    {% for shortcut in site.config.hero.shortcuts %}
    <div class="aep-shortcut glue-grid__col glue-grid__col--span-6">
      <h1>{{ shortcut.title }}</h1>
      <div>{{ shortcut.description }}</div>
      <a href="{{ site.relative_uri }}{{ shortcut.button.href }}" class="glue-button glue-button--medium-emphasis">
        {{ shortcut.button.text }} &raquo;
      </a>
    </div>
    {% endfor %}
  </div>
  {% include 'includes/footer.html.j2' %}
</main>
{% endblock %}
