open-consul/website/source/index.html.erb
RJ Spiker 88b3641c56 website: an assortment of front-end updates (#4296)
* website: add object-fit-image polyfill for ie compatibility

* website: make entire carousel cards linkable

* website: adjust hero background positioning

* website: responsive updates to the home hero

* website: update home hero js to work better with turbolinks

* website: a few font weight adjustments

* website: add an overlay to ui video
2018-06-28 11:43:30 -07:00

301 lines
12 KiB
Plaintext

---
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='https://www.hashicorp.com/blog/consul-1-2-service-mesh'>
<span>New</span> HashiCorp Consul 1.2: Service Mesh. Read the blog <span>post <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><span>
</a>
<h1>Service Mesh Made Easy</h1>
<p>Consul is a distributed service mesh to connect, secure, and configure services across any runtime platform and public or private cloud</p>
<a href='/downloads.html' 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='/intro/getting-started/install.html' class='g-btn dark-outline'>Get Started</a>
<div>
<a href='https://demo.consul.io/' 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 class='overlay'></div>
</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 infrastructure to dynamic
infrastructure changes the approach to networking from host-based to
service-based. Connectivity moves from the use of static IPs to
dynamic service discovery, and security moves from static firewalls to
dynamic service segmentation.</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' alt='Service Discovery'>
<h3>Service Discovery <span>for connectivity</h3>
<p>Service Registry enables services to register and discover each other.</p>
</div>
<div>
<a href='/discovery.html' class='g-btn dark-outline'>Learn more</a>
</div>
</div>
<div>
<div>
<img src='/assets/images/consul-connect/svgs/segmentation-simple.svg' alt='Service Segmentation'>
<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='/segmentation.html' class='g-btn dark-outline'>Learn more</a>
</div>
</div>
<div>
<div>
<img src='/assets/images/consul-connect/svgs/configuration-simple.svg' alt='Service Configuration'>
<h3>Service Configuration <span>for runtime configuration</h3>
<p>Feature rich Key/Value store to easily configure services.</p>
</div>
<div>
<a href='/configuration.html' class='g-btn dark-outline'>Learn more</a>
</div>
</div>
</div>
</div>
</section>
<section class='g-section bg-light'>
<div class='g-container'>
<div class='intro'>
<h2>Consul Principles</h2>
</div>
<div class='g-text-asset'>
<div>
<div>
<h3>API-Driven</h3>
<p>Codify and automate service definitions, health checks, service
authorization policies, failover logic, and more.</p>
</div>
</div>
<div class='code-sample'>
<div>
<span></span>
<div class='code'>
<code>$ curl <code class='keyword'>http://localhost:8500/v1/kv/deployment</code>
[
{
"LockIndex": 1,
"Session": "1c3f5836-4df4-0e26-6697-90dcce78acd9",
"Value": "Zm9v",
"Flags": 0,
"Key": "deployment",
"CreateIndex": 13,
"ModifyIndex": 19
}
]</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>Run and Connect Anywhere</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>
<picture>
<source type="image/webp" srcset="
/assets/images/consul-connect/grid_1/grid_1_300.webp 300w,
/assets/images/consul-connect/grid_1/grid_1_715.webp 715w,
/assets/images/consul-connect/grid_1/grid_1_1256.webp 1256w" />
<source type="image/png" srcset="
/assets/images/consul-connect/grid_1/grid_1_300.png 300w,
/assets/images/consul-connect/grid_1/grid_1_715.png 715w,
/assets/images/consul-connect/grid_1/grid_1_1256.png 1256w" />
<img src='/assets/images/consul-connect/grid_1/grid_1_1256.png' alt='Run and Connect Anywhere'>
</picture>
</div>
</div>
</div>
</section>
<section class='g-section bg-light border-top'>
<div class='g-container'>
<div class='g-text-asset'>
<div>
<div>
<h3>Extend and Integrate</h3>
<ul>
<li>Provision clusters on any infrastructure.</li>
<li>Connect to services over TLS via proxy integrations.</li>
<li>Serve TLS certificates with pluggable Certificate Authorities.</li>
</ul>
</div>
</div>
<div>
<picture>
<source type="image/webp" srcset="
/assets/images/consul-connect/grid_2/grid_2_300.webp 300w,
/assets/images/consul-connect/grid_2/grid_2_704.webp 704w,
/assets/images/consul-connect/grid_2/grid_2_1256.webp 1256w" />
<source type="image/png" srcset="
/assets/images/consul-connect/grid_2/grid_2_300.png 300w,
/assets/images/consul-connect/grid_2/grid_2_704.png 704w,
/assets/images/consul-connect/grid_2/grid_2_1256.png 1256w" />
<img src='/assets/images/consul-connect/grid_2/grid_2_1256.png' alt='Extend and Integrate'>
</picture>
</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>
<%= inline_svg 'consul-connect/logos/consul-logo.svg' %>
</div>
<p>Consul Open Source addresses the technical complexity of connecting services across distributed infrastructure.</p>
<div>
<a href='/downloads.html' 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>
<%= inline_svg 'consul-connect/logos/consul-enterprise-logo.svg' %>
</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 %>