Restructuring folders [ Broken ]

public/components/App.jsx

@@ -0,0 +1,81 @@
+// 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 { HashRouter, BrowserRouter } from 'react-router-dom';
+
+import Background from './../objects/background/Background';
+import Header from './header/Header';
+import Footer from './footer/Footer';
+import Routes from './page/Routes';
+import Favicon from './Favicon';
+
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.onEnteringBound = this.onEntering.bind(this);
+  }
+
+  onEntering() {
+    this.refs.app.scroll({
+      top:  0,
+      left: 0,
+      behavior: 'smooth'
+    });
+  }
+
+  render() {
+    let clazz = "c-app";
+    if(this.props.menuOpen) clazz += " is-menu-open ";
+
+    let modal;
+    if(this.props.modal.open) clazz += " is-modal-open";
+    if(this.props.modal.modal) modal = this.props.modal.modal;
+
+    let children = (
+      <div className={clazz} ref="app">
+        <Favicon />
+        <Header />
+        { modal }
+        <Routes onEntering={this.onEnteringBound} />
+      </div>
+    );
+
+    if(false) {
+      return <HashRouter>{children}</HashRouter>;
+    } else {
+      return <BrowserRouter>{children}</BrowserRouter>;
+    }
+  }
+}
+
+const mapStateToProps = function(state) {
+  return {
+    menuOpen: state.menu.open,
+    modal: state.modal
+  }
+}
+
+export default connect(mapStateToProps)(App);

public/components/Favicon.jsx

@@ -0,0 +1,59 @@
+// 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 Helmet from 'react-helmet';
+const prefix = './../assets/images/favicon/';
+
+export default (props) => {
+  return (
+    <Helmet>
+      <link rel="apple-touch-icon" sizes="57x57" href={ require(prefix+'apple-icon-57x57.png').src } />
+      <link rel="apple-touch-icon" sizes="60x60" href={ require(prefix+'apple-icon-60x60.png').src } />
+      <link rel="apple-touch-icon" sizes="72x72" href={ require(prefix+'apple-icon-72x72.png').src } />
+      <link rel="apple-touch-icon" sizes="76x76" href={ require(prefix+'apple-icon-76x76.png').src } />
+      <link rel="apple-touch-icon" sizes="114x114" href={ require(prefix+'apple-icon-114x114.png').src } />
+      <link rel="apple-touch-icon" sizes="120x120" href={ require(prefix+'apple-icon-120x120.png').src } />
+      <link rel="apple-touch-icon" sizes="144x144" href={ require(prefix+'apple-icon-144x144.png').src } />
+      <link rel="apple-touch-icon" sizes="152x152" href={ require(prefix+'apple-icon-152x152.png').src } />
+      <link rel="apple-touch-icon" sizes="180x180" href={ require(prefix+'apple-icon-180x180.png').src } />
+
+      <link rel="icon" type="image/png" sizes="192x192"  href={ require(prefix+'android-icon-192x192.png').src } />
+      <link rel="icon" type="image/png" sizes="32x32" href={ require(prefix+'favicon-32x32.png').src } />
+      <link rel="icon" type="image/png" sizes="96x96" href={ require(prefix+'favicon-96x96.png').src } />
+      <link rel="icon" type="image/png" sizes="16x16" href={ require(prefix+'favicon-16x16.png').src } />
+
+      <link rel="manifest" href={ require(prefix+'favicon-16x16.png').src } />
+
+      <meta name="msapplication-TileColor" content="#ffffff" />
+      <meta name="msapplication-TileImage" content={ require(prefix+'ms-icon-144x144.png').src } />
+      
+      <meta name="theme-color" content="#ffffff" />*/}
+    </Helmet>
+  );
+};

public/components/footer/Footer.jsx

@@ -0,0 +1,77 @@
+// 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 { NavLink } from 'react-router-dom'
+import { PageBoundary } from './../page/Page';
+
+const FooterLink = function(props) {
+  let key = "footer.links." + props.title;
+  return (
+    <NavLink to={ props.to } className="c-footer__link">
+      { Language.get(key) }
+    </NavLink>
+  );
+}
+
+class Footer extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <footer className="c-footer">
+        <div className="c-footer__part">
+        </div>
+
+        <PageBoundary>
+          <div className="c-footer__inner">
+
+            <nav className="c-footer__links">
+              <FooterLink title="home" to="/" />
+              <FooterLink title="contact" to="/contact" />
+              <FooterLink title="privacy" to="/legal/privacy" />
+            </nav>
+
+            <div className="c-footer__copyright">
+              &copy; { new Date(1335830400000).getFullYear() }
+              ~
+              { new Date().getFullYear() } Dominic Masters
+            </div>
+          </div>
+        </PageBoundary>
+      </footer>
+    );
+  }
+}
+
+const mapStateToProps = function(state) {
+  return {
+    code: state.language.code
+  }
+}
+
+export default connect(mapStateToProps)(Footer);

public/components/header/Header.jsx

@@ -0,0 +1,33 @@
+// 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 Navbar from './../nav/navbar/Navbar';
+
+export default function(props) {
+  return (
+    <header role="banner">
+      <Navbar />
+    </header>
+  );
+}

public/components/nav/menu/HamburgerMenu.jsx

@@ -0,0 +1,90 @@
+// 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 { NavLink } from 'react-router-dom';
+import Language from './../../language/Language';
+import * as MenuActions from './../../actions/MenuActions';
+
+const HamburerMenuItem = function(props) {
+  return (
+    <li className={"c-hamburger-menu__link c-hamburger-menu__link--"+props.link}>
+      <NavLink to={ props.to } className="c-hamburger-menu__link-link">
+        { Language.get(props.lang) }
+      </NavLink>
+    </li>
+  );
+}
+
+class HamburgerMenu extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let clazz = "c-hamburger-menu";
+    if(this.props.open) clazz += " is-open";
+    if(this.props.className) clazz += " " + this.props.className;
+
+    return (
+      <div className={clazz}>
+        <button
+          type="button"
+          className="c-hamburger-menu__button"
+          onClick={this.props.toggleMenu}
+        >
+          <img
+            src={ require('./../../images/icons/hamburger.svg') }
+            className="c-hamburger-menu__icon"
+          />
+        </button>
+
+        <div className="c-hamburger-menu__menu">
+          <ul className="c-hamburger-menu__links">
+            <HamburerMenuItem to="/" lang="navbar.home" link="home" />
+            <HamburerMenuItem to="/contact" lang="navbar.contact" link="contact" />
+          </ul>
+        </div>
+      </div>
+    );
+  }
+}
+
+
+const mapStateToProps = function(state) {
+  return {
+    open: state.menu.open,
+    language: state.language.code
+  }
+}
+
+const mapDispatchToProps = function(dispatch) {
+  return {
+    toggleMenu: function(theme) {
+      dispatch(MenuActions.toggleMenu());
+    }
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(HamburgerMenu);

public/components/nav/navbar/Navbar.jsx

@@ -0,0 +1,84 @@
+// 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 { withRouter } from 'react-router';
+import { connect } from 'react-redux';
+import { NavLink } from 'react-router-dom'
+import PageBoundary from './../../page/PageBoundary';
+import Language from './../../language/Language';
+import HamburgerMenu from './../menu/HamburgerMenu';
+import Image from './../../image/Image';
+
+const NavbarLink = function(props) {
+  return (
+    <NavLink to={ props.to } className="c-navbar__link" activeClassName="is-active" exact={props.exact}>
+      { Language.get("navbar." + props.title) }
+    </NavLink>
+  );
+}
+
+
+class Navbar extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <section className="c-navbar is-stuck">
+        <PageBoundary>
+          <nav className="c-navbar__nav">
+
+            {/* Logo */}
+            <NavLink to="/" className="c-navbar__logo-container" activeClassName="is-active">
+              <Image
+                src={ require('./../../images/logo.svg') }
+                className="c-navbar__logo"
+                alt={ Language.get("site.name") }
+                title={ Language.get("site.name") }
+                width="780"
+                height="200"
+              />
+            </NavLink>
+
+            {/* Desktop / Tablet Screen Links */}
+            <NavbarLink to="/" title="home" exact />
+            <NavbarLink to="/contact" title="contact" exact />
+
+            {/* Hamburger Menu for smaller screens */}
+            <HamburgerMenu className="c-navbar__hamburger" />
+          </nav>
+        </PageBoundary>
+      </section>
+    );
+  }
+}
+
+const mapStateToProps = function(state) {
+  return {
+    code: state.language.code
+  }
+}
+
+export default withRouter(connect(mapStateToProps)(Navbar));

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);

public/components/section/Section.jsx

