Bug 1112324 - Privacy Day home page promo

bedrock/mozorg/templates/mozorg/home/home-new.html

@@ -115,11 +115,19 @@ <h3>{{ _('See the principles <br>that guide everything <br>we do.') }}</h3>
           </a>
         </li>
       {% endif %}
+      {% if l10n_has_tag('privacy_day') and waffle.switch('mozorg-home-privacy-promo') %}
+        <li id="promo-2" class="item promo-small-landscape advocacy" data-name="Learn about Mozilla Advocacy">
+          <a class="panel-link" href="https://advocacy.mozilla.org">
+            <h2>{{ _('Learn about Mozilla Advocacy') }}</h2>
+          </a>
+        </li>
+      {% else %}
         <li id="promo-2" class="item promo-small-landscape privacy" data-name="Understand your privacy online">
           <a class="panel-link" href="{{ url('privacy.privacy-day') }}">
             <h2>{{ _('Understand your privacy online') }}</h2>
           </a>
         </li>
+      {% endif %}
         <li id="promo-3" class="item promo-face">
           {{ promo_face(1) }}
         </li>
@@ -136,6 +144,29 @@ <h2 class="go">{{ _('Download Firefox') }}</h2>
             <a class="fxos-link" href="{{ url('firefox.desktop.index') }}">{{ _('Learn more') }}</a>
           </div>
         </li>
+    {% if l10n_has_tag('privacy_day') and waffle.switch('mozorg-home-privacy-promo') %}
+      {% if LANG.startswith('en') and waffle.switch('mozorg-home-privacy-promo-jan28') %}
+        <li id="promo-6" class="item promo-large-landscape privacy-day" tabindex="0" data-name="January 28 is Data Privacy Day">
+          <h2 class="primary go">January 28 is Data Privacy Day</h2>
+          <a class="panel-link" rel="external" href="{{ url('privacy.privacy-day') }}">
+            <div class="secondary">
+              <h3>Get smart on privacy<br> in four easy steps.</h3>
+              <p class="more">Learn how</p>
+            </div>
+          </a>
+        </li>
+      {% else %}
+        <li id="promo-6" class="item promo-large-landscape privacy-day" tabindex="0" data-name="Get smart on privacy">
+          <h2 class="primary go">{{ _('Get Smart on Privacy') }}</h2>
+          <a class="panel-link" rel="external" href="{{ url('privacy.privacy-day') }}">
+            <div class="secondary">
+              <h3>{{ _('Learn how to give yourself more control online in four easy steps.') }}</h3>
+              <p class="more">{{ _('Get smart on privacy') }}</p>
+            </div>
+          </a>
+        </li>
+      {% endif %}
+    {% else %}
         <li id="promo-6" class="item promo-large-landscape webmaker" tabindex="0" data-name="Teach the Web">
           <h2 class="primary go">{{ _('Teach the Web') }}</h2>
           <a class="panel-link" rel="external" href="https://webmaker.org/">
@@ -145,6 +176,7 @@ <h3>{{ _('Let’s build a Web that’s open <br>and made by everyone.') }}</h3>
             </div>
           </a>
         </li>
+    {% endif %}
         <li id="promo-7" class="item promo-face">
           {{ promo_face(3) }}
         </li>

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

@@ -760,6 +760,20 @@ html[lang|="en"] {
     }
 }
 
+/****************************************************************************/
+// Advocacy
+.promo-small-landscape.advocacy {
+    background-color: #3fa9f1;
+    background-image: url(/media/img/home/voices/promos/advocacy/advocacy-logo.png);
+    background-position: 15px 20px;
+    background-repeat: no-repeat;
+    .background-size(100px, 100px);
+
+    h2 {
+        padding: 20px 10px 10px 130px;
+    }
+}
+
 /****************************************************************************/
 // Appmaker
 .promo-small-landscape.appmaker {
@@ -849,6 +863,21 @@ html[lang|="en"] {
     }
 }
 
+/****************************************************************************/
+// Privacy Day
+.promo-large-landscape.privacy-day {
+    background: #c33b32; // red
+
+    h2 {
+        padding: 120px @baseLine 0 @baseLine;
+        margin-top: @baseLine;
+        background-image: url(/media/img/home/voices/promos/privacy/privacy-shield.svg);
+        background-position: top center;
+        background-repeat: no-repeat;
+        .background-size(90px, 103px);
+    }
+}
+
 /****************************************************************************/
 // Support
 .promo-large-landscape.support {
@@ -1656,6 +1685,12 @@ html[lang|="en"] {
         .background-size(121px, 120px);
     }
 
+    // Advocacy
+    .promo-small-landscape.advocacy {
+        background-image: url(/media/img/home/voices/promos/advocacy/advocacy-logo-high-res.png);
+        .background-size(100px, 100px);
+    }
+
     // Volunteer
     .promo-small-landscape.volunteer {
         background-image: url(/media/img/home/voices/promos/volunteer/volunteer-high-res.png);