Changed homepage backgrounds, improved @sections

public/pages/home/HomePage.jsx

@@ -23,8 +23,6 @@
 
 import React from 'react';
 
-import Styles from './HomePage.scss';
-
 import Page from '@components/page/Page';
 import BannerSection from './sections/BannerSection';
 import PromoVideoSection from './sections/PromoVideoSection';
@@ -32,10 +30,17 @@ import ProgrammingSection from './sections/ProgrammingSection';
 import PlatformsSection from './sections/PlatformsSection';
 import ExistingWorkSection from './sections/ExistingWorkSection';
 
+import Styles from './HomePage.scss';
+
 export default props => {
   //Return
   return (
-    <Page style="home-page" className="p-home-page" title={0}>
+    <Page
+      style="home-page"
+      className="p-home-page"
+      title={0}
+      background={ require('@assets/images/banners/about/glasses.svg') }
+    >
 
       { /* Banner */ }
       <BannerSection />

public/pages/home/HomePage.scss

@@ -18,7 +18,7 @@
   }
 
   &__promo {
-    padding: 8em 0;
+    padding: 4em 0;
     background-size: 150% auto;
 
     &-video {

public/pages/home/sections/BannerSection.jsx

@@ -23,8 +23,10 @@
 
 import React from 'react';
 import { withLanguage } from '@public/language/Language';
+
 import { PageBoundary } from '@components/page/Page';
-import { BannerImageSection } from '@sections/Section';
+import BannerSection from '@sections/banner/BannerSection';
+
 import FloatingContentBox from '@objects/content/box/FloatingContentBox';
 import { Title, Subtitle } from '@objects/typography/Typography';
 
@@ -33,18 +35,11 @@ export default withLanguage(props => {
   let { lang } = props;
 
   return (
-    <BannerImageSection
-      className="p-home-page__banner"
-      src={ require('@assets/images/banners/about/glasses.svg') }
-      alt="domsPlace"
-      width="2400" height="1200" loadable
-    >
-      <PageBoundary full>
-        <FloatingContentBox position="middle center" size="large" className="u-text-center">
-          <Title>{ lang.pages.home.banner.title }</Title>
-          <Subtitle>{ lang.pages.home.banner.subtitle }</Subtitle>
-        </FloatingContentBox>
-      </PageBoundary>
-    </BannerImageSection>
+    <BannerSection className="p-home-page__banner" width="3" height="1">
+      <FloatingContentBox position="middle center" size="large" className="u-text-center">
+        <Title>{ lang.pages.home.banner.title }</Title>
+        <Subtitle>{ lang.pages.home.banner.subtitle }</Subtitle>
+      </FloatingContentBox>
+    </BannerSection>
   );
 });

public/pages/home/sections/ExistingWorkSection.jsx

@@ -23,8 +23,12 @@
 
 import React from 'react';
 import { withLanguage } from '@public/language/Language';
+
 import { PageBoundary } from '@components/page/Page';
-import { ImageSection, SplitSection, Split, ClearSection } from '@components/section/Section';
+import Section from '@sections/Section';
+import SplitSection, { Split } from '@sections/layout/SplitSection';
+import ClearSection from '@sections/layout/ClearSection';
+
 import ContentBox from '@objects/content/box/ContentBox';
 import { Title, Subtitle, Paragraph, Heading1, Heading2 } from '@objects/typography/Typography';
 import { Button } from '@objects/input/Input';
@@ -111,12 +115,7 @@ export default withLanguage(props => {
   let { lang } = props;
 
   return (
-    <ImageSection
-      className="p-home-page__promo p-home-page__promo-work"
-      src={ require('@assets/images/banners/hills-night.svg') }
-      loadable
-      background
-    >
+    <Section className="p-home-page__promo p-home-page__promo-work">
       {/* Title */}
       <PageBoundary small>
         <ElementScrollFader from="left">
@@ -191,6 +190,6 @@ export default withLanguage(props => {
 
         <ClearSection />{/* Space a bit */}
       </PageBoundary>
-    </ImageSection>
+    </Section>
   );
 });

public/pages/home/sections/PlatformsSection.jsx

@@ -22,9 +22,13 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 import React from 'react';
+
 import { withLanguage } from '@public/language/Language';
+
 import { PageBoundary } from '@components/page/Page';
-import { ImageSection, SplitSection, Split } from '@components/section/Section';
+import Section from '@sections/Section';
+import SplitSection, { Split } from '@sections/layout/SplitSection';
+
 import FloatingContentBox from '@objects/content/box/FloatingContentBox';
 import ContentBox from '@objects/content/box/ContentBox';
 import Image from '@objects/image/Image';
@@ -54,12 +58,7 @@ const Platform = props => {
 export default withLanguage(props => {
   let { lang } = props;
   return (
-    <ImageSection
-      className="p-home-page__promo p-home-page__promo-platforms"
-      src={ require('@assets/images/banners/palms.svg') }
-      loadable
-      background
-    >
+    <Section className="p-home-page__promo p-home-page__promo-platforms">
       <PageBoundary>
         <ElementScrollFader >
           <Title className="u-text-center p-home-page__brands-title">
@@ -186,6 +185,6 @@ export default withLanguage(props => {
           </Subtitle>
         </ElementScrollFader>
       </PageBoundary>
-    </ImageSection>
+    </Section>
   );
 });

public/pages/home/sections/ProgrammingSection.jsx

@@ -24,31 +24,30 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { withLanguage } from '@public/language/Language';
+
 import { PageBoundary } from '@components/page/Page';
-import { ImageSection } from '@components/section/Section';
+import Section from '@sections/Section';
+
 import ContentBox from '@objects/content/box/ContentBox';
 import { Title, Paragraph, Heading1 } from '@objects/typography/Typography';
 import ElementScrollFader from '@objects/animation/fade/ElementScrollFader';
 
 export default withLanguage(props => {
   let { lang } = props;
+  let l = lang.pages.home.programming;
+
   return (
-    <ImageSection
-      className="p-home-page__promo p-home-page__promo-programming"
-      src={ require('@assets/images/patterns/florida.svg') }
-      loadable
-      background
-    >
+    <Section className="p-home-page__promo p-home-page__promo-programming">
       <PageBoundary small>
         <ElementScrollFader from="bottom">
           <ContentBox box>
             <Heading1 className="u-text-center">
-              { lang.pages.home.programming.heading }
+              { l.heading }
             </Heading1>
-            { lang.pages.home.programming.paragraph }
+            { l.paragraph }
           </ContentBox>
         </ElementScrollFader>
       </PageBoundary>
-    </ImageSection>
+    </Section>
   );
 });

public/pages/home/sections/PromoVideoSection.jsx

@@ -23,8 +23,11 @@
 
 import React from 'react';
 import { withLanguage } from '@public/language/Language';
+
 import Page, { PageBoundary } from '@components/page/Page';
-import Section, {  SplitSection, Split } from '@components/section/Section';
+import Section from '@sections/Section';
+import SplitSection, { Split } from '@sections/layout/SplitSection';
+
 import ContentBox from '@objects/content/box/ContentBox';
 import FloatingContentBox from '@objects/content/box/FloatingContentBox';
 import Video from '@objects/video/Video';