Add Careers and Product pages

pluralsh · Jul 14, 2023 · 8870d79 · 8870d79
2 parents 8bb3dae + c60ed1a
commit 8870d79
Show file tree

Hide file tree

Showing 295 changed files with 3,429 additions and 545 deletions.
diff --git a/next.config.js b/next.config.js
@@ -28,7 +28,13 @@ module.exports = () => {
     },
     pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdoc'],
     async redirects() {
-      return []
+      return [
+        {
+          source: '/hiring-senior-account-executive',
+          destination: '/careers/hire/senior-account-executive',
+          permanent: true,
+        },
+      ]
     },
   })
 }
diff --git a/pages/404.tsx b/pages/404.tsx
@@ -1,21 +1,21 @@
 import Link from '@pluralsh/design-system/dist/markdoc/components/Link'
 
-import { StandardPage } from '@src/components/layout/FullPage'
 import { HeaderPad } from '@src/components/layout/HeaderPad'
+import { StandardPageWidth } from '@src/components/layout/LayoutHelpers'
 import { Body1, Heading1 } from '@src/components/Typography'
 import { propsWithGlobalSettings } from '@src/utils/getGlobalProps'
 
 export default function Plural404() {
   return (
-    <StandardPage as={HeaderPad}>
+    <StandardPageWidth as={HeaderPad}>
       <div className="flex flex-col gap-y-medium ">
         <Heading1>Page not found</Heading1>
         <Body1>
           Sorry, this page doesn't appear to exist. Would you like to vist the{' '}
           <Link href="/">home page</Link>?
         </Body1>
       </div>
-    </StandardPage>
+    </StandardPageWidth>
   )
 }
 

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -37,6 +37,7 @@ export type GlobalPageProps = {
   metaTitleFull?: string
   metaDescription?: string
   footerVariant?: FooterVariant
+  showHeaderBG?: boolean
 }
 
 type MyAppProps = AppProps<GlobalPageProps & { globalProps: GlobalProps }>
@@ -47,8 +48,6 @@ export type MarkdocHeading = {
   title?: string
 }
 
