starting scratch in india

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

@@ -17,6 +17,7 @@ const FlexRow = require('../../../../components/flex-row/flex-row.jsx');
 const Comment = require('../../../../components/comment/comment.jsx');
 const WorldMap = require('../../../../components/world-map/world-map.jsx');
 const CountryUsage = require('./country-usage.json');
+const IndiaProjects = require('./india-projects.json');
 const PeopleGrid = require('../../../../components/people-grid/people-grid.jsx');
 const People = require('./people.json');
 const BLMProjects = require('./blm-projects.json');
@@ -745,45 +746,57 @@ class AnnualReport extends React.Component {
                                 </div>
                             </div>
                         </div>
-                        <div className="initiatives-tools">
+                        <div className="initiatives-connectivity">
-                            <div className="initiatives-subsection-header tools">
+                            <div className="initiatives-subsection-header connectivity">
                                 <div className="inner">
                                     <h2>
                                         <FormattedMessage id="annualReport.connectivityTitle" />
                                     </h2>
                                     <p>
-                                        <FormattedMessage id="annualReport.toolsIntro" />
+                                        <FormattedMessage id="annualReport.connectivityIntro" />
                                     </p>
                                 </div>
                             </div>
                             <div className="initiatives-subsection-content">
                                 {/* eslint-disable max-len */}
-                                <div className="inner">
+                                <div className="content">
-                                    <div className="subsection-tag">
+                                    <div className="text">
-                                        <FormattedMessage id="annualReport.toolsSpotlight" />
+                                        <div className="spotlight bubble connectivity">
-                                    </div>
+                                            <FormattedMessage id="annualReport.spotlightStory" />
-                                    <div className="initiatives-subsection-intro">
+                                        </div>
                                         <h2>
-                                            <FormattedMessage id="annualReport.toolsLaunch" />
+                                            <FormattedMessage id="annualReport.connectivityIndia" />
                                         </h2>
                                         <p>
-                                            <FormattedMessage id="annualReport.toolsLaunchIntro1" />
+                                            <FormattedMessage id="annualReport.connectivityIndiaIntro" />
-                                        </p>
-                                        <p>
-                                            <FormattedMessage id="annualReport.toolsLaunchIntro2" />
                                         </p>
                                     </div>
+                                    <div className="images">
+                                        <Grid
+                                                showAvatar
+                                                items={IndiaProjects}
+                                                showFavorites={false}
+                                                showLoves={false}
+                                                showViews={false}
+                                            />
+                                        {/* <div className="project">
+                                            <img src="/images/annual-report/2020/connectivity/India_Data/project_diwali.jpg" />
+                                        </div> */}
+                                        {/* <div className="project">
+                                            <img src="/images/annual-report/2020/India_Data/project_hindinews.jpg" />
+                                        </div>
+                                        <div className="project">
+                                            <img src="/images/annual-report/2020/India_Data/project_proudtobeanindian.jpg" />
+                                        </div>
+                                        <div className="project">
+                                            <img src="/images/annual-report/2020/India_Data/project_flute.jpg" />
+                                        </div> */}
+                                    </div>
                                 </div>
-                                <div className="hero">
+                                <p>
-                                    <img
+                                    <FormattedMessage id="annualReport.connectivityIndiaParagraph" />
-                                        className="left"
+                                </p>
-                                        src="/images/annual-report/initiatives/3.0 Left.svg"
+                               
-                                    />
-                                    <img
-                                        className="right"
-                                        src="/images/annual-report/initiatives/3.0 Right.svg"
-                                    />
-                                </div>
                                 <div className="inner">
                                     <div className="tools-extensions">
                                         <div className="tools-extension">

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

@@ -828,6 +828,21 @@ p {
             }
         }
     }
