big home change revisions. not 100% complete

app/assets/stylesheets/application.css

@@ -70,9 +70,6 @@ body,
 .wrapper {
     height: 100%;
 }
-.homePage .famousYield {
-    background: url(homepage-bg.png) no-repeat -515px -40px;
-}
 .wrapper.mapPage {
     overflow: hidden;
 }

app/assets/stylesheets/clean.css

@@ -711,14 +711,26 @@
 
 /* homepage */
 
+.homeWrapper.homeText {
+    margin-top: 10%;
+}
+
+.fullWidthWrapper {
+    width: 100%;
+}
+.fullWidthWrapper.withVideo {
+    height: 350px;
+    background: #757575;
+}
+
 .homeWrapper {
-    width: 560px;
+    width: 880px;
-    margin: 56px auto 72px;
+    margin: 0 auto;
     color: #424242;
 }
 
 .homeTitle {
-    font-size: 48px;
+    font-size: 69px;
     line-height: 48px;
     text-align: center;
     margin-bottom: 20px;
@@ -728,18 +740,40 @@
     font-size: 23px;
     line-height: 26px;
     text-align: justify;
-    margin-bottom: 20px;
+    margin: 32px 0 20px;
+    font-family: 'din-regular', helvetica, sans-serif;
 }
 
 .homeWrapper .green {
     color: #4fc059;
 }
 
-.homeVideo {
+.homeWrapper .din-medium {
-    margin-bottom: 20px;
+    font-family: 'din-medium', helvetica, sans-serif;
 }
 
-.callToAction a {
+.homeVideo {
+    margin-bottom: 20px;
+    float: left;
+}
+
+.homeWrapper .callToAction {
+    float: left;
+    width: 220px;
+    padding: 24px 0 24px 24px;
+    color: #F5F5F5;
+}
+.callToAction h3 {
+    font-size: 24px;
+}
+.callToAction p {
+    margin: 16px 0;
+    font-size: 14px;
+    line-height: 16px;
+    font-family: 'din-regular', helvetica, sans-serif;
+    text-align: justify;
+}
+.callToAction a, .callToAction button {
     display: block;
     width: 220px;
     height: 12px;
@@ -750,20 +784,38 @@
     box-shadow: 0px 1px 1.5px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24);
     margin: 0 auto;
     color: #FFFFFF;
+    box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box;
 }
 .callToAction .requestInviteCTA {
     background-color: #4fc059;
-    margin-bottom: 15px;
+    margin-bottom: 16px;
 }
 .callToAction .requestInviteCTA:hover {
     background-color: #49ad4e;
 }
 .callToAction .exploreFeaturedCTA {
     background-color: #a354cd;
+    margin-bottom: 16px;
 }
 .callToAction .exploreFeaturedCTA:hover {
     background-color: #9150bc;
 }
+.callToAction .learnMoreCTA {
+    background-color: #4fb5c0;
+}
+.callToAction .learnMoreCTA:hover {
+    background-color: #9150bc;
+}
+
+.fullWidthWrapper.withPartners {
+    background: url(homepage-bg.png) no-repeat center -300px;
+}
+.homeWrapper.homePartners {
+    padding-bottom: 100px;
+    height: 200px;
+}
 
 .github-fork-ribbon-wrapper {
     display:none;

app/views/main/home.html.erb

@@ -7,15 +7,28 @@
 <% if !authenticated? %>
     <% content_for :title, "Home | Metamaps" %> 
     <div id="yield">
-        <div class="homeWrapper">
+        <div class="homeWrapper homeText">
-            <div class="homeTitle">EXPERIENCE METAMAPS</div>
+            <div class="homeTitle">Make sense with Metamaps.</div>
             <div class="homeIntro">
-            <span class="green">metamaps.cc</span> is a free and open source platform. It enables individuals, communities, and organizations to build and visualize their shared knowledge and unlock their collective intelligence...
+            <span class="green din-medium">METAMAPS.CC</span> is a free and open source platform that supports real-time sense-making, distributed collaboration, and collective intelligence within individuals, communities, and organizations. We are currently in an <span class="din-medium">invite-only beta.</span>
             </div>
-            <iframe class="homeVideo" src="//player.vimeo.com/video/88334167?title=0&amp;byline=0&amp;portrait=0" width="560" height="315" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+        </div>
-            <div class="callToAction">
+        <div class="fullWidthWrapper withVideo">
-                <a href="/request" class="requestInviteCTA" data-bypass="true">REQUEST INVITE</a>
+            <div class="homeWrapper">
-                <a href="/explore/featured" class="exploreFeaturedCTA">EXPLORE FEATURED MAPS</a>
+                <img class="homeVideo" src="/assets/video-screen.png" width="560" height="350" />
+                <div class="callToAction">
+                    <h3>Who finds it useful?</h3>
+                    <p>Designers, inventors, artists, educators, strategists, consultants, facilitators, organizers, systems thinkers, changemakers, analysts, students, researchers...maybe you!</p>
+                    <a href="/request" class="requestInviteCTA" data-bypass="true">REQUEST INVITE</a>
+                    <a href="/explore/featured" class="exploreFeaturedCTA">EXPLORE FEATURED MAPS</a>
+                    <button type="button" class="button learnMoreCTA">LEARN MORE</button>
+                </div>
+                <div class="clearfloat"></div>
+            </div>
+        </div>
+        <div class="fullWidthWrapper withPartners">
+            <div class="homeWrapper homePartners">
+                <% # our partners %>
             </div>
         </div>
     </div><!-- end yield -->