-const docsStyledTheme = { ...styledTheme, ...{ docs: { topNavHeight: 72 } } }
-
 const useNavigate = () => {
   const router = useRouter()
 
@@ -110,7 +109,7 @@ function App({ Component, pageProps }: MyAppProps) {
           <SWRConfig value={gProps.swrConfig}>
             <BreakpointProvider>
               <ThemeProvider theme={honorableTheme}>
-                <StyledThemeProvider theme={docsStyledTheme}>
+                <StyledThemeProvider theme={styledTheme}>
                   <FillLevelProvider value={0}>{app}</FillLevelProvider>
                 </StyledThemeProvider>
               </ThemeProvider>

diff --git a/pages/about/[[...about-index]].tsx → pages/about.tsx b/pages/about/[[...about-index]].tsx → pages/about.tsx
@@ -1,32 +1,23 @@
 import { type ReactNode } from 'react'
 
 import { ColorModeProvider } from '@pluralsh/design-system'
-import {
-  type GetStaticPaths,
-  type GetStaticProps,
-  type InferGetStaticPropsType,
-} from 'next'
+import { type GetStaticProps, type InferGetStaticPropsType } from 'next'
 
 import classNames from 'classnames'
 
 import { FooterVariant } from '@src/components/FooterFull'
 import { Columns, EqualColumn } from '@src/components/layout/Columns'
-import { StandardPage } from '@src/components/layout/FullPage'
 import { GradientBG } from '@src/components/layout/GradientBG'
+import { StandardPageWidth } from '@src/components/layout/LayoutHelpers'
 import { TextLimiter } from '@src/components/layout/TextLimiter'
 import { TeamSection } from '@src/components/page-sections/TeamSection'
-import { Cta, ResponsiveText, SectionHead } from '@src/components/Typography'
+import { CenteredSectionHead } from '@src/components/SectionHeads'
+import { Cta, ResponsiveText } from '@src/components/Typography'
 import { getTeamMembers } from '@src/data/getTeamMembers'
 import { type TeamMemberFragment } from '@src/generated/graphqlDirectus'
 import { propsWithGlobalSettings } from '@src/utils/getGlobalProps'
-import { indexPageStaticPaths } from '@src/utils/staticPaths'
 
-import { HeaderPad } from '../../src/components/layout/HeaderPad'
-
-const DUMMY_PATH_PARAM = 'about' as const
-
-export const getStaticPaths: GetStaticPaths = async () =>
-  indexPageStaticPaths(DUMMY_PATH_PARAM)
+import { HeaderPad } from '../src/components/layout/HeaderPad'
 
 export default function About({
   teamMembers,
@@ -46,7 +37,7 @@ export default function About({
             'xxl:pb-xxxxxxlarge'
           )}
         >
-          <StandardPage
+          <StandardPageWidth
             className={classNames(
               'flex flex-col gap-xlarge',
               'pt-xxlarge pb-xxxxxlarge',
@@ -101,8 +92,8 @@ export default function About({
                 </TextLimiter>
               </EqualColumn>
             </Columns>
-          </StandardPage>
-          <StandardPage>
+          </StandardPageWidth>
+          <StandardPageWidth>
             <div className="text-center">
               <ResponsiveText
                 textStyles={{ '': 'aOverline' }}
@@ -132,7 +123,7 @@ export default function About({
                 </div>
               </div>
             </div>
-          </StandardPage>
+          </StandardPageWidth>
         </div>
       </HeaderPad>
       <ColorModeProvider mode="light">
@@ -146,42 +137,41 @@ export default function About({
             'text-text'
           )}
         >
-          <StandardPage className="mb-xxxxxlarge max:mb-xxxxxxlarge">
-            <SectionHead
-              h1="About us"
-              h2="Who we are"
+          <StandardPageWidth className="mb-xxxxxlarge max:mb-xxxxxxlarge">
+            <CenteredSectionHead
+              preHeading="About us"
+              heading="Who we are"
+              intro={
+                <p>
+                  We are a dynamic and innovative company that specializes in
+                  creating meaningful connections and fostering collaboration.
+                  At Plural, we believe in the power of diversity and inclusion,
+                  recognizing that when different perspectives come together,
+                  incredible things happen.
+                </p>
+              }
+              className="mb-xxxxlarge text-center"
             />
             <TextLimiter className="mx-auto">
               <ResponsiveText
                 textStyles={{ '': 'mBody2' }}
                 color="text-light"
-                className="mb-xxxxlarge text-center"
-              >
-                We are a dynamic and innovative company that specializes in
-                creating meaningful connections and fostering collaboration. At
-                Plural, we believe in the power of diversity and inclusion,
-                recognizing that when different perspectives come together,
-                incredible things happen.
-              </ResponsiveText>
+                className=""
+              />
             </TextLimiter>
             <img
               alt="The Plural team standing together on a sidewalk in the French Quarter of New Orleans."
               src="/images/about/team.jpg"
             />
-          </StandardPage>
-          <StandardPage className="mb-xxxxxlarge max:mb-xxxxxxlarge">
-            <SectionHead
-              h1="Our company values"
-              h2="As a driven and cohesive team, we share a common 
+          </StandardPageWidth>
+          <StandardPageWidth className="mb-xxxxxlarge max:mb-xxxxxxlarge">
+            <CenteredSectionHead
+              preHeading="Our company values"
+              heading="As a driven and cohesive team, we share a common 
 mission to build something unique."
-            />
-            <ResponsiveText
-              textStyles={{ '': 'mBody2' }}
-              color="text-light"
+              intro={<p> How we stay connected as a team</p>}
               className="mb-xxxxlarge text-center"
-            >
-              How we stay connected as a team
-            </ResponsiveText>
+            />
             <Columns
               className={classNames(
                 'gap-y-xxxxlarge md:gap-y-xxxxxlarge',
@@ -238,16 +228,6 @@ mission to build something unique."
                     'columns:gap-y-xxlarge'
                   )}
                 >
-                  <Value label="Transparency">
-                    <p className="m-0 p-0">
-                      We believe in the power of transparency. We strive to
-                      provide open and honest information about our processes,
-                      products, and decisions. We are committed to sharing
-                      insights, updates, and feedback with our community and
-                      stakeholders. Transparency is at the core of everything we
-                      do.
-                    </p>
-                  </Value>
                   <Value label="Excellence">
                     <p className="m-0 p-0">
                       We have a passion for excellence and continuously strive
@@ -279,7 +259,7 @@ mission to build something unique."
                 </TextLimiter>
               </EqualColumn>
             </Columns>
-          </StandardPage>
+          </StandardPageWidth>
 
           <TeamSection members={teamMembers} />
         </div>
@@ -292,7 +272,7 @@ function Value({ label, children }: { label: ReactNode; children: ReactNode }) {
   return (
     <div className="flex flex-col gap-y-xxlarge">
       <ResponsiveText
-        as="h4"
+        as="h3"
         textStyles={{ '': 'mTitle1' }}
         color="text"
       >

diff --git a/pages/applications/[repo].tsx b/pages/applications/[repo].tsx
@@ -20,7 +20,7 @@ import { mqs } from '@src/breakpoints'
 import Embed from '@src/components/Embed'
 import { FooterVariant } from '@src/components/FooterFull'
 import { Columns, EqualColumn } from '@src/components/layout/Columns'
-import { StandardPage } from '@src/components/layout/FullPage'
+import { StandardPageWidth } from '@src/components/layout/LayoutHelpers'
 import { TextLimiter } from '@src/components/layout/TextLimiter'
 import { BackButton } from '@src/components/Nav'
 import BuildStack, {
@@ -42,7 +42,7 @@ import {
   Heading3,
   Overline,
 } from '@src/components/Typography'
-import { getAppMeta, getProviderIcon } from '@src/consts'
+import { QUICKSTART_VIDEO_URL, getAppMeta, getProviderIcon } from '@src/consts'
 import {
   type FullRepo,
   type MinRepo,
@@ -71,7 +71,7 @@ import { HeaderPad } from '../../src/components/layout/HeaderPad'
 import { ProviderIcon } from '../../src/components/ProviderIcon'
 import { RepoSocials } from '../../src/components/RepoSocials'
 
-const DEFAULT_HERO_VIDEO = 'https://www.youtube.com/watch?v=mFDA-718RhI'
+const DEFAULT_HERO_VIDEO = QUICKSTART_VIDEO_URL
 
 function isRecipe(
   recipe: RecipeFragment | null | undefined
@@ -163,9 +163,9 @@ export default function App({
 
   return (
     <HeaderPad as={GradientBG}>
-      <StandardPage>
+      <StandardPageWidth>
         <div className="py-[40px] md:pb-xxxlarge">
-          <BackButton />
+          <BackButton href="/marketplace" />
         </div>
         <Columns className="gap-y-xxlarge">
           <EqualColumn>
@@ -267,7 +267,7 @@ export default function App({
             </SingleAccordion>
           )}
         </div>
-      </StandardPage>
+      </StandardPageWidth>
       <ProductValueSection
         name={repo.displayName}
         isStack={false}