Migrate /firefox/new_tab_learn_more to Bedrock (#11013)

* Set up new tab learn more page (Fixes#10757)

* Finish up new tab for pocket

* PR fixes

* change entrypoint for pocket fxa

* update link color

bedrock/externalpages/templates/externalpages/pocket/firefox/new-tab-learn-more.html

@@ -0,0 +1,99 @@
+{#
+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 "externalpages/pocket/base.html" %}
+
+{% from "macros-protocol.html" import split with context %}
+
+{% block pocket_css %}
+{{ css_bundle('pocket-new-tab') }}
+{% endblock %}
+
+{% block page_title %}Learn More{% endblock page_title %}
+
+{% block content %}
+<header class="new-tab-header">
+  <div class="mzp-c-logo mzp-t-logo-xs mzp-t-product-family">Firefox</div>
+  <div class="mzp-c-logo mzp-t-logo-xs mzp-t-product-pocket">Pocket</div>
+  <p>Pocket is part of the Firefox family</p>
+</header>
+<section>
+  {% call split(
+  block_class='mzp-l-split-center-on-sm-md new-tab-section top',
+  media_class='mzp-l-split-h-center',
+  image_url='img/externalpages/pocket/new-tab/pocket-list.png',
+  )%}
+    <p class="section-top-header-lede">POCKET FOR FIREFOX</p>
+    <h2 class="new-tab-section-header top">Build your personal library of fascinating reads.</h2>
+    <p class="new-tab-section-body top">Included inside Firefox, the <span class="pocket-logo-inline">Pocket Logo</span> button lets you save articles from across the web and read them in a quiet, private space.</p>
+     {{ pocket_fxa_button(entrypoint='pocket', class_name='new-tab-pocket-cta', button_text='<span class="mzp-c-logo mzp-t-logo-sm mzp-t-product-family"></span>Activate Pocket in Firefox', optional_parameters={'s': 'fflearnmore', 'utm_campaign': 'landing-page', 'utm_content': 'page-button'}, optional_attributes={'data-cta-text': 'Activate Pocket', 'data-cta-type': 'activate pocket', 'data-cta-position': 'primary'}) }}
+    <a href="https://getpocket.com/signup" class="sub-cta">More ways to sign up</a>
+  {% endcall %}
+</section>
+<section class="new-tab-section">
+  <h1 class="new-tab-page-header mzp-l-content">Discover the most thought-provoking stories out there, curated by Pocket.</h1>
+  <section
+    class="mzp-c-split mzp-l-split-center-on-sm-md mzp-t-content-xl mzp-l-split-reversed mzp-t-split-nospace new-tab-section">
+    <div class="mzp-c-split-container">
+      <div class="mzp-c-split-media mzp-l-split-h-center mzp-l-split-media-overflow hidden-gem-media">
+        <img class="mzp-c-split-media-asset" src="/media/img/externalpages/pocket/new-tab/hidden-gem.svg" alt="" loading="eager">
+      </div>
+      <div class="mzp-c-split-body hidden-gem-body">
+        <h2 class="new-tab-section-header">Finding the hidden gems. Respecting your privacy.</h2>
+        <p class="new-tab-section-body">As part of the Firefox family, Pocket surfaces the best articles out there—new perspectives, intriguing deep-dives, timeless classics—and we do this with the same dedication to privacy you’ve come to expect from Firefox and Mozilla. <a href="https://help.getpocket.com/article/1142-firefox-new-tab-recommendations-faq#why">Learn more about how we curate stories.</a></p>
+      </div>
+    </div>
+  </section>
+  {% call split(
+  block_class='mzp-l-split-center-on-sm-md mzp-t-content-xl mzp-t-split-nospace new-tab-section',
+  media_class='mzp-l-split-h-center',
+  image_url='img/externalpages/pocket/new-tab/fortress.svg',
+  )%}
+    <h2 class="new-tab-section-header">Your data stays private. Always.</h2>
+    <p class="new-tab-section-body">In addition to dishing up captivating stories, we also show you relevant, highly-vetted content from select sponsors. Rest assured, your browsing data never leaves your personal copy of Firefox—we don’t see it, and our sponsors don’t either. Want more details? Here’s the full scoop on <a href="https://help.getpocket.com/article/1142-firefox-new-tab-recommendations-faq#personalized">how privacy works in Pocket.</a></p>
+  {% endcall %}
+  {% call split(
+  block_class='mzp-l-split-center-on-sm-md mzp-t-content-lg mzp-l-split-reversed mzp-t-split-nospace new-tab-section',
+  media_class='mzp-l-split-h-center',
+  body_class="new-tab-books-body",
+  image_url='img/externalpages/pocket/new-tab/books.svg',
+  )%}
+    <h2 class="new-tab-section-header">Fuel your mind with even more fascinating stories.</h2>
+    <p class="new-tab-section-body">Check out Pocket’s <a href="https://getpocket.com/explore">Must Reads</a> for some of the best articles on the web. And get thought-provoking stories delivered to you daily by subscribing to <a href="https://getpocket.com/explore/pocket-hits-signup">Pocket’s newsletter</a>.</p>
+  {% endcall %}
+  {% call split(
+  block_class='mzp-l-split-center-on-sm-md mzp-t-content-xl mzp-t-split-nospace new-tab-section',
+  media_class='mzp-l-split-h-center',
+  image_url='img/externalpages/pocket/new-tab/lounge.svg',
+  )%}
+    <h2 class="new-tab-section-header">Save in Pocket & read on your own time.</h2>
+    <p class="new-tab-section-body">Built right into Firefox, Pocket also lets you save stories and come back to them when you’re ready.</p>
+    <p class="new-tab-section-body"><a href="https://getpocket.com/firefox_learnmore">Activate your account</a>, and then the next time you see an article you want to save, click the Pocket icon in the toolbar.</p>
+  {% endcall %}
+</section>
+<section class="mzp-l-content">
+  <img class="details-img" src="{{ static('img/externalpages/pocket/new-tab/sign.svg') }}" />
+  <div>
+    <h2 class="new-tab-section-header">You make the call.</h2>
+    <div class="helpful-links-wrapper">
+      <p class="new-tab-section-body">It’s easy to turn off Pocket’s recommendations and remove them from your new tab page. But remember: if you don’t like today’s stories, there’s always tomorrow!</p>
+      <ul class="new-tab-helpful-links">
+        <li><a href="https://help.getpocket.com/article/1142-firefox-new-tab-recommendations-faq">Frequently asked questions</a></li>
+        <li><a href="https://getpocket.com/privacy">Privacy Policy</a></li>
+        <li><a href="https://getpocket.com/tos">Terms of service</a></li>
+        <li><a href="https://getpocket.com/sponsor">Sponsorship opportunities</a></li>
+      </ul>
+    </div>
+  </div>
+</section>
+<section class="grass-graphic">
+  <img class="left-grass" src="{{ static('img/externalpages/pocket/new-tab/grass-footer-left.png') }}" />
+  <img class="right-grass" src="{{ static('img/externalpages/pocket/new-tab/grass-footer-right.png') }}" />
+</section>
+<footer class="new-tab-footer mzp-t-dark">
+  <span class="mzp-c-wordmark mzp-t-wordmark-xs mzp-t-product-pocket">Pocket</span>
+</footer>
+{% endblock %}

bedrock/externalpages/urls.py

@@ -15,4 +15,5 @@ urlpatterns = (
     page("pocket/edge", "externalpages/pocket/edge.html"),
     page("pocket/welcome", "externalpages/pocket/welcome.html"),
     page("pocket/contact-info", "externalpages/pocket/contact-info.html"),
+    page("pocket/firefox/new_tab_learn_more", "externalpages/pocket/firefox/new-tab-learn-more.html"),
 )

media/css/externalpages/pocket/components/new-tab-learn-more.scss

@@ -0,0 +1,298 @@
+// 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/split';
+@import '~@mozilla-protocol/core/protocol/css/base/elements/containers';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-family';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-pocket';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-pocket';
+
+@import '../utils/variables';
+
+// * -------------------------------------------------------------------------- */
+// Page Header
+
+.new-tab-header {
+    @include text-body-xs;
+    align-items: center;
+    background-color: $color-black;
+    color: $color-white-10;
+    display: flex;
+    font-family: $font-sans;
+    height: 50px;
+    justify-content: center;
+    padding: 0 $spacing-md;
+
+    * {
+        margin-left: $spacing-sm;
+        margin-right: $spacing-sm;
+    }
+
+    .mzp-t-logo-xs {
+        height: 20px;
+        margin-bottom: 0;
+        width: 20px;
+
+        &.mzp-t-product-family {
+            position: relative;
+            overflow: visible;
+
+            &::before {
+                content: '|';
+                position: absolute;
+                text-indent: 0;
+                right: -10px;
+            }
+        }
+
+        &.mzp-t-product-pocket {
+            margin-top: $spacing-xs;
+        }
+    }
+}
+
+// * -------------------------------------------------------------------------- */
+// Styles for sections + overriding some protocol styles to work well with pocket images
+.new-tab-section {
+    font-family: $font-sans;
+
+    &.top {
+        background-color: $color-background-grey-10;
+    }
+
+    &.mzp-t-split-nospace {
+        padding-top: 0;
+    }
+}
+
+.section-top-header-lede {
+    @include text-body-sm;
+    color: $color-text-grey;
+    margin-bottom: $spacing-xs;
+    margin-top: 0;
+    text-align: center;
+
+    @media #{$mq-lg} {
+        text-align: left;
+    }
+}
+
+.new-tab-section-header {
+    @include text-title-2xs;
+    font-family: $font-sans-alt;
+    text-align: left;
+
+    &.top {
+        @include text-title-sm;
+        font-family: $font-sans-alt;
+        font-weight: 500;
+        margin-bottom: $spacing-xs;
+        margin-top: 0;
+        text-align: center;
+
+        @media #{$mq-lg} {
+            text-align: left;
+        }
+    }
+}
+
+.new-tab-section-body {
+    @include text-body-md;
+    text-align: left;
+
+    &.top {
+        @include text-body-xl;
+        text-align: center;
+
+        @media #{$mq-lg} {
+            text-align: left;
+        }
+    }
+
+    .pocket-logo-inline {
+        @include image-replaced;
+        background: url('/media/img/externalpages/pocket/new-tab/pocket-logo-inline.svg') no-repeat;
+        display: inline-block;
+        height: 20px;
+        vertical-align: middle;
+        width: 20px;
+    }
+
+    a {
+        color: $color-button-red-10;
+        cursor: pointer;
+        text-decoration: underline;
+
+        &:hover,
+        &:focus {
+            color: $color-text-primary;
+        }
+    }
+}
+
+.new-tab-pocket-cta {
+    @include text-body-xl;
+    background-color: $color-button-red-10;
+    border-radius: $border-radius-sm;
+    color: $color-white;
+    cursor: pointer;
+    display: inline-block;
+    line-height: 1;
+    padding: $spacing-md 36px $spacing-md $spacing-lg;
+    text-align: center;
+    text-decoration: none;
+    transition: all 0.15s ease-out;
+
+    .mzp-t-logo-sm {
+        display: inline-block;
+        margin-bottom: 0;
+        margin-right: $spacing-sm;
+        margin-top: $spacing-xs;
+        vertical-align: middle;
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+        background-color: #901424;
+    }
+}
+
+.sub-cta {
+    @include text-body-sm;
+    color: $color-text-primary;
+    cursor: pointer;
+    display: block;
+    margin-top: $spacing-sm;
+    text-align: center;
+    text-decoration: underline;
+
+    &:hover,
+    &:focus,
+    &:active {
+        color: $color-action-primary;
+    }
+
+    @media #{$mq-lg} {
+        text-align: left;
+    }
+}
+
+.new-tab-page-header {
+    @include text-title-sm;
+    font-family: $font-sans-alt;
+    font-weight: 500;
+    margin-bottom: 0;
+    padding-bottom: 0;
+    text-align: center;
+}
+
+.hidden-gem-body {
+    max-width: 425px;
+}
+
+.hidden-gem-media {
+    width: 125%;
+    margin-left: -25% !important;
+}
+
+// override protocol style because of the shape of this image
+.mzp-c-split-media + .new-tab-books-body {
+    margin-top: 0;
+}
+
+.helpful-links-wrapper {
+    display: block;
+    @media #{$mq-md} {
+        display: flex;
+
+        .new-tab-section-body {
+            max-width: 425px;
+        }
+    }
+}
+
+.new-tab-helpful-links {
+    padding: 0;
+
+    li a {
+        color: $color-button-red-10;
+        cursor: pointer;
+        font-family: $font-sans;
+        text-decoration: underline;
+
+        &:hover,
+        &:focus {
+            color: $color-text-primary;
+        }
+    }
+
+    @media #{$mq-md} {
+        margin-left: 50px;
+    }
+}
+
+// * -------------------------------------------------------------------------- */
+// Footer
+.new-tab-footer {
+    align-items: center;
+    background-color: $color-black;
+    display: flex;
+    height: 50px;
+    padding: 0 $spacing-lg;
+    width: 100%;
+
+    .mzp-c-wordmark {
+        margin-bottom: 0;
+    }
+}
+
+// * -------------------------------------------------------------------------- */
+// Rules for overlowed images
+.grass-graphic {
+    height: 200px;
+    position: relative;
+    width: 100%;
+
+    .left-grass {
+        max-width: 100%;
+        position: absolute;
+        left: -20px;
+
+        @media #{$mq-md} {
+            top: -50px;
+            width: 653px;
+        }
+    }
+
+    .right-grass {
+        display: none;
+        position: absolute;
+
+        @media #{$mq-md} {
+            display: initial;
+            right: -20px;
+            top: -75px;
+            width: 220px;
+        }
+    }
+}
+
+.details-img {
+    height: 500px;
+    margin-bottom: -175px;
+    width: 765px;
+
+    @media #{$mq-md} {
+        width: 900px;
+    }
+    @media #{$mq-lg} {
+        width: 100%;
+    }
+}

