add Fx 20th NA+EU pages (fix #15383) (#15409)

bedrock/firefox/templates/firefox/firefox-20th/index.html

@@ -0,0 +1,150 @@
+{#
+  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/.
+#}
+
+{% extends "firefox/base/base-protocol.html" %}
+
+{% from "macros-protocol.html" import split with context %}
+{% from "macros.html" import video_inline_embed with context %}
+
+{% block page_css %}
+  {{ css_bundle('protocol-split') }}
+  {{ css_bundle('firefox_20th') }}
+{% endblock %}
+
+{% set utm_params = 'utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=firefox20' %}
+
+{% block body_id %}firefox20{% endblock %}
+
+{% block site_header %}
+  {% with hide_nav_download_button=True %}
+    {% include 'includes/protocol/navigation/navigation.html' %}
+  {% endwith %}
+{% endblock %}
+
+{% block sub_navigation %}
+  {% include 'firefox/includes/sub-nav-firefox.html' %}
+{% endblock %}
+
+{% if LANG == "fr" %}
+  {% set page_title = 'Firefox a 20 ans - Célébrez avec nous' %}
+  {% set page_desc = 'Célébrez les 20 ans de Firefox, plongez dans notre parcours, explorez les créations de fans, rencontrez les meilleurs contributeurs et rejoignez-nous pour un futur palpitant.' %}
+  {% set main_title = 'Firefox fête ses 20 ans' %}
+  {% set main_body = 'Que vous veniez de télécharger Firefox, ou que vous soyez à nos côtés depuis le début, vous contribuez grandement à notre mission de créer une meilleure version d’Internet. Nous avons hâte de vous dévoiler la suite.' %}
+  {% set cta_title = 'Mettez du peps dans votre navigation' %}
+  {% set cta_body = 'Découvrez notre édition spéciale de fonds d’écran. Ouvrez un nouvel onglet et cliquez sur la roulette en haut à droite.' %}
+  {% set cta_default = 'Faites de Firefox votre navigateur par défaut' %}
+  {% set cta_download = 'Télécharger Firefox' %}
+  {% set fan_title = 'Les fans de Firefox ont du talent' %}
+  {% set fan_body = 'On ne se lassera jamais de votre fan art.' %}
+{% elif LANG == "de" %}
+  {% set page_title = 'Firefox wird 20 - Feiere mit uns' %}
+  {% set page_desc = 'Feiere 20 Jahre Firefox — komm mit auf unsere Reise, entdecke Werke von Fans, triff die wichtigsten Mitwirkenden und begleite uns auf dem Weg in eine spannende Zukunft.' %}
+  {% set main_title = 'Feiere 20 Jahre Firefox mit uns' %}
+  {% set main_body = 'Ob du Firefox gerade erst runtergeladen hast, oder von Anfang an dabei bist – du spielst eine wichtige Rolle dabei, das Internet zu einem besseren Ort zu machen. Wir freuen uns schon darauf, dir zu zeigen, was als Nächstes kommt.' %}
+  {% set cta_title = 'Mach deinen Browser bunter' %}
+  {% set cta_body = 'Schau dir unsere speziellen Hintergrundbilder an – öffne einen neuen Tab und klicke oben rechts auf das Zahnrad-Symbol.' %}
+  {% set cta_default = 'Firefox als Standardbrowser festlegen' %}
+  {% set cta_download = 'Firefox herunterladen' %}
+  {% set fan_title = 'Firefox-Fans haben Talent' %}
+  {% set fan_body = 'Wir können uns an eurer Fan-Art einfach nicht sattsehen.' %}
+{% else %}
+  {% set page_title = 'Firefox Turns 20 - Celebrate with Us' %}
+  {% set page_desc = 'Celebrate 20 years of Firefox — dive into our journey, explore fan creations, meet top contributors and join us as we look forward to an exciting future.' %}
+  {% set main_title = 'Celebrating 20 years of Firefox' %}
+  {% set main_body = 'Whether you just downloaded Firefox, or you’ve been with us since the beginning, you are a vital part of helping us make the internet a better place. We can’t wait to show you what’s coming next.' %}
+  {% set fan_title = 'Firefox fans are talented' %}
+  {% set fan_body = 'We’ll never get tired of your fan art.' %}
+{% endif %}
+
+{% block page_title_full %}{{ page_title }}{% endblock %}
+{% block page_desc %}{{ page_desc }}{% endblock %}
+{% block page_image %}{{ static('img/firefox/firefox-20th/firefox-20th-social-share.png') }}{% endblock %}
+
+{% block content %}
+<section class="fx20-content-main">
+  <div class="mzp-l-content mzp-t-content-2xl">
+    <div class="fx20-main-wrapper">
+      <img class="fx20-main-image" src="{{ static('img/firefox/firefox-20th/firefox-20th-dark.png') }}" width="321" height="129" alt="">
+      <h1 class="fx20-main-title">{{ main_title }}</h1>
+      <p class="fx20-main-body">{{ main_body }}</p>
+    </div>
+    {% include 'firefox/whatsnew/includes/fx132/video.html' %}
+  </div>
+</section>
+
+{% if LANG in ['fr', 'de'] %}
+  <section class="fx20-content-cta">
+    <div class="mzp-l-content mzp-t-content-2xl">
+      <div class="fx20-cta-wrapper">
+        <h2>{{ cta_title }}</h2>
+        <p>{{ cta_body }}</p>
+        {{ download_firefox_thanks(alt_copy=ftl('download-button-download-firefox'), dom_id='firefox20-download-firefox', button_class='download-firefox mzp-t-secondary mzp-t-md', download_location='firefox20') }}
+        <a class="mzp-c-button mzp-t-product set-as-default" href="{{ url('firefox.set-as-default.thanks') }}" data-cta-text="Set Firefox as your default browser" >
+          {{ cta_default }}
+        </a>
+      </div>
+    </div>
+  </section>
+{% else %}
+  <section>
+    <div class="mzp-l-content mzp-t-content-2xl">
+      <div class="mzp-l-columns mzp-t-columns-two">
+        <div class="fx20-action-container">
+          <h2>Features you fell in love with</h2>
+          <p>It’s official — tabbed browsing, popping videos out of your window and tab containers made the list.</p>
+          <a class="mzp-c-cta-link" href="https://blog.mozilla.org/en/products/firefox/firefox-features-fan-favorites/?{{ utm_params }}" data-link-text="View blog Features">
+            View blog
+          </a>
+        </div>
+
+        <div class="fx20-action-container">
+          <h2>Cheers to SUMO’s top contributors</h2>
+          <p>We’re spotlighting the incredible contributions of our SUMO community, some of whom have been with us since the very beginning.</p>
+          <a class="mzp-c-cta-link" href="https://blog.mozilla.org/sumo/2024/11/06/celebrating-our-top-contributors-on-firefoxs-20th-anniversary/?{{ utm_params }}" data-link-text="View blog Contributors">
+            View blog
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+{% endif %}
+
+{% call split(
+    block_class='fx20-content-fanart mzp-l-split-center-on-sm-md',
+    media_class='mzp-l-split-h-center',
+    image=resp_img(
+          url='img/firefox/firefox-20th/fan-art.png',
+          srcset={
+            'img/firefox/firefox-20th/fan-art-high-res.png': '2x'
+          },
+        ),
+    media_after=True
+  ) %}
+    <h2 class="fx20-fanart-title">{{ fan_title }}</h2>
+    <p class="fx20-fanart-body">{{ fan_body }}</p>
+{% endcall %}
+
+{% if LANG.startswith('en-') %}
+  <section class="fx20-content-community">
+    <div class="mzp-l-content mzp-t-content-2xl">
+      <div class="fx20-cta-wrapper">
+        <h2>Be a part of Firefox’s future</h2>
+        <p>Help us come up with our next big feature by joining the
+          Mozilla Connect community.</p>
+        <a class="mzp-c-cta-link" href="https://connect.mozilla.org/?{{ utm_params }}" data-cta-text="Join now">
+          Join now
+        </a>
+      </div>
+    </div>
+  </section>
+{% endif %}
+
+{% endblock %}
+
+{% block js %}
+  {{ js_bundle('firefox_20th') }}
+  {{ js_bundle('video-inline-embed') }}
+{% endblock %}

bedrock/firefox/urls.py

@@ -264,6 +264,12 @@
             template_context_variations=["1", "2", "3", "4", "5"],
         ),
     ),
