mirror of https://github.com/status-im/consul.git
[Website] WIP - Update Homepage (#10314)
* Initial structure for updated homepage * Bring back <UseCases /> * Add section stubs * Add ecosystem section * Add features section * Iron out features section * Add Learn Callout section * Copy updates * Better together copy * Add updated copy & swap assets * Remove comment & just add existing icon for now * Copy and asset tweaks * Remove unwanted copy * Process the codeblock * Add transparent img * Swap for transparent img * More transparent img * Use Learn cards pattern * Rearrange img and finishing padding touches
This commit is contained in:
Jimmy Merritello
GitHub
parent
a2f3d0b139
commit
5f8797dad3
|
|
@ -2,6 +2,8 @@
|
|||
padding-top: 56px;
|
||||
padding-bottom: 56px;
|
||||
|
||||
--shadow-level-3: 0 16px 28px rgba(37, 38, 45, 0.12);
|
||||
|
||||
& .contentWrapper {
|
||||
& > h3 {
|
||||
margin-top: 0;
|
||||
|
|
@ -25,10 +27,17 @@
|
|||
|
||||
&.twoUp {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: 32px;
|
||||
|
||||
& .linkWrap {
|
||||
padding: 64px 64px;
|
||||
padding: 64px 32px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: var(--gray-6);
|
||||
&:hover {
|
||||
background: var(--gray-5);
|
||||
box-shadow: var(--shadow-level-3);
|
||||
}
|
||||
|
||||
& .icon {
|
||||
margin-right: 48px;
|
||||
|
|
@ -48,8 +57,17 @@
|
|||
|
||||
&.threeUp {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-gap: 32px;
|
||||
|
||||
& .linkWrap {
|
||||
padding: 64px 32px;
|
||||
border: 1px solid var(--gray-5);
|
||||
border-radius: 2px;
|
||||
&:hover {
|
||||
background: var(--gray-6);
|
||||
box-shadow: var(--shadow-level-3);
|
||||
border-color: var(--gray-6);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1220px) {
|
||||
|
|
@ -63,11 +81,7 @@
|
|||
& .linkWrap {
|
||||
color: inherit;
|
||||
height: 100%;
|
||||
background: var(--gray-6);
|
||||
&:hover {
|
||||
background: var(--gray-5);
|
||||
}
|
||||
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@
|
|||
|
||||
& .background-section {
|
||||
background: var(--gray-6);
|
||||
padding-bottom: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,111 @@
|
|||
.carousel {
|
||||
& .videos {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
& .video-wrapper {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
transform: translateX(-60px);
|
||||
line-height: 0;
|
||||
box-shadow: 0 14.3254px 14.3254px rgba(37, 41, 55, 0.16);
|
||||
|
||||
&.is-active {
|
||||
opacity: 1;
|
||||
padding-top: calc((100% * 0.63569) + 28px);
|
||||
transform: translateX(0);
|
||||
transition: opacity 0.5s, transform 0.5s;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
|
||||
&.is-deactivating {
|
||||
opacity: 0;
|
||||
transform: translateX(90px);
|
||||
transition-timing-function: ease-in;
|
||||
}
|
||||
}
|
||||
|
||||
& .bar {
|
||||
align-items: center;
|
||||
background: #0e1016;
|
||||
border-radius: 4px 4px 0 0;
|
||||
display: flex;
|
||||
height: 28px;
|
||||
padding: 0 12px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
& span {
|
||||
background: #252937;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
height: 9px;
|
||||
margin-right: 7px;
|
||||
width: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
& .video {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
& video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
& .controls {
|
||||
display: flex;
|
||||
padding: 28px 20px 0;
|
||||
|
||||
@media (max-width: 1119px) {
|
||||
padding: 37px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
& .control {
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
|
||||
&:hover .control-hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
& + .control {
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
& .control-hover {
|
||||
transition: 0.3s ease-in-out;
|
||||
transition-property: transform;
|
||||
}
|
||||
}
|
||||
|
||||
& .progress-bar {
|
||||
background-color: var(--gray-2);
|
||||
height: 2px;
|
||||
margin-top: 4px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
& span {
|
||||
background: var(--white);
|
||||
display: block;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
transition: width linear 0.2s;
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import TextSplit from '@hashicorp/react-text-split'
|
||||
import VideoCarousel from '@hashicorp/react-hero/carousel'
|
||||
import s from './style.module.css'
|
||||
|
||||
export default function HomepageHero({ title, description, links, videos }) {
|
||||
return (
|
||||
<div className={s.homepageHero}>
|
||||
<TextSplit
|
||||
product="consul"
|
||||
heading={title}
|
||||
content={description}
|
||||
links={links}
|
||||
linkStyle="buttons"
|
||||
>
|
||||
<VideoCarousel videos={videos} />
|
||||
</TextSplit>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
.homepageHero {
|
||||
& :global(.g-text-split) :global(.g-grid-container) {
|
||||
@media (width < 1120px) {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
& > div {
|
||||
@media (768px < width < 1120px) {
|
||||
width: 40em;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@media (width < 1120px) {
|
||||
margin-bottom: 64px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
& p {
|
||||
@media (width < 1120px) {
|
||||
margin: 16px auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* HACK:
|
||||
* Overrides the H2 with styling from
|
||||
* our global g-type-display-1 class.
|
||||
*
|
||||
* This was because there's no way to
|
||||
* override the heading in <TextSplit />
|
||||
* with the designed h1 styling.
|
||||
*
|
||||
* TODO:
|
||||
* Address this at the component
|
||||
* level or revert to just using h2
|
||||
* as is default.
|
||||
*/
|
||||
& h2 {
|
||||
font-size: 2.125rem;
|
||||
letter-spacing: -0.008em;
|
||||
line-height: 1.265em;
|
||||
|
||||
@media (--medium-up) {
|
||||
font-size: 2.625rem;
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1.19em;
|
||||
}
|
||||
|
||||
@media (--large) {
|
||||
font-size: 3.125rem;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
& p {
|
||||
max-width: 440px;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.55em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Customize the branding */
|
||||
& :global(.carousel .controls .control) {
|
||||
color: var(--gray-2);
|
||||
& :global(.progress-bar) {
|
||||
background: var(--gray-5);
|
||||
& span {
|
||||
background: var(--consul);
|
||||
}
|
||||
}
|
||||
}
|
||||
& :global(.video-wrapper.is-active) {
|
||||
/* Padding % modifier differs slightly from react-hero to accommodate video heights */
|
||||
padding-top: calc((100% * 0.57) + 28px);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
import Image from '@hashicorp/react-image'
|
||||
import InlineSvg from '@hashicorp/react-inline-svg'
|
||||
import alertIcon from 'public/img/static-dynamic-diagram/alert.svg?include'
|
||||
import checkIcon from 'public/img/static-dynamic-diagram/check.svg?include'
|
||||
import s from './before-after-diagram.module.css'
|
||||
|
||||
export default function BeforeAfterDiagram({
|
||||
beforeHeadline,
|
||||
beforeContent,
|
||||
beforeImage,
|
||||
afterHeadline,
|
||||
afterContent,
|
||||
afterImage,
|
||||
}) {
|
||||
return (
|
||||
<div className={s.beforeAfterDiagram}>
|
||||
<div className={s.beforeSide}>
|
||||
<div className={s.image}>
|
||||
<div>
|
||||
<Image {...beforeImage} />
|
||||
</div>
|
||||
</div>
|
||||
<div className={s.contentContainer}>
|
||||
<span className={s.iconLineContainer}>
|
||||
<InlineSvg className={s.beforeIcon} src={alertIcon} />
|
||||
<span className={s.lineSegment} />
|
||||
</span>
|
||||
<div>
|
||||
{beforeHeadline && (
|
||||
<h3
|
||||
className={s.contentHeadline}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: beforeHeadline,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{beforeContent && (
|
||||
<div
|
||||
className={s.beforeContent}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: beforeContent,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={s.afterSide}>
|
||||
<div className={s.image}>
|
||||
<div>
|
||||
<Image {...afterImage} />
|
||||
</div>
|
||||
</div>
|
||||
<div className={s.contentContainer}>
|
||||
<span className={s.iconLineContainer}>
|
||||
<InlineSvg className={s.afterIcon} src={checkIcon} />
|
||||
</span>
|
||||
<div>
|
||||
{afterHeadline && (
|
||||
<h3
|
||||
className={s.contentHeadline}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: afterHeadline,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{afterContent && (
|
||||
<div
|
||||
className={s.afterContent}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: afterContent,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,351 @@
|
|||
.beforeAfterDiagram {
|
||||
/* CSS custom properties to control theming */
|
||||
--product-color: var(--black);
|
||||
--gray-6-transparent: rgba(210, 212, 219, 0);
|
||||
--after-bullet-background: url('/img/static-dynamic-diagram/check-square.svg');
|
||||
--after-bullet-height: 18px;
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -16px;
|
||||
position: relative;
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
margin-left: -12px;
|
||||
margin-right: -12px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
flex-direction: column;
|
||||
margin-left: 40px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
--after-bullet-background: url('/img/static-dynamic-diagram/check-square-consul.svg');
|
||||
--after-bullet-height: 19px;
|
||||
}
|
||||
|
||||
/* Before and after columns */
|
||||
|
||||
.side {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 16px;
|
||||
position: relative;
|
||||
width: calc(50% - 32px);
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
margin: 0 12px;
|
||||
width: calc(50% - 24px);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.beforeSide {
|
||||
composes: side;
|
||||
@media (max-width: 767px) {
|
||||
margin-bottom: 62px;
|
||||
}
|
||||
}
|
||||
|
||||
.afterSide {
|
||||
composes: side;
|
||||
}
|
||||
|
||||
/* Diagram images */
|
||||
|
||||
.image {
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
height: 320px;
|
||||
justify-content: center;
|
||||
margin-bottom: 96px;
|
||||
|
||||
@media (max-width: 767px) {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
height: 284px;
|
||||
}
|
||||
|
||||
@media (max-width: 540px) {
|
||||
height: 238px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
height: 211px;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
height: 163px;
|
||||
}
|
||||
|
||||
& div {
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
& picture {
|
||||
height: 100%;
|
||||
}
|
||||
& img,
|
||||
& svg {
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
@media (--medium-up) {
|
||||
height: unset;
|
||||
|
||||
& div {
|
||||
height: unset;
|
||||
}
|
||||
|
||||
& picture {
|
||||
height: unset;
|
||||
}
|
||||
& img,
|
||||
& svg {
|
||||
height: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* icon / line container above content */
|
||||
|
||||
.iconLineContainer {
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -75px;
|
||||
width: 100%;
|
||||
|
||||
@media (max-width: 767px) {
|
||||
height: 100%;
|
||||
left: -28px;
|
||||
right: auto;
|
||||
top: 28px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Line segment above content (before side only) */
|
||||
|
||||
.lineSegment {
|
||||
background: black;
|
||||
display: block;
|
||||
height: 2px;
|
||||
left: calc(50% + 30px);
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
width: calc(100% - 24px);
|
||||
|
||||
@media (max-width: 767px) {
|
||||
height: calc(100% + 375px);
|
||||
left: auto;
|
||||
top: 38px;
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
height: calc(100% + 339px);
|
||||
}
|
||||
|
||||
@media (max-width: 540px) {
|
||||
height: calc(100% + 293px);
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
height: calc(100% + 266px);
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
height: calc(100% + 218px);
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-radius: 100%;
|
||||
border-style: solid;
|
||||
border-width: 5.5px 0 5.5px 8px;
|
||||
border-width: 2px;
|
||||
content: '';
|
||||
height: 8px;
|
||||
left: -8px;
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
width: 8px;
|
||||
|
||||
@media (max-width: 767px) {
|
||||
left: -3px;
|
||||
top: -8px;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-color: transparent transparent transparent var(--product-color);
|
||||
border-style: solid;
|
||||
border-width: 6px 0 6px 8px;
|
||||
content: '';
|
||||
height: 0;
|
||||
position: absolute;
|
||||
right: -8px;
|
||||
top: -5px;
|
||||
width: 0;
|
||||
|
||||
@media (max-width: 767px) {
|
||||
bottom: -8px;
|
||||
right: -4px;
|
||||
top: auto;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Icon above each content container */
|
||||
|
||||
.contentIcon {
|
||||
& svg {
|
||||
left: 50%;
|
||||
margin: 0 0 0 -11px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.beforeIcon {
|
||||
composes: contentIcon;
|
||||
}
|
||||
|
||||
.afterIcon {
|
||||
composes: contentIcon;
|
||||
& svg path:first-child {
|
||||
fill: var(--product-color);
|
||||
stroke: var(--product-color);
|
||||
}
|
||||
}
|
||||
|
||||
/* Content container */
|
||||
|
||||
.contentContainer {
|
||||
border: 1px solid var(--gray-5);
|
||||
flex-grow: 1;
|
||||
padding: 24px 32px 20px;
|
||||
position: relative;
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
border: solid transparent;
|
||||
bottom: 100%;
|
||||
content: '';
|
||||
height: 0;
|
||||
left: 50%;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-color: rgba(229, 230, 235, 0);
|
||||
border-bottom-color: var(--gray-5);
|
||||
border-width: 18px;
|
||||
margin-left: -18px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-color: rgba(255, 255, 255, 0);
|
||||
border-bottom-color: var(--white);
|
||||
border-width: 17px;
|
||||
margin-left: -17px;
|
||||
}
|
||||
|
||||
& > div {
|
||||
height: 100%;
|
||||
|
||||
& > div {
|
||||
@media (min-width: 768px) {
|
||||
margin: 0 auto;
|
||||
max-width: 480px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Content headline */
|
||||
|
||||
.contentHeadline {
|
||||
border-bottom: 1px solid var(--gray-5);
|
||||
color: var(--black);
|
||||
composes: g-type-display-3 from global;
|
||||
margin: 0 0 24px;
|
||||
padding-bottom: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Content styles (for rendered markdown) */
|
||||
|
||||
.content {
|
||||
& :global(.__permalink-h) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& :global(.g-type-label) {
|
||||
margin: 24px 0 26px 0;
|
||||
}
|
||||
|
||||
& ul,
|
||||
& ol {
|
||||
list-style: none;
|
||||
padding-left: 32px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
& li {
|
||||
margin: 8px 0;
|
||||
|
||||
&::before {
|
||||
background-repeat: no-repeat;
|
||||
content: '';
|
||||
left: 0;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.beforeContent {
|
||||
composes: content;
|
||||
|
||||
& li::before {
|
||||
background: url('/img/static-dynamic-diagram/alert-check.svg');
|
||||
background-repeat: no-repeat;
|
||||
height: var(--after-bullet-height);
|
||||
margin-top: 3px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.afterContent {
|
||||
composes: content;
|
||||
|
||||
& li::before {
|
||||
background: var(--after-bullet-background);
|
||||
height: var(--after-bullet-height);
|
||||
margin-top: 4px;
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import BeforeAfterDiagram from './before-after-diagram'
|
||||
import s from './style.module.css'
|
||||
|
||||
export default function StaticDynamicDiagram({
|
||||
heading,
|
||||
description,
|
||||
diagrams,
|
||||
}) {
|
||||
return (
|
||||
<div className={s.staticDynamic}>
|
||||
<div className={s.content}>
|
||||
<h2 className={s.heading}>{heading}</h2>
|
||||
{description && <p className={s.description}>{description}</p>}
|
||||
</div>
|
||||
<BeforeAfterDiagram
|
||||
{...diagrams}
|
||||
beforeImage={{
|
||||
format: 'png',
|
||||
url: '/img/static-dynamic-diagram/consul_static_isometric@2x.png',
|
||||
}}
|
||||
afterImage={{
|
||||
format: 'png',
|
||||
url: '/img/static-dynamic-diagram/consul_dynamic_isometric@2x.png',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
.staticDynamic {
|
||||
composes: g-grid-container from global;
|
||||
display: grid;
|
||||
grid-gap: 64px;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
max-width: 784px;
|
||||
text-align: center;
|
||||
}
|
||||
.description {
|
||||
composes: g-type-body-large from global;
|
||||
color: var(--gray-2);
|
||||
}
|
||||
.heading {
|
||||
margin: 0;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -19,10 +19,12 @@
|
|||
"@hashicorp/react-hero": "7.1.1",
|
||||
"@hashicorp/react-image": "4.0.1",
|
||||
"@hashicorp/react-inline-svg": "6.0.1",
|
||||
"@hashicorp/react-learn-callout": "^1.0.2",
|
||||
"@hashicorp/react-markdown-page": "1.2.0",
|
||||
"@hashicorp/react-product-downloads-page": "2.0.2",
|
||||
"@hashicorp/react-product-features-list": "4.0.1",
|
||||
"@hashicorp/react-section-header": "5.0.2",
|
||||
"@hashicorp/react-stepped-feature-list": "4.0.1",
|
||||
"@hashicorp/react-subnav": "8.1.0",
|
||||
"@hashicorp/react-tabs": "6.0.1",
|
||||
"@hashicorp/react-text-split": "3.1.1",
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
|
|
@ -1,105 +1,365 @@
|
|||
import LearnCallout from '@hashicorp/react-learn-callout'
|
||||
import SteppedFeatureList from '@hashicorp/react-stepped-feature-list'
|
||||
import TextSplitWithImage from '@hashicorp/react-text-split-with-image'
|
||||
import CodeBlock from '@hashicorp/react-code-block'
|
||||
import UseCases from '@hashicorp/react-use-cases'
|
||||
import ProductFeaturesList from '@hashicorp/react-product-features-list'
|
||||
import MiniCTA from 'components/mini-cta'
|
||||
import HcpCalloutSection from 'components/hcp-callout-section'
|
||||
import CtaHero from 'components/cta-hero'
|
||||
import CalloutBlade from 'components/callout-blade'
|
||||
import ConsulEnterpriseComparison from 'components/enterprise-comparison/consul'
|
||||
import PrefooterCTA from 'components/prefooter-cta'
|
||||
import CaseStudyCarousel from 'components/case-study-carousel'
|
||||
import HomepageHero from 'components/homepage-hero'
|
||||
import StaticDynamicDiagram from 'components/static-dynamic-diagram'
|
||||
import highlightString from '@hashicorp/nextjs-scripts/prism/highlight-string'
|
||||
|
||||
export default function HomePage() {
|
||||
export default function HomePage({ serviceMeshIngressGatewayCode }) {
|
||||
return (
|
||||
<div className="p-home">
|
||||
<CtaHero
|
||||
<HomepageHero
|
||||
title="Service Mesh for any runtime or cloud"
|
||||
description="Consul automates networking for simple and secure application delivery."
|
||||
links={[
|
||||
{
|
||||
type: 'none',
|
||||
text: 'Download Consul',
|
||||
url: '/downloads',
|
||||
text: 'Try HCP Consul',
|
||||
url:
|
||||
'https://portal.cloud.hashicorp.com/sign-up?utm_source=docs&utm_content=consul_hero',
|
||||
},
|
||||
{
|
||||
type: 'none',
|
||||
text: 'Explore Tutorials',
|
||||
url: 'https://learn.hashicorp.com/consul',
|
||||
text: 'Download',
|
||||
url: '/downloads',
|
||||
},
|
||||
]}
|
||||
cta={{
|
||||
title: 'Try HCP Consul',
|
||||
description:
|
||||
'A fully managed service mesh to discover and securely connect any service.',
|
||||
link: {
|
||||
text: 'Sign Up',
|
||||
videos={[
|
||||
{
|
||||
name: 'UI',
|
||||
playbackRate: 2,
|
||||
src: [
|
||||
{
|
||||
srcType: 'mp4',
|
||||
url:
|
||||
'https://www.datocms-assets.com/2885/1621637919-consul-ui.mp4',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'CLI',
|
||||
playbackRate: 2,
|
||||
src: [
|
||||
{
|
||||
srcType: 'mp4',
|
||||
url:
|
||||
'https://www.datocms-assets.com/2885/1621637930-consul-cli.mp4',
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<StaticDynamicDiagram
|
||||
heading="Service-based networking for dynamic infrastructure"
|
||||
diagrams={{
|
||||
beforeHeadline: 'Static Infrastructure',
|
||||
// @TODO - Convert to a slot w/ JSX markup
|
||||
beforeContent:
|
||||
'<p class="g-type-body-small">Private datacenters with static IPs, primarily north-south traffic, protected by perimeter security and coarse-grained network segments.</p>\n' +
|
||||
'<h4 class="g-type-label"><a class="__permalink-h" href="#traditional-approach" aria-label="traditional approach permalink">»</a><a class="__target-h" id="traditional-approach" aria-hidden></a>Traditional Approach</h4>\n' +
|
||||
'<ul>\n' +
|
||||
'<li class="g-type-body-small">Static connectivity between services</li>\n' +
|
||||
'<li class="g-type-body-small">A fleet of load balancers to route traffic</li>\n' +
|
||||
'<li class="g-type-body-small">Ticket driven processes to update network middleware</li>\n' +
|
||||
'<li class="g-type-body-small">Firewall rule sprawl to constrict access and insecure flat network zones</li>\n' +
|
||||
'</ul>',
|
||||
beforeImage: {
|
||||
url:
|
||||
'https://portal.cloud.hashicorp.com/sign-up?utm_source=consul_io&utm_content=hero',
|
||||
'https://www.datocms-assets.com/2885/1559693517-static-infrastructure.png',
|
||||
alt: 'Static Infrastructure',
|
||||
},
|
||||
afterHeadline: 'Dynamic Infrastructure',
|
||||
// @TODO - Convert to a slot w/ JSX markup
|
||||
afterContent:
|
||||
'<p class="g-type-body-small">Multiple clouds and private datacenters with dynamic IPs, ephemeral containers, dominated by east-west traffic, no clear network perimeters.</p>\n' +
|
||||
'<h4 class="g-type-label"><a class="__permalink-h" href="#consul-approach" aria-label="consul approach permalink">»</a><a class="__target-h" id="consul-approach" aria-hidden></a>Consul Approach</h4>\n' +
|
||||
'<ul>\n' +
|
||||
'<li class="g-type-body-small">Centralized registry to locate any service</li>\n' +
|
||||
'<li class="g-type-body-small">Services discovered and connected with centralized policies</li>\n' +
|
||||
'<li class="g-type-body-small">Network automated in service of applications</li>\n' +
|
||||
'<li class="g-type-body-small">Zero trust network enforced by identity-based security policies</li>\n' +
|
||||
'</ul>',
|
||||
afterImage: {
|
||||
url:
|
||||
'https://www.datocms-assets.com/2885/1559693545-dynamic-infrastructure-4x.png',
|
||||
alt: 'Dynamic Infrastructure',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="use-cases g-grid-container">
|
||||
<h2 className="g-type-display-2">Why Consul?</h2>
|
||||
<UseCases
|
||||
items={[
|
||||
{
|
||||
title: 'Microservice Based Networking',
|
||||
description:
|
||||
'Simplify developer interactions, improve observability, and enable robust traffic management with Consul service mesh.',
|
||||
image: {
|
||||
url: require('./img/use-cases/service_mesh.svg?url'),
|
||||
format: 'svg',
|
||||
},
|
||||
link: {
|
||||
title: 'Service Mesh',
|
||||
url: '/use-cases/multi-platform-service-mesh',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Secure Service-to-Service Access',
|
||||
description:
|
||||
'Secure service access and communication across any network with identity-driven, time-based controls.',
|
||||
image: {
|
||||
url: require('./img/use-cases/discovery_health_checking.svg?url'), // @TODO - Consider a more specific icon
|
||||
format: 'svg',
|
||||
},
|
||||
link: {
|
||||
title: 'Zero Trust Networks',
|
||||
url: '#',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Automated Networking Tasks',
|
||||
description:
|
||||
'Cut down on tickets for operators and speed up time to deployment of dynamic applications.',
|
||||
image: {
|
||||
url: require('./img/use-cases/network_automation.svg?url'),
|
||||
format: 'svg',
|
||||
},
|
||||
link: {
|
||||
title: 'Network Infrastructure Automation',
|
||||
url: '/use-cases/network-infrastructure-automation',
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<CalloutBlade
|
||||
title="Consul Service Mesh"
|
||||
title="Deploy Consul Service mesh for Kubernetes, VMs, or any environment"
|
||||
callouts={[
|
||||
{
|
||||
icon: require('./img/kubernetes/logo.svg?include'),
|
||||
title: 'For Kubernetes',
|
||||
title: 'Consul for Kubernetes',
|
||||
description:
|
||||
'Install Consul using Helm charts and deploy using Custom Resource Definitions (CRDs).',
|
||||
"Consul service mesh secures service to service communication in any environment. Not using service mesh? Consul's service discovery and network infrastructure automation capabilities can help solve any service networking challenge.",
|
||||
eyebrow: 'Tutorial',
|
||||
link: {
|
||||
text: 'Install Consul on your Kubernetes cluster',
|
||||
text: 'Get Started with Consul on Kubernetes',
|
||||
url:
|
||||
'https://learn.hashicorp.com/tutorials/consul/service-mesh-deploy?in=consul/gs-consul-service-mesh',
|
||||
'https://learn.hashicorp.com/tutorials/consul/kubernetes-custom-resource-definitions?in=consul/kubernetes',
|
||||
},
|
||||
},
|
||||
{
|
||||
icon: require('./img/kubernetes/communication-arrows.svg?include'),
|
||||
title: 'For Any Runtime',
|
||||
title: 'Consul for Everything Else',
|
||||
description:
|
||||
'Secure services and service-to-service communications and connect external services with terminating gateways.',
|
||||
'Consul service mesh works on any Kubernetes distribution, connects multiple clusters, and supports VM-based applications. Consul CRDs provide a self-service, Kubernetes native workflow to manage traffic patterns and permissions in the mesh.',
|
||||
eyebrow: 'Tutorial',
|
||||
link: {
|
||||
text: 'Consul Service Mesh',
|
||||
text: 'Get Started with Service Mesh on VMs',
|
||||
url:
|
||||
'https://learn.hashicorp.com/tutorials/consul/service-mesh-deploy-vms?in=consul/developer-mesh',
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="ecosystem g-grid-container">
|
||||
<h2 className="g-type-display-2">Consul Ecosystem</h2>
|
||||
<TextSplitWithImage
|
||||
textSplit={{
|
||||
product: 'consul',
|
||||
heading: 'The Single Control Plane for Cloud Networks',
|
||||
content:
|
||||
'Consul provides the control plane for multi-cloud networking.',
|
||||
checkboxes: [
|
||||
'Centrally control the distributed data plane to provide a scalable and reliable service mesh',
|
||||
'Automate centralized network middleware configuration to avoid human intervention',
|
||||
'Provide a real-time directory of all running services to improve application inventory management',
|
||||
'Enable visibility into services and their health status to enhance health and performance monitoring',
|
||||
'Automate lifecycle management of certificates which can be issued by 3rd party Certificate Authority',
|
||||
'Provide unified support across a heterogeneous environment with different workload types and runtime platforms',
|
||||
],
|
||||
linkStyle: 'links',
|
||||
links: [
|
||||
{
|
||||
type: 'outbound',
|
||||
text: 'Explore Consul Integrations',
|
||||
url: 'https://www.hashicorp.com/integrations/?filters=consul',
|
||||
},
|
||||
],
|
||||
}}
|
||||
image={{
|
||||
url:
|
||||
'https://www.datocms-assets.com/2885/1622152328-control-plane.png',
|
||||
alt: 'Consul control plane',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<section className="features">
|
||||
<div className="g-grid-container">
|
||||
<h3 className="g-type-display-2">Features</h3>
|
||||
<SteppedFeatureList
|
||||
features={[
|
||||
{
|
||||
title: 'Secure Service to Service Connectivity',
|
||||
description:
|
||||
'Use mTLS to authenticate and secure connections between services.',
|
||||
learnMoreLink:
|
||||
'https://learn.hashicorp.com/collections/consul/service-mesh-security',
|
||||
content: (
|
||||
<img
|
||||
src={require('./img/service-to-service-transparent.png')}
|
||||
alt="Service to Service Connectivity"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Enhanced Observability',
|
||||
description:
|
||||
'Visualize the service mesh topology with Consul’s built-in UI or third-party APM solutions.',
|
||||
learnMoreLink:
|
||||
'https://learn.hashicorp.com/collections/consul/service-mesh-observability',
|
||||
content: (
|
||||
<img
|
||||
src={require('../use-cases/img/multi-platform-service-mesh/observability@3x.png')}
|
||||
alt="Enhanced Observability"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Layer 7 Traffic Management',
|
||||
description:
|
||||
'Implement fine-grained traffic policies to route and split traffic across services.',
|
||||
learnMoreLink:
|
||||
'https://learn.hashicorp.com/collections/consul/service-mesh-traffic-management',
|
||||
content: (
|
||||
<img
|
||||
src={require('./img/service-splitter@2x.png')}
|
||||
alt="Layer 7 Traffic Management"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Multi-platform Support',
|
||||
description:
|
||||
'Consul service mesh can be deployed in any environment and supports multiple runtimes, like Kubernetes, Nomad, and VMs.',
|
||||
learnMoreLink:
|
||||
'https://learn.hashicorp.com/collections/consul/gs-consul-service-mesh',
|
||||
content: (
|
||||
<center>
|
||||
<img
|
||||
style={{ maxWidth: '75%' }}
|
||||
src={require('../use-cases/img/multi-platform-service-mesh/kubernetes-extend-transparent.png')}
|
||||
alt="Multi-platform Support"
|
||||
/>
|
||||
</center>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Dynamic Load Balancing & Firewalling',
|
||||
description:
|
||||
'Automate manual networking tasks and reduce the reliance on ticket-based systems.',
|
||||
learnMoreLink:
|
||||
'https://learn.hashicorp.com/collections/consul/network-infrastructure-automation',
|
||||
content: (
|
||||
<img
|
||||
src={require('../use-cases/img/network-automation/load-balancing.png')}
|
||||
alt="Load Balancing & Firewalling"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Simple Cross Datacenter Networking',
|
||||
description:
|
||||
'Use mesh gateways to connect services across datacenters with Consul service mesh.',
|
||||
learnMoreLink:
|
||||
'https://learn.hashicorp.com/tutorials/consul/service-mesh-gateways?in=consul/developer-mesh',
|
||||
content: (
|
||||
<img
|
||||
src={require('./img/multi-datacenter-transparent.png')}
|
||||
alt="Cross Datacenter Networking"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Service Discovery & Real-time Health Checks',
|
||||
description:
|
||||
'Keep track of the location information and health status of all applications.',
|
||||
learnMoreLink:
|
||||
'https://learn.hashicorp.com/collections/consul/developer-discovery',
|
||||
content: (
|
||||
<img
|
||||
src={require('../use-cases/img/discovery-health-checking/service-discovery-and-health-checking.svg')}
|
||||
alt="Service Discovery & Real-time Health Checks"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Bridging Service Mesh with Traditional Networks',
|
||||
description:
|
||||
'Interact with applications that reside outside of the mesh with Consul’s terminating gateways.',
|
||||
learnMoreLink:
|
||||
'https://learn.hashicorp.com/tutorials/consul/terminating-gateways-connect-external-services',
|
||||
content: (
|
||||
<img
|
||||
src={require('./img/extend-mesh-transparent.png')}
|
||||
alt="Service Mesh with Traditional Networks"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Connect new services into Service Mesh',
|
||||
description:
|
||||
'Enable external applications to securely connect with service inside of the mesh using Consul’s Ingress Gateway.',
|
||||
learnMoreLink:
|
||||
'https://learn.hashicorp.com/tutorials/consul/service-mesh-ingress-gateways',
|
||||
content: (
|
||||
<CodeBlock
|
||||
language="yaml"
|
||||
code={serviceMeshIngressGatewayCode}
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<CalloutBlade
|
||||
title="Consul with HashiCorp Stack"
|
||||
title="Better Together: Consul and the HashiCorp Stack"
|
||||
callouts={[
|
||||
{
|
||||
title: 'Automated Infrastructure with Terraform',
|
||||
icon: require('./img/stack/consul-and-terraform.svg?include'),
|
||||
description:
|
||||
'Use the Terraform provider ecosystem to drive relevant changes to your infrastructure based on Consul services.',
|
||||
eyebrow: 'Tutorials',
|
||||
'Speed up time to delivery for services with network infrastructure automation. Use Consul as a single source of truth for all services and apply configuration changes with Terraform.',
|
||||
link: {
|
||||
text: 'Consul Terraform Sync',
|
||||
text: 'Consul with Terraform',
|
||||
url:
|
||||
'https://learn.hashicorp.com/tutorials/consul/consul-terraform-sync-intro?in=consul/network-infrastructure-automation',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Defense in Depth with Vault',
|
||||
icon: require('./img/stack/consul-and-vault.svg?include'),
|
||||
description:
|
||||
'Integrate Consul with Vault and consul-template to securely store and rotate your encryption key and certificates.',
|
||||
eyebrow: 'Tutorials',
|
||||
'Ensure complete security for service-to-service access, authorization and communication by using Consul and Vault. Deliver end-to-end authentication, authorization, and encryption using identity-based access controls and traffic policies for microservice architectures. ',
|
||||
link: {
|
||||
text: 'Enforce security with Consul and Vault',
|
||||
text: 'Consul with Vault',
|
||||
url:
|
||||
'https://learn.hashicorp.com/collections/consul/vault-secure',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Application Delivery with Nomad',
|
||||
icon: require('./img/stack/consul-and-nomad.svg?include'),
|
||||
description:
|
||||
'Secure Nomad jobs with Consul Service Mesh and use Traffic Splitting for zero-downtime, blue-green, canary deployments.',
|
||||
eyebrow: 'Tutorials',
|
||||
'Accelerate the application delivery lifecycle with orchestration and scheduling from Nomad and Consul service mesh. Enable developers to deploy and connect workloads in any environment with fewer code changes.',
|
||||
link: {
|
||||
text: 'Nomad’s integration with Consul',
|
||||
text: 'Consul with Nomad',
|
||||
url:
|
||||
'https://learn.hashicorp.com/collections/nomad/integrate-consul',
|
||||
},
|
||||
|
|
@ -107,59 +367,6 @@ export default function HomePage() {
|
|||
]}
|
||||
/>
|
||||
|
||||
<ProductFeaturesList
|
||||
heading="Why Consul?"
|
||||
features={[
|
||||
{
|
||||
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/consul_features_cloud.svg'),
|
||||
link: {
|
||||
type: 'inbound',
|
||||
text: 'Learn more',
|
||||
url:
|
||||
'https://learn.hashicorp.com/tutorials/consul/kubernetes-secure-agents',
|
||||
},
|
||||
},
|
||||
{
|
||||
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/consul_features_gear.svg'),
|
||||
link: {
|
||||
type: 'inbound',
|
||||
text: 'Learn more',
|
||||
url:
|
||||
'https://learn.hashicorp.com/collections/consul/load-balancing',
|
||||
},
|
||||
},
|
||||
{
|
||||
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/consul_features_health.svg'),
|
||||
link: {
|
||||
type: 'inbound',
|
||||
text: 'Learn more',
|
||||
url:
|
||||
'https://learn.hashicorp.com/tutorials/consul/service-registration-health-checks',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Robust Ecosystem',
|
||||
content:
|
||||
'Consul offers support for and integrations with many popular DevOps and Networking tools.',
|
||||
icon: require('./img/why-consul/consul_features_world.svg'),
|
||||
link: {
|
||||
type: 'inbound',
|
||||
text: 'Learn more',
|
||||
url: '/docs/integrate/partnerships',
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<CaseStudyCarousel
|
||||
title="Trusted by startups and the world’s largest organizations"
|
||||
caseStudies={[
|
||||
|
|
@ -224,85 +431,52 @@ export default function HomePage() {
|
|||
],
|
||||
}}
|
||||
/>
|
||||
<MiniCTA
|
||||
title="Are you using Consul in production?"
|
||||
link={{
|
||||
text: 'Share your success story and receive special Consul swag.',
|
||||
url:
|
||||
'https://docs.google.com/forms/d/1B-4XlRndv2hX9G4Gt2dMnJBqilctrrof7dfpyQ1EVIg/edit',
|
||||
type: 'outbound',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="use-cases g-grid-container">
|
||||
<h2 className="g-type-display-2">Use Cases</h2>
|
||||
<UseCases
|
||||
items={[
|
||||
{
|
||||
title: 'Service Discovery and Health Checking',
|
||||
description:
|
||||
'Enable services to locate other services running in any environment and provide real-time health status.',
|
||||
image: {
|
||||
url: require('./img/use-cases/discovery_health_checking.svg?url'),
|
||||
format: 'svg',
|
||||
},
|
||||
link: {
|
||||
title: 'Learn more',
|
||||
url: '/use-cases/service-discovery-and-health-checking',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Network Infrastructure Automation',
|
||||
description:
|
||||
'Reduce burden of manual, ticket-based networking tasks.',
|
||||
image: {
|
||||
url: require('./img/use-cases/network_automation.svg?url'),
|
||||
format: 'svg',
|
||||
},
|
||||
link: {
|
||||
title: 'Learn more',
|
||||
url: '/use-cases/network-infrastructure-automation',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Multi-Platform Service Mesh',
|
||||
description:
|
||||
'Secure, modern application networking across any cloud or runtime.',
|
||||
image: {
|
||||
url: require('./img/use-cases/service_mesh.svg?url'),
|
||||
format: 'svg',
|
||||
},
|
||||
link: {
|
||||
title: 'Learn more',
|
||||
url: '/use-cases/multi-platform-service-mesh',
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<HcpCalloutSection
|
||||
id="cloud-offerings"
|
||||
title="HCP Consul"
|
||||
chin="Available on AWS"
|
||||
description="A fully managed service mesh to discover and securely connect any service."
|
||||
image={require('./img/hcp_consul.svg?url')}
|
||||
links={[
|
||||
<LearnCallout
|
||||
headline="Learn the latest Consul skills"
|
||||
product="consul"
|
||||
background=""
|
||||
items={[
|
||||
{
|
||||
text: 'Learn More',
|
||||
url:
|
||||
'https://cloud.hashicorp.com/?utm_source=consul_io&utm_content=hcp_consul_detail',
|
||||
title: 'Service Mesh on Kubernetes',
|
||||
category: 'For Kubernetes',
|
||||
time: '3 hr 20 min',
|
||||
link: 'https://learn.hashicorp.com/collections/consul/kubernetes',
|
||||
image:
|
||||
'https://www.datocms-assets.com/2885/1600191254-hashicorp-icon.svg',
|
||||
},
|
||||
{
|
||||
text: 'Looking for Consul Service on Azure?',
|
||||
url: 'https://www.hashicorp.com/products/consul/service-on-azure',
|
||||
type: 'inbound',
|
||||
title: 'HashiCorp Cloud Platform (HCP) Consul',
|
||||
category: 'Get Started',
|
||||
time: '59 mins',
|
||||
link:
|
||||
'https://learn.hashicorp.com/collections/consul/cloud-get-started',
|
||||
image:
|
||||
'https://www.datocms-assets.com/2885/1600191254-hashicorp-icon.svg',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<ConsulEnterpriseComparison />
|
||||
<PrefooterCTA />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export async function getStaticProps() {
|
||||
const rawYaml = `
|
||||
apiVersion: consul.hashicorp.com/v1alpha1
|
||||
kind: IngressGateway
|
||||
metadata:
|
||||
name: ingress-gateway
|
||||
spec:
|
||||
listeners:
|
||||
- port: 8080
|
||||
protocol: http
|
||||
services:
|
||||
- name: static-server
|
||||
`
|
||||
const serviceMeshIngressGatewayCode = await highlightString(rawYaml, 'yaml')
|
||||
return {
|
||||
props: {
|
||||
serviceMeshIngressGatewayCode,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,26 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .ecosystem {
|
||||
padding-top: 88px;
|
||||
padding-bottom: 88px;
|
||||
@media (--large) {
|
||||
padding-top: 128px;
|
||||
padding-bottom: 128px;
|
||||
}
|
||||
& .g-text-split {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
& .g-type-display-2 {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
margin-bottom: 64px;
|
||||
@media (max-width: 800px) {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
& section.cloud-offerings {
|
||||
padding-top: 88px;
|
||||
padding-bottom: 88px;
|
||||
|
|
@ -55,4 +74,15 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
& section.features {
|
||||
background-color: var(--gray-6);
|
||||
& h3 {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
@media (--large) {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import Homepage from './home'
|
||||
import Homepage, { getStaticProps } from './home'
|
||||
|
||||
export default Homepage
|
||||
|
||||
export { getStaticProps }
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
@import '~@hashicorp/react-docs-page/style.css';
|
||||
@import '~@hashicorp/react-enterprise-alert/style.css';
|
||||
@import '~@hashicorp/react-featured-slider/style.css';
|
||||
@import '~@hashicorp/react-learn-callout/style.css';
|
||||
@import '~@hashicorp/react-product-features-list/style.css';
|
||||
@import '~@hashicorp/react-search/style.css';
|
||||
@import '~@hashicorp/react-subnav/style.css';
|
||||
|
|
@ -30,10 +31,11 @@
|
|||
|
||||
/* Local Components */
|
||||
@import '../components/basic-hero/style.css';
|
||||
@import '../components/enterprise-comparison/style.css';
|
||||
@import '../components/footer/style.css';
|
||||
@import '../components/case-study-carousel/style.css';
|
||||
@import '../components/cloud-offerings-list/style.css';
|
||||
@import '../components/enterprise-comparison/style.css';
|
||||
@import '../components/footer/style.css';
|
||||
@import '../components/homepage-hero/carousel.css';
|
||||
@import '../components/mini-cta/style.css';
|
||||
@import '../components/use-cases-layout/style.css';
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,147 @@
|
|||
<svg width="482" height="239" viewBox="0 0 482 239" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="2" y="17" width="142" height="212" rx="1" fill="white"/>
|
||||
<rect x="1.25" y="16.25" width="143.5" height="213.5" rx="1.75" stroke="black" stroke-opacity="0.16" stroke-width="1.5"/>
|
||||
<rect x="52.5" y="220" width="41" height="19" rx="3" fill="white"/>
|
||||
<path d="M63.223 225.6H59.575V234H63.223C65.695 234 67.243 232.224 67.243 229.8C67.243 227.328 65.671 225.6 63.223 225.6ZM63.187 232.512H61.207V227.076H63.187C64.627 227.076 65.587 228.168 65.587 229.764C65.587 231.384 64.627 232.512 63.187 232.512ZM73.2458 234.168C75.4658 234.168 76.8818 232.812 77.2658 231.468L75.6698 231.06C75.3938 231.888 74.4938 232.62 73.2218 232.62C71.5658 232.62 70.5098 231.288 70.5098 229.776C70.5098 228.264 71.5658 226.98 73.2218 226.98C74.4938 226.98 75.3938 227.736 75.6698 228.552L77.2778 228.156C76.8938 226.824 75.4778 225.432 73.2098 225.432C70.7138 225.432 68.8298 227.316 68.8298 229.788C68.8298 232.272 70.7138 234.168 73.2458 234.168ZM84.8556 225.6L82.3116 226.908L82.7076 228.312L84.5916 227.436V234H86.2596V225.6H84.8556Z" fill="black"/>
|
||||
<rect x="170" y="17" width="142" height="212" rx="1" fill="white"/>
|
||||
<rect x="169.25" y="16.25" width="143.5" height="213.5" rx="1.75" stroke="black" stroke-opacity="0.16" stroke-width="1.5"/>
|
||||
<rect x="220.5" y="220" width="41" height="19" rx="3" fill="white"/>
|
||||
<path d="M231.223 225.6H227.575V234H231.223C233.695 234 235.243 232.224 235.243 229.8C235.243 227.328 233.671 225.6 231.223 225.6ZM231.187 232.512H229.207V227.076H231.187C232.627 227.076 233.587 228.168 233.587 229.764C233.587 231.384 232.627 232.512 231.187 232.512ZM241.246 234.168C243.466 234.168 244.882 232.812 245.266 231.468L243.67 231.06C243.394 231.888 242.494 232.62 241.222 232.62C239.566 232.62 238.51 231.288 238.51 229.776C238.51 228.264 239.566 226.98 241.222 226.98C242.494 226.98 243.394 227.736 243.67 228.552L245.278 228.156C244.894 226.824 243.478 225.432 241.21 225.432C238.714 225.432 236.83 227.316 236.83 229.788C236.83 232.272 238.714 234.168 241.246 234.168ZM252.856 225.6L250.312 226.908L250.708 228.312L252.592 227.436V234H254.26V225.6H252.856Z" fill="black"/>
|
||||
<rect x="338" y="17" width="142" height="212" rx="1" fill="white"/>
|
||||
<rect x="337.25" y="16.25" width="143.5" height="213.5" rx="1.75" stroke="black" stroke-opacity="0.16" stroke-width="1.5"/>
|
||||
<rect x="388.5" y="220" width="41" height="19" rx="3" fill="white"/>
|
||||
<path d="M399.223 225.6H395.575V234H399.223C401.695 234 403.243 232.224 403.243 229.8C403.243 227.328 401.671 225.6 399.223 225.6ZM399.187 232.512H397.207V227.076H399.187C400.627 227.076 401.587 228.168 401.587 229.764C401.587 231.384 400.627 232.512 399.187 232.512ZM409.246 234.168C411.466 234.168 412.882 232.812 413.266 231.468L411.67 231.06C411.394 231.888 410.494 232.62 409.222 232.62C407.566 232.62 406.51 231.288 406.51 229.776C406.51 228.264 407.566 226.98 409.222 226.98C410.494 226.98 411.394 227.736 411.67 228.552L413.278 228.156C412.894 226.824 411.478 225.432 409.21 225.432C406.714 225.432 404.83 227.316 404.83 229.788C404.83 232.272 406.714 234.168 409.246 234.168ZM420.856 225.6L418.312 226.908L418.708 228.312L420.592 227.436V234H422.26V225.6H420.856Z" fill="black"/>
|
||||
<rect x="18" y="157" width="46" height="46" rx="2" fill="white"/>
|
||||
<rect x="17.25" y="156.25" width="47.5" height="47.5" rx="2.75" stroke="black" stroke-opacity="0.16" stroke-width="1.5"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M41.89 169.449L49.89 173.449C50.5697 173.787 50.9996 174.48 51 175.239V184.769C50.9996 185.528 50.5697 186.221 49.89 186.559L41.89 190.559C41.3267 190.841 40.6634 190.841 40.1 190.559L32.1 186.559C31.421 186.217 30.9948 185.519 31 184.759L31 175.239C31.0005 174.48 31.4304 173.787 32.11 173.449L40.11 169.449C40.6707 169.171 41.3294 169.171 41.89 169.449Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M31.3203 174.16L41.0003 179L50.6803 174.16" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M41 190.76V179" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect x="185.25" y="156.25" width="47.5" height="47.5" rx="2.75" fill="white" stroke="#F25054" stroke-width="1.5"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M209.89 169.449L217.89 173.449C218.57 173.787 219 174.48 219 175.239V184.769C219 185.528 218.57 186.221 217.89 186.559L209.89 190.559C209.327 190.841 208.663 190.841 208.1 190.559L200.1 186.559C199.421 186.217 198.995 185.519 199 184.759V175.239C199 174.48 199.43 173.787 200.11 173.449L208.11 169.449C208.671 169.171 209.329 169.171 209.89 169.449Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M199.32 174.16L209 179L218.68 174.16" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M209 190.76V179" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect x="354" y="157" width="46" height="46" rx="2" fill="white"/>
|
||||
<rect x="353.25" y="156.25" width="47.5" height="47.5" rx="2.75" stroke="black" stroke-opacity="0.16" stroke-width="1.5"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M377.89 169.449L385.89 173.449C386.57 173.787 387 174.48 387 175.239V184.769C387 185.528 386.57 186.221 385.89 186.559L377.89 190.559C377.327 190.841 376.663 190.841 376.1 190.559L368.1 186.559C367.421 186.217 366.995 185.519 367 184.759V175.239C367 174.48 367.43 173.787 368.11 173.449L376.11 169.449C376.671 169.171 377.329 169.171 377.89 169.449Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M367.32 174.16L377 179L386.68 174.16" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M377 190.76V179" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect x="18" y="93" width="46" height="46" rx="2" fill="white"/>
|
||||
<rect x="17.25" y="92.25" width="47.5" height="47.5" rx="2.75" stroke="black" stroke-opacity="0.16" stroke-width="1.5"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M41.89 105.449L49.89 109.449C50.5697 109.787 50.9996 110.48 51 111.239V120.769C50.9996 121.528 50.5697 122.221 49.89 122.559L41.89 126.559C41.3267 126.841 40.6634 126.841 40.1 126.559L32.1 122.559C31.421 122.217 30.9948 121.519 31 120.759L31 111.239C31.0005 110.48 31.4304 109.787 32.11 109.449L40.11 105.449C40.6707 105.171 41.3294 105.171 41.89 105.449Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M31.3203 110.16L41.0003 115L50.6803 110.16" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M41 126.76V115" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect x="186" y="93" width="46" height="46" rx="2" fill="white"/>
|
||||
<rect x="185.25" y="92.25" width="47.5" height="47.5" rx="2.75" stroke="black" stroke-opacity="0.16" stroke-width="1.5"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M209.89 105.449L217.89 109.449C218.57 109.787 219 110.48 219 111.239V120.769C219 121.528 218.57 122.221 217.89 122.559L209.89 126.559C209.327 126.841 208.663 126.841 208.1 126.559L200.1 122.559C199.421 122.217 198.995 121.519 199 120.759V111.239C199 110.48 199.43 109.787 200.11 109.449L208.11 105.449C208.671 105.171 209.329 105.171 209.89 105.449Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M199.32 110.16L209 115L218.68 110.16" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M209 126.76V115" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect x="354" y="93" width="46" height="46" rx="2" fill="white"/>
|
||||
<rect x="353.25" y="92.25" width="47.5" height="47.5" rx="2.75" stroke="black" stroke-opacity="0.16" stroke-width="1.5"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M377.89 105.449L385.89 109.449C386.57 109.787 387 110.48 387 111.239V120.769C387 121.528 386.57 122.221 385.89 122.559L377.89 126.559C377.327 126.841 376.663 126.841 376.1 126.559L368.1 122.559C367.421 122.217 366.995 121.519 367 120.759V111.239C367 110.48 367.43 109.787 368.11 109.449L376.11 105.449C376.671 105.171 377.329 105.171 377.89 105.449Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M367.32 110.16L377 115L386.68 110.16" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M377 126.76V115" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect x="81.25" y="156.25" width="47.5" height="47.5" rx="2.75" fill="white" stroke="#F25054" stroke-width="1.5"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M105.89 169.449L113.89 173.449C114.57 173.787 115 174.48 115 175.239V184.769C115 185.528 114.57 186.221 113.89 186.559L105.89 190.559C105.327 190.841 104.663 190.841 104.1 190.559L96.1 186.559C95.421 186.217 94.9948 185.519 95 184.759V175.239C95.0005 174.48 95.4304 173.787 96.11 173.449L104.11 169.449C104.671 169.171 105.329 169.171 105.89 169.449Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M95.3203 174.16L105 179L114.68 174.16" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M105 190.76V179" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect x="250" y="157" width="46" height="46" rx="2" fill="white"/>
|
||||
<rect x="249.25" y="156.25" width="47.5" height="47.5" rx="2.75" stroke="black" stroke-opacity="0.16" stroke-width="1.5"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M273.89 169.449L281.89 173.449C282.57 173.787 283 174.48 283 175.239V184.769C283 185.528 282.57 186.221 281.89 186.559L273.89 190.559C273.327 190.841 272.663 190.841 272.1 190.559L264.1 186.559C263.421 186.217 262.995 185.519 263 184.759V175.239C263 174.48 263.43 173.787 264.11 173.449L272.11 169.449C272.671 169.171 273.329 169.171 273.89 169.449Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M263.32 174.16L273 179L282.68 174.16" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M273 190.76V179" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect x="417.25" y="156.25" width="47.5" height="47.5" rx="2.75" fill="white" stroke="#F25054" stroke-width="1.5"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M441.89 169.449L449.89 173.449C450.57 173.787 451 174.48 451 175.239V184.769C451 185.528 450.57 186.221 449.89 186.559L441.89 190.559C441.327 190.841 440.663 190.841 440.1 190.559L432.1 186.559C431.421 186.217 430.995 185.519 431 184.759V175.239C431 174.48 431.43 173.787 432.11 173.449L440.11 169.449C440.671 169.171 441.329 169.171 441.89 169.449Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M431.32 174.16L441 179L450.68 174.16" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M441 190.76V179" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect x="82" y="93" width="46" height="46" rx="2" fill="white"/>
|
||||
<rect x="81.25" y="92.25" width="47.5" height="47.5" rx="2.75" stroke="black" stroke-opacity="0.16" stroke-width="1.5"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M105.89 105.449L113.89 109.449C114.57 109.787 115 110.48 115 111.239V120.769C115 121.528 114.57 122.221 113.89 122.559L105.89 126.559C105.327 126.841 104.663 126.841 104.1 126.559L96.1 122.559C95.421 122.217 94.9948 121.519 95 120.759V111.239C95.0005 110.48 95.4304 109.787 96.11 109.449L104.11 105.449C104.671 105.171 105.329 105.171 105.89 105.449Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M95.3203 110.16L105 115L114.68 110.16" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M105 126.76V115" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect x="250" y="93" width="46" height="46" rx="2" fill="white"/>
|
||||
<rect x="249.25" y="92.25" width="47.5" height="47.5" rx="2.75" stroke="black" stroke-opacity="0.16" stroke-width="1.5"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M273.89 105.449L281.89 109.449C282.57 109.787 283 110.48 283 111.239V120.769C283 121.528 282.57 122.221 281.89 122.559L273.89 126.559C273.327 126.841 272.663 126.841 272.1 126.559L264.1 122.559C263.421 122.217 262.995 121.519 263 120.759V111.239C263 110.48 263.43 109.787 264.11 109.449L272.11 105.449C272.671 105.171 273.329 105.171 273.89 105.449Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M263.32 110.16L273 115L282.68 110.16" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M273 126.76V115" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect x="417.25" y="92.25" width="47.5" height="47.5" rx="2.75" fill="white" stroke="#F25054" stroke-width="1.5"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M441.89 105.449L449.89 109.449C450.57 109.787 451 110.48 451 111.239V120.769C451 121.528 450.57 122.221 449.89 122.559L441.89 126.559C441.327 126.841 440.663 126.841 440.1 126.559L432.1 122.559C431.421 122.217 430.995 121.519 431 120.759V111.239C431 110.48 431.43 109.787 432.11 109.449L440.11 105.449C440.671 105.171 441.329 105.171 441.89 105.449Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M431.32 110.16L441 115L450.68 110.16" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M441 126.76V115" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect x="49" width="48" height="48" rx="2" fill="#DC477D"/>
|
||||
<path d="M73.1178 36.124C71.1367 36.1256 69.1852 35.6437 67.4326 34.7201C65.6799 33.7965 64.1792 32.4591 63.0606 30.824C61.9421 29.1889 61.2395 27.3055 61.0138 25.3373C60.7881 23.3691 61.0462 21.3756 61.7657 19.5297C62.4852 17.6839 63.6443 16.0416 65.1424 14.7452C66.6405 13.4489 68.4323 12.5378 70.3623 12.091C72.2924 11.6442 74.3023 11.6752 76.2177 12.1813C78.1331 12.6873 79.896 13.6532 81.3534 14.9951L78.4645 18.0173C77.316 16.9799 75.8912 16.2979 74.3629 16.054C72.8346 15.8101 71.2683 16.0147 69.8539 16.6431C68.4396 17.2714 67.2378 18.2966 66.3944 19.5942C65.551 20.8919 65.102 22.4063 65.102 23.954C65.102 25.5017 65.551 27.0161 66.3944 28.3138C67.2378 29.6114 68.4396 30.6366 69.8539 31.2649C71.2683 31.8933 72.8346 32.0979 74.3629 31.854C75.8912 31.6101 77.316 30.9281 78.4645 29.8907L81.3534 32.9129C79.1093 34.9802 76.169 36.1266 73.1178 36.124Z" fill="white"/>
|
||||
<path d="M82.9128 30.0346C82.7155 30.0346 82.5226 29.9761 82.3585 29.8665C82.1944 29.7568 82.0665 29.601 81.991 29.4187C81.9155 29.2364 81.8957 29.0357 81.9342 28.8422C81.9727 28.6486 82.0677 28.4708 82.2073 28.3313C82.3468 28.1918 82.5246 28.0967 82.7182 28.0582C82.9117 28.0197 83.1123 28.0395 83.2946 28.115C83.477 28.1905 83.6328 28.3184 83.7424 28.4825C83.8521 28.6466 83.9106 28.8395 83.9106 29.0368C83.91 29.3013 83.8047 29.5547 83.6177 29.7417C83.4307 29.9287 83.1773 30.034 82.9128 30.0346Z" fill="white"/>
|
||||
<path d="M73.0405 26.588C72.5182 26.5902 72.0071 26.4373 71.5718 26.1487C71.1365 25.8601 70.7967 25.4488 70.5954 24.9669C70.3941 24.485 70.3404 23.9541 70.4411 23.4417C70.5418 22.9292 70.7924 22.4582 71.161 22.0882C71.5297 21.7183 71.9999 21.4662 72.512 21.3637C73.0242 21.2613 73.5552 21.3132 74.0378 21.5129C74.5204 21.7125 74.9328 22.0509 75.2229 22.4853C75.513 22.9196 75.6676 23.4302 75.6672 23.9525C75.666 24.6496 75.3892 25.3179 74.8971 25.8117C74.405 26.3054 73.7376 26.5845 73.0405 26.588Z" fill="white"/>
|
||||
<path d="M84.0573 26.6362C83.86 26.6362 83.6671 26.5777 83.503 26.468C83.3389 26.3584 83.211 26.2026 83.1355 26.0202C83.06 25.8379 83.0402 25.6373 83.0787 25.4437C83.1172 25.2502 83.2123 25.0724 83.3518 24.9329C83.4914 24.7933 83.6691 24.6983 83.8627 24.6598C84.0562 24.6213 84.2569 24.6411 84.4392 24.7166C84.6215 24.7921 84.7773 24.92 84.887 25.0841C84.9966 25.2481 85.0551 25.4411 85.0551 25.6384C85.0545 25.9028 84.9492 26.1563 84.7622 26.3433C84.5752 26.5303 84.3218 26.6356 84.0573 26.6362Z" fill="white"/>
|
||||
<path d="M81.0915 26.5112C80.8937 26.5112 80.7003 26.4524 80.536 26.3422C80.3717 26.2321 80.2438 26.0756 80.1686 25.8926C80.0934 25.7097 80.0743 25.5085 80.1138 25.3146C80.1532 25.1208 80.2493 24.943 80.39 24.8039C80.5306 24.6648 80.7094 24.5707 80.9037 24.5335C81.098 24.4962 81.2989 24.5176 81.4811 24.5948C81.6632 24.672 81.8182 24.8016 81.9265 24.9672C82.0348 25.1327 82.0914 25.3267 82.0892 25.5245C82.0863 25.7872 81.9799 26.0382 81.7931 26.2229C81.6063 26.4076 81.3542 26.5112 81.0915 26.5112Z" fill="white"/>
|
||||
<path d="M84.0573 23.2729C83.86 23.2729 83.6671 23.2144 83.503 23.1047C83.3389 22.9951 83.211 22.8393 83.1355 22.657C83.06 22.4746 83.0402 22.274 83.0787 22.0805C83.1172 21.8869 83.2123 21.7091 83.3518 21.5696C83.4914 21.43 83.6691 21.335 83.8627 21.2965C84.0562 21.258 84.2569 21.2778 84.4392 21.3533C84.6215 21.4288 84.7773 21.5567 84.887 21.7208C84.9966 21.8849 85.0551 22.0778 85.0551 22.2751C85.0545 22.5396 84.9492 22.793 84.7622 22.98C84.5752 23.167 84.3218 23.2723 84.0573 23.2729Z" fill="white"/>
|
||||
<path d="M81.0915 23.3862C80.8942 23.3862 80.7013 23.3277 80.5372 23.218C80.3731 23.1084 80.2452 22.9526 80.1697 22.7702C80.0942 22.5879 80.0744 22.3873 80.1129 22.1937C80.1514 22.0002 80.2465 21.8224 80.386 21.6829C80.5255 21.5433 80.7033 21.4483 80.8969 21.4098C81.0904 21.3713 81.291 21.3911 81.4734 21.4666C81.6557 21.5421 81.8115 21.67 81.9212 21.8341C82.0308 21.9982 82.0893 22.1911 82.0893 22.3884C82.0893 22.653 81.9842 22.9068 81.7971 23.0939C81.6099 23.2811 81.3562 23.3862 81.0915 23.3862Z" fill="white"/>
|
||||
<path d="M82.9707 19.9174C82.7733 19.9179 82.5801 19.8597 82.4158 19.7504C82.2514 19.641 82.1232 19.4853 82.0473 19.303C81.9714 19.1207 81.9514 18.9201 81.9896 18.7264C82.0279 18.5327 82.1227 18.3547 82.2622 18.2149C82.4016 18.0751 82.5794 17.9799 82.773 17.9412C82.9666 17.9025 83.1673 17.9222 83.3498 17.9976C83.5322 18.0731 83.6882 18.201 83.7979 18.3651C83.9077 18.5292 83.9663 18.7222 83.9663 18.9197C83.9663 19.1839 83.8614 19.4373 83.6748 19.6244C83.4882 19.8115 83.2349 19.9168 82.9707 19.9174Z" fill="white"/>
|
||||
<rect x="217" width="48" height="48" rx="2" fill="#DC477D"/>
|
||||
<path d="M241.117 36.124C239.136 36.1256 237.184 35.6437 235.432 34.7201C233.679 33.7965 232.178 32.4591 231.06 30.824C229.941 29.1889 229.238 27.3055 229.013 25.3373C228.787 23.3691 229.045 21.3756 229.765 19.5297C230.484 17.6839 231.643 16.0416 233.141 14.7452C234.639 13.4489 236.431 12.5378 238.361 12.091C240.291 11.6442 242.301 11.6752 244.217 12.1813C246.132 12.6873 247.895 13.6532 249.352 14.9951L246.464 18.0173C245.315 16.9799 243.89 16.2979 242.362 16.054C240.834 15.8101 239.267 16.0147 237.853 16.6431C236.439 17.2714 235.237 18.2966 234.393 19.5942C233.55 20.8919 233.101 22.4063 233.101 23.954C233.101 25.5017 233.55 27.0161 234.393 28.3138C235.237 29.6114 236.439 30.6366 237.853 31.2649C239.267 31.8933 240.834 32.0979 242.362 31.854C243.89 31.6101 245.315 30.9281 246.464 29.8907L249.352 32.9129C247.108 34.9802 244.168 36.1266 241.117 36.124Z" fill="white"/>
|
||||
<path d="M250.912 30.0346C250.714 30.0346 250.522 29.9761 250.358 29.8665C250.193 29.7568 250.066 29.601 249.99 29.4187C249.914 29.2364 249.895 29.0357 249.933 28.8422C249.972 28.6486 250.067 28.4708 250.206 28.3313C250.346 28.1918 250.524 28.0967 250.717 28.0582C250.911 28.0197 251.111 28.0395 251.294 28.115C251.476 28.1905 251.632 28.3184 251.741 28.4825C251.851 28.6466 251.91 28.8395 251.91 29.0368C251.909 29.3013 251.804 29.5547 251.617 29.7417C251.43 29.9287 251.176 30.034 250.912 30.0346Z" fill="white"/>
|
||||
<path d="M241.04 26.588C240.517 26.5902 240.006 26.4373 239.571 26.1487C239.136 25.8601 238.796 25.4488 238.594 24.9669C238.393 24.485 238.339 23.9541 238.44 23.4417C238.541 22.9292 238.791 22.4582 239.16 22.0882C239.529 21.7183 239.999 21.4662 240.511 21.3637C241.023 21.2613 241.554 21.3132 242.037 21.5129C242.519 21.7125 242.932 22.0509 243.222 22.4853C243.512 22.9196 243.667 23.4302 243.666 23.9525C243.665 24.6496 243.388 25.3179 242.896 25.8117C242.404 26.3054 241.737 26.5845 241.04 26.588Z" fill="white"/>
|
||||
<path d="M252.056 26.6362C251.859 26.6362 251.666 26.5777 251.502 26.468C251.338 26.3584 251.21 26.2026 251.135 26.0202C251.059 25.8379 251.039 25.6373 251.078 25.4437C251.116 25.2502 251.211 25.0724 251.351 24.9329C251.49 24.7933 251.668 24.6983 251.862 24.6598C252.055 24.6213 252.256 24.6411 252.438 24.7166C252.621 24.7921 252.776 24.92 252.886 25.0841C252.996 25.2481 253.054 25.4411 253.054 25.6384C253.054 25.9028 252.948 26.1563 252.761 26.3433C252.574 26.5303 252.321 26.6356 252.056 26.6362Z" fill="white"/>
|
||||
<path d="M249.09 26.5112C248.892 26.5112 248.698 26.4524 248.534 26.3422C248.37 26.2321 248.242 26.0756 248.167 25.8926C248.091 25.7097 248.072 25.5085 248.112 25.3146C248.151 25.1208 248.247 24.943 248.388 24.8039C248.529 24.6648 248.707 24.5707 248.902 24.5335C249.096 24.4962 249.297 24.5176 249.479 24.5948C249.661 24.672 249.816 24.8016 249.925 24.9672C250.033 25.1327 250.089 25.3267 250.087 25.5245C250.084 25.7872 249.978 26.0382 249.791 26.2229C249.604 26.4076 249.352 26.5112 249.09 26.5112Z" fill="white"/>
|
||||
<path d="M252.056 23.2729C251.859 23.2729 251.666 23.2144 251.502 23.1047C251.338 22.9951 251.21 22.8393 251.135 22.657C251.059 22.4746 251.039 22.274 251.078 22.0805C251.116 21.8869 251.211 21.7091 251.351 21.5696C251.49 21.43 251.668 21.335 251.862 21.2965C252.055 21.258 252.256 21.2778 252.438 21.3533C252.621 21.4288 252.776 21.5567 252.886 21.7208C252.996 21.8849 253.054 22.0778 253.054 22.2751C253.054 22.5396 252.948 22.793 252.761 22.98C252.574 23.167 252.321 23.2723 252.056 23.2729Z" fill="white"/>
|
||||
<path d="M249.09 23.3862C248.892 23.3862 248.699 23.3277 248.535 23.218C248.371 23.1084 248.243 22.9526 248.168 22.7702C248.092 22.5879 248.072 22.3873 248.111 22.1937C248.149 22.0002 248.244 21.8224 248.384 21.6829C248.524 21.5433 248.701 21.4483 248.895 21.4098C249.088 21.3713 249.289 21.3911 249.471 21.4666C249.654 21.5421 249.81 21.67 249.919 21.8341C250.029 21.9982 250.087 22.1911 250.087 22.3884C250.087 22.653 249.982 22.9068 249.795 23.0939C249.608 23.2811 249.354 23.3862 249.09 23.3862Z" fill="white"/>
|
||||
<path d="M250.969 19.9174C250.771 19.9179 250.578 19.8597 250.414 19.7504C250.249 19.641 250.121 19.4853 250.045 19.303C249.969 19.1207 249.949 18.9201 249.988 18.7264C250.026 18.5327 250.121 18.3547 250.26 18.2149C250.4 18.0751 250.577 17.9799 250.771 17.9412C250.965 17.9025 251.165 17.9222 251.348 17.9976C251.53 18.0731 251.686 18.201 251.796 18.3651C251.906 18.5292 251.964 18.7222 251.964 18.9197C251.964 19.1839 251.859 19.4373 251.673 19.6244C251.486 19.8115 251.233 19.9168 250.969 19.9174Z" fill="white"/>
|
||||
<rect x="385" width="48" height="48" rx="2" fill="#DC477D"/>
|
||||
<path d="M409.117 36.124C407.136 36.1256 405.184 35.6437 403.432 34.7201C401.679 33.7965 400.178 32.4591 399.06 30.824C397.941 29.1889 397.238 27.3055 397.013 25.3373C396.787 23.3691 397.045 21.3756 397.765 19.5297C398.484 17.6839 399.643 16.0416 401.141 14.7452C402.639 13.4489 404.431 12.5378 406.361 12.091C408.291 11.6442 410.301 11.6752 412.217 12.1813C414.132 12.6873 415.895 13.6532 417.352 14.9951L414.464 18.0173C413.315 16.9799 411.89 16.2979 410.362 16.054C408.834 15.8101 407.267 16.0147 405.853 16.6431C404.439 17.2714 403.237 18.2966 402.393 19.5942C401.55 20.8919 401.101 22.4063 401.101 23.954C401.101 25.5017 401.55 27.0161 402.393 28.3138C403.237 29.6114 404.439 30.6366 405.853 31.2649C407.267 31.8933 408.834 32.0979 410.362 31.854C411.89 31.6101 413.315 30.9281 414.464 29.8907L417.352 32.9129C415.108 34.9802 412.168 36.1266 409.117 36.124Z" fill="white"/>
|
||||
<path d="M418.912 30.0346C418.714 30.0346 418.522 29.9761 418.358 29.8665C418.193 29.7568 418.066 29.601 417.99 29.4187C417.914 29.2364 417.895 29.0357 417.933 28.8422C417.972 28.6486 418.067 28.4708 418.206 28.3313C418.346 28.1918 418.524 28.0967 418.717 28.0582C418.911 28.0197 419.111 28.0395 419.294 28.115C419.476 28.1905 419.632 28.3184 419.741 28.4825C419.851 28.6466 419.91 28.8395 419.91 29.0368C419.909 29.3013 419.804 29.5547 419.617 29.7417C419.43 29.9287 419.176 30.034 418.912 30.0346Z" fill="white"/>
|
||||
<path d="M409.04 26.588C408.517 26.5902 408.006 26.4373 407.571 26.1487C407.136 25.8601 406.796 25.4488 406.594 24.9669C406.393 24.485 406.339 23.9541 406.44 23.4417C406.541 22.9292 406.791 22.4582 407.16 22.0882C407.529 21.7183 407.999 21.4662 408.511 21.3637C409.023 21.2613 409.554 21.3132 410.037 21.5129C410.519 21.7125 410.932 22.0509 411.222 22.4853C411.512 22.9196 411.667 23.4302 411.666 23.9525C411.665 24.6496 411.388 25.3179 410.896 25.8117C410.404 26.3054 409.737 26.5845 409.04 26.588Z" fill="white"/>
|
||||
<path d="M420.056 26.6362C419.859 26.6362 419.666 26.5777 419.502 26.468C419.338 26.3584 419.21 26.2026 419.135 26.0202C419.059 25.8379 419.039 25.6373 419.078 25.4437C419.116 25.2502 419.211 25.0724 419.351 24.9329C419.49 24.7933 419.668 24.6983 419.862 24.6598C420.055 24.6213 420.256 24.6411 420.438 24.7166C420.621 24.7921 420.776 24.92 420.886 25.0841C420.996 25.2481 421.054 25.4411 421.054 25.6384C421.054 25.9028 420.948 26.1563 420.761 26.3433C420.574 26.5303 420.321 26.6356 420.056 26.6362Z" fill="white"/>
|
||||
<path d="M417.09 26.5112C416.892 26.5112 416.698 26.4524 416.534 26.3422C416.37 26.2321 416.242 26.0756 416.167 25.8926C416.091 25.7097 416.072 25.5085 416.112 25.3146C416.151 25.1208 416.247 24.943 416.388 24.8039C416.529 24.6648 416.707 24.5707 416.902 24.5335C417.096 24.4962 417.297 24.5176 417.479 24.5948C417.661 24.672 417.816 24.8016 417.925 24.9672C418.033 25.1327 418.089 25.3267 418.087 25.5245C418.084 25.7872 417.978 26.0382 417.791 26.2229C417.604 26.4076 417.352 26.5112 417.09 26.5112Z" fill="white"/>
|
||||
<path d="M420.056 23.2729C419.859 23.2729 419.666 23.2144 419.502 23.1047C419.338 22.9951 419.21 22.8393 419.135 22.657C419.059 22.4746 419.039 22.274 419.078 22.0805C419.116 21.8869 419.211 21.7091 419.351 21.5696C419.49 21.43 419.668 21.335 419.862 21.2965C420.055 21.258 420.256 21.2778 420.438 21.3533C420.621 21.4288 420.776 21.5567 420.886 21.7208C420.996 21.8849 421.054 22.0778 421.054 22.2751C421.054 22.5396 420.948 22.793 420.761 22.98C420.574 23.167 420.321 23.2723 420.056 23.2729Z" fill="white"/>
|
||||
<path d="M417.09 23.3862C416.892 23.3862 416.699 23.3277 416.535 23.218C416.371 23.1084 416.243 22.9526 416.168 22.7702C416.092 22.5879 416.072 22.3873 416.111 22.1937C416.149 22.0002 416.244 21.8224 416.384 21.6829C416.524 21.5433 416.701 21.4483 416.895 21.4098C417.088 21.3713 417.289 21.3911 417.471 21.4666C417.654 21.5421 417.81 21.67 417.919 21.8341C418.029 21.9982 418.087 22.1911 418.087 22.3884C418.087 22.653 417.982 22.9068 417.795 23.0939C417.608 23.2811 417.354 23.3862 417.09 23.3862Z" fill="white"/>
|
||||
<path d="M418.969 19.9174C418.771 19.9179 418.578 19.8597 418.414 19.7504C418.249 19.641 418.121 19.4853 418.045 19.303C417.969 19.1207 417.949 18.9201 417.988 18.7264C418.026 18.5327 418.121 18.3547 418.26 18.2149C418.4 18.0751 418.577 17.9799 418.771 17.9412C418.965 17.9025 419.165 17.9222 419.348 17.9976C419.53 18.0731 419.686 18.201 419.796 18.3651C419.906 18.5292 419.964 18.7222 419.964 18.9197C419.964 19.1839 419.859 19.4373 419.673 19.6244C419.486 19.8115 419.233 19.9168 418.969 19.9174Z" fill="white"/>
|
||||
<path d="M41 90L41 78C41 73.5817 44.5817 70 49 70L57 70" stroke="#343536" stroke-width="2" stroke-linejoin="round"/>
|
||||
<path d="M73 50L73 62C73 66.4183 69.4183 70 65 70L57 70" stroke="#343536" stroke-width="2" stroke-linejoin="round"/>
|
||||
<line x1="73" y1="52" x2="73" y2="48" stroke="#343536" stroke-width="2"/>
|
||||
<line y1="-1" x2="4" y2="-1" transform="matrix(-4.37113e-08 1 1 4.37114e-08 42 88)" stroke="#343536" stroke-width="2"/>
|
||||
<path d="M209 90L209 78C209 73.5817 212.582 70 217 70L225 70" stroke="#343536" stroke-width="2" stroke-linejoin="round"/>
|
||||
<path d="M241 50L241 62C241 66.4183 237.418 70 233 70L225 70" stroke="#343536" stroke-width="2" stroke-linejoin="round"/>
|
||||
<line x1="241" y1="52" x2="241" y2="48" stroke="#343536" stroke-width="2"/>
|
||||
<line y1="-1" x2="4" y2="-1" transform="matrix(-4.37113e-08 1 1 4.37114e-08 210 88)" stroke="#343536" stroke-width="2"/>
|
||||
<path d="M377 90L377 78C377 73.5817 380.582 70 385 70L393 70" stroke="#343536" stroke-width="2" stroke-linejoin="round"/>
|
||||
<path d="M409 50L409 62C409 66.4183 405.418 70 401 70L393 70" stroke="#343536" stroke-width="2" stroke-linejoin="round"/>
|
||||
<line x1="409" y1="52" x2="409" y2="48" stroke="#343536" stroke-width="2"/>
|
||||
<line y1="-1" x2="4" y2="-1" transform="matrix(-4.37113e-08 1 1 4.37114e-08 378 88)" stroke="#343536" stroke-width="2"/>
|
||||
<line x1="41" y1="142" x2="41" y2="154" stroke="#343536" stroke-width="2"/>
|
||||
<line x1="41" y1="144" x2="41" y2="140" stroke="#343536" stroke-width="2"/>
|
||||
<line x1="41" y1="152" x2="41" y2="156" stroke="#343536" stroke-width="2"/>
|
||||
<line x1="209" y1="142" x2="207" y2="154" stroke="black" stroke-width="2" stroke-linejoin="round" stroke-dasharray="4 2"/>
|
||||
<line x1="209" y1="144" x2="209" y2="140" stroke="black" stroke-width="2"/>
|
||||
<line x1="209" y1="152" x2="209" y2="156" stroke="black" stroke-width="2"/>
|
||||
<line x1="377" y1="142" x2="377" y2="154" stroke="#343536" stroke-width="2"/>
|
||||
<line x1="377" y1="144" x2="377" y2="140" stroke="#343536" stroke-width="2"/>
|
||||
<line x1="377" y1="152" x2="377" y2="156" stroke="#343536" stroke-width="2"/>
|
||||
<line x1="105" y1="142" x2="103" y2="154" stroke="black" stroke-width="2" stroke-linejoin="round" stroke-dasharray="4 2"/>
|
||||
<line x1="105" y1="144" x2="105" y2="140" stroke="black" stroke-width="2"/>
|
||||
<line x1="105" y1="152" x2="105" y2="156" stroke="black" stroke-width="2"/>
|
||||
<line x1="273" y1="142" x2="273" y2="154" stroke="#343536" stroke-width="2"/>
|
||||
<line x1="273" y1="144" x2="273" y2="140" stroke="#343536" stroke-width="2"/>
|
||||
<line x1="273" y1="152" x2="273" y2="156" stroke="#343536" stroke-width="2"/>
|
||||
<line x1="441" y1="142" x2="439" y2="154" stroke="black" stroke-width="2" stroke-linejoin="round" stroke-dasharray="4 2"/>
|
||||
<line x1="441" y1="144" x2="441" y2="140" stroke="black" stroke-width="2"/>
|
||||
<line x1="441" y1="152" x2="441" y2="156" stroke="black" stroke-width="2"/>
|
||||
<path d="M105 90L105 78C105 73.5817 101.418 70 97 70L89 70" stroke="#343536" stroke-width="2" stroke-linejoin="round"/>
|
||||
<path d="M73 50L73 62C73 66.4183 76.5817 70 81 70L89 70" stroke="#343536" stroke-width="2" stroke-linejoin="round"/>
|
||||
<line y1="-1" x2="4" y2="-1" transform="matrix(-1.31134e-07 -1 -1 1.31134e-07 72 52)" stroke="#343536" stroke-width="2"/>
|
||||
<line x1="105" y1="88" x2="105" y2="92" stroke="#343536" stroke-width="2"/>
|
||||
<path d="M273 90L273 78C273 73.5817 269.418 70 265 70L257 70" stroke="#343536" stroke-width="2" stroke-linejoin="round"/>
|
||||
<path d="M241 50L241 62C241 66.4183 244.582 70 249 70L257 70" stroke="#343536" stroke-width="2" stroke-linejoin="round"/>
|
||||
<line y1="-1" x2="4" y2="-1" transform="matrix(-1.31134e-07 -1 -1 1.31134e-07 240 52)" stroke="#343536" stroke-width="2"/>
|
||||
<line x1="273" y1="88" x2="273" y2="92" stroke="#343536" stroke-width="2"/>
|
||||
<path d="M441 90L441 78C441 73.5817 437.418 70 433 70L425 70" stroke="black" stroke-width="2" stroke-linejoin="round" stroke-dasharray="4 2"/>
|
||||
<path d="M409 50L409 62C409 66.4183 412.582 70 417 70L425 70" stroke="black" stroke-width="2" stroke-linejoin="round" stroke-dasharray="4 2"/>
|
||||
<line y1="-1" x2="4" y2="-1" transform="matrix(-1.31134e-07 -1 -1 1.31134e-07 408 52)" stroke="black" stroke-width="2"/>
|
||||
<line x1="441" y1="88" x2="441" y2="92" stroke="black" stroke-width="2"/>
|
||||
<path d="M60.3337 129.916L55.7503 134.499L53.667 132.416" stroke="#00BC7F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M228.333 129.916L223.749 134.499L221.666 132.416" stroke="#00BC7F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M396.333 129.916L391.749 134.499L389.666 132.416" stroke="#00BC7F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M60.3337 193.916L55.7503 198.499L53.667 196.416" stroke="#00BC7F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M292.333 193.916L287.749 198.499L285.666 196.416" stroke="#00BC7F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M396.333 193.916L391.749 198.499L389.666 196.416" stroke="#00BC7F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M124.334 129.916L119.75 134.499L117.667 132.416" stroke="#00BC7F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M292.333 129.916L287.749 134.499L285.666 132.416" stroke="#00BC7F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 111 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg fill="none" height="16" viewBox="0 0 18 16" width="18" xmlns="http://www.w3.org/2000/svg"><path d="m17.7979 13.7532-7.5085-13.008778c-.57343-.992563-2.00314-.992563-2.57656 0l-7.51108 13.008778c-.573424.9925.143998 2.232 1.28827 2.232h15.01957c1.1469 0 1.8617-1.2395 1.2883-2.232z" fill="#ffd4d6"/><g fill="#000"><path d="m9.00033 14.1022c.61287 0 1.10967-.4968 1.10967-1.1097s-.4968-1.1097-1.10967-1.1097-1.10971.4968-1.10971 1.1097.49684 1.1097 1.10971 1.1097z"/><path d="m8.83877 4.11523h.32233c.51801 0 .9347.43053.9163.94855l-.16115 4.82099c-.01612.49503-.42363.88873-.91632.88873-.49499 0-.90019-.3914-.91631-.88873l-.16116-4.82099c-.01842-.52032.3983-.94855.91631-.94855z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 696 B |
|
|
@ -0,0 +1 @@
|
|||
<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" fill="#ffd4d6" r="12"/><g fill="#000"><path d="m12 18.5c.8284 0 1.5-.6716 1.5-1.5s-.6716-1.5-1.5-1.5-1.5.6716-1.5 1.5.6716 1.5 1.5 1.5z"/><path d="m11.7824 5h.4356c.7002 0 1.2635.58195 1.2386 1.28216l-.2178 6.51664c-.0218.669-.5726 1.2012-1.2386 1.2012-.6691 0-1.2168-.529-1.2386-1.2012l-.2178-6.51664c-.0249-.70332.5383-1.28216 1.2386-1.28216z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 476 B |
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="24" height="24" fill="#ffe9f1"/>
|
||||
<path d="M17.3334 8.66666L10 16L6.66669 12.6667" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 281 B |
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="24" height="24" fill="#f2f2f3"/>
|
||||
<path d="M17.3334 8.66666L10 16L6.66669 12.6667" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 281 B |
|
|
@ -0,0 +1 @@
|
|||
<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" fill="#000" r="12"/><path d="m16.6654 9.08398-6.4167 6.41672-2.91667-2.9167" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>
|
||||
|
After Width: | Height: | Size: 281 B |
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
Loading…
Reference in New Issue