+    &.spotlight{
+        padding-left: 30px;
+        &:before{
+            content: '';
+            width: 30px;
+            height: 30px;
+            background-image: url("/images/annual-report/2020/LightBulb_spotlightstory.svg");
+            background-size: contain;
+            display: inline-block;
+            margin-right: 10px;
+        }
+        &.connectivity{
+            background-color: $ui-purple;
+        }
+    }
 }
 
 .reach-datapoint {
@@ -1121,11 +1136,16 @@ img.comment-viz{
 
         padding: 92px 0;
 
-        &.tools {
+        &.connectivity {
-            background-color: $ui-aqua;
+            background-color: $ui-purple;
-            background-position: 50% 0%;
+            background-position: 50% 100%;
         }
 
+        // &.tools {
+        //     background-color: $ui-aqua;
+        //     background-position: 50% 0%;
+        // }
+
         &.community {
             background-color: $ui-blue;
             background-position: 50% 50%;
@@ -1160,6 +1180,17 @@ img.comment-viz{
     }
 
     .initiatives-subsection-content {
+        .content{
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            .text{
+                width: 50%;
+            }
+            .images{
+                width: 50%;
+            }
+        }
         .inner {
             display: flex;
             flex-direction: column;
@@ -1576,24 +1607,14 @@ img.comment-viz{
         }
     }
 
-    .initiatives-tools {
+    .initiatives-connectivity {
-        .hero {
+        .content {
             display: flex;
             justify-content: space-between;
-
-            .right {
-                width: 58%;
-                max-width: 740px;
-        }
-
-            .left {
-                width: 42%;
-                max-width: 520px;
-            }
         }
 
         .subsection-tag {
-            background-color: $ui-aqua;
+            background-color: $ui-purple;
 
             @media #{$small} {
                 max-width: 250px;

src/views/annual-report/2020/index/india-projects.json

@@ -0,0 +1,42 @@
+[
+  {
+      "id": 423104626,
+      "author": {
+          "id": 61730637,
+          "username": "-pug_arts-"
+      },
+      "image": "/images/annual-report/2020/connectivity/India_Data/project_diwali.jpg",
+      "title": "♡ BLM ART! ♡",
+      "stats": {}
+  },
+  {
+      "id": 404637877,
+      "author": {
+          "id": 60051701,
+          "username": "-MayThe4thBeWithYou-"
+      },
+      "image": "https://cdn2.scratch.mit.edu/get_image/project/404637877_144x108.png",
+      "title": "Can't Breathe",
+      "stats": {}
+  },
+  {
+      "id": 404286089,
+      "author": {
+          "id": 28599090,
+          "username": "BubbleMint-"
+      },
+      "image": "https://cdn2.scratch.mit.edu/get_image/project/404286089_144x108.png",
+      "title": "In Memory of George Floyd || ♡",
+      "stats": {}
+  },
+  {
+      "id": 408116876,
+      "author": {
+          "id": 58796616,
+          "username": "-bIueberryonthemoon-"
+      },
+      "image": "https://cdn2.scratch.mit.edu/get_image/project/408116876_144x108.png",
+      "title": "Justice for Breonna Taylor ❤️",
+      "stats": {}
+  }
+]

src/views/annual-report/2020/index/l10n.json

@@ -72,11 +72,11 @@
     "annualReport.globalStrategy": "Global Strategy",
 
     "annualReport.connectivityTitle": "Connectivity",
-    "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.connectivityIntro": "While young people were isolated inside of their homes due to COVID-19, Scratch offered an opportunity for them to connect and create with faraway friends, classmates, and family members. It also served as a portal to the outside world, where they discovered that millions of kids across countries and continents were experiencing the same things they were.",
-    "annualReport.toolsSpotlight": "Creative Tools — Spotlight Story",
+    "annualReport.spotlightStory": "Spotlight Story",
-    "annualReport.toolsLaunch": "Launch of Scratch 3.0",
+    "annualReport.connectivityIndia": "Scratch in India",
-    "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.connectivityIndiaIntro": "In India, the COVID-19 pandemic took an enormous toll and kept many young people and families isolated inside for long stretches.",
-    "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.connectivityIndiaParagraph": "Across the entire global Scratch community, we saw a huge spike in activity beginning in March 2020. Nowhere was this sudden spike more evident than in India, where the COVID-19 pandemic took an enormous toll and kept many young people and families isolated inside for long stretches of time. Through Scratch, kids in India found connection by creating and sharing 602% more projects than the year before.",
     "annualReport.toolsTexttoSpeech": "Text-to-Speech",
     "annualReport.toolsTexttoSpeechIntro": "With the Text-to-Speech extension, kids can program their Scratch characters to speak out loud, in a variety of different voices.",
     "annualReport.toolsNumProjects": "330,000+",

static/images/annual-report/2020/Symbols-UI/LightBulb_spotlightstory.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M11.1846 1.40323V2.63847C11.1846 3.09436 11.5319 3.46341 11.9878 3.46341C12.4437 3.46341 12.8127 3.09436 12.8127 2.63847V1.40323C12.8127 0.947342 12.4437 0.599998 11.9878 0.599998C11.5319 0.599998 11.1846 0.947342 11.1846 1.40323ZM4.34732 3.7478C4.04122 4.07126 4.04122 4.59228 4.34732 4.8962L5.23522 5.78627C5.38718 5.93824 5.60427 6.02724 5.82353 6.02724C6.01891 6.02724 6.236 5.93824 6.38579 5.78627C6.7136 5.46281 6.7136 4.94179 6.38579 4.6357L5.5196 3.7478C5.19397 3.41999 4.67078 3.41999 4.34732 3.7478ZM19.6307 4.89555C19.9346 4.5938 19.9346 4.07061 19.6307 3.74715C19.305 3.42151 18.7818 3.42151 18.4801 3.74715L17.59 4.63505C17.2861 4.94114 17.2861 5.46216 17.59 5.78562C17.7637 5.93976 17.9569 6.02659 18.1762 6.02659C18.3715 6.02659 18.5886 5.93976 18.7406 5.78562L19.6307 4.89555ZM22.7999 11.3878C22.7999 11.8437 22.4287 12.1911 21.975 12.1911H20.7376C20.2817 12.1911 19.9127 11.8437 19.9127 11.3878C19.9127 10.932 20.2817 10.5629 20.7376 10.5629H21.975C22.4287 10.5629 22.7999 10.932 22.7999 11.3878ZM6.38688 16.989C6.71251 17.3146 6.71251 17.8139 6.38688 18.1396L5.52069 19.0296C5.34702 19.1816 5.15164 19.2684 4.93238 19.2684C4.71529 19.2684 4.51991 19.1816 4.3484 19.0296C4.04231 18.704 4.04231 18.183 4.3484 17.879L5.2363 16.989C5.56194 16.6633 6.08295 16.6633 6.38688 16.989ZM14.8966 20.8091C15.1158 22.2006 14.3104 23.3729 11.9876 23.3729C9.66689 23.3729 8.86148 22.2006 9.07857 20.8091C9.13274 20.5058 9.30637 20.5598 9.74163 20.6951C10.1786 20.831 10.8793 21.0489 11.9876 21.0696C13.1418 21.0696 13.8564 20.8382 14.2897 20.6979C14.6957 20.5665 14.8546 20.515 14.8966 20.8091ZM4.06554 11.3878C4.06554 11.8437 3.69648 12.1911 3.2623 12.1911H2.00318C1.569 12.1911 1.19995 11.8437 1.19995 11.3878C1.19995 10.932 1.569 10.5629 2.00318 10.5629H3.2623C3.69648 10.5629 4.06554 10.932 4.06554 11.3878ZM18.0025 10.5631C18.1523 12.1913 17.6769 13.7109 16.7651 14.8593C16.5697 15.1147 16.3905 15.324 16.2301 15.5112C15.694 16.1373 15.3685 16.5173 15.3518 17.5534C15.3518 18.2481 15.0045 18.8125 14.44 19.073H14.4205C12.8792 19.8329 11.0969 19.8111 9.55552 19.073C9.0128 18.8125 8.66545 18.2481 8.66545 17.6402C8.66545 16.5594 8.33427 16.1791 7.789 15.5529C7.62242 15.3616 7.43586 15.1474 7.23266 14.8832C6.4316 13.8629 5.95183 12.5603 5.95183 11.171C5.95183 7.58899 9.05838 4.76682 12.7055 5.17929C15.4842 5.50493 17.742 7.78437 18.0025 10.5631ZM19.6307 19.0298C19.9346 18.7042 19.9346 18.1832 19.6307 17.8793L18.7406 16.9892C18.4345 16.6614 17.9156 16.6614 17.59 16.9892C17.2861 17.3148 17.2861 17.8141 17.59 18.1398L18.4801 19.0298C18.6299 19.1818 18.8491 19.2686 19.0423 19.2686C19.2616 19.2686 19.4787 19.1818 19.6307 19.0298Z" fill="white"/>
-</svg>
+</svg>