Merge pull request #7883 from BrandonRomano/consul-website-redesign

website: Landing & Use Case Pages redesign
This commit is contained in:
Brandon Romano 2020-05-14 09:04:10 -07:00 committed by GitHub
commit 205fc808d1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
75 changed files with 2354 additions and 1991 deletions

View File

@ -5,6 +5,8 @@
# Consul Redirects
/discovery.html /use-cases/service-discovery-and-health-checking 301!
/mesh.html /use-cases/multi-platform-service-mesh 301!
/api.html /api-docs 301!
/docs/agent/acl-rules.html /docs/acl/acl-rules 301!
/docs/agent/acl-rules /docs/acl/acl-rules 301!

View File

@ -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>
)
}

View File

@ -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);
}
}
}

View File

@ -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

View File

@ -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;
}
}
}

View File

@ -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>
)
}

View File

@ -0,0 +1 @@
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="4" cy="4" r="4" fill="#333"/></svg>

After

Width:  |  Height:  |  Size: 139 B

View File

@ -0,0 +1 @@
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="4" cy="4" r="4" fill="#c4c4c4"/></svg>

After

Width:  |  Height:  |  Size: 142 B

View File

@ -0,0 +1 @@
<svg width="56" height="56" xmlns="http://www.w3.org/2000/svg"><g stroke="#323339" stroke-width="1.5" fill="none" fill-rule="evenodd"><path d="M.75 28c0 15.05 12.2 27.25 27.25 27.25S55.25 43.05 55.25 28 43.05.75 28 .75.75 12.95.75 28z" fill="#FFF"/><path d="M36 28H20M26 22l-6 6 6 6" stroke-linecap="round" stroke-linejoin="round"/></g></svg>

After

Width:  |  Height:  |  Size: 342 B

View File

@ -0,0 +1,3 @@
<svg width="19" height="15" viewBox="0 0 19 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.15 0.5H3.95L0 14.35H6.95L9.15 0.5ZM18.7 0.5H13.45L9.55 14.35H16.5L18.7 0.5Z" fill="#CA2171"></path>
</svg>

After

Width:  |  Height:  |  Size: 214 B

View File

@ -0,0 +1 @@
<svg width="56" height="56" xmlns="http://www.w3.org/2000/svg"><g stroke="#323339" stroke-width="1.5" fill="none" fill-rule="evenodd"><path d="M55.25 28c0 15.05-12.2 27.25-27.25 27.25S.75 43.05.75 28 12.95.75 28 .75 55.25 12.95 55.25 28z" fill="#FFF"/><path d="M20 28h16M30 22l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></g></svg>

After

Width:  |  Height:  |  Size: 344 B

View File

@ -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>
)
}

View File

@ -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;
}
}
}

View File

@ -0,0 +1,26 @@
<svg width="160" height="96" viewBox="0 0 160 96" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="90" cy="6" r="6" fill="#BDBEC2"/>
<circle cx="70" cy="6" r="6" fill="#CA2171"/>
<circle cx="70" cy="26" r="6" fill="#CA2171"/>
<circle cx="90" cy="26" r="6" fill="#CA2171"/>
<circle cx="154" cy="6" r="6" fill="#CA2171"/>
<circle cx="134" cy="6" r="6" fill="#CA2171"/>
<circle cx="134" cy="26" r="6" fill="#CA2171"/>
<circle cx="154" cy="26" r="6" fill="#CA2171"/>
<circle cx="90" cy="70" r="6" fill="#CA2171"/>
<circle cx="70" cy="70" r="6" fill="#CA2171"/>
<circle cx="70" cy="90" r="6" fill="#BDBEC2"/>
<circle cx="90" cy="90" r="6" fill="#BDBEC2"/>
<circle cx="154" cy="70" r="6" fill="#CA2171"/>
<circle cx="134" cy="70" r="6" fill="#CA2171"/>
<circle cx="134" cy="90" r="6" fill="#CA2171"/>
<circle cx="154" cy="90" r="6" fill="#BDBEC2"/>
<circle cx="26" cy="6" r="6" fill="#CA2171"/>
<circle cx="6" cy="6" r="6" fill="#CA2171"/>
<circle cx="6" cy="26" r="6" fill="#CA2171"/>
<circle cx="26" cy="26" r="6" fill="#BDBEC2"/>
<circle cx="26" cy="70" r="6" fill="#BDBEC2"/>
<circle cx="6" cy="70" r="6" fill="#BDBEC2"/>
<circle cx="6" cy="90" r="6" fill="#BDBEC2"/>
<circle cx="26" cy="90" r="6" fill="#BDBEC2"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,10 @@
<svg width="32" height="96" viewBox="0 0 32 96" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="26" cy="6" r="6" fill="#CA2171"/>
<circle cx="6" cy="6" r="6" fill="#CA2171"/>
<circle cx="6" cy="26" r="6" fill="#CA2171"/>
<circle cx="26" cy="26" r="6" fill="#BDBEC2"/>
<circle cx="26" cy="70" r="6" fill="#BDBEC2"/>
<circle cx="6" cy="70" r="6" fill="#BDBEC2"/>
<circle cx="6" cy="90" r="6" fill="#BDBEC2"/>
<circle cx="26" cy="90" r="6" fill="#BDBEC2"/>
</svg>

After

Width:  |  Height:  |  Size: 472 B

View File

@ -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"
/>
)
}

View File

@ -0,0 +1,4 @@
<svg width="128" height="18" viewBox="0 0 128 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<line x1="1.14564e-07" y1="9" x2="127.277" y2="9.00001" stroke="#BDBEC2" stroke-width="2"/>
<path d="M118 1L126.5 9L118 17" stroke="#BDBEC2" stroke-width="2"/>
</svg>

After

Width:  |  Height:  |  Size: 265 B

Binary file not shown.

Binary file not shown.

View File

@ -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>
)
}

View File

@ -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;
}
}

View File

@ -2,6 +2,7 @@
padding: 25px 0 17px 0;
flex-shrink: 0;
display: flex;
border-top: 1px solid var(--gray-6);
& .g-container {
display: flex;

View File

@ -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>
)
}

View File

@ -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);
}
}
}

View File

@ -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"
/>
)
}

View File

@ -1,16 +1,29 @@
export default [
{ text: 'Overview', url: '/', type: 'inbound' },
{
text: 'Use Cases',
submenu: [
{ text: 'Service Discovery', url: '/discovery' },
{ text: 'Service Mesh', url: '/mesh' },
{
text: 'Service Discovery and Health Checking',
url: '/use-cases/service-discovery-and-health-checking',
},
{
text: 'Network Middleware Automation',
url: '/use-cases/network-middleware-automation',
},
{
text: 'Multi-Platform Service Mesh',
url: '/use-cases/multi-platform-service-mesh',
},
],
},
{
text: 'Intro',
url: '/intro',
type: 'inbound',
text: 'Enterprise',
url:
'https://www.hashicorp.com/products/consul/?utm_source=oss&utm_medium=header-nav&utm_campaign=consul',
type: 'outbound',
},
'divider',
{
text: 'Learn',
url: 'https://learn.hashicorp.com/consul',
@ -31,10 +44,4 @@ export default [
url: '/community',
type: 'inbound',
},
{
text: 'Enterprise',
url:
'https://www.hashicorp.com/products/consul/?utm_source=oss&utm_medium=header-nav&utm_campaign=consul',
type: 'outbound',
},
]

View File

@ -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>
</>
)
}

View File

@ -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;
}
}
}
}

View File

