Add the new modules image, cube and text rotation

Author: pastelsky

components/splash-viz/splash-viz-style.scss

@@ -8,55 +8,52 @@
   min-height:320px;
   max-height:720px;
   background:getColor(elephant);
+  flex-direction: column;
 
-  &__modules,
-  &__output {
-    flex:0 0 45%;
+  &__heading {
+    color: getColor(white);
+    font-size: getFontSize(4);
+    text-align: center;
+    font-weight: 200;
+    margin-top: 24px;
+
+    @include break {
+      font-size: getFontSize(5);
+    }
   }
 
   &__modules {
-    display:none;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 65vw;
+    min-width: 550px;
+    margin: auto;
+    display: none;
 
     @include break {
-      display:flex;
-      align-items:center;
-      justify-content: flex-end;
-
-      img {
-        margin-right:10%;
-        width:40%;
-        max-width:400px;
-      }
+      display: block;
     }
-  }
-
-  &__icon {
-    display:flex;
-    flex:1 1 auto;
-    align-items:center;
-    justify-content: center;
 
     img {
-      width:45%; 
-
-      @include break {
-        width:100%;
-      }
+      // Padding is needed to center align
+      // webpack icon with the module image
+      padding-top: 3vw;
+      width: 100%;
+      height: 100%;
     }
   }
 
-  &__output {
-    display:none;
-
-    @include break {
-      display:flex;
-      align-items:center;
-    }
-  }
+  &__cube {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    z-index: 1;
 
-  &__files {
-    width:40%;
-    max-width:400px;
-    margin-left:10%;
   }
 }

components/splash-viz/splash-viz.jsx

@@ -1,57 +1,29 @@
 import React from 'react';
-import Link from '../link/link';
-import SplashFile from '../splash-file/splash-file';
-import Icon from '../../assets/icon-square-big.svg';
-import Modules from '../../assets/modules.png';
 
-export default class SplashViz extends React.Component {
-  constructor(props) {
-    super(props);
+import Cube from '../cube/cube';
+import TextRotator from '../text-rotater/text-rotater';
+import Modules from '../../assets/homepage-modules.svg';
+import './splash-viz-style';
 
-    this.state = {
-      files: [
-        { name: 'index.html', type: 'html', size: 2039 },
-        { name: 'index.bundle.js', type: 'js', size: 20394 },
-        { name: 'index.bundle.js.map', type: 'blank', size: 20459 },
-        { name: 'style.bundle.css', type: 'css', size: 12948 },
-        { name: 'favicon.ico', type: 'ico', size: 23794 }
-      ]
-    };
-  }
+export default class SplashViz extends React.Component {
 
   render() {
     return (
       <section className="splash-viz">
+        <h1 className="splash-viz__heading">
+          <span> bundle your</span>
+          <TextRotator repeatDelay={ 5000 }>
+            <span> assets </span>
+            <span> scripts </span>
+            <span> images </span>
+            <span> styles </span>
+          </TextRotator>
+        </h1>
         <div className="splash-viz__modules">
-          <img src={ Modules } />
-        </div>
-
-        <div className="splash-viz__icon">
-          <img src={ Icon } />
-        </div>
-
-        <div className="splash-viz__output">
-          <div className="splash-viz__files">
-            {
-              this.state.files.map((file, i) => (
-                <SplashFile key={ i } { ...file } />
-              ))
-            }
-          </div>
+          <img src={ Modules }/>
         </div>
+        <Cube className="splash-viz__cube" depth={ 140 } repeatDelay={ 5000 } continuous/>
       </section>
     );
   }
-
-  componentDidMount() {
-    // setInterval(() => {
-    //   this.setState({
-    //     files: this.state.files.map(file => ({
-    //       name: file.name,
-    //       type: file.type,
-    //       size: file.size + Math.random() * (file.type === 'js' ? 10000 : 0)
-    //     }))
-    //   });
-    // }, 50);
-  }
 }