927f46d5d7
* homepage setup * [Homepage] `<IoHomeHero />` component (#13160) * init <Hero /> component * adds loading animation * updates variable naming * makes index optional * Update hero-pattern.svg * prefix with IoHome * updates usage * [Homepage] `<IoHomePreFooter />` component (#13182) * adds <IoHomePreFooter /> * adds interfaces * [Homepage] `<IoHomeHero />` component (#13160) * init <Hero /> component * adds loading animation * updates variable naming * makes index optional * Update hero-pattern.svg * prefix with IoHome * updates usage * adds <IoHomePreFooter /> * adds interfaces * adds key * [Homepage] `<IoHomeCallToAction />` component (#13164) * adding brand to cta * cleanup homepage * [Homepage] `<IoHomeVideo />` component (#13161) * init <Video /> component * adjusts sizing and border radius * responsive styling * fix hover svg gitter * adjust play icon sizing * include temp thumbnail * dialog implementation * conditionally display person and show helpers * rename component * updates dialog naming * add homepage styling * simplify background color * page level styling * [Homepage] `<IoHomeCaseStudies />` (#13190) * adds <IoHomeCaseStudies /> * adds interface * animate gradient * update min-heights * Homepage `<IoHomeCard />` component (#13151) * init <Card /> component * fixes heading color * adds product logos and hover styles * update naming * simplifies inset spacing * use ternary and add key * removes repo link * removes need for camelCase package * adds keys * adds in practice cards * adds in practice background * use case cards * update min col sizing * adds feature component (#13203) * fixes card hover bug * [Homepage] connect homepage to dato content (#13227) * connect homepage to dato * Check for internal link * fix return types * adds youtube video * hook up meta tags and chunk cards * removes chunking * fix ts return * fix prop naming * fix return type * mobile sizing adjustments * [Homepage] Usecase pages (#13240) * init usecase page * updates use case call to action * card container component * themeing * convert to using strictly props * responsive spacing * reworking sections component * adds callout and hero patterns * adds priority * makes feature link optional * [Homepage] connect use case template to dato (#13295) * Start connecting to dato * Fix spacing when no video is present * Remove log * adds images * hook up cards * pass eyebrow and products * Delete index.tsx * Use card container on homepage * use react video player * [Homepage] fix mobile video (#13309) * Removing attributes * update url * spacing adjustments * Allow previewing draft content (#13312) * fix heading width * fix feature max width * adjust in practice padding * increase icon sizing * adjust icon alignment * update eyebrow * update hero pattern * update usecase hero pattern * add hover scale * [Homepage] populate use case dropdown from use case pages (#13325) * create standard layout * removes unused subnav data * removes static use case pages * removes use cases style * bump subnav and use hashicorp vault logo * fixes use cases paths * removes hashistack menu * removes subnav top border * conditionally render video callout avatar * hook up data and conditionals * update components to work with other products * extract in practice section for reuse * use Products type * fix type error * rework cta logic * removes type * updates accent method * fix button prop * refactor customer case study * refactor case studies component * cleanup margin * refactor data props * Spacing updates and introduce intro component * adds intro interface * Delete style.css * fix intro description color * add revalidate code to homepage * bump subnav * make stats optional * adjust border radius based on customer story * cleanup temp files * redirect /home to homepage * reorder resources * fix: move heading and description * fix: logo alignment * fix: section background color * feat: optional tutorial and docs links * fix: removes case studies background * formatting * feat: sort use cases in nav * fix: card overflow (#13429) * fix: adjust overflow method * fix: padding on desktop * fix: scroll padding-right on mobile * remove debugger * increase last item width * card container overflow method (#13434) * use flex * formatting * add comment
171 lines
4.4 KiB
TypeScript
171 lines
4.4 KiB
TypeScript
import * as React from 'react'
|
|
import Head from 'next/head'
|
|
import rivetQuery from '@hashicorp/nextjs-scripts/dato/client'
|
|
import homepageQuery from './query.graphql'
|
|
import { renderMetaTags } from 'react-datocms'
|
|
import IoHomeHero from 'components/io-home-hero'
|
|
import IoHomeIntro from 'components/io-home-intro'
|
|
import IoHomeInPractice from 'components/io-home-in-practice'
|
|
import IoCardContainer from 'components/io-card-container'
|
|
import IoHomeCaseStudies from 'components/io-home-case-studies'
|
|
import IoHomeCallToAction from 'components/io-home-call-to-action'
|
|
import IoHomePreFooter from 'components/io-home-pre-footer'
|
|
import s from './style.module.css'
|
|
|
|
export default function Homepage({ data }): React.ReactElement {
|
|
const {
|
|
seo,
|
|
heroHeading,
|
|
heroDescription,
|
|
heroCtas,
|
|
heroCards,
|
|
introHeading,
|
|
introDescription,
|
|
introFeatures,
|
|
introVideo,
|
|
inPracticeHeading,
|
|
inPracticeDescription,
|
|
inPracticeCards,
|
|
inPracticeCtaHeading,
|
|
inPracticeCtaDescription,
|
|
inPracticeCtaLink,
|
|
inPracticeCtaImage,
|
|
useCasesHeading,
|
|
useCasesDescription,
|
|
useCasesCards,
|
|
caseStudiesHeading,
|
|
caseStudiesDescription,
|
|
caseStudiesFeatured,
|
|
caseStudiesLinks,
|
|
callToActionHeading,
|
|
callToActionDescription,
|
|
callToActionCtas,
|
|
preFooterHeading,
|
|
preFooterDescription,
|
|
preFooterCtas,
|
|
} = data
|
|
const _introVideo = introVideo[0]
|
|
|
|
return (
|
|
<>
|
|
<Head>{renderMetaTags(seo)}</Head>
|
|
|
|
<IoHomeHero
|
|
pattern="/img/home-hero-pattern.svg"
|
|
brand="vault"
|
|
heading={heroHeading}
|
|
description={heroDescription}
|
|
ctas={heroCtas}
|
|
cards={heroCards.map((card) => {
|
|
return {
|
|
...card,
|
|
cta: card.cta[0],
|
|
}
|
|
})}
|
|
/>
|
|
|
|
<IoHomeIntro
|
|
brand="vault"
|
|
heading={introHeading}
|
|
description={introDescription}
|
|
features={introFeatures}
|
|
video={{
|
|
youtubeId: _introVideo.youtubeId,
|
|
thumbnail: _introVideo.thumbnail.url,
|
|
heading: _introVideo.heading,
|
|
description: _introVideo.description,
|
|
person: {
|
|
name: _introVideo.personName,
|
|
description: _introVideo.personDescription,
|
|
avatar: _introVideo.personAvatar?.url,
|
|
},
|
|
}}
|
|
/>
|
|
|
|
<section className={s.useCases}>
|
|
<div className={s.container}>
|
|
<IoCardContainer
|
|
heading={useCasesHeading}
|
|
description={useCasesDescription}
|
|
cardsPerRow={4}
|
|
cards={useCasesCards.map((card) => {
|
|
return {
|
|
eyebrow: card.eyebrow,
|
|
link: {
|
|
url: card.link,
|
|
type: 'inbound',
|
|
},
|
|
heading: card.heading,
|
|
description: card.description,
|
|
products: card.products,
|
|
}
|
|
})}
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<IoHomeInPractice
|
|
brand="vault"
|
|
pattern="/img/practice-pattern.svg"
|
|
heading={inPracticeHeading}
|
|
description={inPracticeDescription}
|
|
cards={inPracticeCards.map((card) => {
|
|
return {
|
|
eyebrow: card.eyebrow,
|
|
link: {
|
|
url: card.link,
|
|
type: 'inbound',
|
|
},
|
|
heading: card.heading,
|
|
description: card.description,
|
|
products: card.products,
|
|
}
|
|
})}
|
|
cta={{
|
|
heading: inPracticeCtaHeading,
|
|
description: inPracticeCtaDescription,
|
|
link: inPracticeCtaLink,
|
|
image: inPracticeCtaImage,
|
|
}}
|
|
/>
|
|
|
|
<IoHomeCaseStudies
|
|
heading={caseStudiesHeading}
|
|
description={caseStudiesDescription}
|
|
primary={caseStudiesFeatured}
|
|
secondary={caseStudiesLinks}
|
|
/>
|
|
|
|
<IoHomeCallToAction
|
|
brand="vault"
|
|
heading={callToActionHeading}
|
|
content={callToActionDescription}
|
|
links={callToActionCtas}
|
|
/>
|
|
|
|
<IoHomePreFooter
|
|
brand="vault"
|
|
heading={preFooterHeading}
|
|
description={preFooterDescription}
|
|
ctas={preFooterCtas}
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export async function getStaticProps() {
|
|
const { vaultHomepage } = await rivetQuery({
|
|
query: homepageQuery,
|
|
})
|
|
|
|
return {
|
|
props: {
|
|
data: vaultHomepage,
|
|
},
|
|
revalidate:
|
|
process.env.HASHI_ENV === 'production'
|
|
? process.env.GLOBAL_REVALIDATE
|
|
: 10,
|
|
}
|
|
}
|