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>
This commit is contained in:
Peter M
GitHub
parent
e01ea816c2
commit
652a782d57
|
|
@ -1,111 +0,0 @@
|
|||
.carousel {
|
||||
& .videos {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
& .video-wrapper {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
transform: translateX(-60px);
|
||||
line-height: 0;
|
||||
box-shadow: 0 14.3254px 14.3254px rgba(37, 41, 55, 0.16);
|
||||
|
||||
&.is-active {
|
||||
opacity: 1;
|
||||
padding-top: calc((100% * 0.63569) + 28px);
|
||||
transform: translateX(0);
|
||||
transition: opacity 0.5s, transform 0.5s;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
|
||||
&.is-deactivating {
|
||||
opacity: 0;
|
||||
transform: translateX(90px);
|
||||
transition-timing-function: ease-in;
|
||||
}
|
||||
}
|
||||
|
||||
& .bar {
|
||||
align-items: center;
|
||||
background: #0e1016;
|
||||
border-radius: 4px 4px 0 0;
|
||||
display: flex;
|
||||
height: 28px;
|
||||
padding: 0 12px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
& span {
|
||||
background: #252937;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
height: 9px;
|
||||
margin-right: 7px;
|
||||
width: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
& .video {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
& video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
& .controls {
|
||||
display: flex;
|
||||
padding: 28px 20px 0;
|
||||
|
||||
@media (max-width: 1119px) {
|
||||
padding: 37px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
& .control {
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
|
||||
&:hover .control-hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
& + .control {
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
& .control-hover {
|
||||
transition: 0.3s ease-in-out;
|
||||
transition-property: transform;
|
||||
}
|
||||
}
|
||||
|
||||
& .progress-bar {
|
||||
background-color: var(--gray-2);
|
||||
height: 2px;
|
||||
margin-top: 4px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
& span {
|
||||
background: var(--white);
|
||||
display: block;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
transition: width linear 0.2s;
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
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>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import TextSplit from '@hashicorp/react-text-split'
|
||||
import VideoCarousel from '@hashicorp/react-hero/carousel'
|
||||
import s from './style.module.css'
|
||||
|
||||
export default function HomepageHero({ title, description, links, videos }) {
|
||||
return (
|
||||
<div className={s.homepageHero}>
|
||||
<TextSplit
|
||||
product="consul"
|
||||
heading={title}
|
||||
content={description}
|
||||
links={links}
|
||||
linkStyle="buttons"
|
||||
>
|
||||
<VideoCarousel videos={videos} />
|
||||
</TextSplit>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,66 +1,4 @@
|
|||
.homepageHero {
|
||||
& :global(.g-text-split) :global(.g-grid-container) {
|
||||
@media (width < 1120px) {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
& > div {
|
||||
@media (768px < width < 1120px) {
|
||||
width: 40em;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@media (width < 1120px) {
|
||||
margin-bottom: 64px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
& p {
|
||||
@media (width < 1120px) {
|
||||
margin: 16px auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* HACK:
|
||||
* Overrides the H2 with styling from
|
||||
* our global g-type-display-1 class.
|
||||
*
|
||||
* This was because there's no way to
|
||||
* override the heading in <TextSplit />
|
||||
* with the designed h1 styling.
|
||||
*
|
||||
* TODO:
|
||||
* Address this at the component
|
||||
* level or revert to just using h2
|
||||
* as is default.
|
||||
*/
|
||||
& h2 {
|
||||
font-size: 2.125rem;
|
||||
letter-spacing: -0.008em;
|
||||
line-height: 1.265em;
|
||||
|
||||
@media (--medium-up) {
|
||||
font-size: 2.625rem;
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1.19em;
|
||||
}
|
||||
|
||||
@media (--large) {
|
||||
font-size: 3.125rem;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
& p {
|
||||
max-width: 440px;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.55em;
|
||||
}
|
||||
}
|
||||
|
||||
.consulHero {
|
||||
/* Customize the branding */
|
||||
& :global(.carousel .controls .control) {
|
||||
color: var(--gray-2);
|
||||
|
|
@ -71,8 +9,10 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
& :global(.video-wrapper.is-active) {
|
||||
/* Padding % modifier differs slightly from react-hero to accommodate video heights */
|
||||
padding-top: calc((100% * 0.57) + 28px);
|
||||
& :global(.g-hero .carousel) {
|
||||
& :global(.video-wrapper.is-active) {
|
||||
/* Padding % modifier differs slightly from react-hero to accommodate video heights */
|
||||
padding-top: calc((100% * 0.57) + 28px); /* !important; */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -7,6 +7,7 @@
|
|||
"@hashicorp/mktg-global-styles": "3.0.1",
|
||||
"@hashicorp/mktg-logos": "1.0.2",
|
||||
"@hashicorp/nextjs-scripts": "18.1.0",
|
||||
"@hashicorp/react-alert": "5.0.0",
|
||||
"@hashicorp/react-alert-banner": "6.1.1",
|
||||
"@hashicorp/react-button": "5.0.1",
|
||||
"@hashicorp/react-call-to-action": "3.0.1",
|
||||
|
|
@ -16,7 +17,7 @@
|
|||
"@hashicorp/react-featured-slider": "4.0.0",
|
||||
"@hashicorp/react-hashi-stack-menu": "2.0.3",
|
||||
"@hashicorp/react-head": "3.0.2",
|
||||
"@hashicorp/react-hero": "7.1.1",
|
||||
"@hashicorp/react-hero": "7.2.1",
|
||||
"@hashicorp/react-image": "4.0.1",
|
||||
"@hashicorp/react-inline-svg": "6.0.1",
|
||||
"@hashicorp/react-learn-callout": "^1.0.2",
|
||||
|
|
|
|||
|
|
@ -13,45 +13,38 @@ export default function HomePage({ serviceMeshIngressGatewayCode }) {
|
|||
return (
|
||||
<div className="p-home">
|
||||
<HomepageHero
|
||||
alert={{
|
||||
url: 'https://www.consul.io/docs/ecs',
|
||||
text: 'Consul service mesh now available on ECS',
|
||||
tag: 'Tech Preview',
|
||||
}}
|
||||
title="Service Mesh for any runtime or cloud"
|
||||
description="Consul automates networking for simple and secure application delivery."
|
||||
links={[
|
||||
{
|
||||
type: 'none',
|
||||
text: 'Try HCP Consul',
|
||||
external: false,
|
||||
title: 'Try HCP Consul',
|
||||
url:
|
||||
'https://portal.cloud.hashicorp.com/sign-up?utm_source=docs&utm_content=consul_hero',
|
||||
},
|
||||
{
|
||||
type: 'none',
|
||||
text: 'Download',
|
||||
external: false,
|
||||
title: 'Download',
|
||||
url: '/downloads',
|
||||
},
|
||||
]}
|
||||
videos={[
|
||||
{
|
||||
name: 'UI',
|
||||
playbackRate: 2,
|
||||
src: [
|
||||
{
|
||||
srcType: 'mp4',
|
||||
url:
|
||||
'https://www.datocms-assets.com/2885/1621637919-consul-ui.mp4',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'CLI',
|
||||
playbackRate: 2,
|
||||
src: [
|
||||
{
|
||||
srcType: 'mp4',
|
||||
url:
|
||||
'https://www.datocms-assets.com/2885/1621637930-consul-cli.mp4',
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
uiVideo={{
|
||||
name: 'UI',
|
||||
playbackRate: 2,
|
||||
srcType: 'mp4',
|
||||
url: 'https://www.datocms-assets.com/2885/1621637919-consul-ui.mp4',
|
||||
}}
|
||||
cliVideo={{
|
||||
name: 'CLI',
|
||||
playbackRate: 2,
|
||||
srcType: 'mp4',
|
||||
url: 'https://www.datocms-assets.com/2885/1621637930-consul-cli.mp4',
|
||||
}}
|
||||
/>
|
||||
<StaticDynamicDiagram
|
||||
heading="Service-based networking for dynamic infrastructure"
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@
|
|||
}
|
||||
|
||||
@import '~@hashicorp/react-alert-banner/style.css';
|
||||
@import '~@hashicorp/react-alert/style.css';
|
||||
@import '~@hashicorp/react-hero/style.css';
|
||||
@import '~@hashicorp/react-button/styles/index.css';
|
||||
@import '~@hashicorp/react-callouts/style.css';
|
||||
@import '~@hashicorp/react-call-to-action/style.css';
|
||||
|
|
@ -35,7 +37,6 @@
|
|||
@import '../components/cloud-offerings-list/style.css';
|
||||
@import '../components/enterprise-comparison/style.css';
|
||||
@import '../components/footer/style.css';
|
||||
@import '../components/homepage-hero/carousel.css';
|
||||
@import '../components/mini-cta/style.css';
|
||||
@import '../components/use-cases-layout/style.css';
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue