Thank you page (#24)

* centered content

* updated thank you page

* updated thank you

* updated thank you page

constants.js

@@ -0,0 +1,7 @@
+module.exports = {
+    facebook: 'https://www.facebook.com/Pi515/',
+    twitter: 'https://twitter.com/LOVEPI515',
+    phoneNumber: '515-344-4326',
+    address: '4300 Beaver Avenue Des Moines, IA 50310',
+    email: '[email protected]'
+}

src/pages/contact/index.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { navigate } from 'gatsby-link'
 import Layout from '../../components/Layout'
+import constants from '../../../constants'
 
 function encode(data) {
   return Object.keys(data)
@@ -9,12 +10,6 @@ function encode(data) {
 }
 
 export default class Index extends React.Component {
-  facebook = 'https://www.facebook.com/Pi515/';
-  twitter = 'https://twitter.com/LOVEPI515';
-  phoneNumber = '515-344-4326';
-  address = '4300 Beaver Avenue Des Moines, IA 50310';
-  email = '[email protected]';
-
   constructor(props) {
     super(props);
     this.state = { isValidated: false }
@@ -46,13 +41,13 @@ export default class Index extends React.Component {
           <div className="container columns is-mobile">
             <address className="content column">
               <h3>Pursuit of Innovation</h3>
-              <div>Phone number: <a href={'tel:' + this.phoneNumber}>{this.phoneNumber}</a></div>
-              <div>Email: <a href={'mailto:' + this.email}>{this.email}</a></div>
-              <div>Address: <a href={'geo:' + this.address}>4300 Beaver Avenue Des Moines, IA 50310</a></div>
+              <div>Phone number: <a href={'tel:' + constants.phoneNumber}>{constants.phoneNumber}</a></div>
+              <div>Email: <a href={'mailto:' + constants.email}>{constants.email}</a></div>
+              <div>Address: <a href={'geo:' + constants.address}>{constants.address}</a></div>
               <div>Hours: 9am - 5pm</div>
               <div>
-                <div><a href={this.facebook}>Facebook</a></div>
-                <div><a href={this.twitter}>Twitter</a></div>
+                <div><a href={constants.facebook}>Facebook</a></div>
+                <div><a href={constants.twitter}>Twitter</a></div>
               </div>
               <iframe
                 title="map"

src/pages/contact/thanks.js

@@ -1,13 +1,28 @@
 import React from 'react'
 import Layout from '../../components/Layout'
+import constants from '../../../constants'
 
 export default () => (
   <Layout>
     <section className="section">
-      <div className="container">
-        <div className="content">
-          <h1>Thank you!</h1>
-          <p>This is a custom thank you page for form submissions</p>
+      <div className="columns is-centered is-vcentered">
+        <div class="column is-half has-text-centered">
+          <div className="content">
+            <h1>Thanks for being Awesome!</h1>
+            <p>
+              We appreciate that you've taken the time to write us. If your
+              inquiry is urgent, please use the telephone number listed below to talk to one
+              of our staff members. Otherwise, we will reply by email as soon as possible.
+              <br/><br/>
+              Talk to you soon!
+            </p>
+          </div>
+          <address className="content column">
+            <h3>Pursuit of Innovation</h3>
+            <div>Phone number: <a href={'tel:' + constants.phoneNumber}>{constants.phoneNumber}</a></div>
+            <div>Email: <a href={'mailto:' + constants.email}>{constants.email}</a></div>
+            <div>Address: <a href={'geo:' + constants.address}>{constants.address}</a></div>
+          </address>
         </div>
       </div>
     </section>