Fix bug 1246795 - Firefox Accounts home promo

bedrock/mozorg/templates/mozorg/home/home.html

@@ -118,6 +118,17 @@ <h1>{{ high_res_img('home/voices/mozilla-wordmark-white.png', {'alt': 'Mozilla',
     <div class="promo-grid-inner">
       <ul class="promo-grid {% if tweets %}has-twitter-promo{% endif %}">
       {# L10n: Begin home page promos. Line breaks are for visual formatting only. #}
+      {% if LANG.startswith('en') %}
+        <li id="promo-1" class="item promo-large-portrait firefox-accounts" tabindex="0">
+          <h2 class="primary go">{{ _('All your devices. <br>One Firefox.') }}</h2>
+          <a class="panel-link" href="{{ url('firefox.accounts') }}" data-promotion-id="promo-1" data-promotion-name="All your devices. One Firefox." data-promotion-class="promo-large-portrait" data-promotion-type="tile" data-accounts-url="{{ url('firefox.accounts') }}">
+            <div class="secondary">
+              <h3>{{ _('Sync Firefox <br>wherever <br>you use it.') }}</h3>
+              <p class="more">{{ _('Create an account') }}</p>
+            </div>
+          </a>
+        </li>
+      {% else %}
         <li id="promo-1" class="item promo-large-portrait private-browsing" tabindex="0">
           <h2 class="primary go">{{ _('Introducing the new <br>Private Browsing') }}</h2>
           <a class="panel-link" href="{{ url('firefox.private-browsing') }}" data-promotion-id="promo-1" data-promotion-name="Introducing the new Private Browsing" data-promotion-class="promo-large-portrait" data-promotion-type="tile">
@@ -127,6 +138,7 @@ <h3>{{ _('More protection. <br>The most privacy.') }}</h3>
             </div>
           </a>
         </li>
+      {% endif %}
         <li id="promo-2" class="item promo-small-landscape advocacy">
           <a class="panel-link" href="https://advocacy.mozilla.org" data-promotion-id="promo-2" data-promotion-name="Learn about Mozilla Advocacy" data-promotion-class="promo-small-landscape" data-promotion-type="tile">
             <h2>{{ _('Learn about Mozilla Advocacy') }}</h2>
@@ -177,10 +189,10 @@ <h3>{{ _('Help millions <br>get the most from their <br>favorite browser.') }}</
             <h2>{{ _('Get smart on Tracking') }}</h2>
           </a>
         </li>
-      {% if l10n_has_tag('webmaker_promo_introducing') %}
-        <li id="promo-9" class="item promo-small-landscape introducing-webmaker">
-          <a class="panel-link" href="https://webmaker.org/" data-promotion-id="promo-9" data-promotion-name="Introducing the new Webmaker" data-promotion-class="promo-small-landscape" data-promotion-type="tile">
-            <h2>{{ _('Introducing<br> the new Webmaker') }}</h2>
+      {% if l10n_has_tag('teach_the_web_promo') %}
+        <li id="promo-9" class="item promo-small-landscape webmaker" data-promotion-id="promo-9" data-promotion-name="Teach the Web" data-promotion-class="promo-small-landscape" data-promotion-type="tile">
+          <a class="panel-link" rel="external" href="https://teach.mozilla.org">
+            <h2>{{ _('Teach<br> the Web') }}</h2>
           </a>
         </li>
       {% else %}

media/css/mozorg/home/home-promo.less

@@ -792,27 +792,17 @@ html[lang|="en"] {
 
 /****************************************************************************/
 // Webmaker
-
-.promo-small-landscape.introducing-webmaker {
+.promo-small-landscape.webmaker {
     background: #0ad; // bright blue
 
     h2 {
-        padding: 30px 20px 20px 140px;
+        padding: 30px 20px 10px 140px;
         min-height: 64px;
-        background: url(/media/img/home/voices/promos/webmaker/webmaker-logo.svg) 15px 15px no-repeat;
-        .background-size(100px, 100px);
-        .font-size(18px);
+        background: url(/media/img/home/voices/promos/webmaker/webmaker-teacher.svg) 15px 35px no-repeat;
+        .background-size(95px, 64px);
     }
 }
 
-html[lang|="en"] {
-    .promo-small-landscape.introducing-webmaker {
-        h2 {
-            padding-top: 25px;
-            .font-size(20px);
-        }
-    }
-}
 
 
 /****************************************************************************/
@@ -1015,6 +1005,23 @@ html[lang|="en"] {
 }
 
 
+/****************************************************************************/
+// Firefox Accounts
+.promo-large-portrait.firefox-accounts {
+    background: #5f6065; // dark gray
+
+    h2 {
+        padding-top: 175px;
+        background: url(/media/img/home/voices/promos/accounts/firefox-sync.svg) center 25px no-repeat;
+        .background-size(125px, 125px);
+    }
+
+    h3 {
+        margin-top: @baseLine * 2;
+    }
+}
+
+
 /****************************************************************************/
 // Twitter
 .promo-small-landscape.twt {