Skip to content

Commit 9571b59

Browse files
alexgibsonalexgibson
committed
Add firefox gaming landing page (Fixes mozilla#15920)
1 parent 9201382 commit 9571b59

26 files changed

+826
-0
lines changed

Diff for: ‎bedrock/firefox/templates/firefox/landing/gaming.html

+276
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,276 @@
1+
{#
2+
This Source Code Form is subject to the terms of the Mozilla Public
3+
License, v. 2.0. If a copy of the MPL was not distributed with this
4+
file, You can obtain one at https://mozilla.org/MPL/2.0/.
5+
#}
6+
7+
{% from "macros.html" import google_play_button, apple_app_store_button with context %}
8+
9+
{% extends "firefox/new/desktop/base.html" %}
10+
11+
{% block canonical_urls %}<meta name="robots" content="noindex,follow">{% endblock %}
12+
13+
{% set referrals = '?utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=smi-002' %}
14+
15+
{% set win_custom_download_id = 'partner-firefox-release-smi-smi-002-stub' %}
16+
{% set mac_custom_download_id = 'partner-firefox-release-smi-smi-002-latest' %}
17+
18+
{% set android_campaign_url = play_store_url('firefox', 'smi-002') %}
19+
{% set ios_campaign_url = app_store_url('firefox', 'smi-002') %}
20+
21+
{% block string_data %}
22+
data-win-custom-id="{{ win_custom_download_id }}"
23+
data-mac-custom-id="{{ mac_custom_download_id }}"
24+
{% endblock %}
25+
26+
{% block page_image %}{{ static('img/firefox/landing/gaming/og.png') }}{% endblock %}
27+
28+
{% block page_css %}
29+
{{ css_bundle('protocol-card') }}
30+
{{ css_bundle('firefox_landing_gaming') }}
31+
{% endblock %}
32+
33+
{% block sub_navigation %}
34+
{% include 'firefox/includes/sub-nav-firefox.html' %}
35+
{% endblock %}
36+
37+
{% block content %}
38+
<main class="main-download" {% if variation %}data-variation="{{ variation }}"{% endif %}>
39+
<section id="desktop-banner" class="c-block t-intro show-else">
40+
<div class="c-block-container">
41+
<div class="c-block-body">
42+
<h1 class="mzp-c-wordmark mzp-t-wordmark-md mzp-t-product-firefox">{{ ftl('firefox-desktop-download-firefox') }}</h1>
43+
<h2>Level up your browser</h2>
44+
<p>No lag, no limits – Firefox is fast, flexible, and optimised for all your gaming needs.</p>
45+
<div class="c-intro-download">
46+
{{ download_firefox(dom_id='download-primary', force_direct=True, download_location='primary cta') }}
47+
48+
<div class="c-intro-download-alt"><a href="{{ url('firefox.all') }}">{{ ftl('firefox-desktop-download-download-options') }}</a></div>
49+
50+
<div class="c-intro-download-alt"><a href="https://support.mozilla.org/products/firefox{{ referrals }}&utm_content=browser-support" rel="external noopener" data-cta-text="Firefox browser support">{{ ftl('firefox-desktop-download-browser-support') }}</a></div>
51+
</div>
52+
</div>
53+
<div class="c-block-media l-v-center">
54+
<div class="c-block-img">
55+
{{ picture(
56+
url='img/firefox/landing/gaming/hero-600.png',
57+
sources=[
58+
{
59+
'media': '(min-width: 688px)',
60+
'srcset': {
61+
'img/firefox/landing/gaming/hero-1000.png': '1000w',
62+
'img/firefox/landing/gaming/hero-800.png': '800w',
63+
'img/firefox/landing/gaming/hero-600.png': '600w',
64+
'img/firefox/landing/gaming/hero-400.png': '400w',
65+
},
66+
'sizes': {
67+
'default': '50vw'
68+
},
69+
'height': '442',
70+
'width': '600'
71+
},
72+
{
73+
'media': '(max-width: 687px)',
74+
'srcset': {
75+
'img/placeholder.png': 'default'
76+
},
77+
'height': '0',
78+
'width': '0'
79+
}
80+
]
81+
)}}
82+
</div>
83+
</div>
84+
</div>
85+
</section>
86+
87+
<section class="t-custom">
88+
<div class="mzp-l-content t-custom-intro">
89+
<h2 class="mzp-c-section-heading">Unlock the full potential of Firefox</h2>
90+
91+
<div class="c-screen">
92+
<div class="c-screenshot">
93+
{{ resp_img(
94+
url='img/firefox/landing/gaming/gamers-600.png',
95+
srcset={
96+
'img/firefox/landing/gaming/gamers-1200.png': '1200w',
97+
'img/firefox/landing/gaming/gamers-1000.png': '1000w',
98+
'img/firefox/landing/gaming/gamers-800.png': '800w',
99+
'img/firefox/landing/gaming/gamers-600.png': '600w',
100+
'img/firefox/landing/gaming/gamers-400.png': '400w',
101+
},
102+
sizes={
103+
'(min-width: 800px)': '600px',
104+
'default': '90vw'
105+
},
106+
optional_attributes={
107+
'width': '600',
108+
'height': '362',
109+
'loading': 'lazy'
110+
}
111+
) }}
112+
</div>
113+
</div>
114+
</div>
115+
116+
<div class="mzp-l-content mzp-t-content-xl t-custom-list">
117+
<ul class="mzp-l-columns mzp-t-columns-three">
118+
<li>
119+
<h3 class="mzp-u-title-xs">Play and watch</h3>
120+
<p>Watch your favourite content while keeping your hands free for the game with Picture-in-Picture – multitasking made easy.</p>
121+
</li>
122+
123+
<li>
124+
<h3 class="mzp-u-title-xs">Customise your navigation</h3>
125+
<p>Switch to Dark Mode for a calming, eye-friendly experience, or choose themes you love.</p>
126+
</li>
127+
128+
<li>
129+
<h3 class="mzp-u-title-xs">Enjoy the fastest Firefox ever</h3>
130+
<p>Firefox loads pages quickly and efficiently, so you never miss a beat in-game or online.</p>
131+
</li>
132+
</ul>
133+
</div>
134+
</section>
135+
136+
<section class="mzp-l-content mzp-t-content-xl t-extensions">
137+
<h2 class="mzp-c-section-heading">Transform your play with custom tools</h2>
138+
139+
<div class="mzp-l-columns mzp-t-columns-three">
140+
141+
<div class="t-extensions-item js-animate">
142+
{{ resp_img(
143+
url='img/firefox/landing/gaming/icon-augmented-steam-64.png',
144+
srcset={
145+
'img/firefox/landing/gaming/icon-augmented-steam-128.png': '2x'
146+
},
147+
optional_attributes={
148+
'loading': 'lazy',
149+
'height': '64',
150+
'width': '64'
151+
},
152+
) }}
153+
<h3 class="mzp-u-title-xs">Augmented Steam</h3>
154+
<p>Discover game deals, filter searches, and personalise your profile, all while enjoying the user-friendly interface.</p>
155+
</div>
156+
157+
<div class="t-extensions-item js-animate">
158+
{{ resp_img(
159+
url='img/firefox/landing/gaming/icon-enhancer-64.png',
160+
srcset={
161+
'img/firefox/landing/gaming/icon-enhancer-128.png': '2x'
162+
},
163+
optional_attributes={
164+
'loading': 'lazy',
165+
'height': '64',
166+
'width': '64'
167+
},
168+
) }}
169+
<h3 class="mzp-u-title-xs">Enhancer for YouTube</h3>
170+
<p>Customise your YouTube with a variety of features, from ad-blocking to playback controls tailored to your preferences.</p>
171+
</div>
172+
173+
<div class="t-extensions-item js-animate">
174+
{{ resp_img(
175+
url='img/firefox/landing/gaming/icon-bitwarden-64.png',
176+
srcset={
177+
'img/firefox/landing/gaming/icon-bitwarden-128.png': '2x'
178+
},
179+
optional_attributes={
180+
'loading': 'lazy',
181+
'height': '64',
182+
'width': '64'
183+
},
184+
) }}
185+
<h3 class="mzp-u-title-xs">Bitwarden</h3>
186+
<p>A free, secure password manager that effortlessly syncs across all your devices, ensuring your login credentials are always safe and within arms’ reach.</p>
187+
</div>
188+
</div>
189+
190+
<p class="mzp-u-centered">
191+
<a class="mzp-c-cta-link" href="https://addons.mozilla.org/en-GB/firefox/extensions/{{ referrals }}">See all extensions</a>
192+
</p>
193+
</section>
194+
195+
<section class="t-features">
196+
<div class="mzp-l-content mzp-t-content-xl">
197+
<h2 class="mzp-c-section-heading">More Firefox features</h2>
198+
<div class="mzp-l-columns mzp-t-columns-three">
199+
<div class="t-features-item js-animate">
200+
<img loading="lazy" src="{{ static('img/firefox/landing/gaming/icon-stream.svg') }}" alt="" width="40" height="40">
201+
<h3 class="mzp-u-title-xs">Stream, share, and play</h3>
202+
<ul class="mzp-u-list-styled">
203+
<li>Picture-in-Picture</li>
204+
<li>Curated content on new tab</li>
205+
<li>Share links</li>
206+
</ul>
207+
</div>
208+
209+
<div class="t-features-item js-animate">
210+
<img loading="lazy" src="{{ static('img/firefox/landing/gaming/icon-customize.svg') }}" alt="" width="40" height="40">
211+
<h3 class="mzp-u-title-xs">Customise your browser</h3>
212+
<ul class="mzp-u-list-styled">
213+
<li>Themes</li>
214+
<li>Dark mode</li>
215+
<li>Library of extensions</li>
216+
<li>Adjust search bar settings</li>
217+
<li>Change new tab layout</li>
218+
</ul>
219+
</div>
220+
221+
<div class="t-features-item js-animate">
222+
<img loading="lazy" src="{{ static('img/firefox/landing/gaming/icon-privacy.svg') }}" alt="" width="40" height="40">
223+
<h3 class="mzp-u-title-xs">Secure your personal info</h3>
224+
<ul class="mzp-u-list-styled">
225+
<li>Breached web site alerts</li>
226+
<li>Built-in password manager</li>
227+
<li>Clear history</li>
228+
<li>Form autofill</li>
229+
<li>Automatic updates</li>
230+
</ul>
231+
</div>
232+
</div>
233+
234+
{{ download_firefox(dom_id='download-features', force_direct=True, download_location='features cta') }}
235+
</div>
236+
</section>
237+
238+
<section class="c-support">
239+
{% set questions_attrs = 'href="https://support.mozilla.org/products/firefox%s&utm_content=mozilla-support" rel="external noopener" data-cta-text="Mozilla support"'|safe|format(referrals) %}
240+
{{ ftl('firefox-desktop-download-questions', attrs=questions_attrs) }}
241+
</section>
242+
243+
<aside id="mobile-banner" class="show-android show-ios" data-nosnippet>
244+
<div class="c-mobile mzp-t-dark">
245+
<div class="mzp-l-content">
246+
<div class="c-mobile-text">
247+
<h2 class="mzp-c-wordmark mzp-t-wordmark-md mzp-t-product-firefox">{{ ftl('firefox-desktop-download-firefox-browser') }}</h2>
248+
<h2 class="mzp-u-title-md show-android">{{ ftl('firefox-desktop-download-get-firefox-android') }}</h2>
249+
<h2 class="mzp-u-title-md show-ios">{{ ftl('firefox-desktop-download-get-firefox-ios') }}</h2>
250+
251+
<p>{{ ftl('firefox-desktop-download-download-the-mobile') }}</p>
252+
253+
{% block mobile_primary_cta %}
254+
<div class="show-android">
255+
{{ google_play_button(href=android_campaign_url) }}
256+
</div>
257+
<div class="show-ios">
258+
{{ apple_app_store_button(href=ios_campaign_url) }}
259+
</div>
260+
{% endblock %}
261+
</div>
262+
</div>
263+
</div>
264+
<h2 class="c-desktop">
265+
<a href="#next">{{ ftl('firefox-desktop-download-learn-about-the') }}</a>
266+
</h2>
267+
<span id="next"></span>
268+
</aside>
269+
</main>
270+
271+
{% endblock %}
272+
273+
{% block js %}
274+
{{ js_bundle('firefox_landing_gaming') }}
275+
{{ js_bundle('firefox_partner_build_download') }}
276+
{% endblock %}

Diff for: ‎bedrock/firefox/urls.py

+1
Original file line numberDiff line numberDiff line change
@@ -272,6 +272,7 @@
272272
),
273273
# Issue 15841 - UK influencer campaign
274274
page("firefox/landing/tech/", "firefox/landing/tech.html", ftl_files="firefox/new/desktop", active_locales="en-GB"),
275+
page("firefox/landing/gaming/", "firefox/landing/gaming.html", ftl_files="firefox/new/desktop", active_locales="en-GB"),
275276
)
276277

277278
# Contentful

0 commit comments

Comments
 (0)