Theme & Stub quotes section

This commit is contained in:
Brandon Romano 2020-05-06 19:59:26 -07:00
parent ac612a9cdc
commit a80bb58c85
3 changed files with 28 additions and 92 deletions

View File

@ -4,7 +4,7 @@ import Button from '@hashicorp/react-button'
import QuoteMarksIcon from './img/quote.svg?include' import QuoteMarksIcon from './img/quote.svg?include'
export default function CaseStudySlide({ export default function CaseStudySlide({
caseStudy: { person, quote, company, caseStudyURL } caseStudy: { person, quote, company, caseStudyURL },
}) { }) {
return ( return (
<blockquote className="g-grid-container case-slide"> <blockquote className="g-grid-container case-slide">
@ -34,8 +34,8 @@ export default function CaseStudySlide({
url={caseStudyURL} url={caseStudyURL}
theme={{ theme={{
variant: 'tertiary', variant: 'tertiary',
brand: 'nomad', brand: 'consul',
background: 'light' background: 'light',
}} }}
linkType="outbound" linkType="outbound"
/> />

View File

@ -1,3 +1,3 @@
<svg width="19" height="15" viewBox="0 0 19 15" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="19" height="15" viewBox="0 0 19 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.15 0.5H3.95L0 14.35H6.95L9.15 0.5ZM18.7 0.5H13.45L9.55 14.35H16.5L18.7 0.5Z" fill="#00BC7F"/> <path d="M9.15 0.5H3.95L0 14.35H6.95L9.15 0.5ZM18.7 0.5H13.45L9.55 14.35H16.5L18.7 0.5Z" fill="#CA2171"></path>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 209 B

After

Width:  |  Height:  |  Size: 214 B

View File

@ -27,6 +27,7 @@ export default function HomePage() {
]} ]}
backgroundImage backgroundImage
/> />
<ProductFeaturesList <ProductFeaturesList
heading="Why Consul?" heading="Why Consul?"
features={[ features={[
@ -68,101 +69,36 @@ export default function HomePage() {
}, },
]} ]}
/> />
<CaseStudyCarousel <CaseStudyCarousel
title="Trusted by startups and the worlds largest organizations" title="Trusted by startups and the worlds largest organizations"
caseStudies={[ caseStudies={Array(5).fill({
{ quote:
quote: "Here's a quote about Consul, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.",
'Kubernetes is the 800-pound gorilla of container orchestration, coming with a price tag. So we looked into alternatives - and fell in love with Nomad.', caseStudyURL: 'https://www.hashicorp.com',
caseStudyURL: person: {
'https://endler.dev/2019/maybe-you-dont-need-kubernetes/', firstName: 'Brandon',
person: { lastName: 'Romano',
firstName: 'Matthias', photo:
lastName: 'Endler', 'https://avatars1.githubusercontent.com/u/2105067?s=460&u=d20ade7241340fb1a277b55816f0a5336a26d95c&v=4',
photo: title: 'A Real Person',
'https://www.datocms-assets.com/2885/1582163422-matthias-endler.png',
title: 'Backend Engineer',
},
company: {
name: 'Trivago',
logo:
'https://www.datocms-assets.com/2885/1582162145-trivago.svg',
},
}, },
{ company: {
quote: name: 'HashiCorp',
'We have people who are first-time system administrators deploying applications. There is a guy on our team who worked in IT help desk for 8 years - just today he upgraded an entire cluster himself.', logo:
caseStudyURL: 'https://www.hashicorp.com/case-studies/roblox/', 'https://www.datocms-assets.com/2885/1503088697-blog-hashicorp.svg',
person: {
firstName: 'Rob',
lastName: 'Cameron',
photo:
'https://www.datocms-assets.com/2885/1582180216-rob-cameron.jpeg',
title: 'Technical Director of Infrastructure',
},
company: {
name: 'Roblox',
logo:
'https://www.datocms-assets.com/2885/1582180369-roblox-color.svg',
},
}, },
{ })}
quote:
'Our customers jobs are changing constantly. Its challenging to dynamically predict demand, what types of jobs, and the resource requirements. We found that Nomad excelled in this area.',
caseStudyURL:
'https://www.hashicorp.com/resources/nomad-vault-circleci-security-scheduling',
person: {
firstName: 'Rob',
lastName: 'Zuber',
photo:
'https://www.datocms-assets.com/2885/1582180618-rob-zuber.jpeg',
title: 'CTO',
},
company: {
name: 'CircleCI',
logo:
'https://www.datocms-assets.com/2885/1582180745-circleci-logo.svg',
},
},
{
quote:
'Adopting Nomad did not require us to change our packaging format — we could continue to package Python in Docker and build binaries for the rest of our applications.',
caseStudyURL:
'https://medium.com/@copyconstruct/schedulers-kubernetes-and-nomad-b0f2e14a896',
person: {
firstName: 'Cindy',
lastName: 'Sridharan',
photo:
'https://www.datocms-assets.com/2885/1582181517-cindy-sridharan.png',
title: 'Engineer',
},
company: {
name: 'imgix',
logo: 'https://www.datocms-assets.com/2885/1582181250-imgix.svg',
},
},
]}
logoSection={{ logoSection={{
grayBackground: true, grayBackground: true,
featuredLogos: [ featuredLogos: Array(6).fill({
{ companyName: 'HashiCorp',
companyName: 'Trivago', url:
url: 'https://www.datocms-assets.com/2885/1503088697-blog-hashicorp.svg',
'https://www.datocms-assets.com/2885/1582162317-trivago-monochromatic.svg', }),
},
{
companyName: 'Roblox',
url:
'https://www.datocms-assets.com/2885/1582180373-roblox-monochrome.svg',
},
{
companyName: 'CircleCI',
url:
'https://www.datocms-assets.com/2885/1582180745-circleci-logo.svg',
},
],
}} }}
/> />
<div className="use-cases g-grid-container"> <div className="use-cases g-grid-container">
<h2 className="g-type-display-2">Use Cases</h2> <h2 className="g-type-display-2">Use Cases</h2>
<UseCases <UseCases