From 2a881fccb555f36bdd49fac90d969cb686fc0501 Mon Sep 17 00:00:00 2001
From: Andrew Sliwinski <andrewsliwinski@acm.org>
Date: Tue, 13 Oct 2015 17:20:05 -0400
Subject: [PATCH] Quick HOC copy changes from Natalie & Mitch

---
 src/views/hoc/hoc.jsx  | 84 ++++++++++++++++++++++--------------------
 src/views/hoc/hoc.scss |  2 +-
 2 files changed, 46 insertions(+), 40 deletions(-)

diff --git a/src/views/hoc/hoc.jsx b/src/views/hoc/hoc.jsx
index a1a7f6ba4..8a52fc8cc 100644
--- a/src/views/hoc/hoc.jsx
+++ b/src/views/hoc/hoc.jsx
@@ -12,68 +12,71 @@ var Hoc = React.createClass({
         return (
             <div>
                 <div className="top-banner">
-                <h1>Create Projects to Share!</h1>
-                <p>With Scratch, you can program your own stories, games, and animations — and share them online.</p>
+                    <h1>Get Creative with Coding</h1>
 
-                <div className="card-deck">
-                    <div className="card">
-                        <div className="card-info">
-                            <img src="/images/hide-seek-tutorial.png" />
-                            <a href="#"><Button>Create a Hide & Seek Game</Button></a>
+                    <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>
 
-                    <div className="card">
-                        <div className="card-info">
-                            <img src="/images/dance-tutorial.png" />
-                            <a href="/projects/editor/?tip_bar=dance"><Button>Compose a Dance Sequence</Button></a>
-                        </div>
-                    </div>
+                    <p>
+                        With Scratch, you can program your own stories, games, and animations —
+                        and share them online.
+                    </p>
 
-                    <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>
-
-                <ul className="sub-nav">
-                    <li className="info">Find out more:</li>
-                    <a href="/about"><li className="link">About Scratch</li></a>
-                    <a href="/parents"><li className="link">For Parents</li></a>
-                    <a href="/educators"><li className="link">For Educators</li></a>
-                </ul>
+                    <ul className="sub-nav">
+                        <li className="info">Find out more:</li>
+                        <a href="/about"><li className="link">About Scratch</li></a>
+                        <a href="/parents"><li className="link">For Parents</li></a>
+                        <a href="/educators"><li className="link">For Educators</li></a>
+                    </ul>
                 </div>
 
                 <div className="inner">
                     <Box>
                         <section className="one-up">
                             <div className="column">
-                                <h3>Related Resources</h3>
-                                <p>Below are some resources to help explore Scratch by yourself or to assist groups in
-                                workshops and classrooms <a href="/help">Find out more</a></p>
+                                <h3>Activity Cards and Guides</h3>
+                                <p>Print the Scratch cards for tips and ideas for each of the activities!</p>
                             </div>
 
                             <div className="resource">
                                     <img src="/svgs/tips-card.svg" />
                                     <div className="resource-info">
-                                        <a href="#">Hide & Seek Tip Cards</a>
-                                        <div className="file-size">13mbs</div>
+                                        <a href="#">Animate Your Name</a>
+                                        <div className="file-size">13 mb</div>
                                     </div>
                             </div>
                             <div className="resource">
                                     <img src="/svgs/tips-card.svg" />
                                     <div className="resource-info">
-                                        <a href="#">Dance Tip Cards</a>
-                                        <div className="file-size">5mbs</div>
+                                        <a href="#">Hide-and-Seek</a>
+                                        <div className="file-size">5 mb</div>
                                     </div>
                             </div>
                             <div className="resource">
                                     <img src="/svgs/tips-card.svg" />
                                     <div className="resource-info">
-                                        <a href="#">Name Tip Cards</a>
-                                        <div className="file-size">11mbs</div>
+                                        <a href="#">Dance, Dance, Dance</a>
+                                        <div className="file-size">11 mb</div>
                                     </div>
                             </div>
                         </section>
@@ -82,7 +85,7 @@ var Hoc = React.createClass({
                             <div className="column">
                                 <h3>Tips Window</h3>
                                 <p>New to Scratch or haven’t heard of the Tips Window? Check out interactive tutorials,
-                                handy block information, and other helpful hints all in the new
+                                handy block information, and other helpful hints in the new
                                 2015 <a href="/projects/editor/?tip_bar=home">Tips Window</a></p>
                             </div>
                             <div className="column">
@@ -93,8 +96,11 @@ var Hoc = React.createClass({
                         <section className="one-up">
                             <div className="column">
                                 <h3>Still Want More?</h3>
-                                <p><strong>Awesome!</strong> Here are some addtional tutorials
-                                from the Tips Window. <a href="/projects/editor/?tip_bar=home">See all tips</a></p>
+                                <p>
+                                    <strong>Go for it!</strong>&nbsp;
+                                    Try another tutorial from the Tips Window.&nbsp;
+                                    <a href="/projects/editor/?tip_bar=home">See all tips</a>
+                                </p>
                             </div>
                         </section>
                     </Box>
diff --git a/src/views/hoc/hoc.scss b/src/views/hoc/hoc.scss
index 4efdfa1f6..2077f9a34 100644
--- a/src/views/hoc/hoc.scss
+++ b/src/views/hoc/hoc.scss
@@ -192,7 +192,7 @@ $base-bg: $ui-white;
 
             .column {
                 margin: 10px;
-                max-width: 600px;
+                width: 100%;
             }
         }