Gherkin cypress spike (#673)

* integrate gherkin/cucumber w/ cypress

- change cypress.json config from e2e back to standard integration
- add cypress-cucumber-preprocessor
- add integration test of about page

* add a title to each page

* add intl to the 404 page

* Refactor explore tool page

- add intl to static strings
- replace component css with <Grid> layout

* Add title to contact page

* add intl to title of page

* Add gherkin tests for nav to about page

- navigate from any page to the about page
- ensure each link has the title correct on that page

client/src/pages/cejst.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
+import {defineMessages} from 'react-intl';
 import {Link} from 'gatsby-plugin-intl';
+import {useIntl} from 'gatsby-plugin-intl';
+import {Grid} from '@trussworks/react-uswds';
 
 import AlertWrapper from '../components/AlertWrapper';
 import HowYouCanHelp from '../components/HowYouCanHelp';
@@ -8,10 +11,6 @@ import Layout from '../components/layout';
 import MapWrapper from '../components/MapWrapper';
 import MapLegend from '../components/MapLegend';
 
-import * as styles from './cejst.module.scss';
-import {Grid} from '@trussworks/react-uswds';
-
-
 interface IMapPageProps {
   location: Location;
 }
@@ -19,33 +18,52 @@ interface IMapPageProps {
 const CEJSTPage = ({location}: IMapPageProps) => {
   // We temporarily removed MapControls, which would enable you to `setFeatures` also, for now
   //   We will bring back later when we have interactive controls.
-  return (<Layout location={location}>
+
+  const intl = useIntl();
+  const messages = defineMessages({
+    exploreToolTitleText: {
+      id: 'exploreTool.title.text',
+      defaultMessage: 'Explore the tool',
+      description: 'explore the tool title text',
+    },
+    exploreToolHeadingText: {
+      id: 'exploreTool.heading.text',
+      defaultMessage: 'Explore the tool',
+      description: 'explore the tool heading text',
+    },
+    exploreToolPageText: {
+      id: 'exploreTool.page.text',
+      defaultMessage: 'Zoom into the map to see which communities the tool has currently'+
+      'identified as prioritized (the top 25% of communities) or on the'+
+      'threshold. Learn more about the formula and datasets that were'+
+      'used to prioritize these communities on the',
+      description: 'explore the tool page text',
+    },
+
+  });
+
+  return (<Layout location={location} title={intl.formatMessage(messages.exploreToolTitleText)}>
     <J40MainGridContainer>
       <AlertWrapper showBetaAlert={true} showLimitedDataAlert={false}/>
     </J40MainGridContainer>
 
     <J40MainGridContainer>
+      <h1>{intl.formatMessage(messages.exploreToolTitleText)}</h1>
       <Grid row className={'j40-mb-5'}>
-        <Grid col>
+        <Grid col={12} tablet={{col: 6}}>
           <section>
-            <h1 className={styles.explorePageHeader}>Explore the tool</h1>
-            <div className={styles.explorePageSubHeader}>
-              <div className={styles.explorePageHeaderText}>
-                <p>
-              Zoom into the map to see which communities the tool has currently
-              identified as prioritized (the top 25% of communities) or on the
-              threshold. Learn more about the formula and datasets that were
-              used to prioritize these communities on the
-                  {` `}
-                  <Link to={'/methodology'}>Data & methodology</Link>
-                  {` `}
-              page.
-                </p>
-              </div>
-              <MapLegend />
-            </div>
+            <p>
+              {intl.formatMessage(messages.exploreToolPageText)}
+              {` `}
+              <Link to={'/methodology'}>Data & methodology</Link>
+              {` `}
+                  page.
+            </p>
           </section>
         </Grid>
+        <Grid col={12} tablet={{col: 6}}>
+          <MapLegend />
+        </Grid>
       </Grid>
 
       <Grid row>