Update HOC with Banner Hoverstates & Assets

- Added hover states on the tutorial cards that changes the banner background.
- Included new web optimized image assets.

src/views/hoc/hoc.jsx

@@ -6,42 +6,54 @@ require('./hoc.scss');
 var Button = require('../../components/forms/button.jsx');
 var Box = require('../../components/box/box.jsx');
 
+
+
 var Hoc = React.createClass({
     type: 'Hoc',
+
+    getInitialState: function () {
+        return {
+            bgClass: ''
+        };
+    },
+    onCardEnter: function (e) {
+        this.setState({
+            bgClass: e
+        });
+    },
     render: function () {
         return (
             <div>
-                <div className="top-banner">
+                <div className={'top-banner ' + this.state.bgClass}>
                     <h1>Get Creative with Coding</h1>
-
-                    <div className="card-deck">
-                        <div className="card">
-                            <div className="card-info">
-                                <img src="/images/name-tutorial.png" />
-                                <a href="/projects/editor/?tip_bar=name"><Button>Animate Your Name</Button></a>
-                            </div>
-                        </div>
-
-                        <div className="card">
-                            <div className="card-info">
-                                <img src="/images/hide-seek-tutorial.png" />
-                                <a href="#"><Button>Hide-and-Seek Game</Button></a>
-                            </div>
-                        </div>
-
-                        <div className="card">
-                            <div className="card-info">
-                                <img src="/images/dance-tutorial.png" />
-                                <a href="/projects/editor/?tip_bar=dance"><Button>Dance, Dance, Dance</Button></a>
-                            </div>
-                        </div>
-                    </div>
-
                     <p>
                         With Scratch, you can program your own stories, games, and animations —
                         and share them online.
                     </p>
 
+                    <div className="card-deck">
+                        <div className="card">
+                            <div className="card-info" onMouseEnter={this.onCardEnter.bind(null, 'name-bg')}>
+                                <img src="/images/name-tutorial.jpg" />
+                                <a href="/projects/editor/?tip_bar=name"><Button>Animate Your Name</Button></a>
+                            </div>
+                        </div>
+
+                        <div className="card" onMouseEnter={this.onCardEnter.bind(null, 'wbb-bg')}>
+                            <div className="card-info">
+                                <img src="/images/hide-seek-tutorial.jpg" />
+                                <a href="#"><Button> Hide-and-Seek Game</Button></a>
+                            </div>
+                        </div>
+
+                        <div className="card" onMouseEnter={this.onCardEnter.bind(null, 'dance-bg')}>
+                            <div className="card-info">
+                                <img src="/images/dance-tutorial.jpg" />
+                                <a href="/projects/editor/?tip_bar=dance"><Button>Dance, Dance, Dance</Button></a>
+                            </div>
+                        </div>
+                    </div>
+
                     <ul className="sub-nav">
                         <li className="info">Find out more:</li>
                         <a href="/about"><li className="link">About Scratch</li></a>
@@ -66,24 +78,27 @@ var Hoc = React.createClass({
                             <div className="resource">
                                 <img src="/svgs/tips-card.svg" />
                                 <div className="resource-info">
-                                    <a href="#">Animate Your Name</a>
-                                    <div className="file-size">13 mb</div>
+                                    <h5>Animate Your Name</h5>
+                                    <a href="#">Activity Cards</a>
+                                    <a href="#">Facilitator Guide</a>
                                 </div>
                             </div>
 
                             <div className="resource">
                                 <img src="/svgs/tips-card.svg" />
                                 <div className="resource-info">
-                                    <a href="#">Hide-and-Seek</a>
-                                    <div className="file-size">5 mb</div>
+                                    <h5>Hide-and-Seek</h5>
+                                    <a href="#">Activity Cards</a>
+                                    <a href="#">Facilitator Guide</a>
                                 </div>
                             </div>
                             
                             <div className="resource">
                                 <img src="/svgs/tips-card.svg" />
                                 <div className="resource-info">
-                                    <a href="#">Dance, Dance, Dance</a>
-                                    <div className="file-size">11 mb</div>
+                                    <h5>Dance, Dance, Dance</h5>
+                                    <a href="#">Activity Cards</a>
+                                    <a href="#">Facilitator Guide</a>
                                 </div>
                             </div>
                         </section>

src/views/hoc/hoc.scss

@@ -1,6 +1,8 @@
 @import "../../colors";
 
 $base-bg: $ui-white;
+$bg-gradient-light: rgba(0, 0, 0, 0);
+$bg-gradient-dark: rgba(0, 0, 0, .5);
 
 #view {
     padding: 0;
@@ -22,15 +24,30 @@ $base-bg: $ui-white;
     }
 
     .top-banner {
+        transition: background-image .5s ease, background-color .5s ease;
+
         margin-top: 10px;
         margin-bottom: 40px;
 
         background-color: $ui-aqua;
+        background-position: center;
+        background-size: cover;
 
         padding: 10px 0;
-
         width: 100%;
 
+        &.wbb-bg {    
+            background-image: url("/images/hide-bg.jpg");
+        }
+
+        &.dance-bg {
+            background-image: url("/images/dance-bg.jpg");
+        }
+
+        &.name-bg {
+            background-image: url("/images/name-bg.jpg");
+        }
+
         h1, 
         p {
             margin: 0 auto;
@@ -147,7 +164,7 @@ $base-bg: $ui-white;
         align-items: center;
 
         &:last-child {
-            border-bottom: none;
+            border-bottom: 0;
         }
 
         h3, 
@@ -170,24 +187,18 @@ $base-bg: $ui-white;
             align-items: center;
 
             img {
-                margin-right: 10px;
+                margin-right: 15px;
+            }
+
+            h5 {
+                margin: 8px 0;
+                font-weight: 500;
             }
 
             a {
+                display: block;
+                margin: 5px 0;
                 font-size: .8em;
-                font-weight: 500;
-            }
-
-            .file-size {
-                margin-top: 5px;
-                width: inherit;
-
-                text-transform: uppercase;
-                letter-spacing: .5px;
-                color: $ui-orange;
-                font-size: .7em;
-                font-weight: 500;
-
             }
         }