landing page updates; logo additions (bug 808158)

media/css/ecosystem/landing.less

@@ -37,6 +37,92 @@
         padding: 20px 10px;
         width: 288px;
     }
+
+    #partnership {
+        border-bottom: 1px solid #ddd;
+        border-top: 1px solid #ddd;
+        clear: both;
+        float: left;
+        margin: 10px 0 20px;
+        max-width: 900px;
+        padding: 10px 10px 20px;
+        width: 100%;
+
+        .partner-title {
+            float: left;
+            margin-right: 10px;
+            padding-top: 30px;
+            width: 220px;
+
+            h2 {
+                color: #000;
+                font-size: 23px;
+                line-height: 27px;
+            }
+
+            p {
+                font-style: italic;
+            }
+        }
+
+        .partner-logos {
+            border-right: 1px solid #fff;
+            display: block;
+            float: left;
+            padding-right: 10px;
+            text-align: center;
+            width: 535px;
+
+            ul {
+                display: block;
+                margin: 10px auto;
+                padding: 0;
+                width: 510px;
+
+                li {
+                    float: left;
+                    margin: 5px 8px;
+
+                    img {
+                        .border-radius(5px);
+                        border: 1px solid #fff;
+                    }
+                }
+            }
+
+            h3, p {
+                clear: both;
+                text-align: center;
+            }
+
+            h3 {
+                padding: 10px 0 0;
+                font-size: 14px;
+            }
+
+            p {
+                font-style: italic;
+                margin: 0;
+            }
+        }
+
+        .submit-app {
+            border-left: 1px solid #ddd;
+            float: left;
+            margin: 0 auto;
+            padding: 10px 5px 5px 15px;
+            text-align: center;
+            width: 100px;
+
+            a {
+                background: url(../../img/ecosystem/submit-app-mktplace.png) no-repeat 50% 0;
+                display: block;
+                font-size: 18px;
+                line-height: 22px;
+                padding-top: 65px;
+            }
+        }
+    }
 }
 
 #landing-page .half {
@@ -45,7 +131,7 @@
     position: relative;
     width: 920px;
 
-    &.contact, &.initial-steps {
+    &.initial-steps {
         background-color: #fff;
         .border-radius(5px);
         .box-shadow(@light-gray 0 3px 3px);
@@ -67,50 +153,6 @@
         }
     }
 
-    &.contact {
-        margin: 25px 0;
-        text-align: center;
-
-        .contact-info, .logo {
-            float: left;
-        }
-
-        .logo {
-            padding: 15px 20px 5px 0;
-            width: 142px;
-
-            img {
-                display: block;
-                margin: 0 auto;
-                width: 112px;
-            }
-
-            h3 {
-                color: #c45a00;
-                font-size: 17px;
-                font-weight: 600;
-                line-height: 20px;
-                padding: 5px 0;
-                text-align: center;
-            }
-        }
-
-        .contact-info {
-            width: 750px;
-
-            h3 {
-                font-size: 19px;
-                line-height: 23px;
-                padding: 16px 10px 0;
-            }
-
-            p {
-                font-weight: bold;
-                padding: 0 10px;
-            }
-        }
-    }
-
     .panel {
         float: left;
         width: 306px;
@@ -118,6 +160,22 @@
         h2 {
             margin-top: 10px;
             text-align: center;
+
+            &:before {
+                padding-right: 8px;
+            }
+
+            &.section-design:before {
+                content: url(../../img/ecosystem/section-design-icon.png);
+            }
+
+            &.section-build:before {
+                content: url(../../img/ecosystem/section-build-icon.png);
+            }
+
+            &.section-publish:before {
+                content: url(../../img/ecosystem/section-publish-icon.png);
+            }
         }
 
         p {

mkt/ecosystem/templates/ecosystem/landing.html

@@ -16,7 +16,7 @@
     </p>
     <section class="half initial-steps">
       <div class="panel">
-        <h2>{{ _('Design') }}</h2>
+        <h2 class="section-design">{{ _('Design') }}</h2>
         <p>
           {% trans %}
             Learn how to design Web Apps that provide a user experience
@@ -31,7 +31,7 @@
         </div>
       </div>
       <div class="panel">
-        <h2>{{ _('Build') }}</h2>
+        <h2 class="section-build">{{ _('Build') }}</h2>
         <p>
           {% trans %}
             All the tools, docs and references you'll need for
@@ -46,7 +46,7 @@
         </div>
       </div>
       <div class="panel">
-        <h2>{{ _('Publish') }}</h2>
+        <h2 class="section-publish">{{ _('Publish') }}</h2>
         <p>
           {% trans %}
             Find out how to distribute your Apps on an open marketplace
@@ -60,6 +60,41 @@
         </div>
       </div>
     </section>
+
+    <section id="partnership">
+      <div class="partner-title">
+        <h2>{{ _('Join the community') }}</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>
+        <h3>
+          {% trans %}
+            Are you a Web Company, Third-Party Service, or OEM looking to partner
+            with Mozilla?
+          {% endtrans %}
+        </h3>
+        <p>
+          {{ _('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>
+
     <section id="platform" class="half">
       <div class="platform-copy">
         <h2>{{ _('The Mozilla Apps platform') }}</h2>
@@ -144,25 +179,6 @@
         </p>
       </div>
     </section>
-    <section class="half contact">
-      <div class="logo">
-        <img src="{{ media('img/ecosystem/mozilla-wordmark.png') }}"
-             alt="{{ _('Mozilla') }}">
-        <h3>{{ _('Partnerships') }}</h3>
-      </div>
-      <div class="contact-info" id="partners">
-        <h3>
-          {% trans %}
-            Are you a Web Company, Third-Party Service, or OEM looking to
-            partner with Mozilla?
-          {% endtrans %}
-        </h3>
-        <p>
-          {{ _('Drop us a line and tell us about it:') }}
-          {{ emaillink('marketplace-partners@mozilla.com') }}
-        </p>
-      </div>
-    </section>
   </div>
 {% endblock %}