@ -1159,7 +1159,7 @@
"inquirer": "^7.1.0",
"lint-staged": "^10.1.7",
"next-mdx-enhanced": "^2.4.0",
"next-optimized-images": "github:hashicorp/next-optimized-images",
"next-optimized-images": "github:hashicorp/next-optimized-images#b32b280c862af79dcb917cc44e33fbb1357d5c59",
"next-transpile-modules": "^3.2.0",
"open": "^7.0.3",
"postcss-flexbugs-fixes": "^4.2.0",
@ -1312,6 +1312,38 @@
"@hashicorp/js-utils": "^1.0.9-alpha.0"
}
},
"@hashicorp/react-featured-slider": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@hashicorp/react-featured-slider/-/react-featured-slider-1.1.0.tgz",
"integrity": "sha512-TEZYQ9pqQvt/VyJzCZKLVIImfJkcKvMuMC7pCOZ/Wf0dblVqzTV0sAalXzv2ssj8wA3OaSw1WGg0Gum6/Fk43Q==",
"requires": {
"@hashicorp/react-button": "^2.2.0",
"@hashicorp/react-image": "^2.0.1",
"marked": "^1.0.0"
},
"dependencies": {
"@hashicorp/react-button": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/@hashicorp/react-button/-/react-button-2.2.0.tgz",
"integrity": "sha512-UUwn+yFWlTIGjWbPu2Z1griHPT0ywu/ECVAJ7OVqx9ZKXUxr0DOnwMGuqrkZS34hg/mmUAzYQhWqo8fycoQXig==",
"requires": {
"@hashicorp/react-global-styles": "^4.4.0",
"@hashicorp/react-inline-svg": "^1.0.0",
"slugify": "^1.3.6"
}
},
"@hashicorp/react-global-styles": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/@hashicorp/react-global-styles/-/react-global-styles-4.4.0.tgz",
"integrity": "sha512-lv6XR2plm2m3+qO6VE+RYquTzOODIt3mQ/1fBT1bn7wsR0qxFiuryW4JfsF94oCGk++LkDkRt/8V742HiT+fHw=="
},
"marked": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/marked/-/marked-1.0.0.tgz",
"integrity": "sha512-Wo+L1pWTVibfrSr+TTtMuiMfNzmZWiOPeO7rZsQUY5bgsxpHesBEcIWJloWVTFnrMXnf/TL30eTFSGJddmQAng=="
}
}
},
"@hashicorp/react-footer": {
"version": "3.1.14",
"resolved": "https://registry.npmjs.org/@hashicorp/react-footer/-/react-footer-3.1.14.tgz",
@ -1418,6 +1450,14 @@
"@hashicorp/react-button": "^2.1.9"
}
},
"@hashicorp/react-product-features-list": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@hashicorp/react-product-features-list/-/react-product-features-list-1.0.1.tgz",
"integrity": "sha512-kdDoWUZYB43jpy6TYzuksjUU8RTGrEIvQMKErfEkcXwSMTG5KG/og8UdJUnzjIPSW/gK73Djr+T2UzNmrnnMIw==",
"requires": {
"@hashicorp/react-image": "^2.0.1"
}
},
"@hashicorp/react-section-header": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@hashicorp/react-section-header/-/react-section-header-2.0.0.tgz",
@ -17273,8 +17313,7 @@
},
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"optional": true
"bundled": true
},
"aproba": {
"version": "1.2.0",
@ -17292,13 +17331,11 @@
},
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"optional": true
"bundled": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@ -17311,18 +17348,15 @@
},
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"optional": true
"bundled": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"optional": true
"bundled": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"optional": true
"bundled": true
},
"core-util-is": {
"version": "1.0.2",
@ -17425,8 +17459,7 @@
},
"inherits": {
"version": "2.0.4",
"bundled": true,
"optional": true
"bundled": true
},
"ini": {
"version": "1.3.5",
@ -17436,7 +17469,6 @@
"is-fullwidth-code-point": {
"version": "1.0.0",
"bundled": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@ -17449,20 +17481,17 @@
"minimatch": {
"version": "3.0.4",
"bundled": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
},
"minimist": {
"version": "1.2.5",
"bundled": true,
"optional": true
"bundled": true
},
"minipass": {
"version": "2.9.0",
"bundled": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@ -17479,7 +17508,6 @@
"mkdirp": {
"version": "0.5.3",
"bundled": true,
"optional": true,
"requires": {
"minimist": "^1.2.5"
}
@ -17535,8 +17563,7 @@
},
"npm-normalize-package-bin": {
"version": "1.0.1",
"bundled": true,
"optional": true
"bundled": true
},
"npm-packlist": {
"version": "1.4.8",
@ -17561,8 +17588,7 @@
},
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"optional": true
"bundled": true
},
"object-assign": {
"version": "4.1.1",
@ -17572,7 +17598,6 @@
"once": {
"version": "1.4.0",
"bundled": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@ -17641,8 +17666,7 @@
},
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"optional": true
"bundled": true
},
"safer-buffer": {
"version": "2.1.2",
@ -17672,7 +17696,6 @@
"string-width": {
"version": "1.0.2",
"bundled": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@ -17690,7 +17713,6 @@
"strip-ansi": {
"version": "3.0.1",
"bundled": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@ -17729,13 +17751,11 @@
},
"wrappy": {
"version": "1.0.2",
"bundled": true,
"optional": true
"bundled": true
},
"yallist": {
"version": "3.1.1",
"bundled": true,
"optional": true
"bundled": true
}
}
},

View File

@ -20,6 +20,7 @@
"@hashicorp/react-docs-sidenav": "^3.2.3",
"@hashicorp/react-docs-sitemap": "^1.0.0",
"@hashicorp/react-enterprise-alert": "^2.1.0",
"@hashicorp/react-featured-slider": "^1.1.0",
"@hashicorp/react-footer": "^3.1.14",
"@hashicorp/react-global-styles": "^4.2.0",
"@hashicorp/react-head": "^0.1.1",
@ -29,6 +30,7 @@
"@hashicorp/react-logo-grid": "^2.0.11",
"@hashicorp/react-mega-nav": "^4.0.1-2",
"@hashicorp/react-product-downloader": "^3.1.2",
"@hashicorp/react-product-features-list": "^1.0.1",
"@hashicorp/react-section-header": "^2.0.0",
"@hashicorp/react-subnav": "^3.1.1",
"@hashicorp/react-tabs": "^0.4.0",

View File

@ -59,7 +59,7 @@ class NextApp extends App {
is={Head}
title="Consul by HashiCorp"
siteName="Consul by HashiCorp"
description="Consul is a service networking solution to connect and secure services across any runtime platform and public or private cloud."
description="Consul is a service networking solution to automate network configurations, discover services, and enable secure connectivity across any cloud or runtime."
image="https://www.consul.io/img/og-image.png"
stylesheet={[
{ href: '/css/nprogress.css' },
@ -81,7 +81,13 @@ class NextApp extends App {
{ href: '/fonts/metro-sans/bold.woff2', as: 'font' },
{ href: '/fonts/dejavu/mono.woff2', as: 'font' },
]}
/>
>
<meta
name="og:title"
property="og:title"
content="Consul by HashiCorp"
/>
</HashiHead>
{ALERT_BANNER_ACTIVE && (
<AlertBanner {...alertBannerData} theme="consul" />
)}

View File

@ -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>
</>
)
}

View File

@ -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;
}

View File

@ -0,0 +1,5 @@
<svg width="110" height="76" viewBox="0 0 110 76" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M109.219 27.1574C109.954 27.5264 109.954 28.5759 109.219 28.9449L92.4109 37.3797C92.1303 37.5629 91.9578 37.8769 91.9578 38.217V55.4843C91.9578 55.8631 91.7438 56.2093 91.405 56.3787L55.5494 74.3065C55.2679 74.4473 54.9365 74.4473 54.655 74.3065L24.942 59.45C24.6032 59.2806 24.3892 58.9343 24.3892 58.5556V40.7458L24.3893 40.7459L30.6969 37.4965C30.9794 37.351 31.3143 37.3484 31.599 37.4895L54.6563 48.9196C54.9372 49.0589 55.2672 49.0583 55.5476 48.9181L96.387 28.4984C96.7556 28.3141 96.7556 27.7882 96.387 27.6039L55.5477 7.18425C55.2672 7.04401 54.9372 7.04346 54.6562 7.18276L5.96154 31.3272L0.864731 28.9287C0.109161 28.5731 0.0964234 27.5029 0.843316 27.1295L54.6543 0.223981C54.9363 0.0829866 55.2682 0.0832301 55.55 0.224637L109.219 27.1574Z" fill="#323339"/>
<path opacity="0.5" d="M5.96143 31.3271L54.6561 7.18261C54.937 7.04331 55.2671 7.04386 55.5475 7.1841L96.3869 27.6038C96.7555 27.7881 96.7555 28.314 96.3869 28.4982L55.5475 48.9179C55.267 49.0582 54.9371 49.0587 54.6561 48.9195L31.1461 37.2649L24.3892 40.7457L5.96143 31.3271Z" fill="white"/>
<path d="M38.781 22.3855C38.4888 22.2158 38.1307 22.2052 37.829 22.3572L12.044 35.3481C11.7046 35.5191 11.4915 35.8676 11.4939 36.2476L11.715 70.9796C11.7172 71.3225 11.8949 71.6403 12.1858 71.8218L17.4823 75.1248C17.8153 75.3325 18.2468 75.0931 18.2468 74.7006V39.416C18.2468 39.2272 18.3532 39.0544 18.5219 38.9695L43.8356 26.2145C44.1902 26.0358 44.2051 25.5349 43.8617 25.3356L38.781 22.3855Z" fill="#CA2171"/>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 22 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Kubernetes</title>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M1,9 L3.05,9.1 C3.29494666,6.88707306 4.45549438,4.87787483 6.25,3.56 L5.13,1.84 C4.86,1.36 5,0.75 5.5,0.47 C6,0.2 6.59,0.36 6.87,0.84 L7.8,2.66 C9.84293475,1.78170549 12.1570653,1.78170549 14.2,2.66 L15.13,0.84 C15.41,0.36 16,0.2 16.5,0.47 C17,0.75 17.14,1.36 16.87,1.84 L15.75,3.56 C17.5445056,4.87787483 18.7050533,6.88707306 18.95,9.1 L21,9 C21.5522847,9 22,9.44771525 22,10 C22,10.5522847 21.5522847,11 21,11 L18.95,10.9 C18.7050533,13.1129269 17.5445056,15.1221252 15.75,16.44 L16.87,18.16 C17.14,18.64 17,19.25 16.5,19.53 C16,19.8 15.41,19.64 15.13,19.16 L14.2,17.34 C12.1570653,18.2182945 9.84293475,18.2182945 7.8,17.34 L6.87,19.16 C6.59,19.64 6,19.8 5.5,19.53 C5,19.25 4.86,18.64 5.13,18.16 L6.25,16.44 C4.45549438,15.1221252 3.29494666,13.1129269 3.05,10.9 L1,11 C0.44771525,11 0,10.5522847 0,10 C0,9.44771525 0.44771525,9 1,9 M8.07,9.35 C8.2,8.74 8.53,8.2 9,7.79 L7.34,5.25 C6.08536596,6.21292056 5.2622262,7.63274679 5.05,9.2 L8.07,9.35 M11,7 C11.32,7 11.62,7.05 11.9,7.14 L13.28,4.45 C12.58,4.16 11.81,4 11,4 C10.19,4 9.42,4.16 8.72,4.45 L10.1,7.14 C10.38,7.05 10.68,7 11,7 M13.93,9.35 L16.95,9.2 C16.7377738,7.63274679 15.914634,6.21292056 14.66,5.25 L13,7.79 C13.47,8.2 13.8,8.74 13.93,9.35 M13.93,10.65 C13.8,11.26 13.47,11.8 13,12.21 L14.66,14.75 C15.914634,13.7870794 16.7377738,12.3672532 16.95,10.8 L13.93,10.65 M11,13 C10.68,13 10.38,12.95 10.09,12.86 L8.72,15.55 C9.42,15.84 10.19,16 11,16 C11.81,16 12.58,15.84 13.28,15.55 L11.91,12.86 C11.62,12.95 11.32,13 11,13 M8.07,10.65 L5.05,10.8 C5.27,12.4 6.11,13.81 7.34,14.75 L9,12.21 C8.53,11.8 8.2,11.26 8.07,10.65 L8.07,10.65 Z" id="Shape" fill="#C72C71"></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 12 KiB

View File

@ -0,0 +1,15 @@
<svg width="284" height="36" viewBox="0 0 284 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.4298 35C13.7314 34.8801 12.9943 34.8002 12.2959 34.6403C6.90301 33.5612 3.21721 30.3238 1.19973 25.088C0.578963 23.5293 0.268579 21.8507 0.113388 20.172C-0.235792 16.4551 0.190988 12.858 1.8205 9.50071C4.14836 4.66463 7.91175 1.58713 12.9943 0.428076C16.8352 -0.45121 20.5598 0.0284001 24.0904 1.82694C24.7112 2.14668 25.2932 2.06674 25.9139 2.10671C26.0303 2.10671 26.1079 2.10671 26.3019 2.10671C26.6511 5.02434 26.9615 7.90201 27.3106 10.8196C27.0003 10.8196 26.6511 10.8196 26.3407 10.8196C25.6035 8.86123 24.75 6.98275 23.4697 5.30412C21.8402 3.1059 19.7839 1.66707 17.1068 1.3873C14.5074 1.10752 12.1407 1.82694 10.1232 3.58551C7.75656 5.62386 6.55382 8.38162 5.81667 11.3792C5.1571 14.1769 5.00191 16.9746 5.2347 19.8123C5.50628 22.9698 6.35983 25.9673 8.33852 28.4453C10.2008 30.8034 12.6451 32.2422 15.6325 32.6819C20.0555 33.3613 25.0216 30.4037 26.7675 25.6476C26.8839 25.3678 26.9615 25.128 27.1167 24.8083C27.427 24.8882 27.7374 24.9681 28.0866 25.0481C28.0478 25.2479 28.009 25.4478 27.9702 25.6076C27.1943 28.0057 26.0303 30.124 24.2068 31.8426C22.6937 33.2414 20.909 34.1607 18.9303 34.6003C18.1932 34.7602 17.456 34.8401 16.7577 34.96C15.9041 35 15.1669 35 14.4298 35Z" transform="translate(83.1855)" fill="#092E6E"/>
<path d="M26.4213 23.7407C26.3825 23.9006 26.3437 24.0605 26.3049 24.2203C26.2661 25.6991 26.2273 27.138 26.1497 28.6168C26.1109 30.1355 26.0333 31.6543 25.9945 33.213C17.3426 33.213 8.69071 33.213 0.0387978 33.213C0.0387978 32.8933 0.0387978 32.5735 0.0387978 32.2138C0.543169 32.1739 1.08633 32.1339 1.6295 32.054C2.40545 31.8941 3.22021 31.7742 3.95737 31.4944C4.81092 31.1747 5.1989 30.4553 5.1989 29.496C5.1989 20.903 5.1989 12.31 5.1989 3.71698C5.1989 2.71779 4.77213 1.99838 3.84098 1.63867C3.10382 1.3589 2.28907 1.23899 1.51311 1.07912C1.04754 0.999189 0.543179 0.999189 9.47212e-06 0.959221C9.47212e-06 0.639481 9.47212e-06 0.359708 9.47212e-06 -1.9058e-08C4.84974 -1.9058e-08 9.69945 -1.9058e-08 14.588 -1.9058e-08C14.588 0.279773 14.588 0.599513 14.588 0.919253C13.618 1.03916 12.6481 1.15906 11.6781 1.3589C11.329 1.43883 10.9798 1.5987 10.6306 1.75857C9.89344 2.15825 9.73825 2.87766 9.66065 3.63705C9.66065 3.83688 9.66065 3.99675 9.66065 4.19659C9.66065 13.1094 9.66065 21.9821 9.66065 30.8949C9.66065 31.0947 9.66065 31.2946 9.66065 31.5344C9.85464 31.5344 10.0098 31.5744 10.1262 31.5744C12.1049 31.5744 14.1224 31.6543 16.1011 31.5344C18.3902 31.4145 20.5241 30.815 22.1148 28.9765C23.2399 27.6975 23.9383 26.1787 24.559 24.58C24.8306 23.9006 25.0634 23.1812 25.2962 22.5017C25.6841 22.5017 25.9945 22.5017 26.3437 22.5017C26.4213 22.9014 26.4213 23.341 26.4213 23.7407Z" transform="translate(257.579 0.907684)" fill="#092E6E"/>
<path d="M0 6.09856e-07C21.6492 6.09856e-07 43.2596 6.09856e-07 64.9087 6.09856e-07C64.9087 3.1974 64.9087 6.35484 64.9087 9.55224C43.2984 9.55224 21.688 9.55224 0 9.55224C0 6.39481 0 3.23737 0 6.09856e-07Z" transform="translate(0 24.5285)" fill="#092E6E"/>
<path d="M-4.73606e-06 33.2791C-4.73606e-06 32.8794 -4.73606e-06 32.5197 -4.73606e-06 32.16C0.737154 32.0401 1.43551 31.9602 2.13387 31.8003C2.44426 31.7204 2.75465 31.6005 3.06503 31.4806C3.95738 31.1208 4.34536 30.3615 4.34536 29.4422C4.34536 27.3239 4.34536 25.1657 4.34536 23.0474C4.34536 16.6926 4.34536 10.3377 4.34536 3.98289C4.34536 2.70393 3.91858 1.98451 2.75464 1.6248C1.90109 1.34503 0.969943 1.18516 0.0387954 0.985322C0.0387954 0.745517 0.0387954 0.425777 0.0387954 0.0261012C0.232785 0.0261012 0.465574 0.0261012 0.659563 0.0261012C5.3153 0.0261012 10.0098 -0.0538338 14.6656 0.0660688C18.6617 0.185971 22.3863 1.30506 25.5289 4.02286C27.8956 6.0612 29.3312 8.65909 30.0295 11.7366C30.5339 13.9748 30.6503 16.2529 30.3787 18.5311C29.9907 21.6086 29.0596 24.4862 27.2361 27.0042C25.2574 29.762 22.5803 31.4806 19.4377 32.4398C17.5366 33.0393 15.5579 33.2791 13.5792 33.2791C9.27267 33.2791 4.96612 33.2791 0.698363 33.2791C0.504374 33.2791 0.27158 33.2791 -4.73606e-06 33.2791ZM8.8847 31.6804C10.3202 31.6804 11.7169 31.7603 13.0749 31.6404C14.6656 31.5205 16.2563 31.4006 17.7694 31.0409C20.9508 30.2815 23.1623 28.3231 24.2098 25.0857C24.8694 23.0474 25.141 20.9691 25.2186 18.8508C25.2962 17.0123 25.1798 15.1738 25.141 13.3353C25.1022 11.7366 24.7918 10.2178 24.2874 8.73903C23.6667 6.70068 22.6191 4.98208 20.912 3.66315C18.8557 2.06445 16.4503 1.54487 13.9672 1.385C12.4153 1.30506 10.8634 1.34503 9.31147 1.34503C9.15628 1.34503 8.9623 1.385 8.8071 1.385C8.8847 11.4568 8.8847 21.5286 8.8847 31.6804Z" transform="translate(192.166 0.881592)" fill="#092E6E"/>
<path d="M31.3098 9.55224C20.8344 9.55224 10.4366 9.55224 0 9.55224C0 6.35484 0 3.1974 0 1.52464e-07C10.4366 1.52464e-07 20.8344 1.52464e-07 31.3098 1.52464e-07C31.3098 3.15744 31.3098 6.35484 31.3098 9.55224Z" transform="translate(0 12.6182)" fill="#092E6E"/>
<path d="M-5.92008e-07 9.55224C-5.92008e-07 6.35484 -5.92008e-07 3.1974 -5.92008e-07 1.52464e-07C10.4366 1.52464e-07 20.8344 1.52464e-07 31.271 1.52464e-07C31.271 3.15744 31.271 6.35484 31.271 9.55224C20.8732 9.55224 10.4754 9.55224 -5.92008e-07 9.55224Z" transform="translate(33.5989 12.6182)" fill="#092E6E"/>
<path d="M-9.47212e-06 33.253C-9.47212e-06 32.8933 -9.47212e-06 32.5735 -9.47212e-06 32.2938C1.04753 32.1339 2.05629 32.054 3.02624 31.8142C4.30657 31.5344 5.19892 30.9349 5.16012 29.0564C5.12132 20.7032 5.16012 12.35 5.16012 3.99675C5.16012 2.59789 4.65574 1.79854 3.33662 1.4788C2.25028 1.19903 1.12513 1.07912 -9.47212e-06 0.879286C-9.47212e-06 0.639481 -9.47212e-06 0.359708 -9.47212e-06 1.9058e-08C8.6907 1.9058e-08 17.3814 1.9058e-08 26.1885 1.9058e-08C26.1885 2.39805 26.1885 4.7961 26.1885 7.23412C25.9557 7.23412 25.6453 7.27409 25.2962 7.27409C25.0634 6.63461 24.8306 5.99513 24.559 5.39562C24.0935 4.31649 23.5503 3.23737 22.6191 2.47799C21.8432 1.83851 20.912 1.4788 19.9809 1.43883C16.5667 1.31893 13.1524 1.27896 9.69944 1.23899C9.69944 5.95516 9.69944 10.5514 9.69944 15.2676C10.7082 15.2676 11.7557 15.3076 12.7645 15.2676C13.5404 15.2276 14.3164 15.1877 15.0536 15.0278C16.4115 14.748 17.459 13.9087 18.041 12.6297C18.4678 11.6705 18.7782 10.6713 19.1273 9.71211C19.2049 9.51227 19.2437 9.3524 19.2825 9.1126C19.5929 9.1126 19.8645 9.1126 20.1361 9.1126C20.1361 13.6289 20.1361 18.1453 20.1361 22.7016C19.8645 22.7016 19.5929 22.7016 19.2825 22.7016C19.0885 22.0221 18.8945 21.3027 18.6229 20.6233C18.1962 19.4242 17.7306 18.2652 16.6055 17.5857C15.9847 17.226 15.2863 16.8663 14.588 16.7864C12.9585 16.6265 11.329 16.6265 9.66066 16.5865C9.66066 21.5825 9.66066 26.4985 9.66066 31.4944C9.85464 31.4944 10.0098 31.5344 10.2038 31.5344C13.4241 31.5344 16.6831 31.5744 19.9033 31.4944C21.494 31.4545 23.0847 31.1747 24.3262 30.0156C25.1798 29.2163 25.7229 28.1771 26.1885 27.098C26.4213 26.5784 26.6153 26.0189 26.8481 25.4194C27.1585 25.4593 27.4689 25.4593 27.8568 25.4993C27.7792 28.0972 27.7016 30.6151 27.5853 33.213C18.429 33.253 9.23387 33.253 -9.47212e-06 33.253Z" transform="translate(224.872 0.867706)" fill="#092E6E"/>
<path d="M20.718 21.4226C16.9934 21.4226 13.3076 21.4226 9.46667 21.4226C8.61311 24.0205 7.72076 26.6584 6.86721 29.2962C6.71202 29.7758 6.75082 30.3753 6.82842 30.9349C6.94481 31.6143 7.41038 32.0939 8.03114 32.3337C8.7295 32.6135 9.42786 32.7734 10.165 32.9732C10.2814 33.0132 10.4366 33.0532 10.5918 33.0532C10.5918 33.3729 10.5918 33.6926 10.5918 34.0124C7.0612 34.0124 3.5694 34.0124 2.36803e-06 34.0124C2.36803e-06 33.6926 2.36803e-06 33.3729 2.36803e-06 33.1731C0.814756 32.7734 1.62951 32.4536 2.36667 32.014C3.53061 31.2546 4.38415 30.1355 4.92732 28.8566C5.89726 26.6983 6.78961 24.4601 7.64316 22.2619C10.5142 14.9479 13.3077 7.6338 16.1399 0.31974C16.1787 0.199838 16.2175 0.119903 16.2951 1.19113e-09C16.7995 1.19113e-09 17.3426 1.19113e-09 17.8858 1.19113e-09C18.7006 2.27815 19.5153 4.5563 20.2913 6.83445C22.9295 14.2684 25.5678 21.7423 28.2448 29.1763C28.6328 30.2954 29.1372 31.4145 30.2235 32.014C30.9607 32.4137 31.7366 32.6935 32.5902 33.0532C32.5902 33.253 32.5902 33.6127 32.5902 34.0523C28.1672 34.0523 23.7443 34.0523 19.2825 34.0523C19.2825 33.7726 19.2825 33.4928 19.2825 33.1731C20.0973 33.0532 20.912 32.9333 21.7268 32.7734C21.8432 32.7334 21.9984 32.6935 22.1148 32.6535C23.4727 32.2138 23.9383 31.4145 23.5115 30.0156C22.8519 27.8574 22.1147 25.6991 21.4164 23.5809C21.1836 22.8215 20.9508 22.142 20.718 21.4226ZM20.2137 20.0237C18.623 15.3475 17.071 10.6713 15.5191 6.0351C15.4415 6.0351 15.4027 6.0351 15.3251 6.0351C13.5792 10.6713 11.8333 15.3475 10.0486 20.0237C13.5016 20.0237 16.7995 20.0237 20.2137 20.0237Z" transform="translate(158.14 0.0683899)" fill="#092E6E"/>
<path d="M27.8568 1.9058e-08C27.9732 2.43802 28.0508 4.7961 28.1672 7.23412C27.7792 7.23412 27.4689 7.23412 27.2361 7.23412C26.6153 6.11503 26.0721 4.95598 25.4126 3.91682C24.4814 2.43802 23.1235 1.55873 21.3776 1.43883C19.7093 1.31893 18.041 1.31893 16.2951 1.23899C16.2951 1.55873 16.2951 1.75857 16.2951 1.99838C16.2951 11.071 16.2951 20.1436 16.2951 29.2562C16.2951 30.4153 16.7607 31.1747 17.847 31.5344C18.623 31.7742 19.4377 31.8941 20.2525 32.054C20.7568 32.1339 21.2612 32.1739 21.8044 32.2138C21.8044 32.5336 21.8044 32.8533 21.8044 33.213C16.6831 33.213 11.5229 33.213 6.36284 33.213C6.36284 32.8933 6.36284 32.5736 6.36284 32.2138C6.86721 32.1739 7.41038 32.0939 7.95355 32.054C9.00109 31.9341 10.0098 31.8142 10.9022 31.2147C11.4842 30.8549 11.7557 30.3354 11.7557 29.6559C11.7557 28.0572 11.7557 26.4985 11.7557 24.8998C11.7557 17.3059 11.7557 9.71211 11.7557 2.11828C11.7557 1.87847 11.7557 1.63867 11.7557 1.31893C10.7858 1.31893 9.85465 1.27896 8.9623 1.31893C7.99235 1.3589 6.98361 1.3589 6.01366 1.51877C4.50055 1.75857 3.4142 2.71779 2.63825 4.03672C2.01748 5.07588 1.51311 6.19497 0.931145 7.31406C0.698358 7.31406 0.387978 7.31406 0 7.31406C0.0775956 4.87604 0.193994 2.47799 0.271589 0.0399675C9.50547 -2.08447e-08 18.6617 1.9058e-08 27.8568 1.9058e-08Z" transform="translate(132.883 0.867706)" fill="#092E6E"/>
<path d="M14.976 32.2138C14.976 32.5336 14.976 32.8533 14.976 33.213C10.0098 33.213 5.00492 33.213 0 33.213C0 32.8933 0 32.5336 0 32.2538C1.04754 32.0939 2.05628 31.974 3.10383 31.8142C3.41421 31.7742 3.72459 31.6543 3.99617 31.5344C4.69453 31.2146 5.16011 30.6551 5.1989 29.8158C5.1989 29.4561 5.2765 29.1363 5.2765 28.7766C5.2765 20.6632 5.2765 12.5498 5.2765 4.4364C5.2765 3.99675 5.2377 3.55711 5.1601 3.11747C5.04371 2.43802 4.65574 1.91844 4.03497 1.7186C3.22022 1.43883 2.36667 1.23899 1.55191 1.07912C1.04754 0.999189 0.543169 0.999189 0 0.959221C0 0.639481 0 0.359708 0 -1.9058e-08C4.96612 -1.9058e-08 9.93224 -1.9058e-08 14.976 -1.9058e-08C14.976 0.31974 14.976 0.599513 14.976 0.919253C13.9672 1.03916 12.9973 1.15906 12.0273 1.3589C11.4066 1.4788 10.747 1.67864 10.3202 2.23818C10.0874 2.55792 9.93224 2.99757 9.81584 3.43721C9.73825 3.79692 9.77705 4.15662 9.77705 4.51633C9.77705 12.5898 9.81585 20.7032 9.77705 28.7766C9.77705 30.8949 10.2426 31.5744 12.5317 31.9341C13.3464 32.014 14.1612 32.0939 14.976 32.2138Z" transform="translate(114.066 0.907684)" fill="#092E6E"/>
<path d="M-2.36803e-06 9.55224C-2.36803e-06 6.35484 -2.36803e-06 3.1974 -2.36803e-06 1.9058e-08C4.30656 1.9058e-08 8.61312 1.9058e-08 12.9585 1.9058e-08C12.9585 3.15744 12.9585 6.31487 12.9585 9.55224C8.65191 9.55224 4.34535 9.55224 -2.36803e-06 9.55224Z" transform="translate(51.9503 0.667908)" fill="#092E6E"/>
<path d="M12.9197 9.55224C8.61311 9.55224 4.34536 9.55224 0 9.55224C0 6.35484 0 3.1974 0 1.9058e-08C4.26776 1.9058e-08 8.57432 1.9058e-08 12.9197 1.9058e-08C12.9197 3.15744 12.9197 6.31487 12.9197 9.55224Z" transform="translate(0 0.667908)" fill="#092E6E"/>
<path d="M12.8421 1.9058e-08C12.8421 3.1974 12.8421 6.35484 12.8421 9.55224C8.53552 9.55224 4.26776 9.55224 -5.92008e-07 9.55224C-5.92008e-07 6.35484 -5.92008e-07 3.1974 -5.92008e-07 1.9058e-08C4.26776 1.9058e-08 8.53552 1.9058e-08 12.8421 1.9058e-08Z" transform="translate(26.0333 0.667908)" fill="#092E6E"/>
</svg>

After

Width:  |  Height:  |  Size: 12 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 581.68 158.94"><defs><style>.cls-1,.cls-2{fill:#2c2f33;}.cls-1,.cls-3,.cls-4,.cls-5{fill-rule:evenodd;}.cls-3{fill:url(#Sunrise);}.cls-4{fill:url(#Sunrise-2);}.cls-5{fill:url(#Sunrise-3);}</style><linearGradient id="Sunrise" x1="73.6" y1="12.19" x2="619.56" y2="12.19" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f68c21"/><stop offset="1" stop-color="#f16324"/></linearGradient><linearGradient id="Sunrise-2" x1="73.6" y1="146.75" x2="619.56" y2="146.75" xlink:href="#Sunrise"/><linearGradient id="Sunrise-3" x1="73.6" y1="79.22" x2="619.56" y2="79.22" xlink:href="#Sunrise"/></defs><title>18_Criteo_Brand_Logo</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M117.52,157.79H101.68V63.42h15.84V75c5.61-8,15-12.6,26-12.6a44.27,44.27,0,0,1,5.65.37l1.16.16V79.82l-1.68-.42a37.23,37.23,0,0,0-8.48-.84c-13.3,0-22.6,9.8-22.6,23.84Z"/><path class="cls-1" d="M301.29,157.63c15.6,0,26.86-4.85,36.52-15.71l.83-.93-10.12-10.43-1,1c-7.16,7.6-13.75,12-26.26,12-17.57,0-29.06-11.3-30.25-29.59h71.25l.09-1.26c.17-2.63.17-5.54.17-5.67,0-12.86-4-24.62-11.22-33.11-7.64-9-18.15-13.73-30.39-13.73-27,0-45.81,20.55-45.81,50v.7C255.13,138.85,273.68,157.63,301.29,157.63ZM272,100c1.58-13.8,14.27-24.79,29-24.79,13.66,0,24.85,11,25.53,24.79Z"/><rect class="cls-2" x="165.7" y="63.42" width="15.84" height="94.38"/><path class="cls-1" d="M235.8,158.94c-4.85,0-12-.5-17.67-4.83-6.18-4.68-9.32-12.89-9.32-24.38V41.5h15.84V63.35h20.6V78.29h-20.6v51.44c0,11.88,4.2,14.26,11,14.26a46.16,46.16,0,0,0,8.07-.52l1.56-.25v14.55l-1,.25A33.15,33.15,0,0,1,235.8,158.94Z"/><path class="cls-1" d="M401,158.94a47.8,47.8,0,0,0,34.12-14,49.55,49.55,0,0,0,14.21-35.39,49.55,49.55,0,0,0-14.21-35.39,48.64,48.64,0,0,0-68.23,0,49.54,49.54,0,0,0-14.2,35.39A49.54,49.54,0,0,0,366.91,145,47.81,47.81,0,0,0,401,158.94Zm0-83.78A31.53,31.53,0,0,1,424.28,85c5.94,6.32,9.22,15.07,9.22,24.62s-3.28,18.29-9.22,24.61a32.49,32.49,0,0,1-46.51,0c-5.94-6.32-9.22-15.06-9.22-24.61s3.28-18.3,9.22-24.62A31.52,31.52,0,0,1,401,75.16Z"/><path class="cls-1" d="M48.65,158.94a48.32,48.32,0,0,1-34.38-14A49.42,49.42,0,0,1,0,109.58,49.4,49.4,0,0,1,14.27,74.19a48.33,48.33,0,0,1,34.38-14c13.8,0,25.77,4.81,34.61,13.92l.85.88L74.42,86.49l-1-1.09C67,78.7,58.47,75.16,48.65,75.16A32,32,0,0,0,25.15,85c-6,6.32-9.31,15.06-9.31,24.61s3.31,18.28,9.31,24.6A32,32,0,0,0,48.65,144c9.82,0,18.37-3.54,24.73-10.23l1-1.1,9.69,11.48-.85.88C74.42,154.13,62.46,158.94,48.65,158.94Z"/><path class="cls-3" d="M173.63,24.37a12.19,12.19,0,1,1,12.1-12.18A12.17,12.17,0,0,1,173.63,24.37Z"/><path class="cls-4" d="M569.58,158.94a12.19,12.19,0,1,1,12.1-12.2A12.17,12.17,0,0,1,569.58,158.94Z"/><path class="cls-5" d="M535.12,141h-32.2a15.08,15.08,0,0,1-15.07-15.08V31.15A24.68,24.68,0,0,0,463.18,6.48H208.29v11H461.81a15.07,15.07,0,0,1,15.07,15.07v94.77A24.68,24.68,0,0,0,501.55,152h33.57Z"/></g></g></svg>

After

Width:  |  Height:  |  Size: 2.9 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.3 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 36 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 60 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 8.9 KiB

View File

@ -0,0 +1,15 @@
<svg width="71" height="71" viewBox="0 0 71 71" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M50.16 0H20C8.9543 0 0 8.9543 0 20V50.16C0 61.2057 8.9543 70.16 20 70.16H50.16C61.2057 70.16 70.16 61.2057 70.16 50.16V20C70.16 8.9543 61.2057 0 50.16 0Z" fill="url(#paint0_linear)"/>
<path d="M44.8072 31.82H42.7472C42.1372 29.4497 40.8744 27.298 39.1023 25.6098C37.3302 23.9215 35.1199 22.7643 32.7228 22.2698C30.3257 21.7752 27.838 21.9632 25.5424 22.8123C23.2468 23.6614 21.2356 25.1375 19.7372 27.0729C18.2389 29.0083 17.3137 31.3252 17.0668 33.7603C16.8198 36.1954 17.261 38.6509 18.3403 40.8477C19.4196 43.0444 21.0936 44.8943 23.1719 46.187C25.2503 47.4796 27.6497 48.1632 30.0972 48.16H44.8072C46.9741 48.16 49.0521 47.2992 50.5843 45.7671C52.1165 44.2349 52.9772 42.1568 52.9772 39.99C52.9772 37.8232 52.1165 35.7451 50.5843 34.2129C49.0521 32.6808 46.9741 31.82 44.8072 31.82V31.82Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<linearGradient id="paint0_linear" x1="0" y1="35.08" x2="70.16" y2="35.08" gradientUnits="userSpaceOnUse">
<stop stop-color="#C4206D"/>
<stop offset="1" stop-color="#96154F"/>
</linearGradient>
<clipPath id="clip0">
<rect width="70.16" height="70.16" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 70.16 70.16"><defs><style>.cls-1{fill:url(#linear-gradient);}.cls-2,.cls-3{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;}.cls-2{stroke-width:2px;}.cls-3{stroke-width:1.5px;}.cls-4{fill:#fff;}</style><linearGradient id="linear-gradient" y1="35.08" x2="70.16" y2="35.08" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ca2171"/><stop offset="1" stop-color="#8e134a"/></linearGradient></defs><rect class="cls-1" width="70.16" height="70.16" rx="20"/><circle class="cls-2" cx="51.23" cy="18.07" r="5.33"/><circle class="cls-2" cx="51.23" cy="51.93" r="5.33"/><circle class="cls-3" cx="22.05" cy="33.91" r="2.35"/><path class="cls-3" d="M27.83,36.25a1.29,1.29,0,0,0,.26,1.42l.05,0a1.56,1.56,0,0,1,0,2.21h0a1.55,1.55,0,0,1-2.21,0h0l0,0a1.3,1.3,0,0,0-1.43-.26,1.29,1.29,0,0,0-.78,1.18v.13a1.57,1.57,0,1,1-3.13,0v-.07A1.35,1.35,0,0,0,18.28,40l-.05,0A1.56,1.56,0,0,1,16,40h0a1.55,1.55,0,0,1,0-2.21h0l0,0a1.3,1.3,0,0,0,.26-1.43,1.29,1.29,0,0,0-1.18-.78H15a1.57,1.57,0,1,1,0-3.13h.07a1.27,1.27,0,0,0,1.18-.84A1.29,1.29,0,0,0,16,30.14L16,30.09a1.56,1.56,0,0,1,0-2.21h0a1.57,1.57,0,0,1,2.22,0h0l0,0a1.3,1.3,0,0,0,1.43.26h.06A1.29,1.29,0,0,0,20.48,27v-.13a1.57,1.57,0,1,1,3.13,0v.07a1.3,1.3,0,0,0,2.2.92l.05-.05a1.56,1.56,0,0,1,2.21,0h0a1.57,1.57,0,0,1,0,2.22h0l0,0a1.3,1.3,0,0,0-.26,1.43v.06a1.29,1.29,0,0,0,1.18.78h.13a1.57,1.57,0,1,1,0,3.13H29A1.29,1.29,0,0,0,27.83,36.25Z"/><circle class="cls-4" cx="36.56" cy="27.78" r="1.5"/><circle class="cls-4" cx="36.56" cy="40.78" r="1.5"/><circle class="cls-4" cx="41.56" cy="23.78" r="1.5"/><circle class="cls-4" cx="41.56" cy="44.78" r="1.5"/></svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 70.16 70.16"><defs><style>.cls-1{fill:url(#linear-gradient);}.cls-2{fill:#ca2171;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style><linearGradient id="linear-gradient" y1="35.08" x2="70.16" y2="35.08" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ca2171"/><stop offset="1" stop-color="#8e134a"/></linearGradient></defs><rect class="cls-1" width="70.16" height="70.16" rx="20"/><polygon class="cls-2" points="48.5 31 40 31 40 22.5 31 22.5 31 31 22.5 31 22.5 40 31 40 31 48.5 40 48.5 40 40 48.5 40 48.5 31"/></svg>

After

Width:  |  Height:  |  Size: 689 B

View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 70.16 70.16"><defs><style>.cls-1{fill:url(#linear-gradient);}.cls-2{fill:#fff;}.cls-3{fill:url(#linear-gradient-2);}</style><linearGradient id="linear-gradient" x1="-1.21" y1="18.16" x2="71.37" y2="52" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ca2171"/><stop offset="1" stop-color="#8e134a"/></linearGradient><linearGradient id="linear-gradient-2" x1="19.49" y1="34" x2="48.51" y2="34" xlink:href="#linear-gradient"/></defs><rect class="cls-1" width="70.16" height="70.16" rx="20"/><g id="layer1"><path id="path3055" class="cls-2" d="M50.32,23.4a2.57,2.57,0,0,0-1.42-1.77L35.14,15.06a2.7,2.7,0,0,0-1.28-.26h0a2.56,2.56,0,0,0-1,.26L19.09,21.63a2.64,2.64,0,0,0-1.42,1.77L14.28,38.17a2.61,2.61,0,0,0,.35,2l.15.21,9.53,11.84a2.63,2.63,0,0,0,2.05,1H41.64a2.65,2.65,0,0,0,2.06-1l9.52-11.84a2.6,2.6,0,0,0,.5-2.21"/><path id="path3059" class="cls-3" d="M34,19.83a.87.87,0,0,0-.82.91v0a1.61,1.61,0,0,0,0,.22,6.37,6.37,0,0,0,.11.78,7.27,7.27,0,0,1,.09,1.49,1,1,0,0,1-.27.43l0,.35a9.78,9.78,0,0,0-1.49.23,10.55,10.55,0,0,0-5.38,3.07l-.3-.21a.64.64,0,0,1-.48-.05,7.52,7.52,0,0,1-1.11-1,7.44,7.44,0,0,0-.55-.58l-.18-.14a1,1,0,0,0-.57-.22.79.79,0,0,0-.66.29.89.89,0,0,0,.2,1.22h0l.18.14a6.71,6.71,0,0,0,.68.4,8.25,8.25,0,0,1,1.22.86.93.93,0,0,1,.17.48l.26.23a10.72,10.72,0,0,0-1.68,7.43l-.34.1c-.09.12-.22.31-.36.36a7.91,7.91,0,0,1-1.47.24,7.23,7.23,0,0,0-.79.07l-.22,0h0a.83.83,0,1,0,.36,1.61h0l.21-.05a5,5,0,0,0,.74-.28A7.22,7.22,0,0,1,23,37.85a.87.87,0,0,1,.47.16l.36-.06a10.72,10.72,0,0,0,4.75,5.93l-.15.36a.79.79,0,0,1,.08.47,8.54,8.54,0,0,1-.75,1.34,5.41,5.41,0,0,0-.44.66l-.11.22a.88.88,0,0,0,.35,1.17.87.87,0,0,0,1.14-.47h0a2,2,0,0,0,.1-.21,5.9,5.9,0,0,0,.24-.75,5.67,5.67,0,0,1,.64-1.48A.65.65,0,0,1,30,45l.19-.33a10.64,10.64,0,0,0,6.19.44,10.48,10.48,0,0,0,1.41-.42c0,.09.15.27.18.31a.67.67,0,0,1,.42.26A7.3,7.3,0,0,1,39,46.65c.08.26.13.49.24.76l.1.21a.83.83,0,1,0,1.49-.71l-.1-.22a6.72,6.72,0,0,0-.45-.65,8.12,8.12,0,0,1-.73-1.31.66.66,0,0,1,.07-.49,2.32,2.32,0,0,1-.14-.33,10.69,10.69,0,0,0,4.75-6l.35.06a.64.64,0,0,1,.46-.17,8,8,0,0,1,1.44.42,6.34,6.34,0,0,0,.74.29l.21,0h0A.83.83,0,1,0,47.79,37l-.24,0a7.23,7.23,0,0,0-.79-.07,7.91,7.91,0,0,1-1.47-.24.88.88,0,0,1-.36-.36l-.33-.09a10.91,10.91,0,0,0-.17-3.85,10.7,10.7,0,0,0-1.55-3.57l.3-.26a.62.62,0,0,1,.15-.46,7,7,0,0,1,1.22-.86c.24-.14.45-.23.69-.4,0,0,.12-.11.18-.15a.86.86,0,0,0,.2-1.21.87.87,0,0,0-1.23-.08l-.18.15a7.08,7.08,0,0,0-.54.57,7.58,7.58,0,0,1-1.11,1,.91.91,0,0,1-.5.05l-.32.23A10.77,10.77,0,0,0,34.91,24c0-.11,0-.31,0-.37a.63.63,0,0,1-.27-.41,7.27,7.27,0,0,1,.09-1.49,6.37,6.37,0,0,0,.11-.78,1.92,1.92,0,0,0,0-.24.87.87,0,0,0-.82-.91Zm-1,6.38-.25,4.33h0a.74.74,0,0,1-.73.7.71.71,0,0,1-.43-.14h0L28,28.59a8.44,8.44,0,0,1,4.09-2.22C32.38,26.3,32.68,26.25,33,26.21Zm2.06,0A8.62,8.62,0,0,1,40,28.59l-3.52,2.5h0a.71.71,0,0,1-1-.13.73.73,0,0,1-.16-.42h0Zm-8.31,4L30,33.1v0a.73.73,0,0,1,.09,1,.67.67,0,0,1-.38.24v0l-4.15,1.2a8.49,8.49,0,0,1,1.21-5.37Zm14.54,0a8.72,8.72,0,0,1,1.06,2.59,8.63,8.63,0,0,1,.18,2.76l-4.17-1.2v0a.72.72,0,0,1-.52-.86A.74.74,0,0,1,38,33.1h0l3.22-2.88Zm-7.92,3.11h1.32l.82,1-.29,1.29L34,36.21l-1.19-.57-.3-1.29Zm4.24,3.53a.47.47,0,0,1,.17,0h0l4.29.72a8.47,8.47,0,0,1-3.44,4.32l-1.66-4h0a.72.72,0,0,1,.36-.94.68.68,0,0,1,.27-.07Zm-7.2,0a.75.75,0,0,1,.7.57.77.77,0,0,1,0,.45h0l-1.65,4A8.57,8.57,0,0,1,26,37.59l4.25-.72h0l.14,0ZM34,38.61a.67.67,0,0,1,.34.07.71.71,0,0,1,.33.31h0l2.1,3.79a7.39,7.39,0,0,1-.84.23,8.5,8.5,0,0,1-4.65-.24L33.36,39h0A.72.72,0,0,1,34,38.61Z"/></g></svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 70.16 70.16"><defs><style>.cls-1{fill:url(#linear-gradient);}.cls-2{fill:#fff;}</style><linearGradient id="linear-gradient" y1="35.08" x2="70.16" y2="35.08" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ca2171"/><stop offset="1" stop-color="#8e134a"/></linearGradient></defs><rect class="cls-1" width="70.16" height="70.16" rx="20"/><path class="cls-2" d="M35.14,50.16a1.15,1.15,0,0,1-.41-.08,1.13,1.13,0,0,1-.36-.24L30,45.51a1.08,1.08,0,0,1,.76-1.85,1.09,1.09,0,0,1,.77.31l2.49,2.49V35.71H23.3l2.49,2.48a1.12,1.12,0,0,1,.32.77,1.09,1.09,0,0,1-1.86.76l-4.33-4.33a1.13,1.13,0,0,1-.24-.36,1.09,1.09,0,0,1,0-.82,1.13,1.13,0,0,1,.24-.36l4.33-4.33a1.09,1.09,0,0,1,1.86.76,1.1,1.1,0,0,1-.32.77L23.3,33.54H34.06V23.06a1.08,1.08,0,1,1,2.16,0V33.54H47l-2.49-2.49a1.09,1.09,0,0,1,0-1.53,1.09,1.09,0,0,1,1.54,0l4.33,4.33a1.13,1.13,0,0,1,.24.36,1.06,1.06,0,0,1,0,.82,1.13,1.13,0,0,1-.24.36L46,39.72A1.08,1.08,0,0,1,44.18,39a1.11,1.11,0,0,1,.31-.77L47,35.71H36.22V46.46L38.71,44a1.11,1.11,0,0,1,.77-.31,1.08,1.08,0,0,1,.76,1.85l-4.33,4.33a1.13,1.13,0,0,1-.36.24A1.15,1.15,0,0,1,35.14,50.16Z"/></svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,11 @@
<svg width="71" height="71" viewBox="0 0 71 71" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M50.16 0H20C8.9543 0 0 8.9543 0 20V50.16C0 61.2057 8.9543 70.16 20 70.16H50.16C61.2057 70.16 70.16 61.2057 70.16 50.16V20C70.16 8.9543 61.2057 0 50.16 0Z" fill="url(#paint0_linear)"/>
<path d="M35.59 50.16C44.1946 50.16 51.17 43.1846 51.17 34.58C51.17 25.9754 44.1946 19 35.59 19C26.9854 19 20.01 25.9754 20.01 34.58C20.01 43.1846 26.9854 50.16 35.59 50.16Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20 34.58H51.17H20ZM35.59 19C39.4853 23.2673 41.6991 28.8035 41.82 34.58C41.6991 40.3565 39.4853 45.8927 35.59 50.16C31.6879 45.8962 29.4701 40.3586 29.35 34.58C29.4701 28.8014 31.6879 23.2638 35.59 19V19Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear" x1="0" y1="35.08" x2="70.16" y2="35.08" gradientUnits="userSpaceOnUse">
<stop stop-color="#C4206D"/>
<stop offset="1" stop-color="#96154F"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@ -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',
<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'),
},
]}
/>
<CaseStudyCarousel
title="Trusted by startups and the worlds 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 weve 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',
},
],
}}
/>
<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:
'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="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>
{/* 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>
'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>
)
}

View File

@ -1,449 +1,31 @@
.large-padding {
padding: 120px 0;
}
.small-padding {
padding: 56px;
}
.bg-light {
background: #f7f8fa !important;
}
#companies-using-consul h2 {
margin-bottom: 24px;
}
#static-dynamic {
& .g-section-header {
margin-bottom: 64px;
}
}
.g-use-cases {
margin: 48px 0 8px;
@media (min-width: 768px) {
display: flex;
justify-content: center;
margin: 0 20px;
.p-home {
& > section {
padding-top: 100px;
padding-bottom: 100px;
}
& .button {
background: #ca2171;
border-radius: 1px;
box-sizing: border-box;
color: #ffffff;
display: inline-block;
font-family: 'gilmer-web', 'Gilmer', Geneva, Tahoma, Helvetica, Verdana,
sans-serif;
font-size: 0.938rem;
font-weight: 500;
line-height: 1.6em;
margin-bottom: 4px;
padding: 14px 20px;
text-decoration: none;
}
& .use-cases {
padding-top: 128px;
padding-bottom: 64px;
& img {
width: 51%;
@media (min-width: 768px) {
width: 80%;
}
}
& h3 {
font-weight: 600;
margin: 40px 0 0;
& span {
display: block;
font-weight: 300;
}
}
& p {
margin-top: 0.5em;
@media (min-width: 768px) {
margin-top: 1em;
}
}
& > div {
padding: 0 16px;
position: relative;
text-align: center;
@media (min-width: 768px) {
padding: 0 20px;
width: 33.33333%;
@media (max-width: 800px) {
padding-top: 88px;
}
@media (min-width: 992px) {
display: flex;
flex-direction: column;
justify-content: space-between;
}
& + div {
margin-top: 56px;
@media (min-width: 768px) {
margin-top: 0;
}
}
}
& .button {
@media (min-width: 768px) {
margin-top: 22px;
}
}
}
.g-logo-grid {
align-items: center;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
max-width: 990px;
text-align: center;
& > div {
width: 33%;
& img {
width: 100%;
}
@media (max-width: 768px) {
width: 50%;
}
}
}
.g-text-asset {
text-align: center;
@media (min-width: 768px) {
align-content: space-between;
display: flex;
justify-content: center;
margin: 0 -20px;
text-align: left;
}
&.reverse {
flex-direction: row-reverse;
& > div:first-child > div {
margin-left: auto;
@media (min-width: 768px) {
padding: 0 24px 0 0;
}
@media (min-width: 992px) {
padding-right: 32px;
}
}
}
&.large {
margin-bottom: -56px;
@media (min-width: 768px) {
margin-bottom: -96px;
}
@media (min-width: 992px) {
margin-bottom: -120px;
}
& > div:last-child {
justify-content: unset;
}
& picture > img,
& img {
width: 145%;
vertical-align: middle;
}
}
& > div {
@media (min-width: 768px) {
align-items: center;
margin: 0 auto;
display: flex;
padding: 0 20px;
width: 50%;
}
&:first-child {
margin-bottom: 32px;
@media (min-width: 768px) {
margin-bottom: 0;
}
& > div {
@media (min-width: 768px) {
margin-left: 0;
max-width: 454px;
padding: 0 0 0 24px;
}
@media (min-width: 992px) {
padding-left: 32px;
}
& a {
color: #1563ff;
&:focus,
&:hover {
color: #2c72fe;
& path {
fill: #2c72fe;
}
}
& svg {
margin-left: 10px;
}
}
& .g-use-cases {
& .icon {
min-height: 140px;
margin-bottom: 25px;
}
}
&:last-child {
justify-content: center;
}
& img,
& picture > img {
width: 100%;
&.shadow {
box-shadow: 0 40px 48px -20px rgba(63, 68, 85, 0.4);
}
}
& > svg {
max-width: 100%;
}
&.code-sample > div {
box-shadow: 0 40px 48px -20px rgba(63, 68, 85, 0.4);
color: var(--white);
& h2 {
margin: 0;
text-align: left;
width: 100%;
& span {
background: #252937;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
display: block;
height: 32px;
@media (min-width: 768px) {
height: 40px;
}
}
& .code {
background: #1e212a;
overflow: auto;
padding: 16px 24px 32px;
width: 100%;
& code {
background: #1e212a;
border-radius: 0;
color: var(--white);
white-space: pre;
&.keyword {
color: #be5580;
}
}
}
}
&.logos {
justify-content: center;
& > div {
align-items: center;
display: flex;
flex-direction: column;
& img,
picture {
margin: 30px 0;
@media (max-width: 767px) {
margin: 15px 0;
max-width: 51%;
}
}
}
}
}
& h3 {
margin: 0 0 16px 0;
@media (min-width: 768px) {
margin-top: 16px;
}
}
& i {
list-style-type: none;
margin: 16px;
text-align: left;
@media (min-width: 768px) {
margin: 16px 0;
}
&:before {
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="23" height="22" viewBox="0 0 23 22"><path fill="#CA2171" d="M21.293 1.298L11 11.591 8.707 9.298a1 1 0 1 0-1.414 1.414l3 3a.997.997 0 0 0 1.414 0l11-11a1 1 0 1 0-1.414-1.414M22 10.075v.93a10.925 10.925 0 0 1-3.227 7.777A10.926 10.926 0 0 1 11 22h-.007C4.929 21.996-.003 17.058 0 10.993a10.927 10.927 0 0 1 3.226-7.776A10.927 10.927 0 0 1 10.999 0h.008c1.551 0 3.055.32 4.47.952a1 1 0 1 1-.815 1.826A8.926 8.926 0 0 0 11.006 2H11a8.938 8.938 0 0 0-6.36 2.632A8.938 8.938 0 0 0 2 10.994c-.003 4.963 4.032 9.003 8.995 9.006H11c2.401 0 4.66-.935 6.36-2.633A8.936 8.936 0 0 0 20 11.005v-.93a1 1 0 1 1 2 0"/></svg>');
content: '';
display: block;
float: left;
height: 24px;
margin: 4px 0 0 -40px;
width: 24px;
}
}
}
#static-dynamic {
& .static-callout {
width: 85%;
}
& #index-dynamic-animation {
width: 85%;
margin: 0 auto;
& svg {
width: 100%;
height: auto !important;
}
}
}
.home-cta-section {
color: var(--white);
@media (min-width: 768px) {
display: flex;
}
& > div {
display: flex;
justify-content: center;
padding: 64px 24px;
overflow: hidden;
@media (min-width: 768px) {
padding-top: 80px;
padding-bottom: 80px;
width: 50%;
}
@media (min-width: 992px) {
padding-top: 96px;
padding-bottom: 96px;
width: 50%;
}
& > svg {
width: 135px;
}
&:first-child {
background: var(--consul);
position: relative;
&:after {
content: '';
background: url('/img/consul-connect/mesh.svg') top center;
background-size: cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.2;
transform: scale(1.3, 1.3);
}
}
&:last-child {
background: var(--gray-1);
}
& > div {
display: flex;
flex-direction: column;
max-width: 564px;
text-align: center;
width: 100%;
z-index: 1;
& div:first-child {
height: 50px;
width: auto;
}
& p {
flex: 1 0 auto;
margin: 24px 0 32px;
margin-bottom: 64px;
@media (max-width: 800px) {
margin-bottom: 48px;
}
}
}
}
.button {
background: #ca2171;
border-radius: 1px;
box-sizing: border-box;
color: #ffffff;
display: inline-block;
font-family: 'gilmer-web', 'Gilmer', Geneva, Tahoma, Helvetica, Verdana,
sans-serif;
font-size: 0.938rem;
font-weight: 500;
line-height: 1.6em;
margin-bottom: 4px;
padding: 14px 20px;
text-decoration: none;
}
.button.white {
background: #ffffff;
color: #000000;
}
.button.secondary.white {
border: 1px solid rgba(255, 255, 255, 0.24);
color: #ffffff;
}
.button.secondary {
background: transparent;
border: 1px solid rgba(29, 30, 35, 0.2);
color: #000000;
padding: 13px 19px;
}
/* */

View File

@ -1,2 +1,3 @@
import Homepage from './home'
export default Homepage

View File

@ -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>
</>
)
}

