stub triangle grid section

Author: jscottsmith

examples/components/ParallaxExample/ParallaxExample.js

@@ -3,6 +3,7 @@ import {
 	Intro,
 	IntroCopy,
     Marquee,
+    TriangleGrid,
 } from 'components';
 import style from './ParallaExample.scss';
 
@@ -14,6 +15,7 @@ export default class ParallaxExample extends Component {
                 <Intro />
                 <IntroCopy />
                 <Marquee />
+                <TriangleGrid />
             </div>
         );
     }

examples/components/TriangleGrid/TriangleGrid.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import style from './TriangleGrid.scss';
+import { Svg } from 'components';
+import { Parallax } from 'react-scroll-parallax';
+import gridPurple from '!!raw-loader!./grid-purple.svg';
+import gridWhite from '!!raw-loader!./grid-white.svg';
+import angleTop from '!!raw-loader!../shared/angle-dark-top.svg';
+
+const TriangleGrid = () => (
+    <div className={style.root}>
+        <Svg
+            svg={angleTop}
+            className={style.angleTop}
+        />
+        <div className={style.container}>
+            <Parallax
+                offsetYMax={25}
+                offsetYMin={-25}
+            >
+                <Svg
+                    svg={gridPurple}
+                    className={style.trianglesPurple}
+                />
+            </Parallax>
+            <Parallax
+                offsetYMax={50}
+                offsetYMin={-50}
+                offsetXMax={13}
+                offsetXMin={-13}
+            >
+                <Svg
+                    svg={gridWhite}
+                    className={style.trianglesWhite}
+                />
+            </Parallax>
+        </div>
+    </div>
+);
+
+export default TriangleGrid;

examples/components/TriangleGrid/TriangleGrid.scss

@@ -0,0 +1,40 @@
+//
+// Marquee
+// ---------------------------
+
+@import '../../styles/colors';
+
+:local(.root) {
+    position: relative;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 25vh 2em;
+    background-color: $plum;
+}
+
+:local(.container) {
+    position: relative;
+    width: 25em;
+}
+
+:local(.angleTop) {
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    right: 0;
+}
+
+:local(.trianglesPurple) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+}
+
+:local(.trianglesWhite) {
+    svg {
+
+    }
+}