Merge pull request #9294 from mozilla/feature/9256-we-found-section

Youtube Regrets 2022 - We found section

network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2022/fragments/we_found_section.html

@@ -0,0 +1,21 @@
+{% load i18n %}
+<section class="tw-dark tw-my-7 large:tw-my-[120px]">
+  <div class="container tw-max-w-3xl tw-mx-auto">
+    <h3 class="tw-text-lg medium:tw-text-[1.375rem] tw-uppercase tw-font-sans tw-font-bold tw-mb-5">{% trans 'Ultimately, we found:' %}</h3>
+
+    <div class="tw-flex tw-flex-col tw-space-y-5">
+      <div class="tw-flex tw-flex-col medium:tw-flex-row tw-gap-3">
+        <span class="tw-text-4xl tw-text-white">{% trans '01' %}</span>
+        <p class="tw-font-changa tw-text-3xl medium:tw-text-[2.375rem] tw-mb-0">{% blocktrans trimmed %}People overwhelmingly feel that using YouTube’s user controls <span class="tw-text-[#FF3D3D]">does not change</span> their recommendations at all.{% endblocktrans %}</p>
+      </div>
+
+      {# Add special lowercase aria label to stop screen readers from reading as acronym #}
+      <span class="tw-uppercase tw-text-lg medium:tw-text-[1.375rem] tw-text-white tw-font-bold medium:tw-ml-[60px]" aria-label="{% trans 'and' %}">{% trans 'and' %}</span>
+
+      <div class="tw-flex tw-flex-col medium:tw-flex-row tw-gap-3">
+        <span class="tw-text-4xl tw-text-white">{% trans '02' %}</span>
+        <p class="tw-font-changa tw-text-3xl medium:tw-text-[2.375rem] tw-mb-0">{% blocktrans trimmed %}They’re right. YouTube’s user control mechanisms <span class="tw-text-[#FF3D3D]">don’t effectively prevent</span> “unwanted” recommendations.{% endblocktrans %}</p>
+      </div>
+    </div>
+  </div>
+</section>

network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2022/youtube_regrets_2022.html

@@ -22,6 +22,8 @@
         {% include './fragments/intro.html' %}
 
         {% include './fragments/stats.html' %}
+
+        {% include './fragments/we_found_section.html' %}
       </div>
     {% endblock %}
   </main>

source/sass/views/youtube-regrets-2021.scss

@@ -35,7 +35,6 @@
     font-weight: 700;
   }
 
-
   .tw-body-large {
     font-size: 26px;
     line-height: calc(28 / 26);

source/sass/views/youtube-regrets-shared.scss

@@ -11,8 +11,8 @@
         $youtube-regrets-dark-blue 26.46%,
         $black 57.83%,
         $black 100%
-    ),
-    linear-gradient(0deg, $black, $black);
+      ),
+      linear-gradient(0deg, $black, $black);
     border-radius: 0 0 30px 30px;
     overflow: hidden;
   }