View File

@ -18,6 +18,7 @@
@import '~@hashicorp/react-hero/dist/style.css';
@import '~@hashicorp/react-section-header/dist/style.css';
@import '~@hashicorp/react-logo-grid/dist/style.css';
@import '~@hashicorp/react-product-features-list/dist/style.css';
@import '~@hashicorp/react-product-downloader/dist/style.css';
@import '~@hashicorp/react-vertical-text-block-list/dist/style.css';
@import '~@hashicorp/react-docs-sidenav/dist/style.css';
@ -37,17 +38,24 @@
@import '~@hashicorp/react-tabs/dist/style.css';
@import '~@hashicorp/react-code-block/dist/style.css';
@import '~@hashicorp/react-alert-banner/dist/style.css';
@import '~@hashicorp/react-use-cases/dist/style.css';
@import '~@hashicorp/react-featured-slider/dist/style.css';
/* Local Components */
@import '../components/basic-hero/style.css';
@import '../components/enterprise-comparison/style.css';
@import '../components/footer/style.css';
@import '../components/before-after/style.css';
@import '../components/tabs/style.css';
@import '../components/learn-callout/style.css';
@import '../components/case-study-carousel/style.css';
/* Layouts */
@import '../layouts/use-cases/style.css';
/* Local Pages */
@import './downloads/style.css';
@import './community/style.css';
@import './home/style.css';
@import './discovery/style.css';
/* Print Styles */
@import './print.css';

