Skip to content

Commit

Permalink
Refresh: home page updates [fix mozilla#15308] (mozilla#15410)
Browse files Browse the repository at this point in the history 
* Refresh: home page updates [fix mozilla#15308]

* update product list styling
* use SVG mask for pixel transitions
* add Headline SemiBold
* Donate section design updates [fix mozilla#15303]
* Update provisional copy and (some) images [mozilla#14892]
  • Loading branch information
@craigcook
craigcook authored Nov 5, 2024
1 parent 19f9605 commit 585c704
Show file tree
Hide file tree
Showing 35 changed files with 382 additions and 400 deletions.
3 changes: 1 addition & 2 deletions bedrock/base/templates/includes/protocol/footer/footer-refresh.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,7 @@
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

<div class="m24-c-transition m24-t-black"><hr></div>
<footer class="moz24-footer" id="colophon" role="contentinfo">
<footer class="moz24-footer m24-t-transition-01" id="colophon" role="contentinfo">
{% if show_newsletter %}
{% include 'includes/protocol/footer/footer-newsletter.html' %}
{% endif %}
Expand Down
26 changes: 12 additions & 14 deletions bedrock/mozorg/templates/mozorg/about/includes/m24/community.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,18 @@
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

<div class="m24-t-purple">
<section class="m24-c-showcase">
<div class="m24-c-showcase-text">
<h2 class="m24-c-showcase-title">Community love — our driving force</h2>
<div class="m24-c-showcase-subtitle-containter">
<p class="m24-c-showcase-subtitle">Mozilla is a global community of passionate volunteers, fellows and contributors who have been building, protecting and shaping the internet with us since 1998.</p>
<p class="m24-c-showcase-subtitle">From writing code and spotting bugs to advocating for privacy and keeping the internet open for everyone, they’re the backbone of everything we do, and we couldn’t do this without them. And guess what? You can join the team too!</p>
<section class="m24-c-showcase m24-t-purple m24-t-transition-next">
<div class="m24-c-content">
<header class="m24-c-showcase-text m24-l-two-columns">
<h2 class="m24-c-showcase-title">Community love<br> — our driving force</h2>

<div class="m24-c-showcase-body">
<p>Mozilla is a global community of passionate volunteers, fellows and contributors who have been building, protecting and shaping the internet with us since 1998.</p>
<p>From writing code and spotting bugs to advocating for privacy and keeping the internet open for everyone, they’re the backbone of everything we do, and we couldn’t do this without them. And guess what? You can join the team too!</p>
</div>
</div>
</header>

<div class="m24-c-showcase-media">

{{ resp_img(
url="img/mozorg/about/m24/community.png",
srcset={
Expand All @@ -31,10 +31,8 @@ <h2 class="m24-c-showcase-title">Community love — our driving force</h2>
'alt': ''
}
) }}

</div>
<p class="m24-c-showcase-cta"><a href="{{ url('mozorg.contribute') }}" class="m24-c-cta" data-cta-text="Join the movement">Join the movement</a></p>
</section>
</div>

<div class="m24-c-transition m24-l-reverse m24-t-purple"><hr></div>
<p class="m24-c-section-cta"><a href="{{ url('mozorg.contribute') }}" class="m24-c-cta" data-cta-text="Join the movement">Join the movement</a></p>
</div>
</section>
18 changes: 11 additions & 7 deletions bedrock/mozorg/templates/mozorg/about/includes/m24/impact.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,13 @@
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

<div class="m24-t-green">
<section class="m24-c-showcase">
<h2 class="m24-c-showcase-title">Let’s build a fairer future</h2>
<p class="m24-c-showcase-subtitle">See how we’re fostering a diverse, inclusive and accessible online environment for all.</p>
<section class="m24-c-showcase m24-t-green">
<div class="m24-c-content">
<header class="m24-c-showcase-text">
<h2 class="m24-c-showcase-title">Let’s build a fairer future</h2>
<p class="m24-c-showcase-body">See how we’re fostering a diverse, inclusive and accessible online environment for all.</p>
</header>

<div class="m24-c-showcase-media">
{{ resp_img('img/mozorg/about/m24/impact.png',
srcset={'img/mozorg/about/m24/impact-high-res.png': '2x'},
Expand All @@ -19,6 +22,7 @@ <h2 class="m24-c-showcase-title">Let’s build a fairer future</h2>
}
) }}
</div>
<p class="m24-c-showcase-cta"><a href="{{ url('mozorg.impact-report.index') }}" class="m24-c-cta" data-cta-text="Read about our commitment">Read about our commitment</a></p>
</section>
</div>

<p class="m24-c-section-cta"><a href="{{ url('mozorg.impact-report.index') }}" class="m24-c-cta" data-cta-text="Read about our commitment">Read about our commitment</a></p>
</div>
</section>
2 changes: 1 addition & 1 deletion bedrock/mozorg/templates/mozorg/home/home-m24.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@

{% block content %}

<main>
<main class="mzp-t-transition-next">

{% include 'mozorg/home/includes/m24/hero.html'%}
{% include 'mozorg/home/includes/m24/products.html'%}
Expand Down
158 changes: 81 additions & 77 deletions bedrock/mozorg/templates/mozorg/home/includes/m24/ai-grid.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,87 +6,91 @@

{% from "macros-m24.html" import grid_tile with context %}

<section class="m24-c-content">
<header class="m24-c-copy">
<h2 class="m24-c-copy-title">AI for the people</h2>
<p>Our mission is to make it easy for people to build with and collaborate on open-source, trustworthy AI.</p>
</header>
<section class="m24-section-ai m24-t-dark m24-t-transition-01 m24-t-transition-next">
<div class="m24-c-content">
<header class="m24-c-copy">
<h2 class="m24-c-copy-title">Join the movement: <br>AI for the people</h2>
<p>Our mission is to make it easy for people to build with and collaborate on open-source, trustworthy AI.</p>
</header>

<div class="m24-c-grid-container">
{{ grid_tile(
class='m24-l-grid-half',
image=resp_img(
url="img/m24/todo-3-2.svg",
optional_attributes={
"loading": "lazy",
"alt": "",
"width": "900",
"height": "600",
}
),
title='Llamafile',
desc='Run large language models (LLMs) easily on your computer Llamafile – no installation needed, and your data stays safe on your device.',
link_url='#',
cta_text='Visit',
) }}
<div class="m24-c-grid-container">
{{ grid_tile(
class='m24-l-grid-half',
image=resp_img(
url="img/m24/todo-3-2.svg",
optional_attributes={
"loading": "lazy",
"alt": "",
"width": "900",
"height": "600",
}
),
title='Llamafile',
desc='Run large language models (LLMs) easily on your computer Llamafile – no installation needed, and your data stays safe on your device.',
link_url='#',
cta_text='Visit',
) }}

{{ grid_tile(
class='m24-l-grid-half',
image=resp_img(
url="img/m24/todo-3-2.svg",
optional_attributes={
"loading": "lazy",
"alt": "",
"width": "900",
"height": "600",
}
),
title='Lumigator',
desc='Find the “just right” LLM for your needs, use case, and data – like Goldilocks, but with sharper teeth.',
link_url='#',
cta_text='Visit',
) }}
{{ grid_tile(
class='m24-l-grid-half',
image=resp_img(
url="img/m24/todo-3-2.svg",
optional_attributes={
"loading": "lazy",
"alt": "",
"width": "900",
"height": "600",
}
),
title='Lumigator',
desc='Find the “just right” LLM for your needs, use case, and data – like Goldilocks, but with sharper teeth.',
link_url='#',
cta_text='Visit',
) }}

{{ grid_tile(
class='m24-l-grid-third',
image=resp_img(
url="img/m24/todo-1-1.svg",
optional_attributes={
"loading": "lazy",
"alt": ""
}
),
title='Data Futures Lab',
link_url='#',
cta_text='Visit',
) }}
{{ grid_tile(
class='m24-l-grid-third',
image=resp_img(
url="img/m24/todo-1-1.svg",
optional_attributes={
"loading": "lazy",
"alt": ""
}
),
title='Data Futures Lab',
link_url='#',
cta_text='Visit',
) }}

{{ grid_tile(
class='m24-l-grid-third',
image=resp_img(
url="img/m24/todo-5-4.svg",
optional_attributes={
"loading": "lazy",
"alt": ""
}
),
title='Trustworthy AI Fellow',
link_url='#',
cta_text='Visit',
) }}
{{ grid_tile(
class='m24-l-grid-third',
image=resp_img(
url="img/m24/todo-5-4.svg",
optional_attributes={
"loading": "lazy",
"alt": ""
}
),
title='Trustworthy AI Fellow',
link_url='#',
cta_text='Visit',
) }}

{{ grid_tile(
class='m24-l-grid-third',
image=resp_img(
url="img/m24/todo-5-7.svg",
optional_attributes={
"loading": "lazy",
"alt": ""
}
),
title='Mozilla Builders',
link_url='#',
cta_text='Visit',
) }}
{{ grid_tile(
class='m24-l-grid-third',
image=resp_img(
url="img/m24/todo-5-7.svg",
optional_attributes={
"loading": "lazy",
"alt": ""
}
),
title='Mozilla Builders',
link_url='#',
cta_text='Visit',
) }}
</div>

<p class="m24-c-section-cta"><a href="#" class="m24-c-cta" data-cta-text="Explore Mozilla AI">Explore Mozilla AI</a></p>
</div>
</section>
16 changes: 8 additions & 8 deletions bedrock/mozorg/templates/mozorg/home/includes/m24/donate.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,17 @@
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

<div class="m24-t-dark" id="donate">
<div class="m24-t-purple m24-t-transition-next" id="donate">
<div class="m24-c-donate">
<h2 class="m24-c-donate-title">Donate to Mozilla’s non-profit</h2>
<h2 class="m24-c-donate-title">Donate to the Mozilla non-profit</h2>
<div class="m24-c-donate-media"><img src="{{ static('img/m24/todo-27-1.svg') }}" alt="" height="253" width="680"></div>
<div class="m24-c-donate-info">
<p class="m24-c-donate-info-title">Where do your dollars go?</p>
<ul class="mzp-u-list-styled">
<li>Funding new AI privacy technologies</li>
<li>Building innovation labs</li>
<li>Sponsoring incoming 2025 Fellows</li>
</ul>
<p>Mozilla is building a movement to reclaim the internet. Together we can
build a future where our privacy is protected, AI is trustworthy and
irresponsible tech companies are held accountable. But that’s only
possible if we do it together.</p>

<p>We’re proudly non-profit. Will you donate to Mozilla today?</p>
</div>
<p class="m24-c-donate-cta"><a href="https://foundation.mozilla.org/?form=Mozilla-Website-Homepage" class="m24-c-cta" data-cta-text="Donate">Donate</a></p>
</div>
Expand Down
21 changes: 12 additions & 9 deletions bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,19 @@

<section class="m24-c-hero">
<div class="m24-c-copy">
<h1 class="m24-c-copy-title m24-t-2xl">Reclaim the internet</h1>
<p>You might know Mozilla for creating Firefox. We're also a non-profit, campaigning, advocating, funding, and other ing’s for a
healthy internet. Because the web can be a wild place. Together, we can take it back.</p>
<p class="m24-c-copy-cta"><a href="{{ url('mozorg.about.index') }}" class="m24-c-cta" data-cta-text="Learn about us">Learn about us</a></p>
<div class="m24-c-copy-wrapper">
<h1 class="m24-c-copy-title m24-t-2xl">Welcome to Mozilla</h1>
<p>From ethical tech to policies that defend your digital rights, we put you first—always.</p>
<p class="m24-c-copy-cta"><a href="{{ url('mozorg.about.index') }}" class="m24-c-cta" data-cta-text="Learn about us">Learn about us</a></p>
</div>
</div>

<div class="m24-c-hero-media">
<picture>
<source srcset="{{ static('img/m24/todo-2-1.svg') }}" media="(max-width: 768px)" width="768" height="384"> <!-- 2:1 -->
<img src="{{ static('img/m24/todo-27-1.svg') }}" alt="" width="1440" height="533"> <!-- 2.7:1 -->
</picture>
<div class="m24-c-hero-media m24-t-transition-next">
<div class="m24-c-hero-media-container">
<picture>
<source srcset="{{ static('img/home/2024/hero-symbol-white-2-1.svg') }}" media="(max-width: 768px)" width="768" height="384">
<img src="{{ static('img/home/2024/hero-symbol-white-27-1.svg') }}" alt="" width="1440" height="533">
</picture>
</div>
</div>
</section>
Loading

0 comments on commit 585c704

Please sign in to comment.