Merge pull request #9293 from mozilla/feature/9253-youtube-regrets-he…

…ro-section

Youtube regrets 2022 hero & stats section

network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/accordion_section_1.html

@@ -8,7 +8,7 @@
 
     <p class="mt-5 mb-lg-5 pb-lg-5">
       {% blocktrans trimmed %}
-      The YouTube Regrets our volunteers flagged had tons of views, but it’s impossible to tell how many of those views came from YouTube’s recommendation algorithm, because <span class="fw-bold">YouTube won’t release this information</span>.
+      The YouTube Regrets our volunteers flagged had tons of views, but it’s impossible to tell how many of those views came from YouTube’s recommendation algorithm, because <span class="tw-font-bold">YouTube won’t release this information</span>.
       {% endblocktrans %}
     </p>
 
@@ -17,8 +17,8 @@
       {% trans "Reported Videos" as reported_videos %}
       {% trans "Other Videos" as other_videos %}
       {% trans "views per day" as view_per_day %}
-      {% include "./standout-stat.html" with heading=reported_videos number=5794 label=view_per_day classes="mb-5" id="reported-views-per-day-count-up" %}
-      {% include "./standout-stat.html" with heading=other_videos number=3312 label=view_per_day id="other-views-per-day-count-up" %}
+      {% include "./standout-stat.html" with heading=reported_videos number=5794 label=view_per_day classes="mb-5" id="reported-views-per-day-count-up" prefix="~" %}
+      {% include "./standout-stat.html" with heading=other_videos number=3312 label=view_per_day id="other-views-per-day-count-up" prefix="~" %}
     </div>
     <div class="col-12 col-lg-6 offset-lg-1 mt-3 mt-lg-3">
       <h2 class="heading-2 mb-4">{% trans "What we do know is that reported videos seemed to accumulate views faster than those that were not." %}</h2>

network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/accordion_section_2.html

@@ -5,7 +5,7 @@
 
   <p class="mt-5 mb-lg-5 pb-lg-5">
     {% blocktrans trimmed %}
-    What we do know is at the time they were reported they had racked up a collective 160 million views, an average of 760 thousand views per video, accrued over an average of 5 months that the videos had been up at the time they were reported. It is impossible to tell how many of these views were a result of recommendations, because <span class="fw-bold">YouTube won’t release this information</span>.
+    What we do know is at the time they were reported they had racked up a collective 160 million views, an average of 760 thousand views per video, accrued over an average of 5 months that the videos had been up at the time they were reported. It is impossible to tell how many of these views were a result of recommendations, because <span class="tw-font-bold">YouTube won’t release this information</span>.
     {% endblocktrans %}
   </p>
 
@@ -17,6 +17,6 @@
   </div>
   <div class="col-12 col-xl-5 mt-3 mt-xl-0 ml-xl-10">
     {% trans "views per video" as views_per_video %}
-    {% include "./standout-stat.html" with number=760 label=views_per_video classes="mb-5" id="views-per-video-count-up" %}
+    {% include "./standout-stat.html" with number=760 label=views_per_video classes="mb-5" id="views-per-video-count-up" prefix="~" suffix="K" %}
   </div>
 </div>

network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/accordion_section_3.html

@@ -2,7 +2,7 @@
 
 <p class="mb-5 pb-3">
   {% blocktrans trimmed %}
-  When YouTube is called out for recommending borderline content, the company usually boasts that their policy changes have led to a “70% average drop in watch time of this content coming from non-subscribed recommendations in the U.S.” <span class="fw-bold">But what about the rest of the world?</span>
+  When YouTube is called out for recommending borderline content, the company usually boasts that their policy changes have led to a “70% average drop in watch time of this content coming from non-subscribed recommendations in the U.S.” <span class="tw-font-bold">But what about the rest of the world?</span>
   {% endblocktrans %}
 </p>
 

network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/hero.html

@@ -9,7 +9,7 @@
           <h1 class="mb-3 hero-heading">{% trans "YouTube Regrets" %}</h1>
           <p class="tw-body-large">
             {% blocktrans trimmed %}
