consul/website/components/cta-hero/index.jsx

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