BIN
website/pages/use-cases/img/centralized-service-registry.png (Stored with Git LFS) Normal file

Binary file not shown.

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 79 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 14 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 63 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 79 KiB

BIN
website/pages/use-cases/img/flexible-architecture.png (Stored with Git LFS) Normal file

Binary file not shown.

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 17 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 25 KiB

View File

@ -0,0 +1,19 @@
<svg width="979" height="201" viewBox="0 0 979 201" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M102.403 99.9767L107.105 97.3595L163.53 136.094L102.403 99.9767Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M99.2677 97.8828L95.088 95.789L99.7902 21.9844L99.2677 97.8828Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M94.5653 97.8827L75.7567 113.062L98.2226 99.9764L94.5653 97.8827Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M100.313 0C44.9317 0 0 45.0156 0 100.5C0 155.984 44.9317 201 100.313 201C155.693 201 200.625 155.984 200.625 100.5C201.148 45.0156 156.216 0 100.313 0ZM91.9532 93.6953L100.313 9.94531H100.835L101.88 97.8828L115.986 89.5078L101.358 9.94531C150.991 10.4688 191.221 50.7734 191.221 100.5C191.221 116.727 187.041 131.383 179.727 144.469L117.031 91.6016L111.284 94.7422L179.727 144.992C179.727 145.516 179.204 145.516 179.204 146.039L102.402 101.547V117.25L178.682 146.562C163.008 172.734 133.75 190.531 100.835 190.531C67.92 190.531 39.1846 172.734 22.9883 146.562L99.2677 117.773V102.07L22.4658 146.039C22.4658 145.516 21.9434 145.516 21.9434 144.992L89.8634 95.2656L84.1163 92.125L21.4209 144.469C14.1065 131.383 9.92677 116.727 9.92677 100.5C9.92677 51.2969 49.1114 10.9922 98.2227 9.94531L86.2061 90.0313L91.9532 93.6953Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M542.315 107.305C542.315 89.5077 534.478 75.3749 517.237 75.3749C501.563 75.3749 492.159 89.5077 492.159 107.305C492.159 125.101 499.473 139.234 517.237 139.234C533.956 139.234 539.18 130.859 541.793 117.25H536.045C535.523 121.961 532.388 133.476 519.849 133.476C505.743 134 504.698 115.68 505.22 106.781V102.07C505.22 96.8358 504.698 80.6093 517.759 80.6093C528.209 80.6093 529.776 94.2186 529.776 102.07H505.22V106.781H542.315V107.305Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M248.692 53.3907V57.5782H252.349C254.961 57.5782 258.618 57.5782 258.618 61.2423L257.573 128.766C257.573 131.383 256.529 134 251.304 134H247.647V138.188H272.725V134H268.545C265.41 134 263.321 132.953 263.321 128.766L264.365 64.3829L291.011 134H293.623L320.791 63.8595L321.836 129.289C321.836 131.383 319.746 134.524 316.089 134.524H310.865V138.711H342.212V134.524H338.555C335.943 134.524 332.808 132.953 332.808 129.813L331.763 63.3361C331.763 61.2423 334.375 58.6251 336.465 58.6251H341.167V54.4376H318.701L295.191 115.68L271.68 53.3907H248.692Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M423.194 137.664V134.523H420.582C418.492 134.523 414.312 134 414.312 129.289V96.8358C414.312 86.8905 419.537 82.703 424.761 82.703C426.851 82.703 427.896 83.7499 427.374 87.4139C426.851 91.078 429.986 93.6952 432.598 93.1718C435.211 93.1718 438.868 92.6483 438.345 85.3202C437.823 78.5155 433.643 75.3749 426.851 75.3749C421.627 75.3749 416.924 79.0389 415.879 80.6093C414.312 82.703 412.745 81.6561 412.222 79.5624C412.222 77.4686 411.177 74.8514 408.565 75.8983C403.34 77.4686 398.116 78.5155 393.936 78.5155V81.1327C404.385 80.6093 403.34 85.8436 403.34 88.4608V129.289C403.34 134 399.161 134.523 397.071 134.523H393.414V137.664H423.194Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M478.574 79.5625C474.917 76.9453 470.215 75.375 464.468 75.375C448.794 75.375 439.39 89.5078 439.39 107.305C439.39 125.102 446.704 139.234 464.468 139.234C479.619 139.234 483.799 130.859 486.411 117.25H480.664C480.142 121.961 478.574 133.477 467.08 134C452.974 134.523 451.929 116.203 452.451 107.305C452.451 102.07 452.974 80.0859 464.99 80.0859C474.917 80.0859 481.187 87.4141 481.187 95.2656H484.321V74.3281H481.709L478.574 79.5625Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M837.506 134C823.399 134.523 822.354 116.203 822.877 107.305H859.971C859.971 89.5077 852.134 75.3749 834.893 75.3749C819.219 75.3749 809.815 89.5077 809.815 107.305C809.815 125.101 817.13 139.234 834.893 139.234C851.612 139.234 856.837 130.859 859.449 117.25H853.702C853.179 122.484 850.045 134 837.506 134ZM835.416 80.6093C845.865 80.6093 847.432 94.2186 847.432 102.07H822.877C822.877 96.8358 822.354 80.6093 835.416 80.6093Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M633.223 134C619.117 134.523 618.072 116.203 618.595 107.305H655.689C655.689 89.5077 647.852 75.3749 630.611 75.3749C614.937 75.3749 605.533 89.5077 605.533 107.305C605.533 125.101 612.847 139.234 630.611 139.234C647.33 139.234 652.555 130.859 655.167 117.25H649.42C648.897 122.484 645.763 134 633.223 134ZM631.656 80.6093C642.105 80.6093 643.673 94.2186 643.673 102.07H619.117C618.595 96.8358 618.072 80.6093 631.656 80.6093Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M369.903 134C355.797 134.523 354.752 116.203 355.274 107.305H392.369C392.369 89.5077 384.532 75.3749 367.291 75.3749C351.617 75.3749 342.213 89.5077 342.213 107.305C342.213 125.101 349.527 139.234 367.291 139.234C384.009 139.234 389.234 130.859 391.846 117.25H386.099C385.577 122.484 382.442 134 369.903 134ZM368.336 80.6093C378.785 80.6093 380.352 94.2186 380.352 102.07H355.274C355.274 96.8358 354.752 80.6093 368.336 80.6093Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M596.128 124.578V55.4844C596.128 52.8672 594.561 50.25 591.949 50.7734C586.724 52.3437 581.499 53.3906 577.32 53.3906V56.0078C584.634 55.4844 585.157 57.5781 585.157 60.1953V81.6562C582.022 78.5156 578.365 75.8984 571.573 75.8984C563.213 75.8984 547.539 82.7031 547.539 106.258C547.539 137.141 565.826 139.234 571.05 139.234C576.275 139.234 583.589 134.523 585.157 132.43C585.157 131.906 586.202 131.383 586.202 132.43C586.202 134.523 588.291 138.188 590.381 137.141C595.606 135.57 600.831 134.523 605.01 134.523V131.906C595.083 132.43 596.128 127.195 596.128 124.578ZM585.679 117.25C585.679 130.859 578.365 135.047 572.095 135.047C558.511 135.047 559.556 114.633 559.556 105.734C559.556 96.8359 560.079 80.0859 572.095 81.1328C584.112 82.7031 585.157 95.7891 585.157 103.117V117.25H585.679Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M741.895 102.07V96.3125H708.98V102.07H741.895Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M664.048 116.727V137.664H666.661L669.273 132.43C671.885 134.524 677.11 138.188 683.902 138.188C690.694 138.188 700.098 134.524 703.755 127.719C707.412 120.914 705.845 109.399 697.486 105.735C690.171 102.594 683.379 98.9298 678.677 96.3126C674.497 94.2189 673.975 90.5548 673.975 87.9376C674.497 83.7501 678.155 79.5626 685.992 79.5626C693.829 79.5626 698.008 85.8439 699.053 93.6954H701.665V73.8048H699.053L696.441 78.5157C691.216 74.8517 689.126 74.3282 684.424 74.3282C679.722 74.3282 671.885 76.9454 667.183 83.7501C662.481 90.5548 664.048 101.547 674.498 106.258C684.947 110.969 690.171 113.586 693.306 115.156C696.441 116.727 698.008 122.485 695.918 126.149C693.829 129.813 690.171 133.477 684.424 133.477C678.677 133.477 669.273 129.289 666.661 116.727H664.048Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M788.394 92.1251C794.142 90.5548 800.411 80.086 800.411 72.7579C800.411 65.4298 797.799 53.3907 780.558 53.3907H743.463V56.5314C747.12 56.5314 753.39 57.0548 753.39 63.3361V124.578C753.39 128.242 753.39 134 743.463 134V137.664H773.766C783.17 137.664 804.068 137.141 804.591 112.539C804.591 104.164 800.411 94.7423 788.394 92.1251ZM763.839 57.5782H776.378C785.782 57.5782 789.439 64.3829 789.439 72.7579C789.439 83.2267 786.305 91.6017 776.378 91.6017H763.839V57.5782ZM776.378 133.477H763.839V95.2657H777.945C786.305 95.2657 793.097 101.024 793.097 113.586C793.619 126.149 785.782 133.477 776.378 133.477Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M905.948 92.6483V129.289C905.948 134 901.768 134.523 899.678 134.523H898.111V137.664H925.279V134.523H922.667C920.577 134.523 916.397 134 916.397 129.289V92.6483C916.397 75.8983 901.246 75.3749 896.021 75.3749C890.797 75.3749 884.527 79.0389 883.482 80.6093C881.915 82.703 880.347 81.6561 879.825 79.5624C879.825 77.4686 878.78 74.8514 876.168 75.8983C870.943 77.4686 865.718 78.5155 861.539 78.5155V81.1327C871.988 80.6093 870.943 85.8436 870.943 88.4608V129.289C870.943 134 866.763 134.523 864.674 134.523H861.016V137.664H890.274V134.523H887.662C885.572 134.523 881.392 134 881.392 129.289V96.8358C881.392 91.6014 883.482 82.703 893.409 82.1796C903.858 81.1327 905.948 87.9374 905.948 92.6483Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M931.026 93.6953L935.728 76.9453H978.048L941.998 134.523H961.329C966.031 134.523 969.166 132.953 973.868 121.437H975.958L971.778 138.187H928.414L964.464 80.6094H948.268C944.088 80.6094 939.908 80.6094 933.639 94.2187H931.026V93.6953Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 8.5 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 129 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
website/pages/use-cases/img/nodes-screenshot.png (Stored with Git LFS) Normal file

Binary file not shown.

View File

