added makeItFly image and text for HoC banner

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

@@ -53,7 +53,8 @@ $tile-height: 244px;
 
         img {
             width: $cols4;
-            height: auto;
+            height: $cols4 * 0.553333333; /* images are 600 x 332 for retina */
+            object-fit: cover;
         }
 
         .hoc-image-text {

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

@@ -47,11 +47,11 @@ const TopBanner = () => (
                         </div>
                     </FlexRow>
                 </a>
-                <a href="/projects/editor?tutorial=talking">
+                <a href="/projects/editor?tutorial=make-it-fly">
                     <FlexRow className="hoc-banner-image column">
-                        <img src="/images/hoc/talking.png" />
+                        <img src="/images/hoc/make-it-fly.jpg" />
                         <div className="hoc-image-text">
-                            <FormattedMessage id="hocbanner.talking" />
+                            <FormattedMessage id="hocbanner.makeItFly" />
                         </div>
                     </FlexRow>
                 </a>

src/views/splash/l10n.json

@@ -39,6 +39,7 @@
     "hocbanner.imagine": "Imagine a World",
     "hocbanner.codeACartoon": "Code a Cartoon",
     "hocbanner.talking": "Talking Tales",
+    "hocbanner.makeItFly": "Make It Fly",
 
     "welcome.welcomeToScratch": "Welcome to Scratch!",
     "welcome.learn": "Learn how to make a project in Scratch",