Pocket get-inspired page (#11046)

bedrock/externalpages/templates/externalpages/pocket/get-inspired.html

@@ -0,0 +1,81 @@
+{#
+ 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-get-inspired') }}
+{% endblock  %}
+
+{% block page_title %}Get Inspired{% endblock %}
+
+{% block content %}
+
+{% include 'externalpages/pocket/includes/nav.html' %}
+
+<section>
+{% call split(
+  block_class='mzp-l-split-center-on-sm-md',
+  media_class='mzp-l-split-h-center',
+  image_url='img/externalpages/pocket/save-inspirations.png',
+  )%}
+  <h1 class="section-heading">Save what inspires you</h1>
+  <p class="section-lede">Pocket is your save button for the internet. When a story catches your eye anywhere online, save it to Pocket and it’ll go straight to your list, ready for you to dig into when you’re free.</p>
+  <div class="app-store-badges">
+    <a href="https://apps.apple.com/us/app/pocket-save-read-grow/" target="_blank" rel="noopener noreferrer" class="apple-store"><img src="{{ static('img/externalpages/pocket/app-button-apple.png') }}" alt="Get it from the Apple Store"></a>
+    <a href="https://play.google.com/store/apps/details?id=com.ideashower.readitlater.pro" target="_blank" rel="noopener noreferrer" class="google-play-store"><img src="{{ static('img/externalpages/pocket/app-button-google.png') }}" alt="Get it from Google Play Store"></a>
+  </div>
+  {% endcall %}
+</section>
+
+<section>
+  {% call split(
+  block_class='mzp-l-split-center-on-sm-md mzp-l-split-reversed',
+  media_class='mzp-l-split-h-center',
+  image_url='img/externalpages/pocket/focused-reading.png',
+  )%}
+  <h2 class="sub-section-heading">Special features for focused reading</h2>
+  <p class="section-lede">Use the Pocket app to listen to stories with our audio playback option. Customize how you see stories in Pocket with dark mode and font options. Keep track of your saves with tags, and preserve important passages with highlights. You can even read offline.</p>
+  {% endcall %}
+</section>
+
+<section>
+  {% call split(
+  block_class='mzp-l-split-center-on-sm-md',
+  media_class='mzp-l-split-h-center',
+  image_url='img/externalpages/pocket/reading-nook.png',
+  )%}
+  <h2 class="sub-section-heading">Your private reading nook</h2>
+  <p class="section-lede">When you’re ready to dig into what you’ve saved, Pocket provides a quiet, calm space that’s perfect for reading. It strips away all the distractions of the internet — like flashing banners and pop-ups — so you can really focus.</p>
+  {% endcall %}
+</section>
+
+<section class="personal-library">
+  <h2 class="section-heading">
+    Start building your personal library now
+  </h2>
+  <div class="app-store-badges">
+    <a href="https://apps.apple.com/us/app/pocket-save-read-grow/" target="_blank" rel="noopener noreferrer" class="apple-store"><img src="{{ static('img/externalpages/pocket/app-button-apple.png') }}" alt="Get it from the Apple Store"></a>
+    <a href="https://play.google.com/store/apps/details?id=com.ideashower.readitlater.pro" target="_blank" rel="noopener noreferrer" class="google-play-store"><img src="{{ static('img/externalpages/pocket/app-button-google.png') }}" alt="Get it from Google Play Store"></a>
+  </div>
+</section>
+
+<div class="pocket-premium">
+  <a href="https://getpocket.com/premium" target="_blank" rel="external noopener">
+    <div class="pocket-premium-wrapper">
+      <div class="premium-diamond">
+        <img src="{{ static('img/externalpages/pocket/colorful-diamond.gif') }}" alt="">
+      </div>
+      <p>Ready for the ultimate Pocket experience? Get <span>Pocket Premium</span> and you’ll have access to our full array of features, including a personal, backed-up copy of everything you save.</p>
+    </div>
+  </a>
+</div>
+
+{% include 'externalpages/pocket/includes/footer.html' %}
+
+{% endblock %}

bedrock/externalpages/urls.py

@@ -16,4 +16,5 @@ urlpatterns = (
     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"),
+    page("pocket/get-inspired", "externalpages/pocket/get-inspired.html"),
 )

media/css/externalpages/pocket/components/get-inspired.scss

@@ -0,0 +1,120 @@
+// 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/.
+
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/split';
+
+@import '../utils/variables';
+@import '../includes/nav';
+@import '../includes/footer';
+
+$image-path: '/media/img/externalpages/pocket';
+
+.section-heading {
+    @include text-title-sm;
+    font-family: $font-sans-alt;
+    font-weight: 500;
+}
+
+.sub-section-heading {
+    @include text-title-xs;
+    font-family: $font-sans-alt;
+    font-weight: 500;
+}
+
+.section-lede {
+    @include text-body-xl;
+    font-family: $font-sans;
+}
+
+.app-store-badges {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    a {
+        width: 150px;
+        height: 100%;
+
+        &.apple-store {
+            margin-bottom: $spacing-md;
+        }
+
+        img {
+            max-height: 50px;
+            width: 100%;
+        }
+    }
+
+    @media #{$mq-md} {
+        justify-content: flex-start;
+        flex-direction: row;
+
+        .apple-store {
+            margin-bottom: 0 !important;
+            margin-right: $spacing-md;
+        }
+    }
+}
+
+.personal-library {
+    text-align: center;
+    margin: $layout-lg auto;
+
+    .app-store-badges {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        a {
+            width: 210px;
+
+            img {
+                max-height: 100%;
+            }
+        }
+    }
+}
+
+.pocket-premium {
+    margin: $spacing-xl auto;
+    border-top: 1px solid $color-divider;
+    border-bottom: 1px solid $color-divider;
+    padding: $spacing-sm;
+    transition: background-color 0.2s;
+
+    a {
+        text-decoration: none;
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+        background-color: $color-cream;
+    }
+}
+
+.pocket-premium-wrapper {
+    @include text-body-md;
+    display: flex;
+    align-items: center;
+    color: $color-text-primary;
+    font-family: $font-sans;
+    margin: 0 auto;
+    max-width: 930px;
+
+    .premium-diamond {
+        height: 48px;
+        width: 48px;
+        margin-right: $spacing-xl;
+
+        img {
+            height: 100%;
+        }
+    }
+
+    span {
+        font-weight: 600;
+    }
+}

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

@@ -16,6 +16,7 @@ $color-button-red-10: #ef4056;
 $color-text-cyan: #5dcfca;
 $color-background-grey: #f0f0f0;
 $color-background-grey-10: #f4f4f4;
+$color-cream: #fffcf7;
 $color-nav-current: #e0f0ef;
 $box-shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.08);
 $mq-md: '(min-width: 720px)';

media/static-bundles.json

@@ -974,6 +974,13 @@
       ],
       "name": "pocket-about"
     },
+    {
+      "files": [
+        "css/externalpages/pocket/style.scss",
+        "css/externalpages/pocket/components/get-inspired.scss"
+      ],
+      "name": "pocket-get-inspired"
+    },
     {
       "files": [
         "css/externalpages/pocket/style.scss",