Add CTA bar under top bar

app/controllers/top.coffee

@@ -18,4 +18,8 @@ Controller = Ember.Controller.extend
       return false
   }
 
+  showCta: (->
+    !@get('auth.signedIn') && !@get('config.pro')
+  ).property('auth.signedIn')
+
 `export default Controller`

app/styles/app/landing.sass

@@ -1,5 +1,7 @@
 .top.landing-page .topbar,
-.wrapper.centered .topbar
+.wrapper.centered .topbar,
+.wrapper.centered #top .cta,
+.top.landing-page .cta p
   margin: 0 auto
   max-width: 1024px
 

app/styles/app/layouts/top.sass

@@ -1,5 +1,27 @@
 $top-height: 55px
 
+#top .cta
+  border-bottom: 2px solid #E4E4E4
+  border-top: 2px solid #E4E4E4
+  line-height: 2.7em
+  font-size: 16px
+  color: #71AE76
+  text-align: right
+  padding-right: 20px
+
+  p
+    position: relative
+
+  .arrow
+    display: block
+    position: absolute
+    top: -11px
+    right: 66px
+    background-image: inline-image('cta-arrow.svg')
+    background-repeat: no-repeat
+    width: 20px
+    height: 12px
+
 .logo
   position: relative
   margin: 0 1.5rem 0 1.3rem

app/templates/top.hbs

@@ -71,3 +71,12 @@
     </li>
   </ul>
 </div>
+
+{{#if showCta}}
+  <div class="cta">
+    <p>
+      <span class="arrow"></span>
+      Help make Open Source a better place and start building better software today!
+    </p>
+  </div>
+{{/if}}

public/images/cta-arrow.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="20" height="12" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <g transform="translate(10, 1), rotate(45)" fill="white">
+    <rect x="0" y="0" width="20" height="20"
+          style="fill: white; stroke-width: 2; stroke: #E4E4E4;" />
+  </g>
+</svg>