IA changes for landing page (bug 839662)

media/css/ecosystem/documentation.less

@@ -27,10 +27,43 @@ a[rel="external"] {
     width: 960px;
 }
 
+#wrap {
+    padding-top: 30px;
+}
+
 #site-header {
     .logo {
         width: 400px;
     }
+
+    .header-button.icon.browserid {
+        display: none;
+    }
+}
+
+.header-button.browserid {
+    position: relative;
+    width: auto;
+}
+
+.devhub-links {
+    position: absolute;
+    right: 0;
+    text-align: right;
+    top: 30px;
+    width: 630px;
+    z-index: 13;
+
+    &.logged {
+        right: 45px;
+    }
+
+    a {
+        color: @white;
+        font-size: 13px;
+        line-height: 20px;
+        padding: 5px 7px;
+    }
 }
 
 #document-navigation {
@@ -449,25 +482,3 @@ a.app-source {
         }
     }
 }
-
-#site-nav {
-    a {
-        background-repeat: no-repeat;
-        background-position: 12px 50%;
-    }
-    .section-design a {
-        background: url(../../img/ecosystem/section-design-icon.png) 0 50% no-repeat;
-        background-size: 15px auto;
-        text-indent: 23px;
-    }
-    .section-build a {
-        background-image: url(../../img/ecosystem/section-build-icon.png);
-        background-size: 12px auto;
-        text-indent: 21px;
-    }
-    .section-publish a {
-        background-image: url(../../img/ecosystem/section-publish-icon.png);
-        background-size: 17px auto;
-        text-indent: 26px;
-    }
-}

media/css/ecosystem/landing.less

@@ -32,8 +32,9 @@
 
     h1 {
         color: @dark-gray;
-        font-size: 55px;
+        font-size: 37px;
         font-weight: 100;
+        line-height: 47px;
         margin: 20px 0;
         text-align: center;
         text-shadow: #fff 0 1px 1px;
@@ -46,15 +47,20 @@
         text-align: center;
     }
 