@@ -0,0 +1,59 @@
+// 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 class Section extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <section className={
+          "c-section" +
+          (this.props.full?" is-full":"") +
+          (this.props.className ? " "+this.props.className : "")
+      }>
+        { this.props.children }
+      </section>
+    );
+  }
+}
+
+import BodySection from './body/BodySection';
+import ClearSection from './layout/ClearSection';
+import FeaturedBlogSection from './blog/FeaturedBlogSection';
+import ImageSection from './image/ImageSection';
+import SplitSection, { Split }  from './layout/SplitSection';
+import VideoSection from './video/VideoSection';
+
+export {
+  BodySection,
+  ClearSection,
+  FeaturedBlogSection,
+  ImageSection,
+  SplitSection,
+  Split,
+  VideoSection
+}

public/components/section/blog/FeaturedBlogSection.jsx

@@ -0,0 +1,66 @@
+// 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 Section from './../Section';
+import { PageBoundary } from './../../page/Page';
+
+const FeaturedArticle = function(props) {
+  let clazz = "c-featured-blog-section__article";
+
+  let internals;
+  internals = "test";
+
+  if(props.contain) {
+    internals = <PageBoundary>{internals}</PageBoundary>
+    clazz += " is-contained";
+  }
+
+  return (
+    <article className={ clazz }>
+      { internals }
+    </article>
+  );
+}
+
+export default (props) => {
+  let firstArticle;
+  let articles = [];
+  for(let i = 0; i < props.data.length; i++) {
+    let art = <FeaturedArticle data={props.data[i]} key={i} contain />
+    if(i === 0) {
+      firstArticle = art;
+      continue;
+    }
+    articles.push(art);
+  }
+
+  return (
+    <Section className="c-featured-blog-section">
+      { firstArticle }
+      <PageBoundary className="c-featured-blog-section__articles">
+        { articles }
+      </PageBoundary>
+    </Section>
+  );
+};

public/components/section/body/BodySection.jsx

@@ -0,0 +1,34 @@
+// 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 Section from './../Section';
+
+export default function(props) {
+  let clazz = "c-body-section";
+  if(props.className) clazz += " " + props.className;
+
+  return (
+    <Section {...props} className={clazz} />
+  );
+};

public/components/section/image/ImageSection.jsx

@@ -0,0 +1,62 @@
+// 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 Section from './../Section';
+import Image from './../../image/Image';
+
+export default function(props) {
+  let image;
+  let clazz = "c-image-section";
+
+  if(props.image) {
+    image = props.image;
+  } else {
+    image = <Image
+      {...props}
+      children={null}
+      className="c-image-section__image"
+    />;
+  }
+
+  if(props.className) clazz += " " + props.className;
+
+  if(props.background) {
+    //Background Image Effect
+    clazz += " is-background";
+  }
+
+  return (
+    <Section
+      full={props.full}
+      className={ clazz }
+    >
+      { image }
+      <div className="c-image-section__content">
+        <div className="c-image-section__content-inner">
+          { props.children }
+        </div>
+      </div>
+    </Section>
+  );
+}

public/components/section/layout/ClearSection.jsx

@@ -0,0 +1,31 @@
+// 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 Section from './../Section';
+
+export default (props) => {
+  let clazz = "c-clear-section";
+  if(props.className) clazz += " " + props.className;
+  return <Section {...props} className={clazz} />;
+};

public/components/section/layout/SplitSection.jsx

@@ -0,0 +1,58 @@
+// 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 Section from './../Section';
+
+export default (props) => {
+  let aligned = "stretched";
+  if(props.align) {
+    aligned = props.align;
+  }
+
+  let clazz = "c-split-section is-" + aligned;
+  if(props.className) clazz += " " + props.className;
+
+
+  return (
+    <Section {...props} className={clazz} />
+  )
+};
+
+const Split = function(props) {
+  let clazz = "c-split-section__split";
+
+  if(props.padded) clazz += " is-padded";
+  if(props.className) clazz += " "+props.className;
+
+  return (
+    <div className={clazz}>
+      { props.children }
+    </div>
+  );
+}
+
+
+export {
+  Split
+}

public/components/section/video/VideoSection.jsx

@@ -0,0 +1,50 @@
+// 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 Section from './../Section';
+import Video from './../../video/Video';
+import Loader from './../../loading/Loader';
+
+class VideoSection extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <Section full={this.props.full} className="c-video-section">
+        <Video
+          className="c-video-section__video"
+          autoPlay
+          loop
+          fill
+          sources={ this.props.sources ? this.props.sources : this.props }
+        />
+        { this.props.children }
+      </Section>
+    );
+  }
+}
+
+export default VideoSection;