+    # Issue 15383 - Firefox 20th landing page
+    page(
+        "firefox/firefox20/",
+        "firefox/firefox-20th/index.html",
+        active_locales=["de", "fr", "en-US", "en-CA", "en-GB"],
+    ),
 )
 
 # Contentful

media/css/firefox/firefox-20th/firefox-20th.scss

@@ -0,0 +1,141 @@
+// 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/.
+
+$image-path: '/media/protocol/img';
+
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/button';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-firefox';
+@import '../../protocol/components/custom-menu-list';
+@import '../../protocol/components/sub-navigation';
+@import '~@mozilla-protocol/core/protocol/css/templates/multi-column';
+@import "../../protocol/components/video";
+
+.fx20-content-main {
+    background-color: $color-marketing-gray-10;
+    text-align: center;
+
+    .fx20-main-wrapper {
+        max-width: 80%;
+        margin: 0 auto;
+    }
+
+    .fx20-main-image {
+        margin-bottom: $spacing-xl;
+    }
+
+    .fx20-main-title {
+        margin-top: $spacing-sm;
+
+        @media #{$mq-lg} {
+            @include font-size(56px);
+        }
+    }
+
+    .fx20-main-body {
+        @include font-firefox;
+        @include text-title-xs;
+
+        @media #{$mq-lg} {
+            padding-bottom: $layout-lg;
+        }
+    }
+
+    .mzp-c-video {
+        max-width: 800px;
+        margin: $layout-md auto $layout-sm;
+
+        @media #{$mq-lg} {
+            margin: $layout-lg auto $layout-md ;
+        }
+    }
+
+}
+
+.fx20-action-container {
+    background-color: $color-marketing-gray-10;
+    margin-bottom: $spacing-lg;
+    text-align: start;
+    padding: $spacing-lg;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    @media #{$mq-md} {
+        margin-bottom: 0;
+    }
+
+    h2 {
+        @include text-title-sm;
+    }
+
+    .mzp-c-cta-link {
+        text-decoration: none;
+    }
+}
+
+.fx20-content-fanart {
+    background-color: $color-marketing-gray-10;
+    text-align: start;
+
+    .fx20-fanart-title {
+        @include text-title-lg;
+
+        @media #{$mq-xl} {
+            @include text-title-xl;
+            max-width: 60%;
+        }
+    }
+
+    .fx20-fanart-body {
+        @include font-firefox;
+        @include text-title-xs;
+    }
+
+}
+
+.fx20-content-community,
+.fx20-content-cta {
+    text-align: center;
+
+    .fx20-cta-wrapper {
+        background-color: $color-marketing-gray-10;
+        padding: $spacing-lg;
+    }
+
+    h2 {
+        @include text-title-sm;
+    }
+}
+
+.fx20-cta-wrapper {
+    .mzp-c-button-download-container {
+        margin-bottom: 0;
+
+        .mzp-c-button-download-privacy-link {
+            margin: $spacing-sm auto 0;
+        }
+    }
+
+    a.mzp-c-button.mzp-t-product.set-as-default {
+        display: none;
+    }
+
+    .mzp-c-cta-link {
+        text-decoration: none;
+    }
+}
+
+.is-firefox {
+    #firefox20-download-firefox {
+        display:none;
+    }
+
+    a.mzp-c-button.mzp-t-product.set-as-default {
+        display: block;
+        max-width: fit-content;
+        margin: 0 auto;
+    }
+}

