[Website] Add JTBD - WIP (#6673)
* updating the landing page with jtbd * changed the buttons to pink * updating CSS based on John's help * updating a use case * updating the language and rearranging the guides * adding icons * fixed image width * fixing buttons and updating traffic splitting language.
This commit is contained in:
kaitlincarter-hc
GitHub
parent
9a6f4aedd9
commit
b8e71e6fd3
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -14,3 +14,4 @@
|
||||||
|
|
||||||
@import 'pages/_home';
|
@import 'pages/_home';
|
||||||
@import '_animations';
|
@import '_animations';
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,10 @@
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 51%;
|
width: 51%;
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
#page-home {
|
#page-home {
|
||||||
#home-hero {
|
#home-hero {
|
||||||
padding-top: 12px;
|
padding-top: 12px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -12,6 +12,14 @@
|
||||||
padding-bottom: 100px;
|
padding-bottom: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
& + section {
|
||||||
|
|
||||||
|
@media (max-width: 991px) {
|
||||||
|
padding-top: 212px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
.g-container > div {
|
.g-container > div {
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -351,9 +359,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#static-dynamic {
|
#static-dynamic {
|
||||||
@media (max-width: 991px) {
|
|
||||||
padding-top: 212px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.static-callout {
|
.static-callout {
|
||||||
width: 85%;
|
width: 85%;
|
||||||
|
|
|
||||||
|
|
@ -10,8 +10,8 @@ description: |-
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<h1 class='g-type-display-1'>Easy Service Networking</h1>
|
<h1 class='g-type-display-1'>Secure Service Networking</h1>
|
||||||
<p class='g-type-body-large'>Consul is a service networking solution to connect and secure services across any runtime platform and public or private cloud.</p>
|
<p class='g-type-body-large'>Consul is a service networking solution to connect and secure services across any runtime platform and public or private cloud</p>
|
||||||
<a href='/downloads.html' class='button download'>
|
<a href='/downloads.html' class='button download'>
|
||||||
<svg xmlns='http://www.w3.org/2000/svg' width='20' height='22' viewBox='0 0 20 22'>
|
<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'/>
|
<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'/>
|
||||||
|
|
@ -65,11 +65,52 @@ description: |-
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id='static-dynamic' class='g-section bg-light'>
|
<section id='use-cases' class='g-section bg-light'>
|
||||||
<div class='g-container'>
|
<div class='g-container'>
|
||||||
<div class='intro'>
|
<div class='intro'>
|
||||||
<h2 class="g-type-display-2">Service-based networking for dynamic infrastructure</h2>
|
<h2>What can you do with Consul?</h2>
|
||||||
<p class="g-type-body-large">The shift from static infrastructure to dynamic
|
<p>Consul is a service networking tool that allows you to discover services and secure network traffic.</p>
|
||||||
|
</div>
|
||||||
|
<div class='g-use-cases'>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<img src='/assets/images/consul-jtbd/connect.png' alt='Connect services'>
|
||||||
|
<h3>Secure Service Communication</h3>
|
||||||
|
<p>Secure and observe communication between your services without modifying their code.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href='https://learn.hashicorp.com/consul/getting-started/connect?utm_source=consul.io&utm_medium=home-page&utm_content=jtbd&utm_term=connect' class='g-btn'>Learn more</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<img src='/assets/images/consul-jtbd/upgrade.png' alt='Upgrade services'>
|
||||||
|
<h3>Zero Downtime Deployments</h3>
|
||||||
|
<p>Use traffic splitting to upgrade services with canary, rolling, and blue/green methods. </p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href='https://learn.hashicorp.com/consul/developer-mesh/consul-splitting?utm_source=consul.io&utm_medium=home-page&utm_content=jtbd&utm_term=splitting' class='g-btn'>Learn more</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<img src='/assets/images/consul-jtbd/load-balance.png' alt='Load balance services'>
|
||||||
|
<h3>Dynamic Load Balancing</h3>
|
||||||
|
<p>Automate load balancer configuration with Consul and HAProxy, Nginx, or F5.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href='https://learn.hashicorp.com/consul/integrations/nginx-consul-template?utm_source=consul.io&utm_medium=home-page&utm_content=jtbd&utm_term=lb' class='g-btn'>Learn more</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id='static-dynamic' class='g-section'>
|
||||||
|
<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
|
infrastructure changes the approach to networking from host-based to
|
||||||
service-based. Connectivity moves from the use of static IPs to
|
service-based. Connectivity moves from the use of static IPs to
|
||||||
dynamic service discovery, and security moves from static firewalls to
|
dynamic service discovery, and security moves from static firewalls to
|
||||||
|
|
@ -84,14 +125,14 @@ description: |-
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
<span class='dot'></span>
|
<span class='dot'></span>
|
||||||
<h3 class="g-type-display-3">Static</h3>
|
<h3>Static</h3>
|
||||||
<span class='sub-heading g-type-body'>Host-based networking</span>
|
<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' />
|
<img src='/assets/images/consul-connect/svgs/static.svg' alt='static, host-based networking' class='static-callout' />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span class='dot'></span>
|
<span class='dot'></span>
|
||||||
<h3 class="g-type-display-3">Dynamic</h3>
|
<h3>Dynamic</h3>
|
||||||
<span class='sub-heading g-type-body'>Service-based networking</span>
|
<span class='sub-heading'>Service-based networking</span>
|
||||||
<div id='index-dynamic-animation'>
|
<div id='index-dynamic-animation'>
|
||||||
<%= inline_svg 'consul-connect/svgs/dynamic.svg' %>
|
<%= inline_svg 'consul-connect/svgs/dynamic.svg' %>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -100,100 +141,6 @@ description: |-
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id='use-cases' class='g-section'>
|
|
||||||
<div class='g-container'>
|
|
||||||
<div class='intro'>
|
|
||||||
<h2 class="g-type-display-2">Use Cases</h2>
|
|
||||||
<p class="g-type-body-large">Consul can be run as a platform to solve a range of use-cases
|
|
||||||
in service networking.</p>
|
|
||||||
</div>
|
|
||||||
<div class='g-use-cases'>
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<img src='/assets/images/consul-connect/svgs/discovery-simple.svg' alt='Service Discovery'>
|
|
||||||
<h3 class="g-type-display-3">Service Discovery</h3>
|
|
||||||
<p class="g-type-body">Use the service registry to address and discover services across multiple runtime platforms, cloud providers and regions.</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<a href='/discovery.html' class='button secondary'>Learn more</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<img src='/assets/images/consul-connect/svgs/segmentation-simple.svg' alt='Service Mesh'>
|
|
||||||
<h3 class="g-type-display-3">Service Mesh</h3>
|
|
||||||
<p class="g-type-body">Service discovery, identity-based authorization, and L7 traffic management abstracted from application code with proxies in the service mesh pattern.</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<a href='/mesh.html' class='button secondary'>Learn more</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class='g-section bg-light'>
|
|
||||||
<div class='g-container'>
|
|
||||||
<div class='intro'>
|
|
||||||
<h2 class="g-type-display-2">Consul Principles</h2>
|
|
||||||
</div>
|
|
||||||
<div class='g-text-asset'>
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<h3 class='g-type-display-3'>API-Driven</h3>
|
|
||||||
<p class='g-type-body'>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 class='g-type-display-3'>Run and Connect Anywhere</h3>
|
|
||||||
<p class='g-type-body'>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'>
|
<section class='g-section bg-light border-top'>
|
||||||
<div class='g-container'>
|
<div class='g-container'>
|
||||||
<div class='g-text-asset'>
|
<div class='g-text-asset'>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue