Update newsletter/firefox page (issue #15075) (#15101)

* Update newsletter/firefox page (issue #15075)

bedrock/newsletter/templates/newsletter/firefox.html

@@ -6,8 +6,43 @@
 
 {% extends 'base-protocol.html' %}
 
-{% block page_title %}{{ ftl('newsletters-put-more-fox-in-your-inbox') }}{% endblock page_title %}
-{% block page_desc %}{{ ftl('newsletters-see-where-the-web-can-take') }}{% endblock %}
+{% if LAND == 'de' %}
+  {% set page_title_copy = 'Entfalte das volle Potential von Firefox' %}
+  {% set page_desc_copy = 'Melde dich an, um monatliche Updates von Firefox und Infos zu aktuellen Internet-Trends zu erhalten.' %}
+{% elif LANG == 'en-GB' %}
+  {% set page_title_copy = 'Put more fox in your inbox' %}
+  {% set page_desc_copy = 'Make your Firefox experience work best for you with monthly how-tos and internet security tips.' %}
+{% elif LANG == 'en-US' %}
+  {% set page_title_copy = 'Put more fox in your inbox' %}
+  {% set page_desc_copy = 'Get the most out of Firefox with monthly how-tos and internet security tips.' %}
+{% elif LANG == 'es-ES' %}
+  {% set page_title_copy = 'Exprime todo el potencial de Firefox' %}
+  {% set page_desc_copy = 'Regístrate para recibir actualizaciones mensuales de Firefox y las últimas tendencias en Internet que mejoran tu vida online.' %}
+{% elif LANG == 'fr' %}
+  {% set page_title_copy = 'Révélez tout le potentiel de Firefox' %}
+  {% set page_desc_copy = 'Abonnez-vous et retrouvez les dernières actualités et astuces pour améliorer votre expérience internet.' %}
+{% elif LANG == 'it' %}
+  {% set page_title_copy = 'Goditi tutto il potenziale di Firefox' %}
+  {% set page_desc_copy = 'Iscriviti per ricevere aggiornamenti da Firefox ogni mese sulle tendenze di internet che migliorano la tua vita online.' %}
+{% elif LANG == 'nl' %}
+  {% set page_title_copy = 'Haal meer uit Firefox' %}
+  {% set page_desc_copy = 'Meld u aan voor maandelijkse updates van Firefox en internettrends die bepalend zijn voor uw leven online.' %}
+{% elif LANG == 'pl' %}
+  {% set page_title_copy = 'Wyciśnij z Firefoksa, ile się da' %}
+  {% set page_desc_copy = 'Zarejestruj się, aby co miesiąc otrzymywać nowości od Firefoksa i zawsze wiedzieć, co słychać w internecie.' %}
+{% else %}
+  {% set page_title_copy = ftl('newsletters-make-the-most', fallback='newsletters-put-more-fox-in-your-inbox') %}
+  {% set page_desc_copy = ftl('newsletters-sign-up-to-receive-monthly', fallback='newsletters-see-where-the-web-can-take') %}
+{% endif %}
+
+{% block page_title %}{{ page_title_copy }}{% endblock page_title %}
+{% block page_desc %}{{ page_desc_copy }}{% endblock %}
+
+{% block experiments %}
+  {% if switch('experiment-newsletter-firefox', ['en-US', 'de', 'fr']) %}
+    {{ js_bundle('newsletter-firefox-experiment') }}
+  {% endif %}
+{% endblock %}
 
 {% block body_class %}{{ super() }} newsletter-mozilla{% endblock %}
 
@@ -21,15 +56,38 @@
 {% block content %}
 <main>
   <div class="section-intro">
-    <div class="mzp-l-content"></div>
+    <div class="intro-image-container mzp-l-content">
+      {% if LANG in ['de', 'fr'] and variation == '2' %}
+        {{ resp_img(
+          url='img/newsletter/firefox/eu/typing-500.jpg',
+          srcset={
+            'img/newsletter/firefox/eu/typing-500.jpg': '500w',
+            'img/newsletter/firefox/eu/typing-1000.jpg': '1000w'
+          },
+          sizes={
+            '(min-width: 600px)': 'calc(100vw - 50px)',
+            'default': '500px'
+          },
+          optional_attributes={
+            'class': 'intro-image',
+            'width': '500',
+            'height': '250'
+          }
+        ) }}
+      {% elif LANG == 'en-US' and variation == '2' %}
+        <img class="intro-image" src="{{ static('img/newsletter/firefox/na/features.svg') }}" width="600" height="300" alt="">
+      {% else %}
+        <img class="intro-image" src="{{ static('img/newsletter/firefox/fox-tail.svg') }}" width="556" height="278" alt="">
+      {% endif %}
+    </div>
   </div>
 
   <section class="section-subscribe">
-    <header class="mzp-l-content mzp-t-firefox">
-      <h1 class="page-title">{{ self.page_title() }}</h1>
-      <h2 class="section-title">{{ self.page_desc() }}</h2>
+    <header class="section-main-header mzp-l-content mzp-t-firefox">
+      <h1 class="page-title">{{ page_title_copy }}</h1>
+      <p class="tagline">{{ page_desc_copy }}</p>
     </header>
-    <div class="mzp-l-content mzp-t-content-sm">
+    <div class="section-newsletter-form mzp-l-content mzp-t-content-sm">
       {% if ftl_has_messages('multi-newsletter-form-title', 'multi-newsletter-form-desc', 'multi-newsletter-form-checkboxes-legend') %}
         {{ email_newsletter_form(
           newsletters='mozilla-foundation, mozilla-and-you',

bedrock/newsletter/urls.py

@@ -5,6 +5,7 @@
 
 from bedrock.mozorg.util import page
 from bedrock.newsletter import views
+from bedrock.utils.views import VariationTemplateView
 
 # NOTE:
 # URLs are defined with two variations for token handling. This dual approach allows flexibility in
@@ -42,7 +43,14 @@
     path("newsletter/opt-out-confirmation/", views.recovery, name="newsletter.opt-out-confirmation"),
     # Branded signup pages for individual newsletters
     page("newsletter/mozilla/", "newsletter/mozilla.html", ftl_files=["mozorg/newsletters"]),
-    page("newsletter/firefox/", "newsletter/firefox.html", ftl_files=["mozorg/newsletters"]),
+    # Firefox newsletter A/B test. See issue 15075
+    path(
+        "newsletter/firefox/",
+        VariationTemplateView.as_view(
+            template_name="newsletter/firefox.html", template_context_variations=["1", "2"], ftl_files=["mozorg/newsletters"]
+        ),
+        name="newsletter.firefox",
+    ),
     page("newsletter/developer/", "newsletter/developer.html", ftl_files=["mozorg/newsletters"]),
     page("newsletter/fxa-error/", "newsletter/fxa-error.html", ftl_files=["mozorg/newsletters"]),
     page("newsletter/family/", "newsletter/family.html", ftl_files=["mozorg/newsletters"], active_locales=["en-US"]),

l10n/en/mozorg/newsletters.ftl

@@ -117,9 +117,15 @@ newsletters-love-the-web-so-do-we = Love the web? So do we!
 newsletters-unlock-the-world-of-web = Unlock the world of web development with our weekly { -brand-name-mozilla } Developer Newsletter. Each edition brings you coding techniques and best practices, { -brand-name-mdn } updates, info about emerging technologies, developer tools tips, and more.
 
 # Headline for https://www-dev.allizom.org/newsletter/firefox/
+newsletters-make-the-most = Make the most out of { -brand-name-firefox }
+
+# Obsolete string (expires: 2024-11-01)
 newsletters-put-more-fox-in-your-inbox = Put more fox in your inbox.
 
 # Subtitle for https://www-dev.allizom.org/newsletter/firefox/
+newsletters-sign-up-to-receive-monthly = Sign up to receive monthly updates from { -brand-name-firefox } and internet trends that shape your life online.
+
+# Obsolete string (expires: 2024-11-01)
 newsletters-see-where-the-web-can-take = See where the Web can take you with monthly { -brand-name-firefox } tips, tricks and Internet intel.
 
 newsletters-we-are-sorry-but-there = We are sorry, but there was a problem with our system. Please try again later!

media/css/newsletter/newsletter-firefox.scss

@@ -8,70 +8,45 @@ $image-path: '/media/protocol/img';
 @import '~@mozilla-protocol/core/protocol/css/includes/lib';
 
 .section-intro {
-    background-color: $color-ink-80;
-
-    .mzp-l-content {
-        @include background-size(141px 157px, 153px 115px);
-        background-image:
-            url('/media/img/newsletter/firefox/mailbox.svg'),
-            url('/media/img/newsletter/firefox/fox-tail.svg');
-        background-position: bottom -40px left 10px, bottom -45px right -10px;
-        background-repeat: no-repeat, no-repeat;
-        height: 167px;
-        width: $content-xs;
-
-        @media #{$mq-sm} {
-            @include background-size(215px 239px, 230px 173px);
-            background-position: bottom -60px left, bottom -65px right;
-            height: 229px;
-            width: $content-sm;
-        }
-
-        @media #{$mq-md} {
-            @include background-size(300px 333px, 320px 241px);
-            background-position: bottom -90px left 40px, bottom -90px right 40px;
-            height: 290px;
-            width: $content-md;
-        }
-
-        @media #{$mq-lg} {
-            @include background-size(381px 423px, 428px 322px);
-            background-position: bottom -100px left 60px, bottom -120px right 60px;
-            height: 370px;
-            width: $content-lg;
-        }
+    .intro-image-container {
+        padding-bottom: $spacing-2xl;
+        padding-top: $spacing-2xl;
+    }
 
-        @media #{$mq-lg} and #{$mq-short} {
-            @include background-size(300px 333px, 320px 241px);
-            background-position: bottom -90px left 160px, bottom -90px right 140px;
-            height: 290px;
-        }
+    .intro-image {
+        border-radius: $border-radius-md;
+        display: block;
+        margin: 0 auto;
     }
 }
 
 .section-subscribe {
-    background: #fff;
     padding: $spacing-lg 0;
+}
 
-    .mzp-l-content:first-child {
-        padding-bottom: 0;
-    }
+.section-main-header {
+    padding-bottom: 0;
+    padding-top: 0;
 
-    h1 {
-        @include text-title-xl;
+    .page-title {
+        @include text-title-lg;
         text-align: center;
     }
 
-    h2 {
-        @include text-title-xs;
-        color: $color-ink-80;
-        font-weight: normal;
+    .tagline {
+        @include text-body-xl;
+        color: $color-marketing-gray-70;
         margin: $spacing-lg auto $spacing-xl;
         max-width: 30em;
         text-align: center;
     }
 }
 
+.section-newsletter-form {
+    padding-bottom: $spacing-2xl;
+    padding-top: $spacing-2xl;
+}
+
 .mzp-c-newsletter-thanks {
     text-align: center;
 }