index.html

---
layout: default
title: Home
permalink: /
---

<div id="home">

  <section id="hero" class="home-section bg-purple text-center">

    <div class="container">
      {% for hero in site.data.home.hero %}
      <div class="hero-information">
        <h1><img src="{{ hero.image }}" alt="Envoy"></h1>
        <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 btn-primary">Get Started</a>
        <a href="https://www.envoyproxy.io/docs/envoy/latest/install/building" class="btn btn-secondary">Download</a>
      </div>
    </div>

    <div>
      <span class="envoy-version-number" href="">
        Envoy <strong>{{ site.latest }}</strong> is now available
      </span>

      <br />

      <a class="font-big font-light text-white" href="https://www.envoyproxy.io/docs/envoy/v{{ site.latest }}/version_history/current">Read the changelog</a>
    </div>

  </section>

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

  <section id="used-by" class="home-section bg-white">
    <div class="container">
      <h1 class="heading-big text-uppercase text-purple text-center">Used By</h1>
      <div class="row">
        {% for company in site.data.home.companies-using-envoy %}
        <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">
      <h1 class="heading-big text-uppercase text-purple text-center">Why Envoy?</h1>
      <div class="row">
        <div class="col-sm-12">
          {% for reason in site.data.home.why-envoy %}
            <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">
      <h1 class="heading-big text-uppercase text-purple text-center">Features</h1>
      <div class="row">
        {% for feature in site.data.home.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 site.data.home.quote %}
        <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">
      <h1 class="heading-big text-uppercase text-purple text-center">Ready to roll?</h1>
      <div class="action-btns text-center">
        <a href="https://www.envoyproxy.io/docs/envoy/latest/" class="btn btn-primary">Get Started</a>
        <a href="https://www.envoyproxy.io/docs/envoy/latest/start/install" class="btn 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="/img/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>