start on tools section

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

@@ -827,6 +827,53 @@ class AnnualReport extends React.Component {
                                     </p>
                                 </div>
                             </div>
+                            <div className="initiatives-subsection-content">
+                                {/* eslint-disable max-len */}
+                                <div className="inner">
+                                    <div className="subsection-tag">
+                                        <FormattedMessage id="annualReport.toolsSpotlight" />
+                                    </div>
+                                    <div className="initiatives-subsection-intro">
+                                        <h2>
+                                            <FormattedMessage id="annualReport.toolsLaunch" />
+                                        </h2>
+                                        <p>
+                                            <FormattedMessage id="annualReport.toolsLaunchIntro1" />
+                                        </p>
+                                        <p>
+                                            <FormattedMessage id="annualReport.toolsLaunchIntro2" />
+                                        </p>
+                                    </div>
+                                </div>
+                                <div className="video-container">
+                                    <div className="video-background ahbi">
+                                        <MediaQuery minWidth={frameless.tabletPortrait}>
+                                            <VideoPreview
+                                                buttonMessage={
+                                                    this.props.intl.formatMessage({id: 'annualReport.watchVideo'})
+                                                }
+                                                thumbnail="/images/annual-report/initiatives/CN Video Thumbnail.png"
+                                                thumbnailWidth="580"
+                                                videoHeight="320"
+                                                videoId="joal01i8b1"
+                                                videoWidth="568"
+                                            />
+                                        </MediaQuery>
+                                        <MediaQuery maxWidth={frameless.tabletPortrait - 1}>
+                                            <VideoPreview
+                                                buttonMessage={
+                                                    this.props.intl.formatMessage({id: 'annualReport.watchVideo'})
+                                                }
+                                                thumbnail="/images/annual-report/initiatives/CN Video Thumbnail.png"
+                                                thumbnailWidth="400"
+                                                videoHeight="216"
+                                                videoId="joal01i8b1"
+                                                videoWidth="380"
+                                            />
+                                        </MediaQuery>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                         <div className="initiatives-community">
                             <div className="initiatives-subsection-header community">
@@ -845,7 +892,7 @@ class AnnualReport extends React.Component {
                                     <div className="subsection-tag">
                                         <FormattedMessage id="annualReport.communitySpotlight" />
                                     </div>
-                                    <div className="community-team-intro">
+                                    <div className="initiatives-subsection-intro">
                                         <h2>
                                             <FormattedMessage id="annualReport.communityTeam" />
                                         </h2>

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

@@ -588,6 +588,16 @@ p {
         }
     }
 
+    .initiatives-subsection-intro {
+        max-width: 780px;
+        text-align: center;
+        margin: 32px 0;
+
+        p {
+            max-width: 620px;
+        }
+    }
+
     .quote-person {
         display: flex;
         align-items: center;
@@ -601,6 +611,12 @@ p {
         }
     }
 
+    .initiatives-tools {
+        .subsection-tag {
+            background-color: $ui-aqua;
+        }
+    }
+
     .initiatives-community {
         .hero {
             width: 100%;
@@ -859,15 +875,9 @@ p {
         &.blm {
             background-image: url("/images/annual-report/initiatives/BLM Video Splash.svg");
         }
-    }
 
-    .community-team-intro {
+        &.ahbi {
-        max-width: 780px;
+            background-image: url("/images/annual-report/initiatives/Ahbi Video Splash.svg");
-        text-align: center;
-        margin-top: 32px;
-
-        p {
-            max-width: 620px;
         }
     }
 }

src/views/annual-report/l10n.json

@@ -68,7 +68,10 @@
 
     "annualReport.toolsTitle": "Creative Tools",
     "annualReport.toolsIntro": "We are constantly experimenting and innovating with new technologies and new designs — always striving to provide children with new ways to create, collaborate, and learn.",
-
+    "annualReport.toolsSpotlight": "Creative Tools — Spotlight Story",
+    "annualReport.toolsLaunch": "Launch of Scratch 3.0",
+    "annualReport.toolsLaunchIntro1": "We designed Scratch 3.0 to expand how, what, and where kids can create with Scratch. Released at the start of 2019, Scratch 3.0 led to a surge of activity in the Scratch community, with more projects — and a greater variety of projects — than ever before.",
+    "annualReport.toolsLaunchIntro2": "Scratch 3.0 includes a library of extensions — extra collections of coding blocks that add new capabilities to Scratch. Some extensions provide access to web services and other software features, while others connect Scratch with physical-world devices like motors and sensors.",
     "annualReport.communityTitle": "Community",
     "annualReport.communityIntro": "The Scratch programming language has always been intertwined with the Scratch online community, providing opportunities for children to collaborate, share, and provide feedback to one another.",
     "annualReport.communitySpotlight": "Community - Spotlight Story",

static/images/annual-report/initiatives/Ahbi Video Splash.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1020px" height="500px" viewBox="0 0 1020 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Ahbi Video Splash</title>
+    <g id="Ahbi-Video-Splash" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.5">
+        <path d="M61.677234,70.3664159 C234.157139,-35.4025071 677.179332,4.68477567 750.952782,22.1909398 C858.405647,47.6891035 1006.11115,97.9507291 901.513249,165.833814 C860.427992,192.497771 991.213222,227.252548 997.104056,314.938082 C1008.60536,486.135949 650.276573,525.115334 446.776703,486.135949 C222.451203,443.16752 26.8853299,474.386664 19.1859313,410.891236 C11.4865326,347.395808 164.324967,351.218316 61.677234,281.991429 C-38.1378312,214.674927 -0.89844901,108.739365 61.677234,70.3664159 Z M973.641775,139.135036 C996.208002,132.302352 1020,153.081715 1020,176.598907 C1020,200.116099 994.545839,221.091846 966.091253,198.376727 C937.636667,175.661607 951.075548,145.96772 973.641775,139.135036 Z" id="splash" fill="#0EBD8C"></path>
+    </g>
+</svg>