e33ed2356e
* style: update gray brand colors * style: update brand colors * chore: upgrades base platform deps * style: updates learn callouts label color * style: icons to flat consul primary color * style: errand link styles * refactor(home): use react-learn-callout * chore; adds ts config, upgrades components * chore: upgrade deps chore: upgrade to latest component styles chore: upgrades nextjs-scripts * chore: fix-router * update deps, add new downloads page * chore: upgrade to stable deps chore: use npm 7 * style: home callouts body copy to gray-2 * chore: upgrade hashi-stack-menu * style: home feature icons update * chore: upgrade deps body copy colors * chore: upgrades alert banner * feat: updates favicon * style(downloads): adds pre-release and release candidate styles * fix(home): adds right padding to quote * content(home): swap assets * content(uses-cases): updates assets * chore: removes use cases icon override * content(use-cases): swap out svgs for pngs * content: copies asset * trying again with this asset * try putting asset in public * content(use-cases): updates mercedes case study aseset * chore: upgrades product download page prerelease * chore: updates product download page to stable * chore: updates favicon path Co-authored-by: Jeff Escalante <jescalan@users.noreply.github.com>
52 lines
1.5 KiB
JavaScript
52 lines
1.5 KiB
JavaScript
import Button from '@hashicorp/react-button'
|
|
import TextSplit from '@hashicorp/react-text-split'
|
|
import s from './style.module.css'
|
|
|
|
export default function CtaHero() {
|
|
return (
|
|
<div className={s.ctaHero}>
|
|
<TextSplit
|
|
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',
|
|
},
|
|
]}
|
|
linkStyle="buttons"
|
|
>
|
|
<Cta />
|
|
</TextSplit>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function Cta() {
|
|
return (
|
|
<div className={s.cta}>
|
|
<img src={require('./img/cta-image.jpg?url')} alt="Consul stack" />
|
|
<div className={s.ctaContent}>
|
|
<div className={s.ctaHeading}>
|
|
<h4 className="g-type-display-4">Try HCP Consul</h4>
|
|
</div>
|
|
<div className={s.ctaDescription}>
|
|
<p className="g-type-body-small">
|
|
Hosted on HashiCorp Cloud Platform, HCP Consul is a fully managed
|
|
service mesh that discovers and securely connects any service.
|
|
</p>
|
|
<Button
|
|
title="Sign Up"
|
|
linkType="inbound"
|
|
theme={{ variant: 'tertiary-neutral' }}
|
|
url="https://cloud.hashicorp.com/?utm_source=consul_io&utm_content=hero"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|