Add State of Mozilla section to home page [fix #15727]

bedrock/mozorg/templates/mozorg/home/home-m24.html

@@ -42,7 +42,11 @@
   {% include 'mozorg/home/includes/m24/donate.html'%}
   {% include 'mozorg/home/includes/m24/ai-gallery.html'%}
   {% include 'mozorg/home/includes/m24/media-springboard.html'%}
-  {% include 'mozorg/home/includes/m24/showcase.html'%}
+  {% if ftl_has_messages('m24-home-state-of-mozilla', 'm24-home-mozilla-is-reinventing-itself', 'm24-home-read-the-report') %}
+    {% include 'mozorg/home/includes/m24/showcase-som.html'%}
+  {% else %}
+    {% include 'mozorg/home/includes/m24/showcase.html'%}
+  {% endif %}
   {% include 'mozorg/home/includes/m24/issues-gallery.html'%}
 
 </main>

bedrock/mozorg/templates/mozorg/home/includes/m24/media-springboard.html

@@ -132,5 +132,3 @@ <h3 class="m24-c-intro-title m24-t-sm">{{ ftl('m24-home-headline-you-ai-v2', fal
     ) }}
   </ul>
 </section>
-
-<div class="m24-c-transition m24-t-top-light m24-t-bottom-green"><hr></div>

bedrock/mozorg/templates/mozorg/home/includes/m24/showcase-som.html

@@ -0,0 +1,47 @@
+{#
+ 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/.
+#}
+
+<div class="m24-c-transition m24-t-top-light m24-t-bottom-pink"><hr></div>
+
+<section class="m24-c-showcase m24-t-pink">
+  <div class="m24-c-content">
+    <header class="m24-c-showcase-text">
+      <h2 class="m24-c-showcase-title">{{ ftl('m24-home-state-of-mozilla') }}</h2>
+      <p class="m24-c-showcase-body">{{ ftl('m24-home-mozilla-is-reinventing-itself') }}</p>
+    </header>
+
+    <div class="m24-c-showcase">
+      <div class="m24-c-showcase-media">
+        {{ resp_img(
+          url='img/home/2024//showcase/showcase-som-1440.png',
+          srcset={
+            'img/home/2024//showcase/showcase-som-375.png': '375w',
+            'img/home/2024//showcase/showcase-som-686.png': '686w',
+            'img/home/2024//showcase/showcase-som-1440.png': '1440w',
+            'img/home/2024//showcase/showcase-som-2752.png': '2752w',
+          },
+          sizes={
+            'default': '100vw',
+          },
+          optional_attributes={
+            'width': '1376',
+            'height': '590',
+            'alt': ftl('m24-home-state-of-mozilla-alt'),
+          }
+        ) }}
+      </div>
+    </div>
+
+    <header class="m24-c-showcase-text m24-l-two-columns">
+      <h3 class="m24-c-showcase-subtitle">2024</h3>
+
+      <p class="m24-c-showcase-body m24-c-section-cta">
+        <a href="{{ url('foundation.annualreport.2024.index') }}" class="m24-c-cta" rel="external noopener" data-cta-text="Read the report">{{ ftl('m24-home-read-the-report') }}</a>
+      </p>
+    </footer>
+
+  </div>
+</section>

bedrock/mozorg/templates/mozorg/home/includes/m24/showcase.html

@@ -4,6 +4,8 @@
  file, You can obtain one at https://mozilla.org/MPL/2.0/.
 #}
 
+<div class="m24-c-transition m24-t-top-light m24-t-bottom-green"><hr></div>
+
 <section class="m24-c-showcase m24-t-green">
   <div class="m24-c-content">
     <header class="m24-c-showcase-text">

l10n/en/mozorg/home-m24.ftl

@@ -116,6 +116,11 @@ m24-home-alt-rise25-proud = A proud honoree at { -brand-name-rise25 }.
 m24-home-alt-rise25-smiling = A confident smiling speaker at { -brand-name-rise25 }.
 # Used as an accessible text alternative for an image
 m24-home-alt-rise25-joyous = A joyous honoree at { -brand-name-rise25 }.
+m24-home-state-of-mozilla = State of { -brand-name-mozilla }
+m24-home-mozilla-is-reinventing-itself = { -brand-name-mozilla } is reinventing itself, diversifying around a constellation of organizations, reimagining advertising and creating an open source AI ecosystem. Read about it in the State of { -brand-name-mozilla } 2024 Report.
+# Used as an accessible text alternative for an image
+m24-home-state-of-mozilla-alt = Abstract pixel art in shades of green, orange and pink
+m24-home-read-the-report = Read the report
 
 ## Issues
 

media/css/m24/base.scss

@@ -90,8 +90,9 @@ a:link {
     font-family: var(--title-font-family);
     font-size: $text-button-xl;
     font-weight: 600;
+    line-height: 1.1;
     background-image:
-    linear-gradient(to right, $m24-color-black 0, $m24-color-black 33%,transparent 33%, transparent 66%, $m24-color-black 66%, $m24-color-black 100%);
+        linear-gradient(to right, $m24-color-black 0, $m24-color-black 33%,transparent 33%, transparent 66%, $m24-color-black 66%, $m24-color-black 100%);
     background-repeat: no-repeat;
     background-position:
         left var(--cta-bg-position, 100%) top 100%;

media/css/m24/showcase.scss

@@ -9,6 +9,12 @@
     margin-bottom: $spacer-sm;
 }
 
+.m24-c-showcase-subtitle {
+    font-size: $text-button-xl;
+    padding: $spacer-xs 0;
+    text-align: end;
+}
+
 .m24-c-showcase-body {
     font-weight: 500;
     font-size: $text-body-lg;
@@ -106,15 +112,29 @@
     .m24-c-showcase-text.m24-l-two-columns {
         @include grid;
 
-        .m24-c-showcase-title {
+        .m24-c-showcase-title,
+        .m24-c-showcase-subtitle {
             grid-column: 1/7;
+            text-align: start;
         }
 
         .m24-c-showcase-body {
             grid-column: 7/-1;
             max-width: none;
         }
     }
+
+    .m24-c-showcase-foot {
+        @include grid;
+
+        .m24-c-showcase-foot-content {
+            grid-column: 1/7;
+        }
+
+        .m24-c-section-cta {
+            grid-column: 7/-1;
+        }
+    }
 }
 
 @media #{$mq-lg} and (prefers-reduced-motion: no-preference) {