From 3da06f9786bfc3e6a474624204685963ac0cfbd7 Mon Sep 17 00:00:00 2001 From: Jeff Escalante Date: Mon, 13 Apr 2020 14:05:52 -0400 Subject: [PATCH] home & use case pages --- website/components/before-after/index.jsx | 47 ++ website/components/before-after/style.css | 146 +++++++ website/data/subnav.js | 7 + website/package-lock.json | 51 +++ website/package.json | 7 + website/pages/button.css | 116 +++++ website/pages/discovery/index.jsx | 497 ++++++++++++++++++++++ website/pages/discovery/style.css | 51 +++ website/pages/home/index.jsx | 309 +++++++++++++- website/pages/home/style.css | 449 +++++++++++++++++++ website/pages/mesh/index.jsx | 453 ++++++++++++++++++++ website/pages/style.css | 12 +- website/public/img/icons/alert-icon.svg | 1 + website/public/img/icons/check-icon.svg | 1 + 14 files changed, 2145 insertions(+), 2 deletions(-) create mode 100644 website/components/before-after/index.jsx create mode 100644 website/components/before-after/style.css create mode 100644 website/pages/button.css create mode 100644 website/pages/discovery/index.jsx create mode 100644 website/pages/discovery/style.css create mode 100644 website/pages/home/style.css create mode 100644 website/pages/mesh/index.jsx create mode 100644 website/public/img/icons/alert-icon.svg create mode 100644 website/public/img/icons/check-icon.svg diff --git a/website/components/before-after/index.jsx b/website/components/before-after/index.jsx new file mode 100644 index 0000000000..5ccd8a1888 --- /dev/null +++ b/website/components/before-after/index.jsx @@ -0,0 +1,47 @@ +function BeforeAfterDiagram({ + beforeHeading, + beforeSubTitle, + beforeImage, + beforeDescription, + afterHeading, + afterSubTitle, + afterImage, + afterDescription, +}) { + return ( +
+
+ + + + + + + +

{beforeHeading}

+ {beforeSubTitle} + {beforeSubTitle} + {beforeDescription &&

{beforeDescription}

} +
+
+ +

{afterHeading}

+ {afterSubTitle} +
+ {afterSubTitle} +
+ {afterDescription &&

{afterDescription}

} +
+
+ ) +} + +export default BeforeAfterDiagram diff --git a/website/components/before-after/style.css b/website/components/before-after/style.css new file mode 100644 index 0000000000..2401f39537 --- /dev/null +++ b/website/components/before-after/style.css @@ -0,0 +1,146 @@ +.g-timeline { + align-content: space-between; + display: flex; + flex-direction: column; + justify-content: center; + margin: 0 -15px; + + @media (min-width: 768px) { + flex-direction: row; + text-align: center; + } + + &.no-intro { + margin-top: -30px; + + @media (min-width: 768px) { + margin-top: -90px; + } + + @media (min-width: 992px) { + margin-top: -116px; + } + } + + & > div { + margin-left: 18px; + padding: 40px 15px 0 42px; + position: relative; + + @media (min-width: 768px) { + margin-left: 0; + padding-left: 15px; + width: 50%; + } + + &:last-child { + & .dot { + border-color: #ca2171; + } + } + + & .line { + background-image: linear-gradient(180deg, #d2d4dc 50%, #c82070 100%); + height: calc(100% - 12px); + left: 8px; + position: absolute; + top: 45px; + width: 2px; + + @media (min-width: 768px) { + background-image: linear-gradient( + 90deg, + rgba(229, 230, 235, 0), + #d2d4dc 0%, + #c82070 100% + ); + height: 2px; + left: 50%; + top: 8px; + width: calc(100% - 34px); + } + + &:first-child { + background-image: linear-gradient( + 180deg, + rgba(229, 230, 235, 0) 5%, + #dadce3 70%, + #d2d4dc 100% + ); + bottom: calc(100% - 45px); + height: 60px; + top: auto; + + @media (min-width: 768px) { + background-image: linear-gradient( + 90deg, + rgba(229, 230, 235, 0) 5%, + #dadce3 26%, + #d2d4dc 100% + ); + height: 2px; + left: auto; + right: 50%; + top: 8px; + width: calc(50% + 120px); + } + } + + & svg { + position: absolute; + top: calc(100% - 8px); + transform: rotate(90deg); + left: -4px; + + @media (min-width: 768px) { + left: auto; + right: -10px; + top: -6px; + transform: none; + } + } + } + + & h2 { + margin: 0 0 8px; + } + + & .sub-heading { + display: block; + margin-bottom: 24px; + + @media (min-width: 992px) { + margin-bottom: 40px; + } + } + + & .dot { + background: #f7f8fa; + border: 2px solid #d2d4dc; + border-radius: 50%; + display: inline-block; + height: 18px; + left: 0; + position: absolute; + top: 45px; + width: 18px; + z-index: 1; + + @media (min-width: 768px) { + margin: 0 0 0 -9px; + left: 50%; + top: 0; + } + } + + & img { + display: block; + margin: 0 auto; + max-width: 100%; + } + + & p { + margin-top: 40px; + } + } +} diff --git a/website/data/subnav.js b/website/data/subnav.js index 06d5afe226..d9b0da0995 100644 --- a/website/data/subnav.js +++ b/website/data/subnav.js @@ -1,4 +1,11 @@ export default [ + { + text: 'Use Cases', + submenu: [ + { text: 'Service Discovery', url: '/discovery' }, + { text: 'Service Mesh', url: '/mesh' }, + ], + }, { text: 'Intro', url: '/intro', diff --git a/website/package-lock.json b/website/package-lock.json index 568b2faf70..f258cd1017 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -1546,6 +1546,11 @@ "resolved": "https://registry.npmjs.org/@hashicorp/localstorage-polyfill/-/localstorage-polyfill-1.0.12.tgz", "integrity": "sha512-wUWfaiEUo+2qcBjzYKwGpjqFsMCcD+Z4egF/2DHL13kvNZgbFMRBgSww0/bmOVq7ovhp3BnMRiHKZvcugRr1OQ==" }, + "@hashicorp/mktg-assets": { + "version": "1.0.0-alpha.3", + "resolved": "https://registry.npmjs.org/@hashicorp/mktg-assets/-/mktg-assets-1.0.0-alpha.3.tgz", + "integrity": "sha512-AvRPKxi6bEzjS6U8dZR9FGjPmlqxxTdzPeFZXYTsc8kUGjoY/X9/GXY2zYCpzEpmUdnLzOSJrDl17INPEeL4Pw==" + }, "@hashicorp/nextjs-scripts": { "version": "6.2.0-12", "resolved": "https://registry.npmjs.org/@hashicorp/nextjs-scripts/-/nextjs-scripts-6.2.0-12.tgz", @@ -1620,6 +1625,25 @@ "slugify": "^1.3.6" } }, + "@hashicorp/react-call-to-action": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/@hashicorp/react-call-to-action/-/react-call-to-action-0.1.4.tgz", + "integrity": "sha512-iarXkPvlDmbgvzKN5soh7rD3KXpgUPWB0wSIonvfSxZVUZ4NPKXpm3TkOuK/tpikubgFm3PmViODwJ42ydCG4A==", + "requires": { + "@hashicorp/react-button": "^2.1.7", + "@hashicorp/react-global-styles": "^4.1.0" + } + }, + "@hashicorp/react-case-study-slider": { + "version": "2.0.11", + "resolved": "https://registry.npmjs.org/@hashicorp/react-case-study-slider/-/react-case-study-slider-2.0.11.tgz", + "integrity": "sha512-3mA0nGPS2JXMRVRWjL5lF+sSQu47Py6LmBIuILlKkgSAHrEC45doeRyK/OjKv5aSl9qCIAhuQ+uugL1ZTMI3rg==", + "requires": { + "@hashicorp/react-button": "^2.1.7", + "@hashicorp/react-image": "^2.0.1", + "marked": "^0.7.0" + } + }, "@hashicorp/react-checkbox-input": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@hashicorp/react-checkbox-input/-/react-checkbox-input-2.0.0.tgz", @@ -1899,11 +1923,38 @@ "@hashicorp/react-text-split": "^0.2.4" } }, + "@hashicorp/react-text-split-with-logo-grid": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@hashicorp/react-text-split-with-logo-grid/-/react-text-split-with-logo-grid-1.0.2.tgz", + "integrity": "sha512-yD1sk5vRavXcBB6sAwY7gezcudevqPugBj1KX8i+PT9mNXribtHaFzEZsMYBRz4HINm3jt80RroIm78uwGQxMg==", + "requires": { + "@hashicorp/mktg-assets": "^1.0.0-alpha.3", + "@hashicorp/react-global-styles": "^2.1.17-fonts.0", + "@hashicorp/react-image": "^2.0.1", + "@hashicorp/react-text-split": "^0.2.4" + }, + "dependencies": { + "@hashicorp/react-global-styles": { + "version": "2.1.17-fonts.0", + "resolved": "https://registry.npmjs.org/@hashicorp/react-global-styles/-/react-global-styles-2.1.17-fonts.0.tgz", + "integrity": "sha512-76CdVVac6yiKUScd55m+AxKx238QZjNhfespn/PpoGkyECYGzaYrdT20GpzIStFTia5Db4/fnGJcECpwcQpCxA==" + } + } + }, "@hashicorp/react-toggle": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@hashicorp/react-toggle/-/react-toggle-1.0.1.tgz", "integrity": "sha512-KW7HBPKHdzk+R34pAFuqkcdKRCe04Qvv6xJw8FCeieuq/mBMd4dI+ZNSEbm68+STUKoiq5OAp2dWzAF/iwmKqg==" }, + "@hashicorp/react-use-cases": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@hashicorp/react-use-cases/-/react-use-cases-1.0.4.tgz", + "integrity": "sha512-IB+HcC5X54vPMW+JOPkqxsrgN+NmqIXytsL1qOsP5yJ1PeEbS8Sy1YCrOjx06ZkVCv/qXM49VTvHqj/B006lFQ==", + "requires": { + "@hashicorp/react-image": "^2.0.1", + "marked": "^0.7.0" + } + }, "@hashicorp/react-vertical-text-block-list": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/@hashicorp/react-vertical-text-block-list/-/react-vertical-text-block-list-2.0.1.tgz", diff --git a/website/package.json b/website/package.json index 0401c06c24..9f3d6959ba 100644 --- a/website/package.json +++ b/website/package.json @@ -6,9 +6,13 @@ "dependencies": { "@bugsnag/js": "^6.5.2", "@bugsnag/plugin-react": "^6.5.0", + "@hashicorp/mktg-assets": "^1.0.0-alpha.3", "@hashicorp/nextjs-scripts": "^6.2.0-12", "@hashicorp/react-alert": "^2.0.0", "@hashicorp/react-button": "^2.1.7", + "@hashicorp/react-call-to-action": "^0.1.4", + "@hashicorp/react-case-study-slider": "^2.0.11", + "@hashicorp/react-code-block": "^1.2.6", "@hashicorp/react-consent-manager": "^2.0.7", "@hashicorp/react-content": "^3.0.0-0", "@hashicorp/react-docs-page": "^1.1.0", @@ -21,6 +25,7 @@ "@hashicorp/react-hero": "^3.0.5", "@hashicorp/react-image": "^2.0.1", "@hashicorp/react-inline-svg": "^1.0.0", + "@hashicorp/react-logo-grid": "^2.0.9", "@hashicorp/react-mega-nav": "^4.0.1-2", "@hashicorp/react-product-downloader": "^3.0.5", "@hashicorp/react-section-header": "^2.0.0", @@ -29,6 +34,8 @@ "@hashicorp/react-text-split": "^0.2.4", "@hashicorp/react-text-split-with-code": "0.0.7", "@hashicorp/react-text-split-with-image": "^1.2.4", + "@hashicorp/react-text-split-with-logo-grid": "^1.0.2", + "@hashicorp/react-use-cases": "^1.0.4", "@hashicorp/react-vertical-text-block-list": "^2.0.1", "babel-plugin-import-glob-array": "^0.2.0", "highlight.js": "^9.18.1", diff --git a/website/pages/button.css b/website/pages/button.css new file mode 100644 index 0000000000..ef57fc2b50 --- /dev/null +++ b/website/pages/button.css @@ -0,0 +1,116 @@ +.button { + background: var(--consul); + border-radius: 1px; + box-sizing: border-box; + color: var(--white); + display: inline-block; + font-size: 0.938rem; + font-weight: 500; + line-height: 1.6em; + margin-bottom: 4px; + padding: 14px 20px; + text-decoration: none; + + &:hover, + &:active, + &:focus { + color: var(--white); + text-decoration: none; + } + + &:focus { + border: 3px solid #e07eac; + outline: none; + padding: 11px 17px; + } + + &:hover { + background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), + var(--consul); + border: none; + padding: 14px 20px; + } + + &:active { + background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), + var(--consul); + border: none; + } + + &.white { + background: var(--white); + color: var(--black); + + & path { + fill: black; + } + + &:hover { + background: #fff2f8; + } + + &:active { + background: #f8d9e7; + } + } + + &.secondary { + background: transparent; + border: 1px solid rgba(29, 30 35, 0.2); + color: var(--black); + padding: 13px 19px; + + &:focus { + border: 3px solid #e07eac; + padding: 11px 17px; + } + + &:hover { + background: rgba(29, 30 35, 0.1); + border: none; + padding: 14px 20px; + } + + &:active { + background: rgba(29, 30 35, 0.16); + } + + &.white { + border: 1px solid rgba(255, 255, 255, 0.24); + color: var(--white); + + &:focus { + border: 3px solid #e07eac; + padding: 11px 17px; + } + + &:hover { + background: rgba(255, 255, 255, 0.14); + border: none; + padding: 14px 20px; + } + + &:active { + background: rgba(255, 255, 255, 0.08); + } + } + } + + &.download { + & svg { + margin: 0 4px -4px 0; + + & path { + transition: fill 0.25s ease; + } + } + } + + &.inline { + padding: 8px 14px; + } + + & path { + fill: var(--white); + } +} diff --git a/website/pages/discovery/index.jsx b/website/pages/discovery/index.jsx new file mode 100644 index 0000000000..97285dfca3 --- /dev/null +++ b/website/pages/discovery/index.jsx @@ -0,0 +1,497 @@ +import CallToAction from '@hashicorp/react-call-to-action' +import CaseStudySlider from '@hashicorp/react-case-study-slider' +import CodeBlock from '@hashicorp/react-code-block' +import BeforeAfterDiagram from '../../components/before-after' + +export default function ServiceDiscovery() { + return ( + <> +
+ +
+
+ +
+
+
+ +
+
+
+

Features

+
+
+
+
+

Service Registry

+

+ Consul provides a registry of all the running nodes and + services, along with their current health status. This + allows operators to understand the environment, and + applications and automation tools to interact with dynamic + infrastructure using an HTTP API. +

+

+ + Learn more + + + + + + + + + + + +

+
+
+
+ + + + Service Registry + +
+
+
+
+ +
+
+
+
+
+

DNS Query Interface

+

+ Consul enables service discovery using a built-in DNS + server. This allows existing applications to easily + integrate, as almost all applications support using DNS to + resolve IP addresses. Using DNS instead of a static IP + address allows services to scale up/down and route around + failures easily. +

+

+ + Learn more + + + + + + + + + + + +

+
+
+
+
+ + > DiG 9.8.3-P1 <<>> web-frontend.service.consul. ANY +;; global options: +cmd +;; Got answer: +;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 29981 +;; flags: qr aa rd ra; QUERY: 1, ANSWER: 2, AUTHORITY: 0, ADDITIONAL: 0 + +;; QUESTION SECTION: +;web-frontend.service.consul. IN ANY + +;; ANSWER SECTION: +web-frontend.service.consul. 0 IN A 10.0.3.83 +web-frontend.service.consul. 0 IN A 10.0.1.109 + `} + /> +
+
+
+
+
+ +
+
+
+
+
+

HTTP API with Edge Triggers

+

+ Consul provides an HTTP API to query the service registry + for nodes, services, and health check information. The API + also supports blocking queries, or long-polling for any + changes. This allows automation tools to react to services + being registered or health status changes to change + configurations or traffic routing in real time. +

+

+ + Learn more + + + + + + + + + + + +

+
+
+
+
+ + "critical", + "ServiceID": "web", + "ServiceName": "web", + "CreateIndex": 10, + "ModifyIndex": 20 + ... + } + `} + /> +
+
+
+
+
+ +
+
+
+
+
+

Multi Datacenter

+

+ Consul supports multiple datacenters out of the box with no + complicated configuration. Look up services in other + datacenters or keep the request local. Advanced features + like Prepared Queries enable automatic failover to other + datacenters. +

+

+ + Learn more + + + + + + + + + + + +

+
+
+
+
+ +
+ dc2", + "TaggedAddresses": { + "lan": "10.0.1.109", + "wan": "10.0.1.109" + }, + "CreateIndex": 112, + "ModifyIndex": 125 + }, +... + `} + /> +
+
+
+
+
+
+ +
+
+
+
+
+

Health Checks

+

+ Pairing service discovery with health checking prevents + routing requests to unhealthy hosts and enables services to + easily provide circuit breakers. +

+

+ + Learn more + + + + + + + + + + + +

+
+
+
+ + + + Health Checks + +
+
+
+
+
+
+
+

Use Cases

+
+ +
+
+ +
+
+

Ready to get started?

+ + + + + Download + + + Explore docs + +
+
+
+ + ) +} diff --git a/website/pages/discovery/style.css b/website/pages/discovery/style.css new file mode 100644 index 0000000000..77b43ddb03 --- /dev/null +++ b/website/pages/discovery/style.css @@ -0,0 +1,51 @@ +.intro { + text-align: center; + margin-bottom: 64px; +} + +.g-section.border-top { + border-top: 1px solid #e5e6eb; +} + +.g-cta-section.g-section { + align-items: center; + background: var(--consul); + display: flex; + justify-content: center; + padding-left: 15px; + padding-right: 15px; + position: relative; + text-align: center; + overflow: hidden; + + &:after { + content: ''; + background: url('/img/consul-connect/mesh.svg') top center; + background-size: cover; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + opacity: 0.2; + transform: scale(1.3, 1.3); + } + + & > div { + z-index: 1; + } + + & h2 { + color: var(--white); + margin-top: 0; + } + + & .button + .button { + margin-left: 18px; + } +} + +.bg-dark { + background: #252937 !important; + color: #fff; +} diff --git a/website/pages/home/index.jsx b/website/pages/home/index.jsx index 90e9ff5e82..e10ee49e8f 100644 --- a/website/pages/home/index.jsx +++ b/website/pages/home/index.jsx @@ -1,3 +1,310 @@ +import Hero from '@hashicorp/react-hero' +import BeforeAfterDiagram from '../../components/before-after' +import SectionHeader from '@hashicorp/react-section-header' +import consulEnterpriseLogo from '../../public/img/consul-connect/logos/consul-enterprise-logo.svg?include' +import consulLogo from '../../public/img/consul-connect/logos/consul-logo.svg?include' + export default function HomePage() { - return

Coming soon

+ return ( + <> +
+ {/* Hero */} +
+ View demo of web UI', + videos: [ + { + name: 'UI', + playbackRate: 2, + src: [ + { + srcType: 'ogg', + }, + { + srcType: 'webm', + url: '', + }, + { + srcType: 'mp4', + url: + 'https://consul-static-asssets.global.ssl.fastly.net/videos/v1/connect-video-ui.mp4', + }, + ], + }, + { + name: 'CLI', + src: [ + { + srcType: 'mp4', + url: + 'https://consul-static-asssets.global.ssl.fastly.net/videos/v1/connect-video-cli.mp4', + }, + ], + }, + ], + }} + /> +
+ {/* Use Cases */} +
+
+ + +
+
+
+ Upgrade services +

Consul-Kubernetes Deployments

+

+ Use Consul service discovery and service mesh features with + Kubernetes.{' '} +

+
+ +
+
+
+ Connect services +

Secure Service Communication

+

+ Secure and observe communication between your services + without modifying their code. +

+
+ +
+
+
+ Load balance services +

Dynamic Load Balancing

+

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

+
+ +
+
+
+
+ {/* Static => Dynamic (Before & After) */} +
+
+ + +
+
+
+
+
+
+
+

Extend and Integrate

+

+ Provision clusters on any infrastructure, connect to + services over TLS via proxy integrations, and Serve TLS + certificates with pluggable Certificate Authorities. +

+
+
+
+ + + + Extend and Integrate + +
+
+
+
+ + {/* Companies Using Consul Logos */} +
+
+ +
+
+ SAP Ariba +
+
+ Citadel +
+
+ Barclays +
+
+ itv +
+
+ Spaceflight Industries +
+
+ MyLotto +
+
+
+
+
+
+
+
+

+ Consul Open Source addresses the technical complexity of + connecting services across distributed infrastructure. +

+ +
+
+
+
+
+

+ Consul Enterprise addresses the organizational complexity of + large user bases and compliance requirements with collaboration + and governance features. +

+ +
+
+
+
+ + ) } diff --git a/website/pages/home/style.css b/website/pages/home/style.css new file mode 100644 index 0000000000..3f807df920 --- /dev/null +++ b/website/pages/home/style.css @@ -0,0 +1,449 @@ +.large-padding { + padding: 120px 0; +} + +.small-padding { + padding: 56px; +} + +.bg-light { + background: #f7f8fa !important; +} + +#companies-using-consul h2 { + margin-bottom: 24px; +} + +#static-dynamic { + & .g-section-header { + margin-bottom: 64px; + } +} + +.g-use-cases { + margin: 48px 0 8px; + + @media (min-width: 768px) { + display: flex; + justify-content: center; + margin: 0 20px; + } + + & .button { + background: #ca2171; + border-radius: 1px; + box-sizing: border-box; + color: #ffffff; + display: inline-block; + font-family: 'gilmer-web', 'Gilmer', Geneva, Tahoma, Helvetica, Verdana, + sans-serif; + font-size: 0.938rem; + font-weight: 500; + line-height: 1.6em; + margin-bottom: 4px; + padding: 14px 20px; + text-decoration: none; + } + + & img { + width: 51%; + + @media (min-width: 768px) { + width: 80%; + } + } + + & h3 { + font-weight: 600; + margin: 40px 0 0; + + & span { + display: block; + font-weight: 300; + } + } + + & p { + margin-top: 0.5em; + + @media (min-width: 768px) { + margin-top: 1em; + } + } + + & > div { + padding: 0 16px; + position: relative; + text-align: center; + + @media (min-width: 768px) { + padding: 0 20px; + width: 33.33333%; + } + + @media (min-width: 992px) { + display: flex; + flex-direction: column; + justify-content: space-between; + } + + & + div { + margin-top: 56px; + + @media (min-width: 768px) { + margin-top: 0; + } + } + } + + & .button { + @media (min-width: 768px) { + margin-top: 22px; + } + } +} + +.g-logo-grid { + align-items: center; + display: flex; + flex-wrap: wrap; + margin: 0 auto; + max-width: 990px; + text-align: center; + + & > div { + width: 33%; + + & img { + width: 100%; + } + + @media (max-width: 768px) { + width: 50%; + } + } +} + +.g-text-asset { + text-align: center; + + @media (min-width: 768px) { + align-content: space-between; + display: flex; + justify-content: center; + margin: 0 -20px; + text-align: left; + } + + &.reverse { + flex-direction: row-reverse; + + & > div:first-child > div { + margin-left: auto; + + @media (min-width: 768px) { + padding: 0 24px 0 0; + } + + @media (min-width: 992px) { + padding-right: 32px; + } + } + } + + &.large { + margin-bottom: -56px; + + @media (min-width: 768px) { + margin-bottom: -96px; + } + + @media (min-width: 992px) { + margin-bottom: -120px; + } + + & > div:last-child { + justify-content: unset; + } + + & picture > img, + & img { + width: 145%; + vertical-align: middle; + } + } + + & > div { + @media (min-width: 768px) { + align-items: center; + margin: 0 auto; + display: flex; + padding: 0 20px; + width: 50%; + } + + &:first-child { + margin-bottom: 32px; + + @media (min-width: 768px) { + margin-bottom: 0; + } + + & > div { + @media (min-width: 768px) { + margin-left: 0; + max-width: 454px; + padding: 0 0 0 24px; + } + + @media (min-width: 992px) { + padding-left: 32px; + } + + & a { + color: #1563ff; + + &:focus, + &:hover { + color: #2c72fe; + + & path { + fill: #2c72fe; + } + } + + & svg { + margin-left: 10px; + } + } + } + } + + &:last-child { + justify-content: center; + } + + & img, + & picture > img { + width: 100%; + + &.shadow { + box-shadow: 0 40px 48px -20px rgba(63, 68, 85, 0.4); + } + } + + & > svg { + max-width: 100%; + } + + &.code-sample > div { + box-shadow: 0 40px 48px -20px rgba(63, 68, 85, 0.4); + color: var(--white); + margin: 0; + text-align: left; + width: 100%; + + & span { + background: #252937; + border-bottom: 1px solid rgba(255, 255, 255, 0.15); + display: block; + height: 32px; + + @media (min-width: 768px) { + height: 40px; + } + } + + & .code { + background: #1e212a; + overflow: auto; + padding: 16px 24px 32px; + width: 100%; + + & code { + background: #1e212a; + border-radius: 0; + color: var(--white); + white-space: pre; + + &.keyword { + color: #be5580; + } + } + } + } + + &.logos { + justify-content: center; + + & > div { + align-items: center; + display: flex; + flex-direction: column; + + & img, + picture { + margin: 30px 0; + + @media (max-width: 767px) { + margin: 15px 0; + max-width: 51%; + } + } + } + } + } + + & h3 { + margin: 0 0 16px 0; + + @media (min-width: 768px) { + margin-top: 16px; + } + } + + & i { + list-style-type: none; + margin: 16px; + text-align: left; + + @media (min-width: 768px) { + margin: 16px 0; + } + + &:before { + background-position: center; + background-repeat: no-repeat; + background-size: 100%; + background-image: url('data:image/svg+xml;utf8,'); + content: ''; + display: block; + float: left; + height: 24px; + margin: 4px 0 0 -40px; + width: 24px; + } + } +} + +#static-dynamic { + & .static-callout { + width: 85%; + } + + & #index-dynamic-animation { + width: 85%; + margin: 0 auto; + + & svg { + width: 100%; + height: auto !important; + } + } +} + +.home-cta-section { + color: var(--white); + + @media (min-width: 768px) { + display: flex; + } + + & > div { + display: flex; + justify-content: center; + padding: 64px 24px; + overflow: hidden; + + @media (min-width: 768px) { + padding-top: 80px; + padding-bottom: 80px; + width: 50%; + } + + @media (min-width: 992px) { + padding-top: 96px; + padding-bottom: 96px; + width: 50%; + } + + & > svg { + width: 135px; + } + + &:first-child { + background: var(--consul); + position: relative; + + &:after { + content: ''; + background: url('/img/consul-connect/mesh.svg') top center; + background-size: cover; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + opacity: 0.2; + transform: scale(1.3, 1.3); + } + } + + &:last-child { + background: var(--gray-1); + } + + & > div { + display: flex; + flex-direction: column; + max-width: 564px; + text-align: center; + width: 100%; + z-index: 1; + + & div:first-child { + height: 50px; + width: auto; + } + + & p { + flex: 1 0 auto; + margin: 24px 0 32px; + } + } + } +} + +.button { + background: #ca2171; + border-radius: 1px; + box-sizing: border-box; + color: #ffffff; + display: inline-block; + font-family: 'gilmer-web', 'Gilmer', Geneva, Tahoma, Helvetica, Verdana, + sans-serif; + font-size: 0.938rem; + font-weight: 500; + line-height: 1.6em; + margin-bottom: 4px; + padding: 14px 20px; + text-decoration: none; +} + +.button.white { + background: #ffffff; + color: #000000; +} + +.button.secondary.white { + border: 1px solid rgba(255, 255, 255, 0.24); + color: #ffffff; +} + +.button.secondary { + background: transparent; + border: 1px solid rgba(29, 30, 35, 0.2); + color: #000000; + padding: 13px 19px; +} +/* */ diff --git a/website/pages/mesh/index.jsx b/website/pages/mesh/index.jsx new file mode 100644 index 0000000000..10299ff934 --- /dev/null +++ b/website/pages/mesh/index.jsx @@ -0,0 +1,453 @@ +import CallToAction from '@hashicorp/react-call-to-action' +import CodeBlock from '@hashicorp/react-code-block' +import BeforeAfterDiagram from '../../components/before-after' + +export default function ServiceMesh() { + return ( + <> +
+ +
+
+ +
+
+ +
+
+
+

Features

+
+
+
+
+

Layer 7 Traffic Management

+

+ Service-to-service communication policy at Layer 7 can be + managed centrally, enabling advanced traffic management + patterns such as service failover, path-based routing, and + traffic shifting that can be applied across public and + private clouds, platforms, and networks. +

+

+ + Learn more + + + + + + + + + + + +

+
+
+
+
+ + +
+
+
+
+
+ +
+
+
+
+
+

Layer 7 Observability

+

+ Centrally managed service observability at Layer 7 including + detailed metrics on all service-to-service communication + such as connections, bytes transferred, retries, timeouts, + open circuits, and request rates, response codes. +

+

+ + Learn more + + + + + + + + + + + +

+
+
+
+ + + Metrics dashboard + +
+
+
+
+ +
+
+
+
+
+

+ Secure services across any runtime platform +

+

+ Secure communication between legacy and modern workloads. + Sidecar proxies allow applications to be integrated without + code changes and Layer 4 support provides nearly universal + protocol compatibility. +

+

+ + Learn more + + + + + + + + + + + +

+
+
+
+ + + + Secure services across any runtime platform + +
+
+
+
+ +
+
+
+
+
+

+ Certificate-Based Service Identity +

+

+ TLS certificates are used to identify services and secure + communications. Certificates use the SPIFFE format for + interoperability with other platforms. Consul can be a + certificate authority to simplify deployment, or integrate + with external signing authorities like Vault. +

+

+ + Learn more + + + + + + + + + + + +

+
+
+
+
+ Vault + Spiffe +
+
+
+
+
+ +
+
+
+
+
+

Encrypted communication

+

+ All traffic between services is encrypted and authenticated + with mutual TLS. Using TLS provides a strong guarantee of + the identity of services communicating, and ensures all data + in transit is encrypted. +

+

+ + Learn more + + + + + + + + + + + +

+
+
+
+
+ + Consul Connect proxy starting... + Configuration mode: Flags + Service: web + Public listener: 10.0.1.109:7200 => 127.0.0.1:8000 +... +$ tshark -V \\ + -Y "ssl.handshake.certificate" \\ + -O "ssl" \\ + -f "dst port 7200" +Frame 39: 899 bytes on wire (7192 bits), 899 bytes captured (7192 bits) on interface 0 +Internet Protocol Version 4, Src: 10.0.1.110, Dst: 10.0.1.109 +Transmission Control Protocol, Src Port: 61918, Dst Port: 7200, Seq: 136, Ack: 916, Len: 843 +Secure Sockets Layer + TLSv1.2 Record Layer: Handshake Protocol: Certificate + Version: TLS 1.2 (0x0303) + Handshake Protocol: Certificate + RDNSequence item: 1 item (id-at-commonName=Consul CA 7) + RelativeDistinguishedName item (id-at-commonName=Consul CA 7) + Id: 2.5.4.3 (id-at-commonName) + DirectoryString: printableString (1) + printableString: Consul CA 7 + `} + /> +
+
+
+
+
+ +
+
+
+
+
+

Mesh Gateway

+

+ Connect between different cloud regions, VPCs and between + overlay and underlay networks without complex network + tunnels and NAT. Mesh Gateways solve routing at TLS layer + while preserving end-to-end encryption and limiting attack + surface area at the edge of each network. +

+

+ + Learn more + + + + + + + + + + + +

+
+
+
+ + Mesh gateway diagram + +
+
+
+
+ +
+
+

Ready to get started?

+ + + + + Download + + + Explore docs + +
+
+
+ + ) +} diff --git a/website/pages/style.css b/website/pages/style.css index 6b2949beb6..216752075a 100644 --- a/website/pages/style.css +++ b/website/pages/style.css @@ -31,19 +31,29 @@ @import '~@hashicorp/react-enterprise-alert/dist/style.css'; @import '~@hashicorp/react-mega-nav/style.css'; @import '~@hashicorp/react-docs-page/style.css'; +@import '~@hashicorp/react-section-header/dist/style.css'; +@import '~@hashicorp/react-call-to-action/dist/style.css'; +@import '~@hashicorp/react-case-study-slider/dist/style.css'; +@import '~@hashicorp/react-code-block/dist/style.css'; /* Local Components */ @import '../components/footer/style.css'; +@import '../components/before-after/style.css'; /* Local Pages */ @import './downloads/style.css'; @import './community/style.css'; +@import './home/style.css'; +@import './discovery/style.css'; /* Print Styles */ @import './print.css'; +/* Misc Styles */ +@import './button.css'; + /* Sticky Footer */ -.content { +footer .content { min-height: calc(100vh - 260px); } diff --git a/website/public/img/icons/alert-icon.svg b/website/public/img/icons/alert-icon.svg new file mode 100644 index 0000000000..a72fa12887 --- /dev/null +++ b/website/public/img/icons/alert-icon.svg @@ -0,0 +1 @@ + diff --git a/website/public/img/icons/check-icon.svg b/website/public/img/icons/check-icon.svg new file mode 100644 index 0000000000..5f0b828328 --- /dev/null +++ b/website/public/img/icons/check-icon.svg @@ -0,0 +1 @@ +