From 660fc7094d839189b2648c6fbe267d2d1e97ee00 Mon Sep 17 00:00:00 2001
From: caseymm <casey@bocoup.com>
Date: Thu, 31 Mar 2022 17:28:23 -0700
Subject: [PATCH] start mission

---
 .../annual-report/2021/annual-report.jsx      | 53 ++++++++-------
 .../annual-report/2021/annual-report.scss     | 67 ++++++++++---------
 src/views/annual-report/2021/l10n.json        | 31 +++++----
 3 files changed, 81 insertions(+), 70 deletions(-)

diff --git a/src/views/annual-report/2021/annual-report.jsx b/src/views/annual-report/2021/annual-report.jsx
index d8e2d12f3..9d7590f10 100644
--- a/src/views/annual-report/2021/annual-report.jsx
+++ b/src/views/annual-report/2021/annual-report.jsx
@@ -356,52 +356,55 @@ class AnnualReport extends React.Component {
                                     {/* Show the wave icon inside this div in smaller screens */}
                                     <div className="wave-icon-and-title">
                                         <img
-                                            src="/images/annual-report/2021/founders-message/Wave_Icon.svg"
+                                            src="/images/annual-report/2020/founders-message/Wave_Icon.svg"
                                             alt={this.props.intl.formatMessage(
                                                 {id: 'annualReport.2021.altWave'}
                                             )}
                                         />
                                         <h2>
-                                            <FormattedMessage id="annualReport.2021.foundersMessageTitle" />
+                                            <FormattedMessage id="annualReport.2021.directorsMessageTitle" />
                                         </h2>
                                     </div>
                                 </MediaQuery>
                                 <MediaQuery minWidth={frameless.desktop}>
                                     <h2>
-                                        <FormattedMessage id="annualReport.2021.foundersMessageTitle" />
+                                        <FormattedMessage id="annualReport.2021.directorsMessageTitle" />
                                     </h2>
                                 </MediaQuery>
-                                <div className="message-from-team">
+                                <div className="message-from-team directors-message">
                                     <p>
-                                        <FormattedMessage id="annualReport.2021.foundersMessageP1" />
+                                        <FormattedMessage id="annualReport.2021.directorsMessageP1" />
                                     </p>
                                     <p>
-                                        <FormattedMessage id="annualReport.2021.foundersMessageP2" />
+                                        <FormattedMessage id="annualReport.2021.directorsMessageP2" />
+                                    </p>
+                                    <p className="pull-quote">
+                                        <FormattedMessage id="annualReport.2021.directorsMessagePullquote" />
                                     </p>
                                     <p>
-                                        <FormattedMessage id="annualReport.2021.foundersMessageP3" />
+                                        <FormattedMessage id="annualReport.2021.directorsMessageP3" />
                                     </p>
                                     <p>
-                                        <FormattedMessage id="annualReport.2021.foundersMessageP4" />
+                                        <FormattedMessage id="annualReport.2021.directorsMessageP4" />
                                     </p>
                                     <p>
-                                        <FormattedMessage id="annualReport.2021.foundersMessageP5" />
+                                        <FormattedMessage id="annualReport.2021.directorsMessageP5" />
                                     </p>
-                                    <div className="founders-signature">
+                                    <p>
+                                        <FormattedMessage id="annualReport.2021.directorsMessageP6" />
+                                    </p>
+                                    <div className="directors-signature">
                                         <img
-                                            className="mitch-photo"
-                                            src="/images/annual-report/2021/founders-message/mitch_headshot.jpg"
+                                            className="shawna-photo"
+                                            src="/images/annual-report/2020/shawna_headshot.jpg"
                                             alt={this.props.intl.formatMessage(
-                                                {id: 'annualReport.2021.altMitchHeadshot'}
+                                                {id: 'annualReport.2021.altAvatar'}
                                             )}
                                         />
                                         <div className="signature-container">
-                                            <p className="message-signature">Mitch Resnick</p>
+                                            <p className="message-signature">Shawna Young</p>
                                             <p>
-                                                <FormattedMessage id="annualReport.2021.foundersMessageScratchTitle" />
-                                            </p>
-                                            <p>
-                                                <FormattedMessage id="annualReport.2021.foundersMessageAffiliation" />
+                                                <FormattedMessage id="annualReport.2021.EDTitle" />
                                             </p>
                                         </div>
                                     </div>
@@ -428,17 +431,21 @@ class AnnualReport extends React.Component {
                         ref={this.setRef(SECTIONS.mission)}
                     >
                         <div className="inner">
-                            <h2><FormattedMessage id="annualReport.2021.missionTitle" /></h2>
+                            <h4><FormattedMessage id="annualReport.2021.missionTitle" /></h4>
+                            <p><FormattedMessage id="annualReport.2021.missionP1" /></p>
+                            <p><FormattedMessage id="annualReport.2021.missionP2" /></p>
                             <h5><FormattedMessage id="annualReport.2021.visionHeader" /></h5>
-                            <p className="mission-subtitle">
+                            <p>
                                 <FormattedMessage id="annualReport.2021.visionSubtitle" />
                             </p>
                             <h5><FormattedMessage id="annualReport.2021.missionHeader" /></h5>
-                            <p className="mission-subtitle">
+                            <p>
                                 <FormattedMessage id="annualReport.2021.missionSubtitle" />
                             </p>
-                            <p><FormattedMessage id="annualReport.2021.missionP1" /></p>
-                            <p><FormattedMessage id="annualReport.2021.missionP2" /></p>
+                            <h5><FormattedMessage id="annualReport.2021.valuesHeader" /></h5>
+                            <p>
+                                <FormattedMessage id="annualReport.2021.valuesSubtitle" />
+                            </p>
                             <p>
                                 <FormattedMessage
                                     id="annualReport.2021.missionP3"
diff --git a/src/views/annual-report/2021/annual-report.scss b/src/views/annual-report/2021/annual-report.scss
index 1367eaac5..d1974818a 100644
--- a/src/views/annual-report/2021/annual-report.scss
+++ b/src/views/annual-report/2021/annual-report.scss
@@ -225,7 +225,7 @@ a, a:link, a:visited, a:active{
 
     }
 
-    .message-from-team {
+    .message-from-team, .directors-message {
         .message-signature {
             font-weight: bold;
         }
@@ -239,18 +239,43 @@ a, a:link, a:visited, a:active{
         @media #{$small} {
             max-width: 300px;
         }
+        .pull-quote{
+            font-size: 1.5rem;
+            line-height: 2.5rem;
+            @media #{$small}{
+                font-size: 24px;
+            }
+            &:before{
+                content: '';
+                display: block;
+                background-image: url("/images/annual-report/2020/bigquotes.svg");
+                width: 130px;
+                height: 130px;
+                background-repeat: no-repeat;
+                margin-bottom: -60px;
+                margin-left: -20px;
+                @media #{$intermediate-and-smaller}{
+                    margin-bottom: -75px;
+                }
+            }
+        }
     }
 
-    .founders-signature{
+    .directors-signature{
         display: flex;
-        .mitch-photo {
+        .shawna-photo {
             width: 70px;
             height: 70px;
             border-radius: 50%;
             margin-right: 20px;
         }
-        p{
-            margin: 3px 0;
+        .signature-container{
+            p{
+                margin: 0px;
+                &:first-of-type{
+                    margin: 5px 0 -4px;
+                }
+            }
         }
     }
 
@@ -279,12 +304,6 @@ a, a:link, a:visited, a:active{
     flex-direction: column;
     align-items: center;
 
-    .mission-subtitle {
-        font-weight: normal;
-        font-size: 1.25rem;
-        margin-top: 5px;
-    }
-
     @media #{$intermediate-and-smaller} {
         text-align: left;
     }
@@ -295,6 +314,9 @@ a, a:link, a:visited, a:active{
         h5{
             margin: 20px 0 0;
             font-size: 1.25rem;
+            & + p{
+                margin-top: 3px;
+            }
         }
     }
 
@@ -1842,7 +1864,7 @@ img.comment-viz{
     }
 }
 
-.directors-message {
+.founders-message {
     .inner {
         max-width: 900px;
         padding: 80px 0;
@@ -1870,27 +1892,6 @@ img.comment-viz{
         text-align: left;
     }
 
-    .pull-quote{
-        font-size: 1.5rem;
-        line-height: 2.5rem;
-        @media #{$small}{
-            font-size: 24px;
-        }
-        &:before{
-            content: '';
-            display: block;
-            background-image: url("/images/annual-report/2020/bigquotes.svg");
-            width: 130px;
-            height: 130px;
-            background-repeat: no-repeat;
-            margin-bottom: -60px;
-            margin-left: -20px;
-            @media #{$intermediate-and-smaller}{
-                margin-bottom: -75px;
-            }
-        }
-    }
-
     .flex-content{
         display: flex;
         justify-content: space-between;
diff --git a/src/views/annual-report/2021/l10n.json b/src/views/annual-report/2021/l10n.json
index 92783da97..3f9d51214 100644
--- a/src/views/annual-report/2021/l10n.json
+++ b/src/views/annual-report/2021/l10n.json
@@ -10,25 +10,28 @@
 
     "annualReport.2021.mastheadYear": "2021 Annual Report",
     "annualReport.2021.mastheadTitle": "Building an Equitable Community Together",
-    "annualReport.2021.foundersMessageTitle": "A Message from Our Executive Director",
-    "annualReport.2021.foundersMessageP1": "The year 2021 will be remembered as the year when the COVID pandemic swept across the world, causing hardships and disruptions in the lives of everyone -- with the greatest hardships falling inequitably on those already facing challenges in their lives.",
-    "annualReport.2021.foundersMessageP2": "Throughout the pandemic, young people around the world, many isolated in their homes, have come to the Scratch website in greater numbers than ever before, seeing Scratch as a safe space where they can express themselves creatively, learn new skills, and collaborate with one another. We were inspired by so many of the Scratch projects that young people created during 2021, many of them sharing their thoughts and feelings about the pandemic, climate change, racial injustice, and other issues on their minds. Young people were not just learning computational concepts and skills, but also developing their voice and their identities.",
-    "annualReport.2021.foundersMessageP3": "To ensure that Scratch can continue to play this important role in young people’s lives in the years ahead, we’ve been making significant organizational changes at Scratch. At the start of 2021, the Scratch Team moved out of its longtime home at the MIT Media Lab and into the new offices of the Scratch Foundation in downtown Boston. This move will help us to build a sustainable organization capable of supporting Scratch as a global creative coding platform into the future.",
-    "annualReport.2021.foundersMessageP4": "Later in 2021, as part of this organizational transition, we hired Shawna Young to serve as Executive Director of the Scratch Foundation. Shawna comes to the Scratch Foundation with a strong background in education and nonprofit management, and a deep commitment to equity and inclusion. Throughout her career in institutions such as Duke and MIT, Shawna has worked to expand learning experiences for students from diverse communities. That commitment is strongly aligned with Scratch’s mission and values, and it will play an important role in her leadership at Scratch. I encourage you to read Shawna’s message at the end of this annual report.",
-    "annualReport.2021.foundersMessageP5": "Over the past decade, Scratch has had phenomenal success, engaging tens of millions of young people around the world. But we are just beginning. The challenge for the years ahead is to ensure that we can continue to spread and support not just our technology but also our creative, caring, collaborative learning approach, so that young people around the world have equitable opportunities to imagine, create, share, and learn. We look forward to working with all of you to make that happen!",
-    "annualReport.2021.foundersMessageScratchTitle": "Chair, Scratch Foundation",
-    "annualReport.2021.foundersMessageAffiliation": "Professor, MIT Media Lab",
+    "annualReport.2021.directorsMessageTitle": "A Message from Our Executive Director",
+    "annualReport.2021.directorsMessageP1": "In 2021, COVID-19 continued to disrupt our routines and shape the way we interact with one another. Even as we began to gather together, schools reopened, and there were calls for a “return to normal,” the most vulnerable in our society remained disproportionately impacted by the inequitable structures that COVID-19 exacerbated. The COVID-19 crisis shaped young people’s relationships to Scratch, and solidified Scratch as a more vital place than ever for them to create, learn, and connect. But as we moved into a new year, we did not leave behind our most vulnerable young people as they began to navigate “the new normal.”",
+    "annualReport.2021.directorsMessageP2": "One of the foundational values of Scratch has always been to empower young people to explore, create, play, and discover—opportunities that aren’t afforded equitably to all students.",
+    "annualReport.2021.directorsMessagePullquote": "We believe in the transformative power of self-expression and creativity, and in providing space for young people to use creative coding as a tool to raise their voice.",
+    "annualReport.2021.directorsMessageP3": "I’m proud to serve as the Executive Director of the Scratch Foundation during this pivotal moment in our history, and will continue to spread Scratch’s caring, collaborative approach to creative learning to kids around the world who need these opportunities the most.",
+    "annualReport.2021.directorsMessageP4": "Last year was an incredible year for the Scratch Foundation–we focused on growing our team with remarkable, diverse leaders and building a solid foundation for our continued transition to an independent organization. We developed a three-year Strategic Plan with the combined efforts of every team member at every level of our organization, codifying the work we’re embarking on together. As Scratch grows, we remain focused on equity and community-building, and keeping Scratch a safe space for kids to connect, create, and collaborate with their peers around the world.",
+    "annualReport.2021.directorsMessageP5": "LI can’t thank you enough for embarking on this journey with our team, and for your continued support of our mission. The compassion and creativity of the Scratch Community is endlessly inspiring to us, and we can’t wait for you to join us in the important work ahead of us.",
+    "annualReport.2021.directorsMessageP6": "Over the past decade, Scratch has had phenomenal success, engaging tens of millions of young people around the world. But we are just beginning. The challenge for the years ahead is to ensure that we can continue to spread and support not just our technology but also our creative, caring, collaborative learning approach, so that young people around the world have equitable opportunities to imagine, create, share, and learn. We look forward to working with all of you to make that happen!",
+    "annualReport.2021.directorsMessageScratchTitle": "Chair, Scratch Foundation",
+    "annualReport.2021.directorsMessageAffiliation": "Professor, MIT Media Lab",
 
     "annualReport.2021.watchVideo": "Watch Video",
 
-    "annualReport.2021.missionTitle": "Our Mission & Vision",
-    "annualReport.2021.visionHeader": "Vision",
-    "annualReport.2021.visionSubtitle": "To spread creative, caring, collaborative, equitable approaches to coding and learning around the world.",
+    "annualReport.2021.missionTitle": "Our Mission, Vision, & Values",
+    "annualReport.2021.missionP1": "We are committed to educational justice and prioritizing equity across all aspects of our work, with a particular focus on initiatives and approaches that support children, families, and educators who have been excluded from creative computing.",
+    "annualReport.2021.missionP2": "We’ve developed Scratch as a free, safe, playful learning environment that engages all children in thinking creatively, reasoning systematically, and working collaboratively—essential skills for everyone in today's society. We work with educators and families to support children in exploring, sharing, and learning.",
     "annualReport.2021.missionHeader": "Mission",
     "annualReport.2021.missionSubtitle": "Providing young people with digital tools and opportunities to imagine, create, share, and learn.",
-    "annualReport.2021.missionP1": "We are committed to educational justice and prioritizing equity across all aspects of our work, with a particular focus on initiatives and approaches that support children, families, and educators excluded from creative computing.",
-    "annualReport.2021.missionP2": "We’ve developed Scratch as a free, safe, playful learning environment that engages all children in thinking creatively, reasoning systematically, and working collaboratively—essential skills for everyone in today's society. We work with educators and families to support children in exploring, sharing, and learning.",
-    "annualReport.2021.missionP3": "In developing new technologies, activities, and learning materials, we are guided by what we call the Four P’s of Creative Learning:",
+    "annualReport.2021.visionHeader": "Vision",
+    "annualReport.2021.visionSubtitle": "To spread creative, caring, collaborative, equitable approaches to coding and learning around the world.",
+    "annualReport.2021.valuesHeader": "Values",
+    "annualReport.2021.valuesSubtitle": "In this work, we are guided by our core values that define our principles as an organization and a community:",
     "annualReport.2021.fourPs": "Four P’s of Creative Learning",
     "annualReport.2021.missionProjectsTitle": "Projects",
     "annualReport.2021.missionPeersTitle": "Peers",