Updates the homepage hero CTA (#10192)
Plug in callouts content Most styles for the callout blade Re-export Consul Stack image Update icons Misc content tweaks Optimize mobile for the consul stack icon Better alignment Make full CTA box clickable
This commit is contained in:
Brandon Romano
GitHub
parent
8b0ad949c0
commit
82e0e24917
|
|
@ -0,0 +1,117 @@
|
|||
.calloutBlade {
|
||||
padding-top: 56px;
|
||||
padding-bottom: 56px;
|
||||
|
||||
& .contentWrapper {
|
||||
& > h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 48px;
|
||||
@media (max-width: 1000px) {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contentWrapper {
|
||||
composes: g-grid-container from global;
|
||||
}
|
||||
|
||||
.callouts {
|
||||
display: grid;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
&.twoUp {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
& .linkWrap {
|
||||
padding: 64px 64px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
& .icon {
|
||||
margin-right: 48px;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
padding: 48px 32px;
|
||||
flex-direction: column;
|
||||
& .icon {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
&.threeUp {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
& .linkWrap {
|
||||
padding: 64px 32px;
|
||||
}
|
||||
|
||||
@media (max-width: 1220px) {
|
||||
grid-template-columns: 1fr;
|
||||
& .linkWrap {
|
||||
padding: 48px 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .linkWrap {
|
||||
color: inherit;
|
||||
height: 100%;
|
||||
background: var(--gray-6);
|
||||
&:hover {
|
||||
background: var(--gray-5);
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& .icon {
|
||||
margin-bottom: 16px;
|
||||
& svg {
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
& .flexWrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
justify-content: space-between;
|
||||
|
||||
& .infoWrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& > h5 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
& > p {
|
||||
color: var(--gray-3);
|
||||
margin-top: 0;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
& .linkWrapper {
|
||||
& .eyebrow {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
& :global(.g-btn) {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
composes: g-type-label from global;
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import classNames from 'classnames'
|
||||
import styles from './CalloutBlade.module.css'
|
||||
import Button from '@hashicorp/react-button'
|
||||
import InlineSvg from '@hashicorp/react-inline-svg'
|
||||
|
||||
export default function CalloutBlade({ title, callouts }) {
|
||||
return (
|
||||
<div className={styles.calloutBlade}>
|
||||
<div className={styles.contentWrapper}>
|
||||
<h3>{title}</h3>
|
||||
<ul
|
||||
className={classNames(styles.callouts, {
|
||||
[styles.twoUp]: callouts.length % 3 !== 0,
|
||||
[styles.threeUp]: callouts.length % 3 === 0,
|
||||
})}
|
||||
>
|
||||
{callouts.map((callout) => {
|
||||
return (
|
||||
<li key={callout.title}>
|
||||
<a className={styles.linkWrap} href={callout.link.url}>
|
||||
<InlineSvg src={callout.icon} className={styles.icon} />
|
||||
<div className={styles.flexWrapper}>
|
||||
<div className={styles.infoWrapper}>
|
||||
<h5>{callout.title}</h5>
|
||||
<p>{callout.description}</p>
|
||||
</div>
|
||||
<div className={styles.linkWrapper}>
|
||||
<div className={styles.eyebrow}>{callout.eyebrow}</div>
|
||||
<Button
|
||||
title={callout.link.text}
|
||||
url={callout.link.url}
|
||||
linkType="inbound"
|
||||
theme={{
|
||||
brand: 'neutral',
|
||||
variant: 'tertiary',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="262px" height="153px" viewBox="0 0 262 153" 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>Consul Stack</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<linearGradient x1="5.84301534%" y1="40.5603513%" x2="94.330705%" y2="59.1543948%" id="linearGradient-1">
|
||||
<stop stop-color="#ED3E72" offset="0%"></stop>
|
||||
<stop stop-color="#9E177E" stop-opacity="0.8" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Consul-Stack">
|
||||
<polygon id="Path" fill="#F2F2F3" fill-rule="nonzero" points="196.19 38.613 130.976 76.5954 196.19 114.567 261.415 76.5954"></polygon>
|
||||
<path d="M180.026,67.2899 L174.02,80.1543 L174.18,80.1543 L190.178,89.4811 L212.309,85.9969 L212.384,85.9969 L218.358,73.1325 L202.296,63.72 L180.026,67.2899 Z M203.965,73.9687 L202.583,77.2705 L198.384,77.8494 L195.429,78.3211 L200.744,81.4408 L199.203,85.4609 L188.477,79.2109 L189.54,76.1127 L196.981,74.8799 L191.666,71.7495 L193.26,67.7723 L198.862,70.9884 L203.965,73.9687 Z" id="Shape" fill="#000000" fill-rule="nonzero" opacity="0.16"></path>
|
||||
<polygon id="Path" fill="#F2F2F3" fill-rule="nonzero" points="65.7477 38.613 0.52255 76.5954 65.7477 114.567 130.973 76.5954"></polygon>
|
||||
<path d="M66.1399,70.9883 L53.8624,72.9072 L62.7809,78.0959 L75.0159,76.177 L66.1399,70.9883 Z M79.4486,68.4476 L70.4238,63.1946 L67.1392,70.3236 L76.164,75.5766 L79.4486,68.4476 Z M39.8734,75.062 L48.7813,80.2507 L61.027,78.3425 L52.151,73.1324 L39.8734,75.062 Z M76.3659,76.9381 L64.1096,78.8034 L73.0175,83.9921 L85.2632,82.0839 L76.3659,76.9381 Z" id="Shape" fill="#000000" opacity="0.16"></path>
|
||||
<polygon id="Path" fill="#F2F2F3" fill-rule="nonzero" points="130.971 0.64124 65.7455 38.6128 130.971 76.5952 196.185 38.6128"></polygon>
|
||||
<path d="M106.064,39.6634 L146.128,47.4786 L132.809,24.0974 L106.064,39.6634 Z M126.335,34.1102 L127.887,33.2097 L129.439,34.1102 L127.887,35.0108 L126.335,34.1102 Z M129.45,39.524 L127.898,40.4246 L126.356,39.524 L127.898,38.6128 L129.45,39.524 Z M127.122,38.1626 L125.58,39.0631 L124.029,38.1626 L125.58,37.262 L127.122,38.1626 Z M124.805,36.8118 L123.253,37.7123 L121.701,36.8118 L123.253,35.9113 L124.805,36.8118 Z M134.106,39.524 L132.554,40.4246 L131.002,39.524 L132.554,38.6128 L134.106,39.524 Z M131.778,38.1626 L130.226,39.0631 L128.674,38.1626 L130.226,37.262 L131.778,38.1626 Z M129.45,36.8118 L127.887,37.7552 L126.346,36.8547 L127.887,35.9542 L129.45,36.8118 Z M127.122,35.461 L125.58,36.3615 L124.029,35.461 L125.58,34.5498 L127.122,35.461 Z M128.663,35.461 L130.215,34.5605 L131.767,35.461 L130.215,36.3723 L128.663,35.461 Z M132.554,37.7123 L131.002,36.8118 L132.554,35.9113 L134.106,36.8118 L132.554,37.7123 Z" id="Shape" fill="#000000" fill-rule="nonzero" opacity="0.16"></path>
|
||||
<polygon id="Path" fill="#DBDBDC" fill-rule="nonzero" points="130.971 76.5947 65.7455 114.566 130.971 152.549 196.185 114.566"></polygon>
|
||||
<polygon id="Path" fill="url(#linearGradient-1)" fill-rule="nonzero" points="130.971 58.5663 65.7455 96.5379 130.971 134.52 196.185 96.5379"></polygon>
|
||||
<path d="M145.155,103.803 C137.331,108.348 124.618,108.348 116.805,103.803 C108.992,99.257 108.981,91.8389 116.805,87.2934 C120.901,85.061 125.479,83.8792 130.135,83.8522 L130.135,83.8522 L130.305,87.8509 C127.286,87.8804 124.321,88.6494 121.663,90.0914 C116.528,93.0824 116.528,97.9495 121.663,100.94 C126.797,103.931 135.152,103.931 140.286,100.94 C142.603,99.59 143.964,97.8101 144.124,95.9019 L151.001,95.9984 C150.788,98.968 148.716,101.723 145.155,103.803 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
|
||||
<path d="M149.468,93.03 C149.107,93.2145 148.708,93.3107 148.304,93.3107 C147.899,93.3107 147.501,93.2145 147.14,93.03 C147.002,92.9797 146.883,92.8879 146.799,92.7671 C146.715,92.6462 146.67,92.5022 146.67,92.3546 C146.67,92.207 146.715,92.0629 146.799,91.9421 C146.883,91.8212 147.002,91.7294 147.14,91.6792 C147.501,91.4946 147.899,91.3984 148.304,91.3984 C148.708,91.3984 149.107,91.4946 149.468,91.6792 C149.605,91.7294 149.724,91.8212 149.808,91.9421 C149.893,92.0629 149.938,92.207 149.938,92.3546 C149.938,92.5022 149.893,92.6462 149.808,92.7671 C149.724,92.8879 149.605,92.9797 149.468,93.03 L149.468,93.03 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
|
||||
<path d="M133.95,97.3821 C132.999,97.8681 131.949,98.121 130.883,98.121 C129.817,98.121 128.767,97.8681 127.816,97.3821 C126.126,96.3958 126.126,94.7985 127.816,93.8122 C128.767,93.3262 129.817,93.073 130.883,93.073 C131.949,93.073 132.999,93.3262 133.95,93.8122 C135.65,94.7985 135.65,96.3958 133.95,97.3821 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
|
||||
<path d="M146.832,89.9423 C146.471,90.1269 146.073,90.2231 145.668,90.2231 C145.264,90.2231 144.865,90.1269 144.504,89.9423 C144.367,89.8921 144.248,89.8003 144.164,89.6794 C144.079,89.5586 144.034,89.4146 144.034,89.2669 C144.034,89.1193 144.079,88.9753 144.164,88.8544 C144.248,88.7336 144.367,88.6418 144.504,88.5916 C144.865,88.407 145.264,88.3108 145.668,88.3108 C146.073,88.3108 146.471,88.407 146.832,88.5916 C146.97,88.6418 147.089,88.7336 147.173,88.8544 C147.257,88.9753 147.302,89.1193 147.302,89.2669 C147.302,89.4146 147.257,89.5586 147.173,89.6794 C147.089,89.8003 146.97,89.8921 146.832,89.9423 L146.832,89.9423 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
|
||||
<path d="M143.24,91.8721 C142.882,92.0574 142.485,92.1541 142.082,92.1541 C141.679,92.1541 141.282,92.0574 140.923,91.8721 C140.785,91.8219 140.666,91.7301 140.582,91.6092 C140.498,91.4884 140.453,91.3444 140.453,91.1967 C140.453,91.0491 140.498,90.9051 140.582,90.7842 C140.666,90.6634 140.785,90.5716 140.923,90.5214 C141.282,90.336 141.679,90.2394 142.082,90.2394 C142.485,90.2394 142.882,90.336 143.24,90.5214 C143.383,90.5663 143.508,90.6561 143.596,90.7776 C143.685,90.8991 143.733,91.0459 143.733,91.1967 C143.733,91.3476 143.685,91.4944 143.596,91.6159 C143.508,91.7374 143.383,91.8272 143.24,91.8721 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
|
||||
<path d="M142.923,87.67 C142.565,87.8553 142.168,87.952 141.765,87.952 C141.362,87.952 140.965,87.8553 140.606,87.67 C140.468,87.6197 140.349,87.5279 140.265,87.4071 C140.181,87.2863 140.136,87.1422 140.136,86.9946 C140.136,86.847 140.181,86.7029 140.265,86.5821 C140.349,86.4612 140.468,86.3695 140.606,86.3192 C140.965,86.1339 141.362,86.0372 141.765,86.0372 C142.168,86.0372 142.565,86.1339 142.923,86.3192 C143.572,86.6837 143.572,87.2948 142.923,87.67 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
|
||||
<path d="M139.582,89.7599 C139.22,89.9396 138.821,90.0331 138.418,90.0331 C138.014,90.0331 137.616,89.9396 137.254,89.7599 C137.112,89.7119 136.99,89.6204 136.903,89.4983 C136.816,89.3762 136.769,89.2296 136.769,89.0792 C136.769,88.9288 136.816,88.7822 136.903,88.6601 C136.99,88.5379 137.112,88.4464 137.254,88.3984 C137.616,88.2187 138.014,88.1252 138.418,88.1252 C138.821,88.1252 139.22,88.2187 139.582,88.3984 C139.723,88.4464 139.846,88.5379 139.933,88.6601 C140.02,88.7822 140.067,88.9288 140.067,89.0792 C140.067,89.2296 140.02,89.3762 139.933,89.4983 C139.846,89.6204 139.723,89.7119 139.582,89.7599 L139.582,89.7599 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
|
||||
<path d="M137.751,86.1254 C137.39,86.31 136.992,86.4062 136.587,86.4062 C136.183,86.4062 135.784,86.31 135.423,86.1254 C135.285,86.0752 135.166,85.9834 135.082,85.8626 C134.998,85.7417 134.953,85.5977 134.953,85.4501 C134.953,85.3024 134.998,85.1584 135.082,85.0375 C135.166,84.9167 135.285,84.8249 135.423,84.7747 C135.784,84.5901 136.183,84.4939 136.587,84.4939 C136.992,84.4939 137.39,84.5901 137.751,84.7747 C137.889,84.8249 138.008,84.9167 138.092,85.0375 C138.176,85.1584 138.221,85.3024 138.221,85.4501 C138.221,85.5977 138.176,85.7417 138.092,85.8626 C138.008,85.9834 137.889,86.0752 137.751,86.1254 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.1 KiB |
BIN
website/components/cta-hero/img/cta-image.jpg (Stored with Git LFS)
BIN
website/components/cta-hero/img/cta-image.jpg (Stored with Git LFS)
Binary file not shown.
|
|
@ -1,51 +1,38 @@
|
|||
import Button from '@hashicorp/react-button'
|
||||
import TextSplit from '@hashicorp/react-text-split'
|
||||
import Button from '@hashicorp/react-button'
|
||||
import s from './style.module.css'
|
||||
import InlineSvg from '@hashicorp/react-inline-svg'
|
||||
import ConsulStack from './img/consul-stack.svg?include'
|
||||
|
||||
export default function CtaHero() {
|
||||
export default function CtaHero({ title, description, links, cta }) {
|
||||
return (
|
||||
<div className={s.ctaHero}>
|
||||
<TextSplit
|
||||
product="consul"
|
||||
heading="Service Mesh for any runtime or cloud"
|
||||
content="Consul automates networking for simple and secure application delivery."
|
||||
links={[
|
||||
{ type: 'none', text: 'Download Consul', url: '/downloads' },
|
||||
{
|
||||
type: 'none',
|
||||
text: 'Explore Tutorials',
|
||||
url: 'https://learn.hashicorp.com/consul',
|
||||
},
|
||||
]}
|
||||
heading={title}
|
||||
content={description}
|
||||
links={links}
|
||||
linkStyle="buttons"
|
||||
>
|
||||
<Cta />
|
||||
<CTA title={cta.title} description={cta.description} link={cta.link} />
|
||||
</TextSplit>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Cta() {
|
||||
function CTA({ title, description, link }) {
|
||||
return (
|
||||
<div className={s.cta}>
|
||||
<img src={require('./img/cta-image.jpg?url')} alt="Consul stack" />
|
||||
<div className={s.ctaContent}>
|
||||
<div className={s.ctaHeading}>
|
||||
<h4 className="g-type-display-4">Try HCP Consul</h4>
|
||||
</div>
|
||||
<div className={s.ctaDescription}>
|
||||
<p className="g-type-body-small">
|
||||
Hosted on HashiCorp Cloud Platform, HCP Consul is a fully managed
|
||||
service mesh that discovers and securely connects any service.
|
||||
</p>
|
||||
<Button
|
||||
title="Sign Up"
|
||||
linkType="inbound"
|
||||
theme={{ variant: 'tertiary-neutral' }}
|
||||
url="https://cloud.hashicorp.com/?utm_source=consul_io&utm_content=hero"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<InlineSvg className={s.stackIcon} src={ConsulStack} />
|
||||
<h3>{title}</h3>
|
||||
<p className={s.description}>{description}</p>
|
||||
<Button
|
||||
title={link.text}
|
||||
url={link.url}
|
||||
theme={{
|
||||
brand: 'neutral',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -61,38 +61,63 @@
|
|||
}
|
||||
|
||||
.cta {
|
||||
padding: 24px;
|
||||
padding-bottom: 51px;
|
||||
border: 1px solid var(--gray-5);
|
||||
max-width: 525px;
|
||||
border: var(--gray-5) 1px solid;
|
||||
padding: 32px;
|
||||
position: relative;
|
||||
margin-top: 44px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
& img {
|
||||
max-height: 50%;
|
||||
max-width: 100%;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1120px) {
|
||||
margin-top: unset;
|
||||
margin-left: unset;
|
||||
margin-right: unset;
|
||||
|
||||
.ctaContent {
|
||||
display: flex;
|
||||
@media (width < 520px) {
|
||||
flex-direction: column;
|
||||
/* Pull this down on Desktop to line the
|
||||
* buttons up with the other CTA buttons */
|
||||
margin-bottom: -38px;
|
||||
}
|
||||
|
||||
& .ctaHeading {
|
||||
@media (width >= 520px) {
|
||||
width: 40%;
|
||||
}
|
||||
& > h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
max-width: 135px;
|
||||
}
|
||||
|
||||
& h4 {
|
||||
margin-top: 0;
|
||||
@media (width >= 520px) {
|
||||
width: 100px;
|
||||
& > p {
|
||||
color: var(--gray-3);
|
||||
margin-top: 28px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
& .stackIcon {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
& svg {
|
||||
position: absolute;
|
||||
max-width: 100%;
|
||||
left: 209px;
|
||||
top: -34px;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
right: 20px;
|
||||
left: unset;
|
||||
}
|
||||
|
||||
@media (max-width: 470px) {
|
||||
position: unset;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
composes: .g-type-body-small from global;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -19,7 +19,6 @@
|
|||
"@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",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
<svg width="122" height="49" viewBox="0 0 122 49" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M97.9999 4.58887L81.2565 14.0944V33.1055L97.9999 42.6111L114.743 33.1055V14.0944L97.9999 4.58887ZM105.46 25.4945L101 28.0283L95.6099 25.1438V31.2011L90.5432 34.3609V21.6956L94.5632 19.2766L100.14 22.1676V15.9824L105.473 12.839L105.46 25.4945Z" fill="#00CA8E"/>
|
||||
<path d="M24.1766 43.187C21.2049 43.1894 18.2776 42.4665 15.6487 41.0811C13.0197 39.6957 10.7686 37.6896 9.09079 35.237C7.41293 32.7843 6.35902 29.9593 6.02053 27.007C5.68203 24.0547 6.06918 21.0644 7.14838 18.2956C8.22758 15.5268 9.9662 13.0633 12.2134 11.1188C14.4605 9.17436 17.1483 7.8077 20.0433 7.13748C22.9384 6.46726 25.9533 6.51373 28.8264 7.27286C31.6994 8.03199 34.3438 9.48084 36.5299 11.4937V11.4937L32.1966 16.027C30.4738 14.4709 28.3367 13.4479 26.0442 13.082C23.7517 12.7161 21.4023 13.023 19.2807 13.9656C17.1592 14.9081 15.3566 16.4459 14.0914 18.3923C12.8263 20.3388 12.1529 22.6105 12.1529 24.932C12.1529 27.2535 12.8263 29.5252 14.0914 31.4716C15.3566 33.4181 17.1592 34.9558 19.2807 35.8984C21.4023 36.841 23.7517 37.1479 26.0442 36.782C28.3367 36.4161 30.4738 35.3931 32.1966 33.837L36.5299 38.3703C33.1637 41.4712 28.7533 43.1909 24.1766 43.187V43.187Z" fill="#E03875"/>
|
||||
<path d="M38.8693 34.0539C38.5733 34.0539 38.284 33.9661 38.0378 33.8016C37.7917 33.6372 37.5999 33.4034 37.4866 33.13C37.3733 32.8565 37.3437 32.5556 37.4014 32.2652C37.4592 31.9749 37.6017 31.7082 37.811 31.4989C38.0204 31.2896 38.287 31.1471 38.5774 31.0893C38.8677 31.0316 39.1686 31.0612 39.4421 31.1745C39.7156 31.2878 39.9493 31.4796 40.1138 31.7257C40.2782 31.9718 40.366 32.2612 40.366 32.5572C40.3651 32.9539 40.2072 33.3341 39.9267 33.6145C39.6462 33.895 39.266 34.053 38.8693 34.0539V34.0539Z" fill="#E03875"/>
|
||||
<path d="M24.0599 28.8836C23.2765 28.8869 22.5097 28.6576 21.8568 28.2247C21.2039 27.7918 20.6941 27.1748 20.3922 26.4519C20.0903 25.7291 20.0097 24.9328 20.1608 24.1641C20.3118 23.3954 20.6877 22.6888 21.2407 22.134C21.7937 21.5791 22.499 21.2008 23.2672 21.0472C24.0354 20.8935 24.8319 20.9714 25.5558 21.2709C26.2797 21.5704 26.8984 22.078 27.3335 22.7295C27.7686 23.3809 28.0005 24.1469 27.9999 24.9303C27.9981 25.976 27.5829 26.9785 26.8448 27.7191C26.1066 28.4597 25.1055 28.8784 24.0599 28.8836V28.8836Z" fill="#E03875"/>
|
||||
<path d="M40.5865 28.9537C40.2905 28.9537 40.0011 28.8659 39.755 28.7014C39.5089 28.537 39.317 28.3032 39.2038 28.0297C39.0905 27.7563 39.0609 27.4553 39.1186 27.165C39.1764 26.8747 39.3189 26.608 39.5282 26.3987C39.7375 26.1894 40.0042 26.0468 40.2945 25.9891C40.5849 25.9313 40.8858 25.961 41.1593 26.0743C41.4327 26.1875 41.6665 26.3794 41.8309 26.6255C41.9954 26.8716 42.0832 27.161 42.0832 27.457C42.0823 27.8537 41.9243 28.2338 41.6438 28.5143C41.3634 28.7948 40.9832 28.9528 40.5865 28.9537Z" fill="#E03875"/>
|
||||
<path d="M36.1365 28.7668C35.8398 28.7668 35.5498 28.6785 35.3033 28.5133C35.0568 28.3481 34.865 28.1134 34.7523 27.8389C34.6395 27.5645 34.6108 27.2627 34.67 26.9719C34.7291 26.6812 34.8733 26.4145 35.0843 26.2059C35.2952 25.9973 35.5635 25.856 35.8549 25.8002C36.1463 25.7443 36.4477 25.7764 36.7209 25.8922C36.9941 26.008 37.2267 26.2025 37.3891 26.4508C37.5515 26.6991 37.6365 26.9901 37.6332 27.2868C37.6288 27.6808 37.4692 28.0572 37.189 28.3343C36.9088 28.6114 36.5306 28.7668 36.1365 28.7668V28.7668Z" fill="#E03875"/>
|
||||
<path d="M40.5865 23.9103C40.2905 23.9103 40.0011 23.8226 39.755 23.6581C39.5089 23.4936 39.317 23.2599 39.2038 22.9864C39.0905 22.7129 39.0609 22.412 39.1186 22.1217C39.1764 21.8314 39.3189 21.5647 39.5282 21.3554C39.7375 21.146 40.0042 21.0035 40.2945 20.9458C40.5849 20.888 40.8858 20.9176 41.1593 21.0309C41.4327 21.1442 41.6665 21.336 41.8309 21.5822C41.9954 21.8283 42.0832 22.1176 42.0832 22.4137C42.0823 22.8103 41.9243 23.1905 41.6438 23.471C41.3634 23.7515 40.9832 23.9094 40.5865 23.9103Z" fill="#E03875"/>
|
||||
<path d="M36.1366 24.0805C35.8406 24.0805 35.5512 23.9927 35.3051 23.8283C35.059 23.6638 34.8672 23.4301 34.7539 23.1566C34.6406 22.8831 34.611 22.5822 34.6687 22.2918C34.7265 22.0015 34.869 21.7348 35.0783 21.5255C35.2876 21.3162 35.5543 21.1737 35.8446 21.1159C36.135 21.0582 36.4359 21.0878 36.7094 21.2011C36.9829 21.3144 37.2166 21.5062 37.3811 21.7523C37.5455 21.9984 37.6333 22.2878 37.6333 22.5838C37.6333 22.9808 37.4756 23.3615 37.1949 23.6421C36.9142 23.9228 36.5336 24.0805 36.1366 24.0805V24.0805Z" fill="#E03875"/>
|
||||
<path d="M38.9561 18.8768C38.6599 18.8774 38.3702 18.7902 38.1236 18.6261C37.8771 18.4621 37.6847 18.2286 37.5709 17.9552C37.4572 17.6817 37.427 17.3807 37.4844 17.0902C37.5418 16.7996 37.6841 16.5326 37.8932 16.323C38.1024 16.1133 38.3691 15.9704 38.6595 15.9124C38.9499 15.8544 39.251 15.8839 39.5247 15.997C39.7984 16.1102 40.0323 16.302 40.1969 16.5482C40.3615 16.7944 40.4494 17.0839 40.4494 17.3801C40.4494 17.7765 40.2922 18.1566 40.0122 18.4372C39.7322 18.7178 39.3524 18.8759 38.9561 18.8768Z" fill="#E03875"/>
|
||||
<line x1="61.5" y1="1" x2="61.5" y2="49" stroke="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.9 KiB |
|
|
@ -0,0 +1,15 @@
|
|||
<svg width="122" height="49" viewBox="0 0 122 49" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M92.5057 11.8063L103.492 18.0406V30.5158L92.5057 24.2782V11.8063Z" fill="#7B42BC"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M104.697 18.0406V30.5158L115.68 24.2782V11.8063L104.697 18.0406Z" fill="#7B42BC"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M80.3193 4.84448V17.3164L91.3027 23.554V11.0821L80.3193 4.84448Z" fill="#7B42BC"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M92.5057 38.1172L103.489 44.3548V31.9648V31.8829L92.5057 25.6453V38.1172Z" fill="#7B42BC"/>
|
||||
<path d="M24.1766 42.187C21.205 42.1894 18.2776 41.4665 15.6487 40.0811C13.0198 38.6957 10.7687 36.6896 9.09081 34.237C7.41295 31.7843 6.35904 28.9593 6.02055 26.007C5.68205 23.0547 6.06921 20.0644 7.1484 17.2956C8.2276 14.5268 9.96623 12.0633 12.2134 10.1188C14.4605 8.17436 17.1483 6.8077 20.0434 6.13748C22.9384 5.46726 25.9533 5.51373 28.8264 6.27286C31.6994 7.03199 34.3438 8.48084 36.5299 10.4937V10.4937L32.1966 15.027C30.4738 13.4709 28.3367 12.4479 26.0442 12.082C23.7517 11.7161 21.4023 12.023 19.2808 12.9656C17.1592 13.9081 15.3566 15.4459 14.0914 17.3923C12.8263 19.3388 12.1529 21.6105 12.1529 23.932C12.1529 26.2535 12.8263 28.5252 14.0914 30.4716C15.3566 32.4181 17.1592 33.9558 19.2808 34.8984C21.4023 35.841 23.7517 36.1479 26.0442 35.782C28.3367 35.4161 30.4738 34.3931 32.1966 32.837L36.5299 37.3703C33.1638 40.4712 28.7534 42.1909 24.1766 42.187V42.187Z" fill="#E03875"/>
|
||||
<path d="M38.8694 33.0539C38.5734 33.0539 38.284 32.9661 38.0379 32.8016C37.7918 32.6372 37.5999 32.4034 37.4866 32.13C37.3734 31.8565 37.3437 31.5556 37.4015 31.2652C37.4592 30.9749 37.6018 30.7082 37.8111 30.4989C38.0204 30.2896 38.2871 30.1471 38.5774 30.0893C38.8677 30.0316 39.1687 30.0612 39.4421 30.1745C39.7156 30.2878 39.9494 30.4796 40.1138 30.7257C40.2783 30.9718 40.3661 31.2612 40.3661 31.5572C40.3652 31.9539 40.2072 32.3341 39.9267 32.6145C39.6462 32.895 39.2661 33.053 38.8694 33.0539V33.0539Z" fill="#E03875"/>
|
||||
<path d="M24.0599 27.8836C23.2765 27.8869 22.5098 27.6576 21.8568 27.2247C21.2039 26.7918 20.6942 26.1748 20.3923 25.4519C20.0903 24.7291 20.0098 23.9328 20.1608 23.1641C20.3119 22.3954 20.6877 21.6888 21.2407 21.134C21.7938 20.5791 22.4991 20.2008 23.2672 20.0472C24.0354 19.8935 24.8319 19.9714 25.5558 20.2709C26.2797 20.5704 26.8984 21.078 27.3336 21.7295C27.7687 22.3809 28.0006 23.1469 27.9999 23.9303C27.9982 24.976 27.5829 25.9785 26.8448 26.7191C26.1067 27.4597 25.1056 27.8784 24.0599 27.8836V27.8836Z" fill="#E03875"/>
|
||||
<path d="M40.5865 27.9537C40.2905 27.9537 40.0011 27.8659 39.755 27.7014C39.5089 27.537 39.317 27.3032 39.2038 27.0297C39.0905 26.7563 39.0609 26.4553 39.1186 26.165C39.1764 25.8747 39.3189 25.608 39.5282 25.3987C39.7375 25.1894 40.0042 25.0468 40.2945 24.9891C40.5849 24.9313 40.8858 24.961 41.1593 25.0743C41.4327 25.1875 41.6665 25.3794 41.8309 25.6255C41.9954 25.8716 42.0832 26.161 42.0832 26.457C42.0823 26.8537 41.9243 27.2338 41.6438 27.5143C41.3634 27.7948 40.9832 27.9528 40.5865 27.9537Z" fill="#E03875"/>
|
||||
<path d="M36.1365 27.7668C35.8398 27.7668 35.5498 27.6785 35.3033 27.5133C35.0569 27.3481 34.8651 27.1134 34.7523 26.8389C34.6395 26.5645 34.6109 26.2627 34.67 25.9719C34.7291 25.6812 34.8733 25.4145 35.0843 25.2059C35.2953 24.9973 35.5635 24.856 35.8549 24.8002C36.1463 24.7443 36.4478 24.7764 36.7209 24.8922C36.9941 25.008 37.2267 25.2025 37.3891 25.4508C37.5516 25.6991 37.6365 25.9901 37.6332 26.2868C37.6288 26.6808 37.4692 27.0572 37.189 27.3343C36.9088 27.6114 36.5306 27.7668 36.1365 27.7668V27.7668Z" fill="#E03875"/>
|
||||
<path d="M40.5865 22.9103C40.2905 22.9103 40.0011 22.8226 39.755 22.6581C39.5089 22.4936 39.317 22.2599 39.2038 21.9864C39.0905 21.7129 39.0609 21.412 39.1186 21.1217C39.1764 20.8314 39.3189 20.5647 39.5282 20.3554C39.7375 20.146 40.0042 20.0035 40.2945 19.9458C40.5849 19.888 40.8858 19.9176 41.1593 20.0309C41.4327 20.1442 41.6665 20.336 41.8309 20.5822C41.9954 20.8283 42.0832 21.1176 42.0832 21.4137C42.0823 21.8103 41.9243 22.1905 41.6438 22.471C41.3634 22.7515 40.9832 22.9094 40.5865 22.9103Z" fill="#E03875"/>
|
||||
<path d="M36.1366 23.0805C35.8406 23.0805 35.5513 22.9927 35.3051 22.8283C35.059 22.6638 34.8672 22.4301 34.7539 22.1566C34.6406 21.8831 34.611 21.5822 34.6687 21.2918C34.7265 21.0015 34.869 20.7348 35.0783 20.5255C35.2877 20.3162 35.5543 20.1737 35.8447 20.1159C36.135 20.0582 36.4359 20.0878 36.7094 20.2011C36.9829 20.3144 37.2166 20.5062 37.3811 20.7523C37.5455 20.9984 37.6333 21.2878 37.6333 21.5838C37.6333 21.9808 37.4756 22.3615 37.1949 22.6421C36.9143 22.9228 36.5336 23.0805 36.1366 23.0805V23.0805Z" fill="#E03875"/>
|
||||
<path d="M38.9561 17.8768C38.6599 17.8774 38.3702 17.7902 38.1236 17.6261C37.8771 17.4621 37.6847 17.2286 37.5709 16.9552C37.4572 16.6817 37.427 16.3807 37.4844 16.0902C37.5418 15.7996 37.6841 15.5326 37.8932 15.323C38.1024 15.1133 38.3691 14.9704 38.6595 14.9124C38.9499 14.8544 39.251 14.8839 39.5247 14.997C39.7984 15.1102 40.0323 15.302 40.1969 15.5482C40.3615 15.7944 40.4494 16.0839 40.4494 16.3801C40.4494 16.7765 40.2922 17.1566 40.0122 17.4372C39.7322 17.7178 39.3524 17.8759 38.9561 17.8768Z" fill="#E03875"/>
|
||||
<line x1="61.5" y1="2.18557e-08" x2="61.5" y2="48" stroke="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.2 KiB |
|
|
@ -0,0 +1,12 @@
|
|||
<svg width="122" height="49" viewBox="0 0 122 49" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M79.627 7.93225L97.9336 44.0698L116.374 7.93225H79.627ZM100.114 15.1827H102.244V17.2805H100.114V15.1827ZM95.8703 23.564H93.7403V21.4695H95.8703V23.564ZM95.8703 20.4206H93.7403V18.3261H95.8703V20.4206ZM95.8703 17.2805H93.7403V15.1827H95.8703V17.2805ZM99.067 26.7074H96.9336V24.5998H99.067V26.7074ZM99.067 23.564H96.9336V21.4695H99.067V23.564ZM99.067 20.4206H96.9336V18.3261H99.067V20.4206ZM99.067 17.2805H96.9336V15.1827H99.067V17.2805ZM100.114 18.3261H102.244V20.4206H100.114V18.3261ZM100.114 23.5705V21.4695H102.244V23.564L100.114 23.5705Z" fill="black"/>
|
||||
<path d="M24.1766 42.187C21.205 42.1894 18.2776 41.4665 15.6487 40.0811C13.0198 38.6957 10.7687 36.6896 9.09082 34.237C7.41296 31.7843 6.35905 28.9593 6.02056 26.007C5.68206 23.0547 6.06922 20.0644 7.14841 17.2956C8.22761 14.5268 9.96623 12.0633 12.2134 10.1188C14.4605 8.17436 17.1483 6.8077 20.0434 6.13748C22.9384 5.46726 25.9533 5.51373 28.8264 6.27286C31.6994 7.03199 34.3438 8.48084 36.5299 10.4937V10.4937L32.1966 15.027C30.4738 13.4709 28.3367 12.4479 26.0442 12.082C23.7517 11.7161 21.4023 12.023 19.2808 12.9656C17.1592 13.9081 15.3566 15.4459 14.0915 17.3923C12.8263 19.3388 12.1529 21.6105 12.1529 23.932C12.1529 26.2535 12.8263 28.5252 14.0915 30.4716C15.3566 32.4181 17.1592 33.9558 19.2808 34.8984C21.4023 35.841 23.7517 36.1479 26.0442 35.782C28.3367 35.4161 30.4738 34.3931 32.1966 32.837L36.5299 37.3703C33.1638 40.4712 28.7534 42.1909 24.1766 42.187V42.187Z" fill="#E03875"/>
|
||||
<path d="M38.8694 33.0539C38.5734 33.0539 38.284 32.9661 38.0379 32.8016C37.7918 32.6372 37.5999 32.4034 37.4867 32.13C37.3734 31.8565 37.3438 31.5556 37.4015 31.2652C37.4592 30.9749 37.6018 30.7082 37.8111 30.4989C38.0204 30.2896 38.2871 30.1471 38.5774 30.0893C38.8677 30.0316 39.1687 30.0612 39.4422 30.1745C39.7156 30.2878 39.9494 30.4796 40.1138 30.7257C40.2783 30.9718 40.3661 31.2612 40.3661 31.5572C40.3652 31.9539 40.2072 32.3341 39.9267 32.6145C39.6463 32.895 39.2661 33.053 38.8694 33.0539V33.0539Z" fill="#E03875"/>
|
||||
<path d="M24.0599 27.8836C23.2765 27.8869 22.5098 27.6576 21.8569 27.2247C21.2039 26.7918 20.6942 26.1748 20.3923 25.4519C20.0903 24.7291 20.0098 23.9328 20.1609 23.1641C20.3119 22.3954 20.6878 21.6888 21.2408 21.134C21.7938 20.5791 22.4991 20.2008 23.2673 20.0472C24.0355 19.8935 24.832 19.9714 25.5559 20.2709C26.2798 20.5704 26.8985 21.078 27.3336 21.7295C27.7687 22.3809 28.0006 23.1469 27.9999 23.9303C27.9982 24.976 27.583 25.9785 26.8448 26.7191C26.1067 27.4597 25.1056 27.8784 24.0599 27.8836V27.8836Z" fill="#E03875"/>
|
||||
<path d="M40.5865 27.9537C40.2905 27.9537 40.0011 27.8659 39.755 27.7014C39.5089 27.537 39.317 27.3032 39.2038 27.0297C39.0905 26.7563 39.0609 26.4553 39.1186 26.165C39.1764 25.8747 39.3189 25.608 39.5282 25.3987C39.7375 25.1894 40.0042 25.0468 40.2945 24.9891C40.5849 24.9313 40.8858 24.961 41.1593 25.0743C41.4327 25.1875 41.6665 25.3794 41.8309 25.6255C41.9954 25.8716 42.0832 26.161 42.0832 26.457C42.0823 26.8537 41.9243 27.2338 41.6438 27.5143C41.3634 27.7948 40.9832 27.9528 40.5865 27.9537Z" fill="#E03875"/>
|
||||
<path d="M36.1366 27.7668C35.8398 27.7668 35.5498 27.6785 35.3033 27.5133C35.0569 27.3481 34.8651 27.1134 34.7523 26.8389C34.6395 26.5645 34.6109 26.2627 34.67 25.9719C34.7291 25.6812 34.8733 25.4145 35.0843 25.2059C35.2953 24.9973 35.5635 24.856 35.8549 24.8002C36.1463 24.7443 36.4478 24.7764 36.721 24.8922C36.9941 25.008 37.2267 25.2025 37.3891 25.4508C37.5516 25.6991 37.6365 25.9901 37.6332 26.2868C37.6288 26.6808 37.4692 27.0572 37.189 27.3343C36.9088 27.6114 36.5306 27.7668 36.1366 27.7668V27.7668Z" fill="#E03875"/>
|
||||
<path d="M40.5865 22.9103C40.2905 22.9103 40.0011 22.8226 39.755 22.6581C39.5089 22.4936 39.317 22.2599 39.2038 21.9864C39.0905 21.7129 39.0609 21.412 39.1186 21.1217C39.1764 20.8314 39.3189 20.5647 39.5282 20.3554C39.7375 20.146 40.0042 20.0035 40.2945 19.9458C40.5849 19.888 40.8858 19.9176 41.1593 20.0309C41.4327 20.1442 41.6665 20.336 41.8309 20.5822C41.9954 20.8283 42.0832 21.1176 42.0832 21.4137C42.0823 21.8103 41.9243 22.1905 41.6438 22.471C41.3634 22.7515 40.9832 22.9094 40.5865 22.9103Z" fill="#E03875"/>
|
||||
<path d="M36.1367 23.0805C35.8406 23.0805 35.5513 22.9927 35.3051 22.8283C35.059 22.6638 34.8672 22.4301 34.7539 22.1566C34.6406 21.8831 34.611 21.5822 34.6687 21.2918C34.7265 21.0015 34.869 20.7348 35.0784 20.5255C35.2877 20.3162 35.5543 20.1737 35.8447 20.1159C36.135 20.0582 36.4359 20.0878 36.7094 20.2011C36.9829 20.3144 37.2166 20.5062 37.3811 20.7523C37.5455 20.9984 37.6333 21.2878 37.6333 21.5838C37.6333 21.9808 37.4756 22.3615 37.195 22.6421C36.9143 22.9228 36.5336 23.0805 36.1367 23.0805V23.0805Z" fill="#E03875"/>
|
||||
<path d="M38.9561 17.8768C38.6599 17.8774 38.3702 17.7902 38.1236 17.6261C37.8771 17.4621 37.6847 17.2286 37.5709 16.9552C37.4572 16.6817 37.427 16.3807 37.4844 16.0902C37.5418 15.7996 37.6841 15.5326 37.8932 15.323C38.1024 15.1133 38.3691 14.9704 38.6595 14.9124C38.9499 14.8544 39.251 14.8839 39.5247 14.997C39.7984 15.1102 40.0323 15.302 40.1969 15.5482C40.3615 15.7944 40.4494 16.0839 40.4494 16.3801C40.4494 16.7765 40.2922 17.1566 40.0122 17.4372C39.7322 17.7178 39.3524 17.8759 38.9561 17.8768Z" fill="#E03875"/>
|
||||
<line x1="61.5" y1="2.18557e-08" x2="61.5" y2="48" stroke="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.2 KiB |
|
|
@ -1,11 +1,9 @@
|
|||
import UseCases from '@hashicorp/react-use-cases'
|
||||
import ProductFeaturesList from '@hashicorp/react-product-features-list'
|
||||
import Callouts from '@hashicorp/react-callouts'
|
||||
import LearnCallout from '@hashicorp/react-learn-callout'
|
||||
|
||||
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'
|
||||
|
|
@ -13,30 +11,100 @@ import CaseStudyCarousel from 'components/case-study-carousel'
|
|||
export default function HomePage() {
|
||||
return (
|
||||
<div className="p-home">
|
||||
<CtaHero />
|
||||
<Callouts
|
||||
layout="two-up"
|
||||
product="neutral"
|
||||
items={[
|
||||
<CtaHero
|
||||
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',
|
||||
},
|
||||
{
|
||||
type: 'none',
|
||||
text: 'Explore Tutorials',
|
||||
url: 'https://learn.hashicorp.com/consul',
|
||||
},
|
||||
]}
|
||||
cta={{
|
||||
title: 'Try HCP Consul',
|
||||
description:
|
||||
'A fully managed service mesh to discover and securely connect any service.',
|
||||
link: {
|
||||
text: 'Sign Up',
|
||||
url:
|
||||
'https://portal.cloud.hashicorp.com/sign-up?utm_source=consul_io&utm_content=hero',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
<CalloutBlade
|
||||
title="Consul Service Mesh"
|
||||
callouts={[
|
||||
{
|
||||
icon: require('./img/kubernetes/logo.svg?include'),
|
||||
heading: 'Consul Service Mesh on Kubernetes',
|
||||
content:
|
||||
'Use Helm to deploy and CRDs to configure Consul on Kubernetes.',
|
||||
title: 'For Kubernetes',
|
||||
description:
|
||||
'Install Consul using Helm charts and deploy using Custom Resource Definitions (CRDs).',
|
||||
eyebrow: 'Tutorial',
|
||||
link: {
|
||||
text: 'Get started',
|
||||
text: 'Install Consul on your Kubernetes cluster',
|
||||
url:
|
||||
'https://learn.hashicorp.com/tutorials/consul/service-mesh-deploy?utm_source=WEBSITE&utm_medium=WEB_IO&utm_offer=ARTICLE_PAGE&utm_content=DOCS',
|
||||
'https://learn.hashicorp.com/tutorials/consul/service-mesh-deploy?in=consul/gs-consul-service-mesh',
|
||||
},
|
||||
},
|
||||
{
|
||||
icon: require('./img/kubernetes/communication-arrows.svg?include'),
|
||||
heading: 'Consul as a Service Mesh',
|
||||
content:
|
||||
'Simplify, observe, and secure service to service communication for microservice architectures.',
|
||||
title: 'For Any Runtime',
|
||||
description:
|
||||
'Secure services and service-to-service communications and connect external services with terminating gateways.',
|
||||
eyebrow: 'Tutorial',
|
||||
link: {
|
||||
text: 'Read more',
|
||||
url: '/docs/connect',
|
||||
text: 'Consul Service Mesh',
|
||||
url:
|
||||
'https://learn.hashicorp.com/tutorials/consul/service-mesh-deploy-vms?in=consul/developer-mesh',
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<CalloutBlade
|
||||
title="Consul with HashiCorp Stack"
|
||||
callouts={[
|
||||
{
|
||||
icon: require('./img/stack/consul-and-nomad.svg?include'),
|
||||
title: 'Consul-Nomad Integration',
|
||||
description:
|
||||
'Secure Nomad jobs with Consul Service Mesh and use Traffic Splitting for zero-downtime, blue-green, canary deployments.',
|
||||
eyebrow: 'Tutorials',
|
||||
link: {
|
||||
text: 'Nomad’s integration with Consul',
|
||||
url:
|
||||
'https://learn.hashicorp.com/collections/nomad/integrate-consul',
|
||||
},
|
||||
},
|
||||
{
|
||||
icon: require('./img/stack/consul-and-terraform.svg?include'),
|
||||
title: 'Infrastructure Automation with Consul',
|
||||
description:
|
||||
'Use the Terraform provider ecosystem to drive relevant changes to your infrastructure based on Consul services.',
|
||||
eyebrow: 'Tutorials',
|
||||
link: {
|
||||
text: 'Consul Terraform Sync',
|
||||
url:
|
||||
'https://learn.hashicorp.com/tutorials/consul/consul-terraform-sync-intro?in=consul/network-infrastructure-automation',
|
||||
},
|
||||
},
|
||||
{
|
||||
icon: require('./img/stack/consul-and-vault.svg?include'),
|
||||
title: 'Secure Consul with Vault',
|
||||
description:
|
||||
'Integrate Consul with Vault and consul-template to securely store and rotate your encryption key and certificates.',
|
||||
eyebrow: 'Tutorials',
|
||||
link: {
|
||||
text: 'Enforce security with Consul and Vault',
|
||||
url:
|
||||
'https://learn.hashicorp.com/collections/consul/vault-secure',
|
||||
},
|
||||
},
|
||||
]}
|
||||
|
|
@ -45,18 +113,6 @@ export default function HomePage() {
|
|||
<ProductFeaturesList
|
||||
heading="Why Consul?"
|
||||
features={[
|
||||
{
|
||||
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/consul_features_arrows.svg'),
|
||||
link: {
|
||||
type: 'inbound',
|
||||
text: 'Learn more',
|
||||
url:
|
||||
'https://learn.hashicorp.com/collections/consul/kubernetes-deploy',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Secure, Multi-Cloud Service Networking',
|
||||
content:
|
||||
|
|
@ -104,41 +160,6 @@ export default function HomePage() {
|
|||
url: '/docs/integrate/partnerships',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Integrate and Extend With Kubernetes',
|
||||
content:
|
||||
'Quickly deploy Consul on Kubernetes leveraging Helm. Automatically inject sidecars for Kubernetes resources. Federate multiple clusters into a single service mesh.',
|
||||
icon: require('./img/why-consul/consul_features_kub.svg'),
|
||||
link: {
|
||||
type: 'inbound',
|
||||
text: 'Learn more',
|
||||
url:
|
||||
'https://learn.hashicorp.com/tutorials/consul/service-mesh-deploy?utm_source=WEBSITE&utm_medium=WEB_IO&utm_offer=ARTICLE_PAGE&utm_content=DOCS',
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<LearnCallout
|
||||
headline="Get hands-on experience with Consul"
|
||||
product="consul"
|
||||
items={[
|
||||
{
|
||||
title: 'Deploy HCP Consul with Terraform',
|
||||
category: 'Step-by-Step Tutorial',
|
||||
time: '12 mins',
|
||||
link:
|
||||
'https://learn.hashicorp.com/tutorials/cloud/terraform-hcp-consul-provider',
|
||||
image: require('./img/learn/getting-started.svg?url'),
|
||||
},
|
||||
{
|
||||
title: 'Migrate to Microservices on Kubernetes',
|
||||
category: 'Step-by-Step Tutorials',
|
||||
time: '45 mins',
|
||||
link:
|
||||
'https://learn.hashicorp.com/collections/consul/microservices',
|
||||
image: require('./img/learn/kubernetes.svg?url'),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,6 @@
|
|||
@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';
|
||||
|
|
|
|||
Loading…
Reference in New Issue