Adds cloud offerings section to website
This commit is contained in:
Brandon Romano
parent
3c75847ee2
commit
2b602bbba7
|
|
@ -41,8 +41,6 @@ export default function BasicHero({
|
|||
<div className="third-link">
|
||||
<a
|
||||
href={links[2].url}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<span className="g-type-buttons-and-standalone-links">
|
||||
{links[2].text}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
import Button from '@hashicorp/react-button'
|
||||
|
||||
export default function CloudOfferingsList({ offerings }) {
|
||||
return (
|
||||
<ul className="g-cloud-offerings-list">
|
||||
{offerings.map(offering => (
|
||||
<li key={offering.title}>
|
||||
<a
|
||||
href={offering.link.url}
|
||||
rel={offering.link.type === 'outbound' ? 'noopener' : undefined}
|
||||
target={offering.link.type === 'outbound' ? '_blank' : undefined}
|
||||
>
|
||||
<img src={offering.image} alt={offering.title}/>
|
||||
<span className="g-type-label-strong">{offering.eyebrow}</span>
|
||||
<h4>{offering.title}</h4>
|
||||
<p>{offering.description}</p>
|
||||
<Button
|
||||
title={offering.link.text}
|
||||
linkType={offering.link.type}
|
||||
theme={{ variant: 'tertiary' }}
|
||||
url={offering.link.url}
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
ul.g-cloud-offerings-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: -16px;
|
||||
display: flex;
|
||||
|
||||
@media (width < 769px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
& li {
|
||||
flex-grow: 1;
|
||||
margin: 16px;
|
||||
background: var(--white);
|
||||
border: 1px solid var(--gray-6);
|
||||
border-radius: 2px;
|
||||
text-align: center;
|
||||
transition: box-shadow 0.25s, transform 0.25s, -webkit-transform 0.25s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 16px 28px rgba(37, 38, 45, 0.12);
|
||||
transform: translateY(-4px);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
& > a {
|
||||
display: block;
|
||||
padding: 32px;
|
||||
color: inherit;
|
||||
|
||||
& > img {
|
||||
display: block;
|
||||
width: 400px;
|
||||
max-width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
& > span {
|
||||
color: var(--gray-4);
|
||||
}
|
||||
|
||||
& > h4 {
|
||||
text-decoration: none;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
& > p {
|
||||
font-size: 19px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
|
|
@ -1,6 +1,7 @@
|
|||
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'
|
||||
|
|
@ -25,9 +26,9 @@ export default function HomePage() {
|
|||
type: 'download',
|
||||
},
|
||||
{
|
||||
text: 'Try HashiCorp Consul Service on Azure',
|
||||
url: 'https://learn.hashicorp.com/consul/hcs-azure/deploy',
|
||||
type: 'outbound',
|
||||
text: 'Learn more about Consul cloud offerings',
|
||||
url: '/#cloud-offerings',
|
||||
type: 'inbound',
|
||||
},
|
||||
]}
|
||||
backgroundImage
|
||||
|
|
@ -207,6 +208,37 @@ export default function HomePage() {
|
|||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<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",
|
||||
link: {
|
||||
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",
|
||||
link: {
|
||||
text: "Request Access",
|
||||
url: "https://www.hashicorp.com/cloud-platform/request-access/",
|
||||
type: "outbound"
|
||||
}
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<ConsulEnterpriseComparison />
|
||||
<PrefooterCTA />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -28,4 +28,19 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
& section.cloud-offerings {
|
||||
padding-top: 88px;
|
||||
padding-bottom: 88px;
|
||||
|
||||
& h2 {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
max-width: 475px;
|
||||
margin-bottom: 64px;
|
||||
@media (max-width: 800px) {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@
|
|||
@import '../components/footer/style.css';
|
||||
@import '../components/learn-callout/style.css';
|
||||
@import '../components/case-study-carousel/style.css';
|
||||
@import '../components/cloud-offerings-list/style.css';
|
||||
|
||||
/* Layouts */
|
||||
@import '../layouts/use-cases/style.css';
|
||||
|
|
|
|||
Loading…
Reference in New Issue