Use localization strings for banner copy

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

@@ -14,12 +14,18 @@ require('./middle-banner.scss');
 const MiddleBanner = () => (
     <TitleBanner className="beta-middle-banner">
         <FlexRow className="beta-middle-container column">
-            <h2 className="beta-header">The Next Generation of Scratch</h2>
+            <h2 className="beta-header">
-            <h3 className="beta-copy">Try out the beta version of Scratch 3.0</h3>
+                <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/"
-            >Try it!</a>
+            >
+                <FormattedMessage id="betabanner.callToAction" />
+            </a>
         </FlexRow>
         <div className="beta-banner-images">
             <MediaQuery maxWidth={frameless.desktop - 1}>
@@ -34,4 +40,4 @@ const MiddleBanner = () => (
     </TitleBanner>
 );
 
-export default MiddleBanner;
+export default injectIntl(MiddleBanner);

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

@@ -10,13 +10,17 @@ require('./small-top-banner.scss');
 const SmallTopBanner = () => (
     <TitleBanner className="beta-small-top-banner">
         <FlexRow className="beta-small-top-container">
-            <h2 className="beta-copy">Try out the beta version of Scratch 3.0</h2>
+            <h2 className="beta-copy">
+                <FormattedMessage id="betabanner.calloutTitle" />
+            </h2>
             <a
                 className="beta-try-it button"
                 href="https://beta.scratch.mit.edu/"
-            >Try it!</a>
+            >
+                <FormattedMessage id="betabanner.callToAction" />
+            </a>
         </FlexRow>
     </TitleBanner>
 );
 
-export default SmallTopBanner;
+export default injectIntl(SmallTopBanner);

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

@@ -10,12 +10,18 @@ require('./top-banner.scss');
 const TopBanner = () => (
     <TitleBanner className="beta-top-banner">
         <FlexRow className="beta-top-container column">
-            <h1 className="beta-header">The Next Generation of Scratch</h1>
+            <h1 className="beta-header">
-            <h3 className="beta-copy">Try out the beta version of Scratch 3.0</h3>
+                <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/"
-            >Try it!</a>
+            >
+                <FormattedMessage id="betabanner.callToAction" />
+            </a>
         </FlexRow>
         <div className="beta-banner-images">
             <div className="beta-banner-image left">
@@ -28,4 +34,4 @@ const TopBanner = () => (
     </TitleBanner>
 );
 
-export default TopBanner;
+export default injectIntl(TopBanner);

src/views/splash/l10n.json

@@ -39,5 +39,10 @@
     "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": "Try out the beta version of Scratch 3.0",
+    "betabanner.callToAction": "Try it!",
+    "betabanner.calloutTitle": "A new version of Scratch is coming in January, try the beta version now"
 }