Add Using in Production Question (#8718)
* website: add using in prod question * adjust padding
This commit is contained in:
parent
6b05ecf488
commit
d97fb3f35c
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -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 */
|
||||
|
|
Loading…
Reference in New Issue