Add moment page for Fakespot summer sales [fix #14740] (#14810)

bedrock/firefox/templates/firefox/welcome/page18.html

@@ -0,0 +1,142 @@
+{#
+ 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/.
+#}
+
+{% from "macros-protocol.html" import picto with context %}
+
+{% extends "firefox/welcome/base.html" %}
+
+{% block page_title %}Fakespot by Mozilla - Shop summer sales with confidence{% endblock %}
+
+{% block body_class %}welcome-page17{% endblock %}
+
+{% block page_css %}
+  {{ css_bundle('protocol-split') }}
+  {{ css_bundle('protocol-picto') }}
+  {{ css_bundle('firefox_welcome_page18') }}
+{% endblock %}
+
+{% set utm_params = 'utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=firefox-welcome-18' %}
+
+{% block shoulder_logo %}
+  {{ picture(
+    url="img/firefox/welcome/page16/firefox-wordmark-light.svg",
+    sources=[
+      {
+        "media": "(prefers-color-scheme: light)",
+        "srcset": {
+          "img/firefox/welcome/page16/firefox-wordmark-light.svg": "default",
+        }
+      },
+      {
+        "media": "(prefers-color-scheme: dark)",
+        "srcset": {
+          "img/firefox/welcome/page16/firefox-wordmark-dark.svg": "default",
+        }
+      }
+    ],
+    optional_attributes={
+      "class": "c-header-logo",
+      "alt": "Firefox",
+      "width": "108",
+      "height": "40",
+    }
+  ) }}
+{% endblock %}
+
+{% block shoulder_cta %}{% endblock %}
+
+{% block content_intro %}
+<section class="c-content-main">
+  <div class="mzp-l-content mzp-t-content-lg">
+    <h1 class="c-main-title">Shop summer sales with confidence</h1>
+    <p class="c-main-tagline"><strong>Fakespot by Mozilla</strong> analyzes product reviews and checks them for authenticity so you can avoid scams and find trusted sellers.</p>
+    <p class="c-main-cta"><a href="https://fakespot.com/review-analyzer/?{{ utm_params }}" class="mzp-c-button mzp-t-product" rel="external" data-cta-text="Try it now" data-cta-type="button">Try it now</a></p>
+
+    {{ resp_img('img/firefox/welcome/page18/fakespot-hero.png',
+      srcset={
+        'img/firefox/welcome/page18/fakespot-hero-high-res.png': '2x'
+      },
+      optional_attributes={
+        'class': 'c-main-image',
+        'height': '449',
+        'width': '820',
+        'alt': 'Fakespot by Mozilla'
+      }
+    ) }}
+  </div>
+</section>
+{% endblock %}
+
+{% block content_body %}
+<section class="page-body">
+  <div class="mzp-l-content mzp-t-content-xl">
+    <div class="mzp-l-columns mzp-t-columns-three mzp-t-picto-center">
+
+    {% call picto(
+      title='Trust what you read',
+      heading_level=3,
+      image=resp_img(
+        url='img/firefox/welcome/page18/icon-trust.svg',
+        optional_attributes={
+          'class': 'mzp-c-picto-image',
+          'loading': 'lazy',
+          'height': '64',
+          'width': '74'
+        }
+      ),
+      body=True,
+    ) %}
+      <p>Fakespot analyzes product reviews to let you know if they are reliable or not.</p>
+    {% endcall %}
+
+    {% call picto(
+      title='Buy from reliable sellers',
+      heading_level=3,
+      image=resp_img(
+        url='img/firefox/welcome/page18/icon-best.svg',
+        optional_attributes={
+          'class': 'mzp-c-picto-image',
+          'loading': 'lazy',
+          'height': '64',
+          'width': '64'
+        }
+      ),
+      body=True,
+    ) %}
+      <p>Helps you see which sellers are more likely to be trustworthy.</p>
+    {% endcall %}
+
+    {% call picto(
+      title='Save time',
+      heading_level=3,
+      image=resp_img(
+        url='img/firefox/welcome/page18/icon-time.svg',
+        optional_attributes={
+          'class': 'mzp-c-picto-image',
+          'loading': 'lazy',
+          'height': '64',
+          'width': '64'
+        }
+        ),
+        body=True,
+      ) %}
+        <p>No need to comb through every review. See pros and cons at a glance.</p>
+      {% endcall %}
+
+    </div>
+  </div>
+</section>
+{% endblock %}
+
+{% block content_utility %}
+<p>
+  <strong>
+    <a href="https://support.mozilla.org/kb/firefox-browser-welcome-pages/">
+      Why am I seeing this?
+    </a>
+  </strong>
+</p>
+{% endblock %}

bedrock/firefox/urls.py

@@ -154,6 +154,7 @@
     page("firefox/welcome/17a/", "firefox/welcome/page17/page17-a.html", ftl_files=["firefox/welcome/page14"], active_locales=["en-US", "fr", "de"]),
     page("firefox/welcome/17b/", "firefox/welcome/page17/page17-b.html", ftl_files=["firefox/welcome/page14"], active_locales=["en-US", "fr", "de"]),
     page("firefox/welcome/17c/", "firefox/welcome/page17/page17-c.html", ftl_files=["firefox/welcome/page14"], active_locales=["en-US", "fr", "de"]),
+    page("firefox/welcome/18/", "firefox/welcome/page18.html"),
     page("firefox/switch/", "firefox/switch.html", ftl_files=["firefox/switch"]),
     page("firefox/pocket/", "firefox/pocket.html"),
     page("firefox/share/", "firefox/share.html", active_locales=["de", "fr"]),

media/css/firefox/welcome18.scss

@@ -0,0 +1,73 @@
+// 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';
+@import "~@mozilla-protocol/core/protocol/css/templates/multi-column";
+
+.c-page-header {
+    .mzp-l-content {
+        padding-top: $spacing-md;
+        padding-bottom: $spacing-md;
+    }
+}
+
+.c-content-main {
+    background: $color-marketing-gray-10;
+    color: $color-black;
+    text-align: center;
+
+    .c-main-image {
+        margin: $layout-md auto;
+    }
+}
+
+.page-body {
+    color: $color-black;
+
+    .mzp-c-picto-heading {
+        @include text-title-sm;
+        font-weight: normal;
+    }
+}
+
+.c-main-tagline {
+    @include text-body-xl;
+
+    @media #{$mq-md} {
+        padding: 0 $layout-xl;
+    }
+}
+
+.page-footer {
+    text-align: center;
+}
+
+// * -------------------------------------------------------------------------- */
+// Dark mode
+
+@media (prefers-color-scheme: dark) {
+    #outer-wrapper {
+        background: $color-dark-gray-60;
+        color: $color-white;
+    }
+
+    .c-content-main {
+        background: $color-dark-gray-50;
+    }
+
+    .c-content-main,
+    .c-main-title,
+    .c-main-subheading,
+    .page-body,
+    .mzp-c-picto-heading {
+        color: $color-white;
+    }
+
+    .c-utilities {
+        @include white-links;
+    }
+}

media/static-bundles.json

@@ -838,6 +838,12 @@
       ],
       "name": "firefox_welcome_page17"
     },
+    {
+      "files": [
+        "css/firefox/welcome18.scss"
+      ],
+      "name": "firefox_welcome_page18"
+    },
     {
       "files": [
         "css/firefox/faq.scss"