status-im
/
consul
mirror of https://github.com/status-im/consul.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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 2021-06-10 16:31:55 -06:00 committed by hc-github-team-consul-core
parent 8bd29f735c
commit 6bc29b713f
8 changed files with 564 additions and 24940 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
website/components/homepage-hero/carousel.css
View File

@ -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;
}
}
}

59
website/components/homepage-hero/index.jsx Normal file
View File

@ -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>
)
}

19
website/components/homepage-hero/index.tsx
View File

@ -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>
)
}

72
website/components/homepage-hero/style.module.css
View File

@ -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; */
}
}
}

25188
website/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
website/package.json
View File

@ -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",

49
website/pages/home/index.jsx
View File

@ -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"

3
website/pages/style.css
View File

@ -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';