[WIP] Draft 3.0 Launch banner

Started transition to ‘featured’ banner that is somewhat reusable. However, middle and smallTop banners are still based on beta. They’re not used for 3.0 launch.

src/_colors.scss

@@ -9,6 +9,8 @@ $ui-orange-high-contrast: hsla(30, 100, 55, 1); // #FFAB19 Control Primary
 $ui-orange-10percent: hsla(35, 90, 55, .1);
 $ui-orange-25percent: hsla(35, 90, 55, .25);
 
+$ui-dark-orange: hsla(30, 100, 55, 1); // ##FF8C1A Variables Primary
+
 $ui-red: hsla(20, 100%, 55%, 1); /* #FF661A */
 $ui-red-25percent: hsla(20, 100%, 55%, .25);
 $ui-green-35percent: rgba(126, 225, 195, .35);

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

-@import "../../../colors";
-@import "../../../frameless";
-
-.beta-top-banner {
-    display: flex;
-    position: relative;
-    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 {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        margin: auto;
-        height: 15rem;
-    }
-
-    .beta-banner-images {
-        display: flex;
-        width: 100%;
-        justify-content: space-between;
-    }
-
-    .beta-banner-image {
-        display: flex;
-        width: 27rem;
-        align-self: flex-end;
-
-        img {
-            max-width: 100%;
-            height: auto;
-            align-self: flex-end;
-        }
-
-        &.left {
-            margin-left: -2.5rem;
-        }
-
-        &.right {
-            margin-right: -2.5rem;
-        }
-    }
-
-    .beta-header,
-    .beta-copy,
-    .beta-try-it {
-        color: $ui-white;
-    }
-
-    .beta-header {
-        font-size: 2.2rem;
-    }
-
-    .beta-copy {
-        font-size: 1.3rem;
-    }
-
-    .beta-try-it {
-        border-radius: 10px;
-        padding: 1em 2em;
-        font-size: 1em;
-    }
-}
-
-@media only screen and (min-width: $tablet) and (max-width: 1200px) {
-    .beta-top-banner {
-        height: 22rem;
-
-        .beta-top-container {
-            bottom: 4rem;
-        }
-
-        .beta-banner-image {
-            width: 20rem;
-        }
-    }
-}

src/views/splash/beta/middle-banner.jsx → src/views/splash/feature/middle-banner.jsx

