Permalink
Switch branches/tags
Find file Copy path
683019d Sep 17, 2018
3 contributors

Users who have contributed to this file

@stephaniehobson @pmac @craigcook
240 lines (224 sloc) 11 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/. -#}
{% extends "base-protocol.html" %}
{% add_lang_files "mozorg/about" %}
{% block page_title %}{{ _('Learn About Mozilla') }}{% endblock %}
{% block page_desc %}
{{ _('Mozilla makes browsers, apps, code and tools that put people before profit. Our mission: Keep the internet open and accessible to all.') }}
{% endblock %}
{% block body_id %}about{% endblock %}
{% block page_css %}
{{ css_bundle('about-en') }}
{% endblock %}
{# TODO: migrate to global macro #}
{% macro card_block(class, tag_label, media_icon, title, ga_title, desc, image_url, include_highres_image, video_url, aspect_ratio, link_url, meta, cta) -%}
<section class="mzp-c-card {% if class %}{{ class }}{% endif %} {% if aspect_ratio %}{{ aspect_ratio }}{% endif %} {% if media_icon %}{{ media_icon }}{% endif %} {% if video_url %}has-video-embed{% endif %}">
<a class="mzp-c-card-block-link" href="{{ link_url }}" data-link-name="{{ ga_title }}" data-link-type="link">
<div class="mzp-c-card-media-wrapper">
{{ lazy_img(image_url=image_url, include_highres_image=include_highres_image, placeholder_url='placeholder.png', optional_attributes={'class': 'mzp-c-card-image'}) }}
</div>
<div class="mzp-c-card-content">
{% if tag_label %}
<div class="mzp-c-card-tag {% if tag_class %}{{ tag_class }}{% endif %}">{{ tag_label }}</div>
{% endif %}
<h2 class="mzp-c-card-title"><span>{{ title }}</span></h2>
{% if desc %}
<p class="mzp-c-card-desc">{{ desc }}</p>
{% endif %}
{% if meta %}
<p class="mzp-c-card-meta">{{ meta }}</p>
{% endif %}
{% if cta %}
<p class="mzp-c-card-cta"><span class="mzp-c-card-cta-text">{{ cta }}</span></p>
{% endif %}
</div>
</a>
{% if video_url %}
<div class="mzp-c-card-video-wrapper hidden">
<figure class="mzp-c-card-video-content">
<video class="mzp-c-card-video" preload="none" controls playsinline data-ga-label="{{ ga_title }}">
<source src="{{ video_url }}.webm" type="video/webm">
<source src="{{ video_url }}.mp4" type="video/mp4">
</video>
<figcaption>
<p>{% if desc %}{{ desc }}{% endif %} <a href="{{ link_url }}">{{ _('Read more') }}</a></p>
</figcaption>
</figure>
</div>
{% endif %}
</section>
{%- endmacro %}
{% block content %}
<section class="mzp-c-hero t-mission">
<div class="mzp-l-content">
<div class="mzp-c-hero-body">
<h1 class="mzp-c-hero-title">{{ _('Mozilla makes browsers, apps, code and tools that put people before profit.') }}</h1>
<div class="mzp-c-hero-desc">
<p>{{ _('Our mission: Keep the internet open and accessible to all.') }}</p>
</div>
<p class="mzp-c-hero-cta">
<a class="mzp-c-button mzp-c-button-primary" href="{{ url('mozorg.mission') }}">{{ _('Read Our Mission') }}</a>
</p>
</div>
</div>
</section>
<div class="t-shade">
<div class="mzp-l-content">
<h1 class="c-page-title">{{ _('Our Mission in Action') }}</h1>
<div class="mzp-l-card-half">
{{ card_block(
class='mzp-c-card-medium',
title=_('Pioneers of The Open Web'),
ga_title='Pioneers of The Open Web',
desc=_('Our leadership has been at the forefront of building a healthier internet since Day 1. What began as an alternative to corporate domination has grown into a global force for good online.'),
image_url='mozorg/about/leaders.jpg',
include_highres_image=True,
aspect_ratio='mzp-has-aspect-3-2',
link_url=url('mozorg.about.leadership')
)}}
{{ card_block(
class='mzp-c-card-medium',
title=_('Firefox: Fast for Good'),
ga_title='Firefox: Fast for Good',
desc=_('When you use the new Firefox, you get a blazing fast experience while supporting Mozilla’s mission to keep the internet healthy, weird and welcoming to all.'),
image_url='mozorg/about/firefox.jpg',
include_highres_image=True,
aspect_ratio='mzp-has-aspect-3-2',
link_url=url('firefox')
)}}
{{ card_block(
class='mzp-c-card-medium',
title=_('Walking Our Privacy Talk'),
ga_title='Walking Our Privacy Talk',
desc=_('When the Facebook breach was revealed, Mozilla had an immediate response – and a Firefox product to support user privacy.'),
image_url='mozorg/about/container.jpg',
include_highres_image=True,
aspect_ratio='mzp-has-aspect-3-2',
link_url='https://blog.mozilla.org/Internetcitizen/2018/06/06/the-today-show-mozilla-firefox-facebook-container/'
)}}
{{ card_block(
class='mzp-c-card-medium',
title=_('Talking Internet Issues IRL'),
ga_title='Talking Internet Issues IRL',
desc=_('In our Webby-winning podcast, IRL, Veronica Belmont gets real about the online issues that affect our real lives, from privacy and filter bubbles to feeding trolls.'),
image_url='mozorg/about/irl.jpg',
include_highres_image=True,
aspect_ratio='mzp-has-aspect-3-2',
link_url='https://irlpodcast.org/'
)}}
</div>
</div>
</div>
<div class="mzp-l-content">
<section class="mzp-c-card-feature mzp-has-aspect-3-2 mzp-l-card-feature-left-half t-foundation">
<div class="mzp-c-card-feature-media-wrapper">
<div class="mzp-c-card-feature-media">
{{ high_res_img('mozorg/about/foundation.jpg', {'alt': '', 'class': 'mzp-c-billboard-image', 'width': '720', 'height': '480'}) }}
</div>
</div>
<div class="mzp-c-card-feature-content">
<div class="mzp-c-card-feature-content-container">
<h2 class="mzp-c-card-feature-title">{{ _('Corporation. Foundation. Not-for-profit.') }}</h2>
<p class="mzp-c-card-feature-desc">{{ _('Mozilla puts people over profit in everything we say, build and do. In fact, there’s a non-profit Foundation at the heart of our enterprise.') }}</p>
<a class="mzp-c-cta-link" href="{{ url('foundation.index') }}">{{ _('Learn about the Mozilla Foundation') }}</a>
</div>
</div>
</section>
<section class="mzp-c-billboard mzp-l-billboard-right">
<div class="mzp-c-billboard-image-container">
{{ high_res_img('home/2018/billboard-healthy-internet.png', {'alt': '', 'class': 'mzp-c-billboard-image', 'width': '346', 'height': '346'}) }}
</div>
<div class="mzp-c-billboard-content">
<div class="mzp-c-billboard-content-container">
<div class="mzp-c-billboard-content-inner">
<h2 class="mzp-c-billboard-title">{{ _('The Mozilla Manifesto') }}</h2>
<p class="mzp-c-billboard-desc">{{ _('The principles we wrote in 1998 still guide us today. And in 2018, we created an addendum to emphasize inclusion, privacy and safety for everyone online.') }}</p>
<a class="mzp-c-cta-link" href="{{ url('mozorg.about.manifesto') }}">{{ _('Read The Manifesto') }}</a>
</div>
</div>
</div>
</section>
</div>
<div class="mzp-l-content">
<section class="mzp-c-hero t-global">
<div class="mzp-l-content">
<div class="mzp-c-hero-body">
<h1 class="mzp-c-hero-title">{{ _('A Global View') }}</h1>
<div class="mzp-c-hero-desc">
{% trans url=url('mozorg.contact.spaces.spaces-landing') %}
With <a href="{{ url }}">offices all over the world</a>, we consider the internet from multiple cultures and contexts.
{% endtrans %}
</div>
</div>
</div>
</section>
<section class="c-cities">
<a class="c-city c-city-sf" href="{{ url('mozorg.contact.spaces.san-francisco') }}">
<h3 class="c-city-title">{{ _('San Francisco') }}</h3>
{# L10n: The number inside the strong tag will be big, bold, and on its own line. Remove the strong tag if you need to put the number in the middle of the phrase #}
<p class="c-city-desc">{{ _('<strong>2000</strong> non-employee guests welcomed each year') }}</p>
</a>
<a class="c-city c-city-berlin" href="{{ url('mozorg.contact.spaces.berlin') }}">
<h3 class="c-city-title">{{ _('Berlin') }}</h3>
{# L10n: The number inside the strong tag will be big, bold, and on its own line. Remove the strong tag if you need to put the number in the middle of the phrase #}
<p class="c-city-desc">{{ _('<strong>500</strong> annual attendees to the Berlin speaker series') }} </p>
</a>
<a class="c-city c-city-taipei" href="{{ url('mozorg.contact.spaces.taipei') }}">
<h3 class="c-city-title">{{ _('Taipei') }}</h3>
{# L10n: The number inside the strong tag will be big, bold, and on its own line. Remove the strong tag if you need to put the number in the middle of the phrase #}
<p class="c-city-desc">{{ _('<strong>400</strong> collaborative visits with Mozilla employees each year.') }}</p>
</a>
<a class="c-city c-city-toronto" href="{{ url('mozorg.contact.spaces.toronto') }}">
<h3 class="c-city-title">{{ _('Toronto') }}</h3>
{# L10n: The number inside the strong tag will be big, bold, and on its own line. Remove the strong tag if you need to put the number in the middle of the phrase #}
<p class="c-city-desc">{{ _('<strong>800</strong> bottles of cold brew coffee consumed yearly.') }}</p>
</a>
</section>
<div class="mzp-l-card-half">
{{ card_block(
class='mzp-c-card-medium',
title=_('Work at Mozilla'),
ga_title='Work at Mozilla',
desc=_('Join a mission-driven organization that builds purpose-driven products.'),
image_url='mozorg/about/careers.jpg',
include_highres_image=True,
aspect_ratio='mzp-has-aspect-3-2',
link_url='https://careers.mozilla.org',
cta=_('Mozilla Careers')
)}}
{{ card_block(
class='mzp-c-card-medium',
title=_('How You Can Help'),
ga_title='How You Can Help',
desc=_('Your voice. Your code. Your support. There are so many ways to join the fight for a healthy internet.'),
image_url='mozorg/about/involved.jpg',
include_highres_image=True,
aspect_ratio='mzp-has-aspect-3-2',
link_url=url('mozorg.contribute.index'),
cta=_('Get Involved')
)}}
</div>
</div>
<div class="mzp-l-content">
<aside class="mzp-c-newsletter">
<div class="mzp-c-newsletter-image">
{{ high_res_img('home/2018/newsletter-graphic.png', {'alt': ''}) }}
</div>
<div class="newsletter-content">
{% set newsletter_id = 'mozilla-foundation' if LANG.startswith('en-') else 'mozilla-and-you' %}
{{ email_newsletter_form(
newsletters=newsletter_id,
title=_('Get The Mozilla Newsletter'),
subtitle=_('Stay informed about the issues affecting the internet, and learn how you can get involved in protecting the world’s newest public resource.'),
button_class='button-dark',
submit_text=_('Subscribe'),
protocol_component=True
)}}
</div>
</aside>
</div>
{% endblock %}
{% block js %}
{{ js_bundle('about-en') }}
{% endblock %}