-            Mozilla and 37,380 YouTube users conducted a study to better understand harmful YouTube recommendations. <span class="fst-italic">This is what we learned</span>.
+            Mozilla and 37,380 YouTube users conducted a study to better understand harmful YouTube recommendations. <span class="tw-italic">This is what we learned</span>.
             {% endblocktrans %}
           </p>
           <a href="{% yt2021report %}" class="tw-btn btn-download" download>{% trans "Download Full Report" %}</a>

network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/intro.html

@@ -1,28 +1,28 @@
 {% load i18n %}
-<div class="container tw-dark mb-3">
+<section class="container tw-dark mb-3">
   <div class="row justify-content-center">
     <div class="col-12 col-md-8">
       <p>
-        {% blocktrans with stories_link='class="fw-bold" href="https://foundation.mozilla.org/campaigns/youtube-regrets/"' trimmed %}
+        {% blocktrans with stories_link='class="tw-font-bold" href="https://foundation.mozilla.org/campaigns/youtube-regrets/"' trimmed %}
         In 2019, Mozilla collected <a {{stories_link}}>countless stories</a> from people whose lives were impacted by YouTube’s recommendation algorithm. People had been exposed to misinformation, developed unhealthy body images, and became trapped in bizarre rabbit holes. The more stories we read, the more we realized how central YouTube has become to the lives of so many people — and just how much YouTube recommendations can impact their wellbeing.
         {% endblocktrans %}
       </p>
       <p class="mb-5 pb-4">
         {% blocktrans with routine_response_url="https://foundation.mozilla.org/blog/congratulations-youtube-now-show-your-work/" trimmed %}
-        Yet when confronted about its recommendation algorithm, <span class="fw-bold">YouTube’s <a href="{{routine_response_url}}">routine response</a> is to deny and deflect</span>.
+        Yet when confronted about its recommendation algorithm, <span class="tw-font-bold">YouTube’s <a href="{{routine_response_url}}">routine response</a> is to deny and deflect</span>.
         {% endblocktrans %}
       </p>
       <p>
-        {% blocktrans with reporter_link='class="fw-bold" href="https://foundation.mozilla.org/campaigns/regrets-reporter/"' trimmed %}
+        {% blocktrans with reporter_link='class="tw-font-bold" href="https://foundation.mozilla.org/campaigns/regrets-reporter/"' trimmed %}
         Faced with YouTube’s continuous refusal to engage, Mozilla built a browser extension, <a {{reporter_link}}>RegretsReporter</a>, that allows people to donate data about the YouTube videos they regret watching on the platform.
         Through one of the biggest crowdsourced investigations into YouTube, we’ve uncovered new information that warrants urgent attention and action from lawmakers and the public.
         {% endblocktrans %}
       </p>
-      <p class="fw-bold">
+      <p class="tw-font-bold">
         {% blocktrans trimmed %}
         We now know that YouTube is recommending videos that violate their very own content policies and harm people around the world — and that needs to stop.
         {% endblocktrans %}
       </p>
     </div>
   </div>
-</div>
+</section>

network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/our-research.html

@@ -9,45 +9,57 @@
         <h2 class="heading-1 ">{% trans "Our research is powered by real YouTube users." %}</h2>
         <p class="mb-5">
           {% blocktrans trimmed %}
-            Specifically: <span class="fw-bold">37,380 volunteers</span> across <span class="fw-bold">190 countries</span> installed Mozilla’s RegretsReporter browser extensions for Firefox and Chrome.
+            Specifically: <span class="tw-font-bold">37,380 volunteers</span> across <span class="tw-font-bold">190 countries</span> installed Mozilla’s RegretsReporter browser extensions for Firefox and Chrome.
           {% endblocktrans %}
         </p>
         <h2 class="heading-4 mb-4">{% trans "For this report, We gathered from" %}</h2>
       </div>
     </div>
 
     {% with reports_count=3362 volunteers_count=1662 countries_count=91 %}
