diff --git a/bedrock/firefox/templates/firefox/welcome/page18.html b/bedrock/firefox/templates/firefox/welcome/page18.html new file mode 100644 index 00000000000..06b0cde662d --- /dev/null +++ b/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 %} +
+
+

Shop summer sales with confidence

+

Fakespot by Mozilla analyzes product reviews and checks them for authenticity so you can avoid scams and find trusted sellers.

+

Try it now

+ + {{ 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' + } + ) }} +
+
+{% endblock %} + +{% block content_body %} +
+
+
+ + {% 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, + ) %} +

Fakespot analyzes product reviews to let you know if they are reliable or not.

+ {% 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, + ) %} +

Helps you see which sellers are more likely to be trustworthy.

+ {% 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, + ) %} +

No need to comb through every review. See pros and cons at a glance.

+ {% endcall %} + +
+
+
+{% endblock %} + +{% block content_utility %} +

+ + + Why am I seeing this? + + +

+{% endblock %} diff --git a/bedrock/firefox/urls.py b/bedrock/firefox/urls.py index 0f023b3556c..79658bcfea9 100644 --- a/bedrock/firefox/urls.py +++ b/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"]), diff --git a/media/css/firefox/welcome18.scss b/media/css/firefox/welcome18.scss new file mode 100644 index 00000000000..d1b3c750bb3 --- /dev/null +++ b/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; + } +} diff --git a/media/img/firefox/welcome/page18/fakespot-hero-high-res.png b/media/img/firefox/welcome/page18/fakespot-hero-high-res.png new file mode 100644 index 00000000000..5205460504a Binary files /dev/null and b/media/img/firefox/welcome/page18/fakespot-hero-high-res.png differ diff --git a/media/img/firefox/welcome/page18/fakespot-hero.png b/media/img/firefox/welcome/page18/fakespot-hero.png new file mode 100644 index 00000000000..07e1d5948dc Binary files /dev/null and b/media/img/firefox/welcome/page18/fakespot-hero.png differ diff --git a/media/img/firefox/welcome/page18/icon-best.svg b/media/img/firefox/welcome/page18/icon-best.svg new file mode 100644 index 00000000000..4b842fa728a --- /dev/null +++ b/media/img/firefox/welcome/page18/icon-best.svg @@ -0,0 +1,3 @@ + + + diff --git a/media/img/firefox/welcome/page18/icon-time.svg b/media/img/firefox/welcome/page18/icon-time.svg new file mode 100644 index 00000000000..abb85e9f741 --- /dev/null +++ b/media/img/firefox/welcome/page18/icon-time.svg @@ -0,0 +1,3 @@ + + + diff --git a/media/img/firefox/welcome/page18/icon-trust.svg b/media/img/firefox/welcome/page18/icon-trust.svg new file mode 100644 index 00000000000..a00ce1967ea --- /dev/null +++ b/media/img/firefox/welcome/page18/icon-trust.svg @@ -0,0 +1,3 @@ + + + diff --git a/media/static-bundles.json b/media/static-bundles.json index 0079139463b..5d59a850636 100644 --- a/media/static-bundles.json +++ b/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"