Skip to content

Commit

Permalink
add contact-sales to cms (#128)
Browse files Browse the repository at this point in the history
* add contact-sales to cms

* update purple gradient

* fix careers page copy
  • Loading branch information
jsladerman authored Dec 4, 2024
1 parent 2477718 commit a9aaf56
Show file tree
Hide file tree
Showing 13 changed files with 1,674 additions and 335 deletions.
18 changes: 16 additions & 2 deletions pages/_document.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
// pages/_document.js
import Document, { Head, Html, Main, NextScript } from 'next/document'
import Script from 'next/script'

import { ServerStyleSheet } from 'styled-components'

Expand Down Expand Up @@ -33,6 +34,15 @@ class MyDocument extends Document {
return (
<Html data-theme="dark">
<Head>
<link
rel="preconnect"
href="https://fonts.googleapis.com"
/>
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossOrigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
rel="stylesheet"
Expand All @@ -41,14 +51,18 @@ class MyDocument extends Document {
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"
/>
<script
<Script
id="Cookiebot"
src="https://consent.cookiebot.com/uc.js"
data-cbid="c6718f17-016b-4d02-9bc2-9f1467f610fb"
data-blockingmode="manual"
type="text/javascript"
strategy="beforeInteractive"
data-widget-position="bottom-right"
/>
<Script
type="text/javascript"
src="//js.hsforms.net/forms/embed/v2.js"
/>
</Head>
<body>
{/* <!-- Google Tag Manager (noscript) --> */}
Expand Down
72 changes: 31 additions & 41 deletions pages/careers/hire/[job].tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import { ColorModeProvider } from '@pluralsh/design-system'
import { type GetStaticPaths, type GetStaticProps } from 'next'
import Head from 'next/head'
import Script from 'next/script'

import { FooterVariant } from '@src/components/FooterFull'
import { HeaderPad } from '@src/components/layout/HeaderPad'
Expand Down Expand Up @@ -29,45 +27,37 @@ export default function Index({
job: FullJobListingFragment
}) {
return (
<>
<Head>
<Script
type="text/javascript"
src="//js.hsforms.net/forms/embed/v2.js"
/>
</Head>
<ColorModeProvider mode="light">
<HeaderPad className="bg-fill-zero">
<FullPageWidth className="pt-[40px]">
<BackButton href="/careers#open-positions" />
</FullPageWidth>
<StandardPageWidth className="py-xxxxlarge">
<MarkdocMarketingPage
preContent={
<div className="pb-xxxlarge">
<ResponsiveText
as="h1"
textStyles={{ '': 'mHero1', md: 'mBigHeader' }}
color="text"
className="mt-medium "
>
{job.job_title}
</ResponsiveText>
<ResponsiveText
as="h3"
textStyles={{ '': 'mSubtitle2' }}
color="text-light"
>
Location: {job.location}
</ResponsiveText>
</div>
}
markdoc={markdoc}
/>
</StandardPageWidth>
</HeaderPad>
</ColorModeProvider>
</>
<ColorModeProvider mode="light">
<HeaderPad className="bg-fill-zero">
<FullPageWidth className="pt-[40px]">
<BackButton href="/careers#open-positions" />
</FullPageWidth>
<StandardPageWidth className="py-xxxxlarge">
<MarkdocMarketingPage
preContent={
<div className="pb-xxxlarge">
<ResponsiveText
as="h1"
textStyles={{ '': 'mHero1', md: 'mBigHeader' }}
color="text"
className="mt-medium "
>
{job.job_title}
</ResponsiveText>
<ResponsiveText
as="h3"
textStyles={{ '': 'mSubtitle2' }}
color="text-light"
>
Location: {job.location}
</ResponsiveText>
</div>
}
markdoc={markdoc}
/>
</StandardPageWidth>
</HeaderPad>
</ColorModeProvider>
)
}

Expand Down
8 changes: 0 additions & 8 deletions pages/careers/index.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import { type ComponentProps } from 'react'

import { ColorModeProvider } from '@pluralsh/design-system'
import Head from 'next/head'
import Script from 'next/script'

import { useTheme } from 'styled-components'

Expand Down Expand Up @@ -89,12 +87,6 @@ export default function Index({ jobs }: { jobs: MinJobListingFragment[] }) {

return (
<>
<Head>
<Script
type="text/javascript"
src="//js.hsforms.net/forms/embed/v2.js"
/>
</Head>
<HeaderPad
as={GradientBG}
size="cover"
Expand Down
49 changes: 12 additions & 37 deletions pages/contact-sales.tsx
Original file line number Diff line number Diff line change
@@ -1,41 +1,16 @@
import Head from 'next/head'
import Script from 'next/script'
import { type GetServerSideProps } from 'next'

import { FooterVariant } from '@src/components/FooterFull'
import { GradientBG } from '@src/components/layout/GradientBG'
import { HeaderPad } from '@src/components/layout/HeaderPad'
import { propsWithGlobalSettings } from '@src/utils/getGlobalProps'
export default function ContactSalesRedirect() {
return null
}

import { ContactHeader } from './contact'
export const getServerSideProps: GetServerSideProps = async () => {
const newPath = `/contact`

export default function Index() {
return (
<>
<Head>
<Script
type="text/javascript"
src="//js.hsforms.net/forms/embed/v2.js"
/>
</Head>
<HeaderPad
as={GradientBG}
size="cover"
position="top middle"
image="/images/gradients/gradient-bg-12.jpg"
>
<ContactHeader
title="Contact sales"
subtitle="Reach out to the team for demos, assistance with onboarding, or any inquiries about our products."
/>
</HeaderPad>
</>
)
return {
redirect: {
destination: newPath,
permanent: true,
},
}
}

export const getStaticProps = async () =>
propsWithGlobalSettings({
metaTitle: 'Contact sales',
metaDescription:
'Plural offers packages to teams of all sizes and flexible and transparent pricing for everyone.',
footerVariant: FooterVariant.kitchenSink,
})
149 changes: 49 additions & 100 deletions pages/contact.tsx
Original file line number Diff line number Diff line change
@@ -1,116 +1,65 @@
import { Button } from '@pluralsh/design-system'
import Head from 'next/head'
import Link from 'next/link'
import Script from 'next/script'

import { clsx } from 'clsx'
import { type InferGetStaticPropsType } from 'next'

import { directusClient } from '@src/apollo-client'
import { Hero } from '@src/components/custom-page/Hero'
import { FooterVariant } from '@src/components/FooterFull'
import { Columns, EqualColumn } from '@src/components/layout/Columns'
import { GradientBG } from '@src/components/layout/GradientBG'
import { HeaderPad } from '@src/components/layout/HeaderPad'
import { TextLimiter } from '@src/components/layout/TextLimiter'
import { ResponsiveText } from '@src/components/Typography'
import { StandardPageWidth } from '@src/components/layout/LayoutHelpers'
import {
ContactPageDocument,
type ContactPageQuery,
type ContactPageQueryVariables,
} from '@src/generated/graphqlDirectus'
import { propsWithGlobalSettings } from '@src/utils/getGlobalProps'

import { HubspotForm } from '../src/components/HubspotForm'
import { StandardPageWidth } from '../src/components/layout/LayoutHelpers'

export function ContactHeader({
title,
subtitle,
}: {
title: string
subtitle: string
}) {
return (
<StandardPageWidth>
<div
className={clsx(
'pt-xxxxlarge',
'pb-xxxxxlarge',
'lg:pt-xxxxxlarge',
'lg:pb-xxxxxxlarge'
)}
>
<Columns className="gap-y-medium columns:items-center">
<EqualColumn className="mb-xxlarge justify-start self-start lg:mb-0">
<TextLimiter>
<ResponsiveText
className="[text-wrap:balance]"
as="h2"
textStyles={{
'': 'mHero1',
md: 'mBigHeader',
}}
>
{title}
</ResponsiveText>
<ResponsiveText
as="p"
textStyles={{ '': 'mTitle2' }}
color="text-light"
className="mt-xlarge [text-wrap:balance]"
>
{subtitle}
</ResponsiveText>
<ResponsiveText
as="p"
textStyles={{ '': 'mBody1Bold' }}
color="text-light"
className="mt-xlarge [text-wrap:balance]"
>
Want to learn more about pricing?
</ResponsiveText>
<Button
large
secondary
outline
as={Link}
href="/pricing"
className="mt-medium w-fit"
>
Go to pricing
</Button>
</TextLimiter>
</EqualColumn>
<EqualColumn>
<HubspotForm formId="234b5476-6ee0-4a32-a677-aa1f0d318e9c" />
</EqualColumn>
</Columns>
</div>
</StandardPageWidth>
)
}

export default function Index() {
export default function Index({
heading,
bodyText,
ctaText,
ctaUrl,
form,
}: InferGetStaticPropsType<typeof getStaticProps>) {
return (
<>
<Head>
<Script
type="text/javascript"
src="//js.hsforms.net/forms/embed/v2.js"
<HeaderPad
as={GradientBG}
size="cover"
position="top middle"
image="/images/gradients/gradient-bg-12.jpg"
>
<StandardPageWidth className="py-xxxxlarge lg:py-xxxxxlarge">
<Hero
media_type="form"
heading={heading}
body_text={bodyText}
cta_text={ctaText}
cta_url={ctaUrl}
form={form}
/>
</Head>
<HeaderPad
as={GradientBG}
size="cover"
position="top middle"
image="/images/gradients/gradient-bg-12.jpg"
>
<ContactHeader
title="Contact sales"
subtitle="Reach out to the team for demos, assistance with onboarding, or any inquiries about our products."
/>
</HeaderPad>
</>
</StandardPageWidth>
</HeaderPad>
)
}

export const getStaticProps = async () =>
propsWithGlobalSettings({
export const getStaticProps = async () => {
const { data } = await directusClient.query<
ContactPageQuery,
ContactPageQueryVariables
>({
query: ContactPageDocument,
})

const page = data.contact_sales

return propsWithGlobalSettings({
heading: page?.heading,
bodyText: page?.body_text,
ctaText: page?.cta_text,
ctaUrl: page?.cta_url,
form: page?.form,
metaTitle: 'Contact us',
metaDescription:
'Plural offers support to teams of all sizes. We’re here to support our developers through our docs, Discord channel, or Twitter.',
footerVariant: FooterVariant.kitchenSink,
})
}
6 changes: 4 additions & 2 deletions src/components/HubspotForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -118,8 +118,8 @@ const HubspotFormSC = styled.div(({ theme: _ }) => ({
}))

export function HubspotForm({
region = 'na1',
portalId = '22363579',
region: rawRegion,
portalId: rawPortalId,
formId,
uniqueKey,
}: {
Expand All @@ -128,6 +128,8 @@ export function HubspotForm({
formId: string
uniqueKey?: string
}) {
const region = rawRegion ?? 'na1'
const portalId = rawPortalId ?? '22363579'
const id = `hbspt-f_${portalId}_${formId}_${uniqueKey}`

useEffect(() => {
Expand Down
Loading

0 comments on commit a9aaf56

Please sign in to comment.