-    <div class="row align-items-center mb-5">
-      <div class="col-md-4 col-xs-12 stat">
-        <p class="stat__number" id="reports-count-up">{{ reports_count|intcomma }}</p>
-        <p class="stat__label">{% trans "Reports" %}</p>
-      </div>
-      <div class="col-md-4 col-xs-12 stat">
-        <p class="stat__number" id="volunteers-count-up">{{ volunteers_count|intcomma }}</p>
-        <p class="stat__label">{% trans "Volunteers" %}</p>
-      </div>
-      <div class="col-md-4 col-xs-12 stat">
-        <p class="stat__number" id="countries-count-up">{{ countries_count|intcomma }}</p>
-        <p class="stat__label">{% trans "Countries" %}</p>
+      <div class="row align-items-center mb-5">
+        <div class="col-md-4 col-xs-12 stat">
+          <p class="stat__number" id="reports-count-up" data-stat="{{ reports_count }}">{{ reports_count|intcomma }}</p>
+          <p class="stat__label">{% trans "Reports" %}</p>
+        </div>
+        <div class="col-md-4 col-xs-12 stat">
+          <p class="stat__number"
+             id="volunteers-count-up"
+             data-stat="{{ volunteers_count }}"
+             data-stat-delay="250">
+            {{ volunteers_count|intcomma }}
+          </p>
+          <p class="stat__label">{% trans "Volunteers" %}</p>
+        </div>
+        <div class="col-md-4 col-xs-12 stat">
+          <p class="stat__number"
+             id="countries-count-up"
+             data-stat="{{ countries_count }}"
+             data-stat-delay="500">
+            {{ countries_count|intcomma }}
+          </p>
+          <p class="stat__label">{% trans "Countries" %}</p>
+        </div>
       </div>
-    </div>
     {% endwith %}
 
     <div class="row justify-content-center mb-5">
       <div class="col-12 col-md-8 text-center">
-          <p>
-            {% blocktrans trimmed %}
-            Reports were submitted between <span class="fw-bold">July 2020 - May 2021</span>. Volunteers who downloaded the extension but did <span class="fw-bold">not</span> file a report were an important part of our study. Their data — for example, how often they use YouTube — was essential to our understanding of how frequent regrettable experiences are on YouTube and how this varies between countries.
-            {% endblocktrans %}
-          </p>
-          <p class="mb-5 pb-5">
-            {% blocktrans with research_link="https://foundation.mozilla.org/blog/28-reasons-why-youtube-must-change/" trimmed %}
-            After delving into the data with a team of research assistants from the University of Exeter, Mozilla came away with three major criticisms of YouTube recommendations: from a problematic algorithm to poor corporate oversight to geographic disparities. And our <a href="{{research_link}}">past research</a> shows that these problems can inflict lasting harm on people.
-            {% endblocktrans %}
-          </p>
+        <p>
+          {% blocktrans trimmed %}
+            Reports were submitted between <span class="tw-font-bold">July 2020 - May 2021</span>. Volunteers who downloaded the extension but did <span class="tw-font-bold">not</span> file a report were an important part of our study.
+            Their data — for example, how often they use YouTube — was essential to our understanding of how frequent regrettable experiences are on YouTube and how this varies between countries.
+          {% endblocktrans %}
+        </p>
+        <p class="mb-5 pb-5">
+          {% blocktrans with research_link="https://foundation.mozilla.org/blog/28-reasons-why-youtube-must-change/" trimmed %}
+            After delving into the data with a team of research assistants from the University of Exeter, Mozilla came away with three major criticisms of YouTube recommendations: from a problematic algorithm to poor corporate oversight to
+            geographic disparities. And our <a href="{{ research_link }}">past research</a> shows that these problems can inflict lasting harm on people.
+          {% endblocktrans %}
+        </p>
 
         <h2 class="mb-1">{% trans "Here’s what we found" %}</h2>
-        <p class="our-research__teaser mb-1 text-uppercase fst-italic">{% trans "(Click to read more)" %}</p>
+        <p class="our-research__teaser mb-1 text-uppercase tw-italic">{% trans "(Click to read more)" %}</p>
         <img class="mx-auto d-block" src="{% static "_images/youtube-regrets/regrets-reporter/arrow.svg" %}" alt="">
       </div>
     </div>

network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/quote.html

@@ -4,7 +4,7 @@
     <div class="col-12 col-md-8">
       <img class="mb-3" src="{% static "_images/youtube-regrets/regrets-reporter/quotation-mark.svg" %}" alt="">
       <blockquote class="tw-quote">
-        <p class="quote__text fw-bold mb-3">
+        <p class="quote__text tw-font-bold mb-3">
           {% blocktrans trimmed %}
             We set <span class="quote__highlight">a high bar</span> for what videos we display prominently in our recommendations on the YouTube homepage or through the 'Up next' panel.
           {% endblocktrans %}

network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/standout-stat.html

@@ -6,7 +6,14 @@
   {% endif %}
 
   <div class="standout-stat__wrap text-center p-4">
-    <p class="standout-stat__number mb-2 {% if smaller %}standout-stat__number--smaller{% endif %}" {% if id %}id="{{ id }}"{% endif %}>{{ number|intcomma }}</p>
+    <p class="standout-stat__number mb-2 {% if smaller %}standout-stat__number--smaller{% endif %}"
+       {% if id %}id="{{ id }}"{% endif %}
+       data-stat="{{ number }}"
+       data-stat-suffix="{{ suffix }}"
+       data-stat-prefix="{{ prefix }}"
+    >
+      {{ number|intcomma }}
+    </p>
     <p class="standout-stat__label mb-0 text-uppercase">{{ label }}</p>
   </div>
 </div>

network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/youtube_regrets_2021.html

@@ -2,7 +2,7 @@
 {% load wagtailcore_tags %}
 
 {% block body_id %}youtube-regrets-2021{% endblock %}
-{% block bodyclass %}youtube-regrets-2021{% endblock %}
+{% block bodyclass %}youtube-regrets-2021 youtube-regrets-shared{% endblock %}
 
 {% block extended_head %}
   <link rel="preconnect" href="https://fonts.googleapis.com">

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

