diff --git a/pages/_app.tsx b/pages/_app.tsx index 730e6a01..b5626b5a 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -21,7 +21,10 @@ import { SWRConfig } from 'swr' import { BreakpointProvider } from '@src/components/contexts/BreakpointProvider' import DocSearchStyles from '@src/components/DocSearchStyles' -import { type FooterVariant } from '@src/components/FooterFull' +import { + type FooterVariant, + type HeaderVariant, +} from '@src/components/FooterFull' import GlobalStyles from '@src/components/GlobalStyles' import PrimaryPage from '@src/components/PrimaryPage' import { type GlobalProps } from '@src/utils/getGlobalProps' @@ -36,8 +39,8 @@ export type GlobalPageProps = { metaTitleFull?: string metaDescription?: string footerVariant?: FooterVariant + headerVariant?: HeaderVariant showHeaderBG?: boolean - hideHeader?: boolean } type MyAppProps = AppProps diff --git a/pages/index.tsx b/pages/index.tsx index 1f58160b..dcdebcc4 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,188 +1,45 @@ -import { type ComponentProps, useRef, useState } from 'react' +import { useState } from 'react' import { Button, CloseIcon } from '@pluralsh/design-system' import { type InferGetStaticPropsType } from 'next' import Link from 'next/link' -import { type Variants, motion } from 'framer-motion' -import styled from 'styled-components' -// @ts-expect-error -import useMobileDetect from 'use-mobile-detect-hook' - import { directusClient } from '@src/apollo-client' import { BareModal } from '@src/components/BareModal' +import { CustomComponents } from '@src/components/custom-page/common' import { FooterVariant } from '@src/components/FooterFull' import { CircleEmbellishment } from '@src/components/layout/CircleEmbellishment' import { GradientBG } from '@src/components/layout/GradientBG' import { HeaderPad } from '@src/components/layout/HeaderPad' -import ArticleSection from '@src/components/page-sections/articleSection' -import { ImpactCardSection } from '@src/components/page-sections/ImpactCardSection' -import { QuoteSection } from '@src/components/page-sections/QuoteSection' +import { StandardPageWidth } from '@src/components/layout/LayoutHelpers' import { HomePageHero } from '@src/components/PageHeros' -import { CenteredSectionHead } from '@src/components/SectionHeads' +import { getImageUrl } from '@src/consts/routes' import { PageHomepageDocument, + type PageHomepageFragment, type PageHomepageQuery, type PageHomepageQueryVariables, } from '@src/generated/graphqlDirectus' -import { cn as classNames } from '@src/utils/cn' +import { combineErrors } from '@src/utils/combineErrors' import { propsWithGlobalSettings } from '@src/utils/getGlobalProps' -import { normalizeQuotes } from '@src/utils/normalizeQuotes' - -import { StandardPageWidth } from '../src/components/layout/LayoutHelpers' -import { HomepageFeaturesSection } from '../src/components/page-sections/HomepageFeaturesSection' -import { combineErrors } from '../src/utils/combineErrors' - -const HeroImagesSC = styled.div(({ theme: _theme }) => { - const baseWidth = 1147 - - return { - transformOrigin: 'center', - position: 'relative', - width: '100%', - aspectRatio: '2 / 1', - '.heroImg': { - position: 'absolute', - pointerEvents: 'none', - img: { - display: 'block', - width: '100%', - boxShadow: `0px 10px 20px 0px rgba(14, 16, 21, 0.30), 0px 3px 6px 0px rgba(14, 16, 21, 0.20)`, - }, - }, - '.heroImg1': { - width: `80%`, - maxWidth: baseWidth, - left: `50%`, - top: `0`, - transform: 'translateX(-50%)', - '&::after': { - content: `''`, - position: 'absolute', - top: 0, - left: 0, - width: '100%', - height: '100%', - boxShadow: 'inset 0px -200px 600px rgba(0,0,0,0.3)', - pointerEvents: 'none', - }, - }, - '.heroImg2': { - width: `30%`, - left: `5%`, - top: `16%`, - maxWidth: 413, - }, - '.heroImg3': { - width: `32%`, - right: `8%`, - top: `-7%`, - maxWidth: 468, - overflow: 'hidden', - borderRadius: _theme.borderRadiuses.large, - }, - } -}) - -const heroVariants = ({ delay = 0 }: { delay: number }): Variants => { - const start = { - opacity: 0, - } - const end = { - opacity: 1, - } - - return { - offscreen: { - ...start, - // Need to set zero-length transition here to make sure - // state is set immediately on page load - transition: { type: 'linear', duration: 0 }, - }, - onscreen: { - ...end, - transition: { - type: 'spring', - bounce: 0.15, - duration: 2.25, - delay, - }, - }, - mobile: { - ...end, - transition: { type: 'linear', duration: 0 }, - }, - } -} - -function HeroIn({ children, className, delay }) { - const variants = heroVariants({ delay }) - const isMobile = useMobileDetect().isMobile() - - return ( - - {children} - - ) -} - -function HeroImages({ ...props }: ComponentProps) { - const ref = useRef(null) - const stagger = 0.25 - - return ( - - - - - - - - - - - - ) -} - -export default function Index({ - articleCards, - quotes, - announcementChip, +export default function Homepage({ + pageQueryData, }: InferGetStaticPropsType) { const [showVideo, setShowVideo] = useState(false) + const pageData = pageQueryData ?? pageDataDefaults + const announcementChip = { + visible: pageData.announcement_visible, + text: pageData.announcement_text, + url: pageData.announcement_url, + } + const heroImageUrl = getImageUrl(pageData.hero_image) return ( <> Managing Kubernetes can be a cluster—} + heading={pageData.hero_title} description={
Plural reduces cluster upgrade cycles from months to hours at @@ -216,126 +73,66 @@ export default function Index({ large primary as={Link} - href="/contact-sales" + href={pageData.hero_cta_url} > - Book a demo + {pageData.hero_cta_text}
} />
- + {heroImageUrl && ( + + )} - setShowVideo(false)} - closeButton={false} - className="mx-auto flex w-[90%] items-center justify-center" - style={{ height: 'fit-content', overflow: 'visible' }} - > -
- -