-    .button-wrapper {
-        padding: 20px 10px;
+    .link-wrapper {
+        padding: 20px 40px;
         width: 288px;
+
+        a {
+            font-size: 14px;
+            font-style: italic;
+        }
     }
 
     #partnership {
-        .box-shadow(0 1px 12px -8px rgba(0,0,0,.5) inset);
+        .box-shadow(0 1px 6px -8px rgba(0,0,0,.5) inset);
         .faded-border;
-        border-bottom: 1px solid #ddd;
+        border-bottom: 1px solid @white;
         border-top: 1px solid #ddd;
         clear: both;
         float: left;
@@ -66,16 +72,16 @@
 
         .partner-title {
             float: left;
-            margin-right: 10px;
-            padding-top: 30px;
+            margin: 0 0 0 40px;
+            padding-top: 10px;
             position: relative;
             width: 220px;
             z-index: 1;
 
             h2 {
                 color: #000;
-                font-size: 23px;
-                line-height: 27px;
+                font-size: 22px;
+                line-height: 26px;
             }
 
             p {
@@ -84,12 +90,10 @@
         }
 
         .partner-logos {
-            background: url(../../img/ecosystem/border.png) repeat-y top right;
             display: block;
             float: left;
-            margin-top: 5px;
+            margin: 5px 20px 0;
             padding-right: 10px;
-            text-align: center;
             width: 535px;
 
             ul {
@@ -111,40 +115,36 @@
 
             h3, p {
                 clear: both;
-                text-align: center;
             }
 
             h3 {
-                padding: 10px 0 0;
-                font-size: 14px;
-            }
-
-            p {
+                font-size: 16px;
                 font-style: italic;
-                margin: 0;
-
-                &.partner-email {
-                    a {
-                        display: inline-block;
-                        white-space: nowrap;
-                    }
-                }
+                line-height: 30px;
+                padding: 20px 0 0 20px;
             }
         }
 
         .submit-app {
             float: left;
-            margin: 0 auto;
+            margin: 0 auto 60px;
             padding: 10px 5px 5px 15px;
-            text-align: center;
-            width: 100px;
+            width: 210px;
 
-            a {
-                background: url(../../img/ecosystem/submit-app-mktplace.png) no-repeat 50% 0;
-                display: block;
-                font-size: 18px;
-                line-height: 22px;
-                padding-top: 65px;
+            .app-logo {
+                clear: both;
+                float: left;
+                height: 153px;
+                text-align: center;
+
+                a.button {
+                    .gradient-two-color(#367dbc, #276093);
+                    clear: both;
+                    color: @white;
+                    display: block;
+                    font-size: 17px;
+                    line-height: 21px;
+                }
             }
         }
     }
@@ -247,7 +247,7 @@
     }
 
     &.initial-steps {
-        background: #fff url(../../img/ecosystem/landing-steps.png) no-repeat 14px 38%;
+        background: #fff url(../../img/ecosystem/landing-steps.png) no-repeat -10px 38%;
         margin-bottom: 40px;
         padding-top: 0;
     }
@@ -267,8 +267,7 @@
         width: 320px;
 
         h2 {
-            margin-top: 10px;
-            text-align: center;
+            margin: 10px 40px;
 
             &:before {
                 padding-right: 8px;
@@ -294,7 +293,6 @@
             margin: 0 auto;
             overflow: hidden;
             padding: 0 5px 10px 5px;
-            text-align: center;
             text-overflow: ellipsis;
             width: 235px;
         }

mkt/developers/templates/developers/skeleton_impala.html

@@ -61,6 +61,7 @@
             <h1 class="logo"><a href="{{ url('ecosystem.landing') }}">
               {{ _('Firefox Marketplace Developers') }}</a></h1>
           {% endblock %}
+          {% block account_links %}{% endblock %}
           {% include 'mkt/account-links.html' %}
         </div>
         {% block site_header_title %}

mkt/ecosystem/templates/ecosystem/base.html

@@ -6,32 +6,23 @@
   {{ css('mkt/ecosystem') }}
 {% endblock %}
 
-{% block site_header_title %}
-  <div id="site-nav">
-    <div class="pad">
-      <nav class="menu-nav app-nav no-img" role="navigation">
-        <ul class="c">
-          <li class="section-design">
-            <a href="{{ url('ecosystem.documentation',
-                        page='purpose') }}"
-               {% if category == 'design' %}class="selected"{% endif %}>
-              {{ _('Design') }}
-            </a>
-          </li>
-          <li class="section-build">
-            <a href="{{ url('ecosystem.documentation', page='html5') }}"
-               {% if category == 'build' %}class="selected"{% endif %}>
-              {{ _('Build') }}</a>
-          </li>
-          <li class="section-publish">
-            <a href="{{ url('ecosystem.documentation',
-                        page='mkt_hosting') }}"
-               {% if category == 'publish' %}class="selected"{% endif %}>
-              {{ _('Publish') }}</a>
-          </li>
-        </ul>
-      </nav>
-    </div>
+{% block site_header_title %}{% endblock %}
+
+{% block account_links %}
+  <div class="devhub-links {{ 'logged' if logged }}">
+    <a href="//developer.mozilla.org/apps">
+      {{ _('API Reference') }}
+    </a>
+    <a href="{{ url('ecosystem.support') }}">{{ _('Support') }}</a>
+    <a href="{{ url('submit.app') }}" class="submit">
+      {{ _('Submit an app') }}
+    </a>
+    <a href="{{ url('home') }}" class="submit">
+      {{ _('Marketplace') }}
+    </a>
+    {% if not logged %}
+      <a href="#" class="browserid">{{ _('Sign In') }}</a>
+    {% endif %}
   </div>
 {% endblock %}
 

mkt/ecosystem/templates/ecosystem/landing.html

@@ -8,12 +8,7 @@
 
 {% block content %}
   <div id="landing-page">
-    <h1>{{ _('Developer Hub') }}</h1>
-    <p class="intro">
-      {%- trans %}
-        Develop HTML5 Web Apps for an open marketplace.
-      {% endtrans -%}
-    </p>
+    <h1>{{ _('Develop HTML5 Web Apps for an open marketplace.') }}</h1>
     <section class="half initial-steps">
       <div class="panel">
         <h2 class="section-design">{{ _('Design') }}</h2>
@@ -23,10 +18,9 @@
             optimized for Firefox OS &amp; Mobile
           {% endtrans %}
         </p>
-        <div class="button-wrapper first">
-          <a href="{{ url('ecosystem.documentation', page='purpose') }}"
-             class="button prominent first">
-            {{ _('Design your App') }}
+        <div class="link-wrapper first">
+          <a href="{{ url('ecosystem.documentation', page='purpose') }}">
+            {{ _("Your App's Elevator Pitch") }}
           </a>
         </div>
       </div>
@@ -38,10 +32,9 @@
             development and testing of your App
           {% endtrans %}
         </p>
-        <div class="button-wrapper">
-          <a href="{{ url('ecosystem.documentation', page='html5') }}"
-             class="button prominent second">
-            {{ _('Build your App') }}
+        <div class="link-wrapper">
+          <a href="{{ url('ecosystem.documentation', page='html5') }}">
+            {{ _('Foundations of an HTML5 Web app') }}
           </a>
         </div>
       </div>
@@ -53,45 +46,54 @@
             that puts users and developers first
           {% endtrans %}
         </p>
