39 lines
1022 B
JavaScript
39 lines
1022 B
JavaScript
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({ title, description, links, cta }) {
|
|
return (
|
|
<div className={s.ctaHero}>
|
|
<TextSplit
|
|
product="consul"
|
|
heading={title}
|
|
content={description}
|
|
links={links}
|
|
linkStyle="buttons"
|
|
>
|
|
<CTA title={cta.title} description={cta.description} link={cta.link} />
|
|
</TextSplit>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function CTA({ title, description, link }) {
|
|
return (
|
|
<div className={s.cta}>
|
|
<InlineSvg className={s.stackIcon} src={ConsulStack} />
|
|
<h3 className="g-type-display-3">{title}</h3>
|
|
<p className={s.description}>{description}</p>
|
|
<Button
|
|
title={link.text}
|
|
url={link.url}
|
|
theme={{
|
|
brand: 'neutral',
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|