Add pocket best of banners (Fix mozilla#13990) (mozilla#14004)

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

@@ -24,12 +24,14 @@
 
 {% set show_fundraising_banner = switch('fundraising-banner-giving2023') and ftl_has_messages('banner-fundraising-title-1', 'banner-fundraising-tagline-1') %}
 {% set show_firefox_app_store_banner = switch('firefox-app-store-banner') %}
+{% set show_pocket_banner = switch("pocket-best-of-2023-banner") %}
 
 {% block page_css %}
   {{ css_bundle('protocol-split') }}
   {{ css_bundle('protocol-picto') }}
   {{ css_bundle('protocol-newsletter') }}
   {{ css_bundle('home-new') }}
+  {{ css_bundle('pocket-best-of')}}
 
   {% if LANG == 'de' and switch('de-ctd-homepage-promo') %}
     {{ css_bundle('ctd-promo') }}
@@ -64,7 +66,6 @@
     {%- if LANG == 'de' and switch('de-ctd-homepage-promo') -%}
       {% include 'mozorg/home/includes/ctd-promo-de.html'%}
     {% endif %}
-
   <div class="c-header-wrapper mzp-l-content mzp-t-content-lg">
     <h1>{{ ftl('home-mission-driven') }}</h1>
     <p>{{ ftl('home-were-not-normal') }}</p>
@@ -214,8 +215,12 @@ <h2 >{{ ftl('home-join-the-fight')}}</h2>
     {% endcall %}
   </section>
 
-  <!-- VPN promo -->
-  {% include 'mozorg/home/includes/featured-vpn.html' %}
+  <!-- Mid-page promo -->
+  {% if LANG == 'de' or LANG.startswith('en-') and show_pocket_banner %}
+    {% include 'mozorg/home/includes/pocket-best-of.html'%}
+  {% else %}
+    {% include 'mozorg/home/includes/featured-vpn.html' %}
+  {% endif %}
 
   <section class="c-about">
     <div class="c-about-wrapper mzp-l-content mzp-t-content-lg">

bedrock/mozorg/templates/mozorg/home/includes/pocket-best-of.html

@@ -0,0 +1,28 @@
+{#
+This Source Code Form is subject to the terms of the Mozilla Public
+License, v. 2.0. If a copy of the MPL was not distributed with this
+file, You can obtain one at https://mozilla.org/MPL/2.0/.
+#}
+{% if LANG == 'de' %}
+  {% set small_text = 'Vorgestelltes Produkt' %}
+  {% set heading_text = 'Entdecke die besten Artikel aus 2023' %}
+  {% set cta_text = 'Zum Best of 2023' %}
+{% else %}
+  {% set small_text = 'Featured product' %}
+  {% set heading_text = 'Discover the top articles of 2023' %}
+  {% set cta_text = 'See the winners' %}
+{% endif %}
+
+<aside class="pocket-feature mzp-l-content">
+  <div class="feature-wrapper">
+    <div class="image-wrapper">
+      <img loading="lazy" src="{{ static('img/home/2023/pocket-best-of.png') }}" alt="Pocket: Best of 2023">
+    </div>
+    <div class="feature-info">
+      <small>{{ small_text }}</small>
+      <h2>{{ heading_text }}</h2>
+    </div>
+    <a href="https://www.getpocket.com/2023/" rel="external noopener" target="_blank" class="mzp-c-button c-t-pocket" data-cta-text="See the winners"
+      data-cta-type="link" data-cta-position="mid-page banner">{{ cta_text }}</a>
+  </div>
+</aside>

media/css/mozorg/home/includes/pocket-best-of.scss

@@ -0,0 +1,96 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+
+$font-path: '/media/protocol/fonts';
+$image-path: '/media/protocol/img';
+
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+
+$pocket-inverse-color: #3A0603;
+
+.pocket-feature {
+    @include font-base;
+    padding-top: 0;
+
+    .feature-wrapper {
+        border-radius: $border-radius-md;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+        background-color: #32313b;
+        padding: $spacing-2xl 0;
+    }
+
+    .image-wrapper {
+        max-width: 300px;
+        margin-bottom: $spacing-xl;
+    }
+
+    .feature-info {
+        text-align: center;
+        margin-bottom: $spacing-lg;
+
+        small, h2 {
+            color: $color-white;
+        }
+
+        small {
+            @include font-size(18px);
+            text-transform: uppercase;
+            font-weight: 700;
+        }
+
+        h2 {
+            @include font-size(32px);
+            @include font-base;
+            font-weight: normal;
+        }
+    }
+
+    a {
+        @include text-body-lg;
+        background-color: $color-red-50;
+        border-color: $color-red-50;
+        white-space: nowrap;
+
+        &:hover, &:active {
+            border-color: $color-red-50;
+            color: $color-red-50
+        }
+
+        &:focus {
+            border-color: $color-red-50;
+            color: $color-white;
+            box-shadow: 0 0 0 1px $color-blue-05;
+        }
+    }
+
+    @media #{$mq-md} {
+        .image-wrapper {
+            max-width: none;
+        }
+    }
+
+    @media #{$mq-lg} {
+        .feature-wrapper {
+            flex-direction: row;
+            padding: 0 $spacing-2xl 0 0;
+        }
+
+        .feature-info {
+            text-align: left;
+            margin: 0 $spacing-md;
+        }
+
+        .image-wrapper {
+            background-color: $color-red-50;
+            padding-left: $spacing-2xl;
+            border-top-left-radius: $border-radius-md;
+            border-bottom-left-radius: $border-radius-md;
+            margin-bottom: 0;
+        }
+    }
+}

media/static-bundles.json

@@ -201,6 +201,12 @@
       ],
       "name": "home-new"
     },
+    {
+      "files": [
+        "css/mozorg/home/includes/pocket-best-of.scss"
+      ],
+      "name": "pocket-best-of"
+    },
     {
       "files": [
         "css/mozorg/home/home-old.scss"