Merge pull request #1956 from technoboy10/feature/beta-banner

Add top and middle splash page banners for beta launch

src/routes.json

@@ -205,11 +205,17 @@
         "title": "Scratch 3.0 Preview"
     },
     {
-        "name": "preview-faq",
+        "name": "3faq",
+        "pattern": "^/3faq/?$",
+        "routeAlias": "/3faq/?$",
+        "view": "preview-faq/preview-faq",
+        "title": "Scratch 3.0 FAQ"
+    },
+    {
+        "name": "preview-faq-redirect",
         "pattern": "^/preview-faq/?$",
         "routeAlias": "/preview-faq/?$",
-        "view": "preview-faq/preview-faq",
-        "title": "Scratch 3.0 Preview FAQ"
+        "redirect": "/3faq"
     },
     {
         "name": "privacypolicy",

src/views/preview-faq/l10n.json

 {
-    "preview-faq.title": "Scratch 3.0 Preview FAQ"
+    "preview-faq.title": "Scratch 3.0 FAQ"
 }

src/views/splash/beta/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 FlexRow = require('../../../components/flex-row/flex-row.jsx');
+const TitleBanner = require('../../../components/title-banner/title-banner.jsx');
+
+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" />
+            </h2>
+            <h3 className="beta-copy">
+                <FormattedMessage id="betabanner.subtitle" />
+            </h3>
+            <a
+                className="beta-try-it button"
+                href="https://beta.scratch.mit.edu/"
+            >
+                <FormattedMessage id="betabanner.callToAction" />
+            </a>
+        </FlexRow>
+        <div className="beta-banner-images">
+            <MediaQuery maxWidth={frameless.desktop - 1}>
+                <div className="beta-banner-image left">
+                    <img src="/images/beta/left-illustration.png" />
+                </div>
+            </MediaQuery>
+            <div className="beta-banner-image right">
+                <img src="/images/beta/right-illustration.png" />
+            </div>
+        </div>
+    </TitleBanner>
+);
+
+module.exports = injectIntl(MiddleBanner);

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

+@import "../../../colors";
+@import "../../../frameless";
+
+.beta-middle-banner {
+    display: flex;
+    margin-top: 20px;
+    border-radius: 16px;
+    background-color: $ui-orange;
+    background-image: url("/images/beta/bg-pattern.png");
+    background-size: cover;
+    padding: 0;
+    height: 17rem;
+    overflow: hidden;
+    box-sizing: border-box;
+    justify-content: space-between;
+
+    .beta-middle-container {
+        padding-left: 3rem;
+        align-items: flex-start;
+        flex-shrink: 0;
+    }
+
+    .beta-banner-images {
+        display: flex;
+        height: 100%;
+        align-self: flex-end;
+
+        .beta-banner-image {
+            display: flex;
+            margin-right: 2rem;
+            min-width: 0;
+            height: 100%;
+            align-self: flex-end;
+
+            img {
+                display: block;
+                max-width: 100%;
+                max-height: 100%;
+                align-self: flex-end;
+            }
+        }
+    }
+
+    .beta-header,
+    .beta-copy,
+    .beta-try-it {
+        color: $ui-white;
+    }
+
+    .beta-header {
+        font-size: 1.7rem;
+    }
+
+    .beta-copy {
+        margin-bottom: 1rem;
+        max-width: 350px;
+        line-height: 1.7rem;
+        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: $desktop - 1) {
+    .beta-middle-banner {
+        margin: 20px auto 40px auto;
+        width: $cols8;
+        height: initial;
+        flex-direction: column;
+        justify-content: center;
+
+        .beta-middle-container {
+            padding-top: 4rem;
+            padding-left: 0;
+            align-items: center;
+        }
+
+        .beta-banner-images {
+            .beta-banner-image {
+                margin: 0;
+                padding: 0;
+
+                &.left {
+                    margin-left: -2.5rem;
+                }
+
+                &.right {
+                    margin-right: -2.5rem;
+                }
+            }
+        }
+    }
+}
+
+

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

+const FormattedMessage = require('react-intl').FormattedMessage;
+const injectIntl = require('react-intl').injectIntl;
+const React = require('react');
+
+const FlexRow = require('../../../components/flex-row/flex-row.jsx');
+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" />
+            </h2>
+            <a
+                className="beta-try-it button"
+                href="https://beta.scratch.mit.edu/"
+            >
+                <FormattedMessage id="betabanner.callToAction" />
+            </a>
+        </FlexRow>
+    </TitleBanner>
+);
+
+module.exports = injectIntl(SmallTopBanner);

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

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

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

+const FormattedMessage = require('react-intl').FormattedMessage;
+const injectIntl = require('react-intl').injectIntl;
+const React = require('react');
+
+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" />
+            </h1>
+            <h3 className="beta-copy">
+                <FormattedMessage id="betabanner.subtitle" />
+            </h3>
+            <a
+                className="beta-try-it button"
+                href="https://beta.scratch.mit.edu/"
+            >
+                <FormattedMessage id="betabanner.callToAction" />
+            </a>
+        </FlexRow>
+        <div className="beta-banner-images">
+            <div className="beta-banner-image left">
+                <img src="/images/beta/left-illustration.png" />
+            </div>
+            <div className="beta-banner-image right">
+                <img src="/images/beta/right-illustration.png" />
+            </div>
+        </div>
+    </TitleBanner>
+);
+
+module.exports = injectIntl(TopBanner);

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;
+        bottom: 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/l10n.json

@@ -39,5 +39,9 @@
     "welcome.welcomeToScratch": "Welcome to Scratch!",
     "welcome.learn": "Learn how to make a project in Scratch",
     "welcome.tryOut": "Try out starter projects",
-    "welcome.connect": "Connect with other Scratchers"
+    "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!"
 }

src/views/splash/presentation.jsx

@@ -31,6 +31,14 @@ 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');
+
+const BETA_LAUNCH_TIME = 1533128400000; // August 1 at 9am ET
+const SMALL_BANNER_TIME = 1534942800000; // August 22 at 9am ET
+
 require('./splash.scss');
 
 class ActivityList extends React.Component {
@@ -271,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 &&
+            Date.now() >= BETA_LAUNCH_TIME // Show middle banner on and after August 1
+        ) {
+            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) {
 
@@ -416,6 +439,20 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
                         messages={messages}
                     />
                 ] : []}
+                {
+                    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 &&
+                    <MediaQuery
+                        key="frameless-tablet"
+                        minWidth={frameless.tablet}
+                    >
+                        {Date.now() >= SMALL_BANNER_TIME ?
+                            <SmallTopBanner /> : // Show small banner starting September 1 at 9am ET
+                            <TopBanner />
+                        }
+                    </MediaQuery>
+                }
                 <div
                     className="inner mod-splash"
                     key="inner"