continued work on reach section

src/views/annual-report/annual-report.jsx

@@ -679,6 +679,31 @@ class AnnualReport extends React.Component {
                             </div>
                         </div>
                     </div>
+                    <div className="reach-scratch-jr section">
+                        <div className="inner">
+                            <div className="scratch-jr-intro">
+                                <img src="/images/annual-report/ScratchJr-Logo.svg" />
+                                <p>
+                                    <FormattedMessage id="annualReport.reachScratchJrBlurb" />
+                                </p>
+                            </div>
+                            <div className="reach-datapoint">
+                                <FormattedMessage
+                                    id="annualReport.reach170million"
+                                    values={{
+                                        million: (
+                                            <div className="million">
+                                                <FormattedMessage id="annualReport.reachMillion" />
+                                            </div>
+                                        )
+                                    }}
+                                />
+                                <h4>
+                                    <FormattedMessage id="annualReport.reachUniqueVisitors" />
+                                </h4>
+                            </div>
+                        </div>
+                    </div>
                     <div
                         className="initiatives section"
                         id="initiatives"

src/views/annual-report/annual-report.scss

@@ -377,19 +377,6 @@ p {
             display: flex;
             flex-wrap: wrap;
             justify-content: center;
-            font-size: 5rem;
-        }
-
-        .reach-datapoint {
-            width: 300px;
-            text-align: center;
-            margin: 32px 0;
-        }
-
-        .million {
-            font-size: 2rem;
-            font-weight: bold;
-            margin-bottom: 16px;
         }
     }
 
@@ -428,6 +415,39 @@ p {
     }
 }
 
+.reach-datapoint {
+    font-size: 5rem;
+    width: 300px;
+    text-align: center;
+    margin: 32px 0;
+}
+
+.million {
+    font-size: 2rem;
+    font-weight: bold;
+    margin-bottom: 16px;
+}
+
+.reach-scratch-jr {
+    background-color: #0EA57A;
+    color: $ui-white;
+
+    h2, h3, h4, p {
+        color: $ui-white;
+    }
+
+    .inner {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        max-width: 940px;
+    }
+
+    .scratch-jr-intro {
+        max-width: 540px;
+    }
+}
+
 .financials-section {
     .inner {
         max-width: 780px;

src/views/annual-report/l10n.json

@@ -52,6 +52,7 @@
     "annualReport.reachGrowthBlurb": "New accounts created in the Scratch Online Community within the last 5 years.",
     "annualReport.reachGlobalCommunity": "A Global Community",
     "annualReport.reachMapBlurb": "Total accounts registered in the Scratch Online Community through December 31, 2019",
+    "annualReport.reachScratchJrBlurb": "ScratchJr is an introductory programming environment that enables young children (ages 5-7) to create their own interactive stories and games.",
 
     "annualReport.financialsTitle": "Financials - 2019",
     "annualReport.financialsRevenue": "Revenues",