Add reCAPTCHA support and Contact pages

Refactor NewsletterSignupForm and add recaptcha support Add contact forms Finish up contact pages and newletter signup recaptcha Fix build error remove unneeded page
pluralsh · Jul 8, 2023 · 8bb3dae · 8bb3dae
1 parent bfa77cc
commit 8bb3dae
Show file tree

Hide file tree

Showing 9 changed files with 421 additions and 206 deletions.
diff --git a/pages/contact-sales.tsx b/pages/contact-sales.tsx
@@ -0,0 +1,49 @@
+import { ColorModeProvider } from '@pluralsh/design-system'
+import Head from 'next/head'
+import Script from 'next/script'
+
+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'
+
+import { HubspotForm } from '../src/components/HubspotForm'
+import { StandardPage } from '../src/components/layout/FullPage'
+
+import { ContactHeader } from './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-4.jpg"
+      >
+        <ContactHeader
+          title="Drop us a note"
+          subtitle="Flexible and transparent pricing for everyone"
+        />
+      </HeaderPad>
+      <ColorModeProvider mode="light">
+        <div className="bg-fill-zero py-xxxxlarge">
+          <StandardPage>
+            <HubspotForm formId="5c21c2a5-0e6b-462e-be7e-11bb53209dfc" />
+          </StandardPage>
+        </div>
+      </ColorModeProvider>
+    </>
+  )
+}
+
+export const getStaticProps = async () =>
+  propsWithGlobalSettings({
+    footerVariant: FooterVariant.kitchenSink,
+  })
diff --git a/pages/contact.tsx b/pages/contact.tsx
@@ -0,0 +1,103 @@
+import { ColorModeProvider } from '@pluralsh/design-system'
+import Head from 'next/head'
+import Script from 'next/script'
+
+import classNames from 'classnames'
+
+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 { propsWithGlobalSettings } from '@src/utils/getGlobalProps'
+
+import { HubspotForm } from '../src/components/HubspotForm'
+import { StandardPage } from '../src/components/layout/FullPage'
+
+export function ContactHeader({
+  title,
+  subtitle,
+}: {
+  title: string
+  subtitle: string
+}) {
+  return (
+    <StandardPage>
+      <div
+        className={classNames(
+          'pt-xxxxlarge',
+          'pb-xxxxxlarge',
+          'lg:pt-xxxxxlarge',
+          'lg:pb-xxxxxxlarge'
+        )}
+      >
+        <Columns className="columns:items-center gap-y-medium">
+          <EqualColumn className="justify-start">
+            <TextLimiter>
+              <ResponsiveText
+                className="[text-wrap:balance]"
+                as="h2"
+                textStyles={{
+                  '': 'mHero1',
+                  md: 'mBigHeader',
+                }}
+              >
+                {title}
+              </ResponsiveText>
+            </TextLimiter>
+          </EqualColumn>
+          <EqualColumn>
+            <TextLimiter>
+              <ResponsiveText
+                as="p"
+                textStyles={{ '': 'mBody1' }}
+                color="text-light"
+                className="[text-wrap:balance] "
+              >
+                {subtitle}
+              </ResponsiveText>
+            </TextLimiter>
+          </EqualColumn>
+        </Columns>
+      </div>
+    </StandardPage>
+  )
+}
+
+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-4.jpg"
+      >
+        <ContactHeader
+          title="Drop us a note"
+          subtitle="We’re here to help with support available for teams of all
+                    sizes."
+        />
+      </HeaderPad>
+      <ColorModeProvider mode="light">
+        <div className="bg-fill-zero py-xxxxlarge">
+          <StandardPage>
+            <HubspotForm formId="4381b90a-ac28-4e54-842e-0319c16cf882" />
+          </StandardPage>
+        </div>
+      </ColorModeProvider>
+    </>
+  )
+}
+
+export const getStaticProps = async () =>
+  propsWithGlobalSettings({
+    footerVariant: FooterVariant.kitchenSink,
+  })
diff --git a/pages/newsletter-success.tsx b/pages/newsletter-success.tsx
diff --git a/public/forms/newsletter.html b/public/forms/newsletter.html
@@ -10,6 +10,7 @@
       action="/newsletter-success"
       method="POST"
       data-netlify="true"
+      data-netlify-recaptcha="true"
     >
       <input
         type="hidden"