media/css/externalpages/pocket/utils/_variables.scss

@@ -1,8 +1,9 @@
 // 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/.
-
+$color-black: #000;
 $color-white: #fff;
+$color-white-10: #f2f2f2;
 $color-divider: #d9d9d9;
 $color-action-primary: #008078;
 $color-action-primary-hover: #004d48;
@@ -11,8 +12,10 @@ $color-text-secondary: #666;
 $color-text-grey: #555;
 $color-text-dark-grey: #333;
 $color-button-red: #e7132f;
+$color-button-red-10: #ef4056;
 $color-text-cyan: #5dcfca;
 $color-background-grey: #f0f0f0;
+$color-background-grey-10: #f4f4f4;
 $color-nav-current: #e0f0ef;
 $box-shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.08);
 $mq-md: '(min-width: 720px)';

media/img/externalpages/pocket/new-tab/pocket-logo-inline.svg

@@ -0,0 +1 @@
+<svg aria-labelledby="save-icon-top-title " fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M2 5a2 2 0 012-2h16a2 2 0 012 2H2zm2 0H2v6c0 5.523 4.477 10 10 10s10-4.477 10-10V5h-2v6a8 8 0 11-16 0V5z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M7.293 9.293a1 1 0 011.414 0L12 12.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path><title id="save-icon-top-title">save icon</title></svg>

media/static-bundles.json

@@ -988,6 +988,13 @@
       ],
       "name": "pocket-contact-info"
     },
+    {
+      "files": [
+        "css/externalpages/pocket/style.scss",
+        "css/externalpages/pocket/components/new-tab-learn-more.scss"
+      ],
+      "name": "pocket-new-tab"
+    },
     {
       "files": [
         "css/careers/protocol.min.scss",