consul/website/source/index.html.erb

---
description: |-
  Consul is a highly available and distributed service discovery and KV
  store designed with support for the modern data center to make distributed
  systems and configuration easy.
---

<div class='consul-connect'>
  <section id='home-hero'>
    <div class="g-container">
      <div>
        <div>
          <div>
            <a class='notification' href='#'>
              <span>New</span> Consul 1.0 release. Get the details <svg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10'><path fill='#650D34' d='M1.138.529a.666.666 0 1 0-.942.943L3.724 5 .195 8.53a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z'/></svg>
            </a>
            <h1>Service Mesh Made Easy</h1>
            <p>Distributed service networking layer to connect, secure, and configure services across any runtime platform and public or private cloud</p>
            <a href='#' class='g-btn download'>
              <svg xmlns='http://www.w3.org/2000/svg' width='20' height='22' viewBox='0 0 20 22'>
                <path d='M9.292 15.706a1 1 0 0 0 1.416 0l3.999-3.999a1 1 0 1 0-1.414-1.414L11 12.586V1a1 1 0 1 0-2 0v11.586l-2.293-2.293a1 1 0 1 0-1.414 1.414l3.999 3.999zM20 16v3c0 1.654-1.346 3-3 3H3c-1.654 0-3-1.346-3-3v-3a1 1 0 1 1 2 0v3c0 .551.448 1 1 1h14c.552 0 1-.449 1-1v-3a1 1 0 1 1 2 0z'/>
              </svg>
              Download
            </a>
            <a href='#' class='g-btn dark-outline'>Get Started</a>
            <div>
              <a href='#' class='secondary-link'>View demo of web UI</a>
            </div>
          </div>
        </div>
        <div>
          <div class='controls'>
            <div data-index='0'>
              <span>CLI</span>
              <div class='progress-bar'><span></span></div>
            </div>
            <div data-index='1'>
              <span>UI</span>
              <div class='progress-bar'><span></span></div>
            </div>
          </div>
          <div class='videos'>
            <div>
              <div class='bar-buttons'>
                <span></span>
                <span></span>
                <span></span>
              </div>
              <div class='padded'>
                <video muted='muted'>
                  <source src='//consul-static-asssets.global.ssl.fastly.net/videos/v1/connect-video-cli.mp4' type='video/mp4'>
                </video>
              </div>
            </div>
            <div>
              <div class='bar-buttons'>
                <span></span>
                <span></span>
                <span></span>
              </div>
              <video muted='muted'>
                <source src='//consul-static-asssets.global.ssl.fastly.net/videos/v1/connect-video-ui.mp4' type='video/mp4'>
              </video>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id='static-dynamic' class='g-section bg-light'>
    <div class='g-container'>
      <div class='intro'>
        <h2>Service-based networking for dynamic infrastructure</h2>
        <p>The shift from static to dynamic infrastructure creates a challenge for connectivity and security. Consul is the service-based networking solution to connect, configure, and secure services in dynamic infrastructure.</p>
      </div>
      <div class='g-timeline'>
        <div>
          <span class='line'></span>
          <span class='line'>
            <svg xmlns='http://www.w3.org/2000/svg' width='11' height='15' viewBox='0 0 11 15'>
                <path fill='#CA2171' d='M0 0v15l5.499-3.751L11 7.5 5.499 3.749.002 0z'/>
            </svg>
          </span>
          <span class='dot'></span>
          <h3>Static</h3>
          <span class='sub-heading'>Host-based networking</span>
          <img src='/assets/images/consul-connect/svgs/static.svg' alt='static, host-based networking' class='static-callout' />
        </div>
        <div>
          <span class='dot'></span>
          <h3>Dynamic</h3>
          <span class='sub-heading'>Service-based networking</span>
          <div id='index-dynamic-animation'>
            <%= inline_svg 'consul-connect/svgs/dynamic.svg' %>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id='use-cases' class='g-section'>
    <div class='g-container'>
      <div class='intro'>
        <h2>Use Cases</h2>
      </div>
      <div class='g-use-cases'>
        <div>
          <div>
            <img src='/assets/images/consul-connect/svgs/discovery-simple.svg'>
            <h3>Service Discovery <span>for connectivity</h3>
            <p>Service Registry enables services to register and discover each other.</p>
          </div>
          <div>
            <a href='#' class='g-btn dark-outline'>Learn more</a>
          </div>
        </div>
        <div>
          <div>
            <img src='/assets/images/consul-connect/svgs/segmentation-simple.svg'>
            <h3>Service Segmentation <span>for security</h3>
            <p>Secure service-to-service communication with automatic TLS encryption and identity-based authorization.</p>
          </div>
          <div>
            <a href='#' class='g-btn dark-outline'>Learn more</a>
          </div>
        </div>
        <div>
          <div>
            <img src='/assets/images/consul-connect/svgs/configuration-simple.svg'>
            <h3>Service Configuration <span>for runtime configuration</h3>
            <p>Feature rich Key/Value store to easily configure services.</p>
          </div>
          <div>
            <a href='#' class='g-btn dark-outline'>Learn more</a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class='g-section bg-light border-top'>
    <div class='g-container'>
      <div class='intro'>
        <h2>Consul Principles</h2>
      </div>
      <div class='g-text-asset'>
        <div>
          <div>
            <h3>Automation through Codification</h3>
            <p>Codify and automate service authorization policy.</p>
          </div>
        </div>
        <div class='code-sample'>
          <div>
            <span></span>
            <div class='code'>
              <code>$ curl \
  --request POST \
  --data \
