Merge pull request #57 from carljbowman/hoc-landing-updates

Update HOC with Banner Hoverstates & Assets

src/views/hoc/hoc.jsx

@@ -8,40 +8,50 @@ var Box = require('../../components/box/box.jsx');
 
 var Hoc = React.createClass({
     type: 'Hoc',
+
+    getInitialState: function () {
+        return {
+            bgClass: ''
+        };
+    },
+    onCardEnter: function (bgClass) {
+        this.setState({
+            bgClass: bgClass
+        });
+    },
     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(this, '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(this, 'wbb-bg')}>
+                            <div className="card-info">
+                                <img src="/images/hide-seek-tutorial.jpg" />
+                                <a href="/hide"><Button> Hide-and-Seek Game</Button></a>
+                            </div>
+                        </div>
+
+                        <div className="card" onMouseEnter={this.onCardEnter.bind(this, '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 +76,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>
@@ -103,6 +116,16 @@ var Hoc = React.createClass({
                             </div>
                         </section>
                     </Box>
+
+                    <section className="one-up">
+                        <h3>Collaborators</h3>
+                        <div className="logos">
+                            <img src="/images/code-org-logo.png" />
+                            <img src="/images/cn-logo.png" />
+                            <img src="/images/paa-logo.png" />
+                            <img src="/images/pocketcode-logo.png" />
+                        </div>
+                    </section>
                 </div>
             </div>
 

src/views/hoc/hoc.scss

@@ -17,20 +17,35 @@ $base-bg: $ui-white;
         max-width: 960px;
 
         .box {
-            margin-bottom: 100px;
+            margin-bottom: 10px;
         }
     }
 
     .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;
@@ -135,7 +150,7 @@ $base-bg: $ui-white;
         }
     }
 
-    .box section {
+    section {
         display: flex;
         margin: 0 auto;
         border-bottom: 1px solid $ui-border;
@@ -147,7 +162,7 @@ $base-bg: $ui-white;
         align-items: center;
 
         &:last-child {
-            border-bottom: none;
+            border-bottom: 0;
         }
 
         h3, 
@@ -155,6 +170,19 @@ $base-bg: $ui-white;
             font-weight: 300; 
         }
 
+        .logos {
+            margin: 10px 0;
+            width: 100%;
+
+            img {
+                margin: 0 20px;
+                max-width: 200px;
+                max-height: 75px;
+
+                vertical-align: middle;
+            }
+        }
+
         .resource {
             display: flex;
             margin: 10px;
@@ -170,24 +198,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;
-
             }
         }
 
@@ -198,6 +220,10 @@ $base-bg: $ui-white;
                 margin: 10px;
                 width: 100%;
             }
+
+            .logo {
+                display: block;
+            }
         }
 
         &.two-up {
@@ -216,5 +242,4 @@ $base-bg: $ui-white;
             }
         }
     }
-
 }