finish tools section for desktop

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

@@ -1065,6 +1065,17 @@ class AnnualReport extends React.Component {
                                         <div className="subsection-tag">
                                             <FormattedMessage id="annualReport.toolsSpotlight" />
                                         </div>
+                                        <div className="tools-abhi-intro">
+                                            <div>
+                                                <h2>
+                                                    <FormattedMessage id="annualReport.toolsAbhiTitle" />
+                                                </h2>
+                                                <p>
+                                                    <FormattedMessage id="annualReport.toolsAbhiIntro" />
+                                                </p>
+                                            </div>
+                                            <img src="/images/annual-report/initiatives/Abhi Hero.svg" />
+                                        </div>
                                     </div>
                                 </div>
                                 <div className="video-container">
@@ -1095,6 +1106,22 @@ class AnnualReport extends React.Component {
                                         </MediaQuery>
                                     </div>
                                 </div>
+                                <div className="inner abhi">
+                                    <div className="abhi-quote">
+                                        <div className="quote-person">
+                                            <Avatar
+                                                alt=""
+                                                src="/images/annual-report/initiatives/Abhi Avatar.png"
+                                            />
+                                            <div>Ahbi</div>
+                                        </div>
+                                        <Comment
+                                            comment={this.props.intl.formatMessage(
+                                                {id: 'annualReport.toolsAbhiQuote'}
+                                            )}
+                                        />
+                                    </div>
+                                </div>
                             </div>
                         </div>
                         <div className="initiatives-community">

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

@@ -645,6 +645,11 @@ p {
             flex-direction: column;
             align-items: center;
             padding: 72px;
+
+            &.abhi {
+                padding-top: 0;
+                padding-bottom: 132px;
+            }
         }
     }
 
@@ -662,6 +667,7 @@ p {
         display: flex;
         align-items: center;
         font-weight: bold;
+        margin-left: 16px;
 
         img {
             width: 60px;
@@ -715,7 +721,9 @@ p {
             display: flex;
             flex-wrap: wrap;
             justify-content: space-between;
+            align-content: center;
             width: 780px;
+            margin-top: 80px;
 
             img {
                 width: 380px;
@@ -726,7 +734,7 @@ p {
                 flex-direction: column;
                 justify-content: center;
                 width: 380px;
-                margin-top: 88px;
+                //margin-top: 88px;
 
                 h4, p {
                     margin-bottom: 28px;
@@ -734,13 +742,18 @@ p {
             }
         }
 
+        .tools-app {
+            margin-top: 0px;
+            margin-bottom: 124px;
+        }
+
         .tools-tutorials {
             width: 780px;
             text-align: center;
             display: flex;
             flex-direction: column;
             align-items: center;
-            margin: 64px 0;
+            margin: 80px 0;
 
             p {
                 max-width: 620px;
@@ -764,6 +777,45 @@ p {
             }
         }
 
+        .tools-abhi {
+            .tools-abhi-intro {
+                display: flex;
+                flex-wrap: wrap;
+                align-items: flex-start;
+                margin-top: 32px;
+
+                div {
+                    max-width: 436px;
+                }
+
+                p {
+                    margin-bottom: 0;
+                }
+            }
+        }
+
+        .abhi-quote {
+            width: 620px;
+
+            .comment-text {
+                background-color: $ui-aqua;
+                white-space: pre-line;
+                margin-top: 8px;
+
+                p {
+                    color: $ui-white;
+                    line-height: 40px;
+                    font-size: 1.25rem;
+                }
+            }
+
+            .comment-text, .comment-text::before, .comment-text::after {
+                border-color: $ui-aqua;
+            }
+            .comment-text {
+                padding: 1.75rem;
+            }
+        }
     }
 
     .initiatives-tools {

src/views/annual-report/l10n.json

@@ -116,6 +116,9 @@
     "annualReport.toolsDownloadLink": "downloadable app",
     "annualReport.toolsRaspberryLink": "use on Raspberry Pi 4",
     "annualReport.toolsAppIntro": "During 2019, the Scratch Team released Scratch 3.0 as a {downloadableLink} for use on multiple platforms, including Windows, MacOS, ChromeOS, and Android tablets. In addition, the Raspberry Pi Foundation released Scratch 3.0 for {raspberryLink}. These downloadable versions are especially important for millions of learners in areas where internet connectivity is unavailable or unreliable.",
+    "annualReport.toolsAbhiTitle": "Abhi at Cartoon Network",
+    "annualReport.toolsAbhiIntro": "To highlight what kids can do with Scratch 3.0, we collaborated with Cartoon Network to create a video featuring Abhi, a 12-year-old Scratcher who loves to make animations and games. In the video, Abhi meets with Ian Jones-Quartey, creator of OK K.O. and other Cartoon Network shows. Abhi introduces Ian to key features of the new version of Scratch, and together they draw and program an animation of a Cartoon Network character jumping up and down.",
+    "annualReport.toolsAbhiQuote": "My favorite thing about Scratch is the community, because they are nice and helpful to me. That’s why I’m always happy to share every project that’s in my dreams.",
 
     "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.",