Restructuring folders [ Broken ]

public/components/page/Page.jsx

@@ -0,0 +1,72 @@
+// Copyright (c) 2018 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+import React from 'react';
+import { connect } from 'react-redux';
+import { Helmet } from "react-helmet";
+import PageBoundary from './PageBoundary';
+import Language from './../../language/Language';
+
+class Page extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let clazzes = "c-page";
+
+    if(this.props.className) clazzes += " " + this.props.className;
+
+    let title;
+    if(
+      (typeof this.props.title === typeof undefined ||
+      typeof this.props.title.length === typeof undefined ||
+      !this.props.title.length) && this.props.style != "home-page"
+    ) {
+      console.exception("This page (" + (this.props.style || this.props.className) + ") does not have a title!");
+    } else {
+      title = <title>{ this.props.title }</title>
+    }
+
+    return (
+      <div className={clazzes}>
+        <Helmet defaultTitle={ Language.get("site.title") } titleTemplate={ Language.get("site.titleTemplate") }>
+          { title }
+        </Helmet>
+        { this.props.children }
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = function(state) {
+  return {
+    code: state.language.code
+  }
+}
+
+export default connect(mapStateToProps)(Page);
+
+export {
+  PageBoundary
+}

public/components/page/PageBoundary.jsx

@@ -0,0 +1,37 @@
+// Copyright (c) 2018 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+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";
+  if(props.className) clazzes += " " + props.className;
+
+  return (
+    <div className={ clazzes }>
+      { props.children }
+    </div>
+  );
+}

public/components/page/Routes.jsx

@@ -0,0 +1,86 @@
+// Copyright (c) 2018 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+import React from 'react';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import { withRouter } from 'react-router';
+import PropTypes from 'prop-types'
+import { HashRouter, Route, Switch } from 'react-router-dom';
+
+import Header from './../header/Header';
+import Footer from './../footer/Footer';
+
+//Pages
+import Homepage from './home/Homepage';
+import ContactPage from './contact/ContactPage';
+
+import PrivacyPolicyPage from './legal/privacy/PrivacyPolicyPage';
+
+const RouteWrapper = (props) => {
+  let newProps = Object.assign({}, props);
+  return (
+    <Route {...props} render={() => {
+        let CustomTag = props.page;
+        return (
+          <main className="c-main">
+            <CustomTag />
+            <Footer />
+          </main>
+        );
+    }}/>
+  );
+};
+
+class Routes extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const { match, location, history } = this.props;
+
+    return (
+      <Route>
+        <TransitionGroup className="o-page-transition__container">
+          <CSSTransition
+            key={ location.pathname }
+            timeout={1000}
+            classNames="o-page-transition"
+            mountOnEnter={ true }
+            unmountOnExit={ true }
+            onEntering={ this.props.onEntering }
+          >
+            <Switch location={ location }>
+              <RouteWrapper exact path="/" page={ Homepage } />
+              <RouteWrapper exact path="/contact" page={ ContactPage } />
+
+              <RouteWrapper exact path="/legal/privacy" page={ PrivacyPolicyPage } />
+            </Switch>
+          </CSSTransition>
+        </TransitionGroup>
+      </Route>
+    );
+  }
+}
+
+export default withRouter(Routes);

public/components/page/contact/ContactPage.jsx

