Marketing Site Updates (#199)

* add aws activate page * prr form and customer referral page * formatting * ensure querystring is always accessible without prop drilling * fix copypasta title * fix spacing issue on landing pages * update URL to our data room
aptible · Aug 14, 2021 · b7673af · b7673af
1 parent 8c3d2cb
commit b7673af
Show file tree

Hide file tree

Showing 27 changed files with 1,047 additions and 46 deletions.
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "gatsby-transformer-remark": "^2.3.8",
     "gatsby-transformer-yaml": "^2.1.10",
     "postcss-preset-env": "^6.6.0",
+    "query-string": "^7.0.1",
     "react": "^16.8.4",
     "react-compound-slider": "^2.0.0",
     "react-dom": "^16.8.4",

diff --git a/src/components/aws-activate-form/ActivateForm.js b/src/components/aws-activate-form/ActivateForm.js
@@ -0,0 +1,200 @@
+import * as queryString from 'query-string';
+import React, { useState } from 'react';
+import { Helmet } from 'react-helmet';
+import cn from 'classnames';
+import styles from './ActivateForm.module.css';
+import buttonStyles from '../buttons/Button.module.css';
+import { event, identify, trackOnLinkedIn } from '../../lib/aptible/analytics';
+import { querystring } from '../../lib/util';
+
+const AWS_ACTIVATE_UNIQUE_CODE = `A3POPC`;
+
+const injectedQueryParams = [
+  'utm_campaign',
+  'utm_medium',
+  'utm_source',
+  'utm_term',
+  AWS_ACTIVATE_UNIQUE_CODE,
+];
+
+const options = [
+  'SOC 2 ',
+  'HIPAA',
+  'HITRUST',
+  'FedRAMP',
+  'PCI DSS',
+  'ISO 27001',
+  'Other Security Framework',
+  'None',
+];
+
+const validateEmail = email => {
+  if (!email) return { ok: false, message: 'email cannot be empty' };
+  return { ok: true, message: '' };
+};
+
+export const ActivateForm = ({
+  id,
+  btnText = 'Submit',
+  successText = 'Thanks! Our team will follow up shortly.',
+  inputPlaceholder = 'Enter your email',
+  onSuccess = () => {},
+  onCancel = () => {},
+}) => {
+  const [submitted, setSubmitted] = useState(false);
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [company, setCompany] = useState('');
+  const [website, setWebsite] = useState('');
+  const [requirements, setRequirements] = useState('');
+  const [currentHost, setCurrentHost] = useState('');
+  const [error, setError] = useState('');
+  const queryParams = queryString.parse(querystring());
+
+  const onSubmit = () => {
+    const result = validateEmail(email);
+    if (!result.ok) {
+      setError(result.message);
+      return;
+    }
+    identify(email);
+    event('Email Collected', { formId: id });
+    event('AWS Activate Application Submitted', {
+      name,
+      email,
+      company,
+      website,
+      requirements,
+      currentHost,
+    });
+    setSubmitted(true);
+    setError('');
+    trackOnLinkedIn();
+    setTimeout(onSuccess, 500);
+  };
+
+  return (
+    <div>
+      <Helmet>
+        <script
+          type="text/javascript"
+          id="hs-script-loader"
+          async
+          defer
+          src="//js.hs-scripts.com/20235662.js"
+        />
+      </Helmet>
+
+      <iframe
+        name="captureFrame"
+        height="0"
+        width="0"
+        style={{ display: 'none' }}
+      />
+
+      {submitted && (
+        <div className={styles.submissionNotification}>{successText}</div>
+      )}
+
+      <div
+        className={styles.leadFormContainer}
+        style={{ opacity: submitted ? 0 : 1 }}
+      >
+        <form
+          id={id}
+          onSubmit={onSubmit}
+          target="captureFrame"
+          className={styles.leadForm}
+        >
+          <h3>Submit Your Application</h3>
+
+          {injectedQueryParams.map(k => (
+            <input hidden name={k} key={k} value={queryParams[k]} />
+          ))}
+
+          <p className="L">
+            Please complete the application form below. Someone from Aptible
+            will reach out to discuss next steps once your application has been
+            received.
+          </p>
+
+          <input
+            required
+            className={styles.leadFormInput}
+            onChange={e => setName(e.target.value)}
+            name="Name"
+            type="text"
+            placeholder={'Your Full Name'}
+          />
+
+          <input
+            required
+            className={styles.leadFormInput}
+            onChange={e => setEmail(e.target.value)}
+            type="email"
+            name="Email"
+            placeholder={'Your Company Email'}
+          />
+
+          <input
+            required
+            className={styles.leadFormInput}
+            onChange={e => setCompany(e.target.value)}
+            type="text"
+            name="Company Name"
+            placeholder={'Company Name'}
+          />
+
+          <input
+            required
+            className={styles.leadFormInput}
+            onChange={e => setWebsite(e.target.value)}
+            type="url"
+            name="Company Website"
+            placeholder={'Company Website'}
+          />
+
+          <input
+            required
+            className={styles.leadFormInput}
+            onChange={e => setCurrentHost(e.target.value)}
+            type="text"
+            name="Current Hosting Provider"
+            placeholder={'Current Hosting Provider'}
+          />
+
+          <p style={{ marginTop: 0 }}>
+            Do you have any compliance and security requirements? Select all
+            that apply.
+          </p>
+
+          <div className={styles.options}>
+            {options.map(option => (
+              <div className={styles.option}>
+                <input
+                  name="complianceRequirements[]"
+                  id={option}
+                  type="checkbox"
+                  value={option}
+                />
+                <label for={option}>{option}</label>
+              </div>
+            ))}
+          </div>
+
+          <button
+            className={cn(buttonStyles.button, styles.button)}
+            type="submit"
+          >
+            {btnText}
+          </button>
+
+          <button type="cancel" className={styles.cancel} onClick={onCancel}>
+            Cancel
+          </button>
+        </form>
+        <div className={styles.error}>{error ? error : ''}</div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/aws-activate-form/ActivateForm.module.css b/src/components/aws-activate-form/ActivateForm.module.css
@@ -0,0 +1,126 @@
+.leadFormContainer {
+  padding: 48px;
+  margin: 0;
+  transition: opacity 300ms;
+  max-height: 100vh;
+  overflow-y: scroll;
+}
+
+.leadFormContainer form {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.button {
+  height: 56px;
+}
+
+.leadForm {
+  display: flex;
+  justify-content: center;
+}
+
+.leadFormInput[type='email'],
+.leadFormInput[type='url'],
+.leadFormInput[type='text'] {
+  flex: 1;
+  border: 1px solid rgba(255,255,255,.25);
+  border-width: 0;
+  border-bottom-width: 1px;
+  background: 0;
+  padding: 16px;
+  padding-left: 10px;
+  font-size: 18px;
+  color: white;
+  mix-blend-mode: unset;
+  box-shadow: none;
+  margin-bottom: 16px;
+  transition: 220ms all;
+}
+
+.leadFormInput[type='email']:hover,
+.leadFormInput[type='url']:hover,
+.leadFormInput[type='text']:hover {
+  background: rgba(255,255,255,.05);
+}
+
+.leadFormInput[type='email']:focus,
+.leadFormInput[type='url']:focus,
+.leadFormInput[type='text']:focus {
+  border-color: rgba(255,255,255,.5);
+  background: rgba(255,255,255,.10);
+}
+
+.leadFormInput[type='email']::placeholder,
+.leadFormInput[type='url']::placeholder,
+.leadFormInput[type='text']::placeholder {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.submissionNotification {
+  margin: 48px;
+}
+
+.error {
+  color: tomato;
+  margin-top: 10px;
+}
+
+
+.options {
+  margin-bottom: 32px;
+  flex-wrap: wrap;
+}
+
+.options, .option {
+  display: flex;
+  flex-direction: row;
+}
+
+.option {
+  margin-right: 24px;
+  margin-bottom: 24px;
+}
+
+.options label {
+  line-height: 14px; 
+}
+
+.options input {
+  margin-right: 12px;
+  margin-top: 1px;
+}
+
+.cancel {
+  color: var(--white-seventy);
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 24px 0;
+  display: block;
+  cursor: pointer;
+}
+
+.cancel:hover {
+  color: white;
+}
+
+@media (--mobile) {
+  .leadFormContainer form {
+    flex-direction: column;
+    justify-content: flex-start;
+    width: 100%;
+  }
+  .leadFormInput[type='email'] {
+    padding: 12px;
+    margin-bottom: 4px;
+  }
+
+  .leadFormContainer {
+    height: auto;
+    padding: 8px;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 8px
+  }
+}
diff --git a/src/components/aws-activate-form/index.js b/src/components/aws-activate-form/index.js
@@ -0,0 +1 @@
+export { ActivateForm as default } from './ActivateForm';
diff --git a/src/components/compliance/GdprSubnav.js b/src/components/compliance/GdprSubnav.js
@@ -60,7 +60,9 @@ class GdprSubnav extends React.Component {
                   {subpart.subparts.map((article, articleIdx) => (
                     <Link
                       className={styles.articleLink}
-                      to={`/${this.props.regulation.slugs.site}/${this.props.regulation.slugs.regulations}/${article.url}/`}
+                      to={`/${this.props.regulation.slugs.site}/${
+                        this.props.regulation.slugs.regulations
+                      }/${article.url}/`}
                       key={articleIdx}
                     >
                       <span className={styles.articleId}>

diff --git a/src/components/compliance/HipaaSubnav.js b/src/components/compliance/HipaaSubnav.js
@@ -61,7 +61,9 @@ class HipaaSubnav extends React.Component {
                   {subpart.subparts.map((article, articleIdx) => (
                     <Link
                       className={styles.articleLink}
-                      to={`/${this.props.regulation.slugs.site}/${this.props.regulation.slugs.regulations}/${article.url}/`}
+                      to={`/${this.props.regulation.slugs.site}/${
+                        this.props.regulation.slugs.regulations
+                      }/${article.url}/`}
                       key={articleIdx}
                     >
                       <span className={styles.articleId}>{article.id}</span>

diff --git a/src/components/customers/CustomerEmpowerment.js b/src/components/customers/CustomerEmpowerment.js
@@ -42,7 +42,9 @@ export default () => (
       </div>
 
       <div
-        className={`${styles.bullet} ${styles.bulletLeft} ${styles.bulletBottom}`}
+        className={`${styles.bullet} ${styles.bulletLeft} ${
+          styles.bulletBottom
+        }`}
       >
         <h3>We'll share our knowledge even if you're not a customer</h3>
         <p className="L">
@@ -57,7 +59,9 @@ export default () => (
       </div>
 
       <div
-        className={`${styles.bullet} ${styles.bulletRight} ${styles.bulletBottom}`}
+        className={`${styles.bullet} ${styles.bulletRight} ${
+          styles.bulletBottom
+        }`}
       >
         <h3>The customer is not always right</h3>
         <p className="L">
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { ActivateForm as default } from './ActivateForm';