Skip to content

Commit d7b8708

Browse files
alexgibsonalexgibson
committed
Add firefox gaming landing page (Fixes mozilla#15920)
1 parent 87f9f94 commit d7b8708

27 files changed

+844
-2
lines changed

‎bedrock/firefox/templates/firefox/landing/gaming.html

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

‎bedrock/firefox/urls.py

+2-1
Original file line numberDiff line numberDiff line change
@@ -270,8 +270,9 @@
270270
"firefox/firefox-20th/index.html",
271271
active_locales=["de", "fr", "en-US", "en-CA", "en-GB"],
272272
),
273-
# Issue 15841 - UK influencer campaign
273+
# Issue 15841, 15920, 5953 - UK influencer campaign pages
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)