mirror of https://github.com/hashicorp/consul
Brandon Romano
5 years ago
committed by
GitHub
75 changed files with 2333 additions and 1988 deletions
@ -0,0 +1,40 @@
|
||||
import Button from '@hashicorp/react-button' |
||||
|
||||
export default function BasicHero({ |
||||
heading, |
||||
content, |
||||
links, |
||||
brand, |
||||
backgroundImage, |
||||
}) { |
||||
return ( |
||||
<div className={`g-basic-hero ${backgroundImage ? 'has-background' : ''}`}> |
||||
<div className="g-grid-container"> |
||||
<h1 className="g-type-display-1">{heading}</h1> |
||||
{content && <p className="g-type-body-large">{content}</p>} |
||||
{links && links.length > 0 && ( |
||||
<div className="links"> |
||||
{links.map((link, stableIdx) => { |
||||
const buttonVariant = stableIdx === 0 ? 'primary' : 'secondary' |
||||
const linkType = link.type || 'inbound' |
||||
return ( |
||||
<Button |
||||
// eslint-disable-next-line react/no-array-index-key |
||||
key={stableIdx} |
||||
linkType={linkType} |
||||
theme={{ |
||||
variant: buttonVariant, |
||||
brand, |
||||
background: 'light', |
||||
}} |
||||
title={link.text} |
||||
url={link.url} |
||||
/> |
||||
) |
||||
})} |
||||
</div> |
||||
)} |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
@ -0,0 +1,63 @@
|
||||
.g-basic-hero { |
||||
padding: 88px 0; |
||||
|
||||
& .g-type-display-1 { |
||||
color: var(--gray-1); |
||||
text-align: center; |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
margin-top: 0; |
||||
max-width: 14em; |
||||
} |
||||
|
||||
& .g-type-body-large { |
||||
color: var(--gray-3); |
||||
margin: 0 auto 0 auto; |
||||
text-align: center; |
||||
max-width: 40em; |
||||
} |
||||
|
||||
& .links { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
justify-content: center; |
||||
/* |
||||
* Margins here compensate for extra 8px margin on buttons |
||||
* which are needed to center and space properly regardless of whether |
||||
* buttons are wrapping to multiple lines or not. |
||||
*/ |
||||
margin-top: calc(32px - 8px); |
||||
margin-bottom: -8px; |
||||
@media (--large) { |
||||
margin-top: calc(40px - 8px); |
||||
} |
||||
|
||||
& .g-btn { |
||||
/* |
||||
* This ensures 16px between buttons at all times, while maintaining proper centering |
||||
* when buttons wrap to multiple lines. |
||||
* There will be an extra 8px space on all sides of the button group. |
||||
* The top and bottom are accounted for by the -8px adjustment on `.action` margins. |
||||
* The left and right excess is left as is - it's needed for proper centering when wrapping. |
||||
*/ |
||||
margin: 8px; |
||||
} |
||||
} |
||||
|
||||
&.has-background { |
||||
background-repeat: no-repeat; |
||||
background-color: var(--gray-7); |
||||
background-image: url(/img/hero/pattern-desktop.svg); |
||||
width: 100%; |
||||
background-size: cover; |
||||
background-position: center; |
||||
|
||||
@media (max-width: 800px) { |
||||
background-image: url(/img/hero/pattern-mobile.svg); |
||||
} |
||||
|
||||
& .g-btn { |
||||
background: var(--gray-7); |
||||
} |
||||
} |
||||
} |
||||
@ -1,55 +0,0 @@
|
||||
function BeforeAfterDiagram({ |
||||
beforeHeading, |
||||
beforeSubTitle, |
||||
beforeImage, |
||||
beforeDescription, |
||||
afterHeading, |
||||
afterSubTitle, |
||||
afterImage, |
||||
afterDescription, |
||||
}) { |
||||
return ( |
||||
<div className="g-timeline"> |
||||
<div> |
||||
<span className="line"></span> |
||||
<span className="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 className="dot"></span> |
||||
<h3>{beforeHeading}</h3> |
||||
<span className="sub-heading">{beforeSubTitle}</span> |
||||
<img |
||||
src={beforeImage} |
||||
alt={beforeSubTitle} |
||||
className="static-callout" |
||||
/> |
||||
{beforeDescription && <p>{beforeDescription}</p>} |
||||
</div> |
||||
<div> |
||||
<span className="dot"></span> |
||||
<h3>{afterHeading}</h3> |
||||
<span className="sub-heading">{afterSubTitle}</span> |
||||
<div id="index-dynamic-animation"> |
||||
<img |
||||
src={afterImage} |
||||
alt={afterSubTitle} |
||||
className="static-callout" |
||||
/> |
||||
</div> |
||||
{afterDescription && <p>{afterDescription}</p>} |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
export default BeforeAfterDiagram |
||||
@ -1,146 +0,0 @@
|
||||
.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; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,44 @@
|
||||
import InlineSvg from '@hashicorp/react-inline-svg' |
||||
import Image from '@hashicorp/react-image' |
||||
import Button from '@hashicorp/react-button' |
||||
import QuoteMarksIcon from './img/quote.svg?include' |
||||
|
||||
export default function CaseStudySlide({ |
||||
caseStudy: { person, quote, company, caseStudyURL }, |
||||
}) { |
||||
return ( |
||||
<blockquote className="g-grid-container case-slide"> |
||||
<InlineSvg className="quotes" src={QuoteMarksIcon} /> |
||||
<h4 className="case g-type-display-4">{quote}</h4> |
||||
<div className="case-content"> |
||||
<div className="person-container"> |
||||
<Image |
||||
className="person-photo" |
||||
url={person.photo} |
||||
aspectRatio={[1, 1]} |
||||
alt={`${person.firstName} ${person.lastName}`} |
||||
/> |
||||
<div className="person-name"> |
||||
<h5 className="g-type-display-5"> |
||||
{person.firstName} {person.lastName} |
||||
</h5> |
||||
<p> |
||||
{person.title}, {company.name} |
||||
</p> |
||||
</div> |
||||
</div> |
||||
<Image className="company-logo" url={company.logo} alt={company.name} /> |
||||
</div> |
||||
<Button |
||||
title="Read more" |
||||
url={caseStudyURL} |
||||
theme={{ |
||||
variant: 'tertiary', |
||||
brand: 'consul', |
||||
background: 'light', |
||||
}} |
||||
linkType="outbound" |
||||
/> |
||||
</blockquote> |
||||
) |
||||
} |
||||
|
After Width: | Height: | Size: 139 B |
|
After Width: | Height: | Size: 142 B |
|
After Width: | Height: | Size: 342 B |
|
After Width: | Height: | Size: 214 B |
|
After Width: | Height: | Size: 344 B |
@ -0,0 +1,99 @@
|
||||
import { useState } from 'react' |
||||
import { isIE } from 'react-device-detect' |
||||
|
||||
import Carousel from 'nuka-carousel' |
||||
import CaseSlide from './case-study-slide' |
||||
import Image from '@hashicorp/react-image' |
||||
import InlineSvg from '@hashicorp/react-inline-svg' |
||||
import ActiveControlDot from './img/active-control-dot.svg?include' |
||||
import InactiveControlDot from './img/inactive-control-dot.svg?include' |
||||
import LeftArrow from './img/left-arrow-control.svg?include' |
||||
import RightArrow from './img/right-arrow-control.svg?include' |
||||
|
||||
export default function CaseStudyCarousel({ |
||||
caseStudies, |
||||
title, |
||||
logoSection = { grayBackground: false, featuredLogos: [] }, |
||||
}) { |
||||
const [slideIndex, setSlideIndex] = useState(0) |
||||
const { grayBackground, featuredLogos } = logoSection |
||||
|
||||
const caseStudySlides = caseStudies.map((caseStudy) => ( |
||||
<CaseSlide key={caseStudy.quote} caseStudy={caseStudy} /> |
||||
)) |
||||
const logoRows = featuredLogos && Math.ceil(featuredLogos.length / 3) |
||||
|
||||
function renderControls() { |
||||
return ( |
||||
<div className="carousel-controls"> |
||||
{caseStudies.map((caseStudy, stableIdx) => { |
||||
return ( |
||||
<button |
||||
key={caseStudy.quote} |
||||
className="carousel-controls-button" |
||||
onClick={() => setSlideIndex(stableIdx)} |
||||
> |
||||
<InlineSvg |
||||
src={ |
||||
slideIndex === stableIdx |
||||
? ActiveControlDot |
||||
: InactiveControlDot |
||||
} |
||||
/> |
||||
</button> |
||||
) |
||||
})} |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
function sideControls(icon, direction) { |
||||
return ( |
||||
<button className="side-control" onClick={direction}> |
||||
<InlineSvg src={icon} /> |
||||
</button> |
||||
) |
||||
} |
||||
|
||||
return ( |
||||
<section |
||||
className={`g-case-carousel ${grayBackground ? 'has-background' : ''}`} |
||||
style={{ '--background-height': `${300 + logoRows * 100}px` }} |
||||
> |
||||
<h2 className="g-type-display-2">{title}</h2> |
||||
{!isIE ? ( |
||||
<Carousel |
||||
cellAlign="left" |
||||
wrapAround={true} |
||||
heightMode="current" |
||||
slideIndex={slideIndex} |
||||
slidesToShow={1} |
||||
autoGenerateStyleTag |
||||
renderBottomCenterControls={() => renderControls()} |
||||
renderCenterLeftControls={({ previousSlide }) => { |
||||
return sideControls(LeftArrow, previousSlide) |
||||
}} |
||||
renderCenterRightControls={({ nextSlide }) => { |
||||
return sideControls(RightArrow, nextSlide) |
||||
}} |
||||
afterSlide={(slideIndex) => setSlideIndex(slideIndex)} |
||||
> |
||||
{caseStudySlides} |
||||
</Carousel> |
||||
) : null} |
||||
<div className="background-section"> |
||||
{featuredLogos && featuredLogos.length > 0 && ( |
||||
<div className="mono-logos"> |
||||
{featuredLogos.map((featuredLogo) => ( |
||||
<Image |
||||
key={featuredLogo.url} |
||||
url={featuredLogo.url} |
||||
alt={featuredLogo.companyName} |
||||
/> |
||||
))} |
||||
</div> |
||||
)} |
||||
</div> |
||||
</section> |
||||
) |
||||
} |
||||
@ -0,0 +1,277 @@
|
||||
.g-case-carousel { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
position: relative; |
||||
padding-top: 128px; |
||||
|
||||
& h2 { |
||||
margin-bottom: 30px; |
||||
max-width: 600px; |
||||
text-align: center; |
||||
white-space: pre-wrap; |
||||
|
||||
@media (max-width: 800px) { |
||||
margin-top: 64px; |
||||
white-space: initial; |
||||
margin-left: 24px; |
||||
margin-right: 24px; |
||||
} |
||||
} |
||||
|
||||
&::after { |
||||
content: ''; |
||||
width: 100%; |
||||
height: var(--background-height); |
||||
position: absolute; |
||||
bottom: 0px; |
||||
z-index: -1; |
||||
} |
||||
|
||||
&.has-background { |
||||
&::after { |
||||
content: ''; |
||||
background: var(--gray-7); |
||||
} |
||||
|
||||
& .background-section { |
||||
background: var(--gray-7); |
||||
} |
||||
} |
||||
|
||||
& .background-section { |
||||
width: 100%; |
||||
|
||||
& .mono-logos { |
||||
align-items: baseline; |
||||
display: flex; |
||||
justify-content: center; |
||||
max-width: 750px; |
||||
margin: 0 auto; |
||||
margin-top: 70px; |
||||
flex-wrap: wrap; |
||||
|
||||
& > img { |
||||
height: 100%; |
||||
max-height: 40px; |
||||
width: 33.33%; |
||||
padding: 0 30px; |
||||
margin: 24px 0px; |
||||
|
||||
@media (max-width: 800px) { |
||||
padding: 0 20px; |
||||
max-height: 28px; |
||||
} |
||||
} |
||||
|
||||
& > picture { |
||||
max-height: 40px; |
||||
width: 33.33%; |
||||
padding: 0 30px; |
||||
margin: 24px 0px; |
||||
|
||||
@media (max-width: 800px) { |
||||
padding: 0 20px; |
||||
max-height: 28px; |
||||
} |
||||
|
||||
& > img { |
||||
width: 100%; |
||||
height: auto; |
||||
display: flex; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
& .slider-control-bottomcenter { |
||||
bottom: -35px !important; |
||||
} |
||||
|
||||
/* Begin `nuka-carousel` styles */ |
||||
& .slider { |
||||
max-width: 1200px; |
||||
|
||||
&:focus { |
||||
outline: none !important; |
||||
} |
||||
|
||||
@media (max-width: 800px) { |
||||
width: calc(100% - 48px) !important; |
||||
} |
||||
|
||||
& .slider-list { |
||||
margin-bottom: 50px !important; |
||||
|
||||
@media (max-width: 800px) { |
||||
margin-bottom: 30px !important; |
||||
} |
||||
} |
||||
|
||||
& .slider-frame:focus { |
||||
outline: none !important; |
||||
} |
||||
|
||||
& .slider-slide:focus { |
||||
outline: none !important; |
||||
} |
||||
} |
||||
/* End `nuka-carousel` styles */ |
||||
|
||||
& .side-control { |
||||
border: none; |
||||
background: none; |
||||
margin: 20px; |
||||
|
||||
&:focus { |
||||
outline: none; |
||||
} |
||||
|
||||
&:hover:not([disabled]) { |
||||
cursor: pointer; |
||||
} |
||||
|
||||
@media (max-width: 991px) { |
||||
display: none; |
||||
} |
||||
|
||||
& svg path { |
||||
stroke: var(--gray-2); |
||||
} |
||||
|
||||
&:disabled svg path { |
||||
stroke: var(--gray-5); |
||||
} |
||||
} |
||||
|
||||
& .case-slide { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
width: 100%; |
||||
background: var(--white); |
||||
padding: 64px; |
||||
box-shadow: 0px 8px 22px #dedede; |
||||
|
||||
@media (max-width: 800px) { |
||||
box-shadow: none; |
||||
border: 1px solid var(--gray-6); |
||||
padding: 48px; |
||||
} |
||||
|
||||
@media (--medium-up) { |
||||
max-width: 750px; |
||||
} |
||||
|
||||
& button { |
||||
margin-top: 24px; |
||||
} |
||||
|
||||
& .quotes { |
||||
display: flex; |
||||
margin-bottom: 24px; |
||||
} |
||||
|
||||
& h4 { |
||||
margin: 0; |
||||
|
||||
&.case { |
||||
min-height: 130px; |
||||
margin-bottom: 24px; |
||||
color: var(--gray-2); |
||||
|
||||
@media (max-width: 800px) { |
||||
min-height: 155px; |
||||
font-size: 22px; |
||||
} |
||||
|
||||
@media (max-width: 650px) { |
||||
min-height: 190px; |
||||
} |
||||
|
||||
@media (max-width: 550px) { |
||||
font-size: 20px; |
||||
} |
||||
|
||||
@media (max-width: 400px) { |
||||
font-size: 18px; |
||||
line-height: 28px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
& p { |
||||
margin: 0; |
||||
} |
||||
|
||||
& a { |
||||
margin-top: 24px; |
||||
} |
||||
|
||||
& .case-content { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
width: 100%; |
||||
align-items: center; |
||||
} |
||||
|
||||
& .person-container { |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
& picture { |
||||
display: flex; |
||||
} |
||||
|
||||
& .person-photo { |
||||
border-radius: 50%; |
||||
max-height: 72px; |
||||
margin-right: 24px; |
||||
} |
||||
|
||||
& .person-name { |
||||
& h5 { |
||||
margin: 0; |
||||
} |
||||
|
||||
@media (max-width: 400px) { |
||||
& h5 { |
||||
font-size: 16px; |
||||
} |
||||
& p { |
||||
font-size: 15px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
& .company-logo { |
||||
max-height: 40px; |
||||
max-width: 180px; |
||||
|
||||
@media (max-width: 800px) { |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
& .case { |
||||
color: var(--gray-5); |
||||
font-size: 24px; |
||||
line-height: 31px; /* Called for within the design, no custom property seemed appropriate*/ |
||||
} |
||||
} |
||||
|
||||
& .carousel-controls { |
||||
width: 100%; |
||||
display: flex; |
||||
flex-wrap: nowrap; |
||||
justify-content: center; |
||||
|
||||
& .carousel-controls-button { |
||||
height: 20px; |
||||
background: transparent; |
||||
box-shadow: none; |
||||
cursor: pointer; |
||||
border: none; |
||||
} |
||||
} |
||||
} |
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 472 B |
@ -0,0 +1,34 @@
|
||||
import EnterpriseComparison from '../../enterprise-comparison' |
||||
|
||||
export default function ConsulEnterpriseComparison() { |
||||
return ( |
||||
<EnterpriseComparison |
||||
title="When to consider Consul Enterprise" |
||||
itemOne={{ |
||||
title: 'Technical Complexity', |
||||
label: 'Open Source', |
||||
imageUrl: require('./img/consul-oss.svg?url'), |
||||
description: |
||||
'Consul Open Source enables individuals to discover services and securely manage connections between them across cloud, on-prem, and hybrid environments.', |
||||
link: { |
||||
text: 'View Open Source Features', |
||||
url: 'https://www.hashicorp.com/products/consul/pricing/', |
||||
type: 'outbound', |
||||
}, |
||||
}} |
||||
itemTwo={{ |
||||
title: 'Organizational Complexity', |
||||
label: 'Enterprise', |
||||
imageUrl: require('./img/consul-enterprise.svg?url'), |
||||
description: |
||||
'Consul Enterprise provides the foundation for organizations to build an enterprise-ready service networking environment for multiple teams by enabling governance capabilities.', |
||||
link: { |
||||
text: 'View Enterprise Features', |
||||
url: 'https://www.hashicorp.com/products/consul/pricing/', |
||||
type: 'outbound', |
||||
}, |
||||
}} |
||||
brand="consul" |
||||
/> |
||||
) |
||||
} |
||||
|
After Width: | Height: | Size: 265 B |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
@ -0,0 +1,52 @@
|
||||
import Image from '@hashicorp/react-image' |
||||
import Button from '@hashicorp/react-button' |
||||
import InlineSvg from '@hashicorp/react-inline-svg' |
||||
import ArrowIcon from './img/arrow.svg?include' |
||||
|
||||
export default function EnterpriseComparison({ |
||||
title, |
||||
itemOne, |
||||
itemTwo, |
||||
brand, |
||||
}) { |
||||
return ( |
||||
<div className="g-enterprise-comparison"> |
||||
<div className="g-grid-container"> |
||||
<h2 className="g-type-display-2">{title}</h2> |
||||
|
||||
<div className="content-container"> |
||||
<div className="item"> |
||||
<Image url={itemOne.imageUrl} /> |
||||
<div className="g-type-label-strong">{itemOne.label}</div> |
||||
<h4 className="g-type-display-4">{itemOne.title}</h4> |
||||
|
||||
<p className="g-type-body">{itemOne.description}</p> |
||||
<Button |
||||
url={itemOne.link.url} |
||||
title={itemOne.link.text} |
||||
linkType={itemOne.link.type} |
||||
theme={{ variant: 'tertiary', brand }} |
||||
/> |
||||
</div> |
||||
<div className="spacer"> |
||||
<div className="vertical-spacer"></div> |
||||
<InlineSvg className="arrow" src={ArrowIcon} /> |
||||
</div> |
||||
<div className="item"> |
||||
<Image url={itemTwo.imageUrl} /> |
||||
<div className="g-type-label-strong">{itemTwo.label}</div> |
||||
<h4 className="g-type-display-4">{itemTwo.title}</h4> |
||||
|
||||
<p className="g-type-body">{itemTwo.description}</p> |
||||
<Button |
||||
url={itemTwo.link.url} |
||||
title={itemTwo.link.text} |
||||
linkType={itemTwo.link.type} |
||||
theme={{ variant: 'tertiary', brand }} |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
@ -0,0 +1,92 @@
|
||||
.g-enterprise-comparison { |
||||
padding-top: 128px; |
||||
padding-bottom: 128px; |
||||
background: var(--gray-7); |
||||
|
||||
& h2 { |
||||
text-align: center; |
||||
} |
||||
|
||||
@media (max-width: 800px) { |
||||
padding-top: 64px; |
||||
padding-bottom: 64px; |
||||
} |
||||
|
||||
& .content-container { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
margin: 0 auto 64px auto; |
||||
|
||||
@media (max-width: 800px) { |
||||
flex-wrap: wrap; |
||||
} |
||||
& .item { |
||||
flex-basis: 50%; |
||||
justify-content: center; |
||||
text-align: center; |
||||
margin-top: 64px; |
||||
|
||||
@media (max-width: 800px) { |
||||
margin-top: 64px; |
||||
flex-basis: 100%; |
||||
} |
||||
|
||||
& .g-type-label-strong { |
||||
margin-top: 64px; |
||||
|
||||
@media (max-width: 800px) { |
||||
margin-top: 32px; |
||||
} |
||||
} |
||||
|
||||
& h4 { |
||||
white-space: pre; |
||||
margin-top: 24px; |
||||
margin-bottom: 8px; |
||||
|
||||
@media (max-width: 800px) { |
||||
margin-top: 16px; |
||||
} |
||||
} |
||||
|
||||
& picture { |
||||
display: inline-block; |
||||
} |
||||
|
||||
& img { |
||||
max-width: 160px; |
||||
max-height: 98px; |
||||
} |
||||
& p { |
||||
margin-top: 0; |
||||
margin-bottom: 24px; |
||||
|
||||
@media (max-width: 800px) { |
||||
max-width: 600px; |
||||
margin-right: auto; |
||||
margin-left: auto; |
||||
} |
||||
} |
||||
} |
||||
|
||||
& .spacer { |
||||
& .vertical-spacer { |
||||
height: 93px; |
||||
} |
||||
|
||||
& .arrow { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
@media (max-width: 800px) { |
||||
display: none; |
||||
} |
||||
} |
||||
} |
||||
|
||||
& .more-features-link { |
||||
display: flex; |
||||
justify-content: center; |
||||
} |
||||
} |
||||
@ -0,0 +1,57 @@
|
||||
import Button from '@hashicorp/react-button' |
||||
|
||||
export default function LearnNomad({ headline, brand, items }) { |
||||
return ( |
||||
<div className={`g-learn-callout brand-${brand ? brand : 'neutral'}`}> |
||||
<div className="g-grid-container learn-container"> |
||||
<div className="column-container"> |
||||
{/* need this wrapper to flex center the .column-content */} |
||||
<div> |
||||
<div className="column-content"> |
||||
<h2 className="g-type-display-2">{headline}</h2> |
||||
<Button |
||||
className="desktop-button" |
||||
title="Explore HashiCorp Learn" |
||||
url={`https://learn.hashicorp.com/${brand}`} |
||||
linkType="outbound" |
||||
theme={{ variant: 'primary', brand }} |
||||
/> |
||||
</div> |
||||
</div> |
||||
{items.map((item) => { |
||||
return ( |
||||
<a |
||||
key={item.title} |
||||
href={item.link} |
||||
target="_blank" |
||||
rel="noopener noreferrer" |
||||
> |
||||
<div className="course"> |
||||
<div className="image"> |
||||
<div className="g-type-label-strong time">{item.time}</div> |
||||
<img src={item.image} alt={item.title} /> |
||||
</div> |
||||
<div className="content"> |
||||
<div> |
||||
<label className="g-type-label-strong category"> |
||||
{item.category} |
||||
</label> |
||||
<h4 className="g-type-display-4">{item.title}</h4> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</a> |
||||
) |
||||
})} |
||||
</div> |
||||
<Button |
||||
className="mobile-button" |
||||
title="Explore HashiCorp Learn" |
||||
url={`https://learn.hashicorp.com/${brand}`} |
||||
linkType="outbound" |
||||
theme={{ variant: 'primary', brand }} |
||||
/> |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
@ -0,0 +1,174 @@
|
||||
.g-learn-callout { |
||||
padding-top: 88px; |
||||
padding-bottom: 88px; |
||||
background-image: url(/img/nomad-panel-learn.svg); |
||||
background-size: contain; |
||||
background-position: bottom right; |
||||
background-repeat: no-repeat; |
||||
|
||||
@media (max-width: 768px) { |
||||
padding-top: 64px; |
||||
padding-bottom: 64px; |
||||
} |
||||
|
||||
& .learn-container { |
||||
@media (max-width: 1200px) { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
justify-content: center; |
||||
} |
||||
& .mobile-button { |
||||
@media (min-width: 1201px) { |
||||
display: none; |
||||
} |
||||
} |
||||
} |
||||
|
||||
& .column-container { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
margin: 0 36px; |
||||
|
||||
@media (max-width: 1200px) { |
||||
margin: 0 -16px; |
||||
flex-wrap: wrap; |
||||
} |
||||
|
||||
& .column-content { |
||||
& h2 { |
||||
@media (max-width: 1200px) { |
||||
margin: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
& .desktop-button { |
||||
@media (max-width: 1200px) { |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
& > div { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
align-items: center; |
||||
margin: 0 16px; |
||||
width: 33.333%; |
||||
overflow: auto; |
||||
|
||||
@media (max-width: 1200px) { |
||||
text-align: center; |
||||
display: block; |
||||
width: 100%; |
||||
margin: 0; |
||||
margin-bottom: 48px; |
||||
} |
||||
} |
||||
|
||||
& > a { |
||||
margin: 0 16px; |
||||
width: 33.333%; |
||||
transition: box-shadow 0.25s, transform 0.25s, -webkit-transform 0.25s; |
||||
|
||||
&:hover { |
||||
box-shadow: 0px 16px 28px rgba(37, 38, 45, 0.12); |
||||
transform: translateY(-4px); |
||||
} |
||||
|
||||
@media (max-width: 1200px) { |
||||
width: calc(50% - 32px); |
||||
margin-bottom: 48px; |
||||
} |
||||
|
||||
@media (max-width: 768px) { |
||||
width: 100%; |
||||
|
||||
&:last-child { |
||||
margin-bottom: 48px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
& > a { |
||||
display: flex; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
& > a .course { |
||||
border: 1px solid var(--gray-6); |
||||
display: flex; |
||||
flex-direction: column; |
||||
width: 100%; |
||||
|
||||
& > div { |
||||
min-height: 200px; |
||||
padding: 25px; |
||||
} |
||||
|
||||
& .image { |
||||
background: var(--gray-7); |
||||
position: relative; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
& img { |
||||
max-width: 80px; |
||||
max-height: 80px; |
||||
} |
||||
} |
||||
|
||||
& h4 { |
||||
color: var(--gray-2); |
||||
} |
||||
|
||||
& .time { |
||||
color: var(--gray-4); |
||||
position: absolute; |
||||
top: 10px; |
||||
right: 10px; |
||||
} |
||||
|
||||
& .content { |
||||
text-align: center; |
||||
background: #fff; |
||||
@media (max-width: 768px) { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
|
||||
& h4 { |
||||
margin: 24px 0px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
&.brand-consul { |
||||
& .content label { |
||||
color: var(--consul); |
||||
} |
||||
} |
||||
|
||||
/* Brand -- Nomad */ |
||||
&.brand-nomad { |
||||
& .content label { |
||||
color: var(--nomad); |
||||
} |
||||
} |
||||
|
||||
/* Brand -- Packer */ |
||||
&.brand-packer { |
||||
& .content label { |
||||
color: var(--packer); |
||||
} |
||||
} |
||||
|
||||
/* Brand -- Terraform */ |
||||
&.brand-terraform { |
||||
& .content label { |
||||
color: var(--terraform); |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,25 @@
|
||||
import CallToAction from '@hashicorp/react-call-to-action' |
||||
|
||||
export default function PrefooterCTA() { |
||||
return ( |
||||
<CallToAction |
||||
heading="Ready to get started?" |
||||
content="Consul Open Source addresses the technical complexity of managing production services by providing a way to discover, automate, secure and connect applications and networking configurations across distributed infrastructure and clouds." |
||||
brand="consul" |
||||
links={[ |
||||
{ |
||||
text: 'Explore HashiCorp Learn', |
||||
url: 'https://learn.hashicorp.com/consul', |
||||
type: 'outbound', |
||||
}, |
||||
{ |
||||
text: 'Explore Documentation', |
||||
url: '/docs', |
||||
type: 'inbound', |
||||
}, |
||||
]} |
||||
variant="compact" |
||||
theme="light" |
||||
/> |
||||
) |
||||
} |
||||
@ -0,0 +1,42 @@
|
||||
import BasicHero from '../../components/basic-hero' |
||||
import PrefooterCTA from '../../components/prefooter-cta' |
||||
import ConsulEnterpriseComparison from '../../components/enterprise-comparison/consul' |
||||
import Head from 'next/head' |
||||
import HashiHead from '@hashicorp/react-head' |
||||
|
||||
export default function UseCaseLayout({ title, description, children }) { |
||||
const pageTitle = `Consul ${title}` |
||||
return ( |
||||
<> |
||||
<HashiHead is={Head} title={pageTitle} description={description}> |
||||
<meta name="og:title" property="og:title" content={pageTitle} /> |
||||
</HashiHead> |
||||
|
||||
<div id="p-use-case"> |
||||
<BasicHero |
||||
heading={title} |
||||
content={description} |
||||
brand="consul" |
||||
links={[ |
||||
{ |
||||
text: 'Explore HashiCorp Learn', |
||||
url: 'https://learn.hashicorp.com/consul', |
||||
type: 'outbound', |
||||
}, |
||||
{ |
||||
text: 'Explore Documentation', |
||||
url: '/docs', |
||||
type: 'inbound', |
||||
}, |
||||
]} |
||||
/> |
||||
<div className="g-grid-container"> |
||||
<h2 className="g-type-display-2 features-header">Features</h2> |
||||
</div> |
||||
{children} |
||||
<ConsulEnterpriseComparison /> |
||||
<PrefooterCTA /> |
||||
</div> |
||||
</> |
||||
) |
||||
} |
||||
@ -0,0 +1,40 @@
|
||||
#p-use-case { |
||||
& .features-header { |
||||
text-align: center; |
||||
margin-bottom: 0px; |
||||
} |
||||
|
||||
/* Overriding the g-text-split component to have |
||||
* a header size closer to a h3 than a h2, as within |
||||
* the context of this page this text-split is more deeply |
||||
* nested within the page than we normally have it. |
||||
* */ |
||||
& .g-text-split { |
||||
& h2 { |
||||
font-size: 1.5rem; |
||||
letter-spacing: -0.004em; |
||||
line-height: 1.375em; |
||||
|
||||
@media (--medium-up) { |
||||
font-size: 1.75rem; |
||||
line-height: 1.321em; |
||||
} |
||||
|
||||
@media (--large) { |
||||
font-size: 2rem; |
||||
letter-spacing: -0.006em; |
||||
line-height: 1.313em; |
||||
} |
||||
} |
||||
} |
||||
|
||||
& .with-border { |
||||
& .g-text-split { |
||||
& .children { |
||||
border-width: 1px; |
||||
border-color: rgba(174, 176, 183, 0.45); |
||||
border-style: solid; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -1,499 +0,0 @@
|
||||
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 ( |
||||
<> |
||||
<div className="consul-connect"> |
||||
<CallToAction |
||||
heading="Service discovery made easy" |
||||
content="Service registry, integrated health checks, and DNS and HTTP interfaces enable any service to discover and be discovered by other services" |
||||
brand="consul" |
||||
links={[ |
||||
{ text: 'Download', url: '/downloads' }, |
||||
{ |
||||
text: 'Explore Docs', |
||||
url: |
||||
'https://learn.hashicorp.com/consul/getting-started/services', |
||||
}, |
||||
]} |
||||
/> |
||||
<section |
||||
id="static-dynamic" |
||||
className="g-section-block layout-vertical theme-white-background-black-text small-padding" |
||||
> |
||||
<div className="g-grid-container"> |
||||
<BeforeAfterDiagram |
||||
beforeHeading="The Challenge" |
||||
beforeSubTitle="Service load balancers aren't efficient in a dynamic world." |
||||
beforeImage="/img/consul-connect/svgs/discovery-challenge.svg" |
||||
beforeDescription="Load balancers are often used to front a service tier and provide a static IP. These load balancers add cost, increase latency, introduce single points of failure, and must be updated as services scale up/down." |
||||
afterHeading="The Solution" |
||||
afterSubTitle="Service discovery for dynamic infrastructure." |
||||
afterImage="/img/consul-connect/svgs/discovery-solution.svg" |
||||
afterDescription="Instead of load balancers, connectivity in dynamic infrastructure is best solved with service discovery. Service discovery uses a registry to keep a real-time list of services, their location, and their health. Services query the registry to discover the location of upstream services and then connect directly. This allows services to scale up/down and gracefully handle failure without a load balancer intermediary." |
||||
/> |
||||
</div> |
||||
</section> |
||||
<section></section> |
||||
|
||||
<section class="g-section border-top large-padding"> |
||||
<div class="g-container"> |
||||
<div class="intro"> |
||||
<h2 class="g-type-display-2">Features</h2> |
||||
</div> |
||||
<div class="g-text-asset large"> |
||||
<div> |
||||
<div> |
||||
<h3 class="g-type-display-3">Service Registry</h3> |
||||
<p class="g-type-body"> |
||||
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. |
||||
</p> |
||||
<p> |
||||
<a |
||||
class="learn-more g-type-buttons-and-standalone-links" |
||||
href="https://learn.hashicorp.com/consul/getting-started/services" |
||||
> |
||||
Learn more |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width="6" |
||||
height="10" |
||||
viewBox="0 0 6 10" |
||||
> |
||||
<g |
||||
fill="none" |
||||
fillRule="evenodd" |
||||
transform="translate(-6 -3)" |
||||
> |
||||
<mask id="a" fill="#fff"> |
||||
<path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z" /> |
||||
</mask> |
||||
<g fill="#1563FF" mask="url(#a)"> |
||||
<path d="M0 0h16v16H0z" /> |
||||
</g> |
||||
</g> |
||||
</svg> |
||||
</a> |
||||
</p> |
||||
</div> |
||||
</div> |
||||
<div> |
||||
<picture> |
||||
<source |
||||
type="image/webp" |
||||
srcSet=" |
||||
/img/consul-connect/ui-health-checks/ui-health-checks_230.webp 230w, |
||||
/img/consul-connect/ui-health-checks/ui-health-checks_690.webp 690w, |
||||
/img/consul-connect/ui-health-checks/ui-health-checks_1290.webp 1290w" |
||||
/> |
||||
<source |
||||
type="image/jpg" |
||||
srcSet=" |
||||
/img/consul-connect/ui-health-checks/ui-health-checks_230.jpg 230w, |
||||
/img/consul-connect/ui-health-checks/ui-health-checks_690.jpg 690w, |
||||
/img/consul-connect/ui-health-checks/ui-health-checks_1290.jpg 1290w" |
||||
/> |
||||
<img |
||||
src="/img/consul-connect/ui-health-checks/ui-health-checks_1290.jpg" |
||||
alt="Service Registry" |
||||
/> |
||||
</picture> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
|
||||
<section class="g-section border-top large-padding"> |
||||
<div class="g-container"> |
||||
<div class="g-text-asset reverse"> |
||||
<div> |
||||
<div> |
||||
<h3 class="g-type-display-3">DNS Query Interface</h3> |
||||
<p class="g-type-body"> |
||||
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. |
||||
</p> |
||||
<p> |
||||
<a |
||||
class="learn-more g-type-buttons-and-standalone-links" |
||||
href="https://learn.hashicorp.com/consul/getting-started/services#querying-services" |
||||
> |
||||
Learn more |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width="6" |
||||
height="10" |
||||
viewBox="0 0 6 10" |
||||
> |
||||
<g |
||||
fill="none" |
||||
fillRule="evenodd" |
||||
transform="translate(-6 -3)" |
||||
> |
||||
<mask id="a" fill="#fff"> |
||||
<path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z" /> |
||||
</mask> |
||||
<g fill="#1563FF" mask="url(#a)"> |
||||
<path d="M0 0h16v16H0z" /> |
||||
</g> |
||||
</g> |
||||
</svg> |
||||
</a> |
||||
</p> |
||||
</div> |
||||
</div> |
||||
<div class="code-sample"> |
||||
<div> |
||||
<span></span> |
||||
<CodeBlock |
||||
prefix="terminal" |
||||
code={` |
||||
$ dig web-frontend.service.consul. ANY |
||||
; <<>> 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 |
||||
`} |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
|
||||
<section class="g-section border-top large-padding"> |
||||
<div class="g-container"> |
||||
<div class="g-text-asset"> |
||||
<div> |
||||
<div> |
||||
<h3 class="g-type-display-3">HTTP API with Edge Triggers</h3> |
||||
<p class="g-type-body"> |
||||
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. |
||||
</p> |
||||
<p> |
||||
<a |
||||
class="learn-more g-type-buttons-and-standalone-links" |
||||
href="https://learn.hashicorp.com/consul/getting-started/services#http-api" |
||||
> |
||||
Learn more |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width="6" |
||||
height="10" |
||||
viewBox="0 0 6 10" |
||||
> |
||||
<g |
||||
fill="none" |
||||
fillRule="evenodd" |
||||
transform="translate(-6 -3)" |
||||
> |
||||
<mask id="a" fill="#fff"> |
||||
<path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z" /> |
||||
</mask> |
||||
<g fill="#1563FF" mask="url(#a)"> |
||||
<path d="M0 0h16v16H0z" /> |
||||
</g> |
||||
</g> |
||||
</svg> |
||||
</a> |
||||
</p> |
||||
</div> |
||||
</div> |
||||
<div class="code-sample"> |
||||
<div> |
||||
<span></span> |
||||
<CodeBlock |
||||
prefix="terminal" |
||||
code={` |
||||
$ curl http://localhost:8500/v1/health/service/web?index=11&wait=30s |
||||
{ |
||||
... |
||||
"Node": "10-0-1-109", |
||||
"CheckID": "service:web", |
||||
"Name": "Service 'web' check", |
||||
"Status": <code class='keyword'>"critical"</code>, |
||||
"ServiceID": "web", |
||||
"ServiceName": "web", |
||||
"CreateIndex": 10, |
||||
"ModifyIndex": 20 |
||||
... |
||||
} |
||||
`} |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
|
||||
<section class="g-section border-top large-padding"> |
||||
<div class="g-container"> |
||||
<div class="g-text-asset reverse"> |
||||
<div> |
||||
<div> |
||||
<h3 class="g-type-display-3">Multi Datacenter</h3> |
||||
<p class="g-type-body"> |
||||
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. |
||||
</p> |
||||
<p> |
||||
<a |
||||
class="learn-more g-type-buttons-and-standalone-links" |
||||
href="https://learn.hashicorp.com/consul/security-networking/datacenters" |
||||
> |
||||
Learn more |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width="6" |
||||
height="10" |
||||
viewBox="0 0 6 10" |
||||
> |
||||
<g |
||||
fill="none" |
||||
fillRule="evenodd" |
||||
transform="translate(-6 -3)" |
||||
> |
||||
<mask id="a" fill="#fff"> |
||||
<path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z" /> |
||||
</mask> |
||||
<g fill="#1563FF" mask="url(#a)"> |
||||
<path d="M0 0h16v16H0z" /> |
||||
</g> |
||||
</g> |
||||
</svg> |
||||
</a> |
||||
</p> |
||||
</div> |
||||
</div> |
||||
<div class="code-sample"> |
||||
<div> |
||||
<span></span> |
||||
<div class="code"> |
||||
<CodeBlock |
||||
prefix="terminal" |
||||
code={` |
||||
$ curl http://localhost:8500/v1/catalog/datacenters |
||||
[ |
||||
"dc1", |
||||
"dc2" |
||||
] |
||||
$ curl http://localhost:8500/v1/catalog/nodes?dc=dc2 |
||||
[ |
||||
{ |
||||
"ID": "7081dcdf-fdc0-0432-f2e8-a357d36084e1", |
||||
"Node": "10-0-1-109", |
||||
"Address": "10.0.1.109", |
||||
"Datacenter": "<code class='keyword'>dc2</code>", |
||||
"TaggedAddresses": { |
||||
"lan": "10.0.1.109", |
||||
"wan": "10.0.1.109" |
||||
}, |
||||
"CreateIndex": 112, |
||||
"ModifyIndex": 125 |
||||
}, |
||||
... |
||||
`} |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
|
||||
<section class="g-section border-top large-padding"> |
||||
<div class="g-container"> |
||||
<div class="g-text-asset large"> |
||||
<div> |
||||
<div> |
||||
<h3 class="g-type-display-3">Health Checks</h3> |
||||
<p class="g-type-body"> |
||||
Pairing service discovery with health checking prevents |
||||
routing requests to unhealthy hosts and enables services to |
||||
easily provide circuit breakers. |
||||
</p> |
||||
<p> |
||||
<a |
||||
class="learn-more g-type-buttons-and-standalone-links" |
||||
href="https://learn.hashicorp.com/consul/getting-started/services" |
||||
> |
||||
Learn more |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width="6" |
||||
height="10" |
||||
viewBox="0 0 6 10" |
||||
> |
||||
<g |
||||
fill="none" |
||||
fillRule="evenodd" |
||||
transform="translate(-6 -3)" |
||||
> |
||||
<mask id="a" fill="#fff"> |
||||
<path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z" /> |
||||
</mask> |
||||
<g fill="#1563FF" mask="url(#a)"> |
||||
<path d="M0 0h16v16H0z" /> |
||||
</g> |
||||
</g> |
||||
</svg> |
||||
</a> |
||||
</p> |
||||
</div> |
||||
</div> |
||||
<div> |
||||
<picture> |
||||
<source |
||||
type="image/webp" |
||||
srcSet=" |
||||
/img/consul-connect/ui-health-checks/ui-health-checks_230.webp 230w, |
||||
/img/consul-connect/ui-health-checks/ui-health-checks_690.webp 690w, |
||||
/img/consul-connect/ui-health-checks/ui-health-checks_1290.webp 1290w" |
||||
/> |
||||
<source |
||||
type="image/jpg" |
||||
srcSet=" |
||||
/img/consul-connect/ui-health-checks/ui-health-checks_230.jpg 230w, |
||||
/img/consul-connect/ui-health-checks/ui-health-checks_690.jpg 690w, |
||||
/img/consul-connect/ui-health-checks/ui-health-checks_1290.jpg 1290w" |
||||
/> |
||||
<img |
||||
src="/img/consul-connect/ui-health-checks/ui-health-checks_1290.jpg" |
||||
alt="Health Checks" |
||||
/> |
||||
</picture> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
<section className="large-padding bg-dark"> |
||||
<div className="g-grid-container"> |
||||
<div class="intro"> |
||||
<h2 class="g-type-display-2">Use Cases</h2> |
||||
</div> |
||||
<CaseStudySlider |
||||
dark |
||||
data={{ |
||||
brand: 'consul', |
||||
caseStudies: [ |
||||
{ |
||||
company: { |
||||
monochromeLogo: { |
||||
url: |
||||
'https://www.datocms-assets.com/2885/1586530899-twitchextrudedwordmarkblackops.png', |
||||
alt: 'Logo dark', |
||||
format: 'png', |
||||
}, |
||||
whiteLogo: { |
||||
url: |
||||
'https://www.datocms-assets.com/2885/1586530633-twitch-wordmark-white.svg', |
||||
alt: 'Logo white', |
||||
format: 'png', |
||||
}, |
||||
}, |
||||
headline: |
||||
'Twitch - Driving Towards a Modern Infrastructure', |
||||
description: |
||||
'In this talk from HashiConf 2015, Tarrant Rollins discusses how Twitch uses HashiCorp Consul to overcome legacy infrastructure and solve complex problems.', |
||||
caseStudyLink: |
||||
'https://www.hashicorp.com/resources/twitch-driving-towards-a-modern-infrastructure', |
||||
caseStudyResource: { |
||||
image: { |
||||
url: |
||||
'/img/consul-connect/case-studies/case-study_01.jpg', |
||||
alt: 'Twitch - Modern Infrastructure', |
||||
format: 'jpg', |
||||
}, |
||||
}, |
||||
buttonLabel: 'Watch Video', |
||||
}, |
||||
{ |
||||
company: { |
||||
monochromeLogo: { |
||||
url: |
||||
'https://www.datocms-assets.com/2885/1522341143-jet-black.svg', |
||||
alt: 'Logo dark', |
||||
format: 'svg', |
||||
}, |
||||
whiteLogo: { |
||||
url: |
||||
'https://www.datocms-assets.com/2885/1522341147-jet-white.svg', |
||||
alt: 'Logo white', |
||||
format: 'svg', |
||||
}, |
||||
}, |
||||
headline: |
||||
'Jet.com - Nomad Auto-Proxy with Consul-Template and NGINX', |
||||
description: |
||||
'Justen Walker explains how Jet.com uses HashiCorp Consul and Nomad to allow hundreds of developers to have self-service access, despite relying on NGINX static configs—and with a remarkably small DevOps team.', |
||||
caseStudyLink: |
||||
'https://www.hashicorp.com/resources/jet-com-nomad-auto-proxy-consul-template-nginx', |
||||
caseStudyResource: { |
||||
image: { |
||||
url: |
||||
'/img/consul-connect/case-studies/case-study_02.jpg', |
||||
alt: 'Jet - Nomad Auto-Proxy', |
||||
format: 'jpg', |
||||
}, |
||||
}, |
||||
buttonLabel: 'Watch Video', |
||||
}, |
||||
], |
||||
}} |
||||
/> |
||||
</div> |
||||
</section> |
||||
|
||||
<section class="g-section g-cta-section large-padding"> |
||||
<div> |
||||
<h2 class="g-type-display-2">Ready to get started?</h2> |
||||
<a href="/downloads.html" class="button download white"> |
||||
<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="https://learn.hashicorp.com/consul/getting-started/services" |
||||
class="button secondary white" |
||||
> |
||||
Explore docs |
||||
</a> |
||||
</div> |
||||
</section> |
||||
</div> |
||||
</> |
||||
) |
||||
} |
||||
@ -1,51 +0,0 @@
|
||||
.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; |
||||
} |
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 60 KiB |
|
After Width: | Height: | Size: 8.9 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 689 B |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
@ -1,309 +1,211 @@
|
||||
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' |
||||
import UseCases from '@hashicorp/react-use-cases' |
||||
import BasicHero from '../../components/basic-hero' |
||||
import ConsulEnterpriseComparison from '../../components/enterprise-comparison/consul' |
||||
import PrefooterCTA from '../../components/prefooter-cta' |
||||
import LearnCallout from '../../components/learn-callout' |
||||
import CaseStudyCarousel from '../../components/case-study-carousel' |
||||
import ProductFeaturesList from '@hashicorp/react-product-features-list' |
||||
|
||||
export default function HomePage() { |
||||
return ( |
||||
<> |
||||
<div className="consul-connect"> |
||||
{/* Hero */} |
||||
<section id="hero"> |
||||
<Hero |
||||
data={{ |
||||
centered: false, |
||||
backgroundTheme: 'light', |
||||
theme: 'consul-pink', |
||||
smallTextTag: null, |
||||
title: 'Secure Service Networking', |
||||
description: |
||||
'Consul is a service networking solution to connect and secure services across any runtime platform and public or private cloud', |
||||
buttons: [ |
||||
{ |
||||
title: 'Download', |
||||
url: '/downloads', |
||||
external: false, |
||||
theme: '', |
||||
}, |
||||
{ |
||||
title: 'Get Started', |
||||
url: |
||||
'https://learn.hashicorp.com/consul/getting-started/install', |
||||
external: false, |
||||
theme: '', |
||||
}, |
||||
], |
||||
helpText: |
||||
'<a href="https://demo.consul.io">View demo of web UI</a>', |
||||
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', |
||||
}, |
||||
], |
||||
}, |
||||
], |
||||
}} |
||||
/> |
||||
</section> |
||||
{/* Use Cases */} |
||||
<section |
||||
id="vault-use-cases" |
||||
className="g-section-block layout-vertical theme-white-background-black-text bg-light large-padding" |
||||
> |
||||
<div className="g-container"> |
||||
<SectionHeader |
||||
headline="What can you do with Consul?" |
||||
description="Consul is a service networking tool that allows you to discover services and secure network traffic." |
||||
/> |
||||
<div className="p-home"> |
||||
<BasicHero |
||||
brand="consul" |
||||
heading="Service Networking Across Any Cloud" |
||||
content="Automate network configurations, discover services, and enable secure connectivity across any cloud or runtime." |
||||
links={[ |
||||
{ |
||||
text: 'Download', |
||||
url: '/downloads', |
||||
type: 'download', |
||||
}, |
||||
{ |
||||
text: 'Get Started', |
||||
url: 'https://learn.hashicorp.com/consul', |
||||
type: 'outbound', |
||||
}, |
||||
]} |
||||
backgroundImage |
||||
/> |
||||
|
||||
<ProductFeaturesList |
||||
heading="Why Consul?" |
||||
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', |
||||
content: |
||||
'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'), |
||||
}, |
||||
{ |
||||
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'), |
||||
}, |
||||
{ |
||||
title: 'Secure, Multi-Cloud Service Networking', |
||||
content: |
||||
'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'), |
||||
}, |
||||
{ |
||||
title: 'Service Discovery with Health Checking', |
||||
content: |
||||
'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'), |
||||
}, |
||||
{ |
||||
title: 'Robust Ecosystem', |
||||
content: |
||||
'Consul offers support for and integrations with many popular DevOps and Networking tools.', |
||||
icon: require('./img/why-consul/world.svg'), |
||||
}, |
||||
]} |
||||
/> |
||||
|
||||
<div className="g-use-cases"> |
||||
<div> |
||||
<div> |
||||
<img |
||||
src="/img/consul-jtbd/kubernetes.png" |
||||
alt="Upgrade services" |
||||
/> |
||||
<h3>Consul-Kubernetes Deployments</h3> |
||||
<p> |
||||
Use Consul service discovery and service mesh features with |
||||
Kubernetes.{' '} |
||||
</p> |
||||
</div> |
||||
<div> |
||||
<a |
||||
href="https://learn.hashicorp.com/consul/kubernetes/minikube?utm_source=consul.io&utm_medium=home-page&utm_content=jtbd&utm_term=jtbd-k8s" |
||||
className="button download" |
||||
> |
||||
Learn more |
||||
</a> |
||||
</div> |
||||
</div> |
||||
<div> |
||||
<div> |
||||
<img |
||||
src="/img/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" |
||||
className="button download" |
||||
> |
||||
Learn more |
||||
</a> |
||||
</div> |
||||
</div> |
||||
<div> |
||||
<div> |
||||
<img |
||||
src="/img/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" |
||||
className="button download" |
||||
> |
||||
Learn more |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
{/* Static => Dynamic (Before & After) */} |
||||
<section |
||||
id="static-dynamic" |
||||
className="g-section-block layout-vertical theme-white-background-black-text large-padding" |
||||
> |
||||
<div className="g-grid-container"> |
||||
<SectionHeader |
||||
headline="Service-based networking for dynamic infrastructure" |
||||
description="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 service identity." |
||||
/> |
||||
<BeforeAfterDiagram |
||||
beforeHeading="Static" |
||||
beforeSubTitle="Host-based networking" |
||||
beforeImage="/img/consul-connect/svgs/static.svg" |
||||
afterHeading="Dynamic" |
||||
afterSubTitle="Service-based networking" |
||||
afterImage="/img/consul-connect/svgs/dynamic.svg" |
||||
/> |
||||
</div> |
||||
</section> |
||||
<section className="g-section bg-light border-top small-padding"> |
||||
<div className="g-container"> |
||||
<div className="g-text-asset"> |
||||
<div> |
||||
<div> |
||||
<h3 className="g-type-display-3">Extend and Integrate</h3> |
||||
<p className="g-type-body"> |
||||
Provision clusters on any infrastructure, connect to |
||||
services over TLS via proxy integrations, and Serve TLS |
||||
certificates with pluggable Certificate Authorities. |
||||
</p> |
||||
</div> |
||||
</div> |
||||
<div> |
||||
<picture> |
||||
<source |
||||
type="image/webp" |
||||
srcSet=" |
||||
/img/consul-connect/grid_2/grid_2_300.webp 300w, |
||||
/img/consul-connect/grid_2/grid_2_704.webp 704w, |
||||
/img/consul-connect/grid_2/grid_2_1256.webp 1256w" |
||||
/> |
||||
<source |
||||
type="image/png" |
||||
srcSet=" |
||||
/img/consul-connect/grid_2/grid_2_300.png 300w, |
||||
/img/consul-connect/grid_2/grid_2_704.png 704w, |
||||
/img/consul-connect/grid_2/grid_2_1256.png 1256w" |
||||
/> |
||||
<img |
||||
src="/img/consul-connect/grid_2/grid_2_1256.png" |
||||
alt="Extend and Integrate" |
||||
/> |
||||
</picture> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
<CaseStudyCarousel |
||||
title="Trusted by startups and the world’s largest organizations" |
||||
caseStudies={[ |
||||
{ |
||||
quote: |
||||
'Consul lets us spread more than 200 microservices over several AKS clusters. Each AKS cluster feeds into a Consul cluster that forms a larger service discovery mesh that allows us to find and connect services in a matter of minutes.', |
||||
caseStudyURL: 'https://www.hashicorp.com/case-studies/mercedes/', |
||||
person: { |
||||
firstName: 'Sriram', |
||||
lastName: 'Govindarajan', |
||||
photo: |
||||
'https://www.datocms-assets.com/2885/1589431834-sriram-govindarajan.jpg', |
||||
title: 'Principal Infrastructure Engineer', |
||||
}, |
||||
company: { |
||||
name: 'Mercedes-Benz Research & Development (MBRDNA)', |
||||
logo: require('./img/quotes/mercedes-logo.svg?url'), |
||||
}, |
||||
}, |
||||
{ |
||||
quote: |
||||
'Consul has fully replaced our manual service discovery activities with automated workflows and we’ve repurposed as much as 80% of our Consul staff to other projects because the tool is so reliable, efficient, and intelligent.', |
||||
caseStudyURL: |
||||
'https://www.hashicorp.com/resources/criteo-containers-consul-connect/', |
||||
person: { |
||||
firstName: 'Pierre', |
||||
lastName: 'Souchay', |
||||
photo: |
||||
'https://www.datocms-assets.com/2885/1589431828-pierre-souchay.jpg', |
||||
title: 'Discovery and Security Authorization Lead', |
||||
}, |
||||
company: { |
||||
name: 'Criteo', |
||||
logo: require('./img/quotes/criteo-logo.svg?url'), |
||||
}, |
||||
}, |
||||
]} |
||||
logoSection={{ |
||||
grayBackground: true, |
||||
featuredLogos: [ |
||||
{ |
||||
companyName: 'Mercedes-Benz Research & Development (MBRDNA)', |
||||
url: require('./img/quotes/mercedes-logo.svg?url'), |
||||
}, |
||||
{ |
||||
companyName: 'Criteo', |
||||
url: require('./img/quotes/criteo-logo.svg?url'), |
||||
}, |
||||
{ |
||||
companyName: 'Barclays', |
||||
url: require('./img/quotes/barclays-logo.svg?url'), |
||||
}, |
||||
{ |
||||
companyName: 'Citadel', |
||||
url: require('./img/quotes/citadel-logo.svg?url'), |
||||
}, |
||||
{ |
||||
companyName: 'Ample Organics', |
||||
url: |
||||
'https://www.datocms-assets.com/2885/1589354369-ample-organics-logo.png?w=600', |
||||
}, |
||||
], |
||||
}} |
||||
/> |
||||
|
||||
{/* Companies Using Consul Logos */} |
||||
<section |
||||
id="companies-using-consul" |
||||
className="g-section-block layout-vertical theme-light-gray large-padding" |
||||
> |
||||
<div className="g-container"> |
||||
<SectionHeader headline="Companies that trust Consul" /> |
||||
<div className="g-logo-grid"> |
||||
<div> |
||||
<img |
||||
src="/img/consul-connect/logos/logo_sap-ariba_space.svg" |
||||
alt="SAP Ariba" |
||||
/> |
||||
</div> |
||||
<div> |
||||
<img |
||||
src="/img/consul-connect/logos/logo_citadel_space.svg" |
||||
alt="Citadel" |
||||
/> |
||||
</div> |
||||
<div> |
||||
<img |
||||
src="/img/consul-connect/logos/logo_barclays_space.svg" |
||||
alt="Barclays" |
||||
/> |
||||
</div> |
||||
<div> |
||||
<img |
||||
src="/img/consul-connect/logos/logo_itv_space.svg" |
||||
alt="itv" |
||||
/> |
||||
</div> |
||||
<div> |
||||
<img |
||||
src="/img/consul-connect/logos/logo_spaceflight-industries_space.svg" |
||||
alt="Spaceflight Industries" |
||||
/> |
||||
</div> |
||||
<div> |
||||
<img |
||||
src="/img/consul-connect/logos/logo_lotto-nz_space.svg" |
||||
alt="MyLotto" |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
<section className="home-cta-section"> |
||||
<div> |
||||
<div> |
||||
<div |
||||
dangerouslySetInnerHTML={{ |
||||
__html: consulLogo, |
||||
}} |
||||
/> |
||||
<p className="g-type-body"> |
||||
Consul Open Source addresses the technical complexity of |
||||
connecting services across distributed infrastructure. |
||||
</p> |
||||
<div> |
||||
<a href="/downloads.html" className="button 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 |
||||
dangerouslySetInnerHTML={{ |
||||
__html: consulEnterpriseLogo, |
||||
}} |
||||
/> |
||||
<p className="g-type-body"> |
||||
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" |
||||
className="button secondary white" |
||||
> |
||||
Learn More |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
<div className="use-cases g-grid-container"> |
||||
<h2 className="g-type-display-2">Use Cases</h2> |
||||
<UseCases |
||||
items={[ |
||||
{ |
||||
title: 'Service Discovery and Health Checking', |
||||
description: |
||||
'Enable services to locate other services running in any environment and provide real-time health status.', |
||||
image: { |
||||
url: require('./img/use-cases/service-discovery-and-health-checking.svg?url'), |
||||
format: 'svg', |
||||
}, |
||||
link: { |
||||
title: 'Learn more', |
||||
url: '/use-cases/service-discovery-and-health-checking', |
||||
}, |
||||
}, |
||||
{ |
||||
title: 'Network Middleware Automation', |
||||
description: |
||||
'Reduce burden of manual, ticket-based networking tasks.', |
||||
image: { |
||||
url: require('./img/use-cases/network-middleware-automation.svg?url'), |
||||
format: 'svg', |
||||
}, |
||||
link: { |
||||
title: 'Learn more', |
||||
url: '/use-cases/network-middleware-automation', |
||||
}, |
||||
}, |
||||
{ |
||||
title: 'Multi-Platform Service Mesh', |
||||
description: |
||||
'Secure, modern application networking across any cloud or runtime.', |
||||
image: { |
||||
url: require('./img/use-cases/multi-platform-service-mesh.svg?url'), |
||||
format: 'svg', |
||||
}, |
||||
link: { |
||||
title: 'Learn more', |
||||
url: '/use-cases/multi-platform-service-mesh', |
||||
}, |
||||
}, |
||||
]} |
||||
/> |
||||
</div> |
||||
</> |
||||
|
||||
<LearnCallout |
||||
headline="Learn the latest Consul skills" |
||||
brand="consul" |
||||
items={[ |
||||
{ |
||||
title: 'Getting Started', |
||||
category: 'Step-by-Step Guides', |
||||
time: '48 mins', |
||||
link: |
||||
'https://learn.hashicorp.com/consul?track=getting-started#getting-started', |
||||
image: require('./img/learn/getting-started.svg?url'), |
||||
}, |
||||
{ |
||||
title: 'Run Consul on Kubernetes', |
||||
category: 'Step-by-Step Guides', |
||||
time: '142 mins', |
||||
link: |
||||
'https://learn.hashicorp.com/consul?track=kubernetes#kubernetes', |
||||
image: require('./img/learn/kubernetes.svg?url'), |
||||
}, |
||||
]} |
||||
/> |
||||
<ConsulEnterpriseComparison /> |
||||
<PrefooterCTA /> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
@ -1,2 +1,3 @@
|
||||
import Homepage from './home' |
||||
|
||||
export default Homepage |
||||
|
||||
@ -1,453 +0,0 @@
|
||||
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 ( |
||||
<> |
||||
<div className="consul-connect"> |
||||
<CallToAction |
||||
heading="Service Mesh made easy" |
||||
content="Service discovery, identity-based authorization, and L7 traffic management abstracted from application code with proxies in the service mesh pattern" |
||||
brand="consul" |
||||
links={[ |
||||
{ text: 'Download', url: '/downloads' }, |
||||
{ |
||||
text: 'Explore Docs', |
||||
url: |
||||
'https://learn.hashicorp.com/consul/getting-started/services', |
||||
}, |
||||
]} |
||||
/> |
||||
<section |
||||
id="static-dynamic" |
||||
className="g-section-block layout-vertical theme-white-background-black-text small-padding" |
||||
> |
||||
<div className="g-grid-container"> |
||||
<BeforeAfterDiagram |
||||
beforeHeading="The Challenge" |
||||
beforeSubTitle="Network appliances, like load balancers or firewalls with manual processes, don't scale in dynamic settings to support modern applications." |
||||
beforeImage="/img/consul-connect/svgs/segmentation-challenge.svg" |
||||
beforeDescription="East-west firewalls use IP-based rules to secure ingress and egress traffic. But in a dynamic world where services move across machines and machines are frequently created and destroyed, this perimeter-based approach is difficult to scale as it results in complex network topologies and a sprawl of short-lived firewall rules and proxy configuration." |
||||
afterHeading="The Solution" |
||||
afterSubTitle="Service mesh as an automated and distributed approach to networking and security that can operate across platforms and private and public cloud" |
||||
afterImage="/img/consul-connect/svgs/segmentation-solution.svg" |
||||
afterDescription="Service mesh is a new approach to secure the service itself rather than relying on the network. Consul uses centrally managed service policies and configuration to enable dynamic routing and security based on service identity. These policies scale across datacenters and large fleets without IP-based rules or networking middleware." |
||||
/> |
||||
</div> |
||||
</section> |
||||
|
||||
<section class="g-section border-top large-padding"> |
||||
<div class="g-container"> |
||||
<div class="intro"> |
||||
<h2 class="g-type-display-2">Features</h2> |
||||
</div> |
||||
<div class="g-text-asset reverse"> |
||||
<div> |
||||
<div> |
||||
<h3 class="g-type-display-3">Layer 7 Traffic Management</h3> |
||||
<p class="g-type-body"> |
||||
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. |
||||
</p> |
||||
<p> |
||||
<a |
||||
class="learn-more g-type-buttons-and-standalone-links" |
||||
href="/docs/connect/l7-traffic-management.html" |
||||
> |
||||
Learn more |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width="6" |
||||
height="10" |
||||
viewBox="0 0 6 10" |
||||
> |
||||
<g |
||||
fill="none" |
||||
fillRule="evenodd" |
||||
transform="translate(-6 -3)" |
||||
> |
||||
<mask id="a" fill="#fff"> |
||||
<path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z" /> |
||||
</mask> |
||||
<g fill="#1563FF" mask="url(#a)"> |
||||
<path d="M0 0h16v16H0z" /> |
||||
</g> |
||||
</g> |
||||
</svg> |
||||
</a> |
||||
</p> |
||||
</div> |
||||
</div> |
||||
<div class="code-sample"> |
||||
<div> |
||||
<span></span> |
||||
<CodeBlock |
||||
prefix="terminal" |
||||
code={` |
||||
Kind = "service-splitter" |
||||
Name = "billing-api" |
||||
|
||||
Splits = [ |
||||
{ |
||||
Weight = 10 |
||||
ServiceSubset = "v2" |
||||
}, |
||||
{ |
||||
Weight = 90 |
||||
ServiceSubset = "v1" |
||||
}, |
||||
] |
||||
`} |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
|
||||
<section class="g-section border-top large-padding"> |
||||
<div class="g-container"> |
||||
<div class="g-text-asset large"> |
||||
<div> |
||||
<div> |
||||
<h3 class="g-type-display-3">Layer 7 Observability</h3> |
||||
<p class="g-type-body"> |
||||
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. |
||||
</p> |
||||
<p> |
||||
<a |
||||
class="learn-more g-type-buttons-and-standalone-links" |
||||
href="/docs/connect/observability.html" |
||||
> |
||||
Learn more |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width="6" |
||||
height="10" |
||||
viewBox="0 0 6 10" |
||||
> |
||||
<g |
||||
fill="none" |
||||
fillRule="evenodd" |
||||
transform="translate(-6 -3)" |
||||
> |
||||
<mask id="a" fill="#fff"> |
||||
<path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z" /> |
||||
</mask> |
||||
<g fill="#1563FF" mask="url(#a)"> |
||||
<path d="M0 0h16v16H0z" /> |
||||
</g> |
||||
</g> |
||||
</svg> |
||||
</a> |
||||
</p> |
||||
</div> |
||||
</div> |
||||
<div> |
||||
<picture> |
||||
<source |
||||
type="image/png" |
||||
srcSet="/img/consul-connect/mesh-observability/metrics_300.png 300w, /img/consul-connect/mesh-observability/metrics_976.png 976w, /img/consul-connect/mesh-observability/metrics_1200.png 1200w" |
||||
/> |
||||
<img |
||||
src="/img/consul-connect/mesh-observability/metrics_1200.png" |
||||
alt="Metrics dashboard" |
||||
/> |
||||
</picture> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
|
||||
<section class="g-section border-top large-padding"> |
||||
<div class="g-container"> |
||||
<div class="g-text-asset reverse"> |
||||
<div> |
||||
<div> |
||||
<h3 class="g-type-display-3"> |
||||
Secure services across any runtime platform |
||||
</h3> |
||||
<p class="g-type-body"> |
||||
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. |
||||
</p> |
||||
<p> |
||||
<a |
||||
class="learn-more g-type-buttons-and-standalone-links" |
||||
href="/docs/connect/proxies.html" |
||||
> |
||||
Learn more |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width="6" |
||||
height="10" |
||||
viewBox="0 0 6 10" |
||||
> |
||||
<g |
||||
fill="none" |
||||
fillRule="evenodd" |
||||
transform="translate(-6 -3)" |
||||
> |
||||
<mask id="a" fill="#fff"> |
||||
<path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z" /> |
||||
</mask> |
||||
<g fill="#1563FF" mask="url(#a)"> |
||||
<path d="M0 0h16v16H0z" /> |
||||
</g> |
||||
</g> |
||||
</svg> |
||||
</a> |
||||
</p> |
||||
</div> |
||||
</div> |
||||
<div> |
||||
<picture> |
||||
<source |
||||
type="image/webp" |
||||
srcSet=" |
||||
/img/consul-connect/grid_3/grid_3_300.webp 300w, |
||||
/img/consul-connect/grid_3/grid_3_976.webp 976w, |
||||
/img/consul-connect/grid_3/grid_3_1256.webp 1256w" |
||||
/> |
||||
<source |
||||
type="image/png" |
||||
srcSet=" |
||||
/img/consul-connect/grid_3/grid_3_300.png 300w, |
||||
/img/consul-connect/grid_3/grid_3_976.png 976w, |
||||
/img/consul-connect/grid_3/grid_3_1256.png 1256w" |
||||
/> |
||||
<img |
||||
src="/img/consul-connect/grid_3/grid_3_1256.png" |
||||
alt="Secure services across any runtime platform" |
||||
/> |
||||
</picture> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
|
||||
<section class="g-section border-top large-padding"> |
||||
<div class="g-container"> |
||||
<div class="g-text-asset"> |
||||
<div> |
||||
<div> |
||||
<h3 class="g-type-display-3"> |
||||
Certificate-Based Service Identity |
||||
</h3> |
||||
<p class="g-type-body"> |
||||
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. |
||||
</p> |
||||
<p> |
||||
<a |
||||
class="learn-more g-type-buttons-and-standalone-links" |
||||
href="/docs/connect/ca.html" |
||||
> |
||||
Learn more |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width="6" |
||||
height="10" |
||||
viewBox="0 0 6 10" |
||||
> |
||||
<g |
||||
fill="none" |
||||
fillRule="evenodd" |
||||
transform="translate(-6 -3)" |
||||
> |
||||
<mask id="a" fill="#fff"> |
||||
<path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z" /> |
||||
</mask> |
||||
<g fill="#1563FF" mask="url(#a)"> |
||||
<path d="M0 0h16v16H0z" /> |
||||
</g> |
||||
</g> |
||||
</svg> |
||||
</a> |
||||
</p> |
||||
</div> |
||||
</div> |
||||
<div class="logos"> |
||||
<div> |
||||
<img src="/img/consul-connect/logos/vault.png" alt="Vault" /> |
||||
<img |
||||
src="/img/consul-connect/logos/spiffe.png" |
||||
alt="Spiffe" |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
|
||||
<section class="g-section border-top large-padding"> |
||||
<div class="g-container"> |
||||
<div class="g-text-asset reverse"> |
||||
<div> |
||||
<div> |
||||
<h3 class="g-type-display-3">Encrypted communication</h3> |
||||
<p class="g-type-body"> |
||||
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. |
||||
</p> |
||||
<p> |
||||
<a |
||||
class="learn-more g-type-buttons-and-standalone-links" |
||||
href="/docs/connect/security.html" |
||||
> |
||||
Learn more |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width="6" |
||||
height="10" |
||||
viewBox="0 0 6 10" |
||||
> |
||||
<g |
||||
fill="none" |
||||
fillRule="evenodd" |
||||
transform="translate(-6 -3)" |
||||
> |
||||
<mask id="a" fill="#fff"> |
||||
<path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z" /> |
||||
</mask> |
||||
<g fill="#1563FF" mask="url(#a)"> |
||||
<path d="M0 0h16v16H0z" /> |
||||
</g> |
||||
</g> |
||||
</svg> |
||||
</a> |
||||
</p> |
||||
</div> |
||||
</div> |
||||
<div class="code-sample"> |
||||
<div> |
||||
<span></span> |
||||
<CodeBlock |
||||
prefix="terminal" |
||||
code={` |
||||
$ consul connect proxy -service web \\ |
||||
-service-addr 127.0.0.1:8000 |
||||
-listen 10.0.1.109:7200 |
||||
==> 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 |
||||
`} |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
|
||||
<section class="g-section border-top large-padding"> |
||||
<div class="g-container"> |
||||
<div class="g-text-asset"> |
||||
<div> |
||||
<div> |
||||
<h3 class="g-type-display-3">Mesh Gateway</h3> |
||||
<p class="g-type-body"> |
||||
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. |
||||
</p> |
||||
<p> |
||||
<a |
||||
class="learn-more g-type-buttons-and-standalone-links" |
||||
href="/docs/connect/mesh_gateway.html" |
||||
> |
||||
Learn more |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width="6" |
||||
height="10" |
||||
viewBox="0 0 6 10" |
||||
> |
||||
<g |
||||
fill="none" |
||||
fillRule="evenodd" |
||||
transform="translate(-6 -3)" |
||||
> |
||||
<mask id="a" fill="#fff"> |
||||
<path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z" /> |
||||
</mask> |
||||
<g fill="#1563FF" mask="url(#a)"> |
||||
<path d="M0 0h16v16H0z" /> |
||||
</g> |
||||
</g> |
||||
</svg> |
||||
</a> |
||||
</p> |
||||
</div> |
||||
</div> |
||||
<div> |
||||
<picture> |
||||
<img |
||||
src="/img/consul-connect/mesh-gateway/gateway_1200.png" |
||||
alt="Mesh gateway diagram" |
||||
/> |
||||
</picture> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
|
||||
<section class="g-section g-cta-section large-padding"> |
||||
<div> |
||||
<h2 class="g-type-display-2">Ready to get started?</h2> |
||||
<a href="/downloads.html" class="button download white"> |
||||
<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="https://learn.hashicorp.com/consul/getting-started/services" |
||||
class="button secondary white" |
||||
> |
||||
Explore docs |
||||
</a> |
||||
</div> |
||||
</section> |
||||
</div> |
||||
</> |
||||
) |
||||
} |
||||
|
After Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 79 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 63 KiB |
|
After Width: | Height: | Size: 79 KiB |
|
After Width: | Height: | Size: 64 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 8.5 KiB |
|
After Width: | Height: | Size: 129 KiB |
|
After Width: | Height: | Size: 1.4 MiB |
|
After Width: | Height: | Size: 134 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 545 KiB |
|
After Width: | Height: | Size: 105 KiB |
|
After Width: | Height: | Size: 154 KiB |
@ -0,0 +1,161 @@
|
||||
import UseCaseLayout from '../../layouts/use-cases' |
||||
import TextSplitWithImage from '@hashicorp/react-text-split-with-image' |
||||
import TextSplitWithCode from '@hashicorp/react-text-split-with-code' |
||||
|
||||
export default function MultiPlatformServiceMeshPage() { |
||||
return ( |
||||
<UseCaseLayout |
||||
title="Multi-Platform Service Mesh" |
||||
description="Create a consistent platform for modern application networking and security with identity based authorization, L7 traffic management, and service-to-service encryption." |
||||
> |
||||
<TextSplitWithImage |
||||
textSplit={{ |
||||
heading: 'Multi-Datacenter, Multi-Region', |
||||
content: |
||||
'Federate Consul between multiple clusters and environments creating a global service mesh. Consistently apply policies and security across platforms.', |
||||
textSide: 'right', |
||||
links: [ |
||||
{ |
||||
text: 'Learn More', |
||||
url: |
||||
'https://learn.hashicorp.com/consul/security-networking/datacenters', |
||||
type: 'outbound', |
||||
}, |
||||
], |
||||
}} |
||||
image={{ |
||||
url: require('./img/multi-dc-multi-region.svg?url'), |
||||
}} |
||||
/> |
||||
|
||||
<TextSplitWithImage |
||||
textSplit={{ |
||||
heading: 'Secure Service-to-Service Communication', |
||||
content: |
||||
'Automatic mTLS communication between services both inside Kubernetes and in traditional runtime platforms. Extend and integrate with external certificate platforms like Vault.', |
||||
textSide: 'left', |
||||
links: [ |
||||
{ |
||||
text: 'Learn More', |
||||
url: |
||||
'https://learn.hashicorp.com/consul/security-networking/certificates', |
||||
type: 'outbound', |
||||
}, |
||||
], |
||||
}} |
||||
image={{ |
||||
url: require('./img/service-to-service.svg?url'), |
||||
}} |
||||
/> |
||||
|
||||
<TextSplitWithCode |
||||
textSplit={{ |
||||
heading: 'Layer 7 Traffic Management', |
||||
content: |
||||
'Service-to-service communication policy at Layer 7 enables progressive delivery of application communication. Leverage Blue/Green or Canary deployment patterns for applications, 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.', |
||||
textSide: 'right', |
||||
links: [ |
||||
{ |
||||
text: 'Learn More', |
||||
url: |
||||
'https://www.consul.io/docs/connect/l7-traffic-management.html', |
||||
type: 'outbound', |
||||
}, |
||||
], |
||||
}} |
||||
codeBlock={{ |
||||
language: 'hcl', |
||||
code: `Kind = "service-splitter" |
||||
Name = "billing-api" |
||||
|
||||
Splits = [ |
||||
{ |
||||
Weight = 10 |
||||
ServiceSubset = "v2" |
||||
}, |
||||
{ |
||||
Weight = 90 |
||||
ServiceSubset = "v1" |
||||
}, |
||||
]`, |
||||
}} |
||||
/> |
||||
|
||||
<TextSplitWithImage |
||||
textSplit={{ |
||||
heading: 'Integrate and Extend in Kubernetes', |
||||
content: |
||||
'Quickly deploy Consul on Kubernetes leveraging Helm. Automatically inject sidecars for Kubernetes resources. Federate multiple clusters into a single service mesh.', |
||||
textSide: 'left', |
||||
links: [ |
||||
{ |
||||
text: 'Learn More', |
||||
url: 'https://www.consul.io/docs/platform/k8s/run.html', |
||||
type: 'inbound', |
||||
}, |
||||
], |
||||
}} |
||||
image={{ |
||||
url: require('./img/kubernetes.svg?url'), |
||||
}} |
||||
/> |
||||
|
||||
<TextSplitWithImage |
||||
textSplit={{ |
||||
heading: 'Connect and Extend Service Mesh for Any Workload', |
||||
content: |
||||
'Integrate with existing services and applications by leveraging Consul ingress and terminating gateways. Extend between complex networks and multi-cloud topologies with Consul mesh gateways.', |
||||
textSide: 'right', |
||||
}} |
||||
image={{ |
||||
url: require('./img/connect-and-extend.svg?url'), |
||||
}} |
||||
/> |
||||
|
||||
<TextSplitWithImage |
||||
textSplit={{ |
||||
heading: 'Robust Ecosystem', |
||||
content: |
||||
'Rich ecosystem community extends Consul’s functionality into spaces such as networking, observability, and security.', |
||||
textSide: 'left', |
||||
}} |
||||
image={{ |
||||
url: require('./img/robust-ecosystem.svg?url'), |
||||
}} |
||||
/> |
||||
|
||||
<TextSplitWithImage |
||||
textSplit={{ |
||||
heading: 'Improved Observability', |
||||
content: |
||||
'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.', |
||||
textSide: 'right', |
||||
}} |
||||
image={{ |
||||
url: require('./img/observability.svg?url'), |
||||
}} |
||||
/> |
||||
|
||||
<div className="with-border"> |
||||
<TextSplitWithImage |
||||
textSplit={{ |
||||
heading: 'Scale to Enterprise', |
||||
content: |
||||
'Consul addresses the challenge of running a service mesh at enterprise scale from both an environmental complexity and resiliency perspective.', |
||||
textSide: 'left', |
||||
links: [ |
||||
{ |
||||
text: 'Learn More', |
||||
url: 'https://www.consul.io/docs/enterprise/index.html', |
||||
type: 'inbound', |
||||
}, |
||||
], |
||||
}} |
||||
image={{ |
||||
url: require('./img/services-screenshot.png?url'), |
||||
}} |
||||
/> |
||||
</div> |
||||
</UseCaseLayout> |
||||
) |
||||
} |
||||
@ -0,0 +1,92 @@
|
||||
import UseCaseLayout from '../../layouts/use-cases' |
||||
import TextSplitWithImage from '@hashicorp/react-text-split-with-image' |
||||
|
||||
export default function NetworkMiddlewareAutomationPage() { |
||||
return ( |
||||
<UseCaseLayout |
||||
title="Network Middleware Automation" |
||||
description="Reduce the time to deploy applications and eliminate manual processes by automating complex networking tasks. Enable operators to easily deploy, manage and optimize network middleware." |
||||
> |
||||
<TextSplitWithImage |
||||
textSplit={{ |
||||
heading: 'Dynamic Load Balancing', |
||||
content: |
||||
'Consul can automatically provide service updates to many popular load balancers eliminating the need for manual updates.', |
||||
textSide: 'right', |
||||
links: [ |
||||
{ |
||||
text: 'Learn More', |
||||
url: |
||||
'https://learn.hashicorp.com/consul?track=integrations#integrations', |
||||
type: 'outbound', |
||||
}, |
||||
], |
||||
}} |
||||
image={{ |
||||
url: require('./img/dynamic-load-balancing.svg?url'), |
||||
}} |
||||
/> |
||||
|
||||
<TextSplitWithImage |
||||
textSplit={{ |
||||
heading: 'Extend through Ecosystem', |
||||
content: |
||||
'Consul’s open API enables integrations with many popular networking tools.', |
||||
textSide: 'left', |
||||
links: [ |
||||
{ |
||||
text: 'Read More', |
||||
url: 'https://www.consul.io/docs/partnerships/index.html', |
||||
type: 'inbound', |
||||
}, |
||||
], |
||||
}} |
||||
image={{ |
||||
url: require('./img/extend-through-ecosystem.svg?url'), |
||||
}} |
||||
/> |
||||
|
||||
<TextSplitWithImage |
||||
textSplit={{ |
||||
heading: 'Flexible Architecture', |
||||
content: |
||||
'Consul can be deployed in any environment, across any cloud or runtime.', |
||||
textSide: 'right', |
||||
links: [ |
||||
{ |
||||
text: 'Learn More', |
||||
url: |
||||
'https://learn.hashicorp.com/consul/datacenter-deploy/reference-architecture', |
||||
type: 'outbound', |
||||
}, |
||||
], |
||||
}} |
||||
image={{ |
||||
url: require('./img/flexible-architecture.png?url'), |
||||
}} |
||||
/> |
||||
|
||||
<div className="with-border"> |
||||
<TextSplitWithImage |
||||
textSplit={{ |
||||
heading: 'Reduce Downtime and Outages', |
||||
content: |
||||
'Use Consul to automate networking tasks, reducing risk of outages from manual errors and driving down ticket driven operations.', |
||||
textSide: 'left', |
||||
links: [ |
||||
{ |
||||
text: 'Learn More', |
||||
url: |
||||
'https://learn.hashicorp.com/consul?track=integrations#integrations', |
||||
type: 'outbound', |
||||
}, |
||||
], |
||||
}} |
||||
image={{ |
||||
url: require('./img/services-screenshot.png?url'), |
||||
}} |
||||
/> |
||||
</div> |
||||
</UseCaseLayout> |
||||
) |
||||
} |
||||
@ -0,0 +1,186 @@
|
||||
import UseCaseLayout from '../../layouts/use-cases' |
||||
import FeaturedSlider from '@hashicorp/react-featured-slider' |
||||
import TextSplitWithCode from '@hashicorp/react-text-split-with-code' |
||||
import TextSplitWithImage from '@hashicorp/react-text-split-with-image' |
||||
|
||||
export default function ServiceDiscoveryAndHealthCheckingPage() { |
||||
return ( |
||||
<UseCaseLayout |
||||
title="Service Discovery and Health Checking" |
||||
description="Discover, Register and Resolve services for application workloads across any cloud. Automatically add and remove services based on health checking." |
||||
> |
||||
<TextSplitWithImage |
||||
textSplit={{ |
||||
heading: 'Centralized Service Registry', |
||||
content: |
||||
'Consul enables services to discover each other by storing location information (like IP addresses) in a single registry.', |
||||
textSide: 'right', |
||||
links: [ |
||||
{ |
||||
text: 'Learn More', |
||||
url: |
||||
'https://learn.hashicorp.com/consul/getting-started/services', |
||||
type: 'outbound', |
||||
}, |
||||
], |
||||
}} |
||||
image={{ |
||||
url: require('./img/centralized-service-registry.png?url'), |
||||
}} |
||||
/> |
||||
|
||||
<TextSplitWithImage |
||||
textSplit={{ |
||||
heading: 'Real time Health Monitoring', |
||||
content: |
||||
'Improve application resiliency by using Consul health checks to track the health of deployed services.', |
||||
textSide: 'left', |
||||
links: [ |
||||
{ |
||||
text: 'Learn More', |
||||
url: |
||||
'https://learn.hashicorp.com/consul/developer-discovery/health-checks', |
||||
type: 'outbound', |
||||
}, |
||||
], |
||||
}} |
||||
image={{ |
||||
url: require('./img/health-monitoring.svg?url'), |
||||
}} |
||||
/> |
||||
|
||||
<TextSplitWithImage |
||||
textSplit={{ |
||||
heading: 'Open and Extensible API', |
||||
content: |
||||
'Consul’s API allows users to integrate ecosystem technologies into their environments and enable service discovery at greater scale.', |
||||
textSide: 'right', |
||||
links: [ |
||||
{ |
||||
text: 'Learn More', |
||||
url: |
||||
'https://learn.hashicorp.com/consul?track=cloud-integrations#cloud-integrations', |
||||
type: 'outbound', |
||||
}, |
||||
], |
||||
}} |
||||
image={{ |
||||
url: require('./img/ecosystem.svg?url'), |
||||
}} |
||||
/> |
||||
|
||||
<TextSplitWithCode |
||||
textSplit={{ |
||||
heading: 'Simplified Resource Discovery', |
||||
content: |
||||
'Leverage DNS or HTTP interface to discover services and their locations registered with Consul.', |
||||
textSide: 'left', |
||||
links: [ |
||||
{ |
||||
text: 'Learn More', |
||||
url: |
||||
'https://learn.hashicorp.com/consul/getting-started/services', |
||||
type: 'outbound', |
||||
}, |
||||
], |
||||
}} |
||||
codeBlock={{ |
||||
code: `$ dig @127.0.0.1 -p 8600 web.service.consul |
||||
|
||||
; <<>> DiG 9.10.6 <<>> @127.0.0.1 -p 8600 web.service.consul SRV |
||||
; (1 server found) |
||||
;; global options: +cmd |
||||
;; Got answer: |
||||
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 56598 |
||||
;; flags: qr aa rd; QUERY: 1, ANSWER: 1, AUTHORITY: 0, ADDITIONAL: 3 |
||||
;; WARNING: recursion requested but not available |
||||
|
||||
;; OPT PSEUDOSECTION: |
||||
; EDNS: version: 0, flags:; udp: 4096 |
||||
;; QUESTION SECTION: |
||||
;web.service.consul. IN SRV |
||||
|
||||
;; ANSWER SECTION: |
||||
web.service.consul. 0 IN SRV 1 1 80 Judiths-MBP.lan.node.dc1.consul. |
||||
|
||||
;; ADDITIONAL SECTION: |
||||
Judiths-MBP.lan.node.dc1.consul. 0 IN A 127.0.0.1 |
||||
Judiths-MBP.lan.node.dc1.consul. 0 IN TXT "consul-network-segment=" |
||||
|
||||
;; Query time: 2 msec |
||||
;; SERVER: 127.0.0.1#8600(127.0.0.1) |
||||
;; WHEN: Tue Jul 16 14:31:13 PDT 2019 |
||||
;; MSG SIZE rcvd: 150`, |
||||
}} |
||||
/> |
||||
|
||||
<TextSplitWithImage |
||||
textSplit={{ |
||||
heading: 'Multi-Region, Multi-Cloud', |
||||
content: |
||||
'Consul’s distributed architecture allows it to be deployed at scale in any environment, in any region, on any cloud.', |
||||
textSide: 'right', |
||||
links: [ |
||||
{ |
||||
text: 'Learn More', |
||||
url: |
||||
'https://learn.hashicorp.com/consul?track=datacenter-deploy#datacenter-deploy', |
||||
type: 'outbound', |
||||
}, |
||||
], |
||||
}} |
||||
image={{ |
||||
url: require('./img/multi-region.svg?url'), |
||||
}} |
||||
/> |
||||
|
||||
<div className="with-border"> |
||||
<TextSplitWithImage |
||||
textSplit={{ |
||||
heading: 'Built for Enterprise Scale', |
||||
content: |
||||
'Consul Enterprise provides the foundation for organizations to build a strong service networking platform at scale, with resiliency.', |
||||
textSide: 'left', |
||||
links: [ |
||||
{ |
||||
text: 'Read More', |
||||
url: 'https://www.consul.io/docs/enterprise/index.html', |
||||
type: 'inbound', |
||||
}, |
||||
], |
||||
}} |
||||
image={{ |
||||
url: require('./img/services-screenshot.png?url'), |
||||
}} |
||||
/> |
||||
</div> |
||||
|
||||
<FeaturedSlider |
||||
heading="Case Study" |
||||
theme="dark" |
||||
brand="consul" |
||||
features={[ |
||||
{ |
||||
logo: { |
||||
url: require('./img/mercedes-logo.svg?url'), |
||||
alt: 'Mercedes-Benz', |
||||
}, |
||||
image: { |
||||
url: |
||||
'https://www.datocms-assets.com/2885/1589432019-mercedes-card-d0e7f12d215e93fee7011984315e94b7.jpg', |
||||
alt: 'Mercedes-Benz Case Study', |
||||
}, |
||||
heading: 'On the Road Again', |
||||
content: |
||||
'How Mercedes-Benz delivers on service networking to accelerate delivery of its next-gen connected vehicles.', |
||||
link: { |
||||
text: 'Read Case Study', |
||||
url: 'https://www.hashicorp.com/case-studies/mercedes/', |
||||
type: 'outbound', |
||||
}, |
||||
}, |
||||
]} |
||||
/> |
||||
</UseCaseLayout> |
||||
) |
||||
} |
||||
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 1.3 MiB |
Loading…
Reference in new issue