49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import Alert from '@hashicorp/react-alert'
|
|
import Button from '@hashicorp/react-button'
|
|
import s from './style.module.css'
|
|
|
|
export default function HomepageHero({
|
|
heading,
|
|
heroFeature,
|
|
subheading,
|
|
links,
|
|
alert,
|
|
}) {
|
|
return (
|
|
<div className={s.homepageHero}>
|
|
<div className={s.gridContainer}>
|
|
<div className={s.content}>
|
|
{alert ? (
|
|
<Alert
|
|
url={alert.url}
|
|
tag={alert.tag}
|
|
product="packer"
|
|
text={alert.text}
|
|
textColor="dark"
|
|
/>
|
|
) : null}
|
|
<h1 className={s.heading}>{heading}</h1>
|
|
<p className={s.subheading}>{subheading}</p>
|
|
<div className={s.links}>
|
|
{links.map((link, index) => (
|
|
<Button
|
|
key={link.text}
|
|
title={link.text}
|
|
linkType={link.type}
|
|
url={link.url}
|
|
theme={{
|
|
variant: index === 0 ? 'primary' : 'secondary',
|
|
brand: index === 0 ? 'packer' : 'neutral',
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className={s.heroFeature}>
|
|
<div className={s.heroFeatureFrame}>{heroFeature}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|