open-consul/website/pages/use-cases/[slug].tsx

237 lines
6.1 KiB
TypeScript
Raw Normal View History

Homepage use case redesign (#11728) * init homepage * adds tutorials * update subnav * adds intro background * add offerings * adds in practice cta * include radial gradient * cleanup gradient * Fix learn more button display * include use case pages * connect subnav menu items * extract in practice section for reuse * use Products type * fix type error * add neutral option * rework cta logic * Fix links map * fix use case path * updates accent method * fix button prop usage * refactor customer case study * refactor case studies component * cleanup margin * refactor data props * fix offering cta * spacing updates and introduce intro component * adds intro interface * removes footer border * fix intro description color * add revalidate code to homepage * cleanup unused imports * bump subnav * makes stats optional * adjust border radius based on customer story * redirect /home to homepage * fix: turtorials link * fix: logo alignment * fix: section background color * feat: home reorder and tuts and docs links * fix: flush padding * formatting * feat: sort use cases in nav * fix: card overflow * fix: adjust overflow method * fix: padding on desktop * fix: card container overflow padding on mobile * fix: intro cta conditional * fix: simplify conditional * fix: customer logo sizing * cleanup old data * accept isInternalLink as arg * remove chunk * fix: isInternalLink usage * fix: isInternalLink prop usage * fix: add lang to document * init homepage * adds tutorials * add offerings * cleanup unused imports * bump subnav * fix: flush padding * formatting * fix: intro cta conditional * fix: simplify conditional * cleanup old data * add consul on kubernetes to menu items * add use case redirect * Add use case redirect
2021-12-20 21:42:20 +00:00
import * as React from 'react'
import Head from 'next/head'
import rivetQuery from '@hashicorp/nextjs-scripts/dato/client'
import useCasesQuery from './query.graphql'
import { renderMetaTags } from 'react-datocms'
import IoUsecaseHero from 'components/io-usecase-hero'
import IoUsecaseSection from 'components/io-usecase-section'
import IoUsecaseCustomer from 'components/io-usecase-customer'
import IoCardContainer from 'components/io-card-container'
import IoVideoCallout from 'components/io-video-callout'
import IoUsecaseCallToAction from 'components/io-usecase-call-to-action'
import s from './style.module.css'
export default function UseCasePage({ data }) {
const {
seo,
heroHeading,
heroDescription,
challengeHeading,
challengeDescription,
challengeImage,
challengeLink,
solutionHeading,
solutionDescription,
solutionImage,
solutionLink,
customerCaseStudy,
cardsHeading,
cardsDescription,
tutorialsLink,
tutorialCards,
documentationLink,
documentationCards,
callToActionHeading,
callToActionDescription,
callToActionLinks,
videoCallout,
} = data
const _customerCaseStudy = customerCaseStudy[0]
const _videoCallout = videoCallout[0]
return (
<>
<Head>{renderMetaTags(seo)}</Head>
<IoUsecaseHero
eyebrow="Use case"
heading={heroHeading}
description={heroDescription}
pattern="/img/usecase-hero-pattern.svg"
/>
<IoUsecaseSection
brand="consul"
eyebrow="Challenge"
heading={challengeHeading}
description={challengeDescription}
media={{
src: challengeImage?.url,
width: challengeImage?.width,
height: challengeImage?.height,
alt: challengeImage?.alt,
}}
cta={{
text: 'Learn more',
link: challengeLink,
}}
/>
<IoUsecaseSection
brand="consul"
bottomIsFlush={_customerCaseStudy}
eyebrow="Solution"
heading={solutionHeading}
description={solutionDescription}
media={{
src: solutionImage?.url,
width: solutionImage?.width,
height: solutionImage?.height,
alt: solutionImage?.alt,
}}
cta={{
text: 'Learn more',
link: solutionLink,
}}
/>
{_customerCaseStudy ? (
<IoUsecaseCustomer
link={_customerCaseStudy.link}
media={{
src: _customerCaseStudy.image.url,
width: _customerCaseStudy.image.width,
height: _customerCaseStudy.image.height,
alt: _customerCaseStudy.image.alt,
}}
logo={{
src: _customerCaseStudy.logo.url,
width: _customerCaseStudy.logo.width,
height: _customerCaseStudy.logo.height,
alt: _customerCaseStudy.logo.alt,
}}
heading={_customerCaseStudy.heading}
description={_customerCaseStudy.description}
stats={_customerCaseStudy.stats.map((stat) => {
return {
value: stat.value,
key: stat.label,
}
})}
/>
) : null}
<div className={s.cards}>
<IoCardContainer
heading={cardsHeading}
description={cardsDescription}
label="Tutorials"
cta={{
url: tutorialsLink
? tutorialsLink
: 'https://learn.hashicorp.com/consul',
text: 'Explore all',
}}
cardsPerRow={3}
cards={tutorialCards.map((card) => {
return {
eyebrow: card.eyebrow,
link: {
url: card.link,
type: 'inbound',
},
heading: card.heading,
description: card.description,
products: card.products,
}
})}
/>
<IoCardContainer
label="Docs"
cta={{
url: documentationLink ? documentationLink : '/docs',
text: 'Explore all',
}}
cardsPerRow={3}
cards={documentationCards.map((card) => {
return {
eyebrow: card.eyebrow,
link: {
url: card.link,
type: 'inbound',
},
heading: card.heading,
description: card.description,
products: card.products,
}
})}
/>
</div>
<div className={s.callToAction}>
<IoUsecaseCallToAction
theme="dark"
brand="consul"
heading={callToActionHeading}
description={callToActionDescription}
links={callToActionLinks.map((link) => {
return {
text: link.title,
url: link.link,
}
})}
pattern="/img/usecase-callout-pattern.svg"
/>
</div>
{_videoCallout ? (
<div className={s.videoCallout}>
<IoVideoCallout
youtubeId={_videoCallout.youtubeId}
thumbnail={_videoCallout.thumbnail.url}
heading={_videoCallout.heading}
description={_videoCallout.description}
person={{
avatar: _videoCallout.personAvatar?.url,
name: _videoCallout.personName,
description: _videoCallout.personDescription,
}}
/>
</div>
) : null}
</>
)
}
export async function getStaticPaths() {
const { allConsulUseCases } = await rivetQuery({
query: useCasesQuery,
})
return {
paths: allConsulUseCases.map((page) => {
return {
params: {
slug: page.slug,
},
}
}),
fallback: 'blocking',
}
}
export async function getStaticProps({ params }) {
const { slug } = params
const { allConsulUseCases } = await rivetQuery({
query: useCasesQuery,
})
const page = allConsulUseCases.find((page) => page.slug === slug)
if (!page) {
return { notFound: true }
}
return {
props: {
data: page,
},
revalidate:
process.env.HASHI_ENV === 'production'
? process.env.GLOBAL_REVALIDATE
: 10,
}
}