updated splash banner

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

@@ -30,28 +30,28 @@ const TopBanner = () => (
                     key="frameless-desktop"
                     minWidth={frameless.desktop}
                 >
-                    <a href="/projects/editor?tutorial=imagine">
+                    <a href="/story">
                         <FlexRow className="hoc-banner-image column">
-                            <img src="/images/hoc/imagine.jpg" />
+                            <img src="/images/ideas/activities/create-a-story-thumb.jpg" />
                             <div className="hoc-image-text">
-                                <FormattedMessage id="hocbanner.imagine" />
+                                <FormattedMessage id="hocbanner.createAStory" />
                             </div>
                         </FlexRow>
                     </a>
                 </MediaQuery>
-                <a href="/projects/editor?tutorial=music">
+                <a href="/animate-a-character">
                     <FlexRow className="hoc-banner-image column">
-                        <img src="/images/hoc/make-music.jpg" />
+                        <img src="/images/ideas/activities/animate-a-character-thumb.jpg" />
                         <div className="hoc-image-text">
-                            <FormattedMessage id="hocbanner.makeMusic" />
+                            <FormattedMessage id="hocbanner.animateACharacter" />
                         </div>
                     </FlexRow>
                 </a>
-                <a href="/projects/editor?tutorial=chase-game">
+                <a href="/talking-tales">
                     <FlexRow className="hoc-banner-image column">
-                        <img src="/images/hoc/chase-game.jpg" />
+                        <img src="/images/ideas/activities/talking-thumb.jpg" />
                         <div className="hoc-image-text">
-                            <FormattedMessage id="hocbanner.chaseGame" />
+                            <FormattedMessage id="hocbanner.talking" />
                         </div>
                     </FlexRow>
                 </a>

src/views/splash/l10n.json

@@ -38,7 +38,7 @@
     "teacherbanner.classesButton": "My Classes",
     "teacherbanner.faqButton": "Teacher Account FAQ",
 
-    "hocbanner.title": "Get Creative with Coding!",
+    "hocbanner.title": "Tell Your Story with Scratch!",
     "hocbanner.moreActivities": "See more activities",
     "hocbanner.imagine": "Imagine a World",
     "hocbanner.codeACartoon": "Code a Cartoon",
@@ -46,6 +46,8 @@
     "hocbanner.makeItFly": "Make It Fly",
     "hocbanner.makeMusic": "Make Music",
     "hocbanner.chaseGame": "Make a Chase Game",
+    "hocbanner.createAStory": "Create a Story",
+    "hocbanner.animateACharacter": "Animate a Character",
 
     "welcome.welcomeToScratch": "Welcome to Scratch!",
     "welcome.learn": "Learn how to make a project in Scratch",

src/views/splash/splash.jsx

@@ -13,8 +13,11 @@ const Page = require('../../components/page/www/page.jsx');
 const SplashPresentation = require('./presentation.jsx');
 
 const SCRATCH_WEEK_START_TIME = 1621224000000; // 2021-05-17 00:00:00 -- No end time for now
-const HOC_START_TIME = 1638144000000; // 2021-11-29 00:00:00 GMT in ms
-const HOC_END_TIME = 1639353600000; // 2021-12-13 00:00:00 GMT in ms
+// const HOC_START_TIME = 1638144000000; // 2021-11-29 00:00:00 GMT in ms
+// const HOC_END_TIME = 1639353600000; // 2021-12-13 00:00:00 GMT in ms
+
+const HOC_START_TIME = 1668574800000; // 2022-11-16 00:00:00 GMT in ms
+const HOC_END_TIME = 1671166800000; // 2022-12-16 00:00:00 GMT in ms
 
 class Splash extends React.Component {
     constructor (props) {