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

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