Add initial pass at top banner with assets

src/views/splash/beta/top-banner.jsx

@@ -9,6 +9,9 @@ require('./top-banner.scss');
 
 const TopBanner = () => (
     <TitleBanner className="beta-top-banner">
+        <div className="beta-header-image left">
+            <img src="/images/beta/left-illustration.png" />
+        </div>
         <FlexRow className="beta-top-container column">
             <h1 className="beta-header">The Next Generation of Scratch</h1>
             <h3 className="beta-copy">Try out the beta version of Scratch 3.0</h3>
@@ -17,6 +20,9 @@ const TopBanner = () => (
                 href="https://beta.scratch.mit.edu/"
             >Try it!</a>
         </FlexRow>
+        <div className="beta-header-image right">
+            <img src="/images/beta/right-illustration.png" />
+        </div>
     </TitleBanner>
 );
 

src/views/splash/beta/top-banner.scss

 @import "../../../colors";
 
 .beta-top-banner {
-    background: $ui-orange;
+    display: flex;
+    background-color: $ui-orange;
+    background-image: url("/images/beta/bg-pattern.png");
+    background-size: cover;
+    padding: 0;
+    height: 20rem;
+    overflow: hidden;
+    justify-content: center;
+
+    .beta-top-container {
+        flex-shrink: 0;
+    }
+
+    .beta-header-image {
+        display: flex;
+        min-width: 0;
+        align-self: flex-end;
+
+        img {
+            max-width: 100%;
+            height: auto;
+        }
+
+        &.left {
+            margin-left: -2.5rem;
+        }
+
+        &.right {
+            margin-right: -2.5rem;
+        }
+    }
 
     .beta-header,
     .beta-copy,