@@ -0,0 +1,194 @@
+// Copyright (c) 2018 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import Page, { PageBoundary } from './../Page';
+import Language from './../../language/Language';
+import ElementScrollFader from './../../animation/fade/ElementScrollFader';
+import ContentBox from './../../content/ContentBox';
+import { Title, Heading1, Paragraph } from './../../typography/Typography';
+import Forms from './../../../common/Forms';
+import Input, {
+  Form,
+  FormManager,
+  InputGroup,
+  TextArea,
+  Label,
+  ButtonGroup
+} from './../../input/Input';
+import Section, {
+  BodySection,
+  ClearSection,
+  SplitSection,
+  Split
+} from './../../section/Section';
+import { openModal } from './../../actions/ModalActions';
+import Modal from './../../modal/Modal';
+
+class ContactPage extends React.Component {
+  constructor(props) {
+    super(props);
+
+    //Form Manager (For the form and elements)
+    this.manager = new FormManager();
+
+    this.state = {
+      sent: false
+    };
+  }
+
+  onSuccess(data) {
+    if(data !== true) return this.onError(data);
+    this.setState({
+      sent: true
+    });
+  }
+
+  onError(e, a, b) {
+    this.props.openModal(
+      <Modal close title={Language.get("pages.contact.error")}>
+        { e }
+      </Modal>
+    );
+  }
+
+  render() {
+
+    //Form
+    let inners;
+    if(this.state.sent) {
+      //Sent Display
+      inners = (
+        <ElementScrollFader from="bottom">
+          <ContentBox box className="u-text-center">
+            <Heading1>{ Language.get("pages.contact.success.heading") }</Heading1>
+            <Paragraph>{ Language.get("pages.contact.success.paragraph") }</Paragraph>
+          </ContentBox>
+        </ElementScrollFader>
+      );
+    } else {
+      //Form
+      inners = (
+        <ElementScrollFader from="right">
+          <BodySection>
+            <Form
+              post="/api/contact/send"
+              contentType="application/json"
+              ajax
+              loader
+              onSuccess={ this.onSuccess.bind(this) }
+              onError={ this.onError.bind(this) }
+              manager={ this.manager }
+            >
+              <InputGroup test="First Group">
+                <Label htmlFor="name">
+                  { Language.get("pages.contact.name.label") }
+                </Label>
+                <Input
+                  name="name"
+                  type="text"
+                  placeholder={ Language.get("pages.contact.name.placeholder") }
+                  required={ Forms.contact.name.required }
+                  maxLength={ Forms.contact.name.maxLength }
+                  manager={ this.manager }
+                />
+              </InputGroup>
+
+              <InputGroup >
+                <Label htmlFor="email">
+                  { Language.get("pages.contact.email.label") }
+                </Label>
+                <Input
+                  name="email"
+                  type="email"
+                  placeholder={ Language.get("pages.contact.email.placeholder") }
+                  required={ Forms.contact.email.required }
+                  maxLength={ Forms.contact.email.maxLength }
+                  manager={ this.manager }
+                />
+              </InputGroup>
+
+              <InputGroup>
+                <Label> htmlFor="message">
+                  { Language.get("pages.contact.message.label") }
+                </Label>
+                <TextArea
+                  name="message"
+                  placeholder={ Language.get("pages.contact.message.placeholder") }
+                  rows="8"
+                  className="p-contact-page__message"
+                  required={ Forms.contact.message.required }
+                  maxLength={ Forms.contact.message.maxLength }
+                  manager={ this.manager }
+                />
+              </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>
+      );
+    }
+
+    return (
+      <Page style="contact-page" className="p-contact-page" title={ Language.get("pages.contact.title") }>
+        <ClearSection />
+        <PageBoundary small>
+          <ElementScrollFader from="left">
+            <ContentBox box className="u-text-center">
+              <Title>{ Language.get("pages.contact.heading") }</Title>
+              <Paragraph>
+                { Language.get("pages.contact.paragraph") }
+              </Paragraph>
+            </ContentBox>
+          </ElementScrollFader>
+
+          <br />
+          <br />
+
+          { inners }
+        </PageBoundary>
+        <ClearSection />
+      </Page>
+    );
+  }
+}
+
+const mapStateToProps = function(state) {
+  return {
+    code: state.language.code
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return bindActionCreators({
+    openModal: openModal
+  },dispatch);
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ContactPage);

public/components/page/home/HomePage.jsx

@@ -0,0 +1,65 @@
+// Copyright (c) 2018 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+import React from 'react';
+import { connect } from 'react-redux';
+import Page from './../Page';
+import Language from './../../language/Language'
+
+import BannerSection from './sections/BannerSection';
+import PromoVideoSection from './sections/PromoVideoSection';
+import ProgrammingSection from './sections/ProgrammingSection';
+import PlatformsSection from './sections/PlatformsSection';
+import ExistingWorkSection from './sections/ExistingWorkSection';
+
+const HomePage = (props) => {
+  //Return
+  return (
+    <Page style="home-page" className="p-home-page" title={0}>
+
+      { /* Banner */ }
+      <BannerSection />
+
+      { /* Promo Video
+      <PromoVideoSection />
+      */ }
+
+      {/* Programming */}
+      <ProgrammingSection />
+
+      {/* Platforms */}
+      <PlatformsSection />
+
+      {/* Existing Work */}
+      <ExistingWorkSection />
+    </Page>
+  );
+}
+
+const mapStateToProps = (state) => {
+  return {
+    code: state.language.code
+  };
+}
+
+export default connect(mapStateToProps)(HomePage);

public/components/page/home/sections/BannerSection.jsx

@@ -0,0 +1,53 @@
+// Copyright (c) 2018 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+import React from 'react';
+import Language from './../../../language/Language';
+import { PageBoundary } from './../../Page';
+import { ImageSection } from './../../../section/Section';
+import FloatingContentBox from './../../../content/FloatingContentBox';
+import { Title, Subtitle } from './../../../typography/Typography';
+import ElementScrollFader from './../../../animation/fade/ElementScrollFader';
+
+
+export default (props) => {
+  return (
+    <ImageSection
+      className="p-home-page__banner"
+      src={ require('./../../../images/banners/about/glasses.svg') }
+      alt="domsPlace"
+      width="2400"
+      height="1200"
+      loadable
+    >
+      <PageBoundary full>
+        <FloatingContentBox position="middle center" size="large" className="u-text-center">
+          <ElementScrollFader from="bottom">
+            <Title>{ Language.get("pages.home.banner.title") }</Title>
+            <Subtitle className="u-responsive--small-up">{ Language.get("pages.home.banner.subtitle") }</Subtitle>
+          </ElementScrollFader>
+        </FloatingContentBox>
+      </PageBoundary>
+    </ImageSection>
+  );
+}

public/components/page/home/sections/ExistingWorkSection.jsx

@@ -0,0 +1,186 @@
+// Copyright (c) 2018 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+import React from 'react';
+import Language from './../../../language/Language';
+import { PageBoundary } from './../../Page';
+import { ImageSection, SplitSection, Split, ClearSection } from './../../../section/Section';
+import ContentBox from './../../../content/ContentBox';
+import { Title, Subtitle, Paragraph, Heading1, Heading2 } from './../../../typography/Typography';
+import { Button } from './../../../input/Input';
+import ElementScrollFader from './../../../animation/fade/ElementScrollFader';
+import Image from './../../../image/Image';
+
+import Window95, {
+  TitleBar, Close, Minimize,
+  MenuBar, MenuOption,
+  ContextMenu, ContextMenuOption,
+  Frame,
+  AddressBar
+} from './../../../window/Window95';
+
+const ExistingWorkFrame = (props) => {
+  let fakeURL = props.href;
+  if(!fakeURL.startsWith("http") && typeof window !== typeof undefined) {
+    fakeURL = window.location.protocol + fakeURL;
+  }
+
+  let fakeWindow = (
+    <ElementScrollFader from={props.fromLeft}>
+      <Window95>
+        <TitleBar buttons={[
+          <Minimize key="Minimize" disabled />,
+          <Close key="close" disabled />
+        ]}>
+          { props.title }
+        </TitleBar>
+
+        <MenuBar>
+          <MenuOption title="File" disabled />
+          <MenuOption title="Visit Page" href={ props.href } target="_blank" />
+        </MenuBar>
+
+        <AddressBar href={fakeURL} />
+        <Frame>
+          <a href={ props.href} target="_blank" className="p-home-page__work-link">
+            <Image
+              src={props.src}
+              alt={props.title}
+              loadable
+              className="p-home-page__work-link-image"
+              maxWidth="600"
+            />
+          </a>
+        </Frame>
+      </Window95>
+    </ElementScrollFader>
+  );
+
+  let box = (
+    <ElementScrollFader from={ props.fromRight }>
+      <ContentBox box>
+        <Heading2>{ props.title }</Heading2>
+        { props.description }
+      </ContentBox>
+    </ElementScrollFader>
+  );
+
+  let left, right;
+  if(props.swap) {
+    left = box;
+    right = fakeWindow;
+  } else {
+    left = fakeWindow;
+    right = box;
+  }
+
+  return (
+    <SplitSection align="center">
+      <Split padded>
+        { left }
+      </Split>
+
+      <Split padded>
+        { right }
+      </Split>
+    </SplitSection>
+  );
+};
+
+
+
+export default (props) => {
+  return (
+    <ImageSection
+      className="p-home-page__promo p-home-page__promo-work"
+      src={ require('./../../../images/patterns/arcade.svg') }
+      loadable
+      background
+    >
+      {/* Title */}
+      <PageBoundary small>
+        <ElementScrollFader from="left">
+          <ContentBox box>
+            <Heading1 className="u-text-center">
+              { Language.get("pages.home.work.heading") }
+            </Heading1>
+            <Paragraph>
+              { Language.get("pages.home.work.paragraph") }
+            </Paragraph>
+          </ContentBox>
+        </ElementScrollFader>
+
+        <ClearSection />{/* Space a bit */}
+      </PageBoundary>
+
+      <PageBoundary>
+        {/* KOPA */}
+        <ExistingWorkFrame
+          href="//www.kopalife.com/products/kube-customise"
+          fromLeft="top"
+          fromRight="bottom"
+          src={ require('./../../../images/work-showcase/kopalife.png') }
+          title={ Language.get("pages.home.work.kopa.heading") }
+          description={ Language.get("pages.home.work.kopa.description") }
+        />
+
+        {/* SMAI */}
+        <ExistingWorkFrame
+          href="//www.smai.com.au/"
+          fromLeft="right"
+          fromRight="right"
+          swap
+          src={ require('./../../../images/work-showcase/smai.svg') }
+          title={ Language.get("pages.home.work.smai.heading") }
+          description={ Language.get("pages.home.work.smai.description") }
+        />
+
+      {/* Oz Hair and Beauty */}
+        <ExistingWorkFrame
+          href="//www.ozhairandbeauty.com/"
+          fromLeft="left"
+          fromRight="left"
+
+          src={ require('./../../../images/work-showcase/ozhair.png') }
+          title={ Language.get("pages.home.work.ozhair.heading") }
+          description={ Language.get("pages.home.work.ozhair.description") }
+        />
+      </PageBoundary>
+
+      <PageBoundary small>
+        <ClearSection />{/* Space a bit */}
+
+        <ElementScrollFader from="bottom">
+          <ContentBox box className="u-text-center">
+            <Subtitle>{ Language.get("pages.home.work.footer") }</Subtitle>
+            <Button size="large" to="/contact">
+              { Language.get("pages.home.work.footer-button") }
+            </Button>
+          </ContentBox>
+        </ElementScrollFader>
+
+        <ClearSection />{/* Space a bit */}
+      </PageBoundary>
+    </ImageSection>
+  );
+}

public/components/page/home/sections/PlatformsSection.jsx

@@ -0,0 +1,211 @@
+// Copyright (c) 2018 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+import React from 'react';
+import Language from './../../../language/Language';
+import { PageBoundary } from './../../Page';
+import { ImageSection, SplitSection, Split } from './../../../section/Section';
+import FloatingContentBox from './../../../content/FloatingContentBox';
+import ContentBox from './../../../content/ContentBox';
+import Image from './../../../image/Image';
+import Video from './../../../video/Video';
+import { Title, Subtitle, Paragraph, Heading1 } from './../../../typography/Typography';
+import ElementScrollFader from './../../../animation/fade/ElementScrollFader';
+
+const Platform = (props) => {
+  let children;
+  let image = <Image src={props.src} loadable className="p-home-page__brands-image" width="96" height="96" />;
+
+  if(props.to) {
+    children = (
+      <a href={props.to} target="_blank" className="p-home-page__brands-link" title={props.title}>
+        {image}
+      </a>
+    );
+  } else {
+    children = image;
+  }
+
+  //Wrap in a div and a fader. Div is to help with random transitions on resizing.
+  return (
+    <div className="p-home-page__brands-brand">
+      <ElementScrollFader from={props.from}>
+        {children}
+      </ElementScrollFader>
+    </div>
+  );
+};
+
+export default (props) => {
+  return (
+    <ImageSection
+      className="p-home-page__promo p-home-page__promo-platforms"
+      src={ require('./../../../images/patterns/game-show.svg') }
+      loadable
+      background
+    >
+      <PageBoundary>
+        <ElementScrollFader from="left">
+          <Title className="u-text-center p-home-page__brands-title">
+            { Language.get("pages.home.platforms.heading") }
+          </Title>
+        </ElementScrollFader>
+
+        <div className="p-home-page__brands">
+          {/* Shopify */}
+          <Platform
+            src={require('./../../../images/branding/shopify/shopify_glyph.svg')}
+            from="left"
+            to="//www.shopify.com"
+            title={ Language.get("pages.home.platforms.shopify") }
+          />
+          {/* React */}
+          <Platform
+            src={require('./../../../images/branding/react/react-logo.svg')}
+            from="top"
+            to="//reactjs.org"
+            title={ Language.get("pages.home.platforms.react") }
+          />
+
+          {/* MonoGame */}
+          <Platform
+            src={require('./../../../images/branding/monogame/monogame-logo.svg')}
+            from="bottom"
+            to="http://www.monogame.net"
+            title={ Language.get("pages.home.platforms.monogame") }
+          />
+
+          {/* PGSQL */}
+          <Platform
+            src={require('./../../../images/branding/pgsql/pgsql-logo.svg')}
+            from="right"
+            to="//www.postgresql.org"
+            title={ Language.get("pages.home.platforms.pgsql") }
+          />
+
+          {/* NodeJS */}
+          <Platform
+            src={require('./../../../images/branding/nodejs/nodejs-logo.svg')}
+            from="top"
+            to="//nodejs.org"
+            title={ Language.get("pages.home.platforms.nodejs") }
+          />
+
+          {/* C# */}
+          <Platform
+            src={require('./../../../images/branding/csharp/csharp-logo.svg')}
+            from="top"
+            to="//docs.microsoft.com/en-us/dotnet/csharp/"
+            title={ Language.get("pages.home.platforms.csharp") }
+          />
+
+          {/* PHP */}
+          <Platform
+            src={require('./../../../images/branding/php/php-logo.svg')}
+            from="top"
+            to="//php.net"
+            title={ Language.get("pages.home.platforms.php") }
+          />
+
+          {/* Java */}
+          <Platform
+            src={require('./../../../images/branding/java/java-logo.svg')}
+            from="top"
+            to="//java.com"
+            title={ Language.get("pages.home.platforms.java") }
+          />
+
+          {/* neto */}
+          <Platform
+            src={require('./../../../images/branding/neto/neto-logo.svg')}
+            from="bottom"
+            to="//www.neto.com.au"
+            title={ Language.get("pages.home.platforms.neto") }
+          />
+
+          {/* MySQL */}
+          <Platform
+            src={require('./../../../images/branding/mysql/mysql-logo.svg')}
+            from="bottom"
+            to="//www.mysql.com"
+            title={ Language.get("pages.home.platforms.mysql") }
+          />
+
+          {/* Heroku */}
+          <Platform
+            src={require('./../../../images/branding/heroku/heroku-logo.svg')}
+            from="bottom"
+            to="//heroku.com"
+            title={ Language.get("pages.home.platforms.heroku") }
+          />
+
+          {/* OpenGL */}
+          <Platform
+            src={require('./../../../images/branding/opengl/opengl-logo.svg')}
+            from="bottom"
+            to="//www.opengl.org"
+            title={ Language.get("pages.home.platforms.opengl") }
+          />
+
+          {/* Discord */}
+          <Platform
+            src={ require('./../../../images/branding/discord/discord-logo.svg') }
+            from="right"
+            to="//discordapp.com"
+            title={ Language.get("pages.home.platforms.discord") }
+          />
+
+          {/* Twitch */}
+          <Platform
+            src={ require('./../../../images/branding/twitch/twitch-logo.svg') }
+            from="right"
+            to="//twitch.tv"
+            title={ Language.get("pages.home.platforms.twitch") }
+          />
+
+          {/* Twitter */}
+          <Platform
+            src={require('./../../../images/branding/twitter/twitter-logo.svg')}
+            from="left"
+            to="//twitter.com"
+            title={ Language.get("pages.home.platforms.twitter") }
+          />
+
+          {/* Google Cloud */}
+          <Platform
+            src={ require('./../../../images/branding/google-cloud/google-cloud-logo.svg') }
+            from="left"
+            to="//console.cloud.google.com"
+            title={ Language.get("pages.home.platforms.googlecloud") }
+          />
+        </div>
+
+        <ElementScrollFader from="bottom">
+          <Subtitle className="u-text-center p-home-page__brands-title">
+            { Language.get("pages.home.platforms.footer") }
+          </Subtitle>
+        </ElementScrollFader>
+      </PageBoundary>
+    </ImageSection>
+  );
+}

public/components/page/home/sections/ProgrammingSection.jsx

@@ -0,0 +1,53 @@
+// Copyright (c) 2018 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+import React from 'react';
+import { connect } from 'react-redux';
+import Language from './../../../language/Language';
+import { PageBoundary } from './../../Page';
+import { ImageSection } from './../../../section/Section';
+import ContentBox from './../../../content/ContentBox';
+import { Title, Paragraph, Heading1 } from './../../../typography/Typography';
+import ElementScrollFader from './../../../animation/fade/ElementScrollFader';
+
+export default (props) => {
+  return (
+    <ImageSection
+      className="p-home-page__promo p-home-page__promo-programming"
+      src={ require('./../../../images/patterns/rhythm-heaven.svg') }
+      loadable
+      background
+    >
+      <PageBoundary small>
+        <ElementScrollFader from="bottom">
+          <ContentBox box>
+            <Heading1 className="u-text-center">
+              { Language.get("pages.home.programming.heading") }
+            </Heading1>
+            { Language.get("pages.home.programming.paragraph") }
+          </ContentBox>
+        </ElementScrollFader>
+      </PageBoundary>
+    </ImageSection>
+  );
+}

public/components/page/home/sections/PromoVideoSection.jsx

@@ -0,0 +1,68 @@
+// Copyright (c) 2018 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+import React from 'react';
+import Language from './../../../language/Language';
+import Page, { PageBoundary } from './../../Page';
+import Section, {  SplitSection, Split } from './../../../section/Section';
+import FloatingContentBox from './../../../content/FloatingContentBox';
+import ContentBox from './../../../content/ContentBox';
+import Video from './../../../video/Video';
+import { Title, Subtitle, Paragraph, Heading1 } from './../../../typography/Typography';
+import ElementScrollFader from './../../../animation/fade/ElementScrollFader';
+
+
+export default (props) => {
+  return (
+    <Section className="p-home-page__promo p-home-page__promo-video">
+      <PageBoundary>
+        <SplitSection align="center">
+
+          <Split className="u-text-center" padded>
+            <ElementScrollFader>
+              <Video
+                image={ require('./../../../videos/bunny/big_buck_bunny.jpg') }
+                mp4={ require('./../../../videos/bunny/big_buck_bunny.mp4') }
+                controls
+              />
+            </ElementScrollFader>
+          </Split>
+
+          <Split className="u-text-center" padded>
+            <ElementScrollFader from="bottom">
+              <ContentBox box>
+                <Title>
+                  { Language.get("pages.home.video.heading") }
+                </Title>
+                <Paragraph>
+                  { Language.get("pages.home.video.paragraph") }
+                </Paragraph>
+              </ContentBox>
+            </ElementScrollFader>
+          </Split>
+
+        </SplitSection>
+      </PageBoundary>
+    </Section>
+  );
+}

public/components/page/legal/privacy/PrivacyPolicyPage.jsx

@@ -0,0 +1,53 @@
+// Copyright (c) 2018 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+import React from 'react';
+import { connect } from 'react-redux';
+import Language from './../../../language/Language';
+import Page, { PageBoundary } from './../../Page';
+import { BodySection, ClearSection } from './../../../section/Section';
+import { Title } from './../../../typography/Typography';
+
+const PrivacyPolicyPage = (props) => {
+  return (
+    <Page style="privacy-policy" className="p-privacy-policy" title={ Language.get("pages.privacy.title") }>
+      <PageBoundary small>
+        <ClearSection />
+        <BodySection>
+          <Title>{ Language.get("pages.privacy.heading") }</Title>
+          { Language.get("pages.privacy.policy") }
+        </BodySection>
+        <ClearSection />
+      </PageBoundary>
+    </Page>
+  );
+};
+
+
+const mapStateToProps = function(state) {
+  return {
+    code: state.language.code
+  }
+}
+
+export default connect(mapStateToProps)(PrivacyPolicyPage);