website: update homepage with focus on k8s

This commit is contained in:
Noel Quiles 2021-03-26 09:38:39 -04:00 committed by Mike Wickett
parent 68b13f4c70
commit 05f1218787
10 changed files with 272 additions and 30 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 132 KiB

View File

@ -0,0 +1,47 @@
import Button from '@hashicorp/react-button'
import TextSplit from '@hashicorp/react-text-split'
import s from './style.module.css'
export default function CtaHero() {
return (
<div className={s.ctaHero}>
<TextSplit
heading="Service Mesh for any runtime or cloud"
content="Consul automates networking for simple and secure application delivery."
brand="consul"
links={[
{ type: 'none', text: 'Download Consul', url: '/downloads' },
{ type: 'none', text: 'Explore Tutorials', url: 'https://learn.hashicorp.com/consul' },
]}
linkStyle="buttons"
>
<Cta />
</TextSplit>
</div>
)
}
function Cta() {
return (
<div className={s.cta}>
<img src={require('./img/cta-image.jpg?url')} alt="Consul stack" />
<div className={s.ctaContent}>
<div className={s.ctaHeading}>
<h4 className="g-type-display-4">Try HCP Consul</h4>
</div>
<div className={s.ctaDescription}>
<p className="g-type-body-small">
Hosted on HashiCorp Cloud Platform, HCP Consul is a fully managed
service mesh that discovers and securely connects any service.
</p>
<Button
title="Sign Up"
linkType="inbound"
theme={{ variant: 'tertiary-neutral' }}
url="https://cloud.hashicorp.com/?utm_source=consul_io&utm_content=hero"
/>
</div>
</div>
</div>
)
}

View File

@ -0,0 +1,98 @@
.ctaHero {
& :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;
}
}
}
.cta {
padding: 24px;
padding-bottom: 51px;
border: 1px solid var(--gray-5);
& img {
max-height: 50%;
max-width: 100%;
margin-bottom: 36px;
}
}
.ctaContent {
display: flex;
@media (width < 520px) {
flex-direction: column;
}
& .ctaHeading {
@media (width >= 520px) {
width: 40%;
}
& h4 {
margin-top: 0;
@media (width >= 520px) {
width: 100px;
}
}
}
& p {
margin-top: 0;
margin-bottom: 24px;
}
}

View File

@ -1631,6 +1631,37 @@
}
}
},
"@hashicorp/react-callouts": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/@hashicorp/react-callouts/-/react-callouts-7.0.0.tgz",
"integrity": "sha512-Jy7tEgf2hi7fuXMjKLjs58+hkYjcNGxPcWGL6E4MQdTxKuYv4WjEukCrkMWr2Ke3d8cWPfnKF2+gZkBJq2OuuA==",
"requires": {
"@hashicorp/react-button": "^5.0.0",
"@hashicorp/react-inline-svg": "^1.0.2"
},
"dependencies": {
"@hashicorp/react-button": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/@hashicorp/react-button/-/react-button-5.0.0.tgz",
"integrity": "sha512-kzwmCtCKpZX+3TihBOyEakQ9cSlmO4wIZUDRtDASleza/J7KL9ANU22baqNXpV9plCXVHlKJOeMt9t74LLOIgg==",
"requires": {
"@hashicorp/react-inline-svg": "^1.0.0",
"classnames": "^2.2.6",
"slugify": "1.3.6"
}
},
"@hashicorp/react-inline-svg": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@hashicorp/react-inline-svg/-/react-inline-svg-1.0.2.tgz",
"integrity": "sha512-AAFnBslSTgnEr++dTbMn3sybAqvn7myIj88ijGigF6u11eSRiV64zqEcyYLQKWTV6dF4AvYoxiYC6GSOgiM0Yw=="
},
"slugify": {
"version": "1.3.6",
"resolved": "https://registry.npmjs.org/slugify/-/slugify-1.3.6.tgz",
"integrity": "sha512-wA9XS475ZmGNlEnYYLPReSfuz/c3VQsEMoU43mi6OnKMCdbnFXd4/Yg7J0lBv8jkPolacMpOrWEaoYxuE1+hoQ=="
}
}
},
"@hashicorp/react-code-block": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/@hashicorp/react-code-block/-/react-code-block-3.0.3.tgz",

View File

@ -9,6 +9,7 @@
"@hashicorp/react-alert-banner": "5.0.0",
"@hashicorp/react-button": "4.0.0",
"@hashicorp/react-call-to-action": "1.0.3",
"@hashicorp/react-callouts": "^7.0.0",
"@hashicorp/react-docs-page": "10.4.0",
"@hashicorp/react-featured-slider": "1.1.10",
"@hashicorp/react-hashi-stack-menu": "^1.1.0",

View File

@ -0,0 +1 @@
<svg width="50" height="49" viewBox="0 0 50 49" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M39.3 25.03l5.64-5.17-5.64-5.17M20.03 34.9l5.17 5.64 5.17-5.64M11.1 14.69l-5.64 5.17 5.64 5.17" stroke="#000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M26.45 2a1.25 1.25 0 00-2.5 0h2.5zM6.4 21.11h18.8v-2.5H6.4v2.5zm18.8 0H44v-2.5H25.2v2.5zm-1.25-1.25V39.6h2.5V19.86h-2.5zm2.5 0V2h-2.5v17.86h2.5z" fill="#000"/></svg>

After

Width:  |  Height:  |  Size: 456 B

View File

@ -0,0 +1 @@
<svg width="51" height="51" viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.46 21.044l.31-5.557a10.707 10.707 0 00-6.291 3.058l4.489 3.23.009-.004c.152.113.339.179.542.179a.926.926 0 00.919-.894l.022-.012zM32.639 18.548a10.78 10.78 0 00-6.253-3.06l.31 5.547.004.002c.008.191.074.38.2.541a.912.912 0 001.263.172l.015.007 4.46-3.21zM19.95 24.342l-4.1-3.721a11.043 11.043 0 00-1.524 6.906l5.253-1.54.005-.017a.92.92 0 00.477-.32.943.943 0 00-.116-1.285l.005-.023zM35.618 23.957a11.139 11.139 0 00-1.345-3.334l-4.076 3.703.002.012a.929.929 0 00-.292.495c-.11.49.18.978.653 1.11l.005.022 5.28 1.544a11.19 11.19 0 00-.227-3.552zM25.915 24.63h-1.68l-1.045 1.322.375 1.652 1.512.738 1.507-.736.375-1.652-1.044-1.324zM29.831 29.177a.905.905 0 00-.212-.016.909.909 0 00-.352.093.94.94 0 00-.446 1.21l-.007.01 2.11 5.172a10.898 10.898 0 004.35-5.548l-5.434-.932-.009.011zM21.375 29.91a.924.924 0 00-1.064-.71l-.009-.012-5.388.928a10.94 10.94 0 004.338 5.51l2.087-5.12-.016-.02a.938.938 0 00.052-.576zM25.474 31.52a.9.9 0 00-.43-.093.92.92 0 00-.78.493h-.004l-2.649 4.862a10.64 10.64 0 005.89.308 10.9 10.9 0 001.061-.3l-2.656-4.872h-.02a.921.921 0 00-.412-.398z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M23.626 1.135a3.317 3.317 0 012.895 0L43.96 9.586a3.366 3.366 0 011.804 2.277l4.308 18.996a3.378 3.378 0 01-.644 2.84L37.363 48.934a3.316 3.316 0 01-2.607 1.26l-19.354.005a3.317 3.317 0 01-2.607-1.263L.726 33.705a3.37 3.37 0 01-.642-2.84l4.302-18.997A3.338 3.338 0 016.19 9.591l17.436-8.456zm.407 7.313c0-.65.467-1.177 1.044-1.177.576 0 1.043.527 1.043 1.177l.002.107c.001.068.003.139 0 .194-.009.247-.047.456-.086.67-.02.109-.04.22-.056.337l-.007.056c-.085.715-.156 1.31-.111 1.866.035.246.162.363.284.476l.057.053c.003.077.015.332.024.474 3.319.299 6.4 1.84 8.664 4.248l.397-.287c.016 0 .034.002.054.004.15.011.4.03.58-.074.455-.312.871-.741 1.37-1.255l.036-.038c.079-.085.15-.168.222-.25.142-.165.28-.327.467-.49.047-.04.11-.09.168-.137l.064-.05c.501-.406 1.197-.363 1.557.094.36.457.244 1.157-.257 1.562l-.075.063c-.054.044-.11.091-.154.125-.195.146-.38.245-.567.346a7.559 7.559 0 00-.3.168h-.002c-.623.391-1.14.715-1.55 1.107-.169.182-.18.356-.191.523a3.148 3.148 0 01-.006.076l-.158.145c-.074.067-.156.14-.212.193a13.819 13.819 0 011.955 4.588c.379 1.67.438 3.34.219 4.945l.421.125.03.044c.084.124.228.34.421.415.532.17 1.13.234 1.85.31l.021.003c.118.01.23.014.342.019.212.008.421.017.66.062.053.01.123.028.19.045l.113.028c.615.15 1.01.724.883 1.29-.127.566-.728.91-1.347.774l-.008-.001a.08.08 0 01-.008-.001l-.02-.007-.1-.02a2.895 2.895 0 01-.17-.039 4.26 4.26 0 01-.622-.234c-.102-.045-.205-.09-.314-.133l-.032-.011c-.676-.246-1.24-.451-1.788-.532-.244-.02-.385.08-.52.175l-.064.045a15.51 15.51 0 00-.446-.08c-1 3.19-3.13 5.953-6.017 7.683.016.039.036.092.056.148.043.119.091.248.118.28l-.029.074c-.06.154-.124.313-.051.55.202.534.53 1.055.925 1.682.066.1.131.19.197.281.126.174.25.345.363.563a5.468 5.468 0 01.136.286c.268.582.071 1.253-.444 1.505-.52.254-1.165-.014-1.443-.6a8.499 8.499 0 00-.039-.08c-.032-.066-.066-.137-.09-.192a4.523 4.523 0 01-.21-.644c-.03-.107-.058-.214-.093-.327l-.01-.029c-.233-.691-.426-1.266-.706-1.752-.138-.207-.303-.257-.461-.306a3.562 3.562 0 01-.072-.022l-.104-.19-.12-.218a13.298 13.298 0 01-9.631-.025l-.236.435c-.176.048-.346.096-.45.222-.267.324-.421.785-.585 1.275-.07.207-.14.42-.223.629-.035.114-.065.223-.094.332-.055.208-.11.413-.207.639a4.149 4.149 0 01-.086.18 8.18 8.18 0 00-.043.089v.002l-.002.002c-.279.584-.923.851-1.441.598-.515-.252-.712-.923-.444-1.505.015-.03.03-.066.047-.103.03-.064.06-.132.087-.182a4.46 4.46 0 01.365-.568c.065-.09.13-.18.195-.279.395-.627.742-1.19.944-1.723.051-.178-.024-.42-.092-.6l.19-.461a13.749 13.749 0 01-6.02-7.628l-.455.08-.046-.028c-.131-.077-.347-.204-.553-.188-.55.08-1.113.286-1.79.532l-.03.011c-.108.042-.21.086-.31.13-.197.086-.39.17-.627.235a3.955 3.955 0 01-.27.06.066.066 0 00-.01.004.088.088 0 01-.01.004c-.004 0-.01 0-.015.002-.62.135-1.22-.209-1.347-.774-.128-.566.268-1.14.883-1.29l.015-.005.005-.001a.68.68 0 01.004-.001l.084-.02c.068-.017.14-.035.195-.046.238-.046.447-.054.66-.062.111-.005.223-.01.341-.02l.024-.002c.72-.076 1.316-.14 1.847-.31.15-.062.296-.255.407-.404.014-.02.028-.038.042-.055l.437-.13a13.871 13.871 0 012.13-9.556l-.335-.303-.008-.05c-.021-.148-.059-.407-.202-.561-.41-.391-.928-.716-1.552-1.107-.102-.06-.2-.114-.298-.167a4.27 4.27 0 01-.567-.347c-.045-.034-.101-.08-.155-.125l-.061-.051a.17.17 0 00-.008-.006l-.008-.006c-.5-.405-.616-1.104-.256-1.561a1 1 0 01.831-.374c.25.009.508.101.727.278l.063.05c.059.047.123.098.17.138.185.162.322.323.462.486.072.084.144.169.224.255l.018.018c.507.523.928.956 1.39 1.272.212.125.382.098.545.072l.074-.011c.06.045.262.192.377.271a13.38 13.38 0 018.706-4.248l.025-.448c.139-.137.294-.333.339-.548.045-.566-.028-1.174-.115-1.907l-.001-.015c-.017-.117-.037-.228-.057-.338a4.482 4.482 0 01-.086-.67 3.557 3.557 0 01.002-.27l-.001-.015-.001-.015z" fill="#000"/></svg>

After

Width:  |  Height:  |  Size: 4.9 KiB

View File

@ -1,77 +1,119 @@
import UseCases from '@hashicorp/react-use-cases'
import BasicHero from '../../components/basic-hero'
import CtaHero from 'components/cta-hero'
import ConsulEnterpriseComparison from '../../components/enterprise-comparison/consul'
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 Callouts from '@hashicorp/react-callouts'
import MiniCTA from '../../components/mini-cta'
export default function HomePage() {
return (
<div className="p-home">
<BasicHero
brand="consul"
heading="Service Networking Across Any Cloud"
content="Automate network configurations, discover services, and enable secure connectivity across any cloud or runtime."
links={[
<CtaHero />
<Callouts
layout="two-up"
product="neutral"
items={[
{
text: 'Get Started',
url: 'https://learn.hashicorp.com/consul',
icon: require('./img/kubernetes/logo.svg?include'),
heading: 'Consul Service Mesh on Kubernetes',
content:
'Use Helm to deploy and CRDs to configure Consul on Kubernetes.',
link: {
text: 'Get started',
url:
'https://learn.hashicorp.com/collections/consul/gs-consul-service-mesh',
},
},
{
text: 'Try Cloud',
url:
'https://cloud.hashicorp.com/?utm_source=consul_io&utm_content=hero',
},
{
text: 'Download CLI',
url: '/downloads',
type: 'download',
icon: require('./img/kubernetes/communication-arrows.svg?include'),
heading: 'Consul as a Service Mesh',
content:
'Simplify, observe, and secure service to service communication for microservice architectures.',
link: {
text: 'Read more',
url: '/docs/connect',
},
},
]}
backgroundImage
/>
<ProductFeaturesList
heading="Why Consul?"
features={[
{
title: 'Integrate and Extend With Kubernetes',
content:
'Quickly deploy Consul on Kubernetes leveraging Helm. Automatically inject sidecars for Kubernetes resources. Federate multiple clusters into a single service mesh.',
icon: require('./img/why-consul/kubernetes.svg'),
},
{
title: 'Service Mesh Across Any Runtime',
content:
'Deploy service mesh within any runtime or infrastructure - Bare Metal, Virtual Machines, and Kubernetes clusters, across any cloud.',
icon: require('./img/why-consul/service-mesh-runtime.svg'),
},
{
title: 'Dynamic Load Balancing',
content:
'Resolve discovered services through integrated DNS. Automate 3rd party load balancers (F5, NGINX, HAProxy). Eliminate manual configuration of network devices.',
icon: require('./img/why-consul/dynamic-load-balancing.svg'),
link: {
type: 'inbound',
text: 'Learn more',
url:
'https://learn.hashicorp.com/collections/consul/developer-mesh',
},
},
{
title: 'Secure, Multi-Cloud Service Networking',
content:
'Secure services running in any environment leveraging intention based policies and automatic mTLS encryption between service mesh resources',
icon: require('./img/why-consul/cloud.svg'),
link: {
type: 'inbound',
text: 'Learn more',
url:
'https://learn.hashicorp.com/tutorials/consul/service-mesh-application-secure-networking',
},
},
{
title: 'Dynamic Load Balancing',
content:
'Resolve discovered services through integrated DNS. Automate 3rd party load balancers (F5, NGINX, HAProxy). Eliminate manual configuration of network devices.',
icon: require('./img/why-consul/dynamic-load-balancing.svg'),
link: {
type: 'inbound',
text: 'Learn more',
url:
'https://learn.hashicorp.com/collections/consul/load-balancing',
},
},
{
title: 'Service Discovery with Health Checking',
content:
'Consul enables detecting the deployment of new services, changes to existing ones, and provides real time agent health to reduce downtime.',
icon: require('./img/why-consul/health.svg'),
link: {
type: 'inbound',
text: 'Learn more',
url:
'https://learn.hashicorp.com/tutorials/cloud/get-started-service-discovery',
},
},
{
title: 'Robust Ecosystem',
content:
'Consul offers support for and integrations with many popular DevOps and Networking tools.',
icon: require('./img/why-consul/world.svg'),
link: {
type: 'inbound',
text: 'Learn more',
url: '/docs/integrate/partnerships',
},
},
{
title: 'Integrate and Extend With Kubernetes',
content:
'Quickly deploy Consul on Kubernetes leveraging Helm. Automatically inject sidecars for Kubernetes resources. Federate multiple clusters into a single service mesh.',
icon: require('./img/why-consul/kubernetes.svg'),
link: {
type: 'inbound',
text: 'Learn more',
url:
'https://learn.hashicorp.com/collections/consul/gs-consul-service-mesh',
},
},
]}
/>
@ -92,7 +134,8 @@ export default function HomePage() {
title: 'Migrate to Microservices on Kubernetes',
category: 'Step-by-Step Tutorials',
time: '45 mins',
link: 'https://learn.hashicorp.com/collections/consul/microservices',
link:
'https://learn.hashicorp.com/collections/consul/microservices',
image: require('./img/learn/kubernetes.svg?url'),
},
]}

View File

@ -43,4 +43,23 @@
}
}
}
& .g-callouts {
& > .g-grid-container > .items.layout-two-up > .callout-item-wrapper {
padding: 0;
}
& .callout-item.layout-two-up {
padding: 70px;
&.theme-light {
background-color: #f2f2f3;
transition: filter 0.25s ease;
&:hover {
filter: brightness(97%);
}
}
}
}
}

View File

@ -10,6 +10,7 @@
@import '~@hashicorp/react-alert-banner/style.css';
@import '~@hashicorp/react-button/styles/index.css';
@import '~@hashicorp/react-callouts/style.css';
@import '~@hashicorp/react-call-to-action/style.css';
@import '~@hashicorp/react-code-block/style.css';
@import '~@hashicorp/react-consent-manager/style.css';