media/js/firefox/firefox-20th/firefox-20th.js

@@ -0,0 +1,43 @@
+/*
+ * 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/.
+ */
+
+(function () {
+    'use strict';
+
+    // Log account status
+    Mozilla.Client.getFxaDetails((details) => {
+        if (details.setup) {
+            // GA4
+            window.dataLayer.push({
+                event: 'dimension_set',
+                firefox_is_signed_in: true
+            });
+        } else {
+            // GA4
+            window.dataLayer.push({
+                event: 'dimension_set',
+                firefox_is_signed_in: false
+            });
+        }
+    });
+
+    // Log default status
+    Mozilla.UITour.getConfiguration('appinfo', (details) => {
+        if (details.defaultBrowser) {
+            // GA4
+            window.dataLayer.push({
+                event: 'dimension_set',
+                firefox_is_default: true
+            });
+        } else {
+            // GA4
+            window.dataLayer.push({
+                event: 'dimension_set',
+                firefox_is_default: false
+            });
+        }
+    });
+})();

media/static-bundles.json

@@ -453,6 +453,12 @@
       ],
       "name": "firefox_whatsnew_132"
     },
+    {
+      "files": [
+        "css/firefox/firefox-20th/firefox-20th.scss"
+      ],
+      "name": "firefox_20th"
+    },
     {
       "files": [
         "css/privacy/privacy-email.scss"
@@ -1517,6 +1523,12 @@
       ],
       "name": "firefox_whatsnew_132"
     },
+    {
+      "files": [
+        "js/firefox/firefox-20th/firefox-20th.js"
+      ],
+      "name": "firefox_20th"
+    },
     {
       "files": [
         "js/mozorg/manifesto.js"