@@ -0,0 +1,26 @@
+{% load static i18n youtube_tags %}
+<div class="container tw-dark tw-py-[40px]">
+  <div class="tw-relative medium:tw-min-h-[600px] large:tw-min-h-[850px] tw-grid medium:tw-grid-cols-2">
+
+    {# images swapped on mobile and desktop #}
+    <div>
+      <img class="medium:tw-hidden" src="{% static "_images/youtube-regrets/regrets-reporter/report-findings-hero-mobile.png" %}" alt="">
+      <img class="tw-hidden medium:tw-block tw-absolute medium:tw-left-[-10%] medium:tw-top-1/2 medium:tw--translate-y-1/2 tw-w-full" src="{% static "_images/youtube-regrets/regrets-reporter/report-findings-hero-desktop.png" %}" alt="">
+    </div>
+
+    <div class="tw-relative tw-space-y-5 medium:tw-space-y-6 tw-flex tw-flex-col tw-justify-center tw-items-start">
+      <h1 class="tw-mb-0 tw-leading-none tw-font-bold tw-text-4xl medium:tw-text-[3.25rem]">{% trans "Does this button work?" %}</h1>
+      <p class="tw-body-large large:tw-text-2xl">
+        {% blocktrans trimmed %}
+          <span class="tw-font-bold">Investigating YouTube's ineffective user controls</span> powered by 22,722 volunteers, Mozilla scrutinized YouTube to determine how much control people actually have over the platform’s recommendation algorithm.
+          <span class="tw-italic">This is what we learned</span>.
+        {% endblocktrans %}
+      </p>
+      <a href="https://foundation.mozilla.org/research/library/user-controls/report/" class="btn btn-with-icon btn-red">
+        <svg aria-hidden="true" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 3.395h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2v-15ZM22 3.395h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7v-15Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>
+        {% trans "Read the Full Report" %}
+      </a>
+    </div>
+  </div>
+</div>
+

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

@@ -0,0 +1,48 @@
+{% load i18n static %}
+<section class="tw-relative tw-mt-6 medium:tw-mt-7">
+  <img class="tw-hidden large:tw-block tw-absolute tw-right-0 tw-bottom-0 large:tw-max-w-[200px] xlarge:tw-max-w-[250px] 2xl:tw-max-w-[300px] tw-z-0" src="{% static "_images/youtube-regrets/regrets-reporter/what-is-a-youtube-regret-desktop.png" %}" alt="">
+  <img class="tw-hidden large:tw-block tw-absolute tw-left-0 tw-bottom-0 large:tw-max-w-[200px] xlarge:tw-max-w-[250px] 2xl:tw-max-w-[300px] tw-z-0" src="{% static "_images/youtube-regrets/regrets-reporter/what-is-a-youtube-regret-desktop.png" %}" alt="">
+
+  <div class="container tw-dark rich-text tw-relative tw-z-10">
+    <div class="tw-space-y-4 tw-max-w-3xl tw-mx-auto">
+      <h2>{% trans 'People feel like they don’t have control over their YouTube recommendations...' %}</h2>
+      <p>
+        {% blocktrans with 2021_report_link='https://assets.mofoprod.net/network/documents/Mozilla_YouTube_Regrets_Report.pdf' trimmed %}
+          Our <a href="{{ 2021_report_link }}">2021 investigation into YouTube’s recommender system</a> uncovered a range of problems on the platform: an opaque algorithm, inconsistent oversight, and geographic inequalities. We also learned that people feel they don’t have control over their YouTube experience — particularly the videos that are recommended to them.
+        {% endblocktrans %}
+      </p>
+      <p>
+        {% blocktrans with tools_link="https://support.google.com/youtube/answer/6342839" trimmed %}
+          YouTube says that people can manage their video recommendations through <a href="{{ tools_link }}">the feedback tools the platform offers.</a> But do YouTube’s user controls actually work?
+        {% endblocktrans %}
+      </p>
+
+      {# This acts as a section separator #}
+      <h2 class="tw-py-6 medium:tw-pt-[60px] medium:tw-pb-[115px]">{% trans 'and our study shows that they really don’t.' %}</h2>
+
+      {# mobile only image #}
+      <img class="w-full large:tw-hidden" src="{% static "_images/youtube-regrets/regrets-reporter/what-is-a-youtube-regret-mobile.png" %}" alt="">
+
+      <p class="tw-h4-heading tw-font-sans medium:tw-text-[1.625rem] tw-font-light">
+        {% trans 'Our work is the first-ever experimental audit of YouTube by independent researchers, powered by Mozilla’s RegretsReporter.' %}
+      </p>
+      <p>
+        {% blocktrans with reporter_link='https://foundation.mozilla.org/campaigns/regrets-reporter/' trimmed %}
+          Using <a href="{{ reporter_link }}">RegretsReporter</a>, an open source tool Mozilla built to study YouTube’s recommendation algorithm, we were able to independently audit YouTube.
+        {% endblocktrans %}
+      </p>
+      <ul>
+        <li>
+          {% trans 'We combined qualitative and quantitative insights to paint a more complete picture of the effectiveness — or rather, ineffectiveness — of YouTube’s controls.' %}
+        </li>
+        <li>
+          {% trans 'We leveraged a massive-scale community to collect our data.' %}
+        </li>
+        <li>
+          {% trans 'We applied rigorous and powerful research methods including a randomized controlled experiment and a machine learning model.' %}
+        </li>
+      </ul>
+    </div>
+  </div>
+
+</section>

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

@@ -0,0 +1,20 @@
+{% load static i18n l10n humanize %}
+
+<div class="container tw-dark tw-my-5 medium:tw-my-7">
+   {% with participants=22722 videos_analyzed=567880195 people_surveyed=2758 %}
+    <div class="tw-flex tw-gap-6 tw-flex-col medium:tw-flex-wrap medium:tw-flex-row tw-justify-evenly tw-mb-5">
+      <div class="stat tw-text-white" >
+        <p class="stat__number" id="participants-count" data-stat="{{ participants }}">{{ participants|intcomma }}</p>
+        <p class="stat__label">{% trans "Participants" %}</p>
+      </div>
+      <div class="stat tw-text-white">
+        <p class="stat__number" id="videos-analyzed-count" data-stat="{{ videos_analyzed }}" data-stat-delay="250">{{ videos_analyzed|intcomma }}</p>
+        <p class="stat__label">{% trans "Videos Analyzed" %}</p>
+      </div>
+      <div class="stat tw-text-white">
+        <p class="stat__number" id="people-surveyed-count" data-stat="{{ people_surveyed }}" data-stat-delay="500">{{ people_surveyed|intcomma }}</p>
+        <p class="stat__label">{% trans "People Surveyed" %}</p>
+      </div>
+    </div>
+    {% endwith %}
+</div>