@ -0,0 +1,47 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1972px" height="1270px" viewBox="0 0 1972 1270" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 58 (84663) - https://sketch.com -->
<title>Group 2</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-2">
<rect id="Rectangle" fill="#FFFFFF" x="0" y="0" width="1972" height="1270"></rect>
<g id="signalfx" transform="translate(678.000000, 268.000000)" fill-rule="nonzero">
<path d="M582,86 L582,86" id="Path" fill="#343432"></path>
<polygon id="Path" fill="#59A345" points="615 45 590.06391 45 582 55.4363636 582 86"></polygon>
<polyline id="Path" fill="#010101" points="582.218499 86.1290323 550.678284 45 525.620643 45 558.532172 86.1290323 524 130 547.935657 130 570.375335 100.960411 593.189008 130 617 130 582.218499 86.1290323"></polyline>
<path d="M557,86 L557,86" id="Path" fill="#231F20"></path>
<g id="Group" fill="#010101">
<polygon id="Path" points="529.750588 19.5681159 529.750588 3.24057971 451.310588 3.24057971 451.310588 129.623188 469.891765 129.623188 469.891765 73.6608696 525.261176 73.6608696 525.261176 57.5826087 469.891765 57.5826087 469.891765 19.5681159"></polygon>
<path d="M73.7011765,68.1768116 L73.7011765,68.1768116 C70.0847059,65.4347826 66.0941176,63.1913043 61.7294118,61.5710145 C57.3647059,59.9507246 53,58.4550725 48.76,57.084058 C45.2682353,55.9623188 41.9011765,54.715942 38.7835294,53.5942029 C35.6658824,52.4724638 33.0470588,51.1014493 30.8023529,49.6057971 C28.5576471,48.1101449 26.8117647,46.115942 25.44,43.8724638 C24.1929412,41.6289855 23.4447059,38.8869565 23.4447059,35.5217391 C23.4447059,32.0318841 24.1929412,29.0405797 25.5647059,26.6724638 C27.0611765,24.1797101 28.9317647,22.0608696 31.1764706,20.4405797 C33.4211765,18.8202899 36.04,17.573913 38.9082353,16.826087 C41.7764706,16.0782609 44.6447059,15.7043478 47.3882353,15.7043478 C52.6258824,15.7043478 57.3647059,16.826087 61.48,18.9449275 C65.5952941,21.0637681 68.9623529,23.8057971 71.4564706,27.1710145 L71.8305882,27.6695652 L84.8,14.8318841 L84.4258824,14.457971 C80.4352941,10.0956522 75.1976471,6.48115942 68.8376471,3.86376812 C62.4776471,1.37101449 55.4941176,0 48.1364706,0 C42.8988235,0 37.6611765,0.747826087 32.5482353,1.9942029 C27.4352941,3.36521739 22.6964706,5.60869565 18.5811765,8.6 C14.4658824,11.5913043 11.0988235,15.3304348 8.48,19.942029 C5.98588235,24.4289855 4.61411765,29.9130435 4.61411765,36.2695652 C4.61411765,42.1275362 5.61176471,47.1130435 7.48235294,50.9768116 C9.35294118,54.9652174 11.9717647,58.3304348 15.0894118,60.9478261 C18.2070588,63.6898551 21.6988235,65.8086957 25.6894118,67.5536232 C29.5552941,69.2985507 33.6705882,70.7942029 37.6611765,71.915942 C41.7764706,73.2869565 45.5176471,74.5333333 49.1341176,75.7797101 C52.6258824,77.026087 55.8682353,78.5217391 58.4870588,80.2666667 C61.1058824,82.0115942 63.2258824,84.1304348 64.8470588,86.6231884 C66.3435294,89.115942 67.2164706,92.2318841 67.2164706,95.8463768 C67.2164706,99.4608696 66.4682353,102.701449 64.9717647,105.194203 C63.4752941,107.811594 61.48,109.930435 59.1105882,111.675362 C56.7411765,113.42029 54.1223529,114.666667 51.2541176,115.53913 C48.3858824,116.411594 45.3929412,116.785507 42.5247059,116.785507 C36.7882353,116.785507 31.5505882,115.414493 26.6870588,112.797101 C21.8235294,110.17971 17.8329412,106.565217 14.9647059,102.327536 L14.7152941,101.828986 L0,113.918841 L0.249411765,114.292754 C5.11294118,120.4 11.3482353,125.011594 18.8305882,128.127536 C26.1882353,131.243478 34.0447059,132.73913 42.0258824,132.73913 C47.6376471,132.73913 53.1247059,131.991304 58.3623529,130.371014 C63.6,128.875362 68.3388235,126.507246 72.4541176,123.266667 C76.5694118,120.150725 79.8117647,116.037681 82.3058824,111.176812 C84.8,106.315942 86.0470588,100.582609 86.0470588,94.1014493 C86.0470588,87.7449275 84.9247059,82.5101449 82.68,78.3971014 C80.1858824,74.284058 77.1929412,70.9188406 73.7011765,68.1768116 Z" id="Path"></path>
<rect id="Rectangle" x="99.2658824" y="44.6202899" width="17.5835294" height="84.8782609"></rect>
<path d="M202.522353,57.457971 C199.404706,52.4724638 195.04,48.7333333 189.802353,46.2405797 C184.315294,43.6231884 178.329412,42.2521739 172.343529,42.2521739 C165.983529,42.2521739 159.997647,43.373913 154.76,45.742029 C149.522353,48.1101449 145.032941,51.226087 141.291765,55.2144928 C137.550588,59.2028986 134.682353,63.9391304 132.687059,69.2985507 C130.691765,74.657971 129.694118,80.3913043 129.694118,86.4985507 C129.694118,92.6057971 130.691765,98.3391304 132.687059,103.573913 C134.682353,108.808696 137.550588,113.544928 141.291765,117.408696 C145.032941,121.397101 149.522353,124.513043 154.884706,126.756522 C160.122353,129 166.108235,130.121739 172.592941,130.121739 C178.703529,130.121739 184.44,128.875362 189.802353,126.382609 C194.915294,124.014493 199.030588,120.649275 202.023529,116.162319 L202.023529,125.884058 C202.023529,130.121739 201.524706,134.234783 200.527059,137.973913 C199.529412,141.713043 197.908235,144.953623 195.663529,147.571014 C193.418824,150.313043 190.425882,152.431884 186.684706,153.927536 C182.943529,155.547826 178.329412,156.295652 172.842353,156.295652 C167.105882,156.295652 161.494118,155.049275 156.131765,152.681159 C150.769412,150.188406 146.155294,146.947826 142.538824,142.834783 L142.164706,142.46087 L130.816471,156.171014 L131.190588,156.544928 C136.552941,161.405797 143.037647,165.269565 150.395294,167.886957 C157.752941,170.504348 165.235294,171.875362 172.592941,171.875362 C181.322353,171.875362 188.804706,170.504348 194.790588,167.886957 C200.776471,165.269565 205.64,161.77971 209.381176,157.417391 C213.122353,153.055072 215.741176,147.944928 217.237647,142.336232 C218.734118,136.727536 219.607059,130.744928 219.607059,124.637681 L219.607059,44.6202899 L202.522353,44.6202899 L202.522353,57.457971 L202.522353,57.457971 Z M201.275294,75.0318841 C202.647059,78.5217391 203.270588,82.2608696 203.270588,86.2492754 C203.270588,90.3623188 202.647059,94.1014493 201.275294,97.715942 L201.275294,97.715942 C199.903529,101.205797 198.032941,104.321739 195.538824,106.93913 C193.044706,109.556522 190.051765,111.675362 186.684706,113.171014 C183.192941,114.666667 179.327059,115.414493 175.087059,115.414493 C170.847059,115.414493 166.856471,114.542029 163.614118,112.921739 C160.247059,111.301449 157.378824,109.182609 155.009412,106.44058 C152.64,103.823188 150.769412,100.707246 149.647059,97.2173913 C148.4,93.7275362 147.776471,89.9884058 147.776471,86.2492754 C147.776471,82.2608696 148.4,78.5217391 149.647059,75.0318841 C150.894118,71.542029 152.64,68.426087 155.009412,65.8086957 C157.378824,63.1913043 160.247059,61.0724638 163.614118,59.5768116 C166.981176,58.0811594 170.847059,57.2086957 175.087059,57.2086957 C179.202353,57.2086957 183.068235,57.9565217 186.56,59.5768116 C189.927059,61.1971014 192.92,63.315942 195.414118,65.9333333 C197.908235,68.5507246 199.903529,71.542029 201.275294,75.0318841 Z" id="Shape"></path>
<path d="M303.908235,52.5971014 L303.908235,52.5971014 C301.289412,49.4811594 297.922353,46.9884058 293.931765,45.1188406 C289.941176,43.2492754 285.202353,42.3768116 279.715294,42.3768116 C276.597647,42.3768116 273.604706,42.7507246 270.736471,43.6231884 C267.868235,44.4956522 265.249412,45.6173913 262.755294,47.1130435 C260.385882,48.6086957 258.265882,50.3536232 256.395294,52.3478261 C254.774118,54.0927536 253.402353,55.9623188 252.404706,57.9565217 C252.404706,56.4608696 252.28,54.5913043 252.28,52.3478261 C252.155294,49.7304348 252.155294,47.2376812 251.905882,45.1188406 L251.905882,44.6202899 L235.195294,44.6202899 L235.195294,45.1188406 C235.444706,47.8608696 235.444706,50.9768116 235.569412,54.4666667 C235.694118,58.0811594 235.694118,60.9478261 235.694118,63.1913043 L235.694118,129.623188 L253.277647,129.623188 L253.277647,84.5043478 C253.277647,76.2782609 255.397647,69.6724638 259.512941,64.6869565 C263.628235,59.826087 268.865882,57.3333333 275.350588,57.3333333 C279.091765,57.3333333 282.334118,58.0811594 284.703529,59.4521739 C287.072941,60.8231884 288.943529,62.6927536 290.315294,64.9362319 C291.687059,67.1797101 292.684706,69.9217391 293.183529,72.9130435 C293.682353,75.9043478 293.931765,79.1449275 293.931765,82.5101449 L293.931765,129.623188 L311.515294,129.623188 L311.515294,77.026087 C311.515294,72.2898551 310.891765,67.8028986 309.644706,63.5652174 C308.522353,59.4521739 306.651765,55.7130435 303.908235,52.5971014 Z" id="Path"></path>
<path d="M398.56,121.397101 C398.435294,118.281159 398.310588,115.289855 398.310588,112.423188 L398.310588,75.7797101 C398.310588,71.1681159 397.562353,66.6811594 396.190588,62.6927536 C394.694118,58.5797101 392.574118,55.0898551 389.705882,52.0985507 C386.837647,49.1072464 383.096471,46.7391304 378.607059,44.9942029 C374.117647,43.2492754 368.755294,42.3768116 362.769412,42.3768116 C355.910588,42.3768116 349.425882,43.4985507 343.315294,45.742029 C337.329412,47.9855072 332.216471,51.1014493 327.976471,55.0898551 L327.602353,55.4637681 L337.08,66.8057971 L337.454118,66.4318841 C340.197647,63.6898551 343.689412,61.3217391 347.804706,59.5768116 C351.92,57.8318841 356.409412,56.8347826 361.023529,56.8347826 C367.134118,56.8347826 372.122353,58.3304348 375.738824,61.1971014 C379.355294,64.0637681 381.225882,68.6753623 381.225882,74.657971 L381.225882,76.5275362 C374.367059,76.5275362 367.383529,76.9014493 360.649412,77.4 C353.665882,78.0231884 347.305882,79.2695652 341.694118,81.2637681 C336.082353,83.257971 331.468235,86.1246377 327.976471,89.8637681 C324.484706,93.6028986 322.738824,98.8376812 322.738824,105.318841 C322.738824,110.17971 323.736471,114.417391 325.731765,117.782609 C327.727059,121.147826 330.221176,123.889855 333.214118,125.884058 C336.207059,127.878261 339.574118,129.373913 343.190588,130.246377 C346.807059,131.118841 350.298824,131.617391 353.665882,131.617391 C360.150588,131.617391 365.762353,130.371014 370.501176,127.878261 C374.990588,125.510145 378.856471,122.02029 381.974118,117.782609 C381.974118,121.521739 382.472941,125.385507 383.345882,129.124638 L383.470588,129.498551 L399.557647,129.498551 L399.432941,128.875362 C399.058824,127.005797 398.809412,124.388406 398.56,121.397101 Z M381.475294,89.4898551 L381.475294,93.4782609 C381.475294,100.457971 379.355294,106.191304 375.364706,110.802899 C371.249412,115.289855 365.388235,117.657971 357.781176,117.657971 C355.661176,117.657971 353.665882,117.408696 351.670588,117.034783 C349.675294,116.66087 347.929412,115.913043 346.308235,114.915942 C344.687059,113.918841 343.44,112.547826 342.442353,111.052174 C341.444706,109.431884 341.070588,107.437681 341.070588,105.069565 C341.070588,101.704348 342.192941,98.9623188 344.437647,96.9681159 C346.682353,94.8492754 349.675294,93.3536232 353.167059,92.2318841 C356.658824,91.2347826 360.774118,90.4869565 365.138824,90.1130435 C369.503529,89.7391304 373.868235,89.6144928 377.983529,89.6144928 L381.475294,89.6144928 L381.475294,89.4898551 Z" id="Shape"></path>
<rect id="Rectangle" x="415.395294" y="0.249275362" width="17.5835294" height="129.249275"></rect>
<rect id="Rectangle" x="99.2658824" y="17.6985507" width="17.5835294" height="17.573913"></rect>
</g>
</g>
<g id="dd_logo_h_rgb-2" transform="translate(586.000000, 830.000000)" fill="#632CA6">
<g id="dd_logo_h_rgb">
<g id="Group" transform="translate(223.000000, 57.000000)">
<path d="M37.87,87.65 L0.47,87.65 L0.47,1.55 L37.87,1.55 C64.81,1.55 78.3,15.12 78.3,42.25 C78.29,72.51 64.81,87.65 37.87,87.65 Z M16.45,73.79 L35.45,73.79 C53.35,73.79 62.29,63.28 62.29,42.24 C62.29,24.33 53.34,15.37 35.45,15.37 L16.45,15.37 L16.45,73.79 L16.45,73.79 Z" id="Shape"></path>
<polygon id="Path" points="95.04 87.65 78.62 87.65 115.25 1.55 132.44 1.55 169.85 87.65 152.66 87.65 141.8 64.17 114.17 64.17 119.66 50.32 137.58 50.32 123.46 17.98"></polygon>
<polygon id="Path" points="160.82 1.55 226.28 1.55 226.28 15.39 201.55 15.39 201.55 87.65 185.57 87.65 185.57 15.39 160.82 15.39"></polygon>
<polygon id="Path" points="234.5 87.65 218.08 87.65 254.71 1.55 271.9 1.55 309.31 87.65 292.1 87.65 281.24 64.17 253.61 64.17 259.1 50.32 277.02 50.32 262.91 17.98"></polygon>
<path d="M357.32,87.65 L319.92,87.65 L319.92,1.55 L357.32,1.55 C384.28,1.55 397.75,15.12 397.75,42.25 C397.75,72.51 384.28,87.65 357.32,87.65 Z M335.91,73.79 L354.91,73.79 C372.8,73.79 381.77,63.28 381.77,42.24 C381.77,24.33 372.81,15.37 354.91,15.37 L335.91,15.37 L335.91,73.79 Z" id="Shape"></path>
<path d="M408.58,44.72 C408.58,15.52 423.03,0.93 451.91,0.93 C480.35,0.93 494.55,15.52 494.55,44.72 C494.55,73.75 480.34,88.27 451.91,88.27 C424.31,88.27 409.87,73.75 408.58,44.72 Z M451.91,74.39 C469.27,74.39 477.96,64.38 477.96,44.34 C477.96,24.62 469.27,14.75 451.91,14.75 C434.09,14.75 425.18,24.62 425.18,44.34 C425.18,64.38 434.09,74.39 451.91,74.39 Z" id="Shape"></path>
<path d="M561.26,52.81 L561.26,72.97 C557.57,73.93 554.27,74.41 551.36,74.41 C531.81,74.41 522.05,64.07 522.05,43.4 C522.05,24.31 532.41,14.78 553.12,14.78 C561.77,14.78 569.81,16.39 577.25,19.6 L577.25,5.14 C569.81,2.34 561.36,0.93 551.91,0.93 C520.94,0.93 505.45,15.08 505.45,43.4 C505.45,73.3 520.67,88.27 551.12,88.27 C561.59,88.27 570.29,86.75 577.25,83.69 L577.25,38.64 L551.43,38.64 L546.03,52.8 L561.26,52.81 L561.26,52.81 Z" id="Path"></path>
</g>
<path d="M158.87,144.16 L142,133.04 L127.93,156.54 L111.57,151.76 L97.16,173.75 L97.9,180.67 L176.23,166.24 L171.68,117.3 L158.87,144.16 Z M85.82,123.07 L98.39,121.34 C100.42,122.25 101.84,122.6 104.28,123.22 C108.08,124.21 112.47,125.16 118.98,121.88 C120.49,121.13 123.65,118.24 124.92,116.6 L176.41,107.26 L181.66,170.83 L93.45,186.73 L85.82,123.07 Z M181.46,100.16 L176.38,101.13 L166.62,0.25 L0.25,19.54 L20.75,185.87 L40.22,183.04 C38.67,180.82 36.24,178.13 32.11,174.69 C26.37,169.93 28.4,161.83 31.79,156.72 C36.26,148.09 59.33,137.11 58.02,123.31 C57.55,118.29 56.75,111.76 52.09,107.28 C51.92,109.14 52.23,110.93 52.23,110.93 C52.23,110.93 50.32,108.49 49.36,105.16 C48.41,103.88 47.67,103.48 46.66,101.77 C45.94,103.74 46.04,106.03 46.04,106.03 C46.04,106.03 44.48,102.33 44.22,99.21 C43.29,100.61 43.06,103.26 43.06,103.26 C43.06,103.26 41.03,97.43 41.49,94.29 C40.56,91.56 37.81,86.14 38.59,73.82 C43.67,77.38 54.85,76.53 59.2,70.11 C60.65,67.98 61.64,62.18 58.48,50.75 C56.45,43.42 51.43,32.5 49.47,28.35 L49.24,28.52 C50.27,31.86 52.4,38.85 53.22,42.25 C55.69,52.54 56.35,56.12 55.19,60.86 C54.2,64.98 51.84,67.68 45.84,70.7 C39.84,73.73 31.88,66.36 31.37,65.96 C25.54,61.32 21.03,53.74 20.53,50.06 C20.01,46.03 22.85,43.61 24.29,40.32 C22.24,40.91 19.95,41.95 19.95,41.95 C19.95,41.95 22.68,39.12 26.05,36.68 C27.45,35.76 28.26,35.17 29.73,33.95 C27.6,33.92 25.87,33.97 25.87,33.97 C25.87,33.97 29.42,32.05 33.1,30.66 C30.41,30.54 27.83,30.64 27.83,30.64 C27.83,30.64 35.75,27.1 42,24.5 C46.3,22.74 50.5,23.26 52.86,26.67 C55.96,31.14 59.21,33.57 66.11,35.08 C70.35,33.2 71.63,32.24 76.95,30.79 C81.63,25.64 85.31,24.97 85.31,24.97 C85.31,24.97 83.49,26.64 83,29.27 C85.66,27.18 88.57,25.43 88.57,25.43 C88.57,25.43 87.44,26.82 86.39,29.03 L86.63,29.39 C89.73,27.53 93.37,26.07 93.37,26.07 C93.37,26.07 92.33,27.39 91.11,29.09 C93.45,29.07 98.19,29.19 100.02,29.4 C110.88,29.64 113.13,17.8 117.3,16.32 C122.52,14.46 124.85,13.33 133.74,22.06 C141.37,29.56 147.33,42.97 144.37,45.98 C141.89,48.47 136.99,45.01 131.57,38.24 C128.7,34.66 126.54,30.43 125.52,25.05 C124.66,20.51 121.33,17.88 121.33,17.88 C121.33,17.88 123.26,22.19 123.26,25.99 C123.26,28.07 123.52,35.83 126.85,40.18 C126.52,40.82 126.37,43.33 126,43.81 C122.13,39.13 113.81,35.78 112.46,34.79 C117.05,38.55 127.6,47.19 131.65,55.47 C135.48,63.3 133.22,70.48 135.16,72.34 C135.71,72.87 143.4,82.45 144.88,87.27 C147.46,95.66 145.03,104.48 141.66,109.95 L132.23,111.42 C130.85,111.04 129.92,110.84 128.68,110.13 C129.36,108.92 130.72,105.91 130.73,105.29 L130.2,104.36 C127.26,108.52 122.35,112.56 118.26,114.88 C112.91,117.91 106.75,117.44 102.74,116.2 C91.35,112.69 80.58,104.99 77.99,102.97 C77.99,102.97 77.91,104.58 78.4,104.95 C81.27,108.19 87.85,114.05 94.21,118.13 L80.66,119.62 L87.07,169.51 C84.23,169.92 83.79,170.12 80.68,170.56 C77.94,160.88 72.7,154.55 66.97,150.87 C61.92,147.62 54.95,146.89 48.27,148.21 L47.84,148.71 C52.48,148.23 57.96,148.9 63.58,152.46 C69.1,155.95 73.55,164.97 75.19,170.4 C77.29,177.34 78.74,184.76 73.09,192.63 C69.07,198.22 57.35,201.31 47.87,194.63 C50.4,198.7 53.82,202.03 58.42,202.65 C65.26,203.58 71.75,202.39 76.21,197.81 C80.02,193.89 82.05,185.69 81.51,177.06 L87.54,176.19 L89.72,191.68 L189.6,179.65 L181.46,100.16 Z M120.69,58.08 C120.41,58.72 119.97,59.13 120.63,61.2 L120.67,61.32 L120.77,61.59 L121.04,62.21 C122.23,64.63 123.53,66.92 125.7,68.09 C126.26,68 126.85,67.93 127.45,67.9 C129.49,67.81 130.78,68.13 131.6,68.58 C131.67,68.17 131.69,67.58 131.64,66.7 C131.48,63.63 132.25,58.41 126.35,55.66 C124.12,54.63 121,54.94 119.96,56.24 C120.15,56.26 120.32,56.3 120.45,56.35 C122.04,56.89 120.98,57.43 120.69,58.08 M137.23,86.73 C136.46,86.3 132.84,86.47 130.3,86.77 C125.46,87.34 120.23,89.02 119.08,89.91 C117,91.52 117.94,94.33 119.48,95.48 C123.8,98.7 127.58,100.87 131.57,100.34 C134.02,100.02 136.18,96.14 137.71,92.61 C138.77,90.19 138.77,87.58 137.23,86.73 M94.36,61.88 C95.73,60.58 87.56,58.88 81.22,63.2 C76.55,66.39 76.4,73.23 80.87,77.1 C81.32,77.48 81.69,77.76 82.03,77.98 C83.34,77.36 84.83,76.74 86.54,76.19 C89.44,75.25 91.84,74.76 93.82,74.51 C94.77,73.45 95.87,71.59 95.59,68.22 C95.22,63.63 91.75,64.36 94.36,61.88" id="Shape"></path>
</g>
</g>
<g id="opentracing-horizontal-color" transform="translate(487.000000, 522.000000)" fill-rule="nonzero">
<polygon id="Path" fill="#0979B9" points="212.348033 116.268968 170.101311 188.392413 85.1013111 188.392413 42.6519666 115.458022 70.8164482 63 28.3671037 63 0 115.762127 63.8259833 226 191.427294 226 255 116.268968"></polygon>
<polygon id="Path" fill="#2592C0" points="191.262649 0 61.9354183 0 42 37.6075871 107.068396 37.6075871 107.068396 163 144.611747 163 144.611747 37.6075871 169.961098 37.6075871 198.649886 90.9272388 241 90.9272388"></polygon>
<path d="M311,116.676768 L311,116.474747 C311,99.1515152 324.065252,84 343.207366,84 C362.34948,84 375.26281,99 375.26281,116.323232 L375.26281,116.525253 C375.26281,133.848485 362.197558,149 343.055444,149 C323.913331,149 311,134 311,116.676768 Z M367.869295,116.676768 L367.869295,116.474747 C367.869295,102.181818 357.43735,90.5151515 343.055444,90.5151515 C328.673539,90.5151515 318.393515,101.979798 318.393515,116.272727 L318.393515,116.474747 C318.393515,130.767677 328.82546,142.434343 343.207366,142.434343 C357.639912,142.434343 367.869295,130.969697 367.869295,116.676768 Z M390.303042,85.1111111 L413.901521,85.1111111 C428.131505,85.1111111 437.5,92.6363636 437.5,105.010101 L437.5,105.212121 C437.5,118.747475 426.156525,125.767677 412.736789,125.767677 L397.443355,125.767677 L397.443355,147.939394 L390.353683,147.939394 L390.303042,85.1111111 L390.303042,85.1111111 Z M412.989992,119.30303 C423.421938,119.30303 430.258407,113.747475 430.258407,105.464646 L430.258407,105.262626 C430.258407,96.2727273 423.523219,91.6262626 413.344476,91.6262626 L397.392714,91.6262626 L397.392714,119.252525 L412.989992,119.252525 L412.989992,119.30303 Z M450.413331,85.1111111 L495.939151,85.1111111 L495.939151,91.5757576 L457.503002,91.5757576 L457.503002,113.040404 L491.88791,113.040404 L491.88791,119.505051 L457.503002,119.505051 L457.503002,141.474747 L496.394916,141.474747 L496.394916,147.939394 L450.413331,147.939394 L450.413331,85.1111111 Z M510.726181,85.1111111 L517.360088,85.1111111 L557.06225,135.464646 L557.06225,85.1111111 L564,85.1111111 L564,147.939394 L558.328263,147.939394 L517.663931,96.4242424 L517.663931,147.939394 L510.726181,147.939394 L510.726181,85.1111111 L510.726181,85.1111111 Z" id="Shape" fill="#0979B9"></path>
<path d="M606.189176,91.6203416 L585,91.6203416 L585,85.0597826 L634.525897,85.0597826 L634.525897,91.6203416 L613.336721,91.6203416 L613.336721,147.839286 L606.138484,147.839286 L606.189176,91.6203416 Z M647.908534,85.1102484 L675.028652,85.1102484 C682.784499,85.1102484 688.968899,87.431677 692.973552,91.3680124 C696.015061,94.3959627 697.839966,98.7864907 697.839966,103.732143 L697.839966,103.934006 C697.839966,114.329969 690.641729,120.436335 680.706134,122.20264 L700.070405,147.839286 L691.351414,147.839286 L673.051671,123.464286 L655.056079,123.464286 L655.056079,147.839286 L647.959226,147.839286 L647.908534,85.1102484 L647.908534,85.1102484 Z M674.42035,117.10559 C683.899718,117.10559 690.641729,112.26087 690.641729,104.186335 L690.641729,103.984472 C690.641729,96.2631988 684.710787,91.6203416 674.521734,91.6203416 L655.056079,91.6203416 L655.056079,117.10559 L674.42035,117.10559 Z M736.36574,84.6560559 L743.057059,84.6560559 L771.799314,147.889752 L764.144851,147.889752 L756.743847,131.286491 L722.425493,131.286491 L714.973797,147.889752 L707.674177,147.889752 L736.36574,84.6560559 Z M753.955798,124.826863 L739.610016,92.8819876 L725.213542,124.826863 L753.955798,124.826863 Z M777.730256,116.651398 L777.730256,116.449534 C777.730256,98.685559 791.062202,84 809.615403,84 C821.071752,84 827.915146,88.0372671 834.200931,93.9417702 L829.334517,99.1397516 C824.011877,94.0931677 818.080935,90.5100932 809.51402,90.5100932 C795.573772,90.5100932 785.080568,101.814441 785.080568,116.247671 L785.080568,116.449534 C785.080568,130.983696 795.624464,142.388975 809.51402,142.388975 C818.182319,142.388975 823.859802,139.05823 829.892127,133.35559 L834.555773,137.947981 C827.965838,144.559006 820.767601,149 809.311253,149 C791.163585,148.949534 777.730256,134.667702 777.730256,116.651398 L777.730256,116.651398 Z M847.63426,85.1102484 L854.731113,85.1102484 L854.731113,147.889752 L847.63426,147.889752 L847.63426,85.1102484 Z M873.182931,85.1102484 L879.87425,85.1102484 L919.616628,135.424689 L919.616628,85.1102484 L926.561406,85.1102484 L926.561406,147.889752 L920.883923,147.889752 L880.178401,96.4145963 L880.178401,147.889752 L873.233623,147.889752 L873.233623,85.1102484 L873.182931,85.1102484 Z M941.566181,116.651398 L941.566181,116.449534 C941.566181,99.2406832 954.289825,84 973.197869,84 C983.843149,84 990.382393,87.0279503 996.718869,92.3268634 L992.105914,97.7267081 C987.2395,93.4875776 981.815477,90.560559 972.94441,90.560559 C959.004163,90.560559 948.967185,102.319099 948.967185,116.298137 L948.967185,116.5 C948.967185,131.488354 958.598629,142.590839 973.907555,142.590839 C981.105792,142.590839 987.79711,139.815217 992.105914,136.333075 L992.105914,120.73913 L972.94441,120.73913 L972.94441,114.380435 L999,114.380435 L999,139.411491 C993.11975,144.609472 984.299376,149 973.704788,149 C953.833599,148.949534 941.566181,134.617236 941.566181,116.651398 L941.566181,116.651398 Z" id="Shape" fill="#2592C0"></path>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 23 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 545 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 105 KiB

BIN
website/pages/use-cases/img/services-screenshot.png (Stored with Git LFS) Normal file

Binary file not shown.

View File

@ -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 Consuls 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>
)
}

View File

@ -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:
'Consuls 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>
)
}

View File

@ -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:
'Consuls 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:
'Consuls 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>
)
}

View File

