mirror of
https://github.com/hashicorp/vault.git
synced 2025-08-18 04:27:02 +02:00
56ae8bfc15
* website: upgrade global-styles packages * website: remove deprecated --site-max-width on community page * website: replace code-block showWindowBar with showChrome * website: replace old g-container with g-grid-container * website: backfill missing type styles * website: revert change to heading semantics * website: fix mismatched border colour * website: fix spacing issue * website: revert accidental replacement * website: clarify debt intention with comment * website: fix missing search styles, remove cruft * website: hide alert-banner on mobile * website: bump to latest patched dependencies
70 lines
1.8 KiB
JavaScript
70 lines
1.8 KiB
JavaScript
import Hero from '@hashicorp/react-hero'
|
|
import Button from '@hashicorp/react-button'
|
|
import styles from './HomepageHero.module.css'
|
|
import classNames from 'classnames'
|
|
|
|
/* A simple Facade wrapper around the Hero component */
|
|
export default function HomepageHero({
|
|
title,
|
|
description,
|
|
buttons,
|
|
uiVideo,
|
|
cliVideo,
|
|
}) {
|
|
return (
|
|
<div className={styles.homepageHero}>
|
|
<Hero
|
|
data={{
|
|
backgroundTheme: 'light',
|
|
buttons: buttons.slice(0, 2),
|
|
centered: false,
|
|
description: description,
|
|
product: 'vault',
|
|
title: title,
|
|
videos: [
|
|
{
|
|
name: 'UI',
|
|
playbackRate: 2,
|
|
src: [
|
|
{
|
|
srcType: 'mp4',
|
|
url: uiVideo,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'CLI',
|
|
playbackRate: 2,
|
|
src: [
|
|
{
|
|
srcType: 'mp4',
|
|
url: cliVideo,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
}}
|
|
/>
|
|
{/* A hack to inject a third link styled in tertiary style
|
|
this is very much a non-ideal way to handle this. */}
|
|
<div className={classNames('g-grid-container', styles.thirdLinkWrapper)}>
|
|
{buttons[2] && (
|
|
<div className="third-link">
|
|
<Button
|
|
// eslint-disable-next-line react/no-array-index-key
|
|
linkType={buttons[2].type}
|
|
theme={{
|
|
variant: 'tertiary-neutral',
|
|
brand: 'vault',
|
|
background: 'light',
|
|
}}
|
|
title={buttons[2].title}
|
|
url={buttons[2].url}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|