diff --git a/bedrock/externalpages/templates/externalpages/pocket/get-inspired.html b/bedrock/externalpages/templates/externalpages/pocket/get-inspired.html new file mode 100644 index 0000000000..2f0d7b72f1 --- /dev/null +++ b/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' %} + +
+{% 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', + )%} +

Save what inspires you

+

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.

+
+ Get it from the Apple Store + Get it from Google Play Store +
+ {% endcall %} +
+ +
+ {% 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', + )%} +

Special features for focused reading

+

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.

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

Your private reading nook

+

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.

+ {% endcall %} +
+ +
+

+ Start building your personal library now +

+
+ Get it from the Apple Store + Get it from Google Play Store +
+
+ +
+ +
+
+ +
+

Ready for the ultimate Pocket experience? Get Pocket Premium and you’ll have access to our full array of features, including a personal, backed-up copy of everything you save.

+
+
+
+ +{% include 'externalpages/pocket/includes/footer.html' %} + +{% endblock %} diff --git a/bedrock/externalpages/urls.py b/bedrock/externalpages/urls.py index 7bb52615aa..35121bcb5b 100644 --- a/bedrock/externalpages/urls.py +++ b/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"), ) diff --git a/media/css/externalpages/pocket/components/get-inspired.scss b/media/css/externalpages/pocket/components/get-inspired.scss new file mode 100644 index 0000000000..3e116ac3c3 --- /dev/null +++ b/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; + } +} diff --git a/media/css/externalpages/pocket/utils/_variables.scss b/media/css/externalpages/pocket/utils/_variables.scss index 907762440b..d777a7bca9 100644 --- a/media/css/externalpages/pocket/utils/_variables.scss +++ b/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)'; diff --git a/media/img/externalpages/pocket/colorful-diamond.gif b/media/img/externalpages/pocket/colorful-diamond.gif new file mode 100644 index 0000000000..022fd855a0 Binary files /dev/null and b/media/img/externalpages/pocket/colorful-diamond.gif differ diff --git a/media/img/externalpages/pocket/focused-reading.png b/media/img/externalpages/pocket/focused-reading.png new file mode 100644 index 0000000000..165da5ca65 Binary files /dev/null and b/media/img/externalpages/pocket/focused-reading.png differ diff --git a/media/img/externalpages/pocket/reading-nook.png b/media/img/externalpages/pocket/reading-nook.png new file mode 100644 index 0000000000..888f11c84f Binary files /dev/null and b/media/img/externalpages/pocket/reading-nook.png differ diff --git a/media/img/externalpages/pocket/save-inspirations.png b/media/img/externalpages/pocket/save-inspirations.png new file mode 100644 index 0000000000..8cdfbe6afc Binary files /dev/null and b/media/img/externalpages/pocket/save-inspirations.png differ diff --git a/media/static-bundles.json b/media/static-bundles.json index 74ac91dc18..cc961fcef0 100644 --- a/media/static-bundles.json +++ b/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",