Add hoc banner

src/components/ttt-tile/ttt-tile.jsx

@@ -26,7 +26,7 @@ var TTTTile = React.createClass({
                         <div className="ttt-tile-image">
                             <img className="ttt-tile-image-img" src={this.props.thumbUrl} alt="" />
                             <div className="ttt-tile-image-try">
-                                <div className="button mod-ttt-tile-image-try-button">
+                                <div className="button mod-ttt-try-button">
                                     <FormattedMessage id="ttt.tryIt" />
                                 </div>
                             </div>

src/components/ttt-tile/ttt-tile.scss

@@ -54,10 +54,10 @@
     left: 50%;
     transform: translate(-50%, 0);
     text-align: center;
-    color: $ui-white;
+    color: $type-white;
 }
 
-.mod-ttt-tile-image-try-button {
+.mod-ttt-try-button {
     border: 1px solid $ui-white;
     background-color: transparent;
 }

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

@@ -0,0 +1,115 @@
+var FormattedMessage = require('react-intl').FormattedMessage;
+var injectIntl = require('react-intl').injectIntl;
+var MediaQuery = require('react-responsive');
+var React = require('react');
+
+var FlexRow = require('../../../components/flex-row/flex-row.jsx');
+var TitleBanner = require('../../../components/title-banner/title-banner.jsx');
+var TTTModal = require('../../../components/modal/ttt/modal.jsx');
+var TTTTile = require('../../../components/ttt-tile/ttt-tile.jsx');
+
+var frameless = require('../../../lib/frameless');
+var tiles = require('../../thingstotry/ttt');
+
+require('../../../components/forms/button.scss');
+require('./hoc-banner.scss');
+
+var HocBanner = injectIntl(React.createClass({
+    getInitialState: function () {
+        return {
+            currentTile: tiles[1],
+            TTTModalOpen: false
+        };
+    },
+    showTTTModal: function (tile) {
+        return this.setState({
+            currentTile: tile,
+            TTTModalOpen: true
+        });
+    },
+    hideTTTModal: function () {
+        return this.setState({TTTModalOpen: false});
+    },
+    renderTTTTiles: function () {
+        var formatMessage = this.props.intl.formatMessage;
+        
+        var tileObjects = {
+            flyTile: {
+                title: formatMessage({id: tiles[1].title}),
+                description: formatMessage({id: tiles[1].description}),
+                tutorialLoc: tiles[1].tutorialLoc,
+                activityLoc: formatMessage({id: tiles[1].activityLoc}),
+                guideLoc: formatMessage({id: tiles[1].guideLoc}),
+                thumbUrl: tiles[1].thumbUrl,
+                bannerUrl: tiles[1].bannerUrl
+            },
+            nameTile: {
+                title: formatMessage({id: tiles[0].title}),
+                description: formatMessage({id: tiles[0].description}),
+                tutorialLoc: tiles[0].tutorialLoc,
+                activityLoc: formatMessage({id: tiles[0].activityLoc}),
+                guideLoc: formatMessage({id: tiles[0].guideLoc}),
+                thumbUrl: tiles[0].thumbUrl,
+                bannerUrl: tiles[0].bannerUrl
+            },
+            musicTile: {
+                title: formatMessage({id: tiles[2].title}),
+                description: formatMessage({id: tiles[2].description}),
+                tutorialLoc: tiles[2].tutorialLoc,
+                activityLoc: formatMessage({id: tiles[2].activityLoc}),
+                guideLoc: formatMessage({id: tiles[2].guideLoc}),
+                thumbUrl: tiles[2].thumbUrl,
+                bannerUrl: tiles[2].bannerUrl
+            }
+        };
+        
+        return [
+            <TTTTile
+                key={1}
+                className="mod-banner"
+                onGuideClick={this.showTTTModal.bind(this, tileObjects.flyTile)}
+                {...tileObjects.flyTile}
+            />,
+            <TTTTile
+                key={0}
+                className="mod-banner"
+                onGuideClick={this.showTTTModal.bind(this, tileObjects.nameTile)}
+                {...tileObjects.nameTile}
+            />,
+            <TTTTile
+                key={2}
+                className="mod-banner"
+                onGuideClick={this.showTTTModal.bind(this, tileObjects.musicTile)}
+                {...tileObjects.musicTile}
+            />
+        ];
+    },
+    render: function () {
+        return (
+            <TitleBanner className="mod-splash-hoc">
+                <div className="hoc-banner inner">
+                    <FlexRow className="hoc-banner-header">
+                        <h1 className="hoc-banner-header-h1">
+                            <FormattedMessage id="hoc-banner.header" />
+                        </h1>
+                        <a href="/go" className="button mod-ttt-try-button">
+                            <FormattedMessage id="hoc-banner.ttt" />
+                        </a>
+                    </FlexRow>
+                    <MediaQuery minWidth={frameless.desktop}>
+                        <FlexRow className="hoc-banner-tiles">
+                            {this.renderTTTTiles()}
+                        </FlexRow>
+                        <TTTModal
+                            isOpen={this.state.TTTModalOpen}
+                            onRequestClose={this.hideTTTModal}
+                            {...this.state.currentTile}
+                        />
+                    </MediaQuery>
+                </div>
+            </TitleBanner>
+        );
+    }
+}));
+
+module.exports = HocBanner;

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

@@ -0,0 +1,28 @@
+@import "../../../colors";
+
+.title-banner.mod-splash-hoc {
+    background: url("/images/blocks-pattern.png");
+    background-color: $ui-blue;
+    background-repeat: repeat;
+    background-size: 180px 180px;
+}
+
+.hoc-banner-header {
+    justify-content: space-between;
+}
+
+.hoc-banner-header-h1 {
+    margin-bottom: 1.25rem;
+    color: $type-white;
+}
+
+.mod-ttt-try-button:link,
+.mod-ttt-try-button:visited,
+.mod-ttt-try-button:active
+.mod-ttt-try-button:hover {
+    color: $type-white;
+}
+
+.ttt-tile.mod-banner {
+    background-color: $background-color;
+}

src/views/splash/l10n-static.json

@@ -0,0 +1,8 @@
+{
+    "ttt.MakeItFlyActivityLoc": "/pdfs/cards/FlyCards.pdf",
+    "ttt.MakeItFlyGuideLoc": "/pdfs/guides/FlyGuide.pdf",
+    "ttt.AnimateYourNameActivityLoc": "/pdfs/cards/AnimateYourNameCards.pdf",
+    "ttt.AnimateYourNameGuideLoc": "/pdfs/guides/NameGuide.pdf",
+    "ttt.MakeMusicActivityLoc": "/pdfs/cards/MusicCards.pdf",
+    "ttt.MakeMusicGuideLoc": "/pdfs/guides/MusicGuide.pdf"
+}

src/views/splash/l10n.json

@@ -28,6 +28,23 @@
     "teacherbanner.classesButton": "My Classes",
     "teacherbanner.faqButton": "Teacher Account FAQ",
 
+    "hoc-banner.header": "Get Creative with Coding",
+    "hoc-banner.ttt": "See things to try",
+    "ttt.tutorialTitle": "Tutorial",
+    "ttt.tutorialSubtitle": "Find out how to make this project using a step-by-step tutorial in Scratch.",
+    "ttt.activityTitle": "Activity Cards",
+    "ttt.activitySubtitle": "Explore new coding ideas using this set of illustrated cards you can print out.",
+    "ttt.educatorTitle": "Educator Guide",
+    "ttt.educatorSubtitle": "Use this educator guide to plan and lead a one-hour Scratch workshop.",
+    "ttt.tryIt": "Try It",
+    "ttt.download": "Download",
+    "ttt.MakeItFlyTitle": "Make It Fly",
+    "ttt.MakeItFlyDescription": "Animate the Scratch Cat, The Powerpuff Girls, or even a taco!",
+    "ttt.AnimateYourNameTitle": "Animate Your Name",
+    "ttt.AnimateYourNameDescription": "Animate the letters of your name, initials, or favorite word.",
+    "ttt.MakeMusicTitle": "Make Music",
+    "ttt.MakeMusicDescription": "Choose instruments, add sounds, and press keys to play music.",
+
     "welcome.welcomeToScratch": "Welcome to Scratch!",
     "welcome.learn": "Learn how to make a project in Scratch",
     "welcome.tryOut": "Try out starter projects",

src/views/splash/splash.jsx

@@ -14,6 +14,7 @@ var DropdownBanner = require('../../components/dropdown-banner/banner.jsx');
 var Box = require('../../components/box/box.jsx');
 var Button = require('../../components/forms/button.jsx');
 var Carousel = require('../../components/carousel/carousel.jsx');
+var HocBanner = require('./hoc-banner/hoc-banner.jsx');
 var Intro = require('../../components/intro/intro.jsx');
 var IframeModal = require('../../components/modal/iframe/modal.jsx');
 var News = require('../../components/news/news.jsx');
@@ -366,6 +367,7 @@ var Splash = injectIntl(React.createClass({
                 {this.props.permissions.educator ? [
                     <TeacherBanner key="teacherbanner" messages={messages} />
                 ] : []}
+                <HocBanner />
                 <div key="inner" className="inner mod-splash">
                     {this.props.session.status === sessionActions.Status.FETCHED ? (
                         this.props.session.session.user ? [