Permalink
Switch branches/tags
Find file Copy path
447 lines (413 sloc) 20.6 KB
{# 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 http://mozilla.org/MPL/2.0/. #}
{% add_lang_files "firefox/hub/home-quantum" "firefox/shared" %}
{% extends "firefox/base-pebbles.html" %}
{# Bug 1438302 Avoid duplicate content for en-CA and en-GB pages. #}
{% if LANG == 'en-CA' %}
{% set title_suffix = 'Firefox (CA)' %}
{% elif LANG == 'en-GB' %}
{% set title_suffix = 'Firefox (UK)' %}
{% else %}
{% set title_suffix = 'Firefox' %}
{% endif %}
{% block page_title %}{{ _('The new, fast browser for Mac, PC and Linux') }} | {{ title_suffix }}{% endblock %}
{% block page_desc %}{{ _('Responsive engine, less memory usage and packed with features. Download for desktop now.') }}{% endblock %}
{% block page_css %}
{{ css_bundle('firefox-home') }}
{% if switch('firefox_home_fbvideochat_funnelcake', ['en-US']) %}
{{ css_bundle('firefox-home-fbvideochat-funnelcake') }}
{% endif %}
{% endblock %}
{% block body_id %}firefox-home{% endblock %}
{% block site_header %}
{% if switch('firefox_home_fbvideochat_funnelcake', ['en-US']) %}
<div id="fbvideochat-banner" class="fbvideochat-banner">
<div class="content">
<div id="fbvideochat-close" class="fbvideochat-close"><button type="button"><span>Close</span></button></div>
<div class="header-content-wrapper">
<div class="header-content">
<p>Facebook Video Messenger calls are easy with</p>
<img class="banner-logo delay-load" src="{{ static('img/placeholder.png') }}" data-src="{{ static('img/logos/firefox/logo-quantum-wordmark-large.png') }}" data-srcset="{{ static('img/logos/firefox/logo-quantum-wordmark-large-high-res.png') }}" alt="" width="185" height="69" />
{{ download_firefox(dom_id='download-fbvideochat', alt_copy=_('Download now'), download_location='banner cta') }}
</div>
<div class="header-image-wrapper">
<figure class="header-image">
<img class="delay-load" src="{{ static('img/placeholder.png') }}" data-src="{{ static('img/firefox/home/fbvideochat-screenshot.jpg') }}" data-srcset="{{ static('img/firefox/home/fbvideochat-screenshot-high-res.jpg') }}" alt="" width="810" height="433" />
<figcaption>Launch your video experience by downloading Firefox.</figcaption>
</figure>
</div>{#-- /.header-image-wrapper --#}
</div>{#-- /.header-content-wrapper --#}
</div>{#-- /.content --#}
</div>{#-- /.fbvideochat-banner --#}
{% endif %}
{{ super() }}
{% endblock %}
{% block content %}
{% with current='desktop' %}
{% include 'firefox/includes/hub/sub-nav.html' %}
{% endwith %}
<main role="main">
<header class="page-section main-header-section">
<div class="content">
<div class="header-content">
{% if LANG.startswith('en') %}
<h1>The new <strong>Firefox</strong></h1>
{% else %}
<h1>{{ _('The New Firefox') }}</h1>
{% endif %}
<h2>{{ _('Meet Firefox Quantum.') }}</h2>
<h3>{{ _('Fast for good.') }}</h3>
{{ download_firefox(dom_id='download-intro', alt_copy=_('Download now'), download_location='primary cta') }}
</div>
<div class="header-image">
{{ high_res_img('firefox/home/hero-laptop.png', {'alt': '', 'width': '903', 'height': '509'}) }}
</div>
</div>
</header>
<section class="page-section whats-new-section" data-scroll-tracking="whats new">
<div class="content">
<div class="whats-new-content">
<h2 class="section-title">{{ _('What’s new?') }}</h2>
<ul>
<li>{{ _('A powerful, new engine that’s built for rapidfire performance.') }}</li>
<li>{{ _('Better, faster page loading that uses less computer memory.') }}</li>
<li>{{ _('Gorgeous design and smart features for intelligent browsing.') }}</li>
</ul>
<p class="quote">
{{ _('“Faster and even more minimalist, Firefox Quantum makes Chrome look old.”') }} —
<cite><a rel="external" href="https://www.digitaltrends.com/web/firefox-quantum-hands-on-review/">{{ _('(Digital Trends)') }}</a></cite>
</p>
</div>
<div class="whats-new-image">
{{ high_res_img('firefox/home/new-tab.png', {'alt': _('Screenshot of the redesigned Firefox new-tab page.'), 'width': '849', 'height': '540'}) }}
</div>
</div>
</section>
<section class="page-section key-features-section">
<div class="key-feature" data-scroll-tracking="2x Faster">
<div class="content">
<div class="key-feature-container">
<div class="key-feature-content">
{% if l10n_has_tag('update_faster_copy') %}
<h2 class="section-title">{{ _('Now 2x faster') }}</h2>
<p>
{% trans url='https://blog.mozilla.org/firefox/de/firefox-quantum-superschnell-und-schont-den-speicher/' if LANG == 'de' else 'https://blog.mozilla.org/firefox/quantum-performance-test/' %}
Crazy <a href="{{ url }}">powerful browser engine</a>? Check. Less time waiting around for pages to load?
Also, check. Firefox Quantum is twice as fast as Firefox was before.
{% endtrans %}
</p>
{% else %}
<h2 class="section-title">{{ _('2x Faster') }}</h2>
<p>
{% trans url='https://blog.mozilla.org/firefox/de/firefox-quantum-superschnell-und-schont-den-speicher/' if LANG == 'de' else 'https://blog.mozilla.org/firefox/quantum-performance-test/' %}
Crazy <a href="{{ url }}">powerful browser engine</a>? Check. Less time waiting around for pages to load?
Also, check. Get the best Firefox yet.
{% endtrans %}
</p>
{% endif %}
</div>
<div class="key-feature-media video">
<div class="moz-video-container">
<button class="moz-video-button" type="button" aria-controls="faster-video">{{ _('Watch the video') }}</button>
<div class="video-container">
<video id="faster-video" preload="none" controls poster="{{ static('img/firefox/home/quantum-vs-chrome-poster.png') }}" data-ga-label="Quantum vs Chrome Video">
<source src="https://assets.mozilla.net/video/firefox-home/quantum-vs-chrome.webm" type="video/webm">
<source src="https://assets.mozilla.net/video/firefox-home/quantum-vs-chrome.ogv" type="video/ogg; codecs='theora, vorbis'">
<source src="https://assets.mozilla.net/video/firefox-home/quantum-vs-chrome.mp4" type="video/mp4">
<a href="https://www.youtube.com/watch?v=YIywpvHewc0">
<img src="{{ static('img/firefox/home/quantum-vs-chrome-poster.png') }}" alt="">
</a>
</video>
</div>{#-- /.video-container --#}
</div>{#-- /.moz-video-container --#}
</div>{#-- /.key-feature-media --#}
</div>{#-- /.key-feature-content --#}
</div>{#-- /.content --#}
</div>
<div class="key-feature" data-scroll-tracking="30% lighter than chrome">
<div class="content">
<div class="key-feature-container">
<div class="key-feature-content">
<h2 class="section-title">{{ _('30% lighter than Chrome') }}</h2>
<p>
{% trans url='https://blog.mozilla.org/firefox/de/firefox-quantum-superschnell-und-schont-den-speicher/' if LANG == 'de' else 'https://blog.mozilla.org/firefox/quantum-performance-test/' %}
<a href="{{ url }}">Less memory usage</a> means more space for your computer to keep running smoothly.
Your other programs will thank you.
{% endtrans %}
</p>
</div>
<div class="key-feature-media image">
{{ high_res_img('firefox/home/less-memory.png', {'alt': '', 'width': '645', 'height': '400'}) }}
</div>
</div>
</div>
</div>
<div class="key-feature" data-scroll-tracking="Smooth browsing">
<div class="content">
<div class="key-feature-container">
<div class="key-feature-content">
<h2 class="section-title">{{ _('Smooth browsing') }}</h2>
<p>
{% trans %}
Whether you’ve opened 10 or 1000, switching between tabs is faster than ever
with Firefox’s new, responsive engine.
{% endtrans %}
</p>
</div>
<div class="key-feature-media image">
{{ high_res_img('firefox/home/smooth-browsing.png', {'alt': _('Firefox screenshot showing many open tabs and browser windows running simultaneously.'), 'width': '645', 'height': '400'}) }}
</div>
</div>
</div>
</div>
</section>
<section class="page-section switch-section" data-scroll-tracking="Switch from Chrome to Firefox in just a few minutes">
<div class="content">
<div class="section-content">
{% if l10n_has_tag('switch_cta_021218') %}
<h2 class="section-title">{{ _('Switch from Chrome to Firefox in just a few minutes') }}</h2>
<p>{{ _('Switching to Firefox is fast, easy and risk-free. Firefox imports your bookmarks, autofills, passwords and preferences from Chrome.') }}</p>
{% else %}
<h2 class="section-title">{{ _('Moving browsers? We got you.') }}</h2>
<p>{{ _('Instantly import your online info and favorites from any other browser.') }}</p>
{% endif %}
<a href="{{ url('firefox.switch') }}">{{ _('Learn more') }}</a>
</div>
<div class="section-media">
<a href="{{ url('firefox.switch') }}">
{{ high_res_img('firefox/home/switch-to-firefox.png', {'alt': '', 'width': '643', 'height': '377'}) }}
</a>
</div>
</div>
</section>
<section class="page-section privacy-section" data-scroll-tracking="Seriously Private Browsing">
<div class="content">
<header>
<h2 class="section-title">{{ _('Seriously Private Browsing') }}</h2>
<p class="tagline">{{ _('The most powerful private browsing mode with added tracking protection.') }}</p>
</header>
<ul>
<li class="private-browsing">
<h3>{{ _('Private Browsing') }}</h3>
<p>
{% trans %}
Firefox blocks online trackers while you browse and won’t remember
your history after you’re done.
{% endtrans %}
</p>
</li>
<li class="tracking-protection">
<h3>{{ _('Tracking Protection') }}</h3>
<p>
{% trans %}
Some ads have hidden trackers that follow you online. Rude. We know.
That’s why our powerful tool stops them cold.
{% endtrans %}
</p>
</li>
<li class="faster-loading">
<h3>{{ _('Faster Page Loading') }}</h3>
<p>
{% trans url='https://blog.mozilla.org/firefox/de/die-studie-zum-schutz-vor-aktivitatsverfolgung/' if LANG == 'de' else 'https://blog.mozilla.org/firefox/tracking-protection-study/' %}
By blocking some ads and scripts that bog down browsing,
<a href="{{ url }}">pages load up to 44% faster</a>. Now that’s a win-win.
{% endtrans %}
</p>
</li>
</ul>
<div class="privacy-section-media">
{{ high_res_img('firefox/home/private-browsing.png', {'alt': '', 'width': '502', 'height': '325'}) }}
{{ high_res_img('firefox/home/tracking-protection.png', {'alt': '', 'width': '503', 'height': '305'}) }}
</div>
</div>
</section>
<section class="page-section features-scroller-section">
<div class="content">
<div class="features-scroller-container">
<header class="features-scroller-header">
<div class="features-scroller-header-container">
<h2 class="section-title">{{ _('Firefox Quantum features') }}</h2>
<nav class="features-scroller-nav" data-current="video-screenshots">
<ul>
<li><a class="current" href="#video-screenshots">{{ _('Screenshots') }}</a></li>
<li><a href="#video-pocket">{{ _('Pocket') }}</a></li>
<li><a href="#video-gaming">{{ _('Gaming & VR') }}</a></li>
<li><a href="#video-library">{{ _('Library') }}</a></li>
</ul>
<button class="previous" type="button">{{ _('Previous') }}</button>
<button class="next" type="button">{{ _('Next') }}</button>
</nav>
</div>
</header>
<div class="features-scroller-content">
<div id="video-screenshots" class="feature-content screenshots" data-ga-label="Features: Screenshots">
<figure>
<video preload="none" muted controls playsinline poster="{{ static('img/firefox/home/video-screenshots-poster.png') }}" data-ga-label="Features: Screenshots">
<source src="https://assets.mozilla.net/video/firefox-home/screenshots.webm" type="video/webm">
<source src="https://assets.mozilla.net/video/firefox-home/screenshots.ogv" type="video/ogg; codecs='theora, vorbis'">
<source src="https://assets.mozilla.net/video/firefox-home/screenshots.mp4" type="video/mp4">
<img src="{{ static('img/firefox/home/video-screenshots-poster.png') }}" alt="">
</video>
</figure>
<figcaption>
<h2>{{ _('Screenshots') }}</h2>
<p>
{% trans %}
Uncomplicate screenshots. Take and share them directly from Firefox. That means no more
searching for mysterious file names on your computer.
{% endtrans %}
</p>
</figcaption>
</div>
<div id="video-pocket" class="feature-content pocket" data-ga-label="Features: Pocket">
<figure>
<video preload="none" muted controls playsinline poster="{{ static('img/firefox/home/video-pocket-poster.png') }}" data-ga-label="Features: Pocket">
<source src="https://assets.mozilla.net/video/firefox-home/pocket.webm" type="video/webm">
<source src="https://assets.mozilla.net/video/firefox-home/pocket.ogv" type="video/ogg; codecs='theora, vorbis'">
<source src="https://assets.mozilla.net/video/firefox-home/pocket.mp4" type="video/mp4">
<img src="{{ static('img/firefox/home/video-pocket-poster.png') }}" alt="">
</video>
</figure>
<figcaption>
<h2>{{ _('Pocket') }}</h2>
<p>
{% trans %}
Built right into the toolbar, it’s the ultimate save-for-later feature. View your articles,
videos and pages across any device.
{% endtrans %}
</p>
</figcaption>
</div>
<div id="video-gaming" class="feature-content gaming-vr" data-ga-label="Features: Gaming & VR">
<figure>
<video preload="none" muted controls playsinline poster="{{ static('img/firefox/home/video-gaming-poster.png') }}" data-ga-label="Features: Gaming & VR">
<source src="https://assets.mozilla.net/video/firefox-home/gaming.webm" type="video/webm">
<source src="https://assets.mozilla.net/video/firefox-home/gaming.ogv" type="video/ogg; codecs='theora, vorbis'">
<source src="https://assets.mozilla.net/video/firefox-home/gaming.mp4" type="video/mp4">
<img src="{{ static('img/firefox/home/video-gaming-poster.png') }}" alt="">
</video>
</figure>
<figcaption>
{# L10n: VR can be spelled out as "Virtual Reality" if clearer. #}
<h2>{{ _('Gaming & VR') }}</h2>
<p>
{% trans %}
Engineered for next-gen gaming, Firefox has built-in support for WASM and WebVR.
No additional installation needed!
{% endtrans %}
</p>
</figcaption>
</div>
<div id="video-library" class="feature-content library" data-ga-label="Features: Library">
<figure>
<video preload="none" muted controls playsinline poster="{{ static('img/firefox/home/video-bookmarking-poster.png') }}" data-ga-label="Features: Library">
<source src="https://assets.mozilla.net/video/firefox-home/bookmarking.webm" type="video/webm">
<source src="https://assets.mozilla.net/video/firefox-home/bookmarking.ogv" type="video/ogg; codecs='theora, vorbis'">
<source src="https://assets.mozilla.net/video/firefox-home/bookmarking.mp4" type="video/mp4">
<img src="{{ static('img/firefox/home/video-bookmarking-poster.png') }}" alt="">
</video>
</figure>
<figcaption>
<h2>{{ _('Library') }}</h2>
<p>
{% trans %}
Save time! Find all your favorite content like Pocket saves, bookmarks, browsing history,
screenshots and downloads in one spot.
{% endtrans %}
</p>
</figcaption>
</div>
</div>
</div>
</div>
</section>
<section class="page-section customization-section" data-scroll-tracking="Customization Features">
<div class="content">
<h2 class="section-title">{{ _('Customization Features') }}</h2>
<ul>
<li class="extensions">
<h3>{{ _('Extensions') }}</h3>
<p>
{# L10n: Locales can substitute their most popular extensions OR they can use "Personalize Firefox with thousands of extensions like password managers, ad blockers and more." #}
{% trans %}
Customize Firefox with thousands of extensions like LastPass,
uBlock Origin, Evernote and more.
{% endtrans %}
</p>
</li>
<li class="themes">
<h3>{{ _('Themes') }}</h3>
<p>
{% trans %}
Make over Firefox to suit your mood! Choose a new look from
our theme categories or create your own.
{% endtrans %}
</p>
</li>
<li class="toolbar">
<h3>{{ _('Toolbar') }}</h3>
<p>
{% trans %}
Set up Firefox your way. Drag and drop features in and out
of your toolbar for easy access.
{% endtrans %}
</p>
</li>
</ul>
</div>
</section>
<section class="page-section sync-section" data-scroll-tracking="Sync your devices">
<div class="content">
<div class="sync-section-content">
<h2 class="section-title">{{ _('Sync your devices') }}</h2>
<p>
{% trans %}
Seamlessly access passwords, bookmarks and more. Plus, use our Send Tabs feature
to instantly share open tabs between desktop, mobile and tablet.
{% endtrans %}
</p>
</div>
<div class="sync-section-image">
{{ high_res_img('firefox/home/sync.png', {'alt': _('Image of Gif shared from desktop to mobile using the Send Tab feature.'), 'width': '788', 'height': '571'}) }}
</div>
</div>
</section>
<section class="page-section browse-for-good-section" data-scroll-tracking="Browse for good">
<div class="content">
<div class="browse-for-good-section-container">
<div class="browse-for-good-section-content">
<h2 class="section-title">{{ _('Browse for good') }}</h2>
<p>
{% trans %}
Firefox is made by Mozilla, the non-profit champions of a healthy internet.
Mozilla also tackles issues like privacy, misinformation and trolling by
investing in fellowships, campaigns and new technologies designed to make
the internet healthier.
{% endtrans %}
</p>
</div>
</div>
</div>
</section>
<section class="page-section secondary-download-section" data-scroll-tracking="Footer download CTA">
<div class="content">
{% if LANG.startswith('en') %}
<h2>The new <strong>Firefox</strong></h2>
{% else %}
<h2>{{ _('The New Firefox') }}</h2>
{% endif %}
<p>{{ _('Meet Firefox Quantum.') }}</p>
<p>{{ _('Fast for good.') }}</p>
{{ download_firefox(dom_id='footer-download', alt_copy=_('Download now'), download_location='other') }}
</div>
</section>
{% include 'firefox/includes/schemaorg-app.html' %}
</main>
{% endblock %}
{% block js %}
{{ js_bundle('firefox-home') }}
{% if switch('firefox_home_fbvideochat_funnelcake', ['en-US']) %}
{{ js_bundle('firefox-home-fbvideochat-funnelcake') }}
{% endif %}
{% endblock %}