@@ -12,29 +12,29 @@ const frameless = require('../../../lib/frameless');
 require('./middle-banner.scss');
 
 const MiddleBanner = () => (
-    <TitleBanner className="beta-middle-banner">
-        <FlexRow className="beta-middle-container column">
-            <h2 className="beta-header">
-                <FormattedMessage id="betabanner.title" />
+    <TitleBanner className="feature-middle-banner">
+        <FlexRow className="feature-middle-container column">
+            <h2 className="feature-header">
+                <FormattedMessage id="featureBanner.title" />
             </h2>
-            <h3 className="beta-copy">
-                <FormattedMessage id="betabanner.subtitle" />
+            <h3 className="feature-copy">
+                <FormattedMessage id="featureBanner.subtitle" />
             </h3>
             <a
-                className="beta-try-it button"
-                href="https://beta.scratch.mit.edu/"
+                className="feature-call-to-action button"
+                href="https://scratch.mit.edu/"
             >
-                <FormattedMessage id="betabanner.callToAction" />
+                <FormattedMessage id="featureBanner.callToAction" />
             </a>
         </FlexRow>
-        <div className="beta-banner-images">
+        <div className="feature-banner-images">
             <MediaQuery maxWidth={frameless.desktop - 1}>
-                <div className="beta-banner-image left">
-                    <img src="/images/beta/left-illustration.png" />
+                <div className="feature-banner-image left">
+                    <img src="/images/feature/left-illustration.png" />
                 </div>
             </MediaQuery>
-            <div className="beta-banner-image right">
-                <img src="/images/beta/right-illustration.png" />
+            <div className="feature-banner-image right">
+                <img src="/images/feature/right-illustration.png" />
             </div>
         </div>
     </TitleBanner>

src/views/splash/beta/middle-banner.scss → src/views/splash/feature/middle-banner.scss

 @import "../../../colors";
 @import "../../../frameless";
 
-.beta-middle-banner {
+.feature-middle-banner {
     display: flex;
     margin-top: 20px;
     border-radius: 16px;
     background-color: $ui-orange;
-    background-image: url("/images/beta/bg-pattern.png");
+    background-image: url("/images/feature/bg-pattern.png");
     background-size: cover;
     padding: 0;
     height: 17rem;
@@ -14,18 +14,18 @@
     box-sizing: border-box;
     justify-content: space-between;
 
-    .beta-middle-container {
+    .feature-middle-container {
         padding-left: 3rem;
         align-items: flex-start;
         flex-shrink: 0;
     }
 
-    .beta-banner-images {
+    .feature-banner-images {
         display: flex;
         height: 100%;
         align-self: flex-end;
 
-        .beta-banner-image {
+        .feature-banner-image {
             display: flex;
             margin-right: 2rem;
             min-width: 0;
@@ -41,24 +41,24 @@
         }
     }
 
-    .beta-header,
-    .beta-copy,
-    .beta-try-it {
+    .feature-header,
+    .feature-copy,
+    .feature-call-to-action {
         color: $ui-white;
     }
 
-    .beta-header {
+    .feature-header {
         font-size: 1.7rem;
     }
 
-    .beta-copy {
+    .feature-copy {
         margin-bottom: 1rem;
         max-width: 350px;
         line-height: 1.7rem;
         font-size: 1.3rem;
     }
 
-    .beta-try-it {
+    .feature-call-to-action {
         border-radius: 10px;
         padding: 1em 2em;
         font-size: 1em;
@@ -66,21 +66,21 @@
 }
 
 @media #{$intermediate} {
-    .beta-middle-banner {
+    .feature-middle-banner {
         margin: 20px auto 40px auto;
         width: $cols8;
         height: initial;
         flex-direction: column;
         justify-content: center;
 
-        .beta-middle-container {
+        .feature-middle-container {
             padding-top: 4rem;
             padding-left: 0;
             align-items: center;
         }
 
-        .beta-banner-images {
-            .beta-banner-image {
+        .feature-banner-images {
+            .feature-banner-image {
                 margin: 0;
                 padding: 0;
 

src/views/splash/beta/small-top-banner.jsx → src/views/splash/feature/small-top-banner.jsx

@@ -8,16 +8,16 @@ const TitleBanner = require('../../../components/title-banner/title-banner.jsx')
 require('./small-top-banner.scss');
 
 const SmallTopBanner = () => (
-    <TitleBanner className="beta-small-top-banner">
-        <FlexRow className="beta-small-top-container">
-            <h2 className="beta-copy">
-                <FormattedMessage id="betabanner.subtitle" />
+    <TitleBanner className="small-top-banner">
+        <FlexRow className="small-top-container">
+            <h2 className="copy">
+                <FormattedMessage id="topBanner.subtitle" />
             </h2>
             <a
-                className="beta-try-it button"
-                href="https://beta.scratch.mit.edu/"
+                className="call-to-action button"
+                href="https://scratch.mit.edu/"
             >
-                <FormattedMessage id="betabanner.callToAction" />
+                <FormattedMessage id="topBanner.callToAction" />
             </a>
         </FlexRow>
     </TitleBanner>

src/views/splash/beta/small-top-banner.scss → src/views/splash/feature/small-top-banner.scss

 @import "../../../colors";
 
-.beta-small-top-banner {
+.small-top-banner {
     background: $ui-orange;
     padding: 5px 0;
 
-    .beta-small-top-container {
+    .small-top-container {
         justify-content: center;
     }
 
-    .beta-copy,
-    .beta-try-it {
+    .copy,
+    .call-to-action {
         color: $ui-white;
         font-weight: 500;
     }
 
-    .beta-copy {
+    .copy {
         font-size: 1.1rem;
     }
 
-    .beta-try-it {
+    .call-to-action {
         margin-left: 32px;
         border-radius: 8px;
         padding: .625rem 1.2rem;

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

 const FormattedMessage = require('react-intl').FormattedMessage;
 const injectIntl = require('react-intl').injectIntl;
 const React = require('react');
+const PropTypes = require('prop-types');
 
 const FlexRow = require('../../../components/flex-row/flex-row.jsx');
 const TitleBanner = require('../../../components/title-banner/title-banner.jsx');
 
 require('./top-banner.scss');
 
-const TopBanner = () => (
-    <TitleBanner className="beta-top-banner">
-        <FlexRow className="beta-top-container column">
-            <h1 className="beta-header">
-                <FormattedMessage id="betabanner.title" />
+const TopBanner = props => (
+    <TitleBanner className="feature-top-banner">
+        <FlexRow className="feature-top-container column">
+            <h1 className="feature-header">
+                <FormattedMessage id="featureBanner.title" />
             </h1>
-            <h3 className="beta-copy">
-                <FormattedMessage id="betabanner.subtitle" />
-            </h3>
+            {/* <h3 className="feature-copy">
+                <FormattedMessage id="featureBanner.subtitle" />
+            </h3> */}
             <a
-                className="beta-try-it button"
-                href="https://beta.scratch.mit.edu/"
+                className="feature-call-to-action button"
+                href={props.actionLink}
             >
-                <FormattedMessage id="betabanner.callToAction" />
+                <FormattedMessage id="featureBanner.callToAction" />
             </a>
         </FlexRow>
-        <div className="beta-banner-images">
-            <div className="beta-banner-image left">
-                <img src="/images/beta/left-illustration.png" />
+        <div className="feature-banner-images">
+            <div className="feature-banner-image left">
+                <img src="/svgs/feature/illustration-left.svg" />
             </div>
-            <div className="beta-banner-image right">
-                <img src="/images/beta/right-illustration.png" />
+            <div className="feature-banner-image right">
+                <img src="/svgs/feature/illustration-right.svg" />
             </div>
         </div>
     </TitleBanner>
 );
 
+TopBanner.propTypes = {
+    actionLink: PropTypes.string
+};
+
+TopBanner.defaultProps = {
+    actionLink: 'https://scratch.mit.edu'
+};
+
 module.exports = injectIntl(TopBanner);

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

+@import "../../../colors";
+@import "../../../frameless";
+
+.feature-top-banner {
+    display: flex;
+    position: relative;
+    background-color: $ui-blue;
+    // background-image: url("/images/feature/bg-pattern.png");
+    background-size: cover;
+    padding: 0;
+    height: 22rem;
+    // overflow: hidden; // if banner shouldn't have things that break the edges
+    justify-content: center;
+
+    .feature-top-container {
+        position: absolute;
+        top: 0;
+        right: 20%;
+        bottom: 0;
+        left: 20%;
+        margin: auto;
+        justify-content: center;
+        align-items: flex-start;
+        height: 20rem;
+    }
+
+    .feature-banner-images {
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+    }
+
+    .feature-banner-image {
+        display: flex;
+        align-self: flex-end;
+
+        img {
+            max-width: 100%;
+            height: auto;
+            align-self: flex-end;
+        }
+
+        &.left {
+            margin: auto 0;
+            width: 14rem;
+        }
+
+        &.right {
+            width: 30rem;
+        }
+    }
+
+    .feature-header,
+    .feature-copy,
+    .feature-call-to-action {
+        color: $ui-white;
+    }
+
+    .feature-header {
+        margin-bottom: .75rem;
+        font-size: 4rem;
+        line-height: 4.2rem;
+        width: 80%;
+    }
+
+    .feature-copy {
+        font-size: 1.3rem;
+    }
+
+    .feature-call-to-action {
+        border-radius: 4px;
+        background-color: $ui-dark-orange;
+        padding: 1rem 1.5rem;
+        font-size: 1rem;
+        
+        &:before {
+            display: inline-block;
+            margin-right: .5rem;
+            background-repeat: no-repeat;
+            background-position: center center;
+            background-size: contain;
+            background-image: url("/svgs/feature/create-icon.svg");
+            width: 1.5rem;
+            height: 1.5rem;
+            vertical-align: -.35rem;
+            content: "";
+        }
+    }
+}
+
+@media only screen and (min-width: $desktop) {
+    .feature-banner-image {
+        &.right:after {
+            display: block;
+            position: absolute;
+            bottom: -42px;
+            right: 33%;
+            background-image: url("/svgs/feature/tapping-block.svg");
+            background-repeat: no-repeat;
+            width: 122px;
+            height: 81px;
+            content: "";
+        }
+    }
+}
+
+@media only screen and (min-width: $tablet) {
+    .feature-top-banner {
+        margin-bottom: 80px; // double the normal banner 40px for the notch
+        
+        &:after{
+            display: block;
+            position: absolute;
+            bottom: -46px;
+            left: 48px;
+            background-image: url("/svgs/feature/banner-notch.svg");
+            background-repeat: no-repeat;
+            width: 433px;
+            height: 56px;
+            content: "";
+        }
+    }
+}
+
+@media only screen and (max-width: $desktop - 1) {
+    .feature-top-banner {
+        .feature-header {
+            text-align: left; // override #view text centering
+        }
+        
+        .feature-banner-images {
+            justify-content: flex-end;
+        }
+        
+        .feature-banner-image {
+            &.left {
+                display: none;
+            }
+        }
+    }
+}
+@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+    .feature-top-banner {
+        .feature-top-container {
+            left: 4rem;
+        }
+        
+        .feature-banner-image {
+            &.right {
+                margin-right: -8rem;
+            }
+        }
+    }
+}
+
+@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+    .feature-top-banner {
+        .feature-top-container {
+            left: 2rem;
+        }
+        
+        .feature-banner-image {
+            &.right {
+                margin-right: -12rem;
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: $mobile - 1) {
+    .feature-top-banner {
+        overflow: hidden;
+        height: 32rem;
+        
+        .feature-top-container {
+            right: 0;
+            left: 0;
+            height: 30rem;
+            justify-content: flex-start;
+            align-items: center;
+        }
+        
+        .feature-header {
+            margin: 2rem 0;
+            text-align: center;
+        }
+        
+        .feature-banner-image {
+            &.right {
+                margin-right: 0;
+                margin-bottom: -8rem;
+                width: 100%;
+            }
+        }
+    }
+}
+
+@media only screen and (min-width: $tablet) and (max-width: 1200px) {
+    // .feature-top-banner {
+    //     height: 22rem;
+    // 
+    //     .feature-top-container {
+    //         bottom: 4rem;
+    //     }
+    // 
+    //     .feature-banner-image {
+    //         width: 20rem;
+    //     }
+    // }
+}

src/views/splash/hoc/hoc-banner.scss

-@import "../../../colors";
-@import "../../../frameless";
-
-$tile-height: 244px;
-
-.hoc-banner {
-    display: flex;
-    position: relative;
-    background-color: $ui-aqua;
-    background-image: url("/images/hoc/bg-pattern.png");
-    background-size: cover;
-    padding: 0;
-    height: 25rem;
-    overflow: hidden;
-    justify-content: center;
-
-    &.mod-middle-banner {
-        background-color: $ui-purple;
-    }
-
-    .hoc-container {
-        margin: auto;
-        width: $desktop;
-        height: 25rem;
-        justify-content: flex-start;
-
-        .hoc-title-container {
-            margin: 1.5rem 0;
-            width: 100%;
-            justify-content: space-between;
-        }
-    }
-
-    .hoc-banner-images {
-        display: flex;
-        width: $desktop;
-        justify-content: space-between;
-    }
-
-    .hoc-banner-image {
-        border: 2px solid $ui-aqua;
-        border-radius: 16px;
-        background-color: $ui-white;
-        width: $cols4;
-        height: $tile-height;
-        overflow: hidden;
-        box-sizing: border-box;
-        justify-content: flex-start;
-
-        &.mod-middle-image {
-            border: 2px solid $ui-purple;
-        }
-
-        img {
-            width: $cols4;
-            height: auto;
-        }
-
-        .hoc-image-text {
-            margin: auto auto; 
-            color: $ui-blue;
-            font-size: 1rem;
-            font-weight: bold;
-        }
-    }
-
-    .hoc-header{
-        color: $ui-white;
-    }
-
-    .hoc-header {
-        font-size: 2rem;
-    }
-
-    .hoc-more-activities {
-        border-radius: 10px;
-        background-color: $ui-white;
-        padding: .5rem 1rem .75rem 1rem;
-        color: $ui-blue;
-        font-size: .75rem;
-        font-weight: bold;
-
-        img {
-            margin-right: .25rem;
-            width: 20px;
-            height: 20px;
-            vertical-align: text-bottom;
-        }
-    }
-}
-
-@media only screen and (min-width: $tablet) and (max-width: $desktop) {
-    .hoc-banner {
-        height: 23.5rem;
-
-        .hoc-container {
-            bottom: 4rem;
-            width: $tablet;
-        }
-
-        .hoc-banner-images {
-            width: $tablet;
-        }
-
-        .hoc-banner-image {
-            width: $cols4;
-        }
-    }
-
-    .hoc-hideable {
-        display: none;
-    }
-}

src/views/splash/hoc/middle-banner.jsx

-const FormattedMessage = require('react-intl').FormattedMessage;
-const injectIntl = require('react-intl').injectIntl;
-const React = require('react');
-const MediaQuery = require('react-responsive').default;
-const frameless = require('../../../lib/frameless');
-
-const FlexRow = require('../../../components/flex-row/flex-row.jsx');
-const TitleBanner = require('../../../components/title-banner/title-banner.jsx');
-
-require('./hoc-banner.scss');
-
-const MiddleBanner = () => (
-    <TitleBanner className="hoc-banner mod-middle-banner">
-        <FlexRow className="hoc-container column">
-            <FlexRow className="hoc-title-container">
-                <h1 className="hoc-header">
-                    <FormattedMessage id="hocbanner.title" />
-                </h1>
-                <a
-                    className="hoc-more-activities button"
-                    href="/tips"
-                >
-                    <img src="/svgs/tutorials.svg" />
-                    <FormattedMessage id="hocbanner.moreActivities" />
-                </a>
-            </FlexRow>
-            <FlexRow className="hoc-banner-images">
-                <a href="/projects/editor/?tip_bar=name">
-                    <FlexRow className="hoc-banner-image mod-middle-image column">
-                        <img src="/images/ttt/animate-your-name.jpg" />
-                        <div className="hoc-image-text">
-                            <FormattedMessage id="hocbanner.name" />
-                        </div>
-                    </FlexRow>
-                </a>
-                <a href="/projects/editor/?tip_bar=fly">
-                    <FlexRow className="hoc-banner-image mod-middle-image column">
-                        <img src="/images/ttt/make-it-fly.jpg" />
-                        <div className="hoc-image-text">
-                            <FormattedMessage id="hocbanner.fly" />
-                        </div>
-                    </FlexRow>
-                </a>
-                <MediaQuery
-                    key="frameless-desktop"
-                    minWidth={frameless.desktop}
-                >
-                    <a href="/projects/editor/?tip_bar=pong">
-                        <FlexRow className="hoc-banner-image mod-middle-image column">
-                            <img src="/images/ttt/pong-game.jpg" />
-                            <div className="hoc-image-text">
-                                <FormattedMessage id="hocbanner.pong" />
-                            </div>
-                        </FlexRow>
-                    </a>
-                </MediaQuery>
-                
-            </FlexRow>
-        </FlexRow>
-    </TitleBanner>
-);
-
-module.exports = injectIntl(MiddleBanner);

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

-const FormattedMessage = require('react-intl').FormattedMessage;
-const injectIntl = require('react-intl').injectIntl;
-const React = require('react');
-
-const MediaQuery = require('react-responsive').default;
-const frameless = require('../../../lib/frameless');
-
-const FlexRow = require('../../../components/flex-row/flex-row.jsx');
-const TitleBanner = require('../../../components/title-banner/title-banner.jsx');
-
-require('./hoc-banner.scss');
-
-const TopBanner = () => (
-    <TitleBanner className="hoc-banner">
-        <FlexRow className="hoc-container column">
-            <FlexRow className="hoc-title-container">
-                <h1 className="hoc-header">
-                    <FormattedMessage id="hocbanner.title" />
-                </h1>
-                <a
-                    className="hoc-more-activities button"
-                    href="https://beta.scratch.mit.edu/?tutorial=all"
-                >
-                    <img src="/svgs/tutorials.svg" />
-                    <FormattedMessage id="hocbanner.moreActivities" />
-                </a>
-            </FlexRow>
-            <FlexRow className="hoc-banner-images">
-                <MediaQuery
-                    key="frameless-desktop"
-                    minWidth={frameless.desktop}
-                >
-                    <a href="https://beta.scratch.mit.edu/?tutorial=getStarted">
-                        <FlexRow className="hoc-banner-image column">
-                            <img src="/images/hoc/getting-started.jpg" />
-                            <div className="hoc-image-text">
-                                <FormattedMessage id="hocbanner.gettingStarted" />
-                            </div>
-                        </FlexRow>
-                    </a>
-                </MediaQuery>
-                <a href="https://beta.scratch.mit.edu/?tutorial=animations-that-talk">
-                    <FlexRow className="hoc-banner-image column">
-                        <img src="/images/hoc/create-animations-that-talk.png" />
-                        <div className="hoc-image-text">
-                            <FormattedMessage id="hocbanner.animationTalk" />
-                        </div>
-                    </FlexRow>
-                </a>
-                <a href="https://beta.scratch.mit.edu/?tutorial=animate-an-adventure-game#249143200">
-                    <FlexRow className="hoc-banner-image column">
-                        <img src="/images/hoc/create-an-adventure-game.jpg" />
-                        <div className="hoc-image-text">
-                            <FormattedMessage id="hocbanner.adventureGame" />
-                        </div>
-                    </FlexRow>
-                </a>
-            </FlexRow>
-        </FlexRow>
-    </TitleBanner>
-);
-
-module.exports = injectIntl(TopBanner);

src/views/splash/l10n.json

@@ -41,16 +41,7 @@
     "welcome.tryOut": "Try out starter projects",
     "welcome.connect": "Connect with other Scratchers",
 
-    "betabanner.title": "The Next Generation of Scratch",
-    "betabanner.subtitle": "Scratch 3.0 is coming in January! Try the Beta version now.",
-    "betabanner.callToAction": "Try it!",
-    
-    "hocbanner.title": "Get Creative with Coding!",
-    "hocbanner.moreActivities": "See more activities",
-    "hocbanner.gettingStarted": "Getting Started",
-    "hocbanner.animationTalk": "Create Animations that Talk",
-    "hocbanner.adventureGame": "Animate an Adventure Game",
-    "hocbanner.name": "Animate a Name",
-    "hocbanner.fly": "Make it Fly",
-    "hocbanner.pong": "Pong Game"
+    "featureBanner.title": "The new Scratch is here!",
+    "featureBanner.subtitle": "not used",
+    "featureBanner.callToAction": "Start Creating"
 }

src/views/splash/presentation.jsx

@@ -31,20 +31,13 @@ const LoveProjectMessage = require('./activity-rows/love-project.jsx');
 const RemixProjectMessage = require('./activity-rows/remix-project.jsx');
 const ShareProjectMessage = require('./activity-rows/share-project.jsx');
 
-// Beta Banner Components
-// const TopBanner = require('./beta/top-banner.jsx');
-const SmallTopBanner = require('./beta/small-top-banner.jsx');
-// const MiddleBanner = require('./beta/middle-banner.jsx');
+// Featured Banner Components
+const TopBanner = require('./feature/top-banner.jsx');
+const SmallTopBanner = require('./feature/small-top-banner.jsx');
+const MiddleBanner = require('./feature/middle-banner.jsx');
 
-const BETA_LAUNCH_TIME = 1533128400000; // August 1 at 9am ET
-const SMALL_BANNER_TIME = 1534942800000; // August 22 at 9am ET
-
-// Hour of Code Banner Components
-const TopBanner = require('./hoc/top-banner.jsx');
-const MiddleBanner = require('./hoc/middle-banner.jsx');
-
-const HOC_START_TIME = 1543813201000; // 12:01 am Dec 3rd
-const HOC_END_TIME = 1544806799000; // 11:59 Dec 14th
+// Scratch 3.0 Launch Banner
+const LAUNCH_END_TIME = 1547873999000;
 
 require('./splash.scss');
 
@@ -238,7 +231,7 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
             }
         }
     }
-    renderHomepageRows () {
+    renderHomepageRows (showBanner) {
         const rows = [
             <Box
                 key="community_featured_projects"
@@ -286,6 +279,21 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
             );
         }
         
+        if (
+            this.props.sessionStatus === sessionActions.Status.FETCHED &&
+            Object.keys(this.props.user).length === 0 &&
+            showBanner // Show middle banner
+        ) {
+            rows.push(
+                <MediaQuery
+                    key="frameless-tablet"
+                    minWidth={frameless.tablet}
+                >
+                    <MiddleBanner />
+                </MediaQuery>
+            );
+        }
+
         if (this.props.featuredGlobal.scratch_design_studio &&
             this.props.featuredGlobal.scratch_design_studio.length > 4) {
 
@@ -361,7 +369,10 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
         return rows;
     }
     render () {
-        const featured = this.renderHomepageRows();
+        const ShowTopBanner = Date.now() < LAUNCH_END_TIME;
+        const ShowMiddleBanner = false;
+        const ShowSmallTopBanner = false;
+        const featured = this.renderHomepageRows(ShowMiddleBanner);
 
         const formatHTMLMessage = this.props.intl.formatHTMLMessage;
         const formatNumber = this.props.intl.formatNumber;
@@ -433,27 +444,26 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
                 ] : []}
                 {
                     this.props.sessionStatus === sessionActions.Status.FETCHED &&
-                    Object.keys(this.props.user).length === 0 && // Only show top banner if user is not logged in
-                    Date.now() >= HOC_START_TIME &&
-                    Date.now() < HOC_END_TIME &&
+                    Object.keys(this.props.user).length === 0 && // if user is not logged in
+                    ShowTopBanner &&
                     <MediaQuery
                         key="frameless-tablet"
-                        minWidth={frameless.tablet}
+                        minWidth={0}
                     >
-                        <TopBanner />
+                        <TopBanner actionLink="/create" />
                     </MediaQuery>
                 }
                 {
                     this.props.sessionStatus === sessionActions.Status.FETCHED &&
-                    Object.keys(this.props.user).length !== 0 && // Only show top banner if user is logged in
-                    Date.now() >= BETA_LAUNCH_TIME &&
+                    Object.keys(this.props.user).length !== 0 && // if user is logged in
+                    ShowTopBanner &&
                     <MediaQuery
                         key="frameless-tablet"
-                        minWidth={frameless.tablet}
+                        minWidth={0}
                     >
-                        {Date.now() >= SMALL_BANNER_TIME ?
-                            <SmallTopBanner /> : // Show small banner starting September 1 at 9am ET
-                            <TopBanner />
+                        {ShowSmallTopBanner ?
+                            <SmallTopBanner /> :
+                            <TopBanner actionLink="/projects/editor/?tutorial=whatsnew" />
                         }
                     </MediaQuery>
                 }
@@ -492,41 +502,17 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
                                 minWidth={frameless.desktop}
                             >
                                 {
-                                    (Date.now() < HOC_START_TIME || // Hide intro if HoC banner is showing
-                                    Date.now() > HOC_END_TIME) ?
-                                        [
+                                    !ShowTopBanner && // show intro if not showing top banner
                                     <Intro
                                         key="intro"
                                         messages={messages}
                                         projectCount={this.props.projectCount}
                                     />
-                                        ] :
-                                        []
                                 }
                                 
                             </MediaQuery>
                         ]) : []
                     }
-                    {featured.shift()}
-                    {featured.shift()}
-                </div>
-                {
-                    this.props.sessionStatus === sessionActions.Status.FETCHED &&
-                    Object.keys(this.props.user).length !== 0 && // Only show if user is logged in
-                    Date.now() >= HOC_START_TIME && // Show middle banner on and after Dec 3
-                    Date.now() < HOC_END_TIME && // Hide middle banner after Dec 14
-                    <MediaQuery
-                        key="frameless-desktop"
-                        minWidth={frameless.tablet}
-                    >
-                        <MiddleBanner />
-                    </MediaQuery>
-                }
-                
-                <div
-                    className="inner mod-splash"
-                    key="inner2"
-                >
                     {featured}
 
                     {this.props.isAdmin && (

static/svgs/feature/banner-notch.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="433px" height="56px" viewBox="0 0 433 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
+    <title>Path 2</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Sketches" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M2.84217094e-14,9.78690955 L42.1439577,9.78690955 C55.3965552,9.78690955 68.1070542,15.0482355 77.4825045,24.4147862 L93.8502604,40.7670053 C103.225711,50.1335561 115.93621,55.394882 129.188807,55.394882 L296.203618,55.394882 C309.456216,55.394882 322.166715,50.1335561 331.542165,40.7670053 L347.719506,24.6050209 C357.094956,15.2384701 369.805455,9.9771442 383.058053,9.9771442 L432.108295,9.9771442 L432.108295,-2.27373675e-13 L2.84217094e-14,-2.27373675e-13 L2.84217094e-14,9.78690955 Z" id="Path-2" fill="#4D97FF"></path>
+    </g>
+</svg>
\ No newline at end of file

static/svgs/feature/create-icon.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
+    <title>surprise-icon</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M6.99375039,8.65327167 C7.80357478,8.43603525 8.43603525,7.80357478 8.65327167,6.99375039 L9.14824073,5.15274045 C9.38335104,4.28241985 10.6180239,4.28241985 10.8517593,5.15274045 L11.3481032,6.99375039 C11.5653397,7.80357478 12.1978001,8.43603525 13.0062496,8.65327167 L14.8472595,9.14824073 C15.7175802,9.38335104 15.7175802,10.6180239 14.8472595,10.8531342 L13.0062496,11.3481032 C12.1978001,11.5653397 11.5653397,12.1978001 11.3481032,13.0062496 L10.8517593,14.8472595 C10.6180239,15.7175802 9.38335104,15.7175802 9.14824073,14.8472595 L8.65327167,13.0062496 C8.43603525,12.1978001 7.80357478,11.5653397 6.99375039,11.3481032 L5.15274045,10.8531342 C4.28241985,10.6180239 4.28241985,9.38335104 5.15274045,9.14824073 L6.99375039,8.65327167 Z M3.9061823,14.5100817 C4.20079987,14.430095 4.4314281,14.2007999 4.51008165,13.9061823 L4.69005166,13.2369605 C4.77403766,12.9210132 5.22329612,12.9210132 5.30994834,13.2369605 L5.48858524,13.9061823 C5.5685719,14.2007999 5.79786702,14.430095 6.09248459,14.5100817 L6.76303949,14.6900517 C7.07898684,14.7740377 7.07898684,15.2232961 6.76303949,15.3099483 L6.09248459,15.4885852 C5.79786702,15.5685719 5.5685719,15.797867 5.48858524,16.0924846 L5.30994834,16.7617064 C5.22329612,17.0789868 4.77403766,17.0789868 4.69005166,16.7617064 L4.51008165,16.0924846 C4.4314281,15.797867 4.20079987,15.5685719 3.9061823,15.4885852 L3.23696051,15.3099483 C2.92101316,15.2232961 2.92101316,14.7740377 3.23696051,14.6900517 L3.9061823,14.5100817 Z M13.9064844,4.50925154 C14.2012002,4.42923821 14.4305718,4.2012002 14.5092515,3.90648441 L14.6906151,3.23703951 C14.7746291,2.92098683 15.2240373,2.92098683 15.3093849,3.23703951 L15.4894149,3.90648441 C15.5680947,4.2012002 15.7987998,4.42923821 16.0935156,4.50925154 L16.7629605,4.6906151 C17.0790132,4.7746291 17.0790132,5.22403734 16.7629605,5.3093849 L16.0935156,5.4894149 C15.7987998,5.56809468 15.5680947,5.7987998 15.4894149,6.09218203 L15.3093849,6.76162694 C15.2240373,7.07901317 14.7746291,7.07901317 14.6906151,6.76162694 L14.5092515,6.09218203 C14.4305718,5.7987998 14.2012002,5.56809468 13.9064844,5.4894149 L13.2370395,5.3093849 C12.9209868,5.22403734 12.9209868,4.7746291 13.2370395,4.6906151 L13.9064844,4.50925154 Z M5.75,5.75 C5.75,6.164 5.414,6.5 5,6.5 C4.586,6.5 4.25,6.164 4.25,5.75 C4.25,5.336 4.586,5 5,5 C5.414,5 5.75,5.336 5.75,5.75 Z M16,14.25 C16,14.9416667 15.44,15.5 14.75,15.5 C14.0583333,15.5 13.5,14.9416667 13.5,14.25 C13.5,13.56 14.0583333,13 14.75,13 C15.44,13 16,13.56 16,14.25 Z" id="path-1"></path>
+    </defs>
+    <g id="Action-Menu" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Action-Menu/Actions/Surprise" transform="translate(-3.000000, -3.000000)">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <use id="surprise-icon" fill="#FFFFFF" xlink:href="#path-1"></use>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

static/svgs/feature/illustration-left.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="164px" height="291px" viewBox="0 0 164 291" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
+    <title>left hand stuff</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Sketches" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="V3_Announcement-(Logged-out)" transform="translate(0.000000, -87.000000)">
+            <g id="Banner">
+                <g id="Illustrations-">
+                    <g id="left-hand-stuff" transform="translate(-42.000000, 88.000000)">
+                        <path d="M106.69431,100.494193 C121.482072,128.616711 78.0460228,142.006849 138.11178,143.52393 C198.177537,145.041011 212.963212,161.344722 203.261157,185.712612 C193.559102,210.080501 74.8106127,180.694768 80.8172928,211.330913 C86.823973,241.967057 178.772384,215.925162 170.917495,265.315642 C163.062605,314.706122 51.8595901,271.810522 24.0353714,287.739751 C-3.78884736,303.668981 0.65234375,73.7175407 0.65234375,45.2016381 C0.65234375,10.3723754 116.395321,-2.9681166 60.4869909,54.9085474 C27.6643915,88.8867139 91.9065484,72.3716761 106.69431,100.494193 Z" id="Combined-Shape" fill-opacity="0.15" fill="#FFFFFF" transform="translate(103.196143, 152.618326) scale(1, -1) translate(-103.196143, -152.618326) "></path>
+                        <g id="Blocks" transform="translate(25.000000, 127.000000)">
+                            <g id="Motion-Block" transform="translate(114.107708, 95.968213) rotate(-10.000000) translate(-114.107708, -95.968213) translate(87.107708, 81.468213)">
+                                <path d="M53.96,5.24691358 L53.96,22.0790123 C53.96,23.2375309 53.0299415,24.1777778 51.8839766,24.1777778 L29.8822807,24.1777778 C29.3300585,24.1777778 28.8027485,24.3960494 28.4166082,24.7906173 L25.5184795,27.7204938 C25.1323392,28.1108642 24.6050292,28.3333333 24.052807,28.3333333 L13.315614,28.3333333 C12.7675439,28.3333333 12.2402339,28.1108642 11.8457895,27.7204938 L8.95596491,24.7906173 C8.56567251,24.3960494 8.03421053,24.1777778 7.48614035,24.1777778 L2.07602339,24.1777778 C0.93005848,24.1777778 0,23.2375309 0,22.0790123 L0,5.24691358 C0,4.08839506 0.93005848,3.14814815 2.07602339,3.14814815 L7.44461988,3.14814815 C7.99684211,3.14814815 8.52415205,3.37061728 8.9102924,3.76098765 L11.8457895,6.73283951 C12.2402339,7.12320988 12.7675439,7.34567901 13.315614,7.34567901 L24.052807,7.34567901 C24.6050292,7.34567901 25.1323392,7.12320988 25.5184795,6.73283951 L28.4539766,3.76098765 C28.8484211,3.37061728 29.375731,3.14814815 29.9238012,3.14814815 L51.8839766,3.14814815 C53.0299415,3.14814815 53.96,4.08839506 53.96,5.24691358" id="Fill-6-Copy" fill="#855CD6"></path>
+                                <path d="M53.96,2.09876543 L53.96,18.9308642 C53.96,20.0893827 53.0299415,21.0296296 51.8839766,21.0296296 L29.8822807,21.0296296 C29.3300585,21.0296296 28.8027485,21.2479012 28.4166082,21.6424691 L25.5184795,24.5723457 C25.1323392,24.962716 24.6050292,25.1851852 24.052807,25.1851852 L13.315614,25.1851852 C12.7675439,25.1851852 12.2402339,24.962716 11.8457895,24.5723457 L8.95596491,21.6424691 C8.56567251,21.2479012 8.03421053,21.0296296 7.48614035,21.0296296 L2.07602339,21.0296296 C0.93005848,21.0296296 0,20.0893827 0,18.9308642 L0,2.09876543 C0,0.940246914 0.93005848,0 2.07602339,0 L7.44461988,0 C7.99684211,0 8.52415205,0.222469136 8.9102924,0.612839506 L11.8457895,3.58469136 C12.2402339,3.97506173 12.7675439,4.19753086 13.315614,4.19753086 L24.052807,4.19753086 C24.6050292,4.19753086 25.1323392,3.97506173 25.5184795,3.58469136 L28.4539766,0.612839506 C28.8484211,0.222469136 29.375731,0 29.9238012,0 L51.8839766,0 C53.0299415,0 53.96,0.940246914 53.96,2.09876543" id="Fill-6" fill="#9966FF"></path>
+                            </g>
+                            <g id="Command-Block" transform="translate(38.500000, 25.000000) rotate(10.000000) translate(-38.500000, -25.000000) translate(3.000000, 6.000000)">
+                                <path d="M71,28.2831749 C71,29.4060467 70.1125,30.3173629 69.0277778,30.3173629 L28.3881667,30.3173629 C27.8635556,30.3173629 27.3626111,30.5289185 26.9918333,30.9113458 L24.2425556,33.7510723 C23.8717778,34.1294313 23.3708333,34.3450552 22.8462222,34.3450552 L12.6498333,34.3450552 C12.1252222,34.3450552 11.6242778,34.1294313 11.2535,33.7510723 L8.50422222,30.9113458 C8.13344444,30.5289185 7.6325,30.3173629 7.11183333,30.3173629 L1.97222222,30.3173629 C0.883555556,30.3173629 0,29.4060467 0,28.2831749 L0,9.9347988 C4.82713782,3.34578764 12.0223742,0.0512820513 21.5857093,0.0512820513 C31.1490443,0.0512820513 38.3442807,3.34578764 43.1714186,9.9347988 L69.0277778,9.9347988 C70.1125,9.9347988 71,10.846115 71,11.9689868 L71,28.2831749 Z" id="Fill-3-Copy" fill="#E6AC00"></path>
+                                <path d="M71,31.2318928 C71,32.3547646 70.1125,33.2660809 69.0277778,33.2660809 L28.3881667,33.2660809 C27.8635556,33.2660809 27.3626111,33.4776364 26.9918333,33.8600638 L24.2425556,36.6997903 C23.8717778,37.0781492 23.3708333,37.2937732 22.8462222,37.2937732 L12.6498333,37.2937732 C12.1252222,37.2937732 11.6242778,37.0781492 11.2535,36.6997903 L8.50422222,33.8600638 C8.13344444,33.4776364 7.6325,33.2660809 7.11183333,33.2660809 L1.97222222,33.2660809 C0.883555556,33.2660809 0,32.3547646 0,31.2318928 L0,12.8835168 C4.82713782,6.29450558 12.0223742,3 21.5857093,3 C31.1490443,3 38.3442807,6.29450558 43.1714186,12.8835168 L69.0277778,12.8835168 C70.1125,12.8835168 71,13.794833 71,14.9177048 L71,31.2318928 Z" id="Fill-3" fill="#FFBF00"></path>
+                            </g>
+                        </g>
+                        <g id="Wave" transform="translate(78.000000, 0.000000)">
+                            <path d="M51.2719192,6.78787121 C53.6773667,8.15334882 55.1700752,10.7664211 55.1748291,13.6005239" id="Stroke-4" stroke="#FFFFFF" stroke-width="3.24" stroke-linecap="round" stroke-linejoin="round"></path>
+                            <path d="M55.0322136,0.758157836 C59.3914929,3.22878819 62.0964329,7.95393015 62.1011867,13.0867507" id="Stroke-6" stroke="#FFFFFF" stroke-width="3.24" stroke-linecap="round" stroke-linejoin="round"></path>
+                            <path d="M12.9810935,56.3566733 C10.2666458,55.6248166 8.14642925,53.4145111 7.45712117,50.6000554" id="Stroke-8" stroke="#FFFFFF" stroke-width="3.24" stroke-linecap="round" stroke-linejoin="round"></path>
+                            <path d="M10.701623,63.3161885 C5.78138948,61.9850934 1.94978736,57.99672 0.699525134,52.9031938" id="Stroke-10" stroke="#FFFFFF" stroke-width="3.24" stroke-linecap="round" stroke-linejoin="round"></path>
+                            <path d="M66.3915086,26.4986116 C69.5385565,21.1594959 59.3082739,19.8824305 54.2596865,30.2905134 C51.3741003,36.2436029 47.2049749,31.4251369 45.3937585,27.191174 C43.0168341,21.6113805 39.280309,14.4745497 37.1173078,10.1374392 C34.6738295,5.24529635 28.7315185,8.7965205 30.7899351,13.2171315 C33.589952,19.2340742 39.342109,28.8710061 37.801862,29.9172174 C36.1522765,31.0567527 30.2052117,17.6623014 25.3895628,10.2897047 C21.8812224,4.92111821 16.7137888,8.27095897 19.3426672,14.1945777 C22.4944689,21.2921142 29.6775344,30.7276627 28.5841492,31.7198443 C27.4812563,32.7169377 21.3060067,23.5564494 17.6122662,17.9471852 C14.6078338,13.3841323 9.51646176,17.4167119 12.2546787,21.5868216 C16.3762656,27.869001 24.9094241,37.5697862 23.9301313,38.5177616 C22.6418382,39.7751799 17.902251,33.2621464 15.1164956,30.0301886 C11.741263,26.1105802 7.98096861,29.995806 10.5813239,33.3702057 C15.168788,39.3085598 26.8252252,53.2482198 30.1434116,57.0695924 C37.9730006,66.0778152 59.5602279,57.8898613 58.8804275,42.2998399 C58.519135,33.9547088 64.6040614,29.5340978 66.3915086,26.4986116 Z" id="Fill-1" fill="#FFBF00"></path>
+                            <path d="M10.3532401,29.2226789 C10.4230342,29.3302802 10.4989908,29.4376334 10.5813239,29.5444745 C15.168788,35.4828286 26.8252252,49.4224886 30.1434116,53.2438612 C37.9730006,62.252084 59.5602279,54.0641301 58.8804275,38.4741087 C58.5331542,30.4527929 64.1415416,26.0573407 66.1646501,23.0326424 C67.08479,23.7055973 67.3185336,24.9258697 66.3915086,26.4986116 C64.6040614,29.5340978 58.519135,33.9547088 58.8804275,42.2998399 C59.5602279,57.8898613 37.9730006,66.0778152 30.1434116,57.0695924 C26.8252252,53.2482198 15.168788,39.3085598 10.5813239,33.3702057 C9.39508068,31.830855 9.53251921,30.185199 10.3532401,29.2226789 Z M23.984955,38.4331035 C24.4964131,37.0993143 16.2758898,27.7160068 12.2546787,21.5868216 C11.2052946,19.9886843 11.3058426,18.410746 11.9981617,17.329079 C12.074568,17.4726846 12.1599367,17.6168051 12.2546787,17.7610904 C16.3482678,24.0005952 25.6077611,36.3639657 23.984955,38.4331035 Z M28.6452981,31.6405935 C29.3577982,30.3061794 22.423878,21.1331506 19.3426672,14.1945777 C18.4673946,12.2223369 18.456363,10.535406 18.960594,9.36057054 C19.0627173,9.68710896 19.189451,10.0236064 19.3426672,10.3688465 C22.4944689,17.466383 30.7899351,29.5444745 28.6637835,31.6243379 C28.6577888,31.6302021 28.6516266,31.6356193 28.6452981,31.6405935 Z M37.9051051,29.8212912 C39.0523744,28.3847443 33.5189722,19.0815461 30.7899351,13.2171315 C30.1435785,11.8290301 30.2860953,10.5266505 30.861446,9.54449141 C33.6793693,15.5552021 40.5119187,27.6381069 37.9051051,29.8212912 Z" id="Combined-Shape" fill-opacity="0.15" fill="#000000"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

static/svgs/feature/tapping-block.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="122px" height="81px" viewBox="0 0 122 81" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
+    <title>Hat Block Tap</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M39.8884411,39.9863208 C40.5832165,32.1028273 47.0547731,28.7414197 49.1765471,26.1194211 C52.9045908,21.5111724 43.1208996,18.9838202 36.9035097,28.1093829 C33.349691,33.3252778 29.9021071,28.2604991 28.6753611,24.0462129 C27.0611238,18.4999833 23.5960111,9.02022543 22.0380782,4.6701998 C20.2785648,-0.241606927 14.0545352,2.32047545 15.5001249,6.74022662 C17.0110489,11.3606707 19.6387659,20.3162939 20.6615412,23.1654971 C20.8272674,23.6267992 20.9871508,24.2718267 20.6105485,24.3919243 C20.0384743,24.5740591 19.852829,23.8463153 19.4682591,22.8113019 C17.3252382,17.0370724 10.1939637,20.0893545 12.7428014,25.6196772 C12.9528807,26.075677 13.636767,27.2999833 13.3467461,27.543625 C12.9993584,27.8355179 12.6501116,27.6992482 12.4118801,27.2398019 C9.81417437,22.2344092 4.23977038,25.2501053 6.74637979,29.9614842 C7.13785492,30.6971815 7.30225322,31.127465 6.96389548,31.3480416 C6.67573367,31.5362741 6.46193619,31.5193067 5.98998822,30.7928884 C4.0342061,27.7803737 -0.565493875,30.9294232 1.5395481,34.4313423 C5.25085981,40.6043065 7.34713741,46.1221688 10.0943686,50.1384132 C16.5752207,59.6128687 38.5902522,54.7169689 39.8884411,39.9863208" id="path-1"></path>
+    </defs>
+    <g id="Sketches" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="V3_Announcement-(Logged-out)" transform="translate(-676.000000, -386.000000)">
+            <g id="Banner">
+                <g id="Hat-Block-Tap" transform="translate(673.000000, 372.000000)">
+                    <g id="Hat-Block" transform="translate(62.501943, 40.600635) rotate(-10.000000) translate(-62.501943, -40.600635) translate(4.501943, 9.600635)">
+                        <path d="M115.32408,51.3751501 C115.32408,53.1760003 113.88658,54.6375599 112.129635,54.6375599 L46.3049131,54.6375599 C45.4551909,54.6375599 44.643802,54.9768505 44.0432464,55.5901836 L39.5901909,60.1445076 C38.9896353,60.7513159 38.1782464,61.0971313 37.3285242,61.0971313 L20.8132464,61.0971313 C19.9635242,61.0971313 19.1521353,60.7513159 18.5515798,60.1445076 L14.0985242,55.5901836 C13.4979687,54.9768505 12.6865798,54.6375599 11.8432464,54.6375599 L3.51852421,54.6375599 C1.75519088,54.6375599 0.324079764,53.1760003 0.324079764,51.3751501 L0.324079764,21.9482136 C8.14268328,11.3808254 19.7969395,6.09713131 35.2868483,6.09713131 C50.7767572,6.09713131 62.4310134,11.3808254 70.2496169,21.9482136 L112.129635,21.9482136 C113.88658,21.9482136 115.32408,23.4097732 115.32408,25.2106234 L115.32408,51.3751501 Z" id="Fill-3-Copy" fill="#E6AC00"></path>
+                        <path d="M115.207513,46.2774631 C115.207513,48.0783134 113.770013,49.5398729 112.013068,49.5398729 L46.1883462,49.5398729 C45.338624,49.5398729 44.5272351,49.8791636 43.9266796,50.4924966 L39.473624,55.0468207 C38.8730685,55.6536289 38.0616796,55.9994444 37.2119573,55.9994444 L20.6966796,55.9994444 C19.8469573,55.9994444 19.0355685,55.6536289 18.4350129,55.0468207 L13.9819573,50.4924966 C13.3814018,49.8791636 12.5700129,49.5398729 11.7266796,49.5398729 L3.40195734,49.5398729 C1.63862401,49.5398729 0.2075129,48.0783134 0.2075129,46.2774631 L0.2075129,16.8505267 C8.02611642,6.28313847 19.6803726,0.999444365 35.1702815,0.999444365 C50.6601903,0.999444365 62.3144465,6.28313847 70.13305,16.8505267 L112.013068,16.8505267 C113.770013,16.8505267 115.207513,18.3120863 115.207513,20.1129365 L115.207513,46.2774631 Z" id="Fill-3" fill="#FFBF00"></path>
+                    </g>
+                    <g id="Tap" transform="translate(75.000000, 29.000000)">
+                        <path d="M25.895567,13.4202475 C25.1815426,10.0217326 22.1667001,7.47005432 18.5558813,7.47005432 C14.4137457,7.47005432 11.0558813,10.8279187 11.0558813,14.9700543 C11.0558813,18.5731364 13.5966366,21.5827933 16.9842407,22.3051186" id="Path" stroke="#FFFFFF" stroke-width="2.5" opacity="0.75" stroke-linecap="round" stroke-linejoin="round" transform="translate(18.475724, 14.887586) rotate(32.000000) translate(-18.475724, -14.887586) "></path>
+                        <path d="M29.0723292,23.2937242 C30.8556116,21.0055414 31.9179225,18.1279033 31.9179225,15.0021493 C31.9179225,7.54630515 25.8737666,1.50214928 18.4179225,1.50214928 C10.9620784,1.50214928 4.91792248,7.54630515 4.91792248,15.0021493 C4.91792248,18.8140893 6.497839,22.2570201 9.03857301,24.7118426" id="Path" stroke="#FFFFFF" stroke-width="2.5" opacity="0.5" stroke-linecap="round" stroke-linejoin="round" transform="translate(18.417922, 13.106996) rotate(-3.000000) translate(-18.417922, -13.106996) "></path>
+                        <g id="Group-2" transform="translate(0.000000, 11.000000)">
+                            <mask id="mask-2" fill="white">
+                                <use xlink:href="#path-1"></use>
+                            </mask>
+                            <use id="Fill-1" fill="#3D79CC" xlink:href="#path-1"></use>
+                            <path d="M38.8884411,37.9863208 C39.5832165,30.1028273 46.0547731,26.7414197 48.1765471,24.1194211 C51.9045908,19.5111724 42.1208996,16.9838202 35.9035097,26.1093829 C32.349691,31.3252778 28.9021071,26.2604991 27.6753611,22.0462129 C26.0611238,16.4999833 22.5960111,7.02022543 21.0380782,2.6701998 C19.2785648,-2.24160693 13.0545352,0.320475452 14.5001249,4.74022662 C16.0110489,9.36067071 18.6387659,18.3162939 19.6615412,21.1654971 C19.8272674,21.6267992 19.9871508,22.2718267 19.6105485,22.3919243 C19.0384743,22.5740591 18.852829,21.8463153 18.4682591,20.8113019 C16.3252382,15.0370724 9.19396368,18.0893545 11.7428014,23.6196772 C11.9528807,24.075677 12.636767,25.2999833 12.3467461,25.543625 C11.9993584,25.8355179 11.6501116,25.6992482 11.4118801,25.2398019 C8.81417437,20.2344092 3.23977038,23.2501053 5.74637979,27.9614842 C6.13785492,28.6971815 6.30225322,29.127465 5.96389548,29.3480416 C5.67573367,29.5362741 5.46193619,29.5193067 4.98998822,28.7928884 C3.0342061,25.7803737 -1.56549387,28.9294232 0.539548101,32.4313423 C4.25085981,38.6043065 6.34713741,44.1221688 9.09436858,48.1384132 C15.5752207,57.6128687 37.5902522,52.7169689 38.8884411,37.9863208" id="Fill-1" fill="#4C97FF" mask="url(#mask-2)"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file