forked from mozilla/bedrock
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Firefox 106 MR: add home promo, update /new features [fix mozilla#12225…
…] (mozilla#12259)
- Loading branch information
Showing
13 changed files
with
439 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
82 changes: 82 additions & 0 deletions
82
bedrock/mozorg/templates/mozorg/home/includes/firefox-mr106-promo.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| {# | ||
| 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 split with context %} | ||
|
|
||
| {% if LANG == 'fr' %} | ||
| {% set mr_promo_title_nonfx = 'Sentez-vous bien en ligne' %} | ||
| {% set mr_promo_title_fx = 'Naviguez en toute fluidité' %} | ||
| {% set mr_promo_body_nonfx = 'Le nouveau Firefox est riche en fonctionnalités conçues pour vous. Naviguez intuitivement d’un appareil à l’autre, choisissez une couleur exclusive, modifiez vos PDFs directement dans votre navigateur et bénéficiez du niveau de confidentialité que vous méritez.' %} | ||
| {% set mr_promo_body_fx = 'Le nouveau Firefox est riche en fonctionnalités conçues pour vous. Passez d’un appareil à l’autre et ne perdez jamais le fil de ce qui vous importe en ligne.' %} | ||
| {% set mr_promo_cta_nonfx_desktop = 'Installer Firefox' %} | ||
| {% set mr_promo_cta_fx_desktop = 'Télécharger Firefox mobile' %} | ||
| {% set mr_promo_cta_nonfx_mobile = 'Télécharger Firefox mobile' %} | ||
| {% set mr_promo_cta_fx_mobile = 'Faire de Firefox votre navigateur par défaut' %} | ||
| {% elif LANG == 'de' %} | ||
| {% set mr_promo_title_nonfx = 'Mach Firefox zu deinem Browser' %} | ||
| {% set mr_promo_title_fx = 'Browse einfach weiter' %} | ||
| {% set mr_promo_body_nonfx = 'Der neue Firefox steckt voller Funktionen, die für dich gemacht sind. Wechsle nahtlos von einem Gerät zum anderen, wähle exklusive Farben und bearbeite PDFs direkt im Browser – alles mit dem Level an Privatsphäre, das du verdienst.' %} | ||
| {% set mr_promo_body_fx = 'Der neue Firefox ist voller Features, die für dich gemacht sind. Wechsle nahtlos zwischen deinen Geräten und behalte im Blick, was dir wichtig ist.' %} | ||
| {% set mr_promo_cta_nonfx_desktop = 'Jetzt installieren' %} | ||
| {% set mr_promo_cta_fx_desktop = 'Hol dir Firefox fürs Handy' %} | ||
| {% set mr_promo_cta_fx_mobile = 'Mach Firefox zu deinem Standardbrowser' %} | ||
| {% set mr_promo_cta_nonfx_mobile = 'Hol dir Firefox fürs Handy' %} | ||
| {% else %} | ||
| {% set mr_promo_title_nonfx = 'Make Firefox yours' %} | ||
| {% set mr_promo_title_fx = 'Browsing has never been so seamless' %} | ||
| {% if LANG in ['en-CA', 'en-GB'] %} | ||
| {% set mr_promo_body_nonfx = 'The new Firefox is full of features designed with just you in mind. Browse seamlessly between devices, choose among exclusive colours, edit PDFs directly in your browser and get the level of privacy you deserve.' %} | ||
| {% else %} | ||
| {% set mr_promo_body_nonfx = 'The new Firefox is full of features designed with just you in mind. Browse seamlessly between devices, choose among exclusive colors, edit PDFs directly in your browser and get the level of privacy you deserve.' %} | ||
| {% endif %} | ||
| {% set mr_promo_body_fx = 'The new Firefox is full of features designed with just you in mind. Jump from one device to another and never lose track of what matters to you online.' %} | ||
| {% set mr_promo_cta_nonfx_desktop = 'Install now' %} | ||
| {% set mr_promo_cta_fx_desktop = 'Get Firefox mobile' %} | ||
| {% set mr_promo_cta_nonfx_mobile = 'Get Firefox mobile' %} | ||
| {% set mr_promo_cta_fx_mobile = 'Make Firefox your default browser' %} | ||
| {% endif %} | ||
|
|
||
| {% call split( | ||
| image_url='img/home/2022/mr-hero-custom.svg', | ||
| include_highres_image=False, | ||
| block_class='mr106-home-hero show-not-firefox mzp-t-split-nospace mzp-l-split-center-on-sm-md', | ||
| theme_class='mzp-t-dark', | ||
| body_class=None, | ||
| media_class='mzp-l-split-h-center mzp-l-split-v-center', | ||
| ) %} | ||
| <div class="mzp-c-wordmark mzp-t-wordmark-lg mzp-t-product-firefox"></div> | ||
| <h2 class="c-mr106-title">{{ mr_promo_title_nonfx }}</h2> | ||
| <p class="c-mr106-body">{{ mr_promo_body_nonfx }}</p> | ||
| <div class="c-mr106-cta"> | ||
| <div class="show-mobile"> | ||
| <a class="mzp-c-button mzp-t-product mzp-t-dark mzp-t-xl" href="{{ url('firefox.browsers.mobile.index') }}" data-cta-type="link" data-cta-text="Get Firefox mobile" data-cta-position="MR Promo">{{ mr_promo_cta_nonfx_mobile }}</a> | ||
| </div> | ||
| <div class="show-desktop"> | ||
| {{ download_firefox_thanks(alt_copy=mr_promo_cta_nonfx_desktop, dom_id='mr106-download-firefox', button_class='mzp-t-dark mzp-t-xl', download_location='MR Promo') }} | ||
| </div> | ||
| </div> | ||
| {% endcall %} | ||
|
|
||
| {% call split( | ||
| image_url='img/home/2022/mr-hero-sync.svg', | ||
| include_highres_image=False, | ||
| block_class='mr106-home-hero show-firefox mzp-t-split-nospace mzp-l-split-center-on-sm-md', | ||
| theme_class='mzp-t-dark', | ||
| body_class=None, | ||
| media_class='mzp-l-split-h-center mzp-l-split-v-center', | ||
| ) %} | ||
| <div class="mzp-c-wordmark mzp-t-wordmark-lg mzp-t-product-firefox"></div> | ||
| <h2 class="c-mr106-title">{{ mr_promo_title_fx }}</h2> | ||
| <p class="c-mr106-body">{{ mr_promo_body_fx }}</p> | ||
| <div class="c-mr106-cta"> | ||
| <div class="show-mobile"> | ||
| <a class="mzp-c-button mzp-t-product mzp-t-dark mzp-t-xl" href="{{ url('firefox.set-as-default') }}" data-cta-text="Make Firefox your default browser" data-cta-type="button">{{ mr_promo_cta_fx_mobile }}</a> | ||
| </div> | ||
| <div class="show-desktop"> | ||
| <a class="mzp-c-button mzp-t-product mzp-t-dark mzp-t-xl" href="{{ url('firefox.browsers.mobile.index') }}" data-cta-type="link" data-cta-text="Get Firefox mobile" data-cta-position="MR Promo">{{ mr_promo_cta_fx_desktop }}</a> | ||
| </div> | ||
| </div> | ||
| {% endcall %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| // 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/logos/wordmark'; | ||
| @import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-firefox'; | ||
|
|
||
| .mr106-home-hero { | ||
| .mzp-c-split-bg { | ||
| background-color: $color-violet-60; | ||
| } | ||
|
|
||
| // Override Protocol spacing | ||
| &.mzp-t-split-nospace { | ||
| padding-top: 0; | ||
| padding-bottom: 0; | ||
| } | ||
|
|
||
| // Override Protocol wordmark | ||
| .mzp-c-wordmark.mzp-t-wordmark-lg.mzp-t-product-firefox { | ||
| background-image: url('/media/img/home/2022/logo-word-hor-white.svg'); | ||
| background-position: center top; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
|
|
||
| @media #{$mq-md} { | ||
| background-position: left top; | ||
| margin-left: 0; | ||
| margin-right: 0; | ||
| } | ||
| } | ||
|
|
||
| // Override Protocol button | ||
| .mzp-c-button.mzp-t-product { | ||
| background-color: $color-white; | ||
| border-color: $color-white; | ||
| color: $color-black; | ||
| text-align: center; | ||
|
|
||
| &:hover, | ||
| &:focus { | ||
| background-color: $color-violet-50; | ||
| border-color: $color-white; | ||
| color: $color-white; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .c-mr106-title { | ||
| @include font-firefox; | ||
| @include text-title-sm; | ||
|
|
||
| @media #{$mq-lg} { | ||
| @include font-size(48px); | ||
| } | ||
|
|
||
| @media #{$mq-xl} { | ||
| @include font-size(64px); | ||
| } | ||
| } | ||
|
|
||
| .c-mr106-body { | ||
| @include text-body-lg; | ||
| } | ||
|
|
||
| // Hide mobile content by default | ||
| .show-mobile { | ||
| display: none; | ||
| } | ||
|
|
||
| // Hide Firefox content by default | ||
| .show-firefox { | ||
| display: none; | ||
| } | ||
|
|
||
| // Show mobile content on mobile, hide desktop content | ||
| .ios, | ||
| .android { | ||
| .show-desktop { | ||
| display: none; | ||
| } | ||
|
|
||
| .show-mobile { | ||
| display: block; | ||
| } | ||
| } | ||
|
|
||
| // Show Firefox content in Firefox, hide non-Firefox content | ||
| .is-firefox { | ||
| .show-firefox { | ||
| display: block; | ||
| } | ||
|
|
||
| .show-not-firefox { | ||
| display: none; | ||
| } | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.