Seperate components of "hero" (#15510)

- seperate about "hero" into 3 components (intro, feature, pictos)
- add alt white and black backgrounds
- move images from m24/about folder to mozorg/about/m24
- optimize community and manifesto images

bedrock/mozorg/templates/mozorg/about/includes/m24/community.html

@@ -17,10 +17,10 @@ <h2 class="m24-c-showcase-title">Community love<br> — our driving force</h2>
 
     <div class="m24-c-showcase-media">
       {{ resp_img(
-          url="img/mozorg/about/m24/community.png",
+          url="img/mozorg/about/m24/community.jpg",
           srcset={
-              "img/mozorg/about/m24/community.png": "1440w",
-              "img/mozorg/about/m24/community-high-res.png": "2880w",
+              "img/mozorg/about/m24/community.jpg": "1440w",
+              "img/mozorg/about/m24/community-high-res.jpg": "2880w",
           },
           sizes={
               "default": "100vw",

bedrock/mozorg/templates/mozorg/about/includes/m24/intro.html

@@ -0,0 +1,14 @@
+{#
+ 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 https://mozilla.org/MPL/2.0/.
+#}
+
+{% from "macros-protocol.html" import picto with context %}
+
+<div class="m24-c-content">
+  <div class="m24-c-intro m24-t-intro-snug">
+    <h1 class="m24-c-intro-title m24-t-2xl">Reclaim the internet with us</h1>
+    <p>Mozilla is working to put control of the internet back in the hands of the people using it.</p>
+  </div>
+</div>

bedrock/mozorg/templates/mozorg/about/includes/m24/manifesto.html

@@ -0,0 +1,98 @@
+{#
+ 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 https://mozilla.org/MPL/2.0/.
+#}
+
+{% from "macros-protocol.html" import picto with context %}
+
+<div class="m24-t-light-alt m24-t-dark">
+  <div class="m24-c-feature">
+    <div class="m24-c-feature-media">
+      {{ resp_img(
+        url='img/mozorg/about/m24/manifesto-27-1.jpg',
+        srcset={
+          'img/mozorg/about/m24/manifesto-27-1-high-res.jpg': '2x'
+        },
+        optional_attributes={
+          'width': '1440',
+          'height': '682'
+        }
+      ) }}
+    </div>
+    <div class="m24-c-feature-text">
+      <h2 class="m24-c-feature-title">Together, we can keep the internet easy, safe and free, for everyone</h2>
+      <p class="m24-c-feature-cta"><a href="{{ url('mozorg.about.manifesto') }}" class="m24-c-cta" data-cta-text="Manifesto">Read our manifesto</a></p>
+    </div>
+  </div>
+</div>
+
+<div class="m24-t-light-alt">
+  <div class="m24-c-content">
+  <ul class="m24-t-columns-four">
+    {% call picto(
+      base_el='li',
+      image=resp_img(
+        url='img/icons/m24-small/icon-bell.svg',
+        optional_attributes={
+          'class': 'mzp-c-picto-image',
+          'loading': 'lazy'
+        }
+      ),
+      body=True,
+      heading_level=3,
+      title="Advocate"
+    ) %}
+      <p>We advocate for better products, holding governments and tech corporations accountable for what they create.</p>
+    {% endcall %}
+
+    {% call picto(
+      base_el='li',
+      image=resp_img(
+        url='img/icons/m24-small/icon-glasses.svg',
+        optional_attributes={
+          'class': 'mzp-c-picto-image',
+          'loading': 'lazy'
+        }
+      ),
+      body=True,
+      heading_level=3,
+      title="Monitor"
+    ) %}
+      <p>We monitor developments, conduct research, and campaign to improve products and drive policies that will represent your interests.</p>
+    {% endcall %}
+
+    {% call picto(
+      base_el='li',
+      image=resp_img(
+        url='img/icons/m24-small/icon-pencil.svg',
+        optional_attributes={
+          'class': 'mzp-c-picto-image',
+          'loading': 'lazy'
+        }
+      ),
+      body=True,
+      heading_level=3,
+      title="Build"
+    ) %}
+      <p>We build products that put you in control — like Firefox, Fakespot and more.</p>
+    {% endcall %}
+
+    {% call picto(
+      base_el='li',
+      image=resp_img(
+        url='img/icons/m24-small/icon-dollar.svg',
+        optional_attributes={
+          'class': 'mzp-c-picto-image',
+          'loading': 'lazy'
+        }
+      ),
+      body=True,
+      heading_level=3,
+      title="Fund"
+    ) %}
+      <p>We fund and invest in the people and efforts taking technology, the internet, and AI in the right direction.</p>
+    {% endcall %}
+  </ul>
+  </div>
+</div>

bedrock/mozorg/templates/mozorg/about/index-m24.html

@@ -22,7 +22,8 @@
 
 {% block content %}
 <main>
-  {% include 'mozorg/about/includes/m24/hero.html'%}
+  {% include 'mozorg/about/includes/m24/intro.html'%}
+  {% include 'mozorg/about/includes/m24/manifesto.html'%}
   {% include 'mozorg/about/includes/m24/amplify.html'%}
   {% include 'mozorg/about/includes/m24/impact.html'%}
   {% include 'mozorg/about/includes/m24/careers.html'%}

media/css/m24/base.scss

@@ -17,8 +17,8 @@
 @import 'careers';
 @import 'intro';
 @import 'donate';
+@import 'feature';
 @import 'gallery';
-@import 'hero';
 @import 'showcase';
 @import 'launchpad';
 @import 'theme';

media/css/m24/feature.scss

@@ -0,0 +1,93 @@
+// 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 https://mozilla.org/MPL/2.0/.
+
+
+// feature
+.m24-c-feature {
+    @include container;
+    padding-bottom: $spacer-xl;
+}
+
+.m24-c-feature-media {
+    padding-top: $container-padding;
+    padding-bottom: $spacer-xl;
+}
+
+.m24-c-feature-title {
+    margin-bottom: $spacer-xl;
+    font-size: $alias-text-title-h2;
+    line-height: 1;
+    text-wrap: balance;
+    text-wrap-style: balance;
+}
+
+.m24-c-feature-cta {
+    text-align: end;
+}
+
+@media #{$mq-xl} {
+    .m24-c-feature-title {
+        max-width: grid(9);
+    }
+}
+
+// columns
+
+.m24-t-columns-four {
+    align-items: flex-start;
+    gap: $spacer-md $grid-gutter;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin-bottom: 0;
+
+    @media #{$mq-lg} {
+        flex-flow: row wrap;
+    }
+
+    @media #{$mq-xl} {
+        flex-flow: row nowrap;
+    }
+}
+
+// picto
+
+.mzp-c-picto {
+    font-size: $text-body-md;
+    line-height: 1.2;
+    margin-bottom: 0;
+    text-wrap: balance;
+    text-wrap-style: balance;
+
+    .mzp-c-picto-image {
+        height: 48px;
+        width: 48px;
+    }
+
+    p {
+        margin-bottom: 0;
+    }
+}
+
+.mzp-c-picto-heading {
+    font-size: $text-title-md;
+}
+
+@media #{$mq-md} {
+    .mzp-c-picto-image {
+        margin-bottom: $spacer-sm;
+    }
+}
+
+@media #{$mq-lg} {
+    .mzp-c-picto {
+        max-width: grid(6);
+    }
+}
+
+@media #{$mq-xl} {
+    .mzp-c-picto {
+        max-width: grid(3);
+    }
+}