Alex Carpenter
ebb4d4e99f
* Updates <BrandedCta /> * Add <WhyBoundary /> section * Add <HowBoundaryWorks /> section * Updates <UseCases /> content * Adjust <HomepageHero /> content * Update <HowItWorks /> section * Content updates * Update icon directory * Update how it works title * Removes extra grid container * Adds lang attribute to document * Fix heading level usage * Content updates * Remove secure * Captialize works * Content update * Update use case links * Update background * CTA text * Convert ssh to svg * Convert to SVG * Coming soon to feature block
47 lines
1.4 KiB
React
47 lines
1.4 KiB
React
import styles from './branded-cta.module.css'
|
|
import Button from '@hashicorp/react-button'
|
|
|
|
export default function BrandedCta({ heading, content, links }) {
|
|
return (
|
|
<div className={styles.brandedCta}>
|
|
<div className={`g-grid-container ${styles.contentContainer}`}>
|
|
<h2
|
|
data-testid="heading"
|
|
className={`g-type-display-2 ${styles.heading}`}
|
|
>
|
|
{heading}
|
|
</h2>
|
|
<div className="content-and-links">
|
|
<p
|
|
data-testid="content"
|
|
className={`g-type-body-large ${styles.content}`}
|
|
>
|
|
{content}
|
|
</p>
|
|
<div data-testid="links" className={styles.links}>
|
|
{links.map((link, stableIdx) => {
|
|
const buttonVariant = stableIdx === 0 ? 'primary' : 'secondary'
|
|
const linkType = link.type || ''
|
|
return (
|
|
<Button
|
|
// eslint-disable-next-line react/no-array-index-key
|
|
key={stableIdx}
|
|
linkType={linkType}
|
|
theme={{
|
|
variant: buttonVariant,
|
|
brand: 'boundary',
|
|
background: 'light',
|
|
}}
|
|
title={link.text}
|
|
url={link.url}
|
|
icon={link.icon}
|
|
/>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|