Testing some designs

public/page/PageBoundary.jsx

@@ -24,8 +24,12 @@
 import React from 'react';
 
 export default function(props) {
+  let clazzes = "c-page__boundary";
+  if(props.full) clazzes += " is-full";
+  if(props.small) clazzes += " is-small";
+
   return (
-    <div className={"c-page__boundary" + (props.full ? " is-full" : "") }>
+    <div className={ clazzes }>
       { props.children }
     </div>
   );

public/page/contact/ContactPage.jsx

@@ -28,6 +28,7 @@ import Section, { BodySection } from './../../section/Section';
 import Input, { Form, InputGroup, TextArea, Label, ButtonGroup } from './../../input/input';
 import Language from './../../language/Language';
 import SplitSection, { Split } from './../../section/split/SplitSection';
+import ClearSection from './../../section/layout/ClearSection';
 
 class ContactPage extends React.Component {
   constructor(props) {
@@ -37,22 +38,11 @@ class ContactPage extends React.Component {
   render() {
     return (
       <Page style="contact-page" className="p-contact-page">
-        <Section>
-          <br />
-          <br />
-          <br />
-          <br />
-          <br />
-          <br />
-          <br />
-          <br />
-          <br />
-          <br />
-          <br />
-        </Section>
+        <ClearSection />
 
-        <PageBoundary>
+        <PageBoundary small>
           <SplitSection>
+
             <Split>
               <BodySection>
                 <Form>
@@ -76,7 +66,8 @@ class ContactPage extends React.Component {
                     <Label>{ Language.get("pages.contact.message.label") }</Label>
                     <TextArea
                       placeholder={ Language.get("pages.contact.message.placeholder") }
-                      rows="6"
+                      rows="8"
+                      className="p-contact-page__message"
                     />
                   </InputGroup>
 
@@ -88,8 +79,6 @@ class ContactPage extends React.Component {
               </BodySection>
             </Split>
 
-            <Split>
-            </Split>
           </SplitSection>
         </PageBoundary>
       </Page>

public/page/home/Homepage.jsx

@@ -33,12 +33,14 @@ export default function() {
 
   return (
     <Page style="home-page" className="p-home-page">
+
+      { /* Sections */ }
       <ImageSection
-        src={ require('./../../images/2400x1200.png') }
+        src={ require('./../../images/banners/homepage/palms.svg') }
         alt="domsPlace"
       >
         <PageBoundary full>
-          <FloatingContentBox position="middle right" size="small" className="u-text-center ">
+          <FloatingContentBox position="middle center" size="small" className="u-text-center">
             <Title>Development & Design</Title>
             <Subtitle>I'm not good at either.</Subtitle>
           </FloatingContentBox>