{% extends "home.html" %}

{% block page_content %}
<div id="home">

  <section id="hero"
           class="home-section bg-purple text-center">
    <div class="container">
      {% for hero in HOME.hero %}
      <div class="hero-information">
        <h3><img src="{{ hero.image }}"
                 alt="{{ hero.alt }}"></h3>
        <p class="headline text-white text-uppercase font-xl font-light">
          {{ hero.headline }}
        </p>
      </div>
      {% endfor %}
      <div class="action-btns text-center">
        <a href="https://www.envoyproxy.io/docs/envoy/latest/start/start"
           class="btn-legacy btn-primary">Get Started</a>
        <a href="https://github.com/envoyproxy/envoy/releases"
           class="btn-legacy btn-secondary">Download</a>
      </div>
    </div>

    <div>
      <span class="envoy-version-number"
            href="">
        Envoy <strong>{{ LATEST_VERSION }}</strong> is now available
      </span>
      <br />
      <a href="https://www.envoyproxy.io/docs/envoy/v{{ LATEST_VERSION }}/version_history/current"
         class="font-big font-light text-white">Read the changelog</a>
    </div>
  </section>

  <section id="created-by"
           class="home-section padding-top-60 bg-white">
    <div class="container">
      <h3 class="heading-big text-uppercase text-purple text-center">Created By</h3>
      <div class="row">
        <div class="">
          <div class="company">
            <img alt="Lyft"
                 src="/images/logos/lyft.svg">
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="used-by"
           class="home-section bg-white">
    <div class="container">
      <h3 class="heading-big text-uppercase text-purple text-center">Used By</h3>
      <div class="row">
        {% for company in COMPANIES %}
        <div class="col-xs-6 col-sm-3">
          <div class="company">
            <img alt="{{ company.name }}"
                 src="{{ company.logo }}">
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </section>

  <section id="why-envoy"
           class="home-section bg-white">
    <div class="container">
      <h3 class="heading-big text-uppercase text-purple text-center">Why Envoy?</h3>
      <div class="row">
        <div class="col-sm-12">
          {% for reason in WHY %}
            <p class="font-big font-light no-margin-top">
              {{ reason }}
            </p>
          {% endfor %}
        </div>
      </div>
    </div>
  </section>

  <section id="features"
           class="home-section bg-white">
    <div class="container">
      <h3 class="heading-big text-uppercase text-purple text-center">Features</h3>
      <div class="row">
        {% for feature in FEATURES %}
          <div class="col-sm-6">
            <div class="feature">
              <strong class="heading-small text-uppercase text-purple">{{ feature.name }}</strong>
              <p class="text-dark-gray">
                {{ feature.description }}
              </p>
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
  </section>

  <section id="quote"
           class="home-section bg-white">
    <div class="container">
      {% for quote in QUOTES %}
        <div class="quote bg-purple text-center">
          <p class="text-white font-big font-light italicize">
            "{{ quote.text }}"
          </p>
          <p class="text-white">
            <strong>{{ quote.author }}</strong>
            <span>{{ quote.role }}</span>
          </p>
        </div>
      {% endfor %}
    </div>
  </section>

  <section id="ready-to-roll"
           class="home-section padding-bottom-120 bg-white">
    <div class="container">
      <h3 class="heading-big text-uppercase text-purple text-center">Ready to roll?</h3>
      <div class="action-btns text-center">
        <a href="https://www.envoyproxy.io/docs/envoy/latest/"
           class="btn-legacy btn-primary">Get Started</a>
        <a href="https://www.envoyproxy.io/docs/envoy/latest/start/install"
           class="btn-legacy btn-secondary">Download</a>
      </div>
    </div>
  </section>

  <section id="cloud-native-computing"
           class="home-section padding-top-60 padding-bottom-60 bg-gray">
    <div class="container text-center">
      <img class="responsive"
           width="300"
           alt="cloud-native computing"
           src="/images/logos/cloud-native-computing.svg">
      <p class="font-big font-light">
        We are a
        <a href="https://www.cncf.io">Cloud Native Computing Foundation</a>
        graduated project.
      </p>
    </div>
  </section>

</div>
{% endblock page_content %}