@ -0,0 +1,195 @@
<svg width="1600" height="509" viewBox="0 0 1600 509" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="1091" y="0" width="509" height="509">
<rect x="1091" width="509" height="509" fill="#FF00FF"/>
</mask>
<g mask="url(#mask0)">
<path opacity="0.1" d="M1058.72 629.019H1058.62C1058.22 628.919 1057.92 628.619 1058.02 628.119C1070.52 544.419 1096.42 463.819 1135.02 388.419C1172.62 314.819 1221.42 247.719 1280.12 189.019C1338.72 130.419 1405.72 81.6194 1479.32 44.0194C1554.72 5.51938 1635.42 -20.3806 1719.02 -32.9806C1719.42 -33.0806 1719.82 -32.7806 1719.92 -32.3806C1720.02 -31.9806 1719.72 -31.5806 1719.32 -31.4806C1635.82 -18.9806 1555.32 6.91938 1480.02 45.3194C1406.52 82.8194 1339.62 131.619 1281.02 190.119C1222.42 248.719 1173.72 315.619 1136.22 389.119C1097.82 464.419 1071.92 544.919 1059.42 628.419C1059.32 628.819 1059.02 629.019 1058.72 629.019Z" fill="#BDBEC2"/>
<path opacity="0.15" d="M1074.82 629.019H1074.72C1074.32 628.919 1074.02 628.619 1074.12 628.119C1086.62 546.619 1112.02 468.019 1149.72 394.619C1186.52 322.919 1234.12 257.519 1291.32 200.319C1348.52 143.119 1413.82 95.5195 1485.62 58.7195C1559.12 21.0195 1637.62 -4.38052 1719.12 -16.8805C1719.52 -16.9805 1719.92 -16.6805 1720.02 -16.2805C1720.12 -15.8805 1719.82 -15.4805 1719.42 -15.3805C1638.12 -2.98052 1559.62 22.4195 1486.32 60.0195C1414.72 96.7195 1349.52 144.319 1292.42 201.419C1235.32 258.519 1187.72 323.719 1151.02 395.319C1113.42 468.619 1088.02 547.019 1075.62 628.419C1075.52 628.819 1075.22 629.019 1074.82 629.019Z" fill="#BDBEC2"/>
<path opacity="0.2" d="M1091.02 629.019H1090.92C1090.52 628.919 1090.22 628.619 1090.32 628.119C1102.72 548.819 1127.72 472.319 1164.52 400.819C1200.42 331.019 1246.92 267.319 1302.62 211.619C1358.32 155.919 1422.02 109.419 1491.82 73.5192C1563.32 36.7192 1639.82 11.7192 1719.12 -0.680814C1719.52 -0.780814 1719.92 -0.480812 1720.02 -0.0808117C1720.12 0.319188 1719.82 0.719186 1719.42 0.819186C1640.22 13.2192 1563.92 38.1192 1492.62 74.8192C1422.92 110.719 1359.42 157.119 1303.82 212.719C1248.22 268.319 1201.82 331.819 1165.92 401.519C1129.22 472.819 1104.32 549.219 1091.92 628.319C1091.72 628.819 1091.42 629.019 1091.02 629.019Z" fill="#BDBEC2"/>
<path opacity="0.25" d="M1107.22 629.019H1107.12C1106.72 628.919 1106.42 628.619 1106.52 628.119C1118.82 550.919 1143.32 476.619 1179.32 407.019C1214.32 339.219 1259.62 277.319 1313.92 223.019C1368.22 168.719 1430.12 123.419 1498.02 88.3194C1567.52 52.4194 1641.92 27.9194 1719.12 15.5194C1719.52 15.4194 1719.92 15.7194 1720.02 16.1194C1720.12 16.5194 1719.82 16.9194 1719.42 17.0194C1642.42 29.3194 1568.12 53.8194 1498.82 89.6194C1431.02 124.619 1369.22 169.819 1315.12 224.019C1260.92 278.219 1215.72 340.019 1180.72 407.719C1144.72 477.219 1120.22 551.419 1107.92 628.419C1107.92 628.819 1107.62 629.019 1107.22 629.019Z" fill="#BDBEC2"/>
<path opacity="0.3" d="M1123.42 629.02H1123.32C1122.92 628.92 1122.62 628.52 1122.72 628.12C1135.02 553.12 1159.02 480.82 1194.02 413.22C1228.32 347.22 1272.42 287.02 1325.22 234.22C1378.02 181.42 1438.22 137.32 1504.22 103.02C1571.82 67.9196 1644.12 43.9196 1719.12 31.7196C1719.52 31.6196 1719.92 31.9196 1720.02 32.3196C1720.12 32.7196 1719.82 33.1196 1719.42 33.2196C1644.52 45.4196 1572.42 69.4196 1505.02 104.42C1439.12 138.62 1379.02 182.62 1326.42 235.32C1273.62 288.02 1229.52 348.12 1195.42 414.02C1160.42 481.42 1136.52 553.62 1124.22 628.42C1124.12 628.82 1123.82 629.02 1123.42 629.02Z" fill="#BDBEC2"/>
<path opacity="0.35" d="M1139.62 629.019H1139.52C1139.12 628.919 1138.82 628.519 1138.92 628.119C1151.12 555.319 1174.62 485.119 1208.82 419.519C1242.22 355.419 1285.22 296.919 1336.52 245.619C1387.82 194.319 1446.32 151.319 1510.42 117.919C1576.02 83.7194 1646.22 60.2194 1719.02 48.0194C1719.42 47.9194 1719.82 48.2194 1719.92 48.6194C1720.02 49.0194 1719.72 49.4194 1719.32 49.5194C1646.62 61.7194 1576.62 85.1194 1511.12 119.319C1447.12 152.619 1388.72 195.519 1337.52 246.719C1286.32 297.919 1243.42 356.319 1210.12 420.319C1176.02 485.819 1152.52 555.819 1140.32 628.519C1140.32 628.819 1140.02 629.019 1139.62 629.019Z" fill="#BDBEC2"/>
<path opacity="0.4" d="M1155.92 629.02H1155.82C1155.42 628.92 1155.12 628.52 1155.22 628.12C1167.32 557.42 1190.42 489.32 1223.72 425.72C1256.32 363.52 1298.12 306.72 1347.92 256.92C1397.72 207.12 1454.52 165.32 1516.72 132.72C1580.32 99.4196 1648.42 76.3196 1719.12 64.2196C1719.52 64.1196 1719.92 64.4196 1720.02 64.8196C1720.12 65.2196 1719.82 65.6196 1719.42 65.7196C1648.92 77.8196 1580.92 100.82 1517.42 134.02C1455.32 166.62 1398.62 208.32 1348.92 258.02C1299.22 307.72 1257.52 364.42 1225.02 426.52C1191.72 490.02 1168.72 557.92 1156.72 628.52C1156.62 628.82 1156.22 629.02 1155.92 629.02Z" fill="#BDBEC2"/>
<path opacity="0.45" d="M1172.12 629.019H1172.02C1171.62 628.919 1171.32 628.519 1171.42 628.119C1220.32 349.519 1440.42 129.419 1719.12 80.4193C1719.52 80.3193 1719.92 80.6193 1720.02 81.0193C1720.12 81.4193 1719.82 81.8193 1719.42 81.9193C1441.42 130.719 1221.82 350.319 1172.92 628.419C1172.82 628.819 1172.52 629.019 1172.12 629.019Z" fill="#BDBEC2"/>
<path opacity="0.5" d="M1188.42 629.019H1188.32C1187.92 628.919 1187.62 628.519 1187.72 628.119C1199.72 561.819 1221.72 497.819 1253.32 438.119C1284.22 379.719 1323.62 326.319 1370.52 279.419C1417.42 232.519 1470.82 193.119 1529.22 162.219C1588.92 130.619 1652.82 108.519 1719.22 96.6195C1719.62 96.5195 1720.02 96.8195 1720.12 97.2195C1720.22 97.6195 1719.92 98.0195 1719.52 98.1195C1653.32 110.019 1589.52 132.019 1530.02 163.619C1471.72 194.419 1418.52 233.819 1371.72 280.519C1324.92 327.319 1285.62 380.519 1254.82 438.819C1223.32 498.419 1201.32 562.119 1189.32 628.319C1189.02 628.819 1188.72 629.019 1188.42 629.019Z" fill="#BDBEC2"/>
<path d="M1204.62 629.019H1204.52C1204.12 628.919 1203.82 628.519 1203.92 628.119C1215.82 563.919 1237.32 502.119 1268.02 444.419C1298.02 387.919 1336.32 336.219 1381.72 290.819C1427.12 245.419 1478.82 207.119 1535.32 177.119C1593.02 146.419 1654.92 124.819 1719.12 112.919C1719.52 112.819 1719.92 113.119 1720.02 113.519C1720.12 113.919 1719.82 114.319 1719.42 114.419C1655.42 126.219 1593.72 147.819 1536.12 178.419C1479.72 208.419 1428.22 246.519 1382.92 291.819C1337.62 337.119 1299.42 388.619 1269.52 445.019C1238.92 502.619 1217.32 564.319 1205.52 628.319C1205.32 628.819 1205.02 629.019 1204.62 629.019Z" fill="url(#paint0_linear)"/>
<path d="M1220.92 629.02H1220.82C1220.42 628.92 1220.12 628.52 1220.22 628.12C1232.02 566.12 1253.12 506.42 1282.92 450.62C1312.12 396.02 1349.22 346.12 1393.12 302.12C1437.02 258.12 1487.02 221.12 1541.62 191.92C1597.42 162.12 1657.12 141.02 1719.12 129.22C1719.52 129.12 1719.92 129.42 1720.02 129.82C1720.12 130.22 1719.82 130.62 1719.42 130.72C1657.52 142.42 1598.02 163.52 1542.32 193.22C1487.82 222.32 1438.02 259.32 1394.22 303.12C1350.42 346.92 1313.42 396.82 1284.32 451.22C1254.52 506.92 1233.52 566.42 1221.82 628.32C1221.62 628.82 1221.32 629.02 1220.92 629.02Z" fill="url(#paint1_linear)"/>
<path d="M1237.22 629.019H1237.12C1236.72 628.919 1236.42 628.519 1236.52 628.119C1259.82 508.819 1317.82 400.019 1404.42 313.419C1491.02 226.819 1599.82 168.819 1719.12 145.519C1719.52 145.419 1719.92 145.719 1720.02 146.119C1720.12 146.519 1719.82 146.919 1719.42 147.019C1600.42 170.219 1491.82 228.119 1405.52 314.519C1319.02 400.919 1261.12 509.419 1237.92 628.419C1237.92 628.819 1237.52 629.019 1237.22 629.019Z" fill="url(#paint2_linear)"/>
<path d="M1253.52 629.019H1253.42C1253.02 628.919 1252.72 628.519 1252.82 628.119C1275.82 513.119 1332.22 408.219 1415.72 324.719C1499.22 241.219 1604.12 184.919 1719.12 161.819C1719.52 161.719 1719.92 162.019 1720.02 162.419C1720.12 162.819 1719.82 163.219 1719.42 163.319C1604.72 186.319 1500.12 242.519 1416.82 325.819C1333.52 409.119 1277.32 513.719 1254.32 628.419C1254.22 628.819 1253.92 629.019 1253.52 629.019Z" fill="url(#paint3_linear)"/>
<path d="M1269.92 629.019C1269.82 629.019 1269.82 629.019 1269.72 629.019C1269.32 628.919 1269.02 628.519 1269.12 628.119C1291.92 517.519 1346.52 416.519 1427.02 336.019C1507.52 255.519 1608.52 201.019 1719.12 178.119C1719.52 178.019 1719.92 178.319 1720.02 178.719C1720.12 179.119 1719.82 179.519 1719.42 179.619C1609.12 202.419 1508.32 256.819 1428.12 337.019C1347.92 417.219 1293.42 518.019 1270.72 628.319C1270.52 628.819 1270.22 629.019 1269.92 629.019Z" fill="url(#paint4_linear)"/>
<path d="M1286.22 629.019C1286.12 629.019 1286.12 629.019 1286.02 629.019C1285.62 628.919 1285.32 628.519 1285.42 628.119C1308.02 521.819 1360.82 424.719 1438.22 347.419C1515.62 270.019 1612.72 217.219 1718.92 194.619C1719.32 194.519 1719.72 194.819 1719.82 195.219C1719.92 195.619 1719.62 196.019 1719.22 196.119C1613.22 218.619 1516.42 271.319 1439.22 348.519C1362.02 425.719 1309.32 522.519 1286.82 628.519C1286.82 628.819 1286.52 629.019 1286.22 629.019Z" fill="url(#paint5_linear)"/>
<path opacity="0.3" d="M1302.62 629.019C1302.52 629.019 1302.52 629.019 1302.42 629.019C1302.02 628.919 1301.72 628.519 1301.82 628.119C1347.32 420.219 1511.12 256.419 1719.02 210.919C1719.42 210.819 1719.82 211.119 1719.92 211.519C1720.02 211.919 1719.72 212.319 1719.32 212.419C1512.02 257.819 1348.72 421.119 1303.22 628.519C1303.22 628.819 1302.92 629.019 1302.62 629.019Z" fill="#BDBEC2"/>
<path opacity="0.75" d="M1319.02 629.019C1318.92 629.019 1318.92 629.019 1318.82 629.019C1318.42 628.919 1318.12 628.519 1318.22 628.119C1340.32 530.519 1389.62 441.319 1460.92 370.019C1532.22 298.719 1621.42 249.419 1719.02 227.319C1719.42 227.219 1719.82 227.519 1719.92 227.919C1720.02 228.319 1719.72 228.719 1719.32 228.819C1622.02 250.819 1533.02 300.019 1461.92 371.119C1390.92 442.119 1341.72 531.119 1319.72 628.519C1319.62 628.819 1319.32 629.019 1319.02 629.019Z" fill="#BDBEC2"/>
<path opacity="0.75" d="M1335.42 629.02C1335.32 629.02 1335.32 629.02 1335.22 629.02C1334.82 628.92 1334.52 628.52 1334.62 628.12C1356.42 534.82 1403.92 449.52 1472.12 381.32C1540.32 313.12 1625.72 265.52 1718.92 243.72C1719.32 243.62 1719.72 243.92 1719.82 244.32C1719.92 244.72 1719.62 245.12 1719.22 245.22C1626.22 266.92 1541.12 314.32 1473.12 382.42C1405.12 450.42 1357.72 535.52 1336.02 628.52C1336.02 628.82 1335.72 629.02 1335.42 629.02Z" fill="#BDBEC2"/>
<path opacity="0.75" d="M1351.82 629.02C1351.72 629.02 1351.72 629.02 1351.62 629.02C1351.22 628.92 1350.92 628.52 1351.02 628.12C1372.52 539.22 1418.32 457.82 1483.42 392.62C1548.52 327.42 1630.02 281.72 1718.92 260.22C1719.32 260.12 1719.72 260.42 1719.82 260.82C1719.92 261.22 1719.62 261.62 1719.22 261.72C1630.62 283.12 1549.42 328.82 1484.42 393.72C1419.42 458.72 1373.82 539.82 1352.42 628.52C1352.52 628.82 1352.22 629.02 1351.82 629.02Z" fill="#BDBEC2"/>
<path opacity="0.75" d="M1368.32 629.019C1368.22 629.019 1368.22 629.019 1368.12 629.019C1367.72 628.919 1367.52 628.519 1367.62 628.119C1388.72 543.519 1432.72 466.019 1494.82 403.919C1556.92 341.819 1634.42 297.819 1719.02 276.719C1719.42 276.619 1719.82 276.819 1719.92 277.219C1720.02 277.619 1719.82 278.019 1719.42 278.119C1635.12 299.219 1557.82 343.119 1495.92 404.919C1434.02 466.819 1390.12 544.119 1369.12 628.419C1369.02 628.819 1368.62 629.019 1368.32 629.019Z" fill="#BDBEC2"/>
<path opacity="0.75" d="M1384.82 629.019C1384.72 629.019 1384.72 629.019 1384.62 629.019C1384.22 628.919 1384.02 628.519 1384.12 628.119C1404.92 547.919 1447.12 474.319 1506.22 415.219C1565.22 356.219 1638.82 314.019 1719.12 293.119C1719.52 293.019 1719.92 293.219 1720.02 293.619C1720.12 294.019 1719.92 294.419 1719.52 294.519C1639.52 315.319 1566.22 357.319 1507.32 416.219C1448.42 475.119 1406.32 548.519 1385.52 628.519C1385.42 628.819 1385.12 629.019 1384.82 629.019Z" fill="#BDBEC2"/>
<path opacity="0.3" d="M1401.42 629.019C1401.32 629.019 1401.32 629.019 1401.22 629.019C1400.82 628.919 1400.62 628.519 1400.72 628.119C1442.42 473.419 1564.32 351.419 1719.02 309.819C1719.42 309.719 1719.82 309.919 1719.92 310.319C1720.02 310.719 1719.82 311.119 1719.42 311.219C1565.22 352.719 1443.62 474.319 1402.12 628.519C1402.02 628.819 1401.72 629.019 1401.42 629.019Z" fill="url(#paint6_linear)"/>
<path d="M1418.02 629.02C1417.92 629.02 1417.92 629.02 1417.82 629.02C1417.42 628.92 1417.22 628.52 1417.32 628.12C1437.32 556.62 1475.92 490.82 1528.82 437.92C1581.72 385.02 1647.52 346.42 1719.02 326.42C1719.42 326.32 1719.82 326.52 1719.92 326.92C1720.02 327.32 1719.82 327.72 1719.42 327.82C1648.12 347.82 1582.52 386.22 1529.82 438.92C1477.12 491.62 1438.62 557.22 1418.72 628.52C1418.62 628.82 1418.32 629.02 1418.02 629.02Z" fill="url(#paint7_linear)"/>
<path d="M1434.62 629.02C1434.52 629.02 1434.52 629.02 1434.42 629.02C1434.02 628.92 1433.82 628.52 1433.92 628.12C1453.52 560.92 1490.22 499.02 1540.12 449.22C1589.92 399.32 1651.82 362.62 1719.02 343.02C1719.42 342.92 1719.82 343.12 1719.92 343.52C1720.02 343.92 1719.82 344.32 1719.42 344.42C1652.42 363.92 1590.82 400.52 1541.12 450.22C1491.42 499.92 1454.82 561.52 1435.32 628.52C1435.22 628.82 1434.92 629.02 1434.62 629.02Z" fill="url(#paint8_linear)"/>
<path d="M1451.32 629.019C1451.22 629.019 1451.22 629.019 1451.12 629.019C1450.72 628.919 1450.52 628.519 1450.62 628.119C1490.02 499.519 1590.42 399.119 1719.02 359.719C1719.42 359.619 1719.82 359.819 1719.92 360.219C1720.02 360.619 1719.82 361.019 1719.42 361.119C1591.22 400.419 1491.32 500.319 1452.02 628.519C1451.92 628.819 1451.62 629.019 1451.32 629.019Z" fill="url(#paint9_linear)"/>
<path d="M1468.12 629.02C1468.02 629.02 1467.92 629.02 1467.92 629.02C1467.52 628.92 1467.32 628.52 1467.42 628.12C1505.62 508.82 1599.72 414.72 1719.02 376.52C1719.42 376.42 1719.82 376.62 1719.92 377.02C1720.02 377.42 1719.82 377.82 1719.42 377.92C1600.62 416.02 1506.92 509.72 1468.82 628.52C1468.72 628.82 1468.42 629.02 1468.12 629.02Z" fill="url(#paint10_linear)"/>
<path d="M1484.92 629.019C1484.82 629.019 1484.72 629.019 1484.72 629.019C1484.32 628.919 1484.12 628.419 1484.22 628.119C1502.42 573.819 1533.52 523.619 1574.02 483.119C1614.52 442.619 1664.62 411.519 1719.02 393.319C1719.42 393.219 1719.82 393.419 1719.92 393.819C1720.02 394.219 1719.82 394.619 1719.42 394.719C1665.32 412.919 1615.42 443.819 1575.02 484.119C1534.62 524.419 1503.72 574.419 1485.62 628.519C1485.52 628.819 1485.22 629.019 1484.92 629.019Z" fill="url(#paint11_linear)"/>
<path d="M1501.82 629.019C1501.72 629.019 1501.62 629.019 1501.62 629.019C1501.22 628.919 1501.02 628.419 1501.12 628.019C1518.72 578.019 1547.82 531.819 1585.32 494.419C1622.82 457.019 1669.02 427.819 1718.92 410.219C1719.32 410.119 1719.72 410.319 1719.92 410.719C1720.02 411.119 1719.82 411.519 1719.42 411.719C1669.62 429.219 1623.62 458.219 1586.32 495.519C1549.02 532.819 1520.02 578.819 1502.52 628.619C1502.42 628.819 1502.12 629.019 1501.82 629.019Z" fill="url(#paint12_linear)"/>
<path d="M1518.82 629.019C1518.72 629.019 1518.62 629.019 1518.52 629.019C1518.12 628.919 1517.92 628.419 1518.12 628.019C1552.72 535.019 1625.92 461.819 1718.92 427.219C1719.32 427.119 1719.72 427.319 1719.92 427.619C1720.02 428.019 1719.82 428.419 1719.52 428.619C1626.82 463.019 1553.92 535.919 1519.52 628.619C1519.42 628.919 1519.12 629.019 1518.82 629.019Z" fill="url(#paint13_linear)"/>
<path d="M1535.92 629.019C1535.82 629.019 1535.72 629.019 1535.62 628.919C1535.22 628.719 1535.02 628.319 1535.22 627.919C1568.12 544.119 1635.02 477.119 1718.92 444.219C1719.32 444.119 1719.72 444.219 1719.92 444.619C1720.12 445.019 1719.92 445.419 1719.52 445.619C1636.12 478.319 1569.42 545.019 1536.72 628.419C1536.52 628.919 1536.22 629.019 1535.92 629.019Z" fill="url(#paint14_linear)"/>
<path d="M1553.22 629.019C1553.12 629.019 1553.02 629.019 1552.92 628.919C1552.52 628.719 1552.32 628.319 1552.52 627.919C1568.12 590.419 1590.52 556.919 1619.22 528.219C1647.92 499.519 1681.42 477.119 1718.92 461.519C1719.32 461.319 1719.72 461.519 1719.92 461.919C1720.12 462.319 1719.92 462.719 1719.52 462.919C1682.22 478.419 1648.92 500.819 1620.32 529.319C1591.82 557.819 1569.42 591.219 1553.92 628.519C1553.82 628.919 1553.52 629.019 1553.22 629.019Z" fill="url(#paint15_linear)"/>
<path d="M1570.62 629.019C1570.52 629.019 1570.42 629.019 1570.32 628.919C1569.92 628.719 1569.82 628.319 1569.92 627.919C1599.42 561.319 1652.32 508.419 1718.92 478.919C1719.32 478.719 1719.72 478.919 1719.92 479.319C1720.12 479.719 1719.92 480.119 1719.52 480.319C1653.32 509.719 1600.72 562.319 1571.32 628.519C1571.22 628.919 1570.92 629.019 1570.62 629.019Z" fill="url(#paint16_linear)"/>
<path d="M1588.22 629.019C1588.12 629.019 1588.02 629.019 1587.92 628.919C1587.52 628.719 1587.42 628.319 1587.52 627.919C1614.82 570.519 1661.42 523.819 1718.92 496.519C1719.32 496.319 1719.72 496.519 1719.92 496.919C1720.12 497.319 1719.92 497.719 1719.52 497.919C1662.42 525.019 1616.02 571.419 1588.92 628.519C1588.72 628.919 1588.52 629.019 1588.22 629.019Z" fill="#BDBEC2"/>
</g>
<mask id="mask1" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="509" height="509">
<rect width="509" height="509" fill="#FF00FF"/>
</mask>
<g mask="url(#mask1)">
<path opacity="0.5" d="M-23.2 21.8745C-23.3 21.8745 -23.4 21.8745 -23.6 21.7745C-24 21.5745 -24.1 21.1745 -23.9 20.7745C-2.9 -18.5255 19.5 -57.6255 42.6 -95.5255C42.8 -95.9255 43.3 -96.0255 43.6 -95.7255C44 -95.5255 44.1 -95.0255 43.8 -94.7255C20.8 -56.9255 -1.6 -17.8255 -22.5 21.4745C-22.6 21.7745 -22.9 21.8745 -23.2 21.8745Z" fill="#BDBEC2"/>
<path opacity="0.5" d="M-23.1999 56.3745C-23.2999 56.3745 -23.3999 56.3745 -23.4999 56.2745C-23.8999 56.0745 -23.9999 55.6745 -23.7999 55.2745C2.6001 4.07452 31.2001 -46.6255 61.3001 -95.5255C61.5001 -95.9255 62.0001 -96.0255 62.3001 -95.7255C62.7001 -95.5255 62.8001 -95.0255 62.5001 -94.7255C32.5001 -45.9255 3.9001 4.77452 -22.4999 55.9745C-22.5999 56.1745 -22.8999 56.3745 -23.1999 56.3745Z" fill="#BDBEC2"/>
<path opacity="0.5" d="M-23.1999 91.6745C-23.2999 91.6745 -23.3999 91.6745 -23.4999 91.5745C-23.8999 91.3745 -23.9999 90.9745 -23.7999 90.5745C7.9001 27.0745 42.9001 -35.6255 80.1001 -95.5255C80.3001 -95.9255 80.8001 -96.0255 81.1001 -95.7255C81.5001 -95.5255 81.6001 -95.0255 81.3001 -94.7255C44.2001 -34.8255 9.2001 27.7745 -22.4999 91.2745C-22.5999 91.5745 -22.8999 91.6745 -23.1999 91.6745Z" fill="#BDBEC2"/>
<path opacity="0.15" d="M-23.2 128.175C-23.3 128.175 -23.4 128.175 -23.5 128.075C-23.9 127.875 -24 127.475 -23.9 127.075C12.8 50.8745 54.1 -24.0255 99 -95.5255C99.2 -95.9255 99.7 -96.0255 100 -95.7255C100.4 -95.5255 100.5 -95.0255 100.2 -94.7255C55.4 -23.2255 14.1 51.5745 -22.5 127.675C-22.6 127.975 -22.9 128.175 -23.2 128.175Z" fill="url(#paint17_linear)"/>
<path opacity="0.25" d="M-23.2 165.674C-23.3 165.674 -23.4 165.674 -23.5 165.574C-23.9 165.374 -24 164.974 -23.9 164.574C17.4 75.1744 65.1 -12.4256 117.8 -95.6256C118 -96.0256 118.5 -96.1256 118.8 -95.8256C119.2 -95.6256 119.3 -95.1256 119 -94.8256C66.5 -11.6256 18.8 75.8744 -22.5 165.274C-22.6 165.474 -22.9 165.674 -23.2 165.674Z" fill="url(#paint18_linear)"/>
<path opacity="0.35" d="M-23.2 204.474C-23.3 204.474 -23.4 204.474 -23.5 204.374C-23.9 204.174 -24 203.774 -23.9 203.374C21.9 100.174 76 -0.425722 136.9 -95.6257C137.1 -95.9257 137.6 -96.1257 137.9 -95.8257C138.2 -95.6257 138.4 -95.1257 138.1 -94.8257C77.3 0.274279 23.2 100.874 -22.5 204.074C-22.6 204.374 -22.9 204.474 -23.2 204.474Z" fill="url(#paint19_linear)"/>
<path opacity="0.55" d="M-23.2001 244.774C-23.3001 244.774 -23.4001 244.774 -23.5001 244.674C-23.9001 244.474 -24.1001 244.074 -23.9001 243.674C25.8999 125.874 86.3999 11.6744 155.9 -95.6256C156.1 -95.9256 156.6 -96.0256 156.9 -95.8256C157.2 -95.6256 157.3 -95.1256 157.1 -94.8256C87.6999 12.5744 27.2999 126.674 -22.5001 244.374C-22.6001 244.574 -22.9001 244.774 -23.2001 244.774Z" fill="#BDBEC2"/>
<path opacity="0.65" d="M-23.1 286.774C-23.2 286.774 -23.3 286.774 -23.4 286.674C-23.8 286.474 -24 286.074 -23.8 285.674C29.7 152.674 96.6 24.3744 175 -95.6256C175.2 -95.9256 175.7 -96.0256 176 -95.8256C176.3 -95.6256 176.4 -95.1256 176.2 -94.8256C97.8 25.1744 31 153.374 -22.5 286.274C-22.6 286.574 -22.9 286.774 -23.1 286.774Z" fill="#BDBEC2"/>
<path opacity="0.65" d="M-23.1 330.674C-23.2 330.674 -23.3 330.674 -23.4 330.674C-23.8 330.574 -24 330.074 -23.8 329.674C32.9 180.574 106.2 37.4744 194.1 -95.6256C194.3 -95.9256 194.8 -96.0256 195.1 -95.8256C195.4 -95.6256 195.5 -95.1256 195.3 -94.8256C107.4 38.1744 34.2 181.174 -22.5 330.174C-22.6 330.474 -22.8 330.674 -23.1 330.674Z" fill="#BDBEC2"/>
<path opacity="0.65" d="M-23.1001 376.974C-23.2001 376.974 -23.3001 376.974 -23.4001 376.974C-23.8001 376.874 -24.0001 376.374 -23.9001 375.974C35.5999 209.774 115.3 51.1744 213.3 -95.6256C213.5 -95.9256 214 -96.0256 214.3 -95.8256C214.6 -95.6256 214.7 -95.1256 214.5 -94.8256C116.7 51.8744 36.8999 210.474 -22.4001 376.474C-22.6001 376.774 -22.8001 376.974 -23.1001 376.974Z" fill="#BDBEC2"/>
<path opacity="0.75" d="M-23.1 425.974C-23.2 425.974 -23.3 425.974 -23.3 425.974C-23.7 425.874 -23.9 425.374 -23.8 425.074C37.6 240.674 123.9 65.4744 232.6 -95.6256C232.8 -95.9256 233.3 -96.0256 233.6 -95.8256C233.9 -95.6256 234 -95.1256 233.8 -94.8256C125.2 66.1744 38.9 241.174 -22.5 425.374C-22.5 425.774 -22.8 425.974 -23.1 425.974Z" fill="#BDBEC2"/>
<path opacity="0.3" d="M-23.1 478.574C-23.2 478.574 -23.2 478.574 -23.3 478.574C-23.7 478.474 -23.9 478.074 -23.8 477.674C38.9 273.674 131.7 80.7745 252 -95.5255C252.2 -95.8255 252.7 -95.9255 253 -95.7255C253.3 -95.5255 253.4 -95.0255 253.2 -94.7255C132.9 81.4745 40.2 274.174 -22.4 478.074C-22.5 478.374 -22.8 478.574 -23.1 478.574Z" fill="#BDBEC2"/>
<path opacity="0.3" d="M-23.1 535.474C-23.2 535.474 -23.2 535.474 -23.3 535.474C-23.7 535.374 -23.9 534.974 -23.8 534.574C39.1 309.074 138.4 97.0744 271.3 -95.6256C271.5 -95.9256 272 -96.0256 272.3 -95.8256C272.6 -95.6256 272.7 -95.1256 272.5 -94.8256C139.7 97.7744 40.5 309.574 -22.4 534.874C-22.5 535.274 -22.8 535.474 -23.1 535.474Z" fill="#BDBEC2"/>
<path d="M-23.1 598.374C-23.2 598.374 -23.2 598.374 -23.3 598.374C-23.7 598.274 -23.9 597.874 -23.8 597.474C6.80004 473.874 49.1 352.474 101.7 236.474C154.3 120.574 217.9 8.77437 290.8 -95.6256C291 -95.9256 291.5 -96.0256 291.8 -95.8256C292.1 -95.6256 292.2 -95.1256 292 -94.8256C219.2 9.47437 155.6 121.174 103 236.974C50.4 352.974 8.20004 474.274 -22.4 597.774C-22.5 598.174 -22.8 598.374 -23.1 598.374Z" fill="url(#paint20_linear)"/>
<path d="M-23.1001 669.774C-23.2001 669.774 -23.2001 669.774 -23.3001 669.774C-23.7001 669.674 -24.0001 669.274 -23.9001 668.874C5.39995 531.074 49 395.674 105.7 266.574C161.4 139.774 230.2 17.9744 310.3 -95.6256C310.5 -95.9256 311 -96.0256 311.3 -95.8256C311.6 -95.6256 311.7 -95.1256 311.5 -94.8256C231.5 18.6744 162.7 140.374 107.1 267.074C50.3999 396.074 6.79995 531.374 -22.4001 669.074C-22.5001 669.474 -22.8001 669.774 -23.1001 669.774Z" fill="url(#paint21_linear)"/>
<path opacity="0.9" d="M-14.1 705.574H-14.2C-14.6 705.474 -14.9 705.074 -14.8 704.674C13.5 559.974 57.6001 417.974 116.2 282.574C173.7 149.874 245.6 22.5744 329.9 -95.6256C330.1 -95.9256 330.6 -96.0256 330.9 -95.8256C331.2 -95.6256 331.3 -95.1256 331.1 -94.8256C246.9 23.2744 175 150.474 117.5 283.074C58.9 418.474 14.9 560.374 -13.4 704.974C-13.4 705.374 -13.8 705.574 -14.1 705.574Z" fill="url(#paint22_linear)"/>
<path opacity="0.8" d="M2.2001 705.574H2.10009C1.70009 705.474 1.40009 705.074 1.50009 704.674C30.0001 559.774 74.6001 417.674 133.8 282.274C191.9 149.474 264.5 22.3744 349.6 -95.6256C349.8 -95.9256 350.3 -96.0256 350.6 -95.8256C350.9 -95.6256 351 -95.1256 350.8 -94.8256C265.8 23.1744 193.2 150.174 135.1 282.874C75.9001 418.174 31.4001 560.174 2.90009 704.974C2.90009 705.374 2.5001 705.574 2.2001 705.574Z" fill="url(#paint23_linear)"/>
<path opacity="0.7" d="M18.4999 705.574H18.3999C17.9999 705.474 17.6999 705.074 17.7999 704.674C46.5999 559.574 91.5999 417.274 151.4 281.874C210.1 149.074 283.4 22.0744 369.4 -95.6256C369.6 -95.9256 370.1 -96.0256 370.4 -95.8256C370.7 -95.6256 370.8 -95.1256 370.6 -94.8256C284.7 22.7744 211.4 149.674 152.8 282.374C92.9999 417.874 47.9999 559.974 19.1999 704.974C19.1999 705.374 18.7999 705.574 18.4999 705.574Z" fill="url(#paint24_linear)"/>
<path opacity="0.6" d="M34.7999 705.574H34.6999C34.2999 705.474 33.9999 705.074 34.0999 704.674C63.1999 559.374 108.6 416.974 169.1 281.474C228.4 148.674 302.5 21.7744 389.2 -95.6256C389.4 -95.9256 389.9 -96.0256 390.2 -95.8256C390.5 -95.6256 390.6 -95.1256 390.4 -94.8256C303.7 22.4744 229.6 149.274 170.4 282.074C110 417.474 64.5999 559.774 35.4999 704.974C35.4999 705.374 35.1999 705.574 34.7999 705.574Z" fill="url(#paint25_linear)"/>
<path opacity="0.5" d="M51.1 705.574H51C50.6 705.474 50.3 705.074 50.4 704.674C79.8 559.174 125.7 416.674 186.8 281.174C246.7 148.274 321.5 21.4744 409.1 -95.6256C409.3 -95.9256 409.8 -96.0256 410.1 -95.8256C410.4 -95.6256 410.5 -95.1256 410.3 -94.8256C322.7 22.1744 248 148.874 188.1 281.674C127.1 417.174 81.2 559.574 51.9 704.974C51.8 705.374 51.5 705.574 51.1 705.574Z" fill="url(#paint26_linear)"/>
<path opacity="0.4" d="M67.5 705.574C67.5 705.574 67.4 705.574 67.3 705.574C66.9 705.474 66.6 705.074 66.7 704.674C96.4 558.874 142.7 416.274 204.5 280.774C265.1 147.874 340.7 21.2744 429.2 -95.6256C429.5 -95.9256 429.9 -96.0256 430.3 -95.7256C430.6 -95.5256 430.7 -95.0256 430.4 -94.6256C342 22.1744 266.4 148.674 205.9 281.474C144.2 416.874 97.9 559.374 68.2 705.074C68.1 705.374 67.8 705.574 67.5 705.574Z" fill="url(#paint27_linear)"/>
<path opacity="0.3" d="M83.8001 705.574C83.8001 705.574 83.7001 705.574 83.6001 705.574C83.2001 705.474 82.9001 705.074 83.0001 704.674C113 558.674 159.8 415.874 222.2 280.274C283.4 147.374 359.7 20.8744 449.2 -95.6256C449.5 -95.9256 449.9 -96.0256 450.3 -95.7256C450.6 -95.4256 450.7 -95.0256 450.4 -94.6256C361.1 21.6744 284.8 148.074 223.7 280.974C161.3 416.474 114.5 559.074 84.6001 704.974C84.5001 705.374 84.1001 705.574 83.8001 705.574Z" fill="url(#paint28_linear)"/>
<path opacity="0.2" d="M100.1 705.574C99.9999 705.574 99.9999 705.574 99.8999 705.574C99.4999 705.474 99.1999 705.074 99.2999 704.674C129.6 558.474 176.9 415.474 240 279.874C301.9 146.874 379 20.5744 469.4 -95.6256C469.7 -95.9256 470.1 -96.0256 470.5 -95.7256C470.9 -95.4256 470.9 -95.0256 470.6 -94.6256C380.3 21.4744 303.2 147.774 241.4 280.674C178.4 416.074 131.1 558.874 100.9 704.974C100.8 705.374 100.5 705.574 100.1 705.574Z" fill="url(#paint29_linear)"/>
<path opacity="0.1" d="M116.5 705.574C116.4 705.574 116.4 705.574 116.3 705.574C115.9 705.474 115.6 705.074 115.7 704.674C146.3 558.174 194.2 415.074 258 279.474C320.5 146.474 398.5 20.2744 489.8 -95.6256C490.1 -95.9256 490.5 -96.0256 490.9 -95.7256C491.2 -95.4256 491.3 -95.0256 491 -94.6256C399.8 21.0744 321.9 147.174 259.4 280.074C195.7 415.574 147.8 558.574 117.3 704.974C117.1 705.374 116.8 705.574 116.5 705.574Z" fill="url(#paint30_linear)"/>
</g>
<defs>
<linearGradient id="paint0_linear" x1="1203.91" y1="371.035" x2="1719.96" y2="371.035" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2"/>
<stop offset="1" stop-color="#BDBEC2" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="1220.18" y1="379.17" x2="1719.96" y2="379.17" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2"/>
<stop offset="1" stop-color="#BDBEC2" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint2_linear" x1="1236.46" y1="387.31" x2="1719.96" y2="387.31" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2"/>
<stop offset="1" stop-color="#BDBEC2" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint3_linear" x1="1252.79" y1="395.474" x2="1719.96" y2="395.474" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2"/>
<stop offset="1" stop-color="#BDBEC2" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint4_linear" x1="1269.12" y1="403.64" x2="1719.96" y2="403.64" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2"/>
<stop offset="1" stop-color="#BDBEC2" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint5_linear" x1="1285.46" y1="411.81" x2="1719.96" y2="411.81" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2"/>
<stop offset="1" stop-color="#BDBEC2" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint6_linear" x1="1400.64" y1="469.4" x2="1719.96" y2="469.4" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
<linearGradient id="paint7_linear" x1="1417.23" y1="477.695" x2="1719.96" y2="477.695" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
<linearGradient id="paint8_linear" x1="1433.88" y1="486.02" x2="1719.96" y2="486.02" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
<linearGradient id="paint9_linear" x1="1450.58" y1="494.37" x2="1719.96" y2="494.37" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
<linearGradient id="paint10_linear" x1="1467.33" y1="502.745" x2="1719.96" y2="502.745" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
<linearGradient id="paint11_linear" x1="1484.16" y1="511.16" x2="1719.96" y2="511.16" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
<linearGradient id="paint12_linear" x1="1501.07" y1="519.614" x2="1719.96" y2="519.614" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
<linearGradient id="paint13_linear" x1="1518.09" y1="528.125" x2="1719.96" y2="528.125" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
<linearGradient id="paint14_linear" x1="1535.21" y1="536.685" x2="1719.96" y2="536.685" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
<linearGradient id="paint15_linear" x1="1552.46" y1="545.31" x2="1719.96" y2="545.31" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
<linearGradient id="paint16_linear" x1="1569.87" y1="554.015" x2="1719.96" y2="554.015" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
<linearGradient id="paint17_linear" x1="-23.8999" y1="16.1054" x2="100.391" y2="16.1054" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
<linearGradient id="paint18_linear" x1="-23.8997" y1="34.8754" x2="119.29" y2="34.8754" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
<linearGradient id="paint19_linear" x1="-23.8999" y1="54.2951" x2="138.261" y2="54.2951" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
<linearGradient id="paint20_linear" x1="-23.8998" y1="251.215" x2="292.141" y2="251.215" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
<linearGradient id="paint21_linear" x1="-23.9001" y1="286.915" x2="311.67" y2="286.915" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
<linearGradient id="paint22_linear" x1="-14.8638" y1="304.825" x2="331.27" y2="304.825" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
<linearGradient id="paint23_linear" x1="1.43769" y1="304.825" x2="350.961" y2="304.825" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
<linearGradient id="paint24_linear" x1="17.7468" y1="304.825" x2="370.72" y2="304.825" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
<linearGradient id="paint25_linear" x1="34.0591" y1="304.825" x2="390.6" y2="304.825" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
<linearGradient id="paint26_linear" x1="50.3892" y1="304.825" x2="410.491" y2="304.825" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
<linearGradient id="paint27_linear" x1="66.7214" y1="304.825" x2="430.511" y2="304.825" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
<linearGradient id="paint28_linear" x1="83.045" y1="304.825" x2="450.601" y2="304.825" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
<linearGradient id="paint29_linear" x1="99.3716" y1="304.825" x2="470.83" y2="304.825" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
<linearGradient id="paint30_linear" x1="115.738" y1="304.825" x2="491.141" y2="304.825" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 33 KiB