'{
  "Name": "api",
  "Service": {
    "Service": "api",
    </code><code class='keyword'>"Tags"</code><code>: ["v1.2.3"],
    "Failover": {
      "Datacenters": ["dc1", "dc2"]</code>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class='g-section bg-light border-top'>
    <div class='g-container'>
      <div class='g-text-asset reverse'>
        <div>
          <div>
            <h3>Workflows, not Technologies</h3>
            <p>Connect services across any runtime platform and public or private cloud. Connect services from Kubernetes to VMs, Containers to Serverless functions.</p>
          </div>
        </div>
        <div>
          <img src='/assets/images/consul-connect/workflows-not-technologies.png' alt='Workflows, not Technologies'>
        </div>
      </div>
    </div>
  </section>

  <section class='g-section bg-light border-top'>
    <div class='g-container'>
      <div class='g-text-asset'>
        <div>
          <div>
            <h3>Open and Extensible</h3>
            <ul>
              <li>Provision clusters on any infrastructure.</li>
              <li>Connect to services over TLS via proxy integrations.</li>
              <li>Serve TLS certificates pluggable Certificate Authorities.</li>
            </ul>
          </div>
        </div>
        <div>
          <img src='/assets/images/consul-connect/open-and-extensible.png' alt='Open and Extensible'>
        </div>
      </div>
    </div>
  </section>

  <section class='g-section'>
    <div class='g-container'>
      <div class='intro'>
        <h3>Companies that trust Consul</h3>
      </div>
      <div class='g-logo-grid'>
        <div>
          <img src='/assets/images/consul-connect/logos/logo_sap-ariba_space.svg' alt='SAP Ariba'>
        </div>
        <div>
          <img src='/assets/images/consul-connect/logos/logo_citadel_space.svg' alt='Citadel'>
        </div>
        <div>
          <img src='/assets/images/consul-connect/logos/logo_barclays_space.svg' alt='Barclays'>
        </div>
        <div>
          <img src='/assets/images/consul-connect/logos/logo_itv_space.svg' alt='itv'>
        </div>
        <div>
          <img src='/assets/images/consul-connect/logos/logo_spaceflight-industries_space.svg' alt='Spaceflight Industries'>
        </div>
        <div>
          <img src='/assets/images/consul-connect/logos/logo_lotto-nz_space.svg' alt='MyLotto'>
        </div>
      </div>
    </div>
  </section>

  <section class='home-cta-section'>
    <div>
      <div>
        <div>
          <img src='/assets/images/consul-connect/logos/consul.png' alt='Consul'>
        </div>
        <p>Consul Open Source addresses the technical complexity of connecting services across distributed infrastructure.</p>
        <div>
          <a href='#' class='g-btn white download'>
            <svg xmlns='http://www.w3.org/2000/svg' width='20' height='22' viewBox='0 0 20 22'>
              <path d='M9.292 15.706a1 1 0 0 0 1.416 0l3.999-3.999a1 1 0 1 0-1.414-1.414L11 12.586V1a1 1 0 1 0-2 0v11.586l-2.293-2.293a1 1 0 1 0-1.414 1.414l3.999 3.999zM20 16v3c0 1.654-1.346 3-3 3H3c-1.654 0-3-1.346-3-3v-3a1 1 0 1 1 2 0v3c0 .551.448 1 1 1h14c.552 0 1-.449 1-1v-3a1 1 0 1 1 2 0z'/>
            </svg>
            Download
          </a>
        </div>
      </div>
    </div>
    <div>
      <div>
        <div>
          <img src='/assets/images/consul-connect/logos/consul-enterprise.png' alt='Consul Enterprise'>
        </div>
        <p>Consul Enterprise addresses the organizational complexity of large user bases and compliance requirements with collaboration and governance features.</p>
        <div>
          <a href='https://www.hashicorp.com/products/consul' class='g-btn white-outline'>Learn More</a>
        </div>
      </div>
    </div>
  </section>

</div>

<% content_for :scripts do %>
  <script src='/assets/javascripts/consul-connect/home-hero.js' defer></script>
<% end %>