From 3dc7f73b2a5fe318ed3a6ed633d8f218d3e14c39 Mon Sep 17 00:00:00 2001
From: Dominic Masters <dominic@domsplace.com>
Date: Thu, 28 Jun 2018 05:23:23 +1000
Subject: [PATCH] Styling Contact Page

---
 public/page/contact/ContactPage.jsx    | 84 +++++++++++++++-----------
 public/styles/pages/_contact-page.scss |  1 +
 2 files changed, 49 insertions(+), 36 deletions(-)

diff --git a/public/page/contact/ContactPage.jsx b/public/page/contact/ContactPage.jsx
index aecabe8..8ebf6bb 100644
--- a/public/page/contact/ContactPage.jsx
+++ b/public/page/contact/ContactPage.jsx
@@ -27,6 +27,8 @@ import Page, { PageBoundary } from './../Page';
 import Input, { Form, InputGroup, TextArea, Label, ButtonGroup } from './../../input/Input';
 import Language from './../../language/Language';
 import ElementScrollFader from './../../animation/fade/ElementScrollFader';
+import ContentBox from './../../content/ContentBox';
+import { Title, Paragraph } from './../../typography/Typography'
 import Section, {
   BodySection,
   ClearSection,
@@ -46,46 +48,56 @@ class ContactPage extends React.Component {
         <ClearSection />
 
         <PageBoundary small>
-          <SplitSection>
-            <Split>
-              <ElementScrollFader>
-                <BodySection>
-                  <Form>
-                    <InputGroup>
-                      <Label>{ Language.get("pages.contact.name.label") }</Label>
-                      <Input
-                        type="text"
-                        placeholder={ Language.get("pages.contact.name.placeholder") }
-                      />
-                    </InputGroup>
 
-                    <InputGroup >
-                      <Label>{ Language.get("pages.contact.email.label") }</Label>
-                      <Input
-                        type="email"
-                        placeholder={ Language.get("pages.contact.email.placeholder") }
-                      />
-                    </InputGroup>
+          <ElementScrollFader from="left">
+            <ContentBox box className="u-text-center">
+              <Title>Contact Me</Title>
+              <Paragraph>
+                Want to get in touch with me? Fill out this easy form and I should be
+                in touch shortly to chat! More of a phone person? Leave a number
+                and we can chat.
+              </Paragraph>
+            </ContentBox>
+          </ElementScrollFader>
 
-                    <InputGroup>
-                      <Label>{ Language.get("pages.contact.message.label") }</Label>
-                      <TextArea
-                        placeholder={ Language.get("pages.contact.message.placeholder") }
-                        rows="8"
-                        className="p-contact-page__message"
-                      />
-                    </InputGroup>
+          <br />
+          <br />
 
-                    <ButtonGroup>
-                      <Input type="submit" value={ Language.get("pages.contact.send") } primary="true" />
-                      <Input type="reset" value={ Language.get("pages.contact.reset") } />
-                    </ButtonGroup>
-                  </Form>
-                </BodySection>
-              </ElementScrollFader>
-            </Split>
+          <ElementScrollFader from="right">
+            <BodySection>
+              <Form>
+                <InputGroup>
+                  <Label>{ Language.get("pages.contact.name.label") }</Label>
+                  <Input
+                    type="text"
+                    placeholder={ Language.get("pages.contact.name.placeholder") }
+                  />
+                </InputGroup>
 
-          </SplitSection>
+                <InputGroup >
+                  <Label>{ Language.get("pages.contact.email.label") }</Label>
+                  <Input
+                    type="email"
+                    placeholder={ Language.get("pages.contact.email.placeholder") }
+                  />
+                </InputGroup>
+
+                <InputGroup>
+                  <Label>{ Language.get("pages.contact.message.label") }</Label>
+                  <TextArea
+                    placeholder={ Language.get("pages.contact.message.placeholder") }
+                    rows="8"
+                    className="p-contact-page__message"
+                  />
+                </InputGroup>
+
+                <ButtonGroup>
+                  <Input type="submit" value={ Language.get("pages.contact.send") } primary="true" />
+                  <Input type="reset" value={ Language.get("pages.contact.reset") } />
+                </ButtonGroup>
+              </Form>
+            </BodySection>
+          </ElementScrollFader>
         </PageBoundary>
 
         <ClearSection />
diff --git a/public/styles/pages/_contact-page.scss b/public/styles/pages/_contact-page.scss
index 517cbb5..232233c 100644
--- a/public/styles/pages/_contact-page.scss
+++ b/public/styles/pages/_contact-page.scss
@@ -10,6 +10,7 @@
 .p-contact-page {
   background-color: #37085E;
   background-image: url('./../images/patterns/arcade.svg');
+  background-size: 150% auto;
 
   &__message-element {
     resize: none;