View File

@ -0,0 +1,116 @@
<svg width="600" height="360" viewBox="0 0 600 360" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="300" y="60" width="300" height="300">
<rect x="300" y="60" width="300" height="300" fill="#FF00FF"/>
</mask>
<g mask="url(#mask0)">
<path opacity="0.1" d="M267.719 689.019H267.619C267.219 688.919 266.919 688.619 267.019 688.119C279.519 604.419 305.419 523.819 344.019 448.419C381.619 374.819 430.419 307.719 489.119 249.019C547.719 190.419 614.719 141.619 688.319 104.019C763.719 65.5194 844.419 39.6194 928.019 27.0194C928.419 26.9194 928.819 27.2194 928.919 27.6194C929.019 28.0194 928.719 28.4194 928.319 28.5194C844.819 41.0194 764.319 66.9194 689.019 105.319C615.519 142.819 548.619 191.619 490.019 250.119C431.419 308.719 382.719 375.619 345.219 449.119C306.819 524.419 280.919 604.919 268.419 688.419C268.319 688.819 268.019 689.019 267.719 689.019Z" fill="#BDBEC2"/>
<path opacity="0.15" d="M283.819 689.019H283.719C283.319 688.919 283.019 688.619 283.119 688.119C295.619 606.619 321.019 528.019 358.719 454.619C395.519 382.919 443.119 317.519 500.319 260.319C557.519 203.119 622.819 155.519 694.619 118.719C768.119 81.0195 846.619 55.6195 928.119 43.1195C928.519 43.0195 928.919 43.3195 929.019 43.7195C929.119 44.1195 928.819 44.5195 928.419 44.6195C847.119 57.0195 768.619 82.4195 695.319 120.019C623.719 156.719 558.519 204.319 501.419 261.419C444.319 318.519 396.719 383.719 360.019 455.319C322.419 528.619 297.019 607.019 284.619 688.419C284.519 688.819 284.219 689.019 283.819 689.019Z" fill="#BDBEC2"/>
<path opacity="0.2" d="M300.019 689.019H299.919C299.519 688.919 299.219 688.619 299.319 688.119C311.719 608.819 336.719 532.319 373.519 460.819C409.419 391.019 455.919 327.319 511.619 271.619C567.319 215.919 631.019 169.419 700.819 133.519C772.319 96.7192 848.819 71.7192 928.119 59.3192C928.519 59.2192 928.919 59.5192 929.019 59.9192C929.119 60.3192 928.819 60.7192 928.419 60.8192C849.219 73.2192 772.919 98.1192 701.619 134.819C631.919 170.719 568.419 217.119 512.819 272.719C457.219 328.319 410.819 391.819 374.919 461.519C338.219 532.819 313.319 609.219 300.919 688.319C300.719 688.819 300.419 689.019 300.019 689.019Z" fill="#BDBEC2"/>
<path opacity="0.25" d="M316.219 689.019H316.119C315.719 688.919 315.419 688.619 315.519 688.119C327.819 610.919 352.319 536.619 388.319 467.019C423.319 399.219 468.619 337.319 522.919 283.019C577.219 228.719 639.119 183.419 707.019 148.319C776.519 112.419 850.919 87.9194 928.119 75.5194C928.519 75.4194 928.919 75.7194 929.019 76.1194C929.119 76.5194 928.819 76.9194 928.419 77.0194C851.419 89.3194 777.119 113.819 707.819 149.619C640.019 184.619 578.219 229.819 524.119 284.019C469.919 338.219 424.719 400.019 389.719 467.719C353.719 537.219 329.219 611.419 316.919 688.419C316.919 688.819 316.619 689.019 316.219 689.019Z" fill="#BDBEC2"/>
<path opacity="0.3" d="M332.419 689.02H332.319C331.919 688.92 331.619 688.52 331.719 688.12C344.019 613.12 368.019 540.82 403.019 473.22C437.319 407.22 481.419 347.02 534.219 294.22C587.019 241.42 647.219 197.32 713.219 163.02C780.819 127.92 853.119 103.92 928.119 91.7196C928.519 91.6196 928.919 91.9196 929.019 92.3196C929.119 92.7196 928.819 93.1196 928.419 93.2196C853.519 105.42 781.419 129.42 714.019 164.42C648.119 198.62 588.019 242.62 535.419 295.32C482.619 348.02 438.519 408.12 404.419 474.02C369.419 541.42 345.519 613.62 333.219 688.42C333.119 688.82 332.819 689.02 332.419 689.02Z" fill="#BDBEC2"/>
<path opacity="0.35" d="M348.619 689.019H348.519C348.119 688.919 347.819 688.519 347.919 688.119C360.119 615.319 383.619 545.119 417.819 479.519C451.219 415.419 494.219 356.919 545.519 305.619C596.819 254.319 655.319 211.319 719.419 177.919C785.019 143.719 855.219 120.219 928.019 108.019C928.419 107.919 928.819 108.219 928.919 108.619C929.019 109.019 928.719 109.419 928.319 109.519C855.619 121.719 785.619 145.119 720.119 179.319C656.119 212.619 597.719 255.519 546.519 306.719C495.319 357.919 452.419 416.319 419.119 480.319C385.019 545.819 361.519 615.819 349.319 688.519C349.319 688.819 349.019 689.019 348.619 689.019Z" fill="#BDBEC2"/>
<path opacity="0.4" d="M364.919 689.02H364.819C364.419 688.92 364.119 688.52 364.219 688.12C376.319 617.42 399.419 549.32 432.719 485.72C465.319 423.52 507.119 366.72 556.919 316.92C606.719 267.12 663.519 225.32 725.719 192.72C789.319 159.42 857.419 136.32 928.119 124.22C928.519 124.12 928.919 124.42 929.019 124.82C929.119 125.22 928.819 125.62 928.419 125.72C857.919 137.82 789.919 160.82 726.419 194.02C664.319 226.62 607.619 268.32 557.919 318.02C508.219 367.72 466.519 424.42 434.019 486.52C400.719 550.02 377.719 617.92 365.719 688.52C365.619 688.82 365.219 689.02 364.919 689.02Z" fill="#BDBEC2"/>
<path opacity="0.45" d="M381.119 689.019H381.019C380.619 688.919 380.319 688.519 380.419 688.119C429.319 409.519 649.419 189.419 928.119 140.419C928.519 140.319 928.919 140.619 929.019 141.019C929.119 141.419 928.819 141.819 928.419 141.919C650.419 190.719 430.819 410.319 381.919 688.419C381.819 688.819 381.519 689.019 381.119 689.019Z" fill="#BDBEC2"/>
<path opacity="0.5" d="M397.419 689.019H397.319C396.919 688.919 396.619 688.519 396.719 688.119C408.719 621.819 430.719 557.819 462.319 498.119C493.219 439.719 532.619 386.319 579.519 339.419C626.419 292.519 679.819 253.119 738.219 222.219C797.919 190.619 861.819 168.519 928.219 156.619C928.619 156.519 929.019 156.819 929.119 157.219C929.219 157.619 928.919 158.019 928.519 158.119C862.319 170.019 798.519 192.019 739.019 223.619C680.719 254.419 627.519 293.819 580.719 340.519C533.919 387.319 494.619 440.519 463.819 498.819C432.319 558.419 410.319 622.119 398.319 688.319C398.019 688.819 397.719 689.019 397.419 689.019Z" fill="#BDBEC2"/>
<path d="M413.619 689.019H413.519C413.119 688.919 412.819 688.519 412.919 688.119C424.819 623.919 446.319 562.119 477.019 504.419C507.019 447.919 545.319 396.219 590.719 350.819C636.119 305.419 687.819 267.119 744.319 237.119C802.019 206.419 863.919 184.819 928.119 172.919C928.519 172.819 928.919 173.119 929.019 173.519C929.119 173.919 928.819 174.319 928.419 174.419C864.419 186.219 802.719 207.819 745.119 238.419C688.719 268.419 637.219 306.519 591.919 351.819C546.619 397.119 508.419 448.619 478.519 505.019C447.919 562.619 426.319 624.319 414.519 688.319C414.319 688.819 414.019 689.019 413.619 689.019Z" fill="url(#paint0_linear)"/>
<path d="M429.919 689.02H429.819C429.419 688.92 429.119 688.52 429.219 688.12C441.019 626.12 462.119 566.42 491.919 510.62C521.119 456.02 558.219 406.12 602.119 362.12C646.019 318.12 696.019 281.12 750.619 251.92C806.419 222.12 866.119 201.02 928.119 189.22C928.519 189.12 928.919 189.42 929.019 189.82C929.119 190.22 928.819 190.62 928.419 190.72C866.519 202.42 807.019 223.52 751.319 253.22C696.819 282.32 647.019 319.32 603.219 363.12C559.419 406.92 522.419 456.82 493.319 511.22C463.519 566.92 442.519 626.42 430.819 688.32C430.619 688.82 430.319 689.02 429.919 689.02Z" fill="url(#paint1_linear)"/>
<path d="M446.219 689.019H446.119C445.719 688.919 445.419 688.519 445.519 688.119C468.819 568.819 526.819 460.019 613.419 373.419C700.019 286.819 808.819 228.819 928.119 205.519C928.519 205.419 928.919 205.719 929.019 206.119C929.119 206.519 928.819 206.919 928.419 207.019C809.419 230.219 700.819 288.119 614.519 374.519C528.019 460.919 470.119 569.419 446.919 688.419C446.919 688.819 446.519 689.019 446.219 689.019Z" fill="url(#paint2_linear)"/>
<path d="M462.519 689.019H462.419C462.019 688.919 461.719 688.519 461.819 688.119C484.819 573.119 541.219 468.219 624.719 384.719C708.219 301.219 813.119 244.919 928.119 221.819C928.519 221.719 928.919 222.019 929.019 222.419C929.119 222.819 928.819 223.219 928.419 223.319C813.719 246.319 709.119 302.519 625.819 385.819C542.519 469.119 486.319 573.719 463.319 688.419C463.219 688.819 462.919 689.019 462.519 689.019Z" fill="url(#paint3_linear)"/>
<path d="M478.919 689.019C478.819 689.019 478.819 689.019 478.719 689.019C478.319 688.919 478.019 688.519 478.119 688.119C500.919 577.519 555.519 476.519 636.019 396.019C716.519 315.519 817.519 261.019 928.119 238.119C928.519 238.019 928.919 238.319 929.019 238.719C929.119 239.119 928.819 239.519 928.419 239.619C818.119 262.419 717.319 316.819 637.119 397.019C556.919 477.219 502.419 578.019 479.719 688.319C479.519 688.819 479.219 689.019 478.919 689.019Z" fill="url(#paint4_linear)"/>
<path d="M495.219 689.019C495.119 689.019 495.119 689.019 495.019 689.019C494.619 688.919 494.319 688.519 494.419 688.119C517.019 581.819 569.819 484.719 647.219 407.419C724.619 330.019 821.719 277.219 927.919 254.619C928.319 254.519 928.719 254.819 928.819 255.219C928.919 255.619 928.619 256.019 928.219 256.119C822.219 278.619 725.419 331.319 648.219 408.519C571.019 485.719 518.319 582.519 495.819 688.519C495.819 688.819 495.519 689.019 495.219 689.019Z" fill="url(#paint5_linear)"/>
<path opacity="0.3" d="M511.619 689.019C511.519 689.019 511.519 689.019 511.419 689.019C511.019 688.919 510.719 688.519 510.819 688.119C556.319 480.219 720.119 316.419 928.019 270.919C928.419 270.819 928.819 271.119 928.919 271.519C929.019 271.919 928.719 272.319 928.319 272.419C721.019 317.819 557.719 481.119 512.219 688.519C512.219 688.819 511.919 689.019 511.619 689.019Z" fill="#BDBEC2"/>
<path opacity="0.75" d="M528.019 689.019C527.919 689.019 527.919 689.019 527.819 689.019C527.419 688.919 527.119 688.519 527.219 688.119C549.319 590.519 598.619 501.319 669.919 430.019C741.219 358.719 830.419 309.419 928.019 287.319C928.419 287.219 928.819 287.519 928.919 287.919C929.019 288.319 928.719 288.719 928.319 288.819C831.019 310.819 742.019 360.019 670.919 431.119C599.919 502.119 550.719 591.119 528.719 688.519C528.619 688.819 528.319 689.019 528.019 689.019Z" fill="#BDBEC2"/>
<path opacity="0.75" d="M544.419 689.02C544.319 689.02 544.319 689.02 544.219 689.02C543.819 688.92 543.519 688.52 543.619 688.12C565.419 594.82 612.919 509.52 681.119 441.32C749.319 373.12 834.719 325.52 927.919 303.72C928.319 303.62 928.719 303.92 928.819 304.32C928.919 304.72 928.619 305.12 928.219 305.22C835.219 326.92 750.119 374.32 682.119 442.42C614.119 510.42 566.719 595.52 545.019 688.52C545.019 688.82 544.719 689.02 544.419 689.02Z" fill="#BDBEC2"/>
<path opacity="0.75" d="M560.819 689.02C560.719 689.02 560.719 689.02 560.619 689.02C560.219 688.92 559.919 688.52 560.019 688.12C581.519 599.22 627.319 517.82 692.419 452.62C757.519 387.42 839.019 341.72 927.919 320.22C928.319 320.12 928.719 320.42 928.819 320.82C928.919 321.22 928.619 321.62 928.219 321.72C839.619 343.12 758.419 388.82 693.419 453.72C628.419 518.72 582.819 599.82 561.419 688.52C561.519 688.82 561.219 689.02 560.819 689.02Z" fill="#BDBEC2"/>
<path opacity="0.75" d="M577.319 689.019C577.219 689.019 577.219 689.019 577.119 689.019C576.719 688.919 576.519 688.519 576.619 688.119C597.719 603.519 641.719 526.019 703.819 463.919C765.919 401.819 843.419 357.819 928.019 336.719C928.419 336.619 928.819 336.819 928.919 337.219C929.019 337.619 928.819 338.019 928.419 338.119C844.119 359.219 766.819 403.119 704.919 464.919C643.019 526.819 599.119 604.119 578.119 688.419C578.019 688.819 577.619 689.019 577.319 689.019Z" fill="#BDBEC2"/>
<path opacity="0.75" d="M593.819 689.019C593.719 689.019 593.719 689.019 593.619 689.019C593.219 688.919 593.019 688.519 593.119 688.119C613.919 607.919 656.119 534.319 715.219 475.219C774.219 416.219 847.819 374.019 928.119 353.119C928.519 353.019 928.919 353.219 929.019 353.619C929.119 354.019 928.919 354.419 928.519 354.519C848.519 375.319 775.219 417.319 716.319 476.219C657.419 535.119 615.319 608.519 594.519 688.519C594.419 688.819 594.119 689.019 593.819 689.019Z" fill="#BDBEC2"/>
</g>
<mask id="mask1" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="300" height="300">
<rect width="300" height="300" fill="#FF00FF"/>
</mask>
<g mask="url(#mask1)">
<path opacity="0.3" d="M-273.1 478.574C-273.2 478.574 -273.2 478.574 -273.3 478.574C-273.7 478.474 -273.9 478.074 -273.8 477.674C-211.1 273.674 -118.3 80.7745 2.00003 -95.5255C2.20003 -95.8255 2.70003 -95.9255 3.00003 -95.7255C3.30003 -95.5255 3.40004 -95.0255 3.20004 -94.7255C-117.1 81.4745 -209.8 274.174 -272.4 478.074C-272.5 478.374 -272.8 478.574 -273.1 478.574Z" fill="#BDBEC2"/>
<path opacity="0.3" d="M-273.1 535.474C-273.2 535.474 -273.2 535.474 -273.3 535.474C-273.7 535.374 -273.9 534.974 -273.8 534.574C-210.9 309.074 -111.6 97.0744 21.3 -95.6256C21.5 -95.9256 22 -96.0256 22.3 -95.8256C22.6 -95.6256 22.7 -95.1256 22.5 -94.8256C-110.3 97.7744 -209.5 309.574 -272.4 534.874C-272.5 535.274 -272.8 535.474 -273.1 535.474Z" fill="#BDBEC2"/>
<path d="M-273.1 598.374C-273.2 598.374 -273.2 598.374 -273.3 598.374C-273.7 598.274 -273.9 597.874 -273.8 597.474C-243.2 473.874 -200.9 352.474 -148.3 236.474C-95.7 120.574 -32.1 8.77437 40.8 -95.6256C41 -95.9256 41.5 -96.0256 41.8 -95.8256C42.1 -95.6256 42.2 -95.1256 42 -94.8256C-30.8 9.47437 -94.4 121.174 -147 236.974C-199.6 352.974 -241.8 474.274 -272.4 597.774C-272.5 598.174 -272.8 598.374 -273.1 598.374Z" fill="url(#paint6_linear)"/>
<path d="M-273.1 669.774C-273.2 669.774 -273.2 669.774 -273.3 669.774C-273.7 669.674 -274 669.274 -273.9 668.874C-244.6 531.074 -201 395.674 -144.3 266.574C-88.6 139.774 -19.8 17.9744 60.3 -95.6256C60.5 -95.9256 61 -96.0256 61.3 -95.8256C61.6 -95.6256 61.6999 -95.1256 61.4999 -94.8256C-18.5001 18.6744 -87.3001 140.374 -142.9 267.074C-199.6 396.074 -243.2 531.374 -272.4 669.074C-272.5 669.474 -272.8 669.774 -273.1 669.774Z" fill="url(#paint7_linear)"/>
<path opacity="0.9" d="M-264.1 705.574H-264.2C-264.6 705.474 -264.9 705.074 -264.8 704.674C-236.5 559.974 -192.4 417.974 -133.8 282.574C-76.2999 149.874 -4.39998 22.5744 79.9 -95.6256C80.1 -95.9256 80.6 -96.0256 80.9 -95.8256C81.2 -95.6256 81.3 -95.1256 81.1 -94.8256C-3.09996 23.2744 -75 150.474 -132.5 283.074C-191.1 418.474 -235.1 560.374 -263.4 704.974C-263.4 705.374 -263.8 705.574 -264.1 705.574Z" fill="url(#paint8_linear)"/>
<path opacity="0.8" d="M-247.8 705.574H-247.9C-248.3 705.474 -248.6 705.074 -248.5 704.674C-220 559.774 -175.4 417.674 -116.2 282.274C-58.1 149.474 14.5 22.3744 99.6 -95.6256C99.8 -95.9256 100.3 -96.0256 100.6 -95.8256C100.9 -95.6256 101 -95.1256 100.8 -94.8256C15.8 23.1744 -56.8 150.174 -114.9 282.874C-174.1 418.174 -218.6 560.174 -247.1 704.974C-247.1 705.374 -247.5 705.574 -247.8 705.574Z" fill="url(#paint9_linear)"/>
<path opacity="0.7" d="M-231.5 705.574H-231.6C-232 705.474 -232.3 705.074 -232.2 704.674C-203.4 559.574 -158.4 417.274 -98.6 281.874C-39.9 149.074 33.4 22.0744 119.4 -95.6256C119.6 -95.9256 120.1 -96.0256 120.4 -95.8256C120.7 -95.6256 120.8 -95.1256 120.6 -94.8256C34.7 22.7744 -38.6 149.674 -97.2 282.374C-157 417.874 -202 559.974 -230.8 704.974C-230.8 705.374 -231.2 705.574 -231.5 705.574Z" fill="url(#paint10_linear)"/>
<path opacity="0.6" d="M-215.2 705.574H-215.3C-215.7 705.474 -216 705.074 -215.9 704.674C-186.8 559.374 -141.4 416.974 -80.9001 281.474C-21.6001 148.674 52.5 21.7744 139.2 -95.6256C139.4 -95.9256 139.9 -96.0256 140.2 -95.8256C140.5 -95.6256 140.6 -95.1256 140.4 -94.8256C53.6999 22.4744 -20.4001 149.274 -79.6001 282.074C-140 417.474 -185.4 559.774 -214.5 704.974C-214.5 705.374 -214.8 705.574 -215.2 705.574Z" fill="url(#paint11_linear)"/>
<path opacity="0.5" d="M-198.9 705.574H-199C-199.4 705.474 -199.7 705.074 -199.6 704.674C-170.2 559.174 -124.3 416.674 -63.2 281.174C-3.30001 148.274 71.5 21.4744 159.1 -95.6256C159.3 -95.9256 159.8 -96.0256 160.1 -95.8256C160.4 -95.6256 160.5 -95.1256 160.3 -94.8256C72.7 22.1744 -2.00001 148.874 -61.9 281.674C-122.9 417.174 -168.8 559.574 -198.1 704.974C-198.2 705.374 -198.5 705.574 -198.9 705.574Z" fill="url(#paint12_linear)"/>
<path opacity="0.4" d="M-182.5 705.574C-182.5 705.574 -182.6 705.574 -182.7 705.574C-183.1 705.474 -183.4 705.074 -183.3 704.674C-153.6 558.874 -107.3 416.274 -45.5 280.774C15.1 147.874 90.7 21.2744 179.2 -95.6256C179.5 -95.9256 179.9 -96.0256 180.3 -95.7256C180.6 -95.5256 180.7 -95.0256 180.4 -94.6256C92 22.1744 16.4001 148.674 -44.0999 281.474C-105.8 416.874 -152.1 559.374 -181.8 705.074C-181.9 705.374 -182.2 705.574 -182.5 705.574Z" fill="url(#paint13_linear)"/>
<path opacity="0.3" d="M-166.2 705.574C-166.2 705.574 -166.3 705.574 -166.4 705.574C-166.8 705.474 -167.1 705.074 -167 704.674C-137 558.674 -90.2 415.874 -27.8 280.274C33.4 147.374 109.7 20.8744 199.2 -95.6256C199.5 -95.9256 199.9 -96.0256 200.3 -95.7256C200.6 -95.4256 200.7 -95.0256 200.4 -94.6256C111.1 21.6744 34.8 148.074 -26.3 280.974C-88.7 416.474 -135.5 559.074 -165.4 704.974C-165.5 705.374 -165.9 705.574 -166.2 705.574Z" fill="url(#paint14_linear)"/>
<path opacity="0.2" d="M-149.9 705.574C-150 705.574 -150 705.574 -150.1 705.574C-150.5 705.474 -150.8 705.074 -150.7 704.674C-120.4 558.474 -73.1 415.474 -9.99998 279.874C51.9 146.874 129 20.5744 219.4 -95.6256C219.7 -95.9256 220.1 -96.0256 220.5 -95.7256C220.9 -95.4256 220.9 -95.0256 220.6 -94.6256C130.3 21.4744 53.2 147.774 -8.59999 280.674C-71.6 416.074 -118.9 558.874 -149.1 704.974C-149.2 705.374 -149.5 705.574 -149.9 705.574Z" fill="url(#paint15_linear)"/>
<path opacity="0.1" d="M-133.5 705.574C-133.6 705.574 -133.6 705.574 -133.7 705.574C-134.1 705.474 -134.4 705.074 -134.3 704.674C-103.7 558.174 -55.8 415.074 8.00003 279.474C70.5 146.474 148.5 20.2744 239.8 -95.6256C240.1 -95.9256 240.5 -96.0256 240.9 -95.7256C241.2 -95.4256 241.3 -95.0256 241 -94.6256C149.8 21.0744 71.9 147.174 9.40002 280.074C-54.3 415.574 -102.2 558.574 -132.7 704.974C-132.9 705.374 -133.2 705.574 -133.5 705.574Z" fill="url(#paint16_linear)"/>
</g>
<defs>
<linearGradient id="paint0_linear" x1="412.91" y1="431.035" x2="928.96" y2="431.035" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2"/>
<stop offset="1" stop-color="#BDBEC2" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="429.179" y1="439.17" x2="928.96" y2="439.17" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2"/>
<stop offset="1" stop-color="#BDBEC2" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint2_linear" x1="445.459" y1="447.31" x2="928.96" y2="447.31" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2"/>
<stop offset="1" stop-color="#BDBEC2" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint3_linear" x1="461.79" y1="455.474" x2="928.96" y2="455.474" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2"/>
<stop offset="1" stop-color="#BDBEC2" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint4_linear" x1="478.12" y1="463.64" x2="928.96" y2="463.64" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2"/>
<stop offset="1" stop-color="#BDBEC2" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint5_linear" x1="494.46" y1="471.81" x2="928.96" y2="471.81" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2"/>
<stop offset="1" stop-color="#BDBEC2" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint6_linear" x1="-273.9" y1="251.215" x2="42.1405" y2="251.215" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
<linearGradient id="paint7_linear" x1="-273.9" y1="286.915" x2="61.67" y2="286.915" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
<linearGradient id="paint8_linear" x1="-264.864" y1="304.825" x2="81.2705" y2="304.825" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
<linearGradient id="paint9_linear" x1="-248.562" y1="304.825" x2="100.96" y2="304.825" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
<linearGradient id="paint10_linear" x1="-232.253" y1="304.825" x2="120.721" y2="304.825" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
<linearGradient id="paint11_linear" x1="-215.941" y1="304.825" x2="140.6" y2="304.825" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
<linearGradient id="paint12_linear" x1="-199.611" y1="304.825" x2="160.491" y2="304.825" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
<linearGradient id="paint13_linear" x1="-183.279" y1="304.825" x2="180.511" y2="304.825" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
<linearGradient id="paint14_linear" x1="-166.955" y1="304.825" x2="200.6" y2="304.825" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
<linearGradient id="paint15_linear" x1="-150.628" y1="304.825" x2="220.83" y2="304.825" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
<linearGradient id="paint16_linear" x1="-134.262" y1="304.825" x2="241.141" y2="304.825" gradientUnits="userSpaceOnUse">
<stop stop-color="#BDBEC2" stop-opacity="0.2"/>
<stop offset="1" stop-color="#BDBEC2"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 21 KiB

BIN
website/public/img/og-image.png (Stored with Git LFS)

Binary file not shown.