Messing with the images on the homepage.

public/components/footer/Footer.jsx

@@ -25,11 +25,14 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { NavLink } from 'react-router-dom';
 
-import FooterStyles from './Footer.scss';
-
 import { withLanguage } from '@public/language/Language';
 
 import { PageBoundary } from '@components/page/Page';
+import ImageSection from '@sections/image/ImageSection';
+
+import ContentBox from '@objects/content/box/ContentBox';
+
+import FooterStyles from './Footer.scss';
 
 const SITE_LAUNCH_TIMESTAMP = 1335830400000;
 
@@ -47,26 +50,29 @@ class Footer extends React.Component {
     let { className, lang } = this.props;
 
     return (
-      <footer className={"c-footer"+(className?` ${className}`:``)}>
-        <div className="c-footer__part">
-        </div>
+      <footer className={`c-footer ${className||""}`}>
+        <ImageSection
+          className="c-footer__inner"
+          src={ require('@assets/images/patterns/schoolbell.svg') }
+          loadable
+          background
+        >
+          <PageBoundary full>
+            <ContentBox box className="u-text-center">
+              <nav className="c-footer__links">
+                <FooterLink to="/" children={ lang.footer.links.home } />
+                <FooterLink to="/contact" children={ lang.footer.links.contact } />
+                <FooterLink to="/legal/privacy" children={ lang.footer.links.privacy } />
+              </nav>
 
-        <PageBoundary>
-          <div className="c-footer__inner">
-
-            <nav className="c-footer__links">
-              <FooterLink to="/" children={ lang.footer.links.home } />
-              <FooterLink to="/contact" children={ lang.footer.links.contact } />
-              <FooterLink to="/legal/privacy" children={ lang.footer.links.privacy } />
-            </nav>
-
-            <div className="c-footer__copyright">
-              &copy; { new Date(SITE_LAUNCH_TIMESTAMP).getFullYear() }
-              ~
-              { new Date().getFullYear() } Dominic Masters
-            </div>
-          </div>
-        </PageBoundary>
+              <div className="c-footer__copyright">
+                &copy; { new Date(SITE_LAUNCH_TIMESTAMP).getFullYear() }
+                ~
+                { new Date().getFullYear() } Dominic Masters
+              </div>
+            </ContentBox>
+          </PageBoundary>
+        </ImageSection>
       </footer>
     );
   }

public/components/footer/Footer.scss

@@ -12,22 +12,12 @@
  */
 @import '~@styles/global';
 
-$c-footer--link-color: red;
-$c-footer--link-hover-color: blue;
-
 .c-footer {
   @extend %t-dp--shadow-3d;
-  padding-top: 8em;
-  padding-bottom: 10em;
-  position: relative;
-  overflow: hidden;
-  background-image: url('~@assets/images/banners/palms.svg');
-  background-size: cover;
 
   &__inner {
-    text-align: center;
-    position: relative;
-    padding: 1em 0;
+    padding-top: 8em;
+    padding-bottom: 10em;
   }
 
   &__copyright {
@@ -51,12 +41,4 @@ $c-footer--link-hover-color: blue;
       margin-left: 1em;
     }
   }
-
-  &__part {
-    position: absolute;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    bottom: 0;
-  }
 }

public/components/nav/navbar/Navbar.jsx

@@ -66,7 +66,7 @@ const Navbar = props => {
 
           {/* Desktop / Tablet Screen Links */}
           <NavbarLink to="/" title={lang.navbar.home} exact />
-          {/*<NavbarLink to="/blog" title={lang.navbar.blog} exact />*/}
+          <NavbarLink to="/blog" title={lang.navbar.blog} exact />
           <NavbarLink to="/contact" title={lang.navbar.contact} exact />
 
           {/* Hamburger Menu for smaller screens */}