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

Merge pull request #9677 from hashicorp/km.hcp 

website: 2/2 Updates for HCP
This commit is contained in:
Brandon Romano 2021-02-02 08:39:52 -08:00 committed by hashicorp-ci
parent dc4ec94648
commit 1516acd6c4
10 changed files with 227 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
website/components/basic-hero/index.jsx
View File

@ -1,6 +1,4 @@
import Button from '@hashicorp/react-button'
import InlineSvg from '@hashicorp/react-inline-svg'
import RightArrowIcon from './img/right-arrow-icon.svg?include'
export default function BasicHero({
heading,
@ -19,13 +17,11 @@ export default function BasicHero({
<div className="links">
{links.slice(0, 2).map((link, stableIdx) => {
const buttonVariant = stableIdx === 0 ? 'primary' : 'secondary'
const linkType = link.type || 'inbound'
return (
<Button
// eslint-disable-next-line react/no-array-index-key
key={stableIdx}
linkType={linkType}
linkType={link.type}
theme={{
variant: buttonVariant,
brand,
@ -39,16 +35,17 @@ export default function BasicHero({
</div>
{links[2] && (
<div className="third-link">
<a
href={links[2].url}
>
<span className="g-type-buttons-and-standalone-links">
{links[2].text}
</span>
<span className="icon">
<InlineSvg src={RightArrowIcon} />
</span>
</a>
<Button
// eslint-disable-next-line react/no-array-index-key
linkType={links[2].type}
theme={{
variant: 'tertiary-neutral',
brand,
background: 'light',
}}
title={links[2].text}
url={links[2].url}
/>
</div>
)}
</>

11
website/components/basic-hero/style.css
View File

@ -49,16 +49,11 @@
display: flex;
justify-content: center;
margin-top: 32px;
& a {
display: flex;
align-items: center;
color: var(--gray-4);
& .icon {
margin-left: 8px;
height: 24px;
color: var(--gray-3);
}
& svg * {
stroke: var(--gray-2) !important;
}
}

16
website/components/enterprise-comparison/consul/index.jsx
View File

@ -10,11 +10,13 @@ export default function ConsulEnterpriseComparison() {
imageUrl: require('./img/consul-oss.svg?url'),
description:
'Consul Open Source enables individuals to discover services and securely manage connections between them across cloud, on-prem, and hybrid environments.',
link: {
links: [
{
text: 'View Open Source Features',
url: 'https://www.hashicorp.com/products/consul/pricing/',
type: 'outbound',
},
],
}}
itemTwo={{
title: 'Organizational Complexity',
@ -22,11 +24,19 @@ export default function ConsulEnterpriseComparison() {
imageUrl: require('./img/consul-enterprise.svg?url'),
description:
'Consul Enterprise provides the foundation for organizations to build an enterprise-ready service networking environment for multiple teams by enabling governance capabilities.',
link: {
text: 'View Enterprise Features',
links: [
{
text: 'View Cloud Features',
url:
'https://cloud.hashicorp.com/?utm_source=consul_io&utm_content=ent_comparison',
type: 'outbound',
},
{
text: 'View Self-Managed Features',
url: 'https://www.hashicorp.com/products/consul/pricing/',
type: 'outbound',
},
],
}}
brand="consul"
/>

22
website/components/enterprise-comparison/index.jsx
View File

@ -21,13 +21,18 @@ export default function EnterpriseComparison({
<h4 className="g-type-display-4">{itemOne.title}</h4>
<p className="g-type-body">{itemOne.description}</p>
{itemOne.links.map((link) => (
<div key="stable">
<Button
url={itemOne.link.url}
title={itemOne.link.text}
linkType={itemOne.link.type}
url={link.url}
title={link.text}
linkType={link.type}
theme={{ variant: 'tertiary', brand }}
/>
</div>
))}
</div>
<div className="spacer">
<div className="vertical-spacer"></div>
<InlineSvg className="arrow" src={ArrowIcon} />
@ -38,13 +43,18 @@ export default function EnterpriseComparison({
<h4 className="g-type-display-4">{itemTwo.title}</h4>
<p className="g-type-body">{itemTwo.description}</p>
{itemTwo.links.map((link) => (
<div key="stable">
<Button
url={itemTwo.link.url}
title={itemTwo.link.text}
linkType={itemTwo.link.type}
key="stable"
url={link.url}
title={link.text}
linkType={link.type}
theme={{ variant: 'tertiary', brand }}
/>
</div>
))}
</div>
</div>
</div>
</div>

82
website/components/hcp-callout-section/HCPCalloutSection.module.css Normal file
View File

@ -0,0 +1,82 @@
.hcpCalloutSection {
composes: g-grid-container from global;
padding-top: 88px;
padding-bottom: 88px;
& .header {
display: flex;
justify-content: center;
margin-bottom: 88px;
@media (max-width: 1120px) {
margin-bottom: 48px;
}
& h2 {
margin: 0;
text-align: center;
max-width: 450px;
}
}
& .content {
display: flex;
flex-direction: row;
justify-content: space-between;
@media (max-width: 1120px) {
flex-direction: column-reverse;
& .info {
margin-top: 32px;
}
}
& .info {
max-width: 488px;
margin-right: 32px;
& h1 {
margin-top: 0;
margin-bottom: 8px;
}
& .chin {
color: var(--gray-4);
}
& .description {
color: var(--gray-4);
margin-top: 28px;
margin-bottom: 0;
@media (max-width: 900px) {
margin-top: 18px;
}
}
& .links {
margin-top: 32px;
display: inline-flex;
flex-direction: column;
& > * {
&:not(:last-child) {
margin-bottom: 24px;
}
}
}
}
& > img {
align-self: center;
margin-right: -48px;
@media (max-width: 670px) {
max-width: 100%;
}
}
}
}
.chin {
composes: g-type-label from global;
}
.description {
composes: g-type-long-body from global;
}

44
website/components/hcp-callout-section/index.jsx Normal file
View File

@ -0,0 +1,44 @@
import styles from './HCPCalloutSection.module.css'
import Button from '@hashicorp/react-button'
export default function HcpCalloutSection({
id,
header,
title,
description,
chin,
image,
links,
}) {
return (
<div className={styles.hcpCalloutSection} id={id}>
<div className={styles.header}>
<h2>{header}</h2>
</div>
<div className={styles.content}>
<div className={styles.info}>
<h1>{title}</h1>
<span className={styles.chin}>{chin}</span>
<p className={styles.description}>{description}</p>
<div className={styles.links}>
{links.map((link, index) => {
const variant = index === 0 ? 'primary' : 'tertiary'
return (
<div key={link.text}>
<Button
title={link.text}
linkType={link.type}
url={link.url}
theme={{ variant, brand: 'neutral', background: 'light' }}
/>
</div>
)
})}
</div>
</div>
<img alt={title} src={image} />
</div>
</div>
)
}

12
website/components/subnav/index.jsx
View File

@ -6,13 +6,23 @@ export default function ConsulSubnav() {
const router = useRouter()
return (
<Subnav
hideGithubStars={true}
titleLink={{
text: 'consul',
url: '/',
}}
ctaLinks={[
{ text: 'GitHub', url: 'https://www.github.com/hashicorp/consul' },
{
text: 'GitHub',
url: 'https://www.github.com/hashicorp/consul',
},
{ text: 'Download', url: '/downloads' },
{
text: 'Try Cloud',
url:
'https://cloud.hashicorp.com/?utm_source=consul_io&utm_content=top_nav',
},
]}
currentPath={router.pathname}
menuItemsAlign="right"

10
website/data/alert-banner.js
View File

@ -2,12 +2,12 @@ export const ALERT_BANNER_ACTIVE = true
// https://github.com/hashicorp/web-components/tree/master/packages/alert-banner
export default {
tag: 'Webinar',
tag: 'Announcement',
url:
'https://www.hashicorp.com/events/webinars/cloud-service-networking-secrets-management',
text: 'Getting Started with Service Networking & Secrets Management on Cloud',
linkText: 'Register Now',
'https://cloud.hashicorp.com/?utm_source=consul_io&utm_content=alert_banner',
text: 'HashiCorp Consul is now generally available on HCP',
linkText: 'Learn More',
// Set the `expirationDate prop with a datetime string (e.g. `2020-01-31T12:00:00-07:00`)
// if you'd like the component to stop showing at or after a certain date
expirationDate: '2021-02-09T11:59:00-05:00',
expirationDate: '2021-02-14T11:59:00-05:00',
}

1
website/pages/home/img/hcp-consul.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

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

@ -1,11 +1,11 @@
import UseCases from '@hashicorp/react-use-cases'
import BasicHero from '../../components/basic-hero'
import ConsulEnterpriseComparison from '../../components/enterprise-comparison/consul'
import CloudOfferingsList from '../../components/cloud-offerings-list'
import PrefooterCTA from '../../components/prefooter-cta'
import LearnCallout from '../../components/learn-callout'
import CaseStudyCarousel from '../../components/case-study-carousel'
import ProductFeaturesList from '@hashicorp/react-product-features-list'
import HcpCalloutSection from 'components/hcp-callout-section'
import MiniCTA from '../../components/mini-cta'
export default function HomePage() {
@ -19,18 +19,17 @@ export default function HomePage() {
{
text: 'Get Started',
url: 'https://learn.hashicorp.com/consul',
type: 'outbound',
},
{
text: 'Download',
text: 'Try Cloud',
url:
'https://cloud.hashicorp.com/?utm_source=consul_io&utm_content=hero',
},
{
text: 'Download CLI',
url: '/downloads',
type: 'download',
},
{
text: 'Learn more about Consul cloud offerings',
url: '/#cloud-offerings',
type: 'inbound',
},
]}
backgroundImage
/>
@ -93,8 +92,7 @@ export default function HomePage() {
title: 'Secure Consul with Vault',
category: 'Step-by-Step Tutorials',
time: '45 mins',
link:
'https://learn.hashicorp.com/collections/consul/vault-secure',
link: 'https://learn.hashicorp.com/collections/consul/vault-secure',
image: require('./img/learn/Vault.svg?url'),
},
]}
@ -221,40 +219,25 @@ export default function HomePage() {
/>
</div>
<section
<HcpCalloutSection
id="cloud-offerings"
className="cloud-offerings g-grid-container"
>
<h2 className="g-type-display-2">
Learn more about Consul cloud offerings
</h2>
<CloudOfferingsList
offerings={[
title="HCP Consul"
chin="Available on AWS"
description="A fully managed service mesh to discover and securely connect any service."
image={require('./img/hcp-consul.svg?url')}
links={[
{
image: require('./img/cloud/hcs.jpg?url'),
eyebrow: 'General Availability',
title: 'HashiCorp Consul Service on Azure',
description: 'Native Azure Experience',
link: {
text: 'Get Started',
url: 'https://learn.hashicorp.com/consul/hcs-azure/deploy',
type: 'outbound',
},
text: 'Learn More',
url:
'https://cloud.hashicorp.com/?utm_source=consul_io&utm_content=hcp_consul_detail',
},
{
image: require('./img/cloud/hcp.jpg?url'),
eyebrow: 'General Availability',
title: 'HCP Consul on AWS',
description: 'HashiCorp Cloud Platform',
link: {
text: 'Get Started',
url: 'https://portal.cloud.hashicorp.com',
type: 'outbound',
},
text: 'Looking for Consul Service on Azure?',
url: 'https://www.hashicorp.com/products/consul/service-on-azure',
type: 'inbound',
},
]}
/>
</section>
<ConsulEnterpriseComparison />
<PrefooterCTA />