Peter M 6bc29b713f Homepage Hero Upgrade w/ Alert (#10377)
* updating hero with ecs info

* updates to hero

* Include back the Basic Hero styles

The basic hero is still used on the use case pages

* Revert the tsconfig changes

Nothing in the scope of this PR requires these changes!

* Remove the old Carousel CSS file

This is no longer needed as we're using the @hashicorp/react-hero
which comes with all the styling required for this carousel to work.

* Rename ConsulHero -> HomepageHero imports/exports

This will help prevent any confusion for future devs here -- this is a
convention we have that helps us from having to trace every import,
which helps us find the source of the component without actually having
to look at the import.

* Pin the deps

These were previously pinned to the exact version; including ^ will
allow minor & patch updates to sneak in, which normally shouldn't cause
an issue but we tend to be more conservative on dep upgrades.

* Revert unneeded changes to the document file

* Revert changes to app.js file

Not needed in the scope of this PR!

* Hard pin react-alert

* Remove unneeded css

Co-authored-by: Brandon Romano <brandon@hashicorp.com>
2021-06-10 22:32:37 +00:00

60 lines
1.4 KiB
JavaScript

import s from './style.module.css'
import Hero from '@hashicorp/react-hero'
export default function HomepageHero({
title,
description,
links,
uiVideo,
cliVideo,
alert,
image,
}) {
return (
<div className={s.consulHero}>
<Hero
data={{
product: 'consul',
alert: alert ? { ...alert, tagColor: 'consul-pink' } : null,
title: title,
description: description,
buttons: links,
backgroundTheme: 'light',
centered: false,
image: image ? { ...image } : null,
videos: [
...(uiVideo
? [
{
name: uiVideo.name ?? 'UI',
playbackRate: uiVideo.playbackRate,
src: [
{
srcType: uiVideo.srcType,
url: uiVideo.url,
},
],
},
]
: []),
...(cliVideo
? [
{
name: cliVideo.name ?? 'CLI',
playbackRate: cliVideo.playbackRate,
src: [
{
srcType: cliVideo.srcType,
url: cliVideo.url,
},
],
},
]
: []),
],
}}
/>
</div>
)
}