mirror of https://github.com/hashicorp/consul
website: update homepage with focus on k8s
Noel Quiles
Mike Wickett
parent
68b13f4c70
commit
05f1218787
Binary file not shown.
|
After Width: | Height: | Size: 132 KiB |
|
|
@ -0,0 +1,47 @@
|
||||||
|
import Button from '@hashicorp/react-button'
|
||||||
|
import TextSplit from '@hashicorp/react-text-split'
|
||||||
|
import s from './style.module.css'
|
||||||
|
|
||||||
|
export default function CtaHero() {
|
||||||
|
return (
|
||||||
|
<div className={s.ctaHero}>
|
||||||
|
<TextSplit
|
||||||
|
heading="Service Mesh for any runtime or cloud"
|
||||||
|
content="Consul automates networking for simple and secure application delivery."
|
||||||
|
brand="consul"
|
||||||
|
links={[
|
||||||
|
{ type: 'none', text: 'Download Consul', url: '/downloads' },
|
||||||
|
{ type: 'none', text: 'Explore Tutorials', url: 'https://learn.hashicorp.com/consul' },
|
||||||
|
]}
|
||||||
|
linkStyle="buttons"
|
||||||
|
>
|
||||||
|
<Cta />
|
||||||
|
</TextSplit>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function Cta() {
|
||||||
|
return (
|
||||||
|
<div className={s.cta}>
|
||||||
|
<img src={require('./img/cta-image.jpg?url')} alt="Consul stack" />
|
||||||
|
<div className={s.ctaContent}>
|
||||||
|
<div className={s.ctaHeading}>
|
||||||
|
<h4 className="g-type-display-4">Try HCP Consul</h4>
|
||||||
|
</div>
|
||||||
|
<div className={s.ctaDescription}>
|
||||||
|
<p className="g-type-body-small">
|
||||||
|
Hosted on HashiCorp Cloud Platform, HCP Consul is a fully managed
|
||||||
|
service mesh that discovers and securely connects any service.
|
||||||
|
</p>
|
||||||
|
<Button
|
||||||
|
title="Sign Up"
|
||||||
|
linkType="inbound"
|
||||||
|
theme={{ variant: 'tertiary-neutral' }}
|
||||||
|
url="https://cloud.hashicorp.com/?utm_source=consul_io&utm_content=hero"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,98 @@
|
||||||
|
.ctaHero {
|
||||||
|
& :global(.g-text-split) :global(.g-grid-container) {
|
||||||
|
@media (width < 1120px) {
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
@media (768px < width < 1120px) {
|
||||||
|
width: 40em;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
@media (width < 1120px) {
|
||||||
|
margin-bottom: 64px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
& p {
|
||||||
|
@media (width < 1120px) {
|
||||||
|
margin: 16px auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* HACK:
|
||||||
|
* Overrides the H2 with styling from
|
||||||
|
* our global g-type-display-1 class.
|
||||||
|
*
|
||||||
|
* This was because there's no way to
|
||||||
|
* override the heading in <TextSplit />
|
||||||
|
* with the designed h1 styling.
|
||||||
|
*
|
||||||
|
* TODO:
|
||||||
|
* Address this at the component
|
||||||
|
* level or revert to just using h2
|
||||||
|
* as is default.
|
||||||
|
*/
|
||||||
|
& h2 {
|
||||||
|
font-size: 2.125rem;
|
||||||
|
letter-spacing: -0.008em;
|
||||||
|
line-height: 1.265em;
|
||||||
|
|
||||||
|
@media (--medium-up) {
|
||||||
|
font-size: 2.625rem;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
line-height: 1.19em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (--large) {
|
||||||
|
font-size: 3.125rem;
|
||||||
|
line-height: 1.2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& p {
|
||||||
|
max-width: 440px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta {
|
||||||
|
padding: 24px;
|
||||||
|
padding-bottom: 51px;
|
||||||
|
border: 1px solid var(--gray-5);
|
||||||
|
|
||||||
|
& img {
|
||||||
|
max-height: 50%;
|
||||||
|
max-width: 100%;
|
||||||
|
margin-bottom: 36px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ctaContent {
|
||||||
|
display: flex;
|
||||||
|
@media (width < 520px) {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .ctaHeading {
|
||||||
|
@media (width >= 520px) {
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
|
||||||
|
& h4 {
|
||||||
|
margin-top: 0;
|
||||||
|
@media (width >= 520px) {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& p {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1631,6 +1631,37 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"@hashicorp/react-callouts": {
|
||||||
|
"version": "7.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@hashicorp/react-callouts/-/react-callouts-7.0.0.tgz",
|
||||||
|
"integrity": "sha512-Jy7tEgf2hi7fuXMjKLjs58+hkYjcNGxPcWGL6E4MQdTxKuYv4WjEukCrkMWr2Ke3d8cWPfnKF2+gZkBJq2OuuA==",
|
||||||
|
"requires": {
|
||||||
|
"@hashicorp/react-button": "^5.0.0",
|
||||||
|
"@hashicorp/react-inline-svg": "^1.0.2"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@hashicorp/react-button": {
|
||||||
|
"version": "5.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@hashicorp/react-button/-/react-button-5.0.0.tgz",
|
||||||
|
"integrity": "sha512-kzwmCtCKpZX+3TihBOyEakQ9cSlmO4wIZUDRtDASleza/J7KL9ANU22baqNXpV9plCXVHlKJOeMt9t74LLOIgg==",
|
||||||
|
"requires": {
|
||||||
|
"@hashicorp/react-inline-svg": "^1.0.0",
|
||||||
|
"classnames": "^2.2.6",
|
||||||
|
"slugify": "1.3.6"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@hashicorp/react-inline-svg": {
|
||||||
|
"version": "1.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@hashicorp/react-inline-svg/-/react-inline-svg-1.0.2.tgz",
|
||||||
|
"integrity": "sha512-AAFnBslSTgnEr++dTbMn3sybAqvn7myIj88ijGigF6u11eSRiV64zqEcyYLQKWTV6dF4AvYoxiYC6GSOgiM0Yw=="
|
||||||
|
},
|
||||||
|
"slugify": {
|
||||||
|
"version": "1.3.6",
|
||||||
|
"resolved": "https://registry.npmjs.org/slugify/-/slugify-1.3.6.tgz",
|
||||||
|
"integrity": "sha512-wA9XS475ZmGNlEnYYLPReSfuz/c3VQsEMoU43mi6OnKMCdbnFXd4/Yg7J0lBv8jkPolacMpOrWEaoYxuE1+hoQ=="
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"@hashicorp/react-code-block": {
|
"@hashicorp/react-code-block": {
|
||||||
"version": "3.0.3",
|
"version": "3.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/@hashicorp/react-code-block/-/react-code-block-3.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/@hashicorp/react-code-block/-/react-code-block-3.0.3.tgz",
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@
|
||||||
"@hashicorp/react-alert-banner": "5.0.0",
|
"@hashicorp/react-alert-banner": "5.0.0",
|
||||||
"@hashicorp/react-button": "4.0.0",
|
"@hashicorp/react-button": "4.0.0",
|
||||||
"@hashicorp/react-call-to-action": "1.0.3",
|
"@hashicorp/react-call-to-action": "1.0.3",
|
||||||
|
"@hashicorp/react-callouts": "^7.0.0",
|
||||||
"@hashicorp/react-docs-page": "10.4.0",
|
"@hashicorp/react-docs-page": "10.4.0",
|
||||||
"@hashicorp/react-featured-slider": "1.1.10",
|
"@hashicorp/react-featured-slider": "1.1.10",
|
||||||
"@hashicorp/react-hashi-stack-menu": "^1.1.0",
|
"@hashicorp/react-hashi-stack-menu": "^1.1.0",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<svg width="50" height="49" viewBox="0 0 50 49" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M39.3 25.03l5.64-5.17-5.64-5.17M20.03 34.9l5.17 5.64 5.17-5.64M11.1 14.69l-5.64 5.17 5.64 5.17" stroke="#000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M26.45 2a1.25 1.25 0 00-2.5 0h2.5zM6.4 21.11h18.8v-2.5H6.4v2.5zm18.8 0H44v-2.5H25.2v2.5zm-1.25-1.25V39.6h2.5V19.86h-2.5zm2.5 0V2h-2.5v17.86h2.5z" fill="#000"/></svg>
|
||||||
|
After Width: | Height: | Size: 456 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg width="51" height="51" viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.46 21.044l.31-5.557a10.707 10.707 0 00-6.291 3.058l4.489 3.23.009-.004c.152.113.339.179.542.179a.926.926 0 00.919-.894l.022-.012zM32.639 18.548a10.78 10.78 0 00-6.253-3.06l.31 5.547.004.002c.008.191.074.38.2.541a.912.912 0 001.263.172l.015.007 4.46-3.21zM19.95 24.342l-4.1-3.721a11.043 11.043 0 00-1.524 6.906l5.253-1.54.005-.017a.92.92 0 00.477-.32.943.943 0 00-.116-1.285l.005-.023zM35.618 23.957a11.139 11.139 0 00-1.345-3.334l-4.076 3.703.002.012a.929.929 0 00-.292.495c-.11.49.18.978.653 1.11l.005.022 5.28 1.544a11.19 11.19 0 00-.227-3.552zM25.915 24.63h-1.68l-1.045 1.322.375 1.652 1.512.738 1.507-.736.375-1.652-1.044-1.324zM29.831 29.177a.905.905 0 00-.212-.016.909.909 0 00-.352.093.94.94 0 00-.446 1.21l-.007.01 2.11 5.172a10.898 10.898 0 004.35-5.548l-5.434-.932-.009.011zM21.375 29.91a.924.924 0 00-1.064-.71l-.009-.012-5.388.928a10.94 10.94 0 004.338 5.51l2.087-5.12-.016-.02a.938.938 0 00.052-.576zM25.474 31.52a.9.9 0 00-.43-.093.92.92 0 00-.78.493h-.004l-2.649 4.862a10.64 10.64 0 005.89.308 10.9 10.9 0 001.061-.3l-2.656-4.872h-.02a.921.921 0 00-.412-.398z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M23.626 1.135a3.317 3.317 0 012.895 0L43.96 9.586a3.366 3.366 0 011.804 2.277l4.308 18.996a3.378 3.378 0 01-.644 2.84L37.363 48.934a3.316 3.316 0 01-2.607 1.26l-19.354.005a3.317 3.317 0 01-2.607-1.263L.726 33.705a3.37 3.37 0 01-.642-2.84l4.302-18.997A3.338 3.338 0 016.19 9.591l17.436-8.456zm.407 7.313c0-.65.467-1.177 1.044-1.177.576 0 1.043.527 1.043 1.177l.002.107c.001.068.003.139 0 .194-.009.247-.047.456-.086.67-.02.109-.04.22-.056.337l-.007.056c-.085.715-.156 1.31-.111 1.866.035.246.162.363.284.476l.057.053c.003.077.015.332.024.474 3.319.299 6.4 1.84 8.664 4.248l.397-.287c.016 0 .034.002.054.004.15.011.4.03.58-.074.455-.312.871-.741 1.37-1.255l.036-.038c.079-.085.15-.168.222-.25.142-.165.28-.327.467-.49.047-.04.11-.09.168-.137l.064-.05c.501-.406 1.197-.363 1.557.094.36.457.244 1.157-.257 1.562l-.075.063c-.054.044-.11.091-.154.125-.195.146-.38.245-.567.346a7.559 7.559 0 00-.3.168h-.002c-.623.391-1.14.715-1.55 1.107-.169.182-.18.356-.191.523a3.148 3.148 0 01-.006.076l-.158.145c-.074.067-.156.14-.212.193a13.819 13.819 0 011.955 4.588c.379 1.67.438 3.34.219 4.945l.421.125.03.044c.084.124.228.34.421.415.532.17 1.13.234 1.85.31l.021.003c.118.01.23.014.342.019.212.008.421.017.66.062.053.01.123.028.19.045l.113.028c.615.15 1.01.724.883 1.29-.127.566-.728.91-1.347.774l-.008-.001a.08.08 0 01-.008-.001l-.02-.007-.1-.02a2.895 2.895 0 01-.17-.039 4.26 4.26 0 01-.622-.234c-.102-.045-.205-.09-.314-.133l-.032-.011c-.676-.246-1.24-.451-1.788-.532-.244-.02-.385.08-.52.175l-.064.045a15.51 15.51 0 00-.446-.08c-1 3.19-3.13 5.953-6.017 7.683.016.039.036.092.056.148.043.119.091.248.118.28l-.029.074c-.06.154-.124.313-.051.55.202.534.53 1.055.925 1.682.066.1.131.19.197.281.126.174.25.345.363.563a5.468 5.468 0 01.136.286c.268.582.071 1.253-.444 1.505-.52.254-1.165-.014-1.443-.6a8.499 8.499 0 00-.039-.08c-.032-.066-.066-.137-.09-.192a4.523 4.523 0 01-.21-.644c-.03-.107-.058-.214-.093-.327l-.01-.029c-.233-.691-.426-1.266-.706-1.752-.138-.207-.303-.257-.461-.306a3.562 3.562 0 01-.072-.022l-.104-.19-.12-.218a13.298 13.298 0 01-9.631-.025l-.236.435c-.176.048-.346.096-.45.222-.267.324-.421.785-.585 1.275-.07.207-.14.42-.223.629-.035.114-.065.223-.094.332-.055.208-.11.413-.207.639a4.149 4.149 0 01-.086.18 8.18 8.18 0 00-.043.089v.002l-.002.002c-.279.584-.923.851-1.441.598-.515-.252-.712-.923-.444-1.505.015-.03.03-.066.047-.103.03-.064.06-.132.087-.182a4.46 4.46 0 01.365-.568c.065-.09.13-.18.195-.279.395-.627.742-1.19.944-1.723.051-.178-.024-.42-.092-.6l.19-.461a13.749 13.749 0 01-6.02-7.628l-.455.08-.046-.028c-.131-.077-.347-.204-.553-.188-.55.08-1.113.286-1.79.532l-.03.011c-.108.042-.21.086-.31.13-.197.086-.39.17-.627.235a3.955 3.955 0 01-.27.06.066.066 0 00-.01.004.088.088 0 01-.01.004c-.004 0-.01 0-.015.002-.62.135-1.22-.209-1.347-.774-.128-.566.268-1.14.883-1.29l.015-.005.005-.001a.68.68 0 01.004-.001l.084-.02c.068-.017.14-.035.195-.046.238-.046.447-.054.66-.062.111-.005.223-.01.341-.02l.024-.002c.72-.076 1.316-.14 1.847-.31.15-.062.296-.255.407-.404.014-.02.028-.038.042-.055l.437-.13a13.871 13.871 0 012.13-9.556l-.335-.303-.008-.05c-.021-.148-.059-.407-.202-.561-.41-.391-.928-.716-1.552-1.107-.102-.06-.2-.114-.298-.167a4.27 4.27 0 01-.567-.347c-.045-.034-.101-.08-.155-.125l-.061-.051a.17.17 0 00-.008-.006l-.008-.006c-.5-.405-.616-1.104-.256-1.561a1 1 0 01.831-.374c.25.009.508.101.727.278l.063.05c.059.047.123.098.17.138.185.162.322.323.462.486.072.084.144.169.224.255l.018.018c.507.523.928.956 1.39 1.272.212.125.382.098.545.072l.074-.011c.06.045.262.192.377.271a13.38 13.38 0 018.706-4.248l.025-.448c.139-.137.294-.333.339-.548.045-.566-.028-1.174-.115-1.907l-.001-.015c-.017-.117-.037-.228-.057-.338a4.482 4.482 0 01-.086-.67 3.557 3.557 0 01.002-.27l-.001-.015-.001-.015z" fill="#000"/></svg>
|
||||||
|
After Width: | Height: | Size: 4.9 KiB |
|
|
@ -1,77 +1,119 @@
|
||||||
import UseCases from '@hashicorp/react-use-cases'
|
import UseCases from '@hashicorp/react-use-cases'
|
||||||
import BasicHero from '../../components/basic-hero'
|
import CtaHero from 'components/cta-hero'
|
||||||
import ConsulEnterpriseComparison from '../../components/enterprise-comparison/consul'
|
import ConsulEnterpriseComparison from '../../components/enterprise-comparison/consul'
|
||||||
import PrefooterCTA from '../../components/prefooter-cta'
|
import PrefooterCTA from '../../components/prefooter-cta'
|
||||||
import LearnCallout from '../../components/learn-callout'
|
import LearnCallout from '../../components/learn-callout'
|
||||||
import CaseStudyCarousel from '../../components/case-study-carousel'
|
import CaseStudyCarousel from '../../components/case-study-carousel'
|
||||||
import ProductFeaturesList from '@hashicorp/react-product-features-list'
|
import ProductFeaturesList from '@hashicorp/react-product-features-list'
|
||||||
import HcpCalloutSection from 'components/hcp-callout-section'
|
import HcpCalloutSection from 'components/hcp-callout-section'
|
||||||
|
import Callouts from '@hashicorp/react-callouts'
|
||||||
import MiniCTA from '../../components/mini-cta'
|
import MiniCTA from '../../components/mini-cta'
|
||||||
|
|
||||||
export default function HomePage() {
|
export default function HomePage() {
|
||||||
return (
|
return (
|
||||||
<div className="p-home">
|
<div className="p-home">
|
||||||
<BasicHero
|
<CtaHero />
|
||||||
brand="consul"
|
<Callouts
|
||||||
heading="Service Networking Across Any Cloud"
|
layout="two-up"
|
||||||
content="Automate network configurations, discover services, and enable secure connectivity across any cloud or runtime."
|
product="neutral"
|
||||||
links={[
|
items={[
|
||||||
{
|
{
|
||||||
text: 'Get Started',
|
icon: require('./img/kubernetes/logo.svg?include'),
|
||||||
url: 'https://learn.hashicorp.com/consul',
|
heading: 'Consul Service Mesh on Kubernetes',
|
||||||
|
content:
|
||||||
|
'Use Helm to deploy and CRDs to configure Consul on Kubernetes.',
|
||||||
|
link: {
|
||||||
|
text: 'Get started',
|
||||||
|
url:
|
||||||
|
'https://learn.hashicorp.com/collections/consul/gs-consul-service-mesh',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: 'Try Cloud',
|
icon: require('./img/kubernetes/communication-arrows.svg?include'),
|
||||||
url:
|
heading: 'Consul as a Service Mesh',
|
||||||
'https://cloud.hashicorp.com/?utm_source=consul_io&utm_content=hero',
|
content:
|
||||||
},
|
'Simplify, observe, and secure service to service communication for microservice architectures.',
|
||||||
{
|
link: {
|
||||||
text: 'Download CLI',
|
text: 'Read more',
|
||||||
url: '/downloads',
|
url: '/docs/connect',
|
||||||
type: 'download',
|
},
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
backgroundImage
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<ProductFeaturesList
|
<ProductFeaturesList
|
||||||
heading="Why Consul?"
|
heading="Why Consul?"
|
||||||
features={[
|
features={[
|
||||||
{
|
|
||||||
title: 'Integrate and Extend With Kubernetes',
|
|
||||||
content:
|
|
||||||
'Quickly deploy Consul on Kubernetes leveraging Helm. Automatically inject sidecars for Kubernetes resources. Federate multiple clusters into a single service mesh.',
|
|
||||||
icon: require('./img/why-consul/kubernetes.svg'),
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: 'Service Mesh Across Any Runtime',
|
title: 'Service Mesh Across Any Runtime',
|
||||||
content:
|
content:
|
||||||
'Deploy service mesh within any runtime or infrastructure - Bare Metal, Virtual Machines, and Kubernetes clusters, across any cloud.',
|
'Deploy service mesh within any runtime or infrastructure - Bare Metal, Virtual Machines, and Kubernetes clusters, across any cloud.',
|
||||||
icon: require('./img/why-consul/service-mesh-runtime.svg'),
|
icon: require('./img/why-consul/service-mesh-runtime.svg'),
|
||||||
},
|
link: {
|
||||||
{
|
type: 'inbound',
|
||||||
title: 'Dynamic Load Balancing',
|
text: 'Learn more',
|
||||||
content:
|
url:
|
||||||
'Resolve discovered services through integrated DNS. Automate 3rd party load balancers (F5, NGINX, HAProxy). Eliminate manual configuration of network devices.',
|
'https://learn.hashicorp.com/collections/consul/developer-mesh',
|
||||||
icon: require('./img/why-consul/dynamic-load-balancing.svg'),
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Secure, Multi-Cloud Service Networking',
|
title: 'Secure, Multi-Cloud Service Networking',
|
||||||
content:
|
content:
|
||||||
'Secure services running in any environment leveraging intention based policies and automatic mTLS encryption between service mesh resources',
|
'Secure services running in any environment leveraging intention based policies and automatic mTLS encryption between service mesh resources',
|
||||||
icon: require('./img/why-consul/cloud.svg'),
|
icon: require('./img/why-consul/cloud.svg'),
|
||||||
|
link: {
|
||||||
|
type: 'inbound',
|
||||||
|
text: 'Learn more',
|
||||||
|
url:
|
||||||
|
'https://learn.hashicorp.com/tutorials/consul/service-mesh-application-secure-networking',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Dynamic Load Balancing',
|
||||||
|
content:
|
||||||
|
'Resolve discovered services through integrated DNS. Automate 3rd party load balancers (F5, NGINX, HAProxy). Eliminate manual configuration of network devices.',
|
||||||
|
icon: require('./img/why-consul/dynamic-load-balancing.svg'),
|
||||||
|
link: {
|
||||||
|
type: 'inbound',
|
||||||
|
text: 'Learn more',
|
||||||
|
url:
|
||||||
|
'https://learn.hashicorp.com/collections/consul/load-balancing',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Service Discovery with Health Checking',
|
title: 'Service Discovery with Health Checking',
|
||||||
content:
|
content:
|
||||||
'Consul enables detecting the deployment of new services, changes to existing ones, and provides real time agent health to reduce downtime.',
|
'Consul enables detecting the deployment of new services, changes to existing ones, and provides real time agent health to reduce downtime.',
|
||||||
icon: require('./img/why-consul/health.svg'),
|
icon: require('./img/why-consul/health.svg'),
|
||||||
|
link: {
|
||||||
|
type: 'inbound',
|
||||||
|
text: 'Learn more',
|
||||||
|
url:
|
||||||
|
'https://learn.hashicorp.com/tutorials/cloud/get-started-service-discovery',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Robust Ecosystem',
|
title: 'Robust Ecosystem',
|
||||||
content:
|
content:
|
||||||
'Consul offers support for and integrations with many popular DevOps and Networking tools.',
|
'Consul offers support for and integrations with many popular DevOps and Networking tools.',
|
||||||
icon: require('./img/why-consul/world.svg'),
|
icon: require('./img/why-consul/world.svg'),
|
||||||
|
link: {
|
||||||
|
type: 'inbound',
|
||||||
|
text: 'Learn more',
|
||||||
|
url: '/docs/integrate/partnerships',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Integrate and Extend With Kubernetes',
|
||||||
|
content:
|
||||||
|
'Quickly deploy Consul on Kubernetes leveraging Helm. Automatically inject sidecars for Kubernetes resources. Federate multiple clusters into a single service mesh.',
|
||||||
|
icon: require('./img/why-consul/kubernetes.svg'),
|
||||||
|
link: {
|
||||||
|
type: 'inbound',
|
||||||
|
text: 'Learn more',
|
||||||
|
url:
|
||||||
|
'https://learn.hashicorp.com/collections/consul/gs-consul-service-mesh',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
|
|
@ -92,7 +134,8 @@ export default function HomePage() {
|
||||||
title: 'Migrate to Microservices on Kubernetes',
|
title: 'Migrate to Microservices on Kubernetes',
|
||||||
category: 'Step-by-Step Tutorials',
|
category: 'Step-by-Step Tutorials',
|
||||||
time: '45 mins',
|
time: '45 mins',
|
||||||
link: 'https://learn.hashicorp.com/collections/consul/microservices',
|
link:
|
||||||
|
'https://learn.hashicorp.com/collections/consul/microservices',
|
||||||
image: require('./img/learn/kubernetes.svg?url'),
|
image: require('./img/learn/kubernetes.svg?url'),
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
|
|
|
||||||
|
|
@ -43,4 +43,23 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
& .g-callouts {
|
||||||
|
& > .g-grid-container > .items.layout-two-up > .callout-item-wrapper {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .callout-item.layout-two-up {
|
||||||
|
padding: 70px;
|
||||||
|
|
||||||
|
&.theme-light {
|
||||||
|
background-color: #f2f2f3;
|
||||||
|
transition: filter 0.25s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
filter: brightness(97%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,7 @@
|
||||||
|
|
||||||
@import '~@hashicorp/react-alert-banner/style.css';
|
@import '~@hashicorp/react-alert-banner/style.css';
|
||||||
@import '~@hashicorp/react-button/styles/index.css';
|
@import '~@hashicorp/react-button/styles/index.css';
|
||||||
|
@import '~@hashicorp/react-callouts/style.css';
|
||||||
@import '~@hashicorp/react-call-to-action/style.css';
|
@import '~@hashicorp/react-call-to-action/style.css';
|
||||||
@import '~@hashicorp/react-code-block/style.css';
|
@import '~@hashicorp/react-code-block/style.css';
|
||||||
@import '~@hashicorp/react-consent-manager/style.css';
|
@import '~@hashicorp/react-consent-manager/style.css';
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue