Add Using in Production Question (#8718)

* website: add using in prod question

* adjust padding
This commit is contained in:
Nicole Forrester 2020-09-21 20:08:44 -04:00 committed by GitHub
parent 6b05ecf488
commit d97fb3f35c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 98 additions and 20 deletions

View File

@ -3,7 +3,8 @@
flex-direction: column;
align-items: center;
position: relative;
padding-top: 128px;
padding-top: 0 !important;
padding-bottom: 0 !important;
& h2 {
margin-bottom: 30px;

View File

@ -0,0 +1,23 @@
import Button from '@hashicorp/react-button'
export default function MiniCTA({ title, description, link }) {
return (
<div className="g-mini-cta">
<div className="g-grid-container">
<hr />
<h5 className="g-type-display-4">{title}</h5>
{description && <p className="g-type-body">{description}</p>}
<Button
title={link.text}
url={link.url}
theme={{
variant: 'tertiary-neutral',
brand: 'neutral',
background: 'light'
}}
linkType={link.type}
/>
</div>
</div>
)
}

View File

@ -0,0 +1,36 @@
.g-mini-cta {
background: var(--gray-7);
text-align: center;
padding-bottom: 64px;
padding-top: 48px;
& hr {
width: 64px;
color: var(--gray-5);
margin: 0 auto 64px auto;
@media (max-width: 800px) {
margin: 0 auto 24px auto;
}
}
& h5 {
margin: 0;
margin-bottom: 14px;
}
& p {
margin: 0;
margin-bottom: 24px;
@media (max-width: 800px) {
margin-bottom: 16px;
}
}
& .g-btn {
& span {
font-weight: 500;
}
}
}

View File

@ -6,6 +6,7 @@ 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 MiniCTA from '../../components/mini-cta'
export default function HomePage() {
return (
@ -84,14 +85,16 @@ export default function HomePage() {
title: 'Deploy Consul Service Mesh on Kubernetes',
category: 'Step-by-Step Tutorial',
time: '10 mins',
link: 'https://learn.hashicorp.com/tutorials/consul/service-mesh-deploy',
link:
'https://learn.hashicorp.com/tutorials/consul/service-mesh-deploy',
image: require('./img/learn/getting-started.svg?url'),
},
{
title: 'Observe Layer 7 Traffic',
category: 'Step-by-Step Tutorial',
time: '15 mins',
link: 'https://learn.hashicorp.com/tutorials/consul/service-mesh-features',
link:
'https://learn.hashicorp.com/tutorials/consul/service-mesh-features',
image: require('./img/learn/kubernetes.svg?url'),
},
]}
@ -161,6 +164,15 @@ export default function HomePage() {
],
}}
/>
<MiniCTA
title="Are you using Consul in production?"
link={{
text: 'Share your success story and receive special Consul swag.',
url:
'https://docs.google.com/forms/d/1B-4XlRndv2hX9G4Gt2dMnJBqilctrrof7dfpyQ1EVIg/edit',
type: 'outbound',
}}
/>
<div className="use-cases g-grid-container">
<h2 className="g-type-display-2">Use Cases</h2>
@ -209,32 +221,37 @@ export default function HomePage() {
/>
</div>
<section id="cloud-offerings" className="cloud-offerings g-grid-container">
<h2 className="g-type-display-2">Learn more about Consul cloud offerings</h2>
<section
id="cloud-offerings"
className="cloud-offerings g-grid-container"
>
<h2 className="g-type-display-2">
Learn more about Consul cloud offerings
</h2>
<CloudOfferingsList
offerings={[
{
image: require('./img/cloud/hcs.jpg?url'),
eyebrow: "General Availability",
title: "HashiCorp Consul Service on Azure",
description: "Native Azure Experience",
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: 'Get Started',
url: 'https://learn.hashicorp.com/consul/hcs-azure/deploy',
type: 'outbound',
},
},
{
image: require('./img/cloud/hcp.jpg?url'),
eyebrow: "Private Beta",
title: "HCP Consul on AWS",
description: "HashiCorp Cloud Platform",
eyebrow: 'Private Beta',
title: 'HCP Consul on AWS',
description: 'HashiCorp Cloud Platform',
link: {
text: "Request Access",
url: "https://www.hashicorp.com/cloud-platform/request-access/",
type: "outbound"
}
}
text: 'Request Access',
url: 'https://www.hashicorp.com/cloud-platform/request-access/',
type: 'outbound',
},
},
]}
/>
</section>

View File

@ -44,6 +44,7 @@
@import '../components/learn-callout/style.css';
@import '../components/case-study-carousel/style.css';
@import '../components/cloud-offerings-list/style.css';
@import '../components/mini-cta/style.css';
@import '../components/search-bar/style.css';
/* Layouts */