From b8e71e6fd3790838445a691118cabf99cf95f9c8 Mon Sep 17 00:00:00 2001 From: kaitlincarter-hc <43049322+kaitlincarter-hc@users.noreply.github.com> Date: Mon, 11 Nov 2019 09:26:36 -0600 Subject: [PATCH] [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. --- .../assets/images/consul-jtbd/connect.png | 3 + .../images/consul-jtbd/load-balance.png | 3 + .../assets/images/consul-jtbd/upgrade.png | 3 + .../stylesheets/consul-connect/_index.scss | 1 + .../consul-connect/components/_use-cases.scss | 4 + .../consul-connect/pages/_home.scss | 13 +- website/source/index.html.erb | 153 ++++++------------ 7 files changed, 73 insertions(+), 107 deletions(-) create mode 100644 website/source/assets/images/consul-jtbd/connect.png create mode 100644 website/source/assets/images/consul-jtbd/load-balance.png create mode 100644 website/source/assets/images/consul-jtbd/upgrade.png diff --git a/website/source/assets/images/consul-jtbd/connect.png b/website/source/assets/images/consul-jtbd/connect.png new file mode 100644 index 000000000..62797cff0 --- /dev/null +++ b/website/source/assets/images/consul-jtbd/connect.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a31faec42e8f25842e2bd9a326483f715a0d10ac82b67e3b6dfce88aa060f807 +size 14422 diff --git a/website/source/assets/images/consul-jtbd/load-balance.png b/website/source/assets/images/consul-jtbd/load-balance.png new file mode 100644 index 000000000..b0976a323 --- /dev/null +++ b/website/source/assets/images/consul-jtbd/load-balance.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:73fb51d68c1f09decc827c466557fd9b543f4940e00e246b520153ec4e13aac2 +size 72337 diff --git a/website/source/assets/images/consul-jtbd/upgrade.png b/website/source/assets/images/consul-jtbd/upgrade.png new file mode 100644 index 000000000..795db27fb --- /dev/null +++ b/website/source/assets/images/consul-jtbd/upgrade.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:3267cda4d5eb995fdc9bec27475d6aaba9519cc2687f3d0668b92ffd835f574f +size 23354 diff --git a/website/source/assets/stylesheets/consul-connect/_index.scss b/website/source/assets/stylesheets/consul-connect/_index.scss index 634b8648b..498f7eb03 100644 --- a/website/source/assets/stylesheets/consul-connect/_index.scss +++ b/website/source/assets/stylesheets/consul-connect/_index.scss @@ -14,3 +14,4 @@ @import 'pages/_home'; @import '_animations'; + diff --git a/website/source/assets/stylesheets/consul-connect/components/_use-cases.scss b/website/source/assets/stylesheets/consul-connect/components/_use-cases.scss index 373d0c6a1..920b91dd9 100644 --- a/website/source/assets/stylesheets/consul-connect/components/_use-cases.scss +++ b/website/source/assets/stylesheets/consul-connect/components/_use-cases.scss @@ -9,6 +9,10 @@ img { width: 51%; + + @media (min-width: 768px) { + width: 80%; + } } h3 { diff --git a/website/source/assets/stylesheets/consul-connect/pages/_home.scss b/website/source/assets/stylesheets/consul-connect/pages/_home.scss index 47099eda6..84815d851 100644 --- a/website/source/assets/stylesheets/consul-connect/pages/_home.scss +++ b/website/source/assets/stylesheets/consul-connect/pages/_home.scss @@ -1,4 +1,4 @@ -#page-home { + #page-home { #home-hero { padding-top: 12px; position: relative; @@ -12,6 +12,14 @@ padding-bottom: 100px; } + & + section { + + @media (max-width: 991px) { + padding-top: 212px; + } + + } + .g-container > div { @media (min-width: 992px) { display: flex; @@ -351,9 +359,6 @@ } #static-dynamic { - @media (max-width: 991px) { - padding-top: 212px; - } .static-callout { width: 85%; diff --git a/website/source/index.html.erb b/website/source/index.html.erb index 3bbc704b9..40ba16c38 100644 --- a/website/source/index.html.erb +++ b/website/source/index.html.erb @@ -10,8 +10,8 @@ description: |-
-

Easy Service Networking

-

Consul is a service networking solution to connect and secure services across any runtime platform and public or private cloud.

+

Secure Service Networking

+

Consul is a service networking solution to connect and secure services across any runtime platform and public or private cloud

@@ -65,11 +65,52 @@ description: |-
-
+
-

Service-based networking for dynamic infrastructure

-

The shift from static infrastructure to dynamic +

What can you do with Consul?

+

Consul is a service networking tool that allows you to discover services and secure network traffic.

+
+
+ +
+
+ Upgrade services +

Zero Downtime Deployments

+

Use traffic splitting to upgrade services with canary, rolling, and blue/green methods.

+
+ +
+
+
+ Load balance services +

Dynamic Load Balancing

+

Automate load balancer configuration with Consul and HAProxy, Nginx, or F5.

+
+ +
+
+
+
+ +
+
+
+

Service-based networking for dynamic infrastructure

+

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 @@ -84,14 +125,14 @@ description: |- -

Static

- Host-based networking +

Static

+ Host-based networking static, host-based networking
-

Dynamic

- Service-based networking +

Dynamic

+ Service-based networking
<%= inline_svg 'consul-connect/svgs/dynamic.svg' %>
@@ -100,100 +141,6 @@ description: |-
-
-
-
-

Use Cases

-

Consul can be run as a platform to solve a range of use-cases - in service networking.

-
-
-
-
- Service Discovery -

Service Discovery

-

Use the service registry to address and discover services across multiple runtime platforms, cloud providers and regions.

-
- -
-
-
- Service Mesh -

Service Mesh

-

Service discovery, identity-based authorization, and L7 traffic management abstracted from application code with proxies in the service mesh pattern.

-
- -
-
-
-
- -
-
-
-

Consul Principles

-
-
-
-
-

API-Driven

-

Codify and automate service definitions, health checks, service - authorization policies, failover logic, and more.

-
-
-
-
- -
- $ curl http://localhost:8500/v1/kv/deployment -[ - { - "LockIndex": 1, - "Session": "1c3f5836-4df4-0e26-6697-90dcce78acd9", - "Value": "Zm9v", - "Flags": 0, - "Key": "deployment", - "CreateIndex": 13, - "ModifyIndex": 19 - } -] -
-
-
-
-
-
- -
-
-
-
-
-

Run and Connect Anywhere

-

Connect services across any runtime platform and public or private cloud. Connect services from Kubernetes to VMs, Containers to Serverless functions.

-
-
-
- - - - Run and Connect Anywhere - -
-
-
-
-