-        <div class="button-wrapper last">
-          <a href="{{ url('ecosystem.documentation', page='mkt_hosting') }}"
-             class="button prominent third">
-            {{ _('Publish your App') }}</a>
+        <div class="link-wrapper last">
+          <a href="{{ url('ecosystem.documentation', page='mkt_hosting') }}">
+            {{ _('Publish your App') }}
+          </a>
         </div>
       </div>
     </section>
 
     <section id="partnership">
+      <div class="submit-app">
+        <h2>{{ _('Already built an app?') }}</h2>
+        <div class="app-logo">
+          <a href="{{ url('submit.app') }}" class="mkt-logo">
+            <img src="{{ media('img/ecosystem/submit-app-mktplace.png') }}">
+          </a>
+          <a href="{{ url('submit.app') }}" class="button">
+            {{ _('Submit it to the Marketplace') }}
+          </a>
+        </div>
+      </div>
       <div class="partner-title">
-        <h2>{{ _('Join the community') }}</h2>
+        <h2>
+          <a href="{{ url('ecosystem.partners') }}">
+            {{ _('Join the community') }}
+          </a>
+        </h2>
         <p>{{ _("Look who's already here") }}</p>
       </div>
       <div class="partner-logos">
-        <ul>
-          <li><img src="{{ media('img/ecosystem/partner-facebook.png') }}"></li>
-          <li><img src="{{ media('img/ecosystem/partner-twitter.png') }}"></li>
-          <li><img src="{{ media('img/ecosystem/partner-cuttherope.png') }}"></li>
-          <li><img src="{{ media('img/ecosystem/partner-evernote.png') }}"></li>
-          <li><img src="{{ media('img/ecosystem/partner-box.png') }}"></li>
-          <li><img src="{{ media('img/ecosystem/partner-ea.png') }}"></li>
-          <li><img src="{{ media('img/ecosystem/partner-soundcloud.png') }}"></li>
-          <li><img src="{{ media('img/ecosystem/partner-lanyrd.png') }}"></li>
-        </ul>
+        <a href="{{ url('ecosystem.partners') }}">
+          <ul>
+            <li><img src="{{ media('img/ecosystem/partner-facebook.png') }}"></li>
+            <li><img src="{{ media('img/ecosystem/partner-twitter.png') }}"></li>
+            <li><img src="{{ media('img/ecosystem/partner-cuttherope.png') }}"></li>
+            <li><img src="{{ media('img/ecosystem/partner-evernote.png') }}"></li>
+            <li><img src="{{ media('img/ecosystem/partner-box.png') }}"></li>
+            <li><img src="{{ media('img/ecosystem/partner-ea.png') }}"></li>
+            <li><img src="{{ media('img/ecosystem/partner-soundcloud.png') }}"></li>
+            <li><img src="{{ media('img/ecosystem/partner-lanyrd.png') }}"></li>
+          </ul>
+        </a>
         <h3>
-          {% trans %}
+          {% trans partner_url=url('ecosystem.partners') %}
             Are you a Web Company, Third-Party Service, or OEM looking to partner
-            with Mozilla?
+            with Mozilla? <a href="{{ partner_url }}">Check out our Partners page
+            for more info</a>
           {% endtrans %}
         </h3>
-        <p class="partner-email">
-          {{ _('Drop us a line and tell us about it:') }}
-          {{ emaillink('marketplace-partners@mozilla.com') }}
-        </p>
-      </div>
-      <div class="submit-app">
-        <a href="{{ url('submit.app') }}">
-          {{ _('Submit your App') }}
-        </a>
       </div>
     </section>
 
@@ -199,9 +201,10 @@
         <div class="form-title">
           <h3>{{ _('Firefox Apps &amp; Hacks') }}</h3>
           <p>
-            {% trans %}
+            {% trans dev_phone_url=url('ecosystem.dev_phone') %}
               Sign up for our monthly newsletter about Firefox OS,
               Marketplace and the Open Web apps ecosystem.
+              <a href="{{ dev_phone_url }}">Check out the developer phone preview</a>
             {% endtrans %}
           </p>
         </div>

mkt/templates/mkt/account-links.html

@@ -1,8 +1,4 @@
-{% set in_devhub = request.path.startswith('/developers/') %}
 {% if logged %}
-  {% if in_devhub %}
-    <a href="{{ url('submit.app') }}" class="header-button icon submit">{{ _('Submit a New App') }}</a>
-  {% endif %}
   <div class="account-links">
     <a href="{{ url('account.settings') }}" class="header-button icon settings sticky" title="{{ _('Settings') }}"></a>
     <ul>
@@ -26,8 +22,5 @@
     </ul>
   </div>
 {% else %}
-  {% if in_devhub %}
-    <a href="#" class="header-button submit" title="{{ _('Submit a New App') }}">{{ _('Submit a New App') }}</a>
-  {% endif %}
   <a href="#" class="header-button icon browserid">{{ _('Sign In') }}</a>
 {% endif %}