Merge remote-tracking branch 'scratch/develop' into scratcher-onboarding

.babelrc

@@ -1,5 +1,6 @@
 {
     "plugins": [
+        "transform-async-to-generator",
         "transform-object-rest-spread",
         "transform-require-context",
         "syntax-dynamic-import"

.circleci/config.yml

@@ -8,65 +8,74 @@ aliases:
           username: $DOCKERHUB_USERNAME
           password: $DOCKERHUB_PASSWORD
     working_directory: ~/repo
-  - &save_git_cache
+  - &setup
-    save_cache:
-      paths:
-        - .git
-      key: v1-git-{{ .Revision }}
-  - &restore_git_cache
-    restore_cache:
-      keys:
-        - v1-git-{{ .Revision }}
-        - v1-git-
-  - &save_npm_cache
-    save_cache:
-      paths:
-        - node_modules
-      key: v1-npm-{{ checksum "package-lock.json" }}
-  - &restore_npm_cache
-    restore_cache:
-      keys:
-        - v1-npm-{{ checksum "package-lock.json" }}
-  - &save_build_cache
-    save_cache:
-      paths:
-        - ./build
-        - ./intl
-      key: v1-build-{{ .Revision }}
-  - &restore_build_cache
-    restore_cache:
-      keys:
-        - v1-build-{{ .Revision }}
-        - v1-build-
-  - &build
-    <<: *defaults
-    resource_class: medium+
-    steps:
-      - *restore_git_cache
-      - checkout
-      - run:
     name: "setup"
     command: |
       npm --production=false ci
       mkdir ./test/results
-      - run:
+  - &lint
     name: "run lint tests"
     command: |
       npm run test:lint:ci
-      - run:
+  - &build
     name: "run npm build"
     command: |
       WWW_VERSION=${CIRCLE_SHA1:0:5} npm run build
-      - run:
+  - &unit
     name: "Run unit tests"
     command: |
       JEST_JUNIT_OUTPUT_NAME=unit-jest-results.xml npm run test:unit:jest:unit -- --reporters=jest-junit
       JEST_JUNIT_OUTPUT_NAME=localization-jest-results.xml npm run test:unit:jest:localization -- --reporters=jest-junit
       npm run test:unit:tap -- --output-file ./test/results/unit-raw.tap
       npm run test:unit:convertReportToXunit
-      - *save_npm_cache
+  - &setup_python
-      - *save_git_cache
+    name: "setup python"
-      - *save_build_cache
+    command: |
+      curl https://bootstrap.pypa.io/pip/3.5/get-pip.py -o get-pip.py
+      python3 get-pip.py pip==21.0.1
+      pip install s3cmd==2.1.0
+  - &deploy
+    name: "deploy"
+    command: |
+      npm run deploy
+  - &integration
+    name: "integration tests with Jest"
+    command: |
+      JEST_JUNIT_OUTPUT_NAME=integration-jest-results.xml npm run test:integration:remote -- --reporters=jest-junit
+  - &build_no_deploy
+    <<: *defaults
+    resource_class: large
+    steps:
+      - checkout
+      - run:
+          <<: *setup
+      - run:
+          <<: *lint
+      - run:
+          <<: *build
+      - run:
+          <<: *unit
+      - store_test_results:
+          path: test/results
+  - &build_and_deploy
+    <<: *defaults
+    resource_class: large
+    steps:
+      - checkout
+      - run:
+          <<: *setup
+      - run:
+          <<: *lint
+      - run:
+          <<: *build
+      - run:
+          <<: *unit
+      - run:
+          <<: *setup_python
+      - run:
+          <<: *deploy
+      - run:
+          <<: *integration
       - store_test_results:
           path: test/results
       - run:
@@ -74,49 +83,6 @@ aliases:
           command: tar -cvzf build.tar build
       - store_artifacts:
           path: build.tar
-  - &deploy
-    <<: *defaults
-    steps:
-      - *restore_git_cache
-      - checkout
-      - *restore_npm_cache
-      - *restore_build_cache
-      - run:
-          name: "setup python"
-          command: |
-            curl https://bootstrap.pypa.io/pip/3.5/get-pip.py -o get-pip.py
-            python3 get-pip.py pip==21.0.1
-            pip install s3cmd==2.1.0
-      - run:
-          name: "deploy"
-          command: |
-            npm run deploy
-  - &integration_jest
-    <<: *defaults
-    steps:
-      - *restore_git_cache
-      - checkout
-      - *restore_npm_cache
-      - run:
-          name: "integration tests with Jest"
-          command: |
-            JEST_JUNIT_OUTPUT_NAME=integration-jest-results.xml npm run test:integration:jest:remote -- --reporters=jest-junit
-      - store_test_results:
-          path: test/results
-  - &integration_tap
-    <<: *defaults
-    steps:
-      - *restore_git_cache
-      - checkout
-      - *restore_npm_cache
-      - run:
-          name: "integration tests with Tap"
-          command: |
-            mkdir ./test/results
-            npm run test:smoke:sauce -- --output-file ./test/results/integration-raw-tap.tap
-            npm run test:smoke:convertReportToXunit
-      - store_test_results:
-          path: test/results
   - &update-translations
     <<: *defaults
     steps:
@@ -128,107 +94,34 @@ aliases:
           name: "run i18n script"
           command: npm run i18n:push
 
+# build-test-deploy requires two separately named jobs
 jobs:
-  build-staging:
+  build-and-deploy-staging:
-    <<: *build
+    <<: *build_and_deploy
-  build-production:
+  build-and-deploy-production:
-    <<: *build
+    <<: *build_and_deploy
-  deploy-staging:
-    <<: *deploy
-  deploy-production:
-    <<: *deploy
-  integration-staging-jest:
-    <<: *integration_jest
-  integration-staging-tap:
-    <<: *integration_tap
-  integration-production-jest:
-    <<: *integration_jest
-  integration-production-tap:
-    <<: *integration_tap
   update-translations:
     <<: *update-translations
+  build-no-deploy:
+    <<: *build_no_deploy
 
 workflows:
   build-test-deploy:
     jobs:
-      - build-staging:
+      - build-and-deploy-staging:
           context:
             - scratch-www-all
             - scratch-www-staging
-          filters:
-            branches:
-              ignore:
-                - master
-      - build-production:
-          context:
-            - scratch-www-all
-            - scratch-www-production
-          filters:
-            branches:
-              only:
-                - master
-      - deploy-staging:
-          context:
-            - scratch-www-all
-            - scratch-www-staging
-          requires:
-            - build-staging
           filters:
             branches:
               only:
                 - develop
                 - /^hotfix\/.*/
                 - /^release\/.*/
-      - deploy-production:
+      - build-and-deploy-production:
           context:
             - scratch-www-all
             - scratch-www-production
-          requires:
-            - build-production
-          filters:
-            branches:
-              only:
-                - master
-      - integration-staging-jest:
-          context:
-            - scratch-www-all
-            - scratch-www-staging
-          requires:
-            - deploy-staging
-          filters:
-            branches:
-              only:
-                - develop
-                - /^hotfix\/.*/
-                - /^release\/.*/
-      - integration-staging-tap:
-          context:
-            - scratch-www-all
-            - scratch-www-staging
-          requires:
-            - deploy-staging
-          filters:
-            branches:
-              only:
-                - develop
-                - /^hotfix\/.*/
-                - /^release\/.*/
-      - integration-production-jest:
-          context:
-            - scratch-www-all
-            - scratch-www-production
-          requires:
-            - deploy-production
-          filters:
-            branches:
-              only:
-                - master
-      - integration-production-tap:
-          context:
-            - scratch-www-all
-            - scratch-www-production
-          requires:
-            - deploy-production
           filters:
             branches:
               only:
@@ -249,3 +142,13 @@ workflows:
             branches:
               only:
                 - develop
+  build-test-no-deploy:
+    jobs:
+      - build-no-deploy:
+          filters:
+            branches:
+              ignore:
+                - develop
+                - master
+                - /^hotfix\/.*/
+                - /^release\/.*/

package.json

@@ -7,14 +7,8 @@
     "test": "npm run test:lint && npm run build && npm run test:unit",
     "test:lint": "eslint . --ext .js,.jsx,.json",
     "test:lint:ci": "eslint . --ext .js,.jsx,.json --format junit -o ./test/results/lint-results.xml",
-    "test:integration": "npm run test:integration:jest && npm run test:smoke",
+    "test:integration": "jest ./test/integration/*.test.js --reporters=default --maxWorkers=5",
-    "test:integration:jest": "jest ./test/integration/*.test.js --reporters=default --runInBand",
+    "test:integration:remote": "SMOKE_REMOTE=true jest ./test/integration/*.test.js --reporters=default --maxWorkers=5",
-    "test:integration:remote": "npm run test:integration:jest:remote && npm run test:smoke:sauce",
-    "test:integration:jest:remote": "SMOKE_REMOTE=true jest ./test/integration/*.test.js --reporters=default --runInBand",
-    "test:smoke": "tap ./test/integration-legacy/smoke-testing/*.js --timeout=3600 --no-coverage -R classic",
-    "test:smoke:verbose": "tap ./test/integration-legacy/smoke-testing/*.js --timeout=3600 --no-coverage -R spec",
-    "test:smoke:sauce": "SMOKE_REMOTE=true tap ./test/integration-legacy/smoke-testing/*.js --timeout=60000 --no-coverage -R classic",
-    "test:smoke:convertReportToXunit": "tap ./test/results/integration-raw-tap.tap --no-coverage -R xunit > ./test/results/integration-tap-results.xml",
     "test:unit": "npm run test:unit:jest && npm run test:unit:tap",
     "test:unit:jest": "npm run test:unit:jest:unit && npm run test:unit:jest:localization",
     "test:unit:jest:unit": "jest ./test/unit/ --reporters=default",
@@ -59,12 +53,13 @@
     "react-helmet": "5.2.0",
     "react-router-dom": "5.2.0",
     "react-use": "^17.3.1",
+    "react-twitter-embed": "^3.0.3",
     "scratch-parser": "5.0.0",
     "scratch-storage": "0.5.1"
   },
   "devDependencies": {
     "@formatjs/intl-locale": "2.4.34",
-    "@formatjs/intl-pluralrules": "4.0.28",
+    "@formatjs/intl-pluralrules": "4.1.0",
     "@formatjs/intl-relativetimeformat": "8.1.8",
     "async": "3.1.0",
     "autoprefixer": "6.3.6",
@@ -73,12 +68,13 @@
     "babel-eslint": "10.0.3",
     "babel-loader": "7.1.0",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "babel-plugin-transform-async-to-generator": "6.24.1",
     "babel-plugin-transform-object-rest-spread": "6.26.0",
     "babel-plugin-transform-require-context": "0.1.1",
     "babel-preset-es2015": "6.22.0",
     "babel-preset-react": "6.22.0",
     "bowser": "1.9.4",
-    "chromedriver": "94.0.0",
+    "chromedriver": "96.0.0",
     "classnames": "2.2.5",
     "cookie": "0.4.1",
     "copy-webpack-plugin": "4.6.0",
@@ -131,10 +127,11 @@
     "redux": "3.5.2",
     "redux-mock-store": "1.5.4",
     "redux-thunk": "2.0.1",
+    "regenerator-runtime": "0.13.9",
     "sass-loader": "6.0.6",
-    "scratch-gui": "0.1.0-prerelease.20211020093753",
+    "scratch-gui": "0.1.0-prerelease.20220202135032",
-    "scratch-l10n": "3.14.20211015031515",
+    "scratch-l10n": "3.14.20220204031519",
-    "selenium-webdriver": "3.6.0",
+    "selenium-webdriver": "4.1.0",
     "slick-carousel": "1.6.0",
     "style-loader": "0.12.3",
     "tap": "14.11.0",

src/_colors.scss

@@ -22,6 +22,8 @@ $ui-dark-gray: hsla(0, 0, 70, 1); //#B3B3B3
 
 $background-color: hsla(0, 0, 99, 1); //#FDFDFD
 
+$motion-blue-3: hsla(215, 60, 50, 1);//#3373CC
+
 /* UI Secondary Colors */
 /* 3.0 colors */
 /* Using www naming convention for now, should be consistent with gui */

src/components/dropdown-banner/banner.scss

@@ -3,7 +3,7 @@
 $navigation-height: 50px;
 
 .banner {
-    position: fixed;
+    position: sticky;
     top: $navigation-height;
     z-index: 9;
     box-shadow: 0 1px 1px $ui-dark-gray;

src/components/dropdown-banner/email-confirmation/banner.jsx

@@ -0,0 +1,54 @@
+/* eslint-disable react/jsx-no-bind */
+import React, {useState} from 'react';
+import PropTypes from 'prop-types';
+import DropdownBanner from '../banner.jsx';
+const FormattedMessage = require('react-intl').FormattedMessage;
+
+const EmailConfirmationModal = require('../../../components/modal/email-confirmation/modal.jsx');
+
+const EmailConfirmationBanner = ({onRequestDismiss}) => {
+
+    const [showEmailConfirmationModal, setShowEmailConfirmationModal] = useState(false);
+    return (
+        <React.Fragment>
+            {(showEmailConfirmationModal && <EmailConfirmationModal
+                isOpen
+                onRequestClose={() => {
+                    setShowEmailConfirmationModal(false);
+                }}
+            />)}
+            <DropdownBanner
+                className="warning"
+                key="confirmedEmail"
+                onRequestDismiss={onRequestDismiss}
+            >
+                <FormattedMessage
+                    id="emailConfirmationBanner.confirm"
+                    values={{
+                        confirmLink: (
+                            <a
+                                className="showEmailConfirmationModalLink"
+                                href="#"
+                                onClick={() => {
+                                    setShowEmailConfirmationModal(true);
+                                }}
+                            >
+                                <FormattedMessage id="emailConfirmationBanner.confirmLinkText" />
+                            </a>
+                        ),
+                        faqLink: (
+                            <a href="/faq/#accounts">
+                                <FormattedMessage id="emailConfirmationBanner.faqLinkText" />
+                            </a>
+                        )
+                    }}
+                />
+            </DropdownBanner>
+        </React.Fragment>);
+};
+
+EmailConfirmationBanner.propTypes = {
+    onRequestDismiss: PropTypes.func
+};
+
+module.exports = EmailConfirmationBanner;

src/components/forms/radio-group.jsx

@@ -11,7 +11,7 @@ require('./radio-group.scss');
 
 const RadioGroup = props => (
     <FRCRadioGroup
-        className={classNames('radio-group', props.className)}
+        rowClassName={classNames('radio-group', props.className)}
         {... props}
     />
 );

src/components/grid/grid.jsx

@@ -32,6 +32,7 @@ const Grid = props => (
                             title={item.title}
                             type={'project'}
                             views={item.stats.views}
+                            alt={item.alt}
                         />
                     );
                 }
@@ -41,6 +42,7 @@ const Grid = props => (
                         key={key}
                         owner={item.owner}
                         src={item.image}
+                        alt={item.alt}
                         title={item.title}
                         type={'gallery'}
                     />

src/components/modal/email-confirmation/modal.jsx

@@ -0,0 +1,101 @@
+import React, {useState} from 'react';
+const connect = require('react-redux').connect;
+import PropTypes from 'prop-types';
+import {FormattedMessage} from 'react-intl';
+
+import Modal from '../base/modal.jsx';
+require('./modal.scss');
+
+const EmailConfirmationModal = ({
+    email, onRequestClose, isOpen
+}) => {
+    const [showEmailTips, setShowEmailTips] = useState(false);
+
+    return (
+        <Modal
+            isOpen={isOpen}
+            showCloseButton
+            useStandardSizes
+            onRequestClose={onRequestClose}
+        >
+            <div className="top-close-bar" />
+            <div className="modal-main-content">
+                <img
+                    className="modal-image"
+                    alt="email-confirmation-illustration"
+                    src="/svgs/modal/confirm-email-illustration.svg"
+                />
+
+                <div className="modal-text-content">
+                    {showEmailTips ?
+                        (<React.Fragment>
+                            <h1><FormattedMessage id="emailConfirmationModal.confirmingTips" /></h1>
+                            <ul>
+                                <li><FormattedMessage id="emailConfirmationModal.tipWaitTenMinutes" /></li>
+                                <li><FormattedMessage id="emailConfirmationModal.tipCheckSpam" /></li>
+                                <li><FormattedMessage
+                                    id="emailConfirmationModal.correctEmail"
+                                    values={
+                                        {accountSettings:
+                                            (<a href="/accounts/email_change/">
+                                                <FormattedMessage id="emailConfirmationModal.accountSettings" />
+                                            </a>)
+                                        }
+                                    }
+                                /></li>
+                            </ul>
+                        </React.Fragment>) :
+                        (<React.Fragment>
+                            <h1><FormattedMessage id="emailConfirmationModal.confirm" /></h1>
+                            <p><FormattedMessage id="emailConfirmationModal.wantToShare" /></p>
+                            <p><FormattedMessage id="emailConfirmationModal.clickEmailLink" /></p>
+                            <p><b>{email}</b></p>
+                            <a href="/accounts/email_change/">
+                                <FormattedMessage id="emailConfirmationModal.resendEmail" />
+                            </a>
+                        </React.Fragment>)
+                    }
+                </div>
+            </div>
+            <div className="guide-footer">
+                {showEmailTips ?
+                    (<React.Fragment>
+                        <FormattedMessage
+                            id="emailConfirmationModal.wantMoreInfo"
+                            values={
+                                {FAQLink:
+                                    (<a href="/faq#accounts">
+                                        <FormattedMessage id="emailConfirmationModal.checkOutFAQ" />
+                                    </a>)
+                                }
+                            }
+                        />
+                    </React.Fragment>) :
+                    (<React.Fragment>
+                        <FormattedMessage
+                            id="emailConfirmationModal.havingTrouble"
+                            values={{tipsLink: (
+                                <a
+                                    onClick={e => { // eslint-disable-line react/jsx-no-bind
+                                        e.preventDefault();
+                                        setShowEmailTips(true);
+                                    }}
+                                >
+                                    <FormattedMessage id="emailConfirmationModal.checkOutTips" />
+                                </a>)}}
+                        />
+                    </React.Fragment>)}
+            </div>
+        </Modal>);
+};
+
+EmailConfirmationModal.propTypes = {
+    email: PropTypes.string,
+    isOpen: PropTypes.bool,
+    onRequestClose: PropTypes.func
+};
+const mapStateToProps = state => ({
+    email: state.session.session.user.email
+});
+
+module.exports = connect(mapStateToProps)(EmailConfirmationModal);

src/components/modal/email-confirmation/modal.scss

@@ -0,0 +1,45 @@
+@import "../../../colors";
+@import "../../../frameless";
+
+
+.modal-content{
+    border-radius: 4px;
+    overflow: hidden;
+    max-width: 500px;
+
+    h1{
+        font-size: 2rem;
+        line-height: 2.5rem;
+    }
+
+    .modal-content-close{
+        top: 5px;
+        right: 5px;
+    }
+    
+    .modal-main-content{
+        display: flex;
+    }
+
+    .modal-text-content{
+        margin-top: 30px;
+        margin-bottom: 30px;
+        margin-right: 20px;
+        margin-left: 20px;
+    }
+
+    .modal-image{
+        margin-left: -70px;
+    }
+
+    .top-close-bar{
+        height: 44px;
+        background-color: #0EBD8C;
+    }
+
+    .guide-footer{
+        text-align: center;
+        border-top: 1px solid rgba(77, 151, 255, 0.15);
+        padding: 20px;
+    }
+}

src/components/people-grid/people-grid.scss

@@ -9,6 +9,7 @@
     flex-wrap: wrap;
     flex-flow: row wrap;
     justify-content: center;
+    padding-left: 0px;
 }
 
 .avatar-item {

src/components/registration/steps.jsx

@@ -792,7 +792,7 @@ class OrganizationStep extends React.Component {
                             }}
                         />
                         <div className="organization-type">
-                            <b><intl.FormattedMessage id="teacherRegistration.orgType" /></b>
+                            <b className="row-label"><intl.FormattedMessage id="teacherRegistration.orgType" /></b>
                             <p className="help-text">
                                 <intl.FormattedMessage id="teacherRegistration.checkAll" />
                             </p>
@@ -833,7 +833,7 @@ class OrganizationStep extends React.Component {
                             />
                         </div>
                         <div className="url-input">
-                            <b><intl.FormattedMessage id="general.website" /></b>
+                            <b className="row-label"><intl.FormattedMessage id="general.website" /></b>
                             <p className="help-text">
                                 <intl.FormattedMessage id="teacherRegistration.notRequired" />
                             </p>

src/components/registration/steps.scss

@@ -26,6 +26,18 @@
         }
     }
 
+    .row {
+        label {
+            font-weight: bold;
+        }
+
+        .checkbox {
+            label {
+                font-weight: 300;
+            }
+        }
+    }
+
     .help-text {
         margin: .25rem 0;
         text-align: left;
@@ -66,6 +78,10 @@
     &.demographics-step {
         .radio {
             margin: 1.5rem 1.5rem 0 0;
+
+            label {
+                font-weight: 300;
+            }
         }
 
         input[type="radio"] {

src/components/text-and-media-snippet/text-and-media-snippet.jsx

@@ -0,0 +1,108 @@
+const classNames = require('classnames');
+const PropTypes = require('prop-types');
+const React = require('react');
+const VideoPreview = require('../video-preview/video-preview.jsx');
+const MediaQuery = require('react-responsive').default;
+const frameless = require('../../lib/frameless');
+
+require('./text-and-media-snippet.scss');
+
+// For left and right mode:
+// Regular means text is on the left and media is on the right; reverse means these are swapped.
+
+// For top and bottom mode:
+// Regular means text is on top and media is on the bottom; and reverse means these are swapped.
+
+const TextAndMediaSnippet = props => (
+    <div className={classNames('text-and-media-snippet', props.className)}>
+        <div className="half">
+            <h4>{props.title}</h4>
+            <p>
+                {props.children}
+            </p>
+        </div>
+
+        <div className="half">
+            {props.type === 'video' &&
+                <div>
+                    <MediaQuery
+                        minWidth={frameless.desktop}
+                    >
+                        <VideoPreview
+                            buttonMessage=""
+                            thumbnail={props.largeImage}
+                            thumbnailWidth="420"
+                            videoHeight={420 * .568}
+                            videoId={props.videoId}
+                            videoWidth="420"
+                            alt={props.alt}
+                            spinnerColor={props.spinnerColor}
+                        />
+                    </MediaQuery>
+                    <MediaQuery
+                        minWidth={frameless.tabletPortrait}
+                        maxWidth={frameless.desktop - 1}
+                    >
+                        <VideoPreview
+                            buttonMessage=""
+                            thumbnail={props.largeImage}
+                            thumbnailWidth="620"
+                            videoHeight={620 * .568}
+                            videoId={props.videoId}
+                            videoWidth="620"
+                            alt={props.alt}
+                            spinnerColor={props.spinnerColor}
+                        />
+                    </MediaQuery>
+                    <MediaQuery
+                        minWidth={frameless.mobile}
+                        maxWidth={frameless.tabletPortrait - 1}
+                    >
+                        <VideoPreview
+                            buttonMessage=""
+                            thumbnail={props.largeImage}
+                            thumbnailWidth="460"
+                            videoHeight={460 * .568}
+                            videoId={props.videoId}
+                            videoWidth="460"
+                            alt={props.alt}
+                            spinnerColor={props.spinnerColor}
+                        />
+                    </MediaQuery>
+                    <MediaQuery maxWidth={frameless.mobile - 1}>
+                        <VideoPreview
+                            buttonMessage=""
+                            thumbnail={props.largeImage}
+                            thumbnailWidth="300"
+                            videoHeight={300 * .568}
+                            videoId={props.videoId}
+                            videoWidth="300"
+                            alt={props.alt}
+                            spinnerColor={props.spinnerColor}
+                        />
+                    </MediaQuery>
+                </div>
+            }
+            {props.type !== 'video' &&
+                <img
+                    className="large"
+                    src={props.largeImage}
+                    alt={props.alt}
+                />
+            }
+        </div>
+    </div>
+);
+
+TextAndMediaSnippet.propTypes = {
+    children: PropTypes.node,
+    title: PropTypes.string,
+    largeImage: PropTypes.string,
+    className: PropTypes.string,
+    videoId: PropTypes.string,
+    type: PropTypes.string,
+    alt: PropTypes.string,
+    spinnerColor: PropTypes.string
+};
+
+module.exports = TextAndMediaSnippet;

src/components/text-and-media-snippet/text-and-media-snippet.scss

@@ -0,0 +1,123 @@
+@import "../../frameless";
+
+.text-and-media-snippet{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 50px auto;
+  
+  &.top {
+    margin-top: 75px;
+  }
+
+  &.regular {
+    flex-direction: row;
+  }
+  &.reverse {
+    flex-direction: row-reverse;
+  }
+
+  &.full-width{
+    flex-direction: column;
+    max-width: 780px;
+    margin: auto;
+
+    @media #{$intermediate} {
+      max-width: 620px;
+    }
+  
+    @media #{$medium} {
+      max-width: 460px;
+    }
+  
+    @media #{$small} {
+      max-width: 300px;
+    }
+
+    .half{
+      width: 100%;
+      img.large{
+        width: 100%;
+      }
+    }
+  }
+
+  @media #{$intermediate-and-smaller} {
+    text-align: center;
+
+    margin: 32px auto;
+
+    &.top {
+      margin-top: 32px;
+    }
+
+    &.regular {
+      flex-direction: column;
+    }
+    &.reverse {
+      flex-direction: column-reverse;
+    }
+  }
+
+  &.regular, &.reverse {
+    @media #{$intermediate} {
+      max-width: 620px;
+    }
+  
+    @media #{$medium} {
+      max-width: 460px;
+    }
+  
+    @media #{$small} {
+      max-width: 300px;
+    }
+
+    .half {
+      max-width: 400px;
+      width: 100%;
+
+      @media #{$intermediate} {
+        max-width: 620px;
+      }
+    
+      @media #{$medium} {
+        max-width: 460px;
+      }
+    
+      @media #{$small} {
+        max-width: 300px;
+      }
+
+      @media #{$intermediate-and-smaller} {
+        width: 100%;
+        margin-bottom: 20px;
+      }
+      img.large{
+        max-width: 420px;
+        width: 100%;
+      }
+    }
+  }
+
+  h4 {
+    font-size: 1.5rem;
+  }
+
+  &.big-title {
+    h4 {
+      font-size: 2.25rem;
+      line-height: 3rem;
+    }
+
+    margin: 25px auto;
+  }  
+
+  p {
+    font-size: 1rem;
+    text-align: left;
+
+    @media #{$intermediate-and-smaller} {
+      text-align: center;
+    }
+  }
+}

src/components/timeline-card/timeline-card.jsx

@@ -0,0 +1,83 @@
+const classNames = require('classnames');
+const PropTypes = require('prop-types');
+const React = require('react');
+const VideoPreview = require('../video-preview/video-preview.jsx');
+const frameless = require('../../lib/frameless.js');
+const MediaQuery = require('react-responsive').default;
+
+
+require('./timeline-card.scss');
+
+const TimelineCard = props => (
+    <div className={classNames('timeline-card', props.className)}>
+        <div className="timeline-content">
+            <a
+                href={props.link}
+                rel="noreferrer noopener"
+                target="_blank"
+            >
+                <img
+                    src="../../images/annual-report/2020/Symbols-UI/Open Link.svg"
+                    alt="open link"
+                />
+            </a>
+            <h5>{props.date}</h5>
+            <h4>{props.title}</h4>
+            <p>{props.text}</p>
+            {props.videoId &&
+                <div>
+                    <MediaQuery minWidth={frameless.mobile}>
+                        <VideoPreview
+                            buttonMessage=""
+                            thumbnail={props.image}
+                            thumbnailWidth="100%"
+                            videoHeight={430 * .565}
+                            videoId={props.videoId}
+                            videoWidth="430"
+                            alt={props.alt}
+                            spinnerColor={props.spinnerColor}
+                        />
+                    </MediaQuery>
+                    <MediaQuery maxWidth={frameless.mobile - 1}>
+                        <VideoPreview
+                            buttonMessage=""
+                            thumbnail={props.image}
+                            thumbnailWidth="100%"
+                            videoHeight={270 * .565}
+                            videoId={props.videoId}
+                            videoWidth="270"
+                            alt={props.alt}
+                            spinnerColor={props.spinnerColor}
+                        />
+                    </MediaQuery>
+                </div>
+            }
+            {!props.videoId && props.image &&
+                <img
+                    className="large"
+                    src={props.image}
+                    alt={props.alt}
+                />
+            }
+            {props.attribution &&
+                <p>{props.projectBy} {props.attribution}</p>
+            }
+        </div>
+    </div>
+);
+
+TimelineCard.propTypes = {
+    link: PropTypes.string,
+    date: PropTypes.string,
+    title: PropTypes.string,
+    text: PropTypes.string,
+    image: PropTypes.string,
+    videoId: PropTypes.string,
+    attribution: PropTypes.string,
+    className: PropTypes.string,
+    alt: PropTypes.string,
+    projectBy: PropTypes.string,
+    spinnerColor: PropTypes.string
+};
+
+module.exports = TimelineCard;

src/components/timeline-card/timeline-card.scss

@@ -0,0 +1,57 @@
+@import "../../colors";
+@import "../../frameless";
+$timeline-breakpoint: "only screen and (max-width : 1030px)";
+
+.timeline-card{
+  max-width: 460px;
+
+  @media #{$small} {
+    max-width: 300px;
+  }
+
+  background-color: $ui-white;
+  border-radius: 8px;
+  position: relative;
+  z-index: 1;
+  margin-bottom: 30px;
+
+  .timeline-content {
+    margin: 15px;
+    text-align: left;
+    p {
+      margin: 10px 0 0;
+      line-height: 1.5;
+    }
+    a{
+      position: absolute;
+      right: 15px;
+      top: 15px;
+    }
+
+    img{
+      margin-top: 10px;
+      width: 100%;
+    }
+    .video-preview{
+      margin-top: 15px;
+      img{
+        margin-top: 0px;
+      }
+    }
+  }
+  &.center{
+    margin: 0 auto 30px;
+  }
+  &.left{
+    margin-left: calc((100% - 980px)/2);
+    @media #{$timeline-breakpoint} {
+      margin: 0 auto 30px;
+    }
+  }
+  &.right{
+    margin-left: calc(100% - ((100% - 980px)/2) - 470px);
+    @media #{$timeline-breakpoint} {
+      margin: 0 auto 30px;
+    }
+  }
+}

src/components/video-preview/video-preview.jsx

@@ -35,11 +35,21 @@ class VideoPreview extends React.Component {
 
     render () {
         return (
-            <div className="video-preview">
+            // Adding a width to this div allows the videoFoam property on the embedded video
+            // to fill the size of the div once fullscreen has been entered and exited
+            <div
+                className="video-preview"
+                style={{width: `${this.props.videoWidth}px`}}
+            >
                 {this.state.videoOpen ?
                     (
                         <div className="spinner-video-container">
-                            {this.state.spinnerVisible ? <Spinner className="loading-spinner" /> : null}
+                            {this.state.spinnerVisible ?
+                                <Spinner
+                                    className="loading-spinner"
+                                    color={this.props.spinnerColor}
+                                /> : null
+                            }
                             <Video
                                 className="video"
                                 height={this.props.videoHeight}
@@ -64,7 +74,9 @@ class VideoPreview extends React.Component {
                                     width: `${this.props.thumbnailWidth}px` || 'auto',
                                     height: `${this.props.thumbnailHeight}px` || 'auto'
                                 }}
+                                alt={this.props.alt}
                             />
+                            {this.props.buttonMessage.length > 0 &&
                                 <a
                                     onClick={this.handleShowVideo}
                                 >
@@ -72,6 +84,7 @@ class VideoPreview extends React.Component {
                                         {this.props.buttonMessage}
                                     </div>
                                 </a>
+                            }
                         </div>
                     )
                 }
@@ -87,7 +100,9 @@ VideoPreview.propTypes = {
     thumbnailWidth: PropTypes.string,
     videoHeight: PropTypes.string,
     videoId: PropTypes.string.isRequired,
-    videoWidth: PropTypes.string
+    videoWidth: PropTypes.string,
+    alt: PropTypes.string,
+    spinnerColor: PropTypes.string
 };
 
 module.exports = VideoPreview;

src/components/video/video.jsx

@@ -55,7 +55,7 @@ class Video extends React.Component {
                     frameBorder="0" // deprecated attribute
                     height={this.props.height}
                     scrolling="no" // deprecated attribute
-                    src={`https://fast.wistia.net/embed/iframe/${this.props.videoId}?seo=false&videoFoam=true`}
+                    src={`https://fast.wistia.net/embed/iframe/${this.props.videoId}?seo=false&videoFoam=true&autoplay=true`}
                     title={this.props.title}
                     width={this.props.width}
                 />

src/components/world-map/world-map.jsx

@@ -40,7 +40,7 @@ const WorldMap = props => (
                         family: "'Helvetica Neue Regular', sans-serif"
                     }
                 },
-                colorscale: [[0, 'rgba(14,189,140, .05)'], [1, 'rgba(14,189,140, 1)']],
+                colorscale: [[0, props.minColor], [1, props.maxColor]],
                 showscale: false,
                 marker: {
                     line: {
@@ -83,7 +83,9 @@ const WorldMap = props => (
 WorldMap.propTypes = {
     colorIndex: PropTypes.arrayOf(PropTypes.number),
     countryData: PropTypes.arrayOf(PropTypes.number),
-    countryNames: PropTypes.arrayOf(PropTypes.string)
+    countryNames: PropTypes.arrayOf(PropTypes.string),
+    minColor: PropTypes.string,
+    maxColor: PropTypes.string
 };
 
 module.exports = WorldMap;

src/init.js

@@ -1,11 +1,13 @@
+import 'regenerator-runtime/runtime'; // Needed for async/await
 const jar = require('./lib/jar');
+import intlPolyfill from './lib/intl-polyfill';
 
 /**
  * -----------------------------------------------------------------------------
  * L10N
  * -----------------------------------------------------------------------------
  */
-(() => {
+(async () => {
     /*
      * Bind locale code from cookie if available. Uses navigator language API as a fallback.
      *
@@ -35,6 +37,7 @@ const jar = require('./lib/jar');
 
     window._locale = updateLocale();
     document.documentElement.lang = window._locale;
+    await intlPolyfill(window._locale);
 })();
 
 /**

src/l10n.json

@@ -245,6 +245,24 @@
     "registration.welcomeStepTitle": "Hurray! Welcome to Scratch!",
     "registration.welcomeStepTitleNonEducator": "Welcome to Scratch, {username}!",
 
+    "emailConfirmationBanner.confirm": "{confirmLink} to enable sharing. {faqLink}",
+    "emailConfirmationBanner.confirmLinkText": "Confirm your email",
+    "emailConfirmationBanner.faqLinkText": "Having trouble?",
+
+    "emailConfirmationModal.confirm": "Confirm your email",
+    "emailConfirmationModal.wantToShare": "Want to share on Scratch?",
+    "emailConfirmationModal.clickEmailLink": "Confirm your email address by clicking the link in the email we sent to:",
+    "emailConfirmationModal.resendEmail": "Resend confirmation email",
+    "emailConfirmationModal.confirmingTips": "Tips for confirming your email address",
+    "emailConfirmationModal.tipWaitTenMinutes": "Wait for ten minutes. The email may take a while to arrive.",
+    "emailConfirmationModal.tipCheckSpam": "Check your spam folder.",
+    "emailConfirmationModal.correctEmail": "Make sure your email address is correct, see {accountSettings}.",
+    "emailConfirmationModal.accountSettings": "Account Settings",
+    "emailConfirmationModal.wantMoreInfo": "Want more information? {FAQLink}",
+    "emailConfirmationModal.checkOutFAQ": "Check out the FAQ",
+    "emailConfirmationModal.havingTrouble": "Having Trouble? {tipsLink}",
+    "emailConfirmationModal.checkOutTips": "Check out these tips",
+
     "thumbnail.by": "by",
     "report.error": "Something went wrong when trying to send your message. Please try again.",
     "report.project": "Report Project",

src/lib/format-time.js

@@ -1,8 +1,6 @@
 // IMPORTANT: any changes to the time algorithm also need to be made in the corresponding
 // scratchr2 file 'lib/format-time.js'
 
-require('./relative-time-polyfill');
-
 /**
  Given a timestamp in the future, calculate the largest, closest unit to show.
  On the high end we stop at hours. e.g. 15 days is still counted in hours not days or weeks.

src/lib/frameless.js

@@ -3,8 +3,8 @@
  */
 const frameless = {
     desktop: 942,
-    mobileIntermediate: 640,
     tabletPortrait: 768,
+    mobileIntermediate: 640,
     mobile: 480
 };
 

src/lib/intl-polyfill.js

@@ -0,0 +1,313 @@
+// this file should only be `required` in the format-time
+// when Intl.RelativeTimeFormat is not available (Safari < 14), but
+// we're not currently able to do the code splitting in www, and it
+// is always included. To reduce the amount of data that's loaded limit
+// the number of languages loaded to just the top few that are still using
+// safari <14. These seven account for most uses.
+// relativetimeformat depends on locale which also needs to be polyfilled in
+// safari <14
+// The plural rules is required for safari 12.
+import 'regenerator-runtime/runtime'; // Needed for async/await
+import {shouldPolyfill as shouldPolyfillLocale} from '@formatjs/intl-locale/should-polyfill';
+import {shouldPolyfill as shouldPolyfillRelativeTimeFormat} from '@formatjs/intl-relativetimeformat/should-polyfill';
+import {shouldPolyfill as shouldPolyfillPluralRules} from '@formatjs/intl-pluralrules/should-polyfill';
+/**
+ * polyfill all the parts needed from intl
+ * @param  {string} locale currently selected locale
+ * @return {Promise}       returns a promise that resolves when everything is loaded
+ */
+const intlPolyfill = async function (locale) {
+    if (!(shouldPolyfillLocale() ||
+        shouldPolyfillPluralRules(locale) ||
+        shouldPolyfillRelativeTimeFormat(locale))) {
+        return;
+    }
+
+    if (shouldPolyfillRelativeTimeFormat(locale)) {
+        await import('@formatjs/intl-relativetimeformat/polyfill');
+    }
+
+    if (shouldPolyfillPluralRules(locale)) {
+        await import('@formatjs/intl-pluralrules/polyfill');
+    }
+
+    if (shouldPolyfillLocale(locale)) {
+        await import('@formatjs/intl-locale/polyfill');
+    }
+
+    switch (locale.toLowerCase().split('-')[0]) {
+    case 'af':
+        await import('@formatjs/intl-relativetimeformat/locale-data/af');
+        await import('@formatjs/intl-pluralrules/locale-data/af');
+        break;
+    case 'ar':
+        await import('@formatjs/intl-relativetimeformat/locale-data/ar');
+        await import('@formatjs/intl-pluralrules/locale-data/ar');
+        break;
+    case 'am':
+        await import('@formatjs/intl-relativetimeformat/locale-data/am');
+        await import('@formatjs/intl-pluralrules/locale-data/am');
+        break;
+    case 'an':
+        await import('@formatjs/intl-relativetimeformat/locale-data/en');
+        await import('@formatjs/intl-pluralrules/locale-data/an');
+        break;
+    case 'az':
+        await import('@formatjs/intl-relativetimeformat/locale-data/az');
+        await import('@formatjs/intl-pluralrules/locale-data/az');
+        break;
+    case 'id':
+        await import('@formatjs/intl-relativetimeformat/locale-data/id');
+        await import('@formatjs/intl-pluralrules/locale-data/id');
+        break;
+    case 'bn':
+        await import('@formatjs/intl-relativetimeformat/locale-data/bn');
+        await import('@formatjs/intl-pluralrules/locale-data/bn');
+        break;
+    case 'be':
+        await import('@formatjs/intl-relativetimeformat/locale-data/be');
+        await import('@formatjs/intl-pluralrules/locale-data/be');
+        break;
+    case 'bg':
+        await import('@formatjs/intl-relativetimeformat/locale-data/bg');
+        await import('@formatjs/intl-pluralrules/locale-data/bg');
+        break;
+    case 'ca':
+        await import('@formatjs/intl-relativetimeformat/locale-data/ca');
+        await import('@formatjs/intl-pluralrules/locale-data/ca');
+        break;
+    case 'cs':
+        await import('@formatjs/intl-relativetimeformat/locale-data/cs');
+        await import('@formatjs/intl-pluralrules/locale-data/cs');
+        break;
+    case 'cy':
+        await import('@formatjs/intl-relativetimeformat/locale-data/cy');
+        await import('@formatjs/intl-pluralrules/locale-data/cy');
+        break;
+    case 'da':
+        await import('@formatjs/intl-relativetimeformat/locale-data/da');
+        await import('@formatjs/intl-pluralrules/locale-data/da');
+        break;
+    case 'de':
+        await import('@formatjs/intl-relativetimeformat/locale-data/de');
+        await import('@formatjs/intl-pluralrules/locale-data/de');
+        break;
+    case 'et':
+        await import('@formatjs/intl-relativetimeformat/locale-data/et');
+        await import('@formatjs/intl-pluralrules/locale-data/et');
+        break;
+    case 'el':
+        await import('@formatjs/intl-relativetimeformat/locale-data/el');
+        await import('@formatjs/intl-pluralrules/locale-data/el');
+        break;
+    case 'en':
+        await import('@formatjs/intl-relativetimeformat/locale-data/en');
+        await import('@formatjs/intl-pluralrules/locale-data/en');
+        break;
+    case 'es':
+    case 'rap':
+    case 'qu':
+        await import('@formatjs/intl-relativetimeformat/locale-data/es');
+        await import('@formatjs/intl-pluralrules/locale-data/es');
+        break;
+    case 'eu':
+        await import('@formatjs/intl-relativetimeformat/locale-data/eu');
+        await import('@formatjs/intl-pluralrules/locale-data/eu');
+        break;
+    case 'fa':
+        await import('@formatjs/intl-relativetimeformat/locale-data/fa');
+        await import('@formatjs/intl-pluralrules/locale-data/fa');
+        break;
+    case 'fr':
+    case 'ht':
+        await import('@formatjs/intl-relativetimeformat/locale-data/fr');
+        await import('@formatjs/intl-pluralrules/locale-data/fr');
+        break;
+    case 'fy':
+        await import('@formatjs/intl-relativetimeformat/locale-data/fy');
+        await import('@formatjs/intl-pluralrules/locale-data/fy');
+        break;
+    case 'ga':
+        await import('@formatjs/intl-relativetimeformat/locale-data/ga');
+        await import('@formatjs/intl-pluralrules/locale-data/ga');
+        break;
+    case 'gd':
+        await import('@formatjs/intl-relativetimeformat/locale-data/gd');
+        await import('@formatjs/intl-pluralrules/locale-data/gd');
+        break;
+    case 'gl':
+        await import('@formatjs/intl-relativetimeformat/locale-data/gl');
+        await import('@formatjs/intl-pluralrules/locale-data/gl');
+        break;
+    case 'ko':
+        await import('@formatjs/intl-relativetimeformat/locale-data/ko');
+        await import('@formatjs/intl-pluralrules/locale-data/ko');
+        break;
+    case 'hy':
+        await import('@formatjs/intl-relativetimeformat/locale-data/hy');
+        await import('@formatjs/intl-pluralrules/locale-data/hy');
+        break;
+    case 'he':
+        await import('@formatjs/intl-relativetimeformat/locale-data/he');
+        await import('@formatjs/intl-pluralrules/locale-data/he');
+        break;
+    case 'hr':
+        await import('@formatjs/intl-relativetimeformat/locale-data/hr');
+        await import('@formatjs/intl-pluralrules/locale-data/hr');
+        break;
+    case 'xh':
+        await import('@formatjs/intl-relativetimeformat/locale-data/xh');
+        await import('@formatjs/intl-pluralrules/locale-data/xh');
+        break;
+    case 'zu':
+        await import('@formatjs/intl-relativetimeformat/locale-data/zu');
+        await import('@formatjs/intl-pluralrules/locale-data/zu');
+        break;
+    case 'is':
+        await import('@formatjs/intl-relativetimeformat/locale-data/is');
+        await import('@formatjs/intl-pluralrules/locale-data/is');
+        break;
+    case 'it':
+        await import('@formatjs/intl-relativetimeformat/locale-data/it');
+        await import('@formatjs/intl-pluralrules/locale-data/it');
+        break;
+    case 'ka':
+        await import('@formatjs/intl-relativetimeformat/locale-data/ka');
+        await import('@formatjs/intl-pluralrules/locale-data/ka');
+        break;
+    case 'kk':
+        await import('@formatjs/intl-relativetimeformat/locale-data/kk');
+        await import('@formatjs/intl-pluralrules/locale-data/kk');
+        break;
+    case 'sw':
+        await import('@formatjs/intl-relativetimeformat/locale-data/sw');
+        await import('@formatjs/intl-pluralrules/locale-data/sw');
+        break;
+    case 'ku':
+        await import('@formatjs/intl-relativetimeformat/locale-data/ku');
+        await import('@formatjs/intl-pluralrules/locale-data/ku');
+        break;
+    case 'ckb':
+        await import('@formatjs/intl-relativetimeformat/locale-data/ckb');
+        await import('@formatjs/intl-pluralrules/locale-data/ckb');
+        break;
+    case 'lv':
+        await import('@formatjs/intl-relativetimeformat/locale-data/lv');
+        await import('@formatjs/intl-pluralrules/locale-data/lv');
+        break;
+    case 'lt':
+        await import('@formatjs/intl-relativetimeformat/locale-data/lt');
+        await import('@formatjs/intl-pluralrules/locale-data/lt');
+        break;
+    case 'hu':
+        await import('@formatjs/intl-relativetimeformat/locale-data/hu');
+        await import('@formatjs/intl-pluralrules/locale-data/hu');
+        break;
+    case 'mi':
+        await import('@formatjs/intl-relativetimeformat/locale-data/mi');
+        await import('@formatjs/intl-pluralrules/locale-data/en');
+        break;
+    case 'mn':
+        await import('@formatjs/intl-relativetimeformat/locale-data/mn');
+        await import('@formatjs/intl-pluralrules/locale-data/mn');
+        break;
+    case 'nl':
+        await import('@formatjs/intl-relativetimeformat/locale-data/nl');
+        await import('@formatjs/intl-pluralrules/locale-data/nl');
+        break;
+    case 'ja':
+        await import('@formatjs/intl-relativetimeformat/locale-data/ja');
+        await import('@formatjs/intl-pluralrules/locale-data/ja');
+        break;
+    case 'nb':
+        await import('@formatjs/intl-relativetimeformat/locale-data/nb');
+        await import('@formatjs/intl-pluralrules/locale-data/nb');
+        break;
+    case 'nn':
+        await import('@formatjs/intl-relativetimeformat/locale-data/nn');
+        await import('@formatjs/intl-pluralrules/locale-data/nn');
+        break;
+    case 'or':
+        await import('@formatjs/intl-relativetimeformat/locale-data/or');
+        await import('@formatjs/intl-pluralrules/locale-data/or');
+        break;
+    case 'uz':
+        await import('@formatjs/intl-relativetimeformat/locale-data/uz');
+        await import('@formatjs/intl-pluralrules/locale-data/uz');
+        break;
+    case 'th':
+        await import('@formatjs/intl-relativetimeformat/locale-data/th');
+        await import('@formatjs/intl-pluralrules/locale-data/th');
+        break;
+    case 'km':
+        await import('@formatjs/intl-relativetimeformat/locale-data/km');
+        await import('@formatjs/intl-pluralrules/locale-data/km');
+        break;
+    case 'pl':
+        await import('@formatjs/intl-relativetimeformat/locale-data/pl');
+        await import('@formatjs/intl-pluralrules/locale-data/pl');
+        break;
+    case 'pt':
+        await import('@formatjs/intl-relativetimeformat/locale-data/pt');
+        await import('@formatjs/intl-pluralrules/locale-data/pt');
+        break;
+    case 'ro':
+        await import('@formatjs/intl-relativetimeformat/locale-data/ro');
+        await import('@formatjs/intl-pluralrules/locale-data/ro');
+        break;
+    case 'ru':
+        await import('@formatjs/intl-relativetimeformat/locale-data/ru');
+        await import('@formatjs/intl-pluralrules/locale-data/ru');
+        break;
+    case 'nso':
+        await import('@formatjs/intl-relativetimeformat/locale-data/en');
+        await import('@formatjs/intl-pluralrules/locale-data/nso');
+        break;
+    case 'tn':
+        await import('@formatjs/intl-relativetimeformat/locale-data/en');
+        await import('@formatjs/intl-pluralrules/locale-data/tn');
+        break;
+    case 'sk':
+        await import('@formatjs/intl-relativetimeformat/locale-data/sk');
+        await import('@formatjs/intl-pluralrules/locale-data/sk');
+        break;
+    case 'sl':
+        await import('@formatjs/intl-relativetimeformat/locale-data/sl');
+        await import('@formatjs/intl-pluralrules/locale-data/sl');
+        break;
+    case 'sr':
+        await import('@formatjs/intl-relativetimeformat/locale-data/sr');
+        await import('@formatjs/intl-pluralrules/locale-data/sr');
+        break;
+    case 'fi':
+        await import('@formatjs/intl-relativetimeformat/locale-data/fi');
+        await import('@formatjs/intl-pluralrules/locale-data/fi');
+        break;
+    case 'sv':
+        await import('@formatjs/intl-relativetimeformat/locale-data/sv');
+        await import('@formatjs/intl-pluralrules/locale-data/sv');
+        break;
+    case 'vi':
+        await import('@formatjs/intl-relativetimeformat/locale-data/vi');
+        await import('@formatjs/intl-pluralrules/locale-data/vi');
+        break;
+    case 'tr':
+        await import('@formatjs/intl-relativetimeformat/locale-data/tr');
+        await import('@formatjs/intl-pluralrules/locale-data/tr');
+        break;
+    case 'uk':
+        await import('@formatjs/intl-relativetimeformat/locale-data/uk');
+        await import('@formatjs/intl-pluralrules/locale-data/uk');
+        break;
+    case 'zh':
+        await import('@formatjs/intl-relativetimeformat/locale-data/zh');
+        await import('@formatjs/intl-pluralrules/locale-data/zh');
+        break;
+    default:
+        await import('@formatjs/intl-relativetimeformat/locale-data/en');
+        await import('@formatjs/intl-pluralrules/locale-data/en');
+        break;
+    }
+};
+
+export default intlPolyfill;

src/lib/relative-time-polyfill.js

@@ -1,20 +0,0 @@
-// this file should only be `required` in the format-time
-// when Intl.RelativeTimeFormat is not available (Safari < 14), but
-// we're not currently able to do the code splitting in www, and it
-// is always included. To reduce the amount of data that's loaded limit
-// the number of languages loaded to just the top few that are still using
-// safari <14. These seven account for most uses.
-// relativetimeformat depends on locale which also needs to be polyfilled in
-// safari <14
-// The plural rules is required for safari 12.
-require('@formatjs/intl-locale/polyfill');
-require('@formatjs/intl-pluralrules/polyfill');
-require('@formatjs/intl-pluralrules/locale-data/en');
-require('@formatjs/intl-relativetimeformat/polyfill');
-require('@formatjs/intl-relativetimeformat/locale-data/en');
-require('@formatjs/intl-relativetimeformat/locale-data/ar');
-require('@formatjs/intl-relativetimeformat/locale-data/es');
-require('@formatjs/intl-relativetimeformat/locale-data/fr');
-require('@formatjs/intl-relativetimeformat/locale-data/ja');
-require('@formatjs/intl-relativetimeformat/locale-data/tr');
-require('@formatjs/intl-relativetimeformat/locale-data/zh');

src/redux/comments.js

@@ -2,7 +2,13 @@ const keyMirror = require('keymirror');
 const mergeWith = require('lodash.mergewith');
 const uniqBy = require('lodash.uniqby');
 
-const COMMENT_LIMIT = 20;
+// Number of replies to fetch at a time.
+// The way this code is currently structured, it expects
+// this number to be the same for project comment reply threads
+// as well as studio comment reply threads.
+// These could be decoupled in the future.
+const REPLY_FETCH_LIMIT = 25;
+
 
 module.exports.Status = keyMirror({
     FETCHED: null,
@@ -108,7 +114,7 @@ module.exports.commentsReducer = (state, action) => {
             comments: state.comments.map(comment => {
                 if (action.replies[comment.id]) {
                     return Object.assign({}, comment, {
-                        moreRepliesToLoad: action.replies[comment.id].length === COMMENT_LIMIT
+                        moreRepliesToLoad: action.replies[comment.id].length === REPLY_FETCH_LIMIT
                     });
                 }
                 return comment;

src/redux/project-comment-actions.js

@@ -4,6 +4,7 @@ const api = require('../lib/api');
 const log = require('../lib/log');
 
 const COMMENT_LIMIT = 20;
+const REPLY_LIMIT = 25; // Number of replies to fetch at a time
 
 const {
     addNewComment,
@@ -28,7 +29,7 @@ const getReplies = (projectId, commentIds, offset, ownerUsername, isAdmin, token
         api({
             uri: `${isAdmin ? '/admin' : `/users/${ownerUsername}`}/projects/${projectId}/comments/${parentId}/replies`,
             authentication: token ? token : null,
-            params: {offset: offset || 0, limit: COMMENT_LIMIT}
+            params: {offset: offset || 0, limit: REPLY_LIMIT}
         }, (err, body, res) => {
             if (err) {
                 return callback(`Error fetching comment replies: ${err}`);

src/redux/studio-comment-actions.js

@@ -4,6 +4,7 @@ const api = require('../lib/api');
 const log = require('../lib/log');
 
 const COMMENT_LIMIT = 20;
+const REPLY_LIMIT = 25;
 
 const {
     addNewComment,
@@ -44,7 +45,7 @@ const getReplies = (commentIds, offset) => ((dispatch, getState) => {
         api({
             uri: `${isAdmin ? '/admin' : ''}/studios/${studioId}/comments/${parentId}/replies`,
             authentication: token ? token : null,
-            params: {offset: offset || 0, limit: COMMENT_LIMIT}
+            params: {offset: offset || 0, limit: REPLY_LIMIT}
         }, (err, body, res) => {
             if (err) {
                 return callback(`Error fetching comment replies: ${err}`);

src/routes.json

@@ -10,8 +10,24 @@
         "name": "annual-report",
         "pattern": "^/annual-report/?(\\?.*)?$",
         "routeAlias": "/annual-report/?$",
-        "view": "annual-report/annual-report",
+        "view": "annual-report/2020/annual-report",
-        "title": "Annual Report",
+        "title": "Annual Report 2020",
+        "viewportWidth": "device-width"
+    },
+    {
+        "name": "annual-report-2019",
+        "pattern": "^/annual-report/2019/?(\\?.*)?$",
+        "routeAlias": "/annual-report/2019/?$",
+        "view": "annual-report/2019/annual-report",
+        "title": "Annual Report 2019",
+        "viewportWidth": "device-width"
+    },
+    {
+        "name": "annual-report-2020",
+        "pattern": "^/annual-report/2020/?(\\?.*)?$",
+        "routeAlias": "/annual-report/2020/?$",
+        "view": "annual-report/2020/annual-report",
+        "title": "Annual Report 2020",
         "viewportWidth": "device-width"
     },
     {
@@ -142,6 +158,13 @@
         "view": "teachers/landing/landing",
         "title": "Educators"
     },
+    {
+        "name": "ethics",
+        "pattern": "^/code-of-ethics/?$",
+        "routeAlias": "/code-of-ethics/?$",
+        "view": "ethics/ethics",
+        "title": "Research Code of Ethics"
+    },
     {
         "name": "explore",
         "pattern": "^/explore/:projects(projects|studios)/:all/?$",
@@ -225,6 +248,13 @@
         "view": "privacypolicy/privacypolicy",
         "title": "Privacy Policy"
     },
+    {
+        "name": "privacypolicy-apps",
+        "pattern": "^/privacy_policy/apps?$",
+        "routeAlias": "/privacy_policy/apps?$",
+        "view": "privacypolicy-apps/privacypolicy-apps",
+        "title": "Privacy Policy"
+    },
     {
         "name": "research",
         "pattern": "^/research/?$",

src/template-config.js

@@ -28,5 +28,6 @@ module.exports = {
     og_image_height: 860,
 
     // Analytics & Monitoring
-    ga_tracker: process.env.GA_TRACKER || ''
+    ga_tracker: process.env.GA_TRACKER || '',
+    gtm_id: process.env.GTM_ID || ''
 };

src/template.ejs

@@ -3,6 +3,16 @@
 <!--[if IE 9 ]> <html class="ie9"> <![endif]-->
 <!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
     <head>
+        <% if (htmlWebpackPlugin.options.gtm_id) { %>
+        <!-- Google Tag Manager -->
+        <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+            })(window,document,'script','dataLayer','<%- htmlWebpackPlugin.options.gtm_id %>');</script>
+        <!-- End Google Tag Manager -->
+        <% } %>
+
         <meta charset="UTF-8" />
 
         <meta http-equiv="x-ua-compatible" content="ie=edge">
@@ -55,6 +65,11 @@
     </head>
 
     <body>
+        <% if (htmlWebpackPlugin.options.gtm_id) { %>
+        <!-- Google Tag Manager (noscript) -->
+        <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=<%- htmlWebpackPlugin.options.gtm_id %>" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+        <!-- End Google Tag Manager (noscript) -->
+        <% } %>
         <noscript>
             <p>Your browser has Javascript disabled. Please go to your browser preferences and enable Javascript in order to use Scratch.</p>
         </noscript>

src/views/about/about.jsx

@@ -14,7 +14,14 @@ const About = () => (
 
         <div className="masthead">
             <div>
-                <p><FormattedMessage id="about.introOne" /></p>
+                <p><FormattedMessage
+                    id="about.introOne"
+                    values={{foundationLink: (
+                        <a href="https://www.scratchfoundation.org/">
+                            <FormattedMessage id="about.foundationText" />
+                        </a>
+                    )}}
+                /></p>
                 <p><FormattedMessage id="about.introTwo" /></p>
                 <p><FormattedMessage id="about.introThree" /></p>
 
@@ -64,7 +71,8 @@ const About = () => (
                     <p><FormattedMessage
                         id="about.aroundTheWorldDescription"
                         values={{
-                            languageCount: 60,
+                            countryCount: 200,
+                            languageCount: 70,
                             translationLink: (
                                 <a
                                     href="https://github.com/LLK/scratch-l10n/wiki/Guide-for-Scratch-Translators"
@@ -126,11 +134,6 @@ const About = () => (
                                     <FormattedMessage id="about.researchLinkText" />
                                 </a>
                             ),
-                            spfaLink: (
-                                <a href="http://web.media.mit.edu/~mres/papers/Scratch-CACM-final.pdf">
-                                    <FormattedMessage id="about.spfaLinkText" />
-                                </a>
-                            ),
                             lifelongKindergartenGroupLink: (
                                 <a href="https://www.media.mit.edu/groups/lifelong-kindergarten/overview/">
                                     <FormattedMessage id="about.lifelongKindergartenGroupLinkText" />
@@ -171,9 +174,6 @@ const About = () => (
                 <li>
                     <h3><FormattedMessage id="about.learnMore" /></h3>
                     <ul className="list">
-                        <li>
-                            <a href="/ideas"><FormattedMessage id="about.learnMoreHelp" /></a>
-                        </li>
                         <li>
                             <a href="/faq"><FormattedMessage id="about.learnMoreFaq" /></a>
                         </li>
@@ -181,7 +181,7 @@ const About = () => (
                             <a href="/parents"><FormattedMessage id="about.learnMoreParents" /></a>
                         </li>
                         <li>
-                            <a href="/credits"><FormattedMessage id="about.learnMoreCredits" /></a>
+                            <a href="/educators"><FormattedMessage id="about.learnMoreEducators" /></a>
                         </li>
                         <li>
                             <a href="/annual-report"><FormattedMessage id="about.learnMoreAnnualReport" /></a>
@@ -203,11 +203,6 @@ const About = () => (
                                     <FormattedMessage id="about.donorsLinkText" />
                                 </a>
                             ),
-                            annualReportLink: (
-                                <a href="/annual-report">
-                                    <FormattedMessage id="about.annualReportLinkText" />
-                                </a>
-                            ),
                             donateLink: (
                                 <a
                                     href="//secure.donationpay.org/scratchfoundation/"
@@ -216,11 +211,6 @@ const About = () => (
                                 >
                                     <FormattedMessage id="about.donateLinkText" />
                                 </a>
-                            ),
-                            donateemail: (
-                                <a href="mailto:donate@scratch.mit.edu">
-                                    donate@scratch.mit.edu
-                                </a>
                             )
                         }}
                     /></p>

src/views/about/l10n.json

@@ -1,23 +1,23 @@
 {
-    "about.introOne": "With Scratch, you can program your own interactive stories, games, and animations — and share your creations with others in the online community.",
+    "about.introOne": "Scratch is the world’s largest coding community for children and a coding language with a simple visual interface that allows young people to create digital stories, games, and animations. Scratch is designed, developed, and moderated by the {foundationLink}, a nonprofit organization.    ",
-    "about.introTwo": "Scratch helps young people learn to think creatively, reason systematically, and work collaboratively — essential skills for life in the 21st century.",
+    "about.introTwo": "Scratch promotes computational thinking and problem solving skills; creative teaching and learning; self-expression and collaboration; and equity in computing.",
-    "about.introThree": "Scratch is designed, developed, and moderated by the Scratch Foundation, a nonprofit organization. It is provided free of charge.",
+    "about.introThree": "Scratch is always free and is available in more than 70 languages.",
+    "about.foundationText": "Scratch Foundation",
     "about.introParents": "Info for parents",
     "about.introEducators": "Info for educators",
     "about.whoUsesScratch": "Who Uses Scratch?",
     "about.whoUsesScratchDescription": "Scratch is designed especially for ages 8 to 16, but is used by people of all ages. Millions of people are creating Scratch projects in a wide variety of settings, including homes, schools, museums, libraries, and community centers.",
     "about.aroundTheWorld": "Around the World",
-    "about.aroundTheWorldDescription": "Scratch is used in more than 150 different countries and available in more than {languageCount} languages. To change languages, click the menu at the bottom of the page. Or, in the Project Editor, click the globe at the top of the page. To add or improve a translation, see the {translationLink} page.",
+    "about.aroundTheWorldDescription": "Scratch is used in more than {countryCount} different countries and territories and is available in more than {languageCount} languages. To change languages, click the menu at the bottom of the page. Or, in the Project Editor, click the globe at the top of the page. To add or improve a translation, see the {translationLink} page.",
     "about.translationLinkText": "translation",
     "about.quotes": "Quotes",
     "about.quotesDescription": "The Scratch Team has received many emails from youth, parents, and educators expressing thanks for Scratch. Want to see what people are saying? You can read a collection of the {quotesLink} we've received.",
     "about.quotesLinkText": "quotes",
     "about.learnMore": "Learn More About Scratch",
-    "about.learnMoreHelp": "Ideas Page",
     "about.learnMoreFaq": "Frequently Asked Questions",
     "about.learnMoreParents": "Information for Parents",
-    "about.learnMoreCredits": "Our Team",
+    "about.learnMoreEducators": "Information for Educators",
-    "about.learnMoreAnnualReport": "Annual Report 2019",
+    "about.learnMoreAnnualReport": "Annual Report",
     "about.literacy": "Learn to Code, Code to Learn",
     "about.literacyDescription": "The ability to code computer programs is an important part of literacy in today’s society. When people learn to code in Scratch, they learn important strategies for solving problems, designing projects, and communicating ideas.",
     "about.schools": "Scratch in Schools",
@@ -25,17 +25,16 @@
     "about.scratchForEducatorsLinkText": "Scratch For Educators",
     "about.scratchedLinkText": "ScratchEd website",
     "about.research": "Research",
-    "about.researchDescription": "The {lifelongKindergartenGroupLink} and collaborators are researching how young people create, collaborate, and learn with Scratch. For an overview, see the article {codingAtACrossroadsLink} and the book {lifelongKindergartenBookLink}. To find out more about the use of Scratch, see the {statisticsLink} page and the Scratch {annualReportLink}.",
+    "about.researchDescription": "The {lifelongKindergartenGroupLink} and collaborators are {researchLink} how young people create, collaborate, and learn with Scratch. For an overview, see the article {codingAtACrossroadsLink} and the book {lifelongKindergartenBookLink}. To find out more about the use of Scratch, see the {statisticsLink} page and the Scratch {annualReportLink}.",
-    "about.spfaLinkText": "Scratch: Programming for All",
+    "about.researchLinkText": "researching",
-    "about.researchLinkText": "research",
     "about.statisticsLinkText": "statistics",
     "about.lifelongKindergartenGroupLinkText": "Lifelong Kindergarten group",
     "about.codingAtACrossroadsLinkText": "Coding at a Crossroads",
     "about.lifelongKindergartenBookLinkText": "Lifelong Kindergarten",
     "about.annualReportLinkText": "Annual Report",
     "about.support": "Support and Funding",
-    "about.supportDescription": "Scratch is available for free, thanks to support from our {donorsLink}. For more information, see our {annualReportLink}. You can support Scratch by making a donation.",
+    "about.supportDescription": "Scratch is available for free, thanks to support from our {donorsLink}. This support helps us provide kids around the world with opportunities to imagine, create, and share. You can support Scratch by making a donation {donateLink}.",
     "about.donorsLinkText": "donors",
-    "about.donateLinkText": "donations page",
+    "about.donateLinkText": "here",
     "about.donateButton": "Donate"
 }

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

@@ -6,21 +6,21 @@ const FormattedMessage = require('react-intl').FormattedMessage;
 const injectIntl = require('react-intl').injectIntl;
 const intlShape = require('react-intl').intlShape;
 
-const render = require('../../lib/render.jsx');
+const render = require('../../../lib/render.jsx');
-const frameless = require('../../lib/frameless');
+const frameless = require('../../../lib/frameless');
 
-const Avatar = require('../../components/avatar/avatar.jsx');
+const Avatar = require('../../../components/avatar/avatar.jsx');
-const Page = require('../../components/page/www/page.jsx');
+const Page = require('../../../components/page/www/page.jsx');
-const Grid = require('../../components/grid/grid.jsx');
+const Grid = require('../../../components/grid/grid.jsx');
-const Button = require('../../components/forms/button.jsx');
+const Button = require('../../../components/forms/button.jsx');
-const FlexRow = require('../../components/flex-row/flex-row.jsx');
+const FlexRow = require('../../../components/flex-row/flex-row.jsx');
-const Comment = require('../../components/comment/comment.jsx');
+const Comment = require('../../../components/comment/comment.jsx');
-const WorldMap = require('../../components/world-map/world-map.jsx');
+const WorldMap = require('../../../components/world-map/world-map.jsx');
 const CountryUsage = require('./country-usage.json');
-const PeopleGrid = require('../../components/people-grid/people-grid.jsx');
+const PeopleGrid = require('../../../components/people-grid/people-grid.jsx');
 const People = require('./people.json');
 const BLMProjects = require('./blm-projects.json');
-const VideoPreview = require('../../components/video-preview/video-preview.jsx');
+const VideoPreview = require('../../../components/video-preview/video-preview.jsx');
 const Supporters = require('./supporters.json');
 
 require('./annual-report.scss');
@@ -56,6 +56,8 @@ const countryData = countryNames.map(key =>
     `<b>${CountryUsage[key].display}</b><br>${CountryUsage[key].count.toLocaleString('en')}`
 );
 const colorIndex = countryNames.map(key => CountryUsage[key]['log count']);
+const minColor = 'rgba(14,189,140, .05)';
+const maxColor = 'rgba(14,189,140, 1)';
 
 // Create the div given a list of supporter names,
 // this will contain two columns of names either of equal size
@@ -837,6 +839,8 @@ class AnnualReport extends React.Component {
                                             colorIndex={colorIndex}
                                             countryData={countryData}
                                             countryNames={countryNames}
+                                            minColor={minColor}
+                                            maxColor={maxColor}
                                         />
                                     </MediaQuery>
                                     <MediaQuery
@@ -848,6 +852,8 @@ class AnnualReport extends React.Component {
                                             colorIndex={colorIndex}
                                             countryData={countryData}
                                             countryNames={countryNames}
+                                            minColor={minColor}
+                                            maxColor={maxColor}
                                         />
                                     </MediaQuery>
                                     <MediaQuery
@@ -859,6 +865,8 @@ class AnnualReport extends React.Component {
                                             colorIndex={colorIndex}
                                             countryData={countryData}
                                             countryNames={countryNames}
+                                            minColor={minColor}
+                                            maxColor={maxColor}
                                         />
                                     </MediaQuery>
                                     <MediaQuery maxWidth={frameless.mobileIntermediate - 1}>
@@ -867,6 +875,8 @@ class AnnualReport extends React.Component {
                                             colorIndex={colorIndex}
                                             countryData={countryData}
                                             countryNames={countryNames}
+                                            minColor={minColor}
+                                            maxColor={maxColor}
                                         />
                                     </MediaQuery>
                                 </div>

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

@@ -1,5 +1,5 @@
-@import "../../colors";
+@import "../../../colors";
-@import "../../frameless";
+@import "../../../frameless";
 
 $base-bg: $ui-white;
 

src/views/annual-report/2020/country-blurb/country-blurb.jsx

@@ -0,0 +1,59 @@
+const classNames = require('classnames');
+const PropTypes = require('prop-types');
+const React = require('react');
+
+require('./country-blurb.scss');
+
+// Class names regular and reverse indicate whether the image should
+// be placed on the right of left of the text in wider layouts.
+// At smaller widths, the image will always be stacked on top.
+// Because the right column would typically stack under the left
+// I've named this class reverse since it is using flexbox reverse
+// column layout to get the image to always appear on top of the text.
+
+const CountryBlurb = props => (
+    <div className={classNames('country-blurb', props.className)}>
+        <div className="half">
+            <div className="country-info">
+                <img
+                    src={props.icon}
+                    alt={props.iconAlt}
+                />
+                <div className="country-text">
+                    <h4>{props.title}</h4>
+                    <div className="location">
+                        <img
+                            src={props.listIcon}
+                            alt="location icon"
+                        />
+                        <span>{props.country}</span>
+                    </div>
+                </div>
+            </div>
+            <p>
+                {props.children}
+            </p>
+        </div>
+        <div className="half">
+            <img
+                className="large"
+                src={props.largeImage}
+                alt={props.alt}
+            />
+        </div>
+    </div>
+);
+
+CountryBlurb.propTypes = {
+    children: PropTypes.node,
+    icon: PropTypes.string,
+    title: PropTypes.string,
+    listIcon: PropTypes.string,
+    country: PropTypes.string,
+    className: PropTypes.string,
+    largeImage: PropTypes.string,
+    alt: PropTypes.string,
+    iconAlt: PropTypes.string
+};
+
+module.exports = CountryBlurb;

src/views/annual-report/2020/country-blurb/country-blurb.scss

@@ -0,0 +1,65 @@
+@import "../../../../frameless";
+
+.country-blurb{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-around;
+  margin-bottom: 62px;
+
+  &.reverse {
+    flex-direction: row-reverse;
+
+    @media #{$intermediate-and-smaller} {
+      flex-direction: column-reverse;
+    }
+  }
+  
+  @media #{$intermediate-and-smaller} {
+    // If we want to support both image on top and image on bottom,
+    // we can use the regular & reverse classNames
+    flex-direction: column-reverse;
+  }
+
+  .half{
+    max-width: 460px;
+
+    img.large{
+      max-width: 380px;
+    }
+  }
+
+  p{
+    font-size: 1rem;
+    text-align: left;
+  }
+}
+
+.country-info{
+  display: flex;
+  align-items: center;
+  img{
+    width: 65px;
+    height: 65px;
+    margin-right: 15px;
+  }
+  .country-text{
+    h4{
+      margin: 0 0 5px 0;
+    }
+    .location{
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+
+      font-size: 1.25rem;
+      line-height: 1.5rem;
+
+      img{
+        width: 18px;
+        height: 18px;
+        margin-right: 5px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,42 @@
+[
+  {
+      "id": 442111363,
+      "author": {
+          "id": 57561743,
+          "username": "sachiaar"
+      },
+      "image": "/images/annual-report/2020/connectivity/India_Data/project_diwali.jpg",
+      "title": "Virtual Crackers",
+      "stats": {}
+  },
+  {
+      "id": 400075701,
+      "author": {
+          "id": 59837115,
+          "username": "Furby_Mobile"
+      },
+      "image": "/images/annual-report/2020/connectivity/India_Data/project_hindinews.jpg",
+      "title": "hindi news: बिल्ली ने चोरी की फोन!",
+      "stats": {}
+  },
+  {
+      "id": 381920517,
+      "author": {
+          "id": 28382880,
+          "username": "animationskills"
+      },
+      "image": "/images/annual-report/2020/connectivity/India_Data/project_proudtobeanindian.jpg",
+      "title": "proud to be an indian",
+      "stats": {}
+  },
+  {
+      "id": 420856183,
+      "author": {
+          "id": 62146670,
+          "username": "mGR8T"
+      },
+      "image": "/images/annual-report/2020/connectivity/India_Data/project_flute.jpg",
+      "title": "practice basic flute notes",
+      "stats": {}
+  }
+]

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

@@ -0,0 +1,367 @@
+{
+    "annualReport.2020.subnavFoundersMessage": "Founder's Message",
+    "annualReport.2020.subnavMission": "Mission",
+    "annualReport.2020.subnavReach": "Reach",
+    "annualReport.2020.subnavThemes": "Themes",
+    "annualReport.2020.subnavDirectorsMessage": "Director's Message",
+    "annualReport.2020.subnavSupporters": "Supporters",
+    "annualReport.2020.subnavTeam": "Team",
+    "annualReport.2020.subnavDonate": "Donate",
+
+    "annualReport.2020.mastheadYear": "2020 Annual Report",
+    "annualReport.2020.mastheadTitle": "Adapting to a Changing World",
+    "annualReport.2020.foundersMessageTitle": "A Message from Our Founder",
+    "annualReport.2020.foundersMessageP1": "The year 2020 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.2020.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 2020, 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.2020.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 2020, 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.2020.foundersMessageP4": "Later in 2020, 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.2020.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.2020.foundersMessageScratchTitle": "Chair, Scratch Foundation",
+    "annualReport.2020.foundersMessageAffiliation": "Professor, MIT Media Lab",
+
+    "annualReport.2020.watchVideo": "Watch Video",
+
+    "annualReport.2020.missionTitle": "Our Mission & Vision",
+    "annualReport.2020.visionHeader": "Vision",
+    "annualReport.2020.visionSubtitle": "To spread creative, caring, collaborative, equitable approaches to coding and learning around the world.",
+    "annualReport.2020.missionHeader": "Mission",
+    "annualReport.2020.missionSubtitle": "Providing young people with digital tools and opportunities to imagine, create, share, and learn.",
+    "annualReport.2020.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.2020.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.2020.missionP3": "In developing new technologies, activities, and learning materials, we are guided by what we call the Four P’s of Creative Learning:",
+    "annualReport.2020.fourPs": "Four P’s of Creative Learning",
+    "annualReport.2020.missionProjectsTitle": "Projects",
+    "annualReport.2020.missionPeersTitle": "Peers",
+    "annualReport.2020.missionPassionTitle": "Passion",
+    "annualReport.2020.missionPlayTitle": "Play",
+    "annualReport.2020.missionProjectsDescription": "Engage children in designing, creating, and expressing themselves creatively",
+    "annualReport.2020.missionPeersDescription": "Support children in collaborating, sharing, remixing, and mentoring",
+    "annualReport.2020.missionPassionDescription": "Enable children to build on their interests and work on personally meaningful projects",
+    "annualReport.2020.missionPlayDescription": "Encourage children to tinker, experiment, and iterate",
+
+    "annualReport.2020.reachTitle": "Reaching Children Around the World",
+    "annualReport.2020.reachSubtitle": "Scratch is the world’s largest coding community for children and teens, ages 8 and up.",
+    "annualReport.2020.reachMillion": "million",
+    "annualReport.2020.reachNewUsersNumber": "15 {million}",
+    "annualReport.2020.reachNewUsersIncrease": "3.8% from 2019",
+    "annualReport.2020.reachProjectsCreatedNumber": "80 {million}",
+    "annualReport.2020.reachProjectsCreatedIncrease": "37% from 2019",
+    "annualReport.2020.reachProjectCreatorsNumber": "29 {million}",
+    "annualReport.2020.reachProjectCreatorsIncrease": "44% from 2019",
+    "annualReport.2020.reachIncreaseInCommentsNumber": "217%",
+    "annualReport.2020.reachIncreaseInCommentsOld": "48 {million}",
+    "annualReport.2020.reachIncreaseInCommentsIncrease": "150 {million}",
+    "annualReport.2020.reachNewUsers": "New Users",
+    "annualReport.2020.reachProjectsCreated": "Projects Created",
+    "annualReport.2020.reachProjectCreators": "People Creating Projects",
+    "annualReport.2020.reachComments": "increase in comments posted",
+    "annualReport.2020.reachGlobalCommunity": "Our Global Community",
+    "annualReport.2020.reachMapBlurb": "Total accounts registered in the Scratch Online Community from the launch of Scratch through December 2020",
+    "annualReport.2020.reachMap24M": "24M",
+    "annualReport.2020.reachMapLog": "on a logarithmic scale",
+    "annualReport.2020.reachTranslationTitle": "Scratch is Translated into 64 Languages",
+    "annualReport.2020.reachTranslationIncrease": "3 languages from 2019",
+    "annualReport.2020.reachTranslationBlurb": "Thanks to volunteer translators from around the world.",
+    "annualReport.2020.reachScratchJrBlurb": "ScratchJr is an introductory programming environment that enables young children (ages 5-7) to create their own interactive stories and games.",
+    "annualReport.2020.reachDownloadsMillion": "3 {million}",
+    "annualReport.2020.reachDownloads": "Downloads in 2020",
+    "annualReport.2020.reachDownloadsIncrease": "2 {million} from 2019",
+
+    "annualReport.2020.themesTitle": "Emerging Themes",
+    "annualReport.2020.themesDescription": "As young people faced the unprecedented challenges of COVID-19, Scratch became a more important place than ever for them to connect, create, and express themselves. Throughout the year, our work was focused on three areas to best support our growing global community: connectivity, adaptation, and community. As always, our efforts were grounded in our commitment to equity and inclusion.",
+    "annualReport.2020.equity": "Equity",
+    "annualReport.2020.globalStrategy": "Global Strategy",
+
+    "annualReport.2020.connectivityTitle": "Connectivity",
+    "annualReport.2020.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.2020.aaronText": "Aaron’s students worked together to build a “kooky” version of their town called “Norwouldn’t,” packed with storybook creatures, original artwork, and interconnecting narratives. It was one of many collaborative Scratch projects Aaron facilitated to remind students that even while COVID-19 kept them inside their homes, they were still part of a caring and joyful community.",
+    "annualReport.2020.spotlightStory": "Spotlight Story",
+    "annualReport.2020.connectivityIndia": "Scratch in India",
+    "annualReport.2020.connectivityIndiaIntro": "In India, the COVID-19 pandemic took an enormous toll and kept many young people and families isolated inside for long stretches.",
+    "annualReport.2020.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.2020.connectivityIndiaProjectsNumber": "2.3 {million}",
+    "annualReport.2020.connectivityIndiaProjectsSubhead": "Projects Were Created Online in 2020",
+    "annualReport.2020.connectivityIndiaProjectsIncreasePercent": "602% from 2019", 
+    "annualReport.2020.connectivityRegistedUsers": "The number of all-time registered users in India more than doubled in one year, ",
+    "annualReport.2020.connectivityRegistedUsersNumbers": "rising from over 300,000 in 2019 to over 700,000 in 2020.",
+    "annualReport.2020.connectivityIndiaUsers": "The number of unique visitors increased",
+    "annualReport.2020.connectivityIndiaUsersPercent": "156%",
+    "annualReport.2020.connectivityIndiaUsersOld": "1.8 {million}",
+    "annualReport.2020.connectivityIndiaUsersNew": "4.6 {million}",
+    "annualReport.2020.connectivityIndiaProjects": "The number of people creating projects increased",
+    "annualReport.2020.connectivityIndiaProjectsPercent": "270%",
+    "annualReport.2020.connectivityIndiaYear": "in 2020",
+    "annualReport.2020.connectivityIndiaProjectsOld": "303 thousand",
+    "annualReport.2020.connectivityIndiaProjectsNew": "1.1 {million}",
+    "annualReport.2020.connectivityWorld": "Scratch Around the World",
+    "annualReport.2020.connectivityWorldSubtitle": "International Collaborators",
+
+    "annualReport.2020.connectivityCountryChileTitle": "Scratch Al Sur",
+    "annualReport.2020.connectivityCountryChile": "Chile",
+    "annualReport.2020.connectivityCountryChileParagraph": "Scratch Al Sur is dedicated to supporting computational and creative thinking among students and educators in Chile and across Latin America. They aided our translation and localization efforts in Rapa Nui and Spanish, and have engaged many educators in collaborative, playful Scratch professional development workshops.",
+    
+    "annualReport.2020.connectivityCountryBrazilTitle": "Brazil Creative Learning Network",
+    "annualReport.2020.connectivityCountryBrazil": "Brazil",
+    "annualReport.2020.connectivityCountryBrazilParagraph": "The Brazilian Creative Learning Network is a grassroots movement that implements playful, creative and relevant hands-on educational practices throughout Brazil. In 2020, the Scratch Team presented at the Brazilian Creative Learning Network’s Creative Learning Week event to share how kids were using Scratch to build community, express themselves, and speak out about what’s important to them. In turn, we learned how educators in the network were creating opportunities for self-expression with learners in their own communities.",
+    
+    "annualReport.2020.connectivityCountryIndiaTitle": "Quest Alliance",
+    "annualReport.2020.connectivityCountryIndia": "India",
+    "annualReport.2020.connectivityCountryIndiaParagraph": "Quest Alliance empowers millions of learners and educators with 21st century skills, including creative computing. In 2020, {QuestAllianceLink} shared Scratch with learners and educators across India.",
+    
+    "annualReport.2020.connectivityCountryUSATitle": "Raspberry Pi Foundation",
+    "annualReport.2020.connectivityCountryUSA": "UK",
+    "annualReport.2020.connectivityCountryUSAParagraph": "The Raspberry Pi Foundation works to put the power of computing and digital making into the hands of people all over the world. Through their Making at Home initiative, they lead livestream events that encouraged families and young people to learn and create together. Several of these livestreams featured Scratch tutorials—and sometimes, even {USALink}!",
+
+    "annualReport.2020.connectivityResources": "Resources",
+    "annualReport.2020.connectivityResourcesSubtitle": "Localizing with Support from the LEGO Foundation",
+    "annualReport.2020.connectivityResourcesParagraph": "To support our growing global reach and aid our COVID-19 response, the LEGO Foundation supported Scratch with a generous grant. With this funding, we were able to localize key resources and reach even more young people around the world.",
+
+    "annualReport.2020.connectivityExample1Title": "Tutorial Images",
+    "annualReport.2020.connectivityExample1Paragraph": "We created translations of the images for 25 Scratch tutorials in 12 languages—totalling over 1,000 new images!",
+
+    "annualReport.2020.connectivityExample2Title": "Getting Started with Scratch",
+    "annualReport.2020.connectivityExample2Paragraph": "The Getting Started with Scratch video is the most highly accessed and viewed Scratch tutorial video, greeting new Scratchers when they first join the site. We were able to translate this video into 25 new languages and to update the 3 previous translations, including visuals, voiceovers, and subtitles.",
+
+    "annualReport.2020.connectivityExample3Title": "Scratch Editor",
+    "annualReport.2020.connectivityExample3Paragraph": "The Scratch project editor is the most essential Scratch resource. We worked with a South African translation company that specializes in culturally-relevant educational translation to translate and review the Scratch editor in five South African languages: isiZulu, isiXhosa, Afrikaans, Sestwana, and Sepedi.",
+
+    "annualReport.2020.adaptationTitle": "Adaptation",
+    "annualReport.2020.adaptationIntro": "As COVID-19 forced schools to close and pushed learning to virtual spaces, many students and teachers were discovering Scratch for the first time or adapting the way they taught and learned creative coding. From our own homes, the Scratch Team worked to support the changing needs of educators and the online community.",
+
+    "annualReport.2020.adaptationQuoteName": "Benedikt Hochwartner",
+    "annualReport.2020.adaptationQuoteTitle": "Curator for Creative Learning, mumok, Vienna, Austria",
+    "annualReport.2020.adaptationQuoteText": "In all the troubles over the past year, Scratch remained our platform of communication, our place to meet, and our medium of expressing ourselves creatively.",
+
+    "annualReport.2020.adaptationHighlightName": "Aaron Reuland",
+    "annualReport.2020.adaptationHighlightTitle": "K-5 Library Media Teacher, Norwood, MA",
+    "annualReport.2020.adaptationHighlightText": "In Aaron Reuland’s Title One school in Norwood, Massachusetts, he counted on Scratch to help engage remote students in creative learning and rekindle their sense of community “when the only things I could count on us all having were a working computer and an internet connection.”",
+    "annualReport.2020.adaptationHighlightText2": "Aaron’s students worked together to build a “kooky” version of their town called “Norwouldn’t,” packed with storybook creatures, original artwork, and interconnecting narratives. It was one of many collaborative Scratch projects Aaron facilitated to remind students that even while COVID-19 kept them inside their homes, they were still part of a caring and joyful community.",
+
+    "annualReport.2020.adaptationHighlightTitle2": "Scratch at Home",
+    "annualReport.2020.adaptationHighlightText2b": "On March 17, we responded to the COVID-19 crisis by launching the {linkText} to provide children, families, and educators with ideas for engaging in creative learning activities with Scratch at home. It was an invaluable way to connect with our community and adapt to a whole new way of learning and interacting online.",
+
+    "annualReport.2020.adaptationHighlightTitle3": "Live Create-Alongs",
+    "annualReport.2020.adaptationHighlightText3b": "Our team hosted weekly, live {linkText} to connect with kids, parents, and educators at home and share tips and tricks for creating different types of Scratch projects. We had a blast seeing the projects they were inspired to create in our Create-Along studios!",
+
+    "annualReport.2020.adaptationHighlightTitle4": "Hack Your Window",
+    "annualReport.2020.adaptationHighlightText4b": "Scratch educator Eduard Muntaner Perich created a #ScratchAtHome-inspired studio that took the community by storm: {linkText}. Hundreds of Scratchers from all over the world imagined fantastical games and stories happening just outside their window.",
+
+    "annualReport.2020.adaptationEducatorsTitle": "Connecting with Educators",
+    "annualReport.2020.adaptationEducatorsText": "Educators around the world shared their own #ScratchAtHome ideas and discussed the struggles and triumphs of teaching remotely in a lively Twitter Chat on April 8th, 2020.",
+
+    "annualReport.2020.adaptationSnapshot": "Snapshots",
+
+    "annualReport.2020.adaptationSnapshot1Title": "Computer Clubhouse Network Virtual Workshops",
+    "annualReport.2020.adaptationSnapshot1Text": "As part of our longstanding partnership, the Scratch Team conducts workshops for youth educators from {linkText}. Like educators around the world, our team had to conduct online workshops for the first time in 2020—and learn how to combat the isolation and technical difficulties of virtual learning. But thanks to online collaboration tools and innovative methods of sharing and reflecting, the team was able to recreate the collaborative, playful spirit of in-person workshops in a virtual space.",
+    "annualReport.2020.adaptationSnapshot2Title": "Bring Yourself Into Scratch",
+    "annualReport.2020.adaptationSnapshot2Text": "2020 was also a year of adapting our tools and platform. We developed and added new sprites to the Sprite Library to inspire and enable beginner Scratchers to make projects representative of their racial, cultural, gender, or other personal identity.",
+
+    "annualReport.2020.communityTitle": "Community",
+    "annualReport.2020.communityIntro": "In 2020, the Scratch Community became an even more vital place for young people to find a sense of togetherness and belonging. As we saw the meaningful conversations, collaborative projects, and moving stories Scratchers shared, we were in awe of their creative and resilient spirit.",
+    
+    "annualReport.2020.communityTitle1": "Virtual Family Creative Coding Nights Guide",
+    "annualReport.2020.communityText1": "In 2019, with support from Google.org, the Scratch Team worked with Chicago Public School’s Office of Computer Science to connect students, families, teachers, and other community members through Family Creative Coding Nights.",
+    "annualReport.2020.communityText2": "This year, our teams faced a new challenge: how could we bring the playful, community-building spirit of Family Creative Coding Nights to a virtual space, helping schools develop vital connections with remote students and their families? We developed the Virtual Family Coding Nights guide to provide a structure for these connections and support joyful learning",
+    "annualReport.2020.communityDownloadButton": "Virtual Family Coding Nights Guide",
+
+    "annualReport.2020.communityQuoteName": "Kendra Mallory, M.Ed.",
+    "annualReport.2020.communityQuoteTitle": "Ruggles Elementary S.T.E.M. Coordinator",
+    "annualReport.2020.communityQuoteText": "[In 2020], there were not many opportunities to engage with parents in such a fun, high energy way. So this opportunity provided much needed engagement...Teachers were apprehensive, but the students' level of excitement pushed them into a space where they had to trust the process and allow kids to learn from one another.",
+
+    "annualReport.2020.communityScratchCommunity": "Scratch Community",
+    "annualReport.2020.communityScratchCommunityIntro": "When asked why they use Scratch, most Scratchers talk about the importance of the online community for motivating their ongoing participation, providing a space where they can express their creativity, make friends, receive feedback, get new ideas, and learn new skills. Many Scratchers express their appreciation for the Scratch community as a safe and welcoming space to connect, share, and learn from one another.",
+
+    "annualReport.2020.communityQuoteGroupText1": "I joined Scratch when I was 11 years old and the things I learned from using the platform and interacting with the community were really a vital part of my learning growing up.",
+    "annualReport.2020.communityQuoteGroupText2": "Scratch has allowed me to do things from home, like\n- Respect people and their projects\n- Make friends\n- Feel that I am not alone in this quarantine\n....and much more, so I want to say ¡GRACIAS!",
+    "annualReport.2020.communityQuoteGroupText3": "I've been on Scratch for about 2 years, and it's been a life-changing experience! I've learned so many new things, such as coding, online etiquette, and art!",
+    "annualReport.2020.communityQuoteGroupText4": "Scratch was my favorite hobby in sixth grade. It secretly introduced me to Boolean logic, order of operations, and nested mathematical expressions—not to mention computer programming itself.",
+
+    "annualReport.2020.yearInReview": "Year in Review",
+    "annualReport.2020.yearInReviewText": "2020 was a remarkable year in the online community. The Community Team highlighted and developed opportunities for young people to express their ideas and become engaged in positive ways, and incredible movements sprung up from Scratchers themselves. Here’s a look back at some of the highlights of the year:",
+
+    "annualReport.2020.yearInReviewCard1Date": "January",
+    "annualReport.2020.yearInReviewCard1Title": "End of the Decade Scratch Design Studio",
+    "annualReport.2020.yearInReviewCard1Text": "Scratchers celebrated the close of a decade and new beginnings in this Scratch Design Studio.",
+
+    "annualReport.2020.yearInReviewCard2Date": "April",
+    "annualReport.2020.yearInReviewCard2Title": "April Fool’s Day",
+    "annualReport.2020.yearInReviewCard2Text": "“Mundane mysteries” appeared around the site, and Cat Blocks surprised and delighted the Scratch community.",
+
+    "annualReport.2020.yearInReviewCard3Date": "April",
+    "annualReport.2020.yearInReviewCard3Title": "Create-Alongs",
+    "annualReport.2020.yearInReviewCard3Text": "Scratch Team members began hosting live tutorials to connect and create with Scratchers and their families at home.",
+
+    "annualReport.2020.yearInReviewCard4Date": "May",
+    "annualReport.2020.yearInReviewCard4Title": "Scratch Month",
+    "annualReport.2020.yearInReviewCard4Text": "Scratchers around the world shared thousands of projects around weekly themes, from recycled crafts to hand-washing jingles.",
+
+    "annualReport.2020.yearInReviewCard5Date": "May",
+    "annualReport.2020.yearInReviewCard5Title": "Black Lives Matter",
+    "annualReport.2020.yearInReviewCard5Text": "As racial justice protests swept the US, the community came together to support each other and call for change.",
+
+    "annualReport.2020.yearInReviewCard6Date": "June",
+    "annualReport.2020.yearInReviewCard6Title": "Fun At Home! Scratch Design Studio",
+    "annualReport.2020.yearInReviewCard6Text": "Scratchers shared their favorite indoor games and activities to keep themselves engaged while staying home.",
+
+    "annualReport.2020.yearInReviewCard7Date": "June",
+    "annualReport.2020.yearInReviewCard7Title": "Juneteenth Studio",
+    "annualReport.2020.yearInReviewCard7Text": "Scratchers created projects to honor Juneteenth and the continued fight for racial justice.",
+
+    "annualReport.2020.yearInReviewCard8Date": "July",
+    "annualReport.2020.yearInReviewCard8Title": "Scratch Camp",
+    "annualReport.2020.yearInReviewCard8Text": "Scratch the Musical got the whole community acting, singing, and dancing together.",
+
+    "annualReport.2020.yearInReviewCard9Date": "October",
+    "annualReport.2020.yearInReviewCard9Title": "Scratchtober",
+    "annualReport.2020.yearInReviewCard9Text": "Scratchers made hundreds of creative stories, games, and animations based on daily themed prompts.",
+
+    "annualReport.2020.communityQuote2Name": "Anna Lytical, Scratch Alum",
+    "annualReport.2020.communityQuote2Title": "Google Cloud Platform Developer Relations Engineer, and the Coding Drag Queen",
+    "annualReport.2020.communityQuote2Text": "Seeing the power you have when you’re creating something and can represent yourself and your problems and express them or solve them with code is a really magical experience and has real world impact.",
+
+    "annualReport.2020.communitySnapshotTitle": "Improving Our Tools",
+    "annualReport.2020.communitySnapshotText": "Our Community Team uses a wide variety of tools and strategies to encourage good digital citizenship and maintain a positive environment for Scratchers to create in. In 2020, we developed a new, more intuitive interface to help Scratchers flag inappropriate content, and improved the tools used by our community moderation team. As a result, we received higher quality reports from the community, and our community moderators were able to work more quickly and efficiently—keeping the site safer and friendlier for everyone.",
+
+    "annualReport.2020.communitySnapshot2Title": "New Scratch Tutorials on YouTube",
+    "annualReport.2020.communitySnapshot2Text": "The Scratch Team began sharing tutorials on our YouTube channel in March 2020 to help Scratchers gain the skills to create whatever they can imagine. From pixel art to virtual pets, these tutorials are a hit with Scratchers of all ages, gaining 1.3 million views in 2020.",
+
+    "annualReport.2020.tutorial1": "Virtual Town",
+    "annualReport.2020.tutorial2": "Catch Game",
+    "annualReport.2020.tutorial3": "Character Designer",
+    "annualReport.2020.tutorial4": "Virtual Pet",
+
+    "annualReport.2020.EDMessageTitle": "A Message from Our Executive Director",
+    "annualReport.2020.EDMessageText1": "2020 was a transformational year around the world, and for Scratch. I joined the team in November, when we were months into the COVID-19 pandemic. With my background as an educational leader, I was excited about the potential of leading Scratch through a period of significant change and continuing to work toward my personal goal of helping students from all backgrounds reach new heights. I knew that in this challenging year, young people everywhere were in serious need of even more support to help them achieve their potential.",
+    "annualReport.2020.EDMessageText2": "The inequitable structures we have built to educate children were exacerbated by the pandemic. Through our conversations with families and educators from around the world, we know that in 2020, kids from all communities needed creative learning opportunities to express their ideas and build their skills more than ever, even while many of them did not have the ability to go to school.",
+    "annualReport.2020.EDMessageText3": "As the world adapted and approached creative learning and self expression in new ways, many educators, parents, and young people turned to Scratch. We saw 40% more Scratchers creating projects year over year, and Scratchers left 200% more comments in 2020 than in 2019. Young people from all around the world used Scratch as a place to connect, converse, collaborate, and engage with one another. We saw them discover the amazing things they could create when they were given the opportunity to think creatively and solve problems they were passionate about. ",
+    "annualReport.2020.EDMessageText4": "In the wake of the pandemic, some have called for a “return to normal.” But for many young people, the freedom to learn and explore was missing in our schools well before COVID-19.",
+    "annualReport.2020.EDMessagePullQuote": "We must do everything we can to change the systemic inequities in our educational systems, because “normal” was not built to be fair and equitable for most of our children.",
+    "annualReport.2020.EDMessageText5": "In 2021, Scratch is redoubling our efforts to reach young people who have been historically excluded from creative computing and other creative learning opportunities. With support from Google.org, we’ve launched the Scratch Education Collaborative (SEC), a powerful network of organizations across the world focused on supporting these learners in developing their confidence in creative computing. The 41 organizations in year one of the new program will connect with and learn from the Scratch Team and one another, and develop Equity Toolkits that will support them as they grow and scale their support for the learners in their community.",
+    "annualReport.2020.EDMessageText6": "Our work to make Scratch even more equitable and inclusive is far from over. I’m excited to share more with you in the coming months. Until then, I’d like to extend my sincere appreciation to the Scratch Community for continuing to support and care for each other through a turbulent year. Your creativity and compassion never ceases to inspire us.",
+
+    "annualReport.2020.EDTitle": "Executive Director, Scratch Foundation",
+
+    "annualReport.2020.lookingForward": "Looking Forward",
+    "annualReport.2020.lookingForwardText1": "In 2021, we’re continuing to innovate and collaborate with our partners to make Scratch even better for young people around the world. In the coming months, we’re working to bring Scratch into more schools, expand pathways to creative learning, develop and localize more resources for educators and young people, and improve the Scratch onboarding experience, and even more exciting projects.",
+    "annualReport.2020.lookingForwardText2": "We’ve received generous grants from the LEGO Foundation and Google.org to help expand our global reach, advance our mission, and support this important work. Learn more:",
+    
+    "annualReport.2020.learnMore": "Learn More:",
+    "annualReport.2020.learnMoreLink1Text": "The LEGO Foundation and Scratch Foundation announce partnership to support learning through play with technology for millions of children across the world",
+    "annualReport.2020.learnMoreLink2Text": "Computer Science Education Week: More help for more students",
+
+    "annualReport.2020.supportersTitle": "Thank You to Our Supporters",
+    "annualReport.2020.supportersIntro": "Thank you to our generous supporters. Your contribution helps us expand creative learning opportunities for children of all ages, from all backgrounds, around the globe.",
+
+    "annualReport.2020.ourSupporters": "Our Supporters",
+    "annualReport.2020.ourSupportersText": "We want to thank all Scratch supporters who, throughout the years, have helped us create amazing learning experiences for millions of young people around the world. The following list is based on giving to the Scratch Foundation from January 1, 2020 to December 31, 2020.",
+
+    "annualReport.2020.supportersFoundingTitle": "Founding Partners — $10,000,000+",
+    "annualReport.2020.supportersFoundingText": "We are especially grateful to our Founding Partners who have each provided at least $10,000,000 in cumulative support, since the start of Scratch in 2003.",
+
+    "annualReport.2020.supportersCatPartnersTitle": "Scratch Cat Partners — $1,000,000+",
+    "annualReport.2020.supportersCreativityTitle": "Creativity Circle — $250,000+",
+    "annualReport.2020.supportersCollaborationTitle": "Collaboration Circle — $100,000+",
+    "annualReport.2020.supportersImaginationTitle": "Imagination Circle — $50,000+",
+    "annualReport.2020.supportersInspirationTitle": "Inspiration Circle — $20,000+",
+    "annualReport.2020.supportersExplorationTitle": "Exploration Circle — $5,000+",
+    "annualReport.2020.supportersPlayTitle": "Play Circle — $1,000+",
+    "annualReport.2020.supportersInKindTitle": "In-Kind Supporters",
+    "annualReport.2020.leadershipTitle": "Our Team",
+    "annualReport.2020.leadershipBoard": "Board of Directors",
+    "annualReport.2020.leadershipChair": "Chair",
+    "annualReport.2020.leadershipProfessor": "Professor of Learning Research",
+    "annualReport.2020.leadershipViceChair": "Vice-Chair",
+    "annualReport.2020.leadershipCoFounder": "Co-Founder and Co-Chairman",
+    "annualReport.2020.leadershipBoardMember": "Board Member",
+    "annualReport.2020.leadershipPresidentCEO": "President and CEO",
+    "annualReport.2020.leadershipFormerPresident": "Former President",
+    "annualReport.2020.leadershipFounderCEO": "Founder and Executive Chairman",
+    "annualReport.2020.leadershipFormerChairCEO": "Former CEO and Chairwoman",
+    "annualReport.2020.leadershipBoardSecretaryTreasurer": "Board Secretary & Treasurer",
+    "annualReport.2020.leadershipBoardSecretary": "Board Secretary",
+    "annualReport.2020.leadershipBoardTreasurer": "Board Treasurer",
+    "annualReport.2020.leadershipScratchTeam": "2020 Scratch Team",
+    "annualReport.2020.leadershipED": "Executive Director",
+
+    "annualReport.2020.teamThankYou": "Thank you to Mitch Resnick, Natalie Rusk, Rupal Jain, and other collaborators at the Lifelong Kindergarten Group at the MIT Media Lab for your tireless support of Scratch.",
+
+    "annualReport.2020.donateTitle": "Support Us",
+    "annualReport.2020.donateMessage": "Your support enables us to make Scratch free for everyone, keeps our servers running, and most importantly, we are able to provide kids around the world an opportunity to imagine, create and share. Thank you!",
+    "annualReport.2020.donateButton": "Donate",
+
+    "annualReport.2020.projectBy": "project by",
+
+    "annualReport.2020.altAvatar": "user avatar",
+    "annualReport.2020.altDropdownArrow": "Arrow indicating dropdown menu.",
+    "annualReport.2020.altMastheadIllustration": "Three people interacting with physical scratch components.",
+    "annualReport.2020.altWave": "An emoji hand waving.",
+    "annualReport.2020.altMitchHeadshot": "Founder Mitch Resnick",
+    "annualReport.2020.altBlocks": "Two scratch blocks stacked on top of one another.",
+    "annualReport.2020.altBanana": "A banana with a wire plugged into it.",
+    "annualReport.2020.altProjectsIllustration": "Three children, one standing, one sitting in a wheelchair, and one sitting on the ground paint and cut art projects.",
+    "annualReport.2020.altPassionIllustration": "Three children, one standing, one kneeling, and one sitting on the ground paint, play music on a piano, and stargaze using a telescope.",
+    "annualReport.2020.altPeersIllustration": "Four childeren sit around a campfire playing games and high fiving.",
+    "annualReport.2020.altPlayIllustration": "Three children, one standing, one kneeling, and one sitting crosslegged stack rocks, play with toy boats, and fold origami.",
+    "annualReport.2020.altCalendar": "A calendar displaying the year 2020.",
+    "annualReport.2020.altCommentsVisualization": "Two comment bubbles. One smaller and darker representing the share of comments in 2019. One lighter representing the increase in comments made in 2020.",
+    "annualReport.2020.altArrowUp": "An arrow pointing up and to the right.",
+    "annualReport.2020.altTranslated": "A scratch component saying \"Hello\" and listing languages that scratch is available in.",
+    "annualReport.2020.altScratchHorizontalCommand": "A scratch horizontal command component.",
+    "annualReport.2020.altScratchJr": "Scratch Jr logo",
+    "annualReport.2020.altHorizontalLoop": "Scratch horizontal loop component.",
+    "annualReport.2020.altPieChart": "Visualization showing the 602% increase in projects created during 2020 in relation to projects created in 2019.",
+    "annualReport.2020.altUsers": "Two generic user icons, a slightly smaller gray one and a slightly larger purple one.",
+    "annualReport.2020.altArrowNext": "An arrow pointing to the right.",
+    "annualReport.2020.altBenedict": "Avatar for Benedikt Hochwartner",
+    "annualReport.2020.altAaronReuland": "Aaron Reuland imopsed over a paper bag puppet and illustration of a flying turtle.",
+    "annualReport.2020.altSprinklesLeft": "A smiley face, scratch component, and heart displayed on a phone.",
+    "annualReport.2020.altSprinklesRight": "A hand interacting with scratch components.",
+    "annualReport.2020.altFileDownload": "An arrow pointing into a basket indicating that a file can be downloaded.",
+    "annualReport.2020.altWaveTop": "A light blue wave covered with scratch avatars and scratch components.",
+    "annualReport.2020.altWaveBottom": "A light blue wave.",
+    "annualReport.2020.altConnectingLine": "A dotted line connecting the months",
+    "annualReport.2020.altApril": "A pen and pencil drawing on a scratch project depicting a boat and water.",
+    "annualReport.2020.altMay": "A calendar marked with emojis placed on a bubble.",
+    "annualReport.2020.altJune": "The Juneteenth flag and a paper airplane.",
+    "annualReport.2020.altJuly": "A microphone and music notes.",
+    "annualReport.2020.altToolsIllustration": "A hand touching an exclamation point icon above a few text bubbles.",
+    "annualReport.2020.altVirtualTown": "A girl runs along a sidewalk in front of a few houses.",
+    "annualReport.2020.altCatchGame": "An apple floats on the horizon to the right while a basket sits below toward the center of the frame.",
+    "annualReport.2020.altCharacterDesigner": "A dog sits in front of a green and white chevron background.",
+    "annualReport.2020.altVirtualPet": "A hedgehog sits on top of a rock in the middle of some grass.",
+    "annualReport.2020.altLookingForward": "A watering tree waters a sapling that grows into a tall tree.",
+
+    "annualReport.2020.altIndia1": "A lit sparkler appears below text saying \"happy Diwali!\"",
+    "annualReport.2020.altIndia2": "The scratch cat mascot appears next to some text written in Hindi",
+    "annualReport.2020.altIndia3": "An Indian woman appears in front of the Indian flag which has a heart containing the word \"India\" on it.",
+    "annualReport.2020.altIndia4": "Two hands appear over a flute in front of a background containing a boardwalk and sea.",
+
+    "annualReport.2020.altChile": "A group of children sits around a table filled with arts and crafts and a laptop.",
+    "annualReport.2020.altBrazil": "Children sit in front of a laptop connected to five spoons with wires.",
+    "annualReport.2020.altIndia": "A woman instructs girls sitting in front of a computer.",
+    "annualReport.2020.altUSA": "A small video thumbnail is displayed next to a screenshot of the Scratch user interface",
+
+    "annualReport.2020.altChileIcon": "The Scratch mascot",
+    "annualReport.2020.altBrazilIcon": "A green swirl",
+    "annualReport.2020.altIndiaIcon": "A star interlocked with a circle",
+    "annualReport.2020.altUSAIcon": "A cartoon raspberry, the Raspberry Pi Foundation logo",
+
+    "annualReport.2020.altTutorial": "A Scratch tutorial in Spanish",
+    "annualReport.2020.altGettingStarted": "A play button sits on top of the Scratch UI.",
+    "annualReport.2020.altEditor": "The Scratch UI along wiht a preview of th progam currently being built showing two people talking to each other.",
+    "annualReport.2020.altHackYourWindow": "A dog in a space helmet, a star, and a donut float outside a window in space.",
+    "annualReport.2020.altScratchInteraction": "Two people talk amongst scratch components. One is handing a component to the other one.",
+    "annualReport.2020.altImageBubbles": "Images from Scratch projects appear in bubble shapes grouped together.",
+
+    "annualReport.2020.altConnectivityVideoPreview": "A play button appears over a scene of friendly sea creatures.",
+    "annualReport.2020.altAdaptationVideoPreview": "A play button apppears over various scenes from the Scratch user interface.",
+
+    "annualReport.2020.altJanuaryCard": "Rey from Star Wars holds a staff and stands in the desert.",
+    "annualReport.2020.altAprilCard": "Multiple screenshots from the Scratch UI are placed together.",
+    "annualReport.2020.altMayCard": "Hands belonging to people of a variety of races are raised in fists.",
+    "annualReport.2020.altJuneCard": "A person staples a paper flower together.",
+    "annualReport.2020.altJulyCard": "A crab, mermaid, and octopus play music together under the sea.",
+    "annualReport.2020.altOctoberCard": "A pumpkin and candy corn appear on the wall above a computer workstation.",
+
+    "annualReport.2020.altDonateIllustration": "Two hands form the shape of a heart with their fingers inside of a cut out heart shape."
+}

src/views/annual-report/2020/people.json

@@ -0,0 +1,232 @@
+[
+    {
+        "name": "Achal",
+        "userName": "cosmosaura",
+        "userId": 61436283
+    },
+    {
+        "name": "Amielle",
+        "userName": "originalwow",
+        "userId": 56182496
+    },
+    {
+        "name": "Amy",
+        "userName": "amylaser",
+        "userId": 17462181
+    },
+    {
+        "name": "Annie",
+        "userName": "achouse",
+        "userId": 4747093
+    },
+    {
+        "name": "Benjamin",
+        "userName": "wheelsonfire",
+        "userId": 10001044
+    },
+    {
+        "name": "Bryce",
+        "userName": "BrycedTea",
+        "userId": 2029640
+    },
+    {
+        "name": "Carl",
+        "userName": "designerd",
+        "userId": 3581881
+    },
+    {
+        "name": "Champika",
+        "userName": "Champ99",
+        "userId": 900283
+    },
+    {
+        "name": "Christan",
+        "userName": "ceebee",
+        "userId": 2755634
+    },
+    {
+        "name": "Chris",
+        "userName": "chrisg",
+        "userId": 1494
+    },
+    {
+        "name": "Chris",
+        "userName": "cwillisf",
+        "userId": 3532363
+    },
+    {
+        "name": "Cindy",
+        "userName": "floralsunset",
+        "userId": 64635632
+    },
+    {
+        "name": "Colby",
+        "userName": "codubee",
+        "userId": 10866958
+    },
+    {
+        "name": "Craig",
+        "userName": "noncanonical",
+        "userId": 55851826
+    },
+    {
+        "name": "Di",
+        "userName": "dsquare",
+        "userId": 527836
+    },
+    {
+        "name": "Ellen",
+        "userName": "SunnyDay4aBlueJay",
+        "userId": 24164779
+    },
+    {
+        "name": "Eric",
+        "userName": "ericr",
+        "userId": 159
+    },
+    {
+        "name": "Eric",
+        "userName": "speakvisually",
+        "userId": 3484484
+    },
+    {
+        "name": "Franchette",
+        "userName": "cheddargirl",
+        "userId": 159139
+    },
+    {
+        "name": "Jacy",
+        "userName": "pixelmoth",
+        "userId": 2408962
+    },
+    {
+        "name": "JT",
+        "userName": "bluecrazie",
+        "userId": 50257624
+    },
+    {
+        "name": "Joan",
+        "userName": "Mos20",
+        "userId": 52545208
+    },
+    {
+        "name": "Jolie",
+        "userName": "FredDog",
+        "userId": 2496866
+    },
+    {
+        "name": "Joshua",
+        "userName": "Class12321",
+        "userId": 2871308
+    },
+    {
+        "name": "Kait",
+        "userName": "MunchtheCat",
+        "userId": 59383434
+    },
+    {
+        "name": "Karishma",
+        "userName": "kittyloaf",
+        "userId": 27383273
+    },
+    {
+        "name": "Katelyn",
+        "userName": "dinopickles",
+        "userId": 34607790
+    },
+    {
+        "name": "Kathy",
+        "userName": "pondermake",
+        "userId": 26779669
+    },
+    {
+        "name": "Kristin",
+        "userName": "KayOh",
+        "userId": 3018280
+    },
+    {
+        "name": "Lamar",
+        "userName": "lamatchalattei",
+        "userId": 61415372
+    },
+    {
+        "name": "LaTasha",
+        "userName": "LT7845",
+        "userId": 68837085
+    },
+    {
+        "name": "Maren",
+        "userName": "algorithmar",
+        "userId": 43013126
+    },
+    {
+        "name": "Marian",
+        "userName": "mwikali",
+        "userId": 24838781
+    },
+    {
+        "name": "Mark",
+        "userName": "dietbacon",
+        "userId": 24137617
+    },
+    {
+        "name": "Mark",
+        "userName": "Paddle2See",
+        "userId": 49156
+    },
+    {
+        "name": "Maxwell",
+        "userName": "adroitwhiz",
+        "userId": 40101979
+    },
+    {
+        "name": "Natalie",
+        "userName": "ipzy",
+        "userId": 2841964
+    },
+    {
+        "name": "Paul",
+        "userName": "sgcc_",
+        "userId": 21986973
+    },
+    {
+        "name": "Raymond",
+        "userName": "raimondious",
+        "userId": 2584924
+    },
+    {
+        "name": "Retrouvailles",
+        "userName": "rtrvmwe",
+        "userId": 61342326
+    },
+    {
+        "name": "Robyn",
+        "userName": "binnieb",
+        "userId": 53715539
+    },
+    {
+        "name": "Rupa",
+        "userName": "RupaLax",
+        "userId": 58005604
+    },
+    {
+        "name": "Sarah",
+        "userName": "scmb1",
+        "userId": 246290
+    },
+    {
+        "name": "Yulia",
+        "userName": "starry_sky7",
+        "userId": 61374093
+    },
+    {
+        "name": "Zachary",
+        "userName": "Za-Chary",
+        "userId": 974363
+    },
+    {
+        "name": "Zoe",
+        "userName": "Zinnea",
+        "userId": 35911243
+    }
+]

src/views/annual-report/2020/supporters.json

@@ -0,0 +1,90 @@
+{
+    "founding": [
+        "Massachusetts Institute of Technology",
+        "National Science Foundation",
+        "Siegel Family Endowment",
+        "LEGO Foundation"
+    ],
+    "catPartners": [
+        "Google.org",
+        "Siegel Family Endowment",
+        "LEGO Foundation",
+        "Fastly"
+    ],
+    "creativity": [
+        "Amazon Web Services",
+        "Little Bluebridge Foundation",
+        "TAL Education"
+    ],
+    "collaboration": [
+        "David and Rhonda Cohen",
+        "FWD Media (BrainPOP)",
+        "LEGO Education",
+        "Vista Equity Partners"
+    ],
+    "imagination": [
+        "Alex & Ginsburg",
+        "AT&T Aspire",
+        "James Hill",
+        "Inversoft/CleanSpeak",
+        "Paul T. Jones",
+        "Kahn-Rowe Family Fund",
+        "Wilson, Sonsini, Goodrich & Rosati"
+    ],
+    "inspiration": [
+        "Evan and Cindy Goldberg",
+        "Massachusetts Institute of Technology",
+        "New Relic",
+        "Overdeck Family Foundation",
+        "Rapid7",
+        "Transifex",
+        "Two Sigma",
+        "Christos Zoulas"
+    ],
+    "exploration": [
+        "Best Buy Foundation",
+        "Steve Conine",
+        "Peter Desmond",
+        "Elizabeth DeStephens",
+        "Berry Dunn",
+        "Mark Fitzgerald",
+        "GitHub",
+        "James Goldstein",
+        "Humble Bundle",
+        "Huron Foundation",
+        "Dan Huttenlocher/MacArthur Foundation",
+        "Mitch Resnick",
+        "Sentry",
+        "Wilson Sonsini Foundation",
+        "Wistia"
+    ],
+    "play": [
+        "Eric Dahm",
+        "Pavel Frolov",
+        "Fundación Cruzando",
+        "Guillaume Lefebvre",
+        "Andres Monroy-Hernandez",
+        "Sun Shil Park",
+        "Pingdom",
+        "William Sharpe",
+        "Travis-CI",
+        "Sheri Vammen",
+        "Shawna Young"
+    ],
+    "inKind": [
+        "Fastly",
+        "Amazon Web Services",
+        "Wilson, Sonsini, Goodrich & Rosati",
+        "Inversoft/CleanSpeak",
+        "Massachusetts Institute of Technology",
+        "New Relic",
+        "Rapid7",
+        "Transifex",
+        "Berry Dunn",
+        "GitHub",
+        "Sentry",
+        "Wistia",
+        "Pingdom",
+        "Travis-CI" 
+    ]
+}

src/views/ethics/ethics.jsx

@@ -0,0 +1,64 @@
+const React = require('react');
+const FormattedMessage = require('react-intl').FormattedMessage;
+
+const Page = require('../../components/page/www/page.jsx');
+const render = require('../../lib/render.jsx');
+
+const InformationPage = require('../../components/informationpage/informationpage.jsx');
+
+const Ethics = () => (
+    <InformationPage
+        title={
+            <FormattedMessage id="ethics.title" />
+        }
+    >
+        <div className="inner info-inner">
+            <span className="nav-spacer" />
+
+            <p><FormattedMessage id="ethics.intro1" /></p>
+            <p><FormattedMessage id="ethics.intro2" /></p>
+
+            <p><FormattedMessage
+                id="ethics.principle1"
+                values={{
+                    title: (
+                        <strong>
+                            <FormattedMessage id="ethics.principle1Title" />
+                        </strong>
+                    ),
+                    researchEmailLink: (
+                        <a href="mailto:research@scratchfoundation.org">
+                            research@scratchfoundation.org
+                        </a>
+                    )
+                }}
+            /></p>
+
+            <p><FormattedMessage
+                id="ethics.principle2"
+                values={{
+                    title: (
+                        <strong>
+                            <FormattedMessage id="ethics.principle2Title" />
+                        </strong>
+                    )
+                }}
+            /></p>
+
+            <p><FormattedMessage
+                id="ethics.principle3"
+                values={{
+                    title: (
+                        <strong>
+                            <FormattedMessage id="ethics.principle3Title" />
+                        </strong>
+                    )
+                }}
+            /></p>
+
+            <span className="nav-spacer" />
+        </div>
+    </InformationPage>
+);
+
+render(<Page><Ethics /></Page>, document.getElementById('app'));

src/views/ethics/l10n.json

@@ -0,0 +1,11 @@
+{
+  "ethics.title": "Scratch Foundation Research Code of Ethics",
+  "ethics.intro1": "At the Scratch Foundation, our mission is to provide young people with digital tools and opportunities to imagine, create, share, and learn. The Scratch platform is 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 this playful learning environment.",
+  "ethics.intro2": "This Code of Ethics guides Scratch Foundation employees and affiliates as they conduct research and evaluation in support of the efforts to improve the platform, participant experience, teaching and learning outcomes, and grant-funded work. All research and evaluation work at the Foundation adheres to the following principles.",
+  "ethics.principle1Title": "Principle 1: Protect our participants.",
+  "ethics.principle1": "{title} Scratch Foundation employees and contractors respect the privacy and confidentiality of participants. Employees and contractors will not disclose any personally identifiable information about any participant without the permission of the participant and (if a minor) the participant’s parent or guardian. Additionally, we will avoid causing harm to participants and seek to maximize the benefits of participation. Participation in research activities is always voluntary; contact us at {researchEmailLink} to opt-out.",
+  "ethics.principle2Title": "Principle 2: Lead with transparency.",
+  "ethics.principle2": "{title} When collecting data, Foundation staff and contractors will disclose the objective, participation requirements (including time and effort), any possible participation-related risks, ways in which we will safeguard and report the data, ways in which participants can opt out, and relevant Foundation contact information. ",
+  "ethics.principle3Title": "Principle 3. Embrace data-stewardship.",
+  "ethics.principle3": "{title} Foundation staff and contractors will ensure data security and compliance with digital privacy policies such as (but not limited to) the Scratch Privacy Policy and the General Data Protection Regulation (GDPR). "
+}

src/views/parents/l10n.json

@@ -1,12 +1,12 @@
 {
   "parents.title": "For Parents",
-  "parents.intro": "Scratch is a programming language and an online community where children\n can program and share interactive media such as stories, games, and \nanimation with people from all over the world. As children create with \nScratch, they learn to think creatively, work collaboratively, and \nreason systematically. Scratch is designed and maintained by the \nLifelong Kindergarten group at the MIT Media Lab. ",
+  "parents.intro": "Scratch is a programming language and an online community where children\n can program and share interactive media such as stories, games, and \nanimation with people from all over the world. As children create with \nScratch, they learn to think creatively, work collaboratively, and \nreason systematically. Scratch is designed, developed, and moderated by the {scratchFoundation}, a nonprofit organization. ",
+  "parents.scratchFoundationLinkText": "Scratch Foundation",
   "parents.overview": "How it works",
   "parents.faq": "FAQ",
   "parents.overviewTitle": "How does Scratch work for children?",
   "parents.overviewLearningTitle": "Learning",
-  "parents.overviewLearningBody": "For a one-page overview of what young people learn with Scratch, see {learningWithScratch}.\nRead an article on the {creativeLearningApproach}.",
+  "parents.overviewLearningBody": "Scratch is a safe and playful learning environment that engages all children in thinking creatively, reasoning systematically, and working collaboratively—essential skills for everyone in today's society.\nRead an article on the {creativeLearningApproach}.",
-  "parents.learningWithScratchLinkText": "Learning with Scratch",
   "parents.creativeLearningApproachLinkText": "Creative Learning Approach",
   "parents.overviewCommunityTitle": "Community",
   "parents.overviewCommunityBody": "We ask all participants on the site to follow the {communityGuidelines}.\nWe do not make private account information available to anyone. For more information, please see the {privacyPolicy}.",
@@ -28,8 +28,8 @@
   "parents.faqCommunityTitle": "What is the Scratch online community?",
   "parents.faqCommunityBody": "When participating in the Scratch online community, members can explore and experiment in an open learning community with other Scratch members from all backgrounds, ages, and interests. Members can share their work, get feedback, and learn from each other.",
   "parents.faqGuidelinesTitle": "What are the guidelines for the Scratch online community?",
-  "parents.faqGuidelinesBody": "The MIT Scratch Team works with the community to maintain a friendly and respectful environment for people of all ages, races, ethnicities, religions, sexual orientations, and gender identities. You can help your child learn how to participate by reviewing the {communityGuidelines} together. Members are asked to comment constructively and to help keep the website friendly by reporting any content that does not follow the community guidelines. The Scratch Team works each day to manage activity on the site and respond to reports, with the help of tools such as the {CleanSpeak} profanity filter.",
+  "parents.faqGuidelinesBody": "The Scratch Team works with the community to maintain a friendly and respectful environment for people of all ages, races, ethnicities, religions, sexual orientations, and gender identities. You can help your child learn how to participate by reviewing the {communityGuidelines} together. Members are asked to comment constructively and to help keep the website friendly by reporting any content that does not follow the Community Guidelines. The Scratch Team works each day to manage activity on the site and respond to reports, with the help of tools such as the {CleanSpeak} profanity filter.",
-  "parents.faqCommunityGuidelinesLinkText": "community guidelines",
+  "parents.faqCommunityGuidelinesLinkText": "Community Guidelines",
   "parents.faqPrivacyPolicyTitle": "What is your privacy policy?",
   "parents.faqPrivacyPolicyBody": "To protect children's online privacy, we limit what we collect during the signup process, and what we make public on the website. We don't sell or rent account information to anyone. You can find out more about our {privacyPolicy} page.",
   "parents.faqFAQLinkText": "frequently asked questions page",

src/views/parents/parents.jsx

@@ -19,7 +19,18 @@ const Landing = () => (
                 </h1>
                 <FlexRow className="masthead-info">
                     <p className="title-banner-p intro">
-                        <FormattedMessage id="parents.intro" />
+                        <FormattedMessage
+                            id="parents.intro"
+                            values={{
+                                scratchFoundation: (
+                                    <a href="http://scratchfoundation.org">
+                                        <FormattedMessage
+                                            id="parents.scratchFoundationLinkText"
+                                        />
+                                    </a>
+                                )
+                            }}
+                        />
                     </p>
                     <div className="ted-talk">
                         <iframe
@@ -59,13 +70,6 @@ const Landing = () => (
                             <FormattedMessage
                                 id="parents.overviewLearningBody"
                                 values={{
-                                    learningWithScratch: (
-                                        <a href="http://llk.media.mit.edu/scratch/Learning-with-Scratch.pdf">
-                                            <FormattedMessage
-                                                id="parents.learningWithScratchLinkText"
-                                            />
-                                        </a>
-                                    ),
                                     creativeLearningApproach: (
                                         <a href="http://www.edutopia.org/kindergarten-creativity-collaboration-lifelong-learning">
                                             <FormattedMessage

src/views/preview/censored-message.jsx

@@ -32,7 +32,10 @@ const CensoredMessage = ({censoredByCommunity, messageHTML, reshareable}) => (
             ) : (
                 // if message is blank or missing, use default
                 <React.Fragment>
-                    <FormattedMessage id="project.defaultCensoredMessage" />
+                    <FormattedMessage
+                        id="project.defaultCensoredMessage"
+                        values={{communityGuidelinesLink: communityGuidelinesLink}}
+                    />
                     <br />
                     <br />
                     {reshareable ? (

src/views/preview/l10n.json

@@ -30,7 +30,7 @@
     "project.notesAndCreditsLabel": "Notes and Credits",
     "project.credit": "Thanks to {userLink} for the original project {projectLink}.",
     "project.deletedBanner": "Note: This project is in the trash folder",
-    "project.defaultCensoredMessage": "This project was removed by the Scratch Team because it was disrespectful, inappropriate for all ages, or otherwise breaks the Scratch community guidelines.",
+    "project.defaultCensoredMessage": "This project was removed by the Scratch Team because it was disrespectful, inappropriate for all ages, or otherwise breaks the Scratch {communityGuidelinesLink}.",
     "project.communityCensoredMessage": "Your project has been temporarily un-shared because multiple people reported it as inappropriate.",
     "project.willReviewCensoredMessage": "The Scratch Team will review the project based on the {communityGuidelinesLink}, and either restore the project or confirm the censorship.",
     "project.tempCensoredMessage": "Please read the {communityGuidelinesLink} and be sure to edit the project to make sure it's respectful before resharing it.",

src/views/preview/presentation.jsx

@@ -32,6 +32,8 @@ const ComposeComment = require('./comment/compose-comment.jsx');
 const ExtensionChip = require('./extension-chip.jsx');
 const thumbnailUrl = require('../../lib/user-thumbnail');
 const FormsyProjectUpdater = require('./formsy-project-updater.jsx');
+const EmailConfirmationModal = require('../../components/modal/email-confirmation/modal.jsx');
+const EmailConfirmationBanner = require('../../components/dropdown-banner/email-confirmation/banner.jsx');
 
 const projectShape = require('./projectshape.jsx').projectShape;
 require('./preview.scss');
@@ -62,6 +64,7 @@ const PreviewPresentation = ({
     canRestoreComments,
     canSave,
     canShare,
+    canSeeShare,
     canToggleComments,
     canUseBackpack,
     cloudHost,
@@ -89,7 +92,9 @@ const PreviewPresentation = ({
     onAddComment,
     onAddToStudioClicked,
     onAddToStudioClosed,
+    onBannerDismiss,
     onCloseAdminPanel,
+    onCloseEmailConfirmationModal,
     onDeleteComment,
     onFavoriteClicked,
     onGreenFlag,
@@ -109,6 +114,7 @@ const PreviewPresentation = ({
     onSeeInside,
     onSetProjectThumbnailer,
     onShare,
+    onShareAttempt,
     onSocialClicked,
     onSocialClosed,
     onToggleComments,
@@ -129,6 +135,8 @@ const PreviewPresentation = ({
     reportOpen,
     showAdminPanel,
     showModInfo,
+    showEmailConfirmationModal,
+    showEmailConfirmationBanner,
     singleCommentId,
     socialOpen,
     userOwnsProject,
@@ -170,7 +178,7 @@ const PreviewPresentation = ({
                 }
             />
         );
-    } else if (canShare) {
+    } else if (canSeeShare) {
         if (isShared && justShared) { // if was shared a while ago, don't show any share banner
             if (isNewScratcher) {
                 banner = (<Banner
@@ -187,7 +195,7 @@ const PreviewPresentation = ({
             banner = (<Banner
                 actionMessage={<FormattedMessage id="project.share.shareButton" />}
                 message={<FormattedMessage id="project.share.notShared" />}
-                onAction={onShare}
+                onAction={canShare ? onShare : onShareAttempt}
             />);
         }
     }
@@ -208,6 +216,10 @@ const PreviewPresentation = ({
     );
     return (
         <div className="preview">
+            {showEmailConfirmationModal && <EmailConfirmationModal
+                isOpen
+                onRequestClose={onCloseEmailConfirmationModal}
+            />}
             {showAdminPanel && (
                 <AdminPanel
                     className={classNames('project-admin-panel', {
@@ -228,6 +240,11 @@ const PreviewPresentation = ({
             )}
             { projectInfo && projectInfo.author && projectInfo.author.id && (
                 <React.Fragment>
+                    {showEmailConfirmationBanner && <EmailConfirmationBanner
+                        /* eslint-disable react/jsx-no-bind */
+                        onRequestDismiss={() => onBannerDismiss('confirmed_email')}
+                        /* eslint-enable react/jsx-no-bind */
+                    />}
                     {banner}
                     <div className="inner">
                         <FlexRow className="preview-row force-row">
@@ -689,6 +706,7 @@ PreviewPresentation.propTypes = {
     backpackHost: PropTypes.string,
     canAddToStudio: PropTypes.bool,
     canDeleteComments: PropTypes.bool,
+    canSeeShare: PropTypes.bool,
     canRemix: PropTypes.bool,
     canReport: PropTypes.bool,
     canRestoreComments: PropTypes.bool,
@@ -724,7 +742,9 @@ PreviewPresentation.propTypes = {
     onAddComment: PropTypes.func,
     onAddToStudioClicked: PropTypes.func,
     onAddToStudioClosed: PropTypes.func,
+    onBannerDismiss: PropTypes.func,
     onCloseAdminPanel: PropTypes.func,
+    onCloseEmailConfirmationModal: PropTypes.func,
     onDeleteComment: PropTypes.func,
     onFavoriteClicked: PropTypes.func,
     onGreenFlag: PropTypes.func,
@@ -743,6 +763,7 @@ PreviewPresentation.propTypes = {
     onSeeAllComments: PropTypes.func,
     onSeeInside: PropTypes.func,
     onSetProjectThumbnailer: PropTypes.func,
+    onShareAttempt: PropTypes.func,
     onShare: PropTypes.func,
     onSocialClicked: PropTypes.func,
     onSocialClosed: PropTypes.func,
@@ -762,6 +783,8 @@ PreviewPresentation.propTypes = {
     reportOpen: PropTypes.bool,
     showAdminPanel: PropTypes.bool,
     showCloudDataAlert: PropTypes.bool,
+    showEmailConfirmationModal: PropTypes.bool,
+    showEmailConfirmationBanner: PropTypes.bool,
     showModInfo: PropTypes.bool,
     showUsernameBlockAlert: PropTypes.bool,
     singleCommentId: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),

src/views/preview/project-view.jsx

@@ -62,6 +62,8 @@ class Preview extends React.Component {
             'handleMessage',
             'handlePopState',
             'handleCloseAdminPanel',
+            'handleCloseEmailConfirmationModal',
+            'handleBannerDismiss',
             'handleIsRemixing',
             'handleOpenAdminPanel',
             'handleReportClick',
@@ -78,6 +80,7 @@ class Preview extends React.Component {
             'handleSeeInside',
             'handleSetProjectThumbnailer',
             'handleShare',
+            'handleShareAttempt',
             'handleUpdateProjectData',
             'handleUpdateProjectId',
             'handleUpdateProjectTitle',
@@ -121,6 +124,7 @@ class Preview extends React.Component {
             },
             showCloudDataAlert: false,
             showUsernameBlockAlert: false,
+            showEmailConfirmationModal: false,
             projectId: parts[1] === 'editor' ? '0' : parts[1],
             reportOpen: false,
             singleCommentId: singleCommentId,
@@ -619,6 +623,25 @@ class Preview extends React.Component {
             justShared: true
         });
     }
+    handleShareAttempt () {
+        this.setState({
+            showEmailConfirmationModal: true
+        });
+    }
+    handleCloseEmailConfirmationModal () {
+        this.setState({showEmailConfirmationModal: false});
+    }
+    handleBannerDismiss (cue) {
+        api({
+            host: '',
+            uri: '/site-api/users/set-template-cue/',
+            method: 'post',
+            useCsrf: true,
+            json: {cue: cue, value: false}
+        }, err => {
+            if (!err) this.props.refreshSession();
+        });
+    }
     handleUpdateProjectTitle (title) {
         this.props.updateProject(
             this.props.projectInfo.id,
@@ -727,6 +750,7 @@ class Preview extends React.Component {
                             canRestoreComments={this.props.isAdmin}
                             canSave={this.props.canSave}
                             canShare={this.props.canShare || this.props.isAdmin}
+                            canSeeShare={this.props.userOwnsProject || this.props.isAdmin}
                             canToggleComments={this.props.canToggleComments}
                             canUseBackpack={this.props.canUseBackpack}
                             cloudHost={this.props.cloudHost}
@@ -762,6 +786,8 @@ class Preview extends React.Component {
                             showAdminPanel={this.props.isAdmin}
                             showCloudDataAlert={this.state.showCloudDataAlert}
                             showModInfo={this.props.isAdmin}
+                            showEmailConfirmationModal={this.state.showEmailConfirmationModal}
+                            showEmailConfirmationBanner={this.props.showEmailConfirmationBanner}
                             showUsernameBlockAlert={this.state.showUsernameBlockAlert}
                             singleCommentId={this.state.singleCommentId}
                             socialOpen={this.state.socialOpen}
@@ -770,7 +796,9 @@ class Preview extends React.Component {
                             onAddComment={this.handleAddComment}
                             onAddToStudioClicked={this.handleAddToStudioClick}
                             onAddToStudioClosed={this.handleAddToStudioClose}
+                            onBannerDismiss={this.handleBannerDismiss}
                             onCloseAdminPanel={this.handleCloseAdminPanel}
+                            onCloseEmailConfirmationModal={this.handleCloseEmailConfirmationModal}
                             onDeleteComment={this.handleDeleteComment}
                             onFavoriteClicked={this.handleFavoriteToggle}
                             onGreenFlag={this.handleGreenFlag}
@@ -790,6 +818,7 @@ class Preview extends React.Component {
                             onSeeInside={this.handleSeeInside}
                             onSetProjectThumbnailer={this.handleSetProjectThumbnailer}
                             onShare={this.handleShare}
+                            onShareAttempt={this.handleShareAttempt}
                             onSocialClicked={this.handleSocialClick}
                             onSocialClosed={this.handleSocialClose}
                             onToggleComments={this.handleToggleComments}
@@ -917,6 +946,7 @@ Preview.propTypes = {
     projectInfo: projectShape,
     projectNotAvailable: PropTypes.bool,
     projectStudios: PropTypes.arrayOf(PropTypes.object),
+    refreshSession: PropTypes.func,
     registrationOpen: PropTypes.bool,
     remixProject: PropTypes.func,
     remixes: PropTypes.arrayOf(PropTypes.object),
@@ -929,6 +959,7 @@ Preview.propTypes = {
     setLovedStatus: PropTypes.func.isRequired,
     setPlayer: PropTypes.func.isRequired,
     shareProject: PropTypes.func.isRequired,
+    showEmailConfirmationBanner: PropTypes.bool,
     toggleStudio: PropTypes.func.isRequired,
     updateProject: PropTypes.func.isRequired,
     useScratch3Registration: PropTypes.bool,
@@ -985,7 +1016,9 @@ const mapStateToProps = state => {
         (authorUsername === state.session.session.user.username ||
         state.permissions.admin === true);
     const areCommentsOn = state.session.session.flags && selectProjectCommentsGloballyEnabled(state);
-
+    const showEmailConfirmationBanner = state.session.session.flags &&
+        state.session.session.flags.has_outstanding_email_confirmation &&
+        state.session.session.flags.confirm_email_banner;
 
     // if we don't have projectInfo, assume it's shared until we know otherwise
     const isShared = !projectInfoPresent || state.preview.projectInfo.is_published;
@@ -1032,6 +1065,7 @@ const mapStateToProps = state => {
         remixes: state.preview.remixes,
         replies: state.comments.replies,
         sessionStatus: state.session.status, // check if used
+        showEmailConfirmationBanner,
         useScratch3Registration: state.navigation.useScratch3Registration,
         user: state.session.session.user,
         userOwnsProject: userOwnsProject,
@@ -1146,6 +1180,9 @@ const mapDispatchToProps = dispatch => ({
         dispatch(GUI.remixProject());
         dispatch(projectCommentActions.resetComments());
     },
+    refreshSession: () => {
+        dispatch(sessionActions.refreshSession());
+    },
     setPlayer: player => {
         dispatch(GUI.setPlayer(player));
     },

src/views/privacypolicy-apps/l10n.json

@@ -0,0 +1,68 @@
+{
+    "privacyApps.title":"Privacy Policy",
+    "privacyApps.updated":"The Scratch Privacy Policy was last updated: January 6, 2022",
+    "privacyApps.intro":"The Scratch Foundation (“Scratch”, “we” or “us”) understands how important privacy is to our community. We wrote this Privacy Policy to explain what Personal Information (“Information”) we collect through our offline editor (the “Scratch App”), how we use, process, and share it, and what we’re doing to keep it safe. It also tells you about your rights and choices with respect to your Personal Information, and how you can contact us if you have any questions or concerns.",
+    
+    "privacyApps.collectionHeader": "What Information Does Scratch Collect About Me?",
+    "privacyApps.collectionParagraph": "For the purpose of this Privacy Policy, “Information” means any information relating to an identified or identifiable individual. The Scratch App automatically collects and stores locally the following Information through its telemetry system: the title of your project in text form, language setting, time zone and events related to your use of the Scratch App (namely when the Scratch App was opened and closed, if a project file has been loaded or saved, or if a new project is created). If you choose to turn on the telemetry sharing feature, the Scratch App will transmit this information to Scratch. Projects created in the Scratch App are not transmitted to or accessible by Scratch unless you choose to upload your project to the Scratch Online Community, at which point the information you share will be subject to the terms of the Scratch Online Community {privacyPolicyLink}. Please see the section “What Happens if I Upload My Project to the Scratch Online Community?” below for more information.",
+    "privacyApps.privacyPolicyLinkText": "Privacy Policy",
+    
+    "privacyApps.usageHeader": "How Does Scratch Use My Information?",
+    "privacyApps.usageIntro": "We use this Information for the following purposes:",
+    "privacyApps.analyticsTitle": "Analytics and Improving the Scratch App",
+    "privacyApps.analyticsDescription": "We use the Information to analyze use of the Scratch App and to enhance your learning experience on the Scratch App.",
+    "privacyApps.researchTitle": "Academic and Scientific Research",
+    "privacyApps.researchDescription": "We de-identify and aggregate Information for statistical analysis in the context of scientific and academic research. For example, to help us understand how people learn through the Scratch App and how we can enhance learning tools for young people. The results of such research are shared with educators and researchers through conferences, journals, and other academic or scientific publications. You can find out more on our {researchPageLink} page.",
+    "privacyApps.researchPageLinkText": "Research",
+    "privacyApps.legalTitle": "Legal",
+    "privacyApps.legalDescription": "We may use your Information to enforce our {termsOfUseLink}, to defend our legal rights, and to comply with our legal obligations and internal policies. We may do this by analyzing your use of the Scratch App.",
+    "privacyApps.termsOfUseLinkText": "Terms of Use",
+
+    "privacyApps.processingHeader": "What Are The Legal Grounds For Processing Your Information?",
+    "privacyApps.processingParagraph": "If you are located in the European Economic Area, the United Kingdom or Switzerland, we only process your Information based on a valid legal ground. A “legal ground” is a reason that justifies our use of your Information. In this case, we or a third party have a legitimate interest in using your Information (if you choose to allow the Scratch App to send the Scratch team your Information) to create, analyze and share your aggregated or de-identified Information for research purposes, to analyze and enhance your learning experience on the Scratch App and otherwise ensure and improve the safety, security, and performance of the Scratch App. We only rely on our or a third party’s legitimate interests to process your Information when these interests are not overridden by your rights and interests.",
+
+    "privacyApps.sharingHeader": "How Does Scratch Share My Information?",
+    "privacyApps.sharingIntro": "We disclose information that we collect through the Scratch App to third parties in the following circumstances:",
+    "privacyApps.serviceProvidersTitle": "Service Providers",
+    "privacyApps.serviceProvidersDescription": "To third parties who provide services such as website hosting, data analysis, Information technology and related infrastructure provisions, customer service, email delivery, and other services.",
+    "privacyApps.researchSharingDescription": "To research institutions, such as the Massachusetts Institute of Technology (MIT), to learn about how our users learn through the Scratch App and develop new learning tools. The results of this research or the statistical analysis may be shared through conferences, journals, and other publications.",
+    "privacyApps.mergerTitle": "Merger",
+    "privacyApps.mergerDescription": "To a potential or actual acquirer, successor, or assignee as part of any reorganization, merger, sale, joint venture, assignment, transfer, or other disposition of all or any portion of our organization or assets. You will have the opportunity to opt out of any such transfer if the new entity’s planned processing of your Information differs materially from that set forth in this Privacy Policy.",
+    "privacyApps.legalSharingDescription": "If required to do so by law or in the good faith belief that such action is appropriate: (a) under applicable law, including laws outside your country of residence; (b) to comply with legal process; (c) to respond to requests from public and government authorities, such as school, school districts, and law enforcement, including public and government authorities outside your country of residence; (d) to enforce our terms and conditions; (e) to protect our operations or those of any of our affiliates; (f) to protect our rights, privacy, safety, or property, and/or that of our affiliates, you, or others; and (g) to allow us to pursue available remedies or limit the damages that we may sustain.",
+
+    "privacyApps.communityHeader": "What Happens If I Upload My Project to the Scratch Online Community?",
+    "privacyApps.communityParagraph": "While using the Scratch App, you may choose to upload your project to the Scratch online community (“Online Community”). If you choose to upload your project to the Online Community, you are sharing your information outside of the Scratch App and providing it to the Online Community service. The information you share when uploading your project, such as your account and project information, will be governed by the Scratch online community {privacyPolicyLink}.",
+
+    "privacyApps.studentsHeader": "Children and Student Privacy",
+    "privacyApps.coppa": "The Scratch Foundation is a 501(c)(3) nonprofit organization. As such, the Children's Online Privacy Protection Act (COPPA) does not apply to Scratch. Nevertheless, Scratch takes children's privacy seriously. Scratch collects only minimal information from its users, and only uses and discloses information to provide the services and for limited other purposes, such as research, as described in this Privacy Policy.",
+    "privacyApps.ferpa": "Scratch does not collect information from a student's education record, as defined by the Family Educational Rights and Privacy Act (FERPA). Scratch does not disclose information of students to any third parties except as described in this Privacy Policy.",
+
+    "privacyApps.eeaHeader": "Your Data Protection Rights (EEA)",
+    "privacyApps.eeaIntro": "If you are located in the European Economic Area, the United Kingdom or Switzerland, you have certain rights in relation to your Information:",
+    "privacyApps.accessTitle": "Access, Correction and Data Portability",
+    "privacyApps.accessDescription": "You may ask for an overview of the Information we process about you and to receive a copy of your Information. You also have the right to request to correct incomplete, inaccurate or outdated Information. To the extent required by applicable law, you may request us to provide your Information to another company.",
+    "privacyApps.objectionTitle": "Objection",
+    "privacyApps.objectionDescription": "You may object to (this means “ask us to stop”) any use of your Information that is not (i) processed to comply with a legal obligation, (ii) necessary to do what is provided in a contract between Scratch and you, or (iii) if we have a compelling reason to do so (such as, to ensure safety and security in our online community). If you do object, we will work with you to find a reasonable solution.",
+    "privacyApps.deletionTitle": "Deletion",
+    "privacyApps.deletionDescription": "You may also request the deletion of your Information, as permitted under applicable law. This applies, for instance, where your Information is outdated or the processing is not necessary or is unlawful; where you withdraw your consent to our processing based on such consent; or where you have objected to our processing. In some situations, we may need to retain your Information due to legal obligations or for litigation purposes. If you want to have all of your Information removed from our servers, please contact {helpEmail} for assistance.",
+    "privacyApps.restrictionTitle": "Restriction of Processing",
+    "privacyApps.restrictionDescription": "You may request that we restrict processing of your Information while we are processing a request relating to (i) the accuracy of your Information, (ii) the lawfulness of the processing of your Information, or (iii) our legitimate interests to process this Information. You may also request that we restrict processing of your Information if you wish to use the Information for litigation purposes.",
+    "privacyApps.withdrawalTitle": "Withdrawal Of Consent",
+    "privacyApps.withdrawalDescription": "Where we rely on consent for the processing of your Information, you have the right to withdraw it at any time and free of charge. When you do so, this will not affect the lawfulness of the processing before your consent withdrawal.",
+    "privacyApps.eeaComplaint":"In addition to the above-mentioned rights, you also have the right to lodge a complaint with a competent supervisory authority subject to applicable law. However, there are exceptions and limitations to each of these rights. We may, for example, refuse to act on a request if the request is manifestly unfounded or excessive, or if the request is likely to adversely affect the rights and freedoms of others, prejudice the execution or enforcement of the law, interfere with pending or future litigation, or infringe applicable law. To submit a request to exercise your rights, please contact {helpEmail} for assistance.",
+
+    "privacyApps.retentionHeader": "Data Retention",
+    "privacyApps.retentionParagraph": "We take measures to delete your Information or keep it in a form that does not allow you to be identified when this Information is no longer necessary for the purposes for which we process it, unless we are required by law to keep this Information for a longer period. When determining the retention period, we take into account various criteria, such as the type of services requested by or provided to you, the nature and length of our relationship with you, possible re-enrollment with our services, the impact on the services we provide to you if we delete some Information from or about you, mandatory retention periods provided by law and the statute of limitations.",
+
+    "privacyApps.protectHeader": "How Does Scratch Protect My Information?",
+    "privacyApps.protectParagraph": "Scratch has in place administrative, physical, and technical procedures that are intended to protect the Information we collect on the Scratch App against accidental or unlawful destruction, accidental loss, unauthorized alteration, unauthorized disclosure or access, misuse, and any other unlawful form of processing of the Information. However, as effective as these measures are, no security system is impenetrable. We cannot completely guarantee the security of our databases, nor can we guarantee that the Information you supply will not be intercepted while being transmitted to us over the Internet.",
+
+    "privacyApps.internationalTransferHeader": "International Data Transfer",
+    "privacyApps.internationalTransferParagraph": "We may transfer your Information to countries other than the country where you are located, including to the U.S. (where our Scratch servers are located) or any other country in which we or our service providers maintain facilities. If you are located in the European Economic Area, the United Kingdom or Switzerland, or other regions with laws governing data collection and use that may differ from U.S. law, please note that we may transfer your Information to a country and jurisdiction that does not have the same data protection laws as your jurisdiction. We apply appropriate safeguards to the Information processed and transferred on our behalf. Please contact us for more information on the safeguards used.",
+
+    "privacyApps.notificationsHeader": "Notifications Of Changes To The Privacy Policy",
+    "privacyApps.notificationsParagraph": "We review our Privacy Policy on a periodic basis, and we may modify our policies as appropriate. We will notify you of any material changes. We encourage you to review our Privacy Policy on a regular basis. The “Last Updated” date at the top of this page indicates when this Privacy Policy was last revised. Your continued use of the Scratch App following these changes means that you accept the revised Privacy Policy.",
+
+    "privacyApps.contactHeader": "Contact Us",
+    "privacyApps.contactIntro": "The Scratch Foundation is the entity responsible for the processing of your Information. If you have any questions about this Privacy Policy, or if you would like to exercise your rights to your Information, you may contact us at {helpEmail} or via mail at:"
+}

src/views/privacypolicy-apps/privacypolicy-apps.jsx

@@ -0,0 +1,311 @@
+const React = require('react');
+
+const Page = require('../../components/page/www/page.jsx');
+const render = require('../../lib/render.jsx');
+const {FormattedMessage, injectIntl, intlShape} = require('react-intl');
+
+const InformationPage = require('../../components/informationpage/informationpage.jsx');
+
+const helpEmailLink = (
+    <a href="mailto:help@scratch.mit.edu">
+        help@scratch.mit.edu
+    </a>
+);
+
+const foundationAddress = (
+    <div>
+        Scratch Foundation<br />
+        ATTN: Privacy Policy<br />
+        201 South Street<br />
+        Boston, MA, 02111
+    </div>
+);
+
+const PrivacyPolicyApps = props => (
+    <InformationPage title={props.intl.formatMessage({id: 'privacyApps.title'})}>
+        <div className="inner info-inner">
+            <section>
+                <p className="lastupdate">
+                    <i>
+                        <FormattedMessage id="privacyApps.updated" />
+                    </i>
+                </p>
+                <p className="intro">
+                    <FormattedMessage id="privacyApps.intro" />
+                </p>
+            </section>
+            <section id="collection">
+                <dl>
+                    <span className="nav-spacer" />
+                    <h3>
+                        <FormattedMessage id="privacyApps.collectionHeader" />
+                    </h3>
+                    <p>
+                        <FormattedMessage
+                            id="privacyApps.collectionParagraph"
+                            values={{
+                                privacyPolicyLink: (
+                                    <a href="/privacy_policy/">
+                                        <FormattedMessage id="privacyApps.privacyPolicyLinkText" />
+                                    </a>
+                                )
+                            }}
+                        />
+                    </p>
+                </dl>
+            </section>
+            <section id="usage">
+                <dl>
+                    <span className="nav-spacer" />
+                    <h3>
+                        <FormattedMessage id="privacyApps.usageHeader" />
+                    </h3>
+                    <p>
+                        <FormattedMessage id="privacyApps.usageIntro" />
+                    </p>
+                    <dt>
+                        <FormattedMessage id="privacyApps.analyticsTitle" />
+                    </dt>
+                    <dd>
+                        <FormattedMessage id="privacyApps.analyticsDescription" />
+                    </dd>
+                    <dt>
+                        <FormattedMessage id="privacyApps.researchTitle" />
+                    </dt>
+                    <dd>
+                        <FormattedMessage
+                            id="privacyApps.researchDescription"
+                            values={{
+                                researchPageLink: (
+                                    <a href="/research/">
+                                        <FormattedMessage id="privacyApps.researchPageLinkText" />
+                                    </a>
+                                )
+                            }}
+                        />
+                    </dd>
+                    <dt>
+                        <FormattedMessage id="privacyApps.legalTitle" />
+                    </dt>
+                    <dd>
+                        <FormattedMessage
+                            id="privacyApps.legalDescription"
+                            values={{
+                                termsOfUseLink: (
+                                    <a href="/terms_of_use/">
+                                        <FormattedMessage id="privacyApps.termsOfUseLinkText" />
+                                    </a>
+                                )
+                            }}
+                        />
+                    </dd>
+                </dl>
+            </section>
+            <section id="processing">
+                <dl>
+                    <span className="nav-spacer" />
+                    <h3>
+                        <FormattedMessage id="privacyApps.processingHeader" />
+                    </h3>
+                    <p>
+                        <FormattedMessage id="privacyApps.processingParagraph" />
+                    </p>
+                </dl>
+            </section>
+            <section id="sharing">
+                <dl>
+                    <span className="nav-spacer" />
+                    <h3>
+                        <FormattedMessage id="privacyApps.sharingHeader" />
+                    </h3>
+                    <p>
+                        <FormattedMessage id="privacyApps.sharingIntro" />
+                    </p>
+                    <dt>
+                        <FormattedMessage id="privacyApps.serviceProvidersTitle" />
+                    </dt>
+                    <dd>
+                        <FormattedMessage id="privacyApps.serviceProvidersDescription" />
+                    </dd>
+                    <dt>
+                        <FormattedMessage id="privacyApps.researchTitle" />
+                    </dt>
+                    <dd>
+                        <FormattedMessage id="privacyApps.researchSharingDescription" />
+                    </dd>
+                    <dt>
+                        <FormattedMessage id="privacyApps.mergerTitle" />
+                    </dt>
+                    <dd>
+                        <FormattedMessage id="privacyApps.mergerDescription" />
+                    </dd>
+                    <dt>
+                        <FormattedMessage id="privacyApps.legalTitle" />
+                    </dt>
+                    <dd>
+                        <FormattedMessage id="privacyApps.legalSharingDescription" />
+                    </dd>
+                </dl>
+            </section>
+            <section id="community">
+                <dl>
+                    <span className="nav-spacer" />
+                    <h3>
+                        <FormattedMessage id="privacyApps.communityHeader" />
+                    </h3>
+                    <p>
+                        <FormattedMessage
+                            id="privacyApps.communityParagraph"
+                            values={{
+                                privacyPolicyLink: (
+                                    <a href="/privacy_policy/">
+                                        <FormattedMessage id="privacyApps.privacyPolicyLinkText" />
+                                    </a>
+                                )
+                            }}
+                        />
+                    </p>
+                </dl>
+            </section>
+            <section id="students">
+                <dl>
+                    <span className="nav-spacer" />
+                    <h3>
+                        <FormattedMessage id="privacyApps.studentsHeader" />
+                    </h3>
+                    <p>
+                        <FormattedMessage id="privacyApps.coppa" />
+                    </p>
+                    <p>
+                        <FormattedMessage id="privacyApps.ferpa" />
+                    </p>
+                </dl>
+            </section>
+            <section id="eea">
+                <dl>
+                    <span className="nav-spacer" />
+                    <h3>
+                        <FormattedMessage id="privacyApps.eeaHeader" />
+                    </h3>
+                    <p>
+                        <FormattedMessage id="privacyApps.eeaIntro" />
+                    </p>
+                    <dt>
+                        <FormattedMessage id="privacyApps.accessTitle" />
+                    </dt>
+                    <dd>
+                        <FormattedMessage id="privacyApps.accessDescription" />
+                    </dd>
+                    <dt>
+                        <FormattedMessage id="privacyApps.objectionTitle" />
+                    </dt>
+                    <dd>
+                        <FormattedMessage id="privacyApps.objectionDescription" />
+                    </dd>
+                    <dt>
+                        <FormattedMessage id="privacyApps.deletionTitle" />
+                    </dt>
+                    <dd>
+                        <FormattedMessage
+                            id="privacyApps.deletionDescription"
+                            values={{
+                                helpEmail: helpEmailLink
+                            }}
+                        />
+                    </dd>
+                    <dt>
+                        <FormattedMessage id="privacyApps.restrictionTitle" />
+                    </dt>
+                    <dd>
+                        <FormattedMessage id="privacyApps.restrictionDescription" />
+                    </dd>
+                    <dt>
+                        <FormattedMessage id="privacyApps.withdrawalTitle" />
+                    </dt>
+                    <dd>
+                        <FormattedMessage id="privacyApps.withdrawalDescription" />
+                    </dd>
+                    <p>
+                        <FormattedMessage
+                            id="privacyApps.eeaComplaint"
+                            values={{
+                                helpEmail: helpEmailLink
+                            }}
+                        />
+                    </p>
+                </dl>
+            </section>
+            <section id="retention">
+                <dl>
+                    <span className="nav-spacer" />
+                    <h3>
+                        <FormattedMessage id="privacyApps.retentionHeader" />
+                    </h3>
+                    <p>
+                        <FormattedMessage id="privacyApps.retentionParagraph" />
+                    </p>
+                </dl>
+            </section>
+            <section id="protect">
+                <dl>
+                    <span className="nav-spacer" />
+                    <h3>
+                        <FormattedMessage id="privacyApps.protectHeader" />
+                    </h3>
+                    <p>
+                        <FormattedMessage id="privacyApps.protectParagraph" />
+                    </p>
+                </dl>
+            </section>
+            <section id="international-transfer">
+                <dl>
+                    <span className="nav-spacer" />
+                    <h3>
+                        <FormattedMessage id="privacyApps.internationalTransferHeader" />
+                    </h3>
+                    <p>
+                        <FormattedMessage id="privacyApps.internationalTransferParagraph" />
+                    </p>
+                </dl>
+            </section>
+            <section id="notifications">
+                <dl>
+                    <span className="nav-spacer" />
+                    <h3>
+                        <FormattedMessage id="privacyApps.notificationsHeader" />
+                    </h3>
+                    <p>
+                        <FormattedMessage id="privacyApps.notificationsParagraph" />
+                    </p>
+                </dl>
+            </section>
+            <section id="contact">
+                <dl>
+                    <span className="nav-spacer" />
+                    <h3>
+                        <FormattedMessage id="privacyApps.contactHeader" />
+                    </h3>
+                    <p>
+                        <FormattedMessage
+                            id="privacyApps.contactIntro"
+                            values={{
+                                helpEmail: helpEmailLink
+                            }}
+                        />
+                    </p>
+                    <p>
+                        {foundationAddress}
+                    </p>
+                </dl>
+            </section>
+        </div>
+    </InformationPage>
+);
+
+PrivacyPolicyApps.propTypes = {
+    intl: intlShape
+};
+
+const IntlPrivacyPolicyApps = injectIntl(PrivacyPolicyApps);
+
+render(<Page><IntlPrivacyPolicyApps /></Page>, document.getElementById('app'));

src/views/research/l10n.json

@@ -1,9 +1,9 @@
 {
     "research.title":"Research on Scratch",
-    "research.conductors":"Research on Scratch is being conducted by members of the MIT Scratch Team and researchers at other universities, including Yasmin Kafai at the University of Pennsylvania Graduate School of Education, Karen Brennan at the Harvard Graduate School of Education, Benjamin Mako Hill at the University of Washington, Andrés Monroy Hernandez at Microsoft Research, Mimi Ito and Crystle Martin at the University of California, Irvine, Quinn Burke at College of Charleston, Deborah Fields at Utah State University, and Kylie Peppler at Indiana University.",
+    "research.conductors":"Research on Scratch is being conducted by the Scratch Foundation team. By sharing projects and participating in the Scratch online community, you are helping us better understand how people use and learn with Scratch. Any publicly shared projects, comments, or other material on the Scratch site may be included in research analyses, presentations, and reports. We never share personally identifiable information. To learn more, please read the {ethicsCodeLink}. (If you have any questions, please use the {contactLink} form.)",
-    "research.privacy":"By sharing projects and participating in the Scratch online community, you are helping us better understand how people can use and learn with Scratch. Any publicly shared projects, comments, or other material on the Scratch site may be included in the research analysis, presentations, papers, and reports. No personally identifiable information is shared. (If you have any questions, please use the {contactLink} form.)",
+    "research.collaborators":"Previous research collaborators have included the Lifelong Kindergarten group at MIT, Yasmin Kafai at the University of Pennsylvania Graduate School of Education, Karen Brennan at the Harvard Graduate School of Education, Benjamin Mako Hill at the University of Washington, Andrés Monroy Hernandez at Microsoft Research, Mimi Ito and Crystle Martin at the University of California, Irvine, Quinn Burke at College of Charleston, Deborah Fields at Utah State University, and Kylie Peppler at Indiana University. Below are selected research papers, presentations, and theses on Scratch and the Scratch online community, followed by a list of National Science Foundation grants awarded to support Scratch.",
+    "research.ethicsCodeLinkText": "Scratch Foundation’s Research Code of Ethics",
     "research.contactLinkText":"Contact Us",
-    "research.intro":"Below are selected research papers, presentations, and theses on Scratch and the Scratch online community, followed by a list of National Science Foundation grants awarded to support Scratch.",
     "research.papers":"Research Papers & Presentations",
     "research.grants":"National Science Foundation Grants"
 }

src/views/research/research.jsx

@@ -11,20 +11,26 @@ const Page = require('../../components/page/www/page.jsx');
 const Research = props => (
     <InformationPage title={props.intl.formatMessage({id: 'research.title'})}>
         <div className="inner info-inner">
-            <p><FormattedMessage id="research.conductors" /></p>
+            <p><FormattedMessage
-            <p>
+                id="research.conductors"
-                <FormattedMessage
-                    id="research.privacy"
                 values={{
+                    ethicsCodeLink: (
+                        <a href="/code-of-ethics/">
+                            <FormattedMessage id="research.ethicsCodeLinkText" />
+                        </a>
+                    ),
                     contactLink: (
                         <a href="/contact-us/">
                             <FormattedMessage id="research.contactLinkText" />
                         </a>
                     )
                 }}
+            /></p>
+            <p>
+                <FormattedMessage
+                    id="research.collaborators"
                 />
             </p>
-            <p><FormattedMessage id="research.intro" /></p>
             <h3><FormattedMessage id="research.papers" /></h3>
             <ul>
                 <li>
@@ -84,8 +90,8 @@ const Research = props => (
                     Hill, B.M. &amp; Monroy-Hernández, A. (2013).{' '}
                     <a href="https://dl.acm.org/citation.cfm?id=2441776.2441893">
                         The cost of collaboration for code and art: Evidence from a remixing community.
-                    </a> Forthcoming in &lt;i&gt;Proceedings of the ACM Conference{' '}
+                    </a> Forthcoming in <i>Proceedings of the ACM Conference{' '}
-                    on Computer Supported Cooperative Work (CSCW &apos;13)&lt;/i&gt;.{' '}
+                    on Computer Supported Cooperative Work (CSCW &apos;13)</i>.{' '}
                     San Antonio, Texas, USA: ACM. Best Paper Award [
                     <a href="https://dl.acm.org/citation.cfm?id=2441776.2441893">
                         Official Link

src/views/splash/donate/donate-banner.scss

@@ -5,13 +5,14 @@ $tile-height: 244px;
 
 .donate-banner {
     display: flex;
-    position: fixed;
+    position: sticky;
     z-index: 8;
     background-color: $ui-aqua-dark;
     padding: 0;
     overflow: hidden;
     align-items: center;
     justify-content: center;
+    margin-bottom: 0px;
 
     .donate-container {
         display: flex;

src/views/splash/hoc/hoc-banner.scss

@@ -96,11 +96,11 @@ $tile-height: 244px;
 
         .hoc-container {
             bottom: 4rem;
-            width: $tabletPortrait;
+            width: $cols8;
         }
 
         .hoc-banner-images {
-            width: $tabletPortrait;
+            width: $cols8;
         }
 
         .hoc-banner-image {

src/views/splash/hoc/top-banner.jsx

@@ -39,19 +39,19 @@ const TopBanner = () => (
                         </FlexRow>
                     </a>
                 </MediaQuery>
-                <a href="/projects/331474033/editor?tutorial=code-cartoon">
+                <a href="/projects/editor?tutorial=music">
                     <FlexRow className="hoc-banner-image column">
-                        <img src="/images/hoc/code-a-cartoon.jpg" />
+                        <img src="/images/hoc/make-music.jpg" />
                         <div className="hoc-image-text">
-                            <FormattedMessage id="hocbanner.codeACartoon" />
+                            <FormattedMessage id="hocbanner.makeMusic" />
                         </div>
                     </FlexRow>
                 </a>
-                <a href="/projects/editor?tutorial=make-it-fly">
+                <a href="/projects/editor?tutorial=chase-game">
                     <FlexRow className="hoc-banner-image column">
-                        <img src="/images/hoc/make-it-fly.jpg" />
+                        <img src="/images/hoc/chase-game.jpg" />
                         <div className="hoc-image-text">
-                            <FormattedMessage id="hocbanner.makeItFly" />
+                            <FormattedMessage id="hocbanner.chaseGame" />
                         </div>
                     </FlexRow>
                 </a>

src/views/splash/l10n.json

@@ -42,6 +42,8 @@
     "hocbanner.codeACartoon": "Code a Cartoon",
     "hocbanner.talking": "Talking Tales",
     "hocbanner.makeItFly": "Make It Fly",
+    "hocbanner.makeMusic": "Make Music",
+    "hocbanner.chaseGame": "Make a Chase Game",
 
     "welcome.welcomeToScratch": "Welcome to Scratch!",
     "welcome.learn": "Learn how to make a project in Scratch",

src/views/splash/presentation.jsx

@@ -14,8 +14,7 @@ const AdminPanel = require('../../components/adminpanel/adminpanel.jsx');
 const Box = require('../../components/box/box.jsx');
 const Button = require('../../components/forms/button.jsx');
 const Carousel = require('../../components/carousel/carousel.jsx');
-const DropdownBanner = require('../../components/dropdown-banner/banner.jsx');
+const EmailConfirmationBanner = require('../../components/dropdown-banner/email-confirmation/banner.jsx');
-const IframeModal = require('../../components/modal/iframe/modal.jsx');
 const Intro = require('../../components/intro/intro.jsx');
 const LegacyCarousel = require('../../components/carousel/legacy-carousel.jsx');
 const News = require('../../components/news/news.jsx');
@@ -201,28 +200,9 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
     constructor (props) {
         super(props);
         bindAll(this, [
-            'handleMessage',
             'renderHomepageRows'
         ]);
     }
-    componentDidMount () {
-        if (this.props.shouldShowEmailConfirmation) window.addEventListener('message', this.handleMessage);
-    }
-    componentWillUnmount () {
-        window.removeEventListener('message', this.handleMessage);
-    }
-    handleMessage (e) {
-        if (e.origin !== window.location.origin) return;
-        if (e.source !== this.emailConfirmationiFrame.contentWindow) return;
-        if (e.data === 'resend-done') {
-            this.props.onHideEmailConfirmationModal();
-        } else {
-            const data = JSON.parse(e.data);
-            if (data.action === 'leave-page') {
-                window.location.href = data.uri;
-            }
-        }
-    }
     renderHomepageRows () {
         const rows = [
             <Box
@@ -375,41 +355,25 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
 
         return (
             <div className="splash">
-                {this.props.shouldShowEmailConfirmation ? [
+                {(this.props.shouldShowEmailConfirmation &&
-                    <DropdownBanner
+                    <EmailConfirmationBanner
-                        className="warning"
-                        key="confirmedEmail"
                         onRequestDismiss={() => { // eslint-disable-line react/jsx-no-bind
                             this.props.onDismiss('confirmed_email');
                         }}
-                    >
+                    />)}
-                        <a
-                            href="#"
-                            onClick={this.props.onShowEmailConfirmationModal}
-                        >
-                            Confirm your email
-                        </a>{' '}to enable sharing.{' '}
-                        <a href="/faq/#accounts">
-                            Having trouble?
-                        </a>
-                    </DropdownBanner>,
-                    <IframeModal
-                        className="mod-confirmation"
-                        componentRef={iframe => { // eslint-disable-line react/jsx-no-bind
-                            this.emailConfirmationiFrame = iframe;
-                        }}
-                        isOpen={this.props.emailConfirmationModalOpen}
-                        key="iframe-modal"
-                        src="/accounts/email_resend_standalone/"
-                        onRequestClose={this.props.onHideEmailConfirmationModal}
-                    />
-                ] : []}
                 {this.props.isEducator ? [
                     <TeacherBanner
                         key="teacherbanner"
                         messages={messages}
                     />
                 ] : []}
+                {
+                    this.props.shouldShowDonateBanner && (
+                        <DonateBanner
+                            onRequestClose={this.props.onCloseDonateBanner}
+                        />
+                    )
+                }
                 {
                     this.props.shouldShowHOCTopBanner && (
                         <MediaQuery
@@ -420,13 +384,6 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
                         </MediaQuery>
                     )
                 }
-                {
-                    this.props.shouldShowDonateBanner && (
-                        <DonateBanner
-                            onRequestClose={this.props.onCloseDonateBanner}
-                        />
-                    )
-                }
                 {
                     this.props.shouldShowIntro && (
                         <Intro
@@ -560,7 +517,6 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
 SplashPresentation.propTypes = {
     activity: PropTypes.arrayOf(PropTypes.object),
     adminPanelOpen: PropTypes.bool,
-    emailConfirmationModalOpen: PropTypes.bool.isRequired,
     featuredGlobal: PropTypes.shape({
         community_featured_projects: PropTypes.array,
         community_featured_studios: PropTypes.array,
@@ -578,10 +534,8 @@ SplashPresentation.propTypes = {
     onCloseAdminPanel: PropTypes.func.isRequired,
     onCloseDonateBanner: PropTypes.func.isRequired,
     onDismiss: PropTypes.func.isRequired,
-    onHideEmailConfirmationModal: PropTypes.func.isRequired,
     onOpenAdminPanel: PropTypes.func.isRequired,
     onRefreshHomepageCache: PropTypes.func.isRequired,
-    onShowEmailConfirmationModal: PropTypes.func.isRequired,
     refreshCacheStatus: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
     sessionStatus: PropTypes.string.isRequired,
     sharedByFollowing: PropTypes.arrayOf(PropTypes.object),

src/views/splash/splash.jsx

@@ -13,8 +13,8 @@ const Page = require('../../components/page/www/page.jsx');
 const SplashPresentation = require('./presentation.jsx');
 
 const SCRATCH_WEEK_START_TIME = 1621224000000; // 2021-05-17 00:00:00 -- No end time for now
-const HOC_START_TIME = 1605484800000; // 2020-11-16 00:00:00
+const HOC_START_TIME = 1638144000000; // 2021-11-29 00:00:00 GMT in ms
-const HOC_END_TIME = 1608681600000; // 2020-12-23 00:00:00
+const HOC_END_TIME = 1639353600000; // 2021-12-13 00:00:00 GMT in ms
 
 class Splash extends React.Component {
     constructor (props) {
@@ -23,8 +23,6 @@ class Splash extends React.Component {
             'getNews',
             'handleRefreshHomepageCache',
             'getHomepageRefreshStatus',
-            'handleShowEmailConfirmationModal',
-            'handleHideEmailConfirmationModal',
             'handleCloseAdminPanel',
             'handleCloseDonateBanner',
             'handleOpenAdminPanel',
@@ -36,7 +34,6 @@ class Splash extends React.Component {
             adminPanelOpen: false,
             dismissedDonateBanner: false,
             news: [], // gets news posts from the scratch Tumblr
-            emailConfirmationModalOpen: false,
             refreshCacheStatus: 'notrequested'
         };
     }
@@ -123,12 +120,6 @@ class Splash extends React.Component {
     handleCloseDonateBanner () {
         this.setState({dismissedDonateBanner: true});
     }
-    handleShowEmailConfirmationModal () {
-        this.setState({emailConfirmationModalOpen: true});
-    }
-    handleHideEmailConfirmationModal () {
-        this.setState({emailConfirmationModalOpen: false});
-    }
     handleDismiss (cue) {
         api({
             host: '',
@@ -176,8 +167,7 @@ class Splash extends React.Component {
             this.state.dismissedDonateBanner === false &&
             this.props.sessionStatus === sessionActions.Status.FETCHED && // done fetching session
             Object.keys(this.props.user).length === 0 && // no user session found
-            Date.now() >= SCRATCH_WEEK_START_TIME &&
+            Date.now() >= SCRATCH_WEEK_START_TIME
-            this.shouldShowHOCTopBanner() !== true
         );
     }
     render () {
@@ -193,7 +183,6 @@ class Splash extends React.Component {
             <SplashPresentation
                 activity={this.props.activity}
                 adminPanelOpen={this.state.adminPanelOpen}
-                emailConfirmationModalOpen={this.state.emailConfirmationModalOpen}
                 featuredGlobal={this.props.featured}
                 inStudiosFollowing={this.props.studios}
                 isAdmin={this.props.isAdmin}
@@ -213,10 +202,8 @@ class Splash extends React.Component {
                 onCloseDonateBanner={this.handleCloseDonateBanner}
                 onCloseAdminPanel={this.handleCloseAdminPanel}
                 onDismiss={this.handleDismiss}
-                onHideEmailConfirmationModal={this.handleHideEmailConfirmationModal}
                 onOpenAdminPanel={this.handleOpenAdminPanel}
                 onRefreshHomepageCache={this.handleRefreshHomepageCache}
-                onShowEmailConfirmationModal={this.handleShowEmailConfirmationModal}
             />
         );
     }

src/views/studio/l10n.json

@@ -102,7 +102,7 @@
     "studio.transfer.alert.somethingWentWrong": "Something went wrong transferring this studio to a new host.",
     "studio.transfer.alert.wasntTheRightPassword": "Hmm, that wasn’t the right password.",
     "studio.transfer.alert.tooManyPasswordAttempts": "Too many password attempts. Please try again later.",
-    "studio.transfer.alert.thisUserCannotBecomeHost": "This user cannot become the host — try transfering to another manager",
+    "studio.transfer.alert.thisUserCannotBecomeHost": "This user cannot become the host — try transferring to another manager",
 
     "studio.remove": "Remove",
     "studio.promote": "Promote",

src/views/studio/studio-activity.jsx

@@ -195,7 +195,7 @@ const getComponentForItem = item => {
                                 </a>
                             ),
                             actorProfileLink: (
-                                <a href={`/users/${item.recipient_username}`}>
+                                <a href={`/users/${item.actor_username}`}>
                                     {item.actor_username}
                                 </a>
                             )

static/images/annual-report/2020/Donate Illustration.svg

@@ -0,0 +1,26 @@
+<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="12" y="24" width="276" height="252">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 24H288V275.999H12V24Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M287.553 113.101C279.488 204.286 176.208 276 150.009 276C123.81 276 20.513 204.286 12.465 113.101C12.233 110.126 12 107.152 12 104.177C12 59.965 48.108 24 92.513 24C112.404 24 130.692 31.135 144.671 43.21C147.733 45.854 152.285 45.854 155.347 43.21C169.326 31.135 187.615 24 207.505 24C251.893 24 288 59.965 288 104.177C288 107.152 287.768 110.126 287.553 113.101Z" fill="#0DA57A"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M158.114 176.006C144.837 182.11 149.718 164.98 163.039 160.725C172.852 157.59 184.781 152.323 187.449 137.411C188.558 131.219 186.985 124.105 180.544 120.161C173.961 116.13 166.767 118.404 160.996 122.917C152.774 129.346 145.553 121.153 154.752 113.797C175.284 97.3789 191.893 112.797 195.431 118.795C193.339 110.652 186.197 95.1359 185.114 80.2929C184.455 71.2519 196.461 64.6429 196.474 76.8419C196.478 81.8349 197.217 84.0266 197.217 84.0266C197.217 84.0266 205.376 80.2676 209.617 92.6116C213.456 92.6536 218.359 97.2366 218.238 102.156C217.358 137.84 237.122 154.006 236.046 173.799C234.872 195.392 202.626 194.114 192.747 176.471C185.947 164.328 166.978 171.931 158.114 176.006Z" fill="#E4B681"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M192.747 176.47C201.4 192.965 225.779 226.43 227.49 226.864C227.49 226.864 244.885 209.544 258.33 189.852C258.33 189.852 239.361 172.214 233.185 158.598L192.747 176.47Z" fill="#E4B681"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M231.17 223.363L227.64 226.723C227.54 226.813 227.49 226.863 227.49 226.863L227.27 226.733C224.27 224.353 201.13 192.443 192.75 176.473C185.95 164.324 166.98 171.933 158.11 176.004C153.38 178.183 150.96 177.403 150.4 175.313V175.293C153.81 179.254 176.99 161.403 189.25 166.763C192.4 168.134 195.06 170.733 197.69 174.293C200.33 177.863 202.95 182.403 206 187.664C211.76 197.563 219.11 210.023 231.17 223.363Z" fill="black" fill-opacity="0.15"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M227.49 226.862C227.44 226.852 227.36 226.802 227.27 226.732L227.49 226.862Z" fill="black" fill-opacity="0.15"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M187.78 133.645C187.74 128.525 185.7 123.326 180.54 120.166C173.96 116.135 166.77 118.405 161 122.916C156.24 126.635 151.82 125.465 150.72 122.385V122.374C153.61 123.815 156.33 123.544 159.13 121.155C161.92 118.775 168.87 113.935 177.79 116.326C186.2 118.565 187.82 128.615 187.78 133.645Z" fill="black" fill-opacity="0.15"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M195.43 118.796L200.197 125.09L190.707 104.523L195.43 118.796Z" fill="black" fill-opacity="0.15"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M141.892 176.006C155.169 182.11 150.288 164.98 136.967 160.725C127.154 157.59 115.225 152.323 112.557 137.411C111.448 131.219 113.021 124.105 119.461 120.161C126.045 116.13 133.239 118.404 139.01 122.917C147.231 129.346 154.453 121.153 145.253 113.797C124.722 97.3789 108.113 112.797 104.575 118.795C106.667 110.652 113.809 95.1359 114.892 80.2929C115.551 71.2519 103.545 64.6429 103.532 76.8419C103.527 81.8349 102.776 83.1356 102.776 83.1356C102.776 83.1356 94.6169 79.3766 90.3759 91.7206C86.5369 91.7626 81.6329 96.3456 81.7549 101.265C82.6349 136.949 62.8839 154.006 63.9599 173.799C65.1339 195.392 97.3789 194.114 107.259 176.471C114.059 164.328 133.028 171.931 141.892 176.006Z" fill="#825331"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M107.259 176.47C98.6059 192.965 74.2269 226.43 72.5159 226.864C72.5159 226.864 55.9059 210.696 42.4619 191.003C42.4619 191.003 60.6449 172.214 66.8209 158.598L107.259 176.47Z" fill="#825331"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M68.8357 223.363L72.3657 226.723C72.4657 226.813 72.5157 226.863 72.5157 226.863L72.7357 226.733C75.7357 224.353 98.8757 192.443 107.256 176.473C114.056 164.324 133.026 171.933 141.896 176.004C146.626 178.183 149.046 177.403 149.606 175.313V175.294C146.196 179.254 123.016 161.403 110.756 166.763C107.606 168.134 104.946 170.733 102.316 174.294C99.6757 177.863 97.0557 182.403 94.0057 187.663C88.2457 197.563 80.8957 210.023 68.8357 223.363Z" fill="black" fill-opacity="0.15"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M72.5157 226.862C72.5657 226.852 72.6457 226.802 72.7357 226.732L72.5157 226.862Z" fill="black" fill-opacity="0.15"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M112.226 133.645C112.266 128.525 114.306 123.326 119.466 120.166C126.046 116.135 133.236 118.405 139.006 122.916C143.766 126.635 148.186 125.465 149.286 122.385V122.375C146.396 123.815 143.676 123.545 140.876 121.155C138.086 118.775 131.136 113.935 122.216 116.326C113.806 118.565 112.186 128.615 112.226 133.645Z" fill="black" fill-opacity="0.15"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M104.575 118.796L99.8083 125.09L109.298 104.523L104.575 118.796Z" fill="black" fill-opacity="0.15"/>
+<mask id="mask1" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="12" y="24" width="276" height="90">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 24.0039H288V113.344H12V24.0039Z" fill="white"/>
+</mask>
+<g mask="url(#mask1)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M288 104.174C288 107.153 287.77 110.123 287.55 113.104C287.506 113.104 287.526 113.104 287.482 113.105C282.947 73.1479 248.813 42.0039 207.51 42.0039C187.79 42.0039 169.646 49.0079 155.718 60.8929C152.426 63.7009 147.592 63.7019 144.3 60.8939C130.367 49.0079 112.23 42.0039 92.51 42.0039C51.11 42.0039 16.91 73.2739 12.49 113.344H12.489C12.243 110.283 12 107.234 12 104.174C12 59.9639 48.11 24.0039 92.51 24.0039C112.23 24.0039 130.367 31.0079 144.3 42.8939C147.592 45.7019 152.426 45.7009 155.718 42.8929C169.646 31.0079 187.79 24.0039 207.51 24.0039C251.89 24.0039 288 59.9639 288 104.174Z" fill="black" fill-opacity="0.1"/>
+</g>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.1453 10.1207L12.021 14.2451C11.6821 14.5643 11.2066 14.6497 10.7981 14.4724C10.3896 14.2964 10.1374 13.9076 10.1374 13.457V11.8927L4.3974 11.0954C3.51867 10.9811 2.8501 10.2166 2.8501 9.31688C2.8501 9.23939 2.85535 9.16058 2.86455 9.08308C2.99196 8.27134 3.62506 7.6448 4.40397 7.54629L10.1374 6.72797V5.2319C10.1374 4.77612 10.4053 4.37024 10.8191 4.19818C11.2355 4.02611 11.6965 4.11937 12.021 4.4438L16.1453 8.56819C16.3489 8.77309 16.4619 9.04893 16.4619 9.34447C16.4619 9.64 16.3489 9.91584 16.1453 10.1207Z" fill="white"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.1453 10.1207L12.021 14.2451C11.6821 14.5643 11.2066 14.6497 10.7981 14.4724C10.3896 14.2964 10.1374 13.9076 10.1374 13.457V11.8927L4.3974 11.0954C3.51867 10.9811 2.8501 10.2166 2.8501 9.31688C2.8501 9.23939 2.85535 9.16058 2.86455 9.08308C2.99196 8.27134 3.62506 7.6448 4.40397 7.54629L10.1374 6.72797V5.2319C10.1374 4.77612 10.4053 4.37024 10.8191 4.19818C11.2355 4.02611 11.6965 4.11937 12.021 4.4438L16.1453 8.56819C16.3489 8.77309 16.4619 9.04893 16.4619 9.34447C16.4619 9.64 16.3489 9.91584 16.1453 10.1207Z" fill="#9966ff"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.5412 8.33393V17.4913C23.5193 18.2219 23.0863 18.8445 22.4359 19.1012C21.787 19.3593 21.0754 19.2076 20.5753 18.7075L18.8386 16.9708L11.5812 22.4579C10.4788 23.3066 8.88792 23.2001 7.88907 22.2013C7.80303 22.1152 7.72138 22.0219 7.64555 21.9257C6.88584 20.8831 6.89313 19.4847 7.64847 18.5106L13.105 11.2372L11.4441 9.5763C10.9381 9.07031 10.785 8.32226 11.0533 7.67191C11.3246 7.01864 11.9399 6.61035 12.6602 6.61035L21.8176 6.61035C22.2711 6.61181 22.7028 6.79262 23.0309 7.12072C23.3589 7.44881 23.5398 7.88043 23.5412 8.33393Z" fill="white"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.5412 8.33393V17.4913C23.5193 18.2219 23.0863 18.8445 22.4359 19.1012C21.787 19.3593 21.0754 19.2076 20.5753 18.7075L18.8386 16.9708L11.5812 22.4579C10.4788 23.3066 8.88792 23.2001 7.88907 22.2013C7.80303 22.1152 7.72138 22.0219 7.64555 21.9257C6.88584 20.8831 6.89313 19.4847 7.64847 18.5106L13.105 11.2372L11.4441 9.5763C10.9381 9.07031 10.785 8.32226 11.0533 7.67191C11.3246 7.01864 11.9399 6.61035 12.6602 6.61035L21.8176 6.61035C22.2711 6.61181 22.7028 6.79262 23.0309 7.12072C23.3589 7.44881 23.5398 7.88043 23.5412 8.33393Z" fill="#9966ff"/>
+</svg>

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

@@ -0,0 +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="M12 17.4C10.0182 17.4 8.4 15.7818 8.4 13.8C8.4 11.8038 10.0182 10.2 12 10.2C13.9962 10.2 15.6 11.8038 15.6 13.8C15.6 15.7818 13.9962 17.4 12 17.4ZM19.2 7.5H17.94C17.5962 7.5 17.31 7.32 17.1462 7.032L15.9402 4.8378C15.618 4.26 15.024 3.9 14.358 3.9H9.66C8.994 3.9 8.4 4.26 8.0742 4.8378L6.852 7.032C6.69 7.32 6.402 7.5 6.078 7.5H4.8C3.81 7.5 3 8.31 3 9.3V18.3C3 19.2918 3.81 20.1 4.8 20.1H19.2C20.19 20.1 21 19.2918 21 18.3V9.3C21 8.31 20.19 7.5 19.2 7.5Z" fill="white"/>
+</svg>

static/images/annual-report/2020/Symbols-UI/File Download.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.4992 15.2466L16.965 10.7807C17.3903 10.3554 17.0795 9.65365 16.4906 9.65365H14.315L12.9899 4.40263C12.9081 4.07383 12.6464 3.79574 12.2865 3.71558C11.7794 3.58471 11.256 3.89389 11.1251 4.40263L9.80006 9.65365H7.57533C6.98643 9.65365 6.67562 10.3554 7.10094 10.7807L11.5668 15.2466C11.8285 15.5099 12.2375 15.5099 12.4992 15.2466ZM20.4001 16.7068V14.0076C20.4001 13.3206 19.8603 12.7808 19.1732 12.7808C18.5025 12.7808 17.9464 13.3206 17.9464 14.0076V16.7068C17.9464 17.4265 17.3574 18.0318 16.6377 18.0318H7.37887C6.64275 18.0318 6.05385 17.4265 6.05385 16.7068V14.0076C6.05385 13.3206 5.49766 12.7808 4.82697 12.7808C4.15628 12.7808 3.6001 13.3206 3.6001 14.0076V16.7068C3.6001 18.7843 5.28501 20.4855 7.37887 20.4855H16.6377C18.7152 20.4855 20.4001 18.7843 20.4001 16.7068Z" fill="white"/>
+<mask id="mask0" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="3" y="3" width="18" height="18">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.4992 15.2466L16.965 10.7807C17.3903 10.3554 17.0795 9.65365 16.4906 9.65365H14.315L12.9899 4.40263C12.9081 4.07383 12.6464 3.79574 12.2865 3.71558C11.7794 3.58471 11.256 3.89389 11.1251 4.40263L9.80006 9.65365H7.57533C6.98643 9.65365 6.67562 10.3554 7.10094 10.7807L11.5668 15.2466C11.8285 15.5099 12.2375 15.5099 12.4992 15.2466ZM20.4001 16.7068V14.0076C20.4001 13.3206 19.8603 12.7808 19.1732 12.7808C18.5025 12.7808 17.9464 13.3206 17.9464 14.0076V16.7068C17.9464 17.4265 17.3574 18.0318 16.6377 18.0318H7.37887C6.64275 18.0318 6.05385 17.4265 6.05385 16.7068V14.0076C6.05385 13.3206 5.49766 12.7808 4.82697 12.7808C4.15628 12.7808 3.6001 13.3206 3.6001 14.0076V16.7068C3.6001 18.7843 5.28501 20.4855 7.37887 20.4855H16.6377C18.7152 20.4855 20.4001 18.7843 20.4001 16.7068Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+<rect y="0.0859375" width="24" height="24" fill="white"/>
+</g>
+</svg>

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

@@ -0,0 +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>

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

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.773 12.3555C16.409 9.735 16.409 5.4863 13.773 2.86578C11.1369 0.245261 6.86307 0.245261 4.22703 2.86578C1.59099 5.4863 1.59099 9.735 4.22703 12.3555L7.58997 15.6987C8.37005 16.4742 9.62995 16.4742 10.41 15.6987L13.773 12.3555ZM9 11.2504C10.9882 11.2504 12.6 9.63862 12.6 7.65039C12.6 5.66217 10.9882 4.05039 9 4.05039C7.01178 4.05039 5.4 5.66217 5.4 7.65039C5.4 9.63862 7.01178 11.2504 9 11.2504Z" fill="#774DCB"/>
+</svg>

static/images/annual-report/2020/Symbols-UI/Open Link.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.7562 3.72852H19.3354C18.5334 3.72852 18.1648 4.68319 18.72 5.23841L20.7713 7.28964L17.0698 13.4896C16.8369 13.8767 16.8215 14.3857 17.0852 14.8005C17.44 15.402 18.225 15.6041 18.828 15.2478L25.028 11.5463L27.1255 13.6438C27.6807 14.199 28.6353 13.8304 28.6353 13.0285V4.60762C28.6369 4.11255 28.2513 3.72698 27.7562 3.72852ZM17.6 6.48584C17.6 5.60219 16.8837 4.88584 16 4.88584H9.60005L9.31801 4.89399C6.79832 5.03998 4.80005 7.12955 4.80005 9.68584V22.4858L4.8082 22.7679C4.95419 25.2876 7.04376 27.2858 9.60005 27.2858H22.4001L22.6821 27.2777C25.2018 27.1317 27.2001 25.0421 27.2001 22.4858V16.0858L27.1893 15.8992C27.0969 15.1035 26.4206 14.4858 25.6 14.4858C24.7164 14.4858 24 15.2022 24 16.0858V22.4858L23.9893 22.6724C23.8969 23.4682 23.2206 24.0858 22.4001 24.0858H9.60005L9.41346 24.0751C8.61771 23.9827 8.00005 23.3064 8.00005 22.4858V9.68584L8.01081 9.49925C8.10324 8.70351 8.77951 8.08584 9.60005 8.08584H16L16.1866 8.07508C16.9824 7.98265 17.6 7.30638 17.6 6.48584Z" fill="#3373CC"/>
+</svg>

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

@@ -0,0 +1,7 @@
+<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.2757 14.4884V1C13.2757 0.447715 12.828 0 12.2757 0H3.09767L0 2.87641V14.4884C0 15.0407 0.447714 15.4884 0.999999 15.4884H12.2757C12.828 15.4884 13.2757 15.0407 13.2757 14.4884Z" fill="#4C97FF" fill-opacity="0.25"/>
+<path d="M2.09766 2.875H0L3.09766 0V1.875C3.09766 2.42728 2.64994 2.875 2.09766 2.875Z" fill="#4C97FF" fill-opacity="0.5"/>
+<rect x="2.2124" y="4.42188" width="8.85052" height="0.886719" rx="0.443359" fill="#3373CC"/>
+<rect x="2.2124" y="7.35156" width="7.96547" height="0.882812" rx="0.441406" fill="#3373CC"/>
+<rect x="2.2124" y="10.2773" width="8.85052" height="0.886719" rx="0.443359" fill="#3373CC"/>
+</svg>

static/images/annual-report/2020/adaptation/Computer Clubhouse Illustration.svg

@@ -0,0 +1,79 @@
+<svg width="476" height="436" viewBox="0 0 476 436" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M305.738 35.8184H353.322C362.838 35.8184 370.597 44.8386 370.597 55.9325C370.597 67.0264 362.838 76.0467 353.322 76.0467H331.288C331.288 76.0467 331.288 76.0467 331.288 76.1504C321.875 92.4283 307.806 93.6725 309.151 86.3111C310.082 81.2307 310.806 78.9498 310.082 76.1504H305.841C296.324 76.1504 288.566 67.1301 288.566 56.0362C288.463 44.8386 296.117 35.8184 305.738 35.8184Z" fill="#D9E3F2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M61.9098 266.536H28.3854C21.6805 266.536 16.2146 272.891 16.2146 280.707C16.2146 288.523 21.6805 294.878 28.3854 294.878H43.9086C43.9086 294.878 43.9086 294.878 43.9086 294.951C50.5406 306.42 60.4522 307.296 59.5048 302.11C58.8489 298.531 58.3387 296.923 58.8488 294.951H61.8369C68.5418 294.951 74.0077 288.596 74.0077 280.78C74.0806 272.891 68.6875 266.536 61.9098 266.536Z" fill="#D9E3F2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M120.262 297.076C120.825 296.176 121.722 295.537 122.756 295.298L125.039 294.771L194.218 278.795C196.37 278.298 198.517 279.64 199.012 281.793L206.853 315.903C207.348 318.056 206.004 320.205 203.852 320.702L134.672 336.678L132.389 337.205C131.356 337.444 130.459 338.083 129.896 338.983L125.651 345.769C125.089 346.669 124.192 347.309 123.158 347.547L110.797 350.402C109.763 350.641 108.678 350.459 107.779 349.897L101 345.657C100.101 345.094 99.0149 344.912 97.9812 345.151L95.6982 345.678L87.9033 347.479C85.7508 347.976 83.6047 346.633 83.1098 344.48L75.2685 310.37C74.7735 308.217 76.1172 306.069 78.2697 305.572L86.0646 303.771L88.3476 303.244C89.3813 303.006 90.467 303.187 91.366 303.75L98.1451 307.99C99.0441 308.552 100.13 308.734 101.163 308.495L113.524 305.641C114.558 305.402 115.455 304.762 116.018 303.862L120.262 297.076Z" fill="#0FBD8C"/>
+<path d="M122.756 295.298L122.98 296.273L122.756 295.298ZM120.262 297.076L121.11 297.606L121.11 297.606L120.262 297.076ZM125.039 294.771L124.815 293.796L125.039 294.771ZM129.896 338.983L130.743 339.513L129.896 338.983ZM125.651 345.769L124.804 345.239L125.651 345.769ZM107.779 349.897L107.248 350.745L107.248 350.745L107.779 349.897ZM101 345.657L101.53 344.808L101 345.657ZM78.2697 305.572L78.0457 304.597L78.2697 305.572ZM86.0646 303.771L86.2886 304.746L86.0646 303.771ZM88.3476 303.244L88.1236 302.27L88.3476 303.244ZM91.366 303.75L90.8354 304.598L90.8354 304.598L91.366 303.75ZM98.1451 307.99L97.6146 308.838L97.6146 308.838L98.1451 307.99ZM101.163 308.495L101.388 309.47L101.163 308.495ZM113.524 305.641L113.3 304.666L113.524 305.641ZM116.018 303.862L115.17 303.332L115.17 303.332L116.018 303.862ZM122.532 294.324C121.24 294.622 120.118 295.421 119.415 296.546L121.11 297.606C121.532 296.931 122.205 296.452 122.98 296.273L122.532 294.324ZM124.815 293.796L122.532 294.324L122.98 296.273L125.263 295.745L124.815 293.796ZM193.994 277.82L124.815 293.796L125.263 295.745L194.442 279.769L193.994 277.82ZM199.986 281.568C199.367 278.877 196.685 277.199 193.994 277.82L194.442 279.769C196.056 279.396 197.666 280.403 198.037 282.018L199.986 281.568ZM207.827 315.678L199.986 281.568L198.037 282.018L205.879 316.128L207.827 315.678ZM204.076 321.676C206.766 321.055 208.446 318.37 207.827 315.678L205.879 316.128C206.25 317.743 205.242 319.354 203.628 319.727L204.076 321.676ZM134.896 337.652L204.076 321.676L203.628 319.727L134.448 335.703L134.896 337.652ZM132.613 338.18L134.896 337.652L134.448 335.703L132.165 336.23L132.613 338.18ZM130.743 339.513C131.165 338.838 131.838 338.359 132.613 338.18L132.165 336.23C130.873 336.529 129.752 337.328 129.049 338.453L130.743 339.513ZM126.499 346.299L130.743 339.513L129.049 338.453L124.804 345.239L126.499 346.299ZM123.382 348.522C124.674 348.224 125.795 347.424 126.499 346.299L124.804 345.239C124.382 345.914 123.709 346.394 122.934 346.573L123.382 348.522ZM111.021 351.377L123.382 348.522L122.934 346.573L110.573 349.428L111.021 351.377ZM107.248 350.745C108.372 351.448 109.729 351.675 111.021 351.377L110.573 349.428C109.798 349.607 108.984 349.47 108.309 349.048L107.248 350.745ZM100.469 346.505L107.248 350.745L108.309 349.048L101.53 344.808L100.469 346.505ZM98.2053 346.126C98.9805 345.947 99.7948 346.083 100.469 346.505L101.53 344.808C100.406 344.105 99.0493 343.878 97.7572 344.177L98.2053 346.126ZM95.9222 346.653L98.2053 346.126L97.7572 344.177L95.4741 344.704L95.9222 346.653ZM88.1274 348.453L95.9222 346.653L95.4741 344.704L87.6793 346.504L88.1274 348.453ZM82.1354 344.705C82.7541 347.397 85.4368 349.075 88.1274 348.453L87.6793 346.504C86.0649 346.877 84.4553 345.87 84.0841 344.255L82.1354 344.705ZM74.2941 310.595L82.1354 344.705L84.0841 344.255L76.2428 310.145L74.2941 310.595ZM78.0457 304.597C75.3551 305.218 73.6754 307.904 74.2941 310.595L76.2428 310.145C75.8716 308.53 76.8794 306.919 78.4938 306.546L78.0457 304.597ZM85.8405 302.797L78.0457 304.597L78.4938 306.546L86.2886 304.746L85.8405 302.797ZM88.1236 302.27L85.8405 302.797L86.2886 304.746L88.5717 304.219L88.1236 302.27ZM91.8966 302.901C90.7728 302.198 89.4157 301.971 88.1236 302.27L88.5717 304.219C89.3469 304.04 90.1612 304.176 90.8354 304.598L91.8966 302.901ZM98.6757 307.142L91.8966 302.901L90.8354 304.598L97.6146 308.838L98.6757 307.142ZM100.939 307.521C100.164 307.7 99.3499 307.563 98.6757 307.142L97.6146 308.838C98.7383 309.541 100.095 309.768 101.388 309.47L100.939 307.521ZM113.3 304.666L100.939 307.521L101.388 309.47L113.748 306.615L113.3 304.666ZM115.17 303.332C114.748 304.007 114.076 304.487 113.3 304.666L113.748 306.615C115.041 306.317 116.162 305.517 116.865 304.392L115.17 303.332ZM119.415 296.546L115.17 303.332L116.865 304.392L121.11 297.606L119.415 296.546Z" fill="#0DA57A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M135.663 351.957C136.226 351.057 137.123 350.418 138.157 350.179L140.44 349.652L156.029 346.051C158.182 345.554 160.328 346.897 160.823 349.05L168.664 383.16C169.159 385.313 167.815 387.461 165.663 387.958L150.073 391.559L147.79 392.086C146.757 392.325 145.86 392.964 145.297 393.864L141.052 400.65C140.489 401.55 139.593 402.19 138.559 402.428L126.198 405.283C125.164 405.522 124.079 405.34 123.18 404.778L116.4 400.537C115.501 399.975 114.416 399.793 113.382 400.032L111.099 400.559L103.304 402.359C101.152 402.857 99.0056 401.514 98.5106 399.361L90.6693 365.251C90.1744 363.098 91.5181 360.95 93.6706 360.452L101.465 358.652L103.749 358.125C104.782 357.886 105.868 358.068 106.767 358.63L113.546 362.871C114.445 363.433 115.531 363.615 116.564 363.376L128.925 360.521C129.959 360.283 130.856 359.643 131.419 358.743L135.663 351.957Z" fill="#9966FF"/>
+<path d="M135.663 351.957L136.511 352.487L136.511 352.487L135.663 351.957ZM165.663 387.958L165.439 386.984L165.663 387.958ZM150.073 391.559L150.297 392.533L150.073 391.559ZM147.79 392.086L147.566 391.111L147.79 392.086ZM145.297 393.864L146.144 394.394L145.297 393.864ZM141.052 400.65L140.205 400.12L141.052 400.65ZM123.18 404.778L122.649 405.626L122.649 405.626L123.18 404.778ZM116.4 400.537L116.931 399.689L116.4 400.537ZM98.5106 399.361L97.5363 399.586L98.5106 399.361ZM90.6693 365.251L91.6437 365.026L90.6693 365.251ZM106.767 358.63L106.236 359.479L106.236 359.479L106.767 358.63ZM113.546 362.871L113.015 363.719L113.015 363.719L113.546 362.871ZM131.419 358.743L130.571 358.213L130.571 358.213L131.419 358.743ZM137.933 349.204C136.64 349.503 135.519 350.302 134.816 351.427L136.511 352.487C136.933 351.812 137.605 351.333 138.381 351.154L137.933 349.204ZM140.216 348.677L137.933 349.204L138.381 351.154L140.664 350.626L140.216 348.677ZM155.805 345.077L140.216 348.677L140.664 350.626L156.253 347.026L155.805 345.077ZM161.797 348.825C161.179 346.133 158.496 344.456 155.805 345.077L156.253 347.026C157.868 346.653 159.477 347.66 159.849 349.275L161.797 348.825ZM169.639 382.935L161.797 348.825L159.849 349.275L167.69 383.385L169.639 382.935ZM165.887 388.933C168.578 388.312 170.257 385.626 169.639 382.935L167.69 383.385C168.061 385 167.053 386.611 165.439 386.984L165.887 388.933ZM150.297 392.533L165.887 388.933L165.439 386.984L149.849 390.584L150.297 392.533ZM148.014 393.06L150.297 392.533L149.849 390.584L147.566 391.111L148.014 393.06ZM146.144 394.394C146.566 393.719 147.239 393.24 148.014 393.06L147.566 391.111C146.274 391.41 145.153 392.209 144.449 393.334L146.144 394.394ZM141.9 401.18L146.144 394.394L144.449 393.334L140.205 400.12L141.9 401.18ZM138.783 403.403C140.075 403.105 141.196 402.305 141.9 401.18L140.205 400.12C139.783 400.795 139.11 401.275 138.335 401.454L138.783 403.403ZM126.422 406.258L138.783 403.403L138.335 401.454L125.974 404.308L126.422 406.258ZM122.649 405.626C123.773 406.329 125.13 406.556 126.422 406.258L125.974 404.308C125.199 404.487 124.384 404.351 123.71 403.929L122.649 405.626ZM115.87 401.386L122.649 405.626L123.71 403.929L116.931 399.689L115.87 401.386ZM113.606 401.007C114.381 400.828 115.196 400.964 115.87 401.386L116.931 399.689C115.807 398.986 114.45 398.759 113.158 399.057L113.606 401.007ZM111.323 401.534L113.606 401.007L113.158 399.057L110.875 399.585L111.323 401.534ZM103.528 403.334L111.323 401.534L110.875 399.585L103.08 401.385L103.528 403.334ZM97.5363 399.586C98.1549 402.277 100.838 403.955 103.528 403.334L103.08 401.385C101.466 401.758 99.8562 400.751 99.485 399.136L97.5363 399.586ZM89.695 365.476L97.5363 399.586L99.485 399.136L91.6437 365.026L89.695 365.476ZM93.4466 359.478C90.756 360.099 89.0763 362.785 89.695 365.476L91.6437 365.026C91.2725 363.411 92.2803 361.8 93.8947 361.427L93.4466 359.478ZM101.241 357.678L93.4466 359.478L93.8947 361.427L101.689 359.627L101.241 357.678ZM103.524 357.151L101.241 357.678L101.689 359.627L103.973 359.1L103.524 357.151ZM107.297 357.782C106.174 357.079 104.817 356.852 103.524 357.151L103.973 359.1C104.748 358.921 105.562 359.057 106.236 359.479L107.297 357.782ZM114.077 362.022L107.297 357.782L106.236 359.479L113.015 363.719L114.077 362.022ZM116.34 362.401C115.565 362.58 114.751 362.444 114.077 362.022L113.015 363.719C114.139 364.422 115.496 364.649 116.788 364.351L116.34 362.401ZM128.701 359.547L116.34 362.401L116.788 364.351L129.149 361.496L128.701 359.547ZM130.571 358.213C130.149 358.888 129.477 359.368 128.701 359.547L129.149 361.496C130.441 361.198 131.563 360.398 132.266 359.273L130.571 358.213ZM134.816 351.427L130.571 358.213L132.266 359.273L136.511 352.487L134.816 351.427Z" fill="#855CD6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M430.139 94.4863C431.082 94.0002 432.178 93.9088 433.189 94.2322L435.42 94.9465L464.945 104.397C467.049 105.07 468.211 107.322 467.54 109.427L461.469 128.483C460.798 130.588 458.549 131.749 456.445 131.075L426.92 121.625L424.689 120.911C423.678 120.587 422.581 120.679 421.639 121.165L414.534 124.83C413.592 125.316 412.495 125.408 411.485 125.084L399.403 121.217C398.392 120.894 397.551 120.182 397.064 119.239L393.394 112.124C392.907 111.181 392.066 110.469 391.056 110.146L388.824 109.431L381.205 106.993C379.101 106.319 377.939 104.067 378.61 101.962L384.681 82.906C385.352 80.8011 387.601 79.6407 389.705 80.3141L397.324 82.7528L399.556 83.4671C400.566 83.7905 401.407 84.5022 401.894 85.4456L405.564 92.56C406.051 93.5034 406.892 94.2151 407.903 94.5385L419.985 98.4058C420.995 98.7292 422.092 98.6378 423.035 98.1517L430.139 94.4863Z" fill="#FF6680"/>
+<path d="M430.139 94.4863L430.598 95.3756L430.598 95.3756L430.139 94.4863ZM421.639 121.165L422.098 122.054L422.098 122.054L421.639 121.165ZM411.485 125.084L411.181 126.037L411.485 125.084ZM399.403 121.217L399.706 120.264L399.403 121.217ZM397.064 119.239L396.176 119.697L396.176 119.697L397.064 119.239ZM393.394 112.124L392.506 112.582L393.394 112.124ZM401.894 85.4456L401.006 85.9038L401.006 85.9038L401.894 85.4456ZM405.564 92.56L404.676 93.0181L404.676 93.0181L405.564 92.56ZM407.903 94.5385L408.206 93.5857L407.903 94.5385ZM419.985 98.4058L419.681 99.3586L419.985 98.4058ZM423.035 98.1517L422.576 97.2624L422.576 97.2624L423.035 98.1517ZM433.492 93.2794C432.229 92.8751 430.858 92.9894 429.681 93.597L430.598 95.3756C431.305 95.011 432.127 94.9425 432.885 95.185L433.492 93.2794ZM435.724 93.9937L433.492 93.2794L432.885 95.185L435.117 95.8993L435.724 93.9937ZM465.249 103.444L435.724 93.9937L435.117 95.8993L464.641 105.349L465.249 103.444ZM468.493 109.732C469.331 107.101 467.879 104.286 465.249 103.444L464.641 105.349C466.219 105.854 467.091 107.544 466.588 109.122L468.493 109.732ZM462.421 128.788L468.493 109.732L466.588 109.122L460.516 128.178L462.421 128.788ZM456.141 132.028C458.771 132.87 461.583 131.419 462.421 128.788L460.516 128.178C460.013 129.757 458.326 130.627 456.748 130.122L456.141 132.028ZM426.617 122.578L456.141 132.028L456.748 130.122L427.224 120.672L426.617 122.578ZM424.385 121.864L426.617 122.578L427.224 120.672L424.992 119.958L424.385 121.864ZM422.098 122.054C422.805 121.69 423.627 121.621 424.385 121.864L424.992 119.958C423.729 119.554 422.358 119.668 421.181 120.276L422.098 122.054ZM414.993 125.72L422.098 122.054L421.181 120.276L414.076 123.941L414.993 125.72ZM411.181 126.037C412.444 126.441 413.816 126.327 414.993 125.72L414.076 123.941C413.369 124.306 412.546 124.374 411.789 124.132L411.181 126.037ZM399.099 122.17L411.181 126.037L411.789 124.132L399.706 120.264L399.099 122.17ZM396.176 119.697C396.785 120.876 397.836 121.766 399.099 122.17L399.706 120.264C398.948 120.022 398.318 119.488 397.952 118.78L396.176 119.697ZM392.506 112.582L396.176 119.697L397.952 118.78L394.282 111.666L392.506 112.582ZM390.752 111.099C391.51 111.341 392.141 111.875 392.506 112.582L394.282 111.666C393.674 110.487 392.622 109.597 391.359 109.193L390.752 111.099ZM388.521 110.384L390.752 111.099L391.359 109.193L389.128 108.479L388.521 110.384ZM380.901 107.946L388.521 110.384L389.128 108.479L381.509 106.04L380.901 107.946ZM377.657 101.657C376.819 104.288 378.271 107.104 380.901 107.946L381.509 106.04C379.931 105.535 379.059 103.846 379.562 102.267L377.657 101.657ZM383.729 82.6011L377.657 101.657L379.562 102.267L385.634 83.2108L383.729 82.6011ZM390.009 79.3613C387.379 78.5195 384.567 79.97 383.729 82.6011L385.634 83.2108C386.137 81.6321 387.824 80.7618 389.402 81.2669L390.009 79.3613ZM397.628 81.8L390.009 79.3613L389.402 81.2669L397.021 83.7056L397.628 81.8ZM399.86 82.5143L397.628 81.8L397.021 83.7056L399.252 84.4199L399.86 82.5143ZM402.782 84.9874C402.174 83.8082 401.123 82.9186 399.86 82.5143L399.252 84.4199C400.01 84.6625 400.641 85.1962 401.006 85.9038L402.782 84.9874ZM406.453 92.1018L402.782 84.9874L401.006 85.9038L404.676 93.0181L406.453 92.1018ZM408.206 93.5857C407.448 93.3431 406.818 92.8093 406.453 92.1018L404.676 93.0181C405.285 94.1974 406.336 95.087 407.599 95.4913L408.206 93.5857ZM420.289 97.453L408.206 93.5857L407.599 95.4913L419.681 99.3586L420.289 97.453ZM422.576 97.2624C421.869 97.627 421.046 97.6955 420.289 97.453L419.681 99.3586C420.944 99.7628 422.316 99.6486 423.493 99.041L422.576 97.2624ZM429.681 93.597L422.576 97.2624L423.493 99.041L430.598 95.3756L429.681 93.597Z" fill="#FF4D6A"/>
+<path d="M204.4 62.957H36.8521C30.6734 62.957 25.6646 67.9757 25.6646 74.1666V220.994C25.6646 227.185 30.6734 232.204 36.8521 232.204H204.4C210.578 232.204 215.587 227.185 215.587 220.994V74.1666C215.587 67.9757 210.578 62.957 204.4 62.957Z" fill="#47A8D1"/>
+<path d="M204.411 64.6284C206.936 64.6284 209.357 65.6333 211.143 67.4221C212.928 69.211 213.931 71.6372 213.931 74.167V221.006C213.931 223.536 212.928 225.962 211.143 227.751C209.357 229.54 206.936 230.545 204.411 230.545H36.8523C34.3264 230.545 31.9038 229.54 30.1166 227.751C28.3294 225.963 27.3239 223.537 27.3208 221.006V74.1786C27.3239 71.6477 28.3294 69.2216 30.1166 67.433C31.9038 65.6445 34.3264 64.64 36.8523 64.64H204.411V64.6284ZM204.411 61.3096H36.8523C33.4468 61.3126 30.1818 62.6695 27.7738 65.0822C25.3658 67.4949 24.0116 70.7664 24.0085 74.1786V221.006C24.0116 224.418 25.3658 227.69 27.7738 230.102C30.1818 232.515 33.4468 233.872 36.8523 233.875H204.411C207.816 233.869 211.079 232.511 213.486 230.099C215.894 227.687 217.249 224.417 217.255 221.006V74.1786C217.252 70.7664 215.898 67.4949 213.49 65.0822C211.082 62.6695 207.817 61.3126 204.411 61.3096Z" fill="#D9E3F2"/>
+<path d="M220.393 64.6166C231.312 64.6166 240.163 55.7481 240.163 44.8083C240.163 33.8685 231.312 25 220.393 25C209.475 25 200.624 33.8685 200.624 44.8083C200.624 55.7481 209.475 64.6166 220.393 64.6166Z" fill="black"/>
+<path d="M233.909 105.44C233.909 105.44 247.98 99.7308 242.78 118.39C237.58 137.05 228.5 127.674 228.5 127.674C228.5 127.674 227.609 119.365 228.373 116.371C229.045 113.737 233.909 105.44 233.909 105.44Z" fill="#A8794C"/>
+<path d="M161.699 149.454C161.699 149.454 141.849 135.842 111.575 142.341C78.4175 149.454 65.7012 159.944 65.7012 159.944L83.1311 200.768L91.238 202.578C91.703 202.683 92.1424 202.88 92.5304 203.157C92.9184 203.434 93.2473 203.787 93.4975 204.193C93.7478 204.6 93.9145 205.052 93.9879 205.524C94.0613 205.996 94.0399 206.478 93.9249 206.941L87.9605 230.544H193.965C193.965 230.544 212.228 233.364 213.896 223.024V162.683C213.896 162.683 212.831 158.552 200.114 159.062C187.398 159.573 161.699 149.454 161.699 149.454Z" fill="#FF4D6A"/>
+<path d="M171.601 133.719C171.601 133.719 170.918 141.447 161.699 149.454C161.699 149.454 168.335 165.503 177.82 169.309C187.306 173.115 195.482 166.118 195.482 166.118C201.134 160.687 204.666 151.45 204.666 151.45L171.601 133.719Z" fill="#A8794C"/>
+<path d="M243.255 96.8755C243.255 68.1204 222.003 44.8076 195.772 44.8076C169.54 44.8076 155.967 68.1204 155.967 96.8755C155.967 115.941 167.374 131.502 179.129 140.553C181.77 142.584 184.769 145.392 187.236 147.145C192.297 150.719 199.13 155.987 209.994 157.113C225.883 158.749 238.067 136.225 238.345 125.781C238.515 122.755 238.973 119.751 239.711 116.811C242.001 110.413 243.2 103.673 243.255 96.8755Z" fill="#B68554"/>
+<path d="M198.493 113.47C198.556 111.651 197.406 110.134 195.923 110.082C194.44 110.03 193.186 111.463 193.123 113.282C193.059 115.101 194.21 116.617 195.693 116.669C197.176 116.721 198.43 115.289 198.493 113.47Z" fill="black"/>
+<path d="M229.765 114.559C229.828 112.74 228.677 111.224 227.194 111.172C225.711 111.12 224.458 112.552 224.394 114.371C224.331 116.19 225.482 117.707 226.965 117.759C228.448 117.811 229.701 116.378 229.765 114.559Z" fill="black"/>
+<path d="M215.251 112.739C215.251 112.739 214.093 116 215.448 118.367C216.803 120.735 227.087 136.052 211.047 130.714" stroke="#603813" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M198.69 136.84C202.165 139.671 213.086 147.133 221.482 138C221.542 137.939 221.581 137.861 221.595 137.777C221.609 137.693 221.597 137.606 221.56 137.529C221.524 137.452 221.465 137.388 221.39 137.346C221.316 137.303 221.231 137.285 221.146 137.292L215.448 137.757C212.526 137.987 209.586 137.862 206.693 137.385L199.014 136.109C198.926 136.098 198.835 136.115 198.757 136.159C198.679 136.203 198.617 136.272 198.581 136.354C198.545 136.436 198.536 136.527 198.555 136.615C198.575 136.702 198.622 136.781 198.69 136.84Z" fill="white"/>
+<path d="M162.822 69.5609C173.741 69.5609 182.592 60.6924 182.592 49.7526C182.592 38.8128 173.741 29.9443 162.822 29.9443C151.904 29.9443 143.053 38.8128 143.053 49.7526C143.053 60.6924 151.904 69.5609 162.822 69.5609Z" fill="black"/>
+<path d="M160.634 70.245C156.964 80.6306 155.389 91.6433 156.001 102.644C156.001 102.644 160.634 100.16 164.745 106.984C164.745 106.984 179.72 72.9371 204.666 71.9972C204.666 71.9972 204.828 50.5179 190.769 45.1104C183.899 45.8198 177.421 48.6594 172.238 53.2333C167.147 57.9611 163.181 63.7749 160.634 70.245Z" fill="black"/>
+<path d="M207.723 71.6136C207.723 71.6136 240.151 71.7064 243.209 94.8219C243.209 94.8219 243.209 62.7132 215.193 49.3684C215.193 49.3684 206.716 43.6824 192.031 45.0053L189.714 45.2489L207.723 71.6136Z" fill="black"/>
+<path d="M167.872 100.949C167.872 100.949 169.296 112.553 169.192 118.355C169.192 118.355 166.621 109.002 164.745 106.972L165.44 101.495L167.872 100.949Z" fill="black"/>
+<path d="M207.168 101.75C207.527 102.041 207.168 102.586 206.704 102.528C202.952 102.157 192.807 101.368 185.731 103.41C180.588 104.86 198.563 94.7996 207.168 101.75Z" fill="black"/>
+<path d="M217.382 102.563C217.303 102.625 217.247 102.712 217.223 102.81C217.199 102.908 217.209 103.011 217.25 103.103C217.291 103.195 217.362 103.271 217.451 103.318C217.54 103.365 217.642 103.381 217.741 103.363C221.1 103.178 230.18 102.934 236.364 105.29C240.846 106.995 225.524 96.0759 217.382 102.563Z" fill="black"/>
+<path d="M162.452 103.467C162.452 103.467 148.381 97.7695 153.592 116.417C158.804 135.065 167.872 125.701 167.872 125.701C167.872 125.701 168.752 117.392 167.988 114.398C167.293 111.764 162.452 103.467 162.452 103.467Z" fill="#A8794C"/>
+<path d="M165.255 129.564C166.598 129.564 167.687 128.473 167.687 127.127C167.687 125.781 166.598 124.69 165.255 124.69C163.911 124.69 162.823 125.781 162.823 127.127C162.823 128.473 163.911 129.564 165.255 129.564Z" fill="#FFBF00"/>
+<path d="M65.7014 159.945C65.7014 159.945 9.04542 178.906 7.47036 195.036C5.8953 211.166 4.32025 221.296 73.3914 230.545L114.714 224.592C114.714 224.592 63.5241 203.937 54.8033 199.655L81.1509 196.173L65.7014 159.945Z" fill="#B68554"/>
+<path opacity="0.1" d="M54.8149 199.654C47.6805 195.035 39.4813 192.33 31.0037 191.798" stroke="black" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M122.566 222.816C131.541 221.481 153.187 220.437 158.85 221.423C164.514 222.41 170.767 243.727 170.86 246.337C170.86 247.997 167.004 247.834 165.73 245.177C164.456 242.52 156.962 229.593 155.121 229.163C153.28 228.734 147.466 230.579 147.466 230.579H73.4031C73.4031 230.579 113.776 224.139 122.566 222.816Z" fill="#B68554"/>
+<path d="M156.939 238.075C155.492 238.737 153.106 236.776 152.55 235.546L147.767 225.102C147.64 224.768 147.581 224.412 147.593 224.054C147.606 223.697 147.69 223.346 147.84 223.022C147.99 222.697 148.203 222.406 148.467 222.166C148.731 221.925 149.04 221.74 149.377 221.621C149.993 221.273 150.721 221.185 151.403 221.374C152.084 221.563 152.663 222.015 153.013 222.63L157.796 233.074C158.364 234.316 158.398 237.402 156.939 238.075Z" fill="#B68554"/>
+<path d="M144.234 244.469C142.59 244.979 140.181 242.751 139.683 241.127L135.05 226.192C134.933 225.801 134.894 225.391 134.935 224.985C134.976 224.579 135.097 224.185 135.291 223.826C135.485 223.467 135.748 223.15 136.064 222.893C136.38 222.636 136.744 222.444 137.135 222.328C137.917 222.08 138.765 222.151 139.494 222.528C140.223 222.904 140.774 223.554 141.026 224.336L145.659 239.282C146.157 240.895 145.891 243.958 144.234 244.469Z" fill="#B68554"/>
+<path d="M150.245 238.564C148.797 239.226 146.377 237.183 145.798 235.918L140.876 225.15C140.631 224.478 140.658 223.737 140.953 223.086C141.247 222.435 141.785 221.926 142.451 221.668C143.899 220.995 147.558 221.39 148.137 222.655L151.079 233.505C151.635 234.77 151.704 237.903 150.245 238.564Z" fill="#B68554"/>
+<path d="M156.615 249.529C155.028 249.657 153.465 247.208 153.36 245.967L152.48 235.384C152.516 234.697 152.819 234.052 153.323 233.586C153.827 233.12 154.493 232.87 155.179 232.889C155.85 232.757 156.547 232.893 157.12 233.268C157.693 233.643 158.098 234.227 158.248 234.896L159.128 245.479C159.186 246.721 158.213 249.401 156.615 249.529Z" fill="#B68554"/>
+<path d="M149.585 247.231C147.987 247.37 146.458 245.27 146.365 244.191L145.613 235.07C145.52 234.002 146.771 233.016 148.323 232.888C149.921 232.749 151.287 233.515 151.368 234.583L152.133 243.715C152.237 244.759 151.172 247.08 149.585 247.231Z" fill="#B68554"/>
+<path d="M431.325 163.113H263.777C257.598 163.113 252.59 168.132 252.59 174.323V321.15C252.59 327.341 257.598 332.36 263.777 332.36H431.325C437.503 332.36 442.512 327.341 442.512 321.15V174.323C442.512 168.132 437.503 163.113 431.325 163.113Z" fill="#CF63CF"/>
+<path d="M431.348 164.773C433.873 164.773 436.294 165.778 438.079 167.567C439.865 169.355 440.868 171.782 440.868 174.311V321.15C440.869 322.404 440.624 323.646 440.146 324.804C439.669 325.963 438.968 327.016 438.083 327.903C437.199 328.79 436.149 329.493 434.993 329.973C433.838 330.453 432.599 330.701 431.348 330.701H263.766C262.514 330.701 261.276 330.453 260.12 329.973C258.964 329.493 257.914 328.79 257.03 327.903C256.146 327.016 255.445 325.963 254.967 324.804C254.489 323.646 254.244 322.404 254.246 321.15V174.311C254.246 171.782 255.249 169.355 257.034 167.567C258.819 165.778 261.241 164.773 263.766 164.773H431.348ZM431.348 161.442H263.766C260.361 161.449 257.098 162.806 254.69 165.218C252.283 167.63 250.928 170.9 250.922 174.311V321.15C250.925 324.562 252.279 327.834 254.687 330.247C257.095 332.659 260.36 334.016 263.766 334.019H431.348C434.753 334.016 438.018 332.659 440.426 330.247C442.834 327.834 444.188 324.562 444.191 321.15V174.311C444.185 170.9 442.83 167.63 440.423 165.218C438.016 162.806 434.752 161.449 431.348 161.442Z" fill="#D9E3F2"/>
+<path d="M368.727 184.302C360.62 211.908 333.52 236.126 308.863 229.384C284.207 222.642 270.367 194.688 277.93 166.931C285.492 139.173 311.006 124.935 336.242 128.881C365.82 133.511 375.19 162.37 368.727 184.302Z" fill="#E4B681"/>
+<path d="M280.975 159.434C280.975 159.434 278.659 168.276 267.078 170.017C255.497 171.757 268.028 179.857 268.028 179.857C268.028 179.857 264.368 181.632 264.125 184.243C263.881 186.854 269.522 188.525 269.985 188.653C273.795 189.709 277.964 188.804 272.301 193.515C269.348 195.952 269.799 194.49 266.661 195.836C261.391 198.075 265.26 201.058 265.26 201.058C265.26 201.058 264.657 212.871 267.483 216.642C270.309 220.413 316.067 230.834 316.067 230.834L280.975 159.434Z" fill="#E4B681"/>
+<path d="M284.891 167.79C285.727 166.175 285.562 164.427 284.523 163.887C283.484 163.347 281.964 164.219 281.128 165.835C280.291 167.451 280.456 169.198 281.495 169.738C282.534 170.278 284.054 169.406 284.891 167.79Z" fill="black"/>
+<path d="M239.005 285.815L208.743 306.761C208.743 306.761 166.98 280.93 147.234 271.136C127.488 261.342 127.546 278.481 138.826 288.948C150.106 299.415 199.049 335.771 209.692 338.045C227.713 341.863 267.599 324.387 267.599 324.387L239.005 285.815Z" fill="#E4B681"/>
+<path d="M136.718 286.767L117.702 284.214C114.937 284.214 112.286 283.113 110.331 281.155C108.377 279.196 107.279 276.54 107.279 273.77C107.279 271 108.377 268.344 110.331 266.385C112.286 264.426 114.937 263.326 117.702 263.326H131.391C134.155 263.326 136.807 264.426 138.761 266.385C140.716 268.344 141.814 271 141.814 273.77C141.884 279.572 142.497 286.767 136.718 286.767Z" fill="#E4B681"/>
+<path d="M139.278 267.109C139.278 267.109 132.572 257.582 127.986 253.567C123.4 249.552 121.593 245.803 117.482 245.513C113.37 245.223 115.374 251.664 119.416 256.305L123.11 267.109H139.278Z" fill="#E4B681"/>
+<path d="M118.651 264.939L105.31 257.976C105.31 257.976 105.147 247.985 101.835 245.073C98.5229 242.16 97.8049 254.182 99.8085 260.344C101.812 266.505 116.937 271.809 116.937 271.809L118.651 264.939Z" fill="#E4B681"/>
+<path d="M116.196 275.835C116.196 275.835 98.9977 279.955 91.632 253.95C91.632 253.95 87.6943 240.605 94.8516 245.827C98.6271 248.589 103.352 261.446 103.352 261.446L118.408 272.319L116.196 275.835Z" fill="#E4B681"/>
+<path d="M115.767 274.71C115.767 274.71 95.4883 262.363 90.6242 248.902C90.6242 248.902 87.7984 243.634 86.5591 249.598C85.3199 255.563 93.1721 269.72 93.1721 269.72L107.278 277.425L115.767 274.71Z" fill="#E4B681"/>
+<path d="M117.702 284.213C117.702 284.213 98.4883 282.739 93.821 277.749C89.1537 272.76 85.3203 260.343 85.3203 260.343C85.3203 260.343 89.4433 255.226 94.099 265.623C99.5885 277.912 115.768 274.64 115.768 274.64L117.702 284.213Z" fill="#E4B681"/>
+<path opacity="0.1" d="M106.051 274.641C103.827 272.819 97.0983 272.32 97.0983 272.32C94.6315 266.042 88.9219 259.323 88.9219 259.323C88.9219 259.323 95.9865 263.965 97.6542 270.672L106.051 274.641Z" fill="#231F20"/>
+<path opacity="0.1" d="M90.6243 248.902C90.6243 248.902 96.1949 257.397 97.492 264.301C100.513 266.235 103.375 268.408 106.051 270.799C106.051 270.799 103.642 264.696 98.627 263.28C98.627 263.326 94.1218 250.028 90.6243 248.902Z" fill="#231F20"/>
+<path opacity="0.1" d="M98.6504 250.968C98.6504 250.968 102.461 256.712 103.352 261.411C103.352 261.411 104.754 261.551 108.286 264.974C108.286 264.974 106.132 261.272 104.464 260.332C104.464 260.344 101.777 251.722 98.6504 250.968Z" fill="#231F20"/>
+<path opacity="0.1" d="M115.767 263.466C115.767 263.466 110.753 265.45 107.66 275.07C107.649 275.024 107.139 264.278 115.767 263.466Z" fill="#231F20"/>
+<path d="M345.136 239.562L370.673 254.438L345.136 256.376V239.562Z" fill="#EC9C13"/>
+<path d="M236.075 339.171L231.095 335.353C223.771 329.75 217.998 322.364 214.325 313.897L208.986 301.619C208.598 300.719 208.525 299.714 208.777 298.767C209.029 297.82 209.592 296.985 210.376 296.398C210.376 296.398 243.961 276.984 254.257 269.139C260.499 264.11 266.453 258.732 272.093 253.033C282.516 245.235 308.69 236.381 316.472 246.871L320.757 252.673C328.54 263.117 329.177 296.897 318.707 304.695L244.124 339.229C242.957 340.095 241.541 340.558 240.089 340.547C238.638 340.537 237.228 340.054 236.075 339.171Z" fill="#EC9C13"/>
+<path d="M286.268 223.396C286.268 223.396 298.764 236.241 299.529 251.245C300.119 262.745 308.249 265.298 320.908 263.035C329.988 261.399 338.396 256.351 343.109 253.485C347.823 250.619 349.085 245.362 345.993 240.86L335.744 225.774L286.268 223.396Z" fill="#E4B681"/>
+<path d="M283.732 160.896C285.272 161.476 288.283 160.095 289.14 164.667C289.997 169.239 292.082 160.814 289.14 158.61C284.925 155.407 280.999 159.863 283.732 160.896Z" fill="#3C2415"/>
+<path d="M276.285 170.668C276.522 170.668 276.714 170.476 276.714 170.238C276.714 170.001 276.522 169.809 276.285 169.809C276.048 169.809 275.856 170.001 275.856 170.238C275.856 170.476 276.048 170.668 276.285 170.668Z" fill="#B68554"/>
+<path d="M275.348 176.018C275.636 176.018 275.869 175.784 275.869 175.495C275.869 175.207 275.636 174.973 275.348 174.973C275.059 174.973 274.826 175.207 274.826 175.495C274.826 175.784 275.059 176.018 275.348 176.018Z" fill="#B68554"/>
+<path d="M272.614 170.761C272.902 170.761 273.136 170.527 273.136 170.238C273.136 169.95 272.902 169.716 272.614 169.716C272.326 169.716 272.093 169.95 272.093 170.238C272.093 170.527 272.326 170.761 272.614 170.761Z" fill="#B68554"/>
+<path d="M280.883 173.906C281.171 173.906 281.405 173.672 281.405 173.383C281.405 173.094 281.171 172.86 280.883 172.86C280.595 172.86 280.362 173.094 280.362 173.383C280.362 173.672 280.595 173.906 280.883 173.906Z" fill="#B68554"/>
+<path d="M287.299 178.523C287.804 178.523 288.214 178.112 288.214 177.606C288.214 177.1 287.804 176.689 287.299 176.689C286.794 176.689 286.384 177.1 286.384 177.606C286.384 178.112 286.794 178.523 287.299 178.523Z" fill="#B68554"/>
+<path d="M280.455 177.537C280.691 177.537 280.883 177.345 280.883 177.107C280.883 176.87 280.691 176.678 280.455 176.678C280.218 176.678 280.026 176.87 280.026 177.107C280.026 177.345 280.218 177.537 280.455 177.537Z" fill="#B68554"/>
+<path d="M277.501 173.277C277.616 173.277 277.71 173.184 277.71 173.069C277.71 172.954 277.616 172.86 277.501 172.86C277.386 172.86 277.293 172.954 277.293 173.069C277.293 173.184 277.386 173.277 277.501 173.277Z" fill="#B68554"/>
+<path d="M279.517 182.19C279.805 182.19 280.038 181.956 280.038 181.667C280.038 181.379 279.805 181.145 279.517 181.145C279.229 181.145 278.995 181.379 278.995 181.667C278.995 181.956 279.229 182.19 279.517 182.19Z" fill="#B68554"/>
+<path d="M285.932 182.606C286.047 182.606 286.141 182.513 286.141 182.398C286.141 182.283 286.047 182.189 285.932 182.189C285.817 182.189 285.724 182.283 285.724 182.398C285.724 182.513 285.817 182.606 285.932 182.606Z" fill="#B68554"/>
+<path d="M282.281 168.435C284.609 162.403 285.219 157.019 283.644 156.409C282.069 155.799 278.905 160.194 276.578 166.225C274.25 172.256 273.64 177.64 275.215 178.25C276.79 178.861 279.954 174.466 282.281 168.435Z" stroke="#754C29" stroke-width="1.61" stroke-miterlimit="10"/>
+<path opacity="0.3" d="M281.418 168.416C283.746 162.385 284.356 157.001 282.781 156.391C281.206 155.78 278.042 160.175 275.715 166.206C273.387 172.238 272.777 177.622 274.352 178.232C275.927 178.842 279.091 174.447 281.418 168.416Z" fill="#E9F1FC"/>
+<path d="M284.241 163.786L307.867 174.973" stroke="#754C29" stroke-width="2.2" stroke-miterlimit="10"/>
+<path d="M323.27 125.329C323.27 125.329 311.816 113.725 306.014 120.49C300.212 127.255 284.01 149.651 302.852 168.636C311.237 177.107 302.991 178.488 302.32 189.999C301.648 201.51 313.264 172.163 320.248 179.381C323.595 182.863 323.838 189.256 321.012 192.622C317.955 196.289 311.678 196.892 312.43 200.478C313.125 203.773 317.283 212.349 322.726 217.652C326.47 221.217 330.899 223.981 335.744 225.775C335.744 225.775 357.667 219.16 361.883 209.134C366.098 199.108 364.326 198.354 365.994 205.421C368.183 214.623 387.176 177.838 376.105 155.465C365.033 133.092 347.614 119.84 323.27 125.329Z" fill="#3C2415"/>
+<path d="M431.348 330.699H358.953L346.537 289.597C342.947 275.394 347.568 252.905 353.127 244.179L372.561 251.42C396.523 261.585 400.842 274.048 403.124 276.821L431.348 330.699Z" fill="#EC9C13"/>
+<path d="M299.5 255.028C299.5 255.028 306.962 282.894 349.5 245.506C349.5 245.506 365.837 251.382 387 263.297C408.163 275.211 375.173 330.699 375.173 330.699H278.5L274.5 293.616L299.5 255.028Z" fill="#EC9C13"/>
+<path d="M299.32 249.238C299.32 249.238 299.529 257.245 305.655 258.29C311.782 259.334 301.382 247.974 301.382 247.974L299.32 249.238Z" fill="#E4B681"/>
+<path d="M366.979 330.699L363.284 317.064L362.96 330.734L366.979 330.699Z" fill="#CF8B17"/>
+<path d="M347.684 243.007C347.684 243.007 348.715 245.745 344.024 250.631C339.334 255.516 350.174 244.829 350.174 244.829L347.684 243.007Z" fill="#EC9C13"/>
+<path d="M299.32 249.239C299.32 249.239 300.062 265.693 316.936 263.558C331.227 261.748 347.522 247.138 347.58 244.992C347.649 242.589 345.368 239.979 345.368 239.979C345.368 239.979 350.313 244.725 347.105 248.357C343.897 251.989 325.957 269.383 314.052 267.492C312.066 267.288 310.094 266.97 308.145 266.54C301.278 264.486 300.189 259.427 299.32 249.239Z" fill="#CF8B17"/>
+<path d="M277.86 322.728C277.86 322.728 276.366 306.389 276.702 299.519C277.038 292.65 270.703 319.339 271.572 326.534L278.057 323.54L277.86 322.728Z" fill="#CF8B17"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M137.097 226.941C138.013 226.407 139.104 226.259 140.129 226.53L142.395 227.128L149.163 228.915C151.299 229.479 152.575 231.668 152.014 233.805L147.438 251.214C146.877 253.35 144.69 254.625 142.554 254.061L135.786 252.274L133.521 251.676C132.495 251.405 131.404 251.553 130.488 252.087L123.581 256.114C122.665 256.648 121.574 256.796 120.548 256.525L108.282 253.287C107.257 253.016 106.38 252.348 105.845 251.431L101.814 244.516C101.279 243.599 100.403 242.932 99.3769 242.661L97.1114 242.063L89.3765 240.021C87.2405 239.457 85.9642 237.267 86.5258 235.131L91.1012 217.722C91.6627 215.586 93.8494 214.311 95.9854 214.875L103.72 216.917L105.986 217.515C107.012 217.786 107.888 218.453 108.423 219.37L112.454 226.285C112.989 227.202 113.865 227.87 114.891 228.141L127.157 231.379C128.183 231.65 129.274 231.502 130.19 230.968L137.097 226.941Z" fill="#FFBF00"/>
+<path d="M140.129 226.53L140.384 225.563L140.129 226.53ZM137.097 226.941L137.601 227.806L137.601 227.806L137.097 226.941ZM142.395 227.128L142.141 228.095L142.395 227.128ZM130.488 252.087L130.992 252.952L130.992 252.952L130.488 252.087ZM120.548 256.525L120.802 255.558L120.548 256.525ZM108.282 253.287L108.028 254.254L108.282 253.287ZM105.845 251.431L104.982 251.935L104.982 251.935L105.845 251.431ZM95.9854 214.875L95.7312 215.842L95.9854 214.875ZM103.72 216.917L103.975 215.95L103.72 216.917ZM108.423 219.37L107.559 219.874L107.559 219.874L108.423 219.37ZM112.454 226.285L111.591 226.789L111.591 226.789L112.454 226.285ZM130.19 230.968L129.686 230.104L129.686 230.104L130.19 230.968ZM140.384 225.563C139.102 225.224 137.738 225.409 136.593 226.077L137.601 227.806C138.288 227.405 139.106 227.294 139.875 227.497L140.384 225.563ZM142.649 226.161L140.384 225.563L139.875 227.497L142.141 228.095L142.649 226.161ZM149.417 227.948L142.649 226.161L142.141 228.095L148.909 229.882L149.417 227.948ZM152.981 234.06C153.683 231.39 152.087 228.653 149.417 227.948L148.909 229.882C150.511 230.305 151.468 231.947 151.047 233.55L152.981 234.06ZM148.405 251.469L152.981 234.06L151.047 233.55L146.471 250.958L148.405 251.469ZM142.3 255.028C144.97 255.733 147.703 254.14 148.405 251.469L146.471 250.958C146.05 252.561 144.41 253.517 142.808 253.094L142.3 255.028ZM135.532 253.241L142.3 255.028L142.808 253.094L136.04 251.307L135.532 253.241ZM133.266 252.643L135.532 253.241L136.04 251.307L133.775 250.709L133.266 252.643ZM130.992 252.952C131.679 252.551 132.497 252.44 133.266 252.643L133.775 250.709C132.493 250.37 131.129 250.555 129.984 251.223L130.992 252.952ZM124.085 256.978L130.992 252.952L129.984 251.223L123.077 255.25L124.085 256.978ZM120.294 257.492C121.576 257.831 122.94 257.646 124.085 256.978L123.077 255.25C122.39 255.65 121.572 255.761 120.802 255.558L120.294 257.492ZM108.028 254.254L120.294 257.492L120.802 255.558L108.536 252.319L108.028 254.254ZM104.982 251.935C105.65 253.081 106.746 253.915 108.028 254.254L108.536 252.319C107.767 252.116 107.11 251.616 106.709 250.928L104.982 251.935ZM100.95 245.02L104.982 251.935L106.709 250.928L102.677 244.013L100.95 245.02ZM99.1227 243.628C99.892 243.831 100.549 244.332 100.95 245.02L102.677 244.013C102.009 242.867 100.913 242.032 99.6311 241.694L99.1227 243.628ZM96.8572 243.03L99.1227 243.628L99.6311 241.694L97.3656 241.096L96.8572 243.03ZM89.1223 240.988L96.8572 243.03L97.3656 241.096L89.6306 239.054L89.1223 240.988ZM85.5589 234.876C84.857 237.546 86.4523 240.283 89.1223 240.988L89.6306 239.054C88.0287 238.631 87.0715 236.989 87.4926 235.386L85.5589 234.876ZM90.1343 217.467L85.5589 234.876L87.4926 235.386L92.068 217.977L90.1343 217.467ZM96.2396 213.907C93.5696 213.203 90.8362 214.796 90.1343 217.467L92.068 217.977C92.4892 216.375 94.1292 215.419 95.7312 215.842L96.2396 213.907ZM103.975 215.95L96.2396 213.907L95.7312 215.842L103.466 217.884L103.975 215.95ZM106.24 216.548L103.975 215.95L103.466 217.884L105.732 218.482L106.24 216.548ZM109.286 218.867C108.618 217.721 107.522 216.886 106.24 216.548L105.732 218.482C106.501 218.685 107.158 219.186 107.559 219.874L109.286 218.867ZM113.318 225.782L109.286 218.867L107.559 219.874L111.591 226.789L113.318 225.782ZM115.145 227.173C114.376 226.97 113.719 226.47 113.318 225.782L111.591 226.789C112.259 227.935 113.355 228.769 114.637 229.108L115.145 227.173ZM127.411 230.412L115.145 227.173L114.637 229.108L126.903 232.346L127.411 230.412ZM129.686 230.104C128.999 230.504 128.181 230.615 127.411 230.412L126.903 232.346C128.185 232.685 129.549 232.5 130.694 231.832L129.686 230.104ZM136.593 226.077L129.686 230.104L130.694 231.832L137.601 227.806L136.593 226.077Z" fill="#E6AC00"/>
+</svg>

static/images/annual-report/2020/adaptation/createalongs_splash.svg

@@ -0,0 +1,3 @@
+<svg width="1020" height="500" viewBox="0 0 1020 500" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M7.47369 178.846C13.5341 269.511 79.0963 299.237 36.8286 326.807C-70.7794 396.998 74.9443 535.486 248.094 484.139C353.129 452.992 492.993 460.604 587.379 484.139C733.029 520.457 861.681 494.151 958.796 407.833C1055.91 321.515 1034.94 187.698 913.712 107.33C785.92 22.6142 506.584 -31.1179 248.094 19.8178C107.088 47.6032 3.29736 116.366 7.47369 178.846ZM986.992 6.96484C959.878 3.16931 936.17 20.6422 934.218 37.2736C932.266 53.9051 943.417 78.9368 968.077 83.2485C992.737 87.5602 1010.86 72.4258 1014.49 60.5979C1018.12 48.77 1014.11 10.7604 986.992 6.96484Z" fill="#0FBD8C"/>
+</svg>

static/images/annual-report/2020/adaptation/tweet-bg.svg

@@ -0,0 +1,3 @@
+<svg width="940" height="482" viewBox="0 0 940 482" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.15" d="M940 245.987C940 390.104 773.509 516.17 472.577 473.613C171.646 431.057 -35.8005 479.552 5.15468 245.987C46.1099 12.4213 173.872 68.8341 472.577 12.4213C771.283 -43.9915 940 101.87 940 245.987Z" fill="#0FBD8C"/>
+</svg>

static/images/annual-report/2020/bigquotes.svg

@@ -0,0 +1,3 @@
+<svg width="128" height="109" viewBox="0 0 128 109" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.4" d="M128 14.5829C128 17.9426 125.862 20.8752 122.871 22.4037C117.426 25.1857 113.078 28.9046 109.827 33.5604C107.187 37.5944 105.429 42.1559 104.553 47.245C103.804 51.5993 107.483 55.2094 111.901 55.2094H120C124.418 55.2094 128 58.7911 128 63.2094V100.348C128 104.766 124.418 108.348 120 108.348H86.6173C82.199 108.348 78.6173 104.766 78.6173 100.348V55.2094C78.6173 47.8618 79.9342 41.0391 82.5679 34.7413C85.2017 28.4434 88.7572 22.9328 93.2346 18.2094C97.712 13.2236 102.848 9.02499 108.642 5.61364C111.614 3.93975 114.682 2.42381 117.844 1.06582C122.787 -1.05649 128 2.78869 128 8.16769V14.5829ZM49.3827 14.5829C49.3827 17.9426 47.2451 20.8752 44.2533 22.4037C38.8084 25.1857 34.4606 28.9046 31.2099 33.5604C28.5694 37.5944 26.8113 42.1559 25.9356 47.245C25.1864 51.5993 28.8657 55.2094 33.284 55.2094H41.3827C45.801 55.2094 49.3827 58.7911 49.3827 63.2094V100.348C49.3827 104.766 45.801 108.348 41.3827 108.348H8C3.58173 108.348 0 104.766 0 100.348V55.2094C0 47.8618 1.31687 41.0391 3.95062 34.7413C6.58436 28.4434 10.1399 22.9328 14.6173 18.2094C19.0947 13.2236 24.2305 9.02499 30.0247 5.61364C32.9971 3.93975 36.0645 2.42381 39.2271 1.06582C44.1697 -1.05649 49.3827 2.78869 49.3827 8.16769V14.5829Z" fill="white" fill-opacity="0.25"/>
+</svg>

static/images/annual-report/2020/community/Creative Computing Sprinkles left.svg

@@ -0,0 +1,24 @@
+<svg width="248" height="504" viewBox="0 0 248 504" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M103.489 143H171.346C184.917 143 195.98 155.834 195.98 171.618C195.98 187.402 184.917 200.236 171.346 200.236H139.925C139.925 200.236 139.925 200.236 139.925 200.383C126.501 223.543 106.439 225.313 108.357 214.84C109.684 207.611 110.717 204.366 109.684 200.383H103.636C90.065 200.383 79.0014 187.549 79.0014 171.765C78.8539 155.834 89.77 143 103.489 143Z" fill="#D9E3F2"/>
+<path d="M62.5852 223.012L123.618 259.249C138.345 267.992 143.195 287.018 134.451 301.745L24.9952 486.099C16.2519 500.826 -2.77413 505.676 -17.5005 496.932L-78.5335 460.696C-93.2599 451.952 -98.11 432.926 -89.3666 418.2L20.0895 233.845C28.8329 219.119 47.8589 214.269 62.5852 223.012Z" fill="#EC9C13"/>
+<path d="M63.0581 223.293L113.919 253.49C128.645 262.233 133.496 281.259 124.752 295.986L15.3011 480.332C6.55774 495.058 -12.4683 499.909 -27.1946 491.165L-78.0556 460.968C-92.7819 452.224 -97.632 433.198 -88.8886 418.472L20.5624 234.126C29.3058 219.399 48.3318 214.549 63.0581 223.293Z" fill="#FFBF00"/>
+<path d="M61.0907 242.317L93.2238 261.395C107.95 270.138 112.8 289.164 104.057 303.891L9.25273 463.567C0.509338 478.294 -18.5167 483.144 -33.243 474.4L-65.3761 455.322C-80.1024 446.579 -84.9525 427.553 -76.2091 412.827L18.595 253.15C27.3384 238.423 46.3643 233.573 61.0907 242.317Z" fill="#5CB1D6"/>
+<path d="M101.603 258.898C100.906 260.062 99.6529 260.593 98.8025 260.084C97.9522 259.576 97.8272 258.22 98.5233 257.056C99.2194 255.892 100.473 255.361 101.323 255.87C102.174 256.378 102.299 257.734 101.603 258.898Z" fill="#CF8B17"/>
+<path d="M74.9889 237.697L98.1364 251.441C99.0672 251.993 99.3749 253.194 98.8237 254.122C98.2725 255.051 97.0711 255.355 96.1403 254.803L72.9928 241.06C72.062 240.507 71.7543 239.306 72.3055 238.378C72.8567 237.449 74.0581 237.145 74.9889 237.697Z" fill="#CF8B17"/>
+<path d="M25.4322 293.341C17.5238 288.644 15.1889 277.958 20.2099 269.478C25.2366 261.005 35.714 257.94 43.6281 262.646L84.4612 286.959C92.3754 291.665 94.7102 302.35 89.6835 310.823C84.6625 319.304 74.1712 322.366 66.271 317.663L62.8864 315.651C60.8182 317.198 59.3047 321.187 57.6927 325.776C55.4888 331.981 45.4895 322.45 45.0236 305.619C45.0181 305.381 44.9909 305.182 44.9663 304.968L25.4322 293.341Z" fill="#E9F1FC"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M62.0948 287.637L59.5976 286.23C58.9016 285.838 58.0184 286.084 57.6248 286.779L53.1713 294.646C52.7778 295.341 53.0229 296.223 53.7189 296.615L56.2169 298.022C56.5785 298.23 56.8326 298.585 56.9134 298.994L57.394 301.427C57.4757 301.841 57.7342 302.198 58.1018 302.405L61.2696 304.19C61.6372 304.397 62.0772 304.434 62.4744 304.29L64.8112 303.444C65.2043 303.302 65.6394 303.336 66.0047 303.538L71.6038 306.693C72.2998 307.085 73.183 306.839 73.5765 306.144L78.0301 298.277C78.4236 297.582 78.1785 296.7 77.4825 296.308L71.8842 293.154C71.5188 292.952 71.0833 292.917 70.6899 293.06L68.3531 293.905C67.9559 294.049 67.5159 294.013 67.1483 293.805L63.9805 292.02C63.6129 291.813 63.3544 291.456 63.2727 291.043L62.7921 288.609C62.7112 288.2 62.4568 287.845 62.0948 287.637Z" fill="#FFAB19"/>
+<path d="M51.346 286.197C49.4812 291.172 43.9532 293.699 38.9989 291.842C34.0447 289.985 31.5402 284.446 33.4051 279.471C35.27 274.496 40.798 271.969 45.7522 273.826C50.7065 275.683 53.2109 281.222 51.346 286.197Z" fill="#FFC709"/>
+<path d="M45.5275 286.503C43.96 286.515 42.4161 286.121 41.0463 285.359C39.6765 284.597 38.5276 283.493 37.7118 282.154" stroke="#5C6671" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M49.4501 285.131C49.2291 285.721 48.5721 286.019 47.9825 285.798C47.393 285.577 47.0942 284.92 47.3152 284.331C47.5362 283.741 48.1933 283.443 48.7828 283.663C49.3723 283.884 49.6711 284.542 49.4501 285.131Z" fill="#5C6671"/>
+<path d="M38.8891 278.849C38.6681 279.439 38.011 279.737 37.4215 279.516C36.8319 279.295 36.5332 278.638 36.7541 278.049C36.9751 277.459 37.6322 277.16 38.2218 277.381C38.8113 277.602 39.1101 278.26 38.8891 278.849Z" fill="#5C6671"/>
+<path d="M19.412 361.764C25.2455 365.215 34.0556 361.146 39.0879 352.681C44.1228 344.203 43.4748 334.533 37.6496 331.077L7.49595 313.177C1.63471 309.721 -7.1641 313.807 -12.2047 322.277C-17.237 330.741 -15.7001 336.376 -9.89145 339.844L-6.18989 342.656C-6.77534 345.079 -11.4885 351.121 -14.5382 354.9C-18.6382 359.978 -8.52854 362.384 4.43743 353.514C4.59667 353.392 4.76203 353.279 4.93285 353.175L19.412 361.764Z" fill="#E9F1FC"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.18718 328.58C3.00087 335.226 7.17717 344.424 8.98387 345.49C10.7906 346.557 20.8594 345.855 25.1403 339.854C25.2851 339.658 25.4159 339.459 25.5412 339.253C26.4099 337.779 26.6595 336.02 26.2352 334.363C25.8109 332.705 24.7473 331.283 23.2772 330.408C22.5407 329.965 21.7216 329.677 20.87 329.561C20.0183 329.445 19.152 329.505 18.3241 329.735C18.1277 328.898 17.7642 328.109 17.2553 327.416C16.7465 326.723 16.1029 326.14 15.3631 325.702C13.8911 324.833 12.1346 324.583 10.4784 325.006C8.82211 325.429 7.40117 326.492 6.52684 327.961C6.40422 328.154 6.2816 328.346 6.18718 328.58Z" fill="#ED5F87"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M129.636 156.929C114.391 156.573 108.566 163.41 108.566 163.41L150.38 164.387C150.38 164.387 144.881 157.285 129.636 156.929ZM108.566 163.41L163.595 164.695C164.557 164.718 165.319 165.516 165.296 166.478L164.968 180.533C164.945 181.495 164.147 182.257 163.185 182.234L130.806 181.478L130.806 181.478L129.785 181.454C129.323 181.443 128.876 181.616 128.541 181.936L126.02 184.342C125.685 184.661 125.238 184.834 124.776 184.823L119.25 184.694C118.788 184.684 118.349 184.49 118.03 184.155L115.624 181.634C115.305 181.299 114.866 181.105 114.404 181.095L113.383 181.071L113.383 181.071L109.899 180.989C108.936 180.967 108.175 180.169 108.197 179.206L108.566 163.41Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="248" height="504" fill="white"/>
+</clipPath>
+</defs>
+</svg>

static/images/annual-report/2020/community/Creative Computing Sprinkles right.svg

@@ -0,0 +1,22 @@
+<svg width="248" height="504" viewBox="0 0 248 504" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.1432 356.869C36.2196 355.81 36.7127 354.824 37.5141 354.129L39.2843 352.594L94.4334 304.766C96.1024 303.318 98.626 303.5 100.07 305.172L126.218 335.442C127.662 337.114 127.48 339.642 125.811 341.09L70.6619 388.918L68.8917 390.454C68.0903 391.149 67.5972 392.134 67.5208 393.193L66.9451 401.18C66.8688 402.24 66.3757 403.225 65.5742 403.92L55.9901 412.232C55.1887 412.927 54.1446 413.275 53.0875 413.199L45.116 412.624C44.0589 412.548 43.0148 412.896 42.2134 413.591L40.4432 415.126L34.3995 420.367C32.7305 421.815 30.2069 421.633 28.7628 419.961L2.6148 389.691C1.17069 388.019 1.35294 385.491 3.02187 384.043L9.06561 378.802L10.8358 377.266C11.6372 376.571 12.6813 376.224 13.7384 376.3L21.7099 376.874C22.767 376.951 23.8111 376.603 24.6125 375.908L34.1966 367.596C34.998 366.901 35.4912 365.915 35.5675 364.856L36.1432 356.869Z" fill="#CF63CF"/>
+<path d="M162.122 173.39C192.194 204.784 223.121 186.471 234.825 173.39L267.045 182.582C271.589 143.89 277.95 31.1236 267.045 18.8963C256.14 6.66907 233.861 18.2078 224.084 25.5056C224.635 23.3025 219.871 15.8395 196.408 3.61224C172.945 -8.61501 159.093 13.1132 155.1 25.5056C150.005 17.3817 134.528 4.68626 113.378 18.8963C92.2284 33.1064 96.8549 57.8638 101.812 68.4662C88.9237 67.8053 79.6431 74.8002 76.6139 78.3802C57.1164 113.74 81.7086 127.262 96.4418 129.602C87.2163 138.277 74.3006 160.088 96.4418 177.933C118.583 195.778 149.454 182.34 162.122 173.39Z" fill="#E9F1FC"/>
+<path d="M148.077 235.094C148.077 250.269 160.785 259.925 176.167 261.944C201.365 265.252 204.256 249.923 204.256 235.094C204.256 220.265 200.952 213.197 176.167 208.244C151.382 203.29 148.077 219.919 148.077 235.094Z" fill="#E9F1FC"/>
+<path d="M196.821 301.536C196.821 311.118 203.843 320.952 213.344 318.886C222.845 316.819 229.868 311.118 229.868 301.536C229.868 291.954 222.845 282.535 213.344 284.187C203.843 285.838 196.821 291.954 196.821 301.536Z" fill="#E9F1FC"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M173.24 73.7791L172.954 73.7086C171.923 73.4554 170.835 73.6218 169.927 74.1712L168.038 75.3148C167.131 75.8643 166.042 76.0307 165.012 75.7774L160.646 74.7044C159.616 74.4512 158.728 73.7991 158.179 72.8916L157.035 71.0024C156.486 70.0949 155.599 69.4428 154.568 69.1896L154.281 69.1191L154.281 69.119L152.478 68.6758C150.333 68.1485 148.166 69.4602 147.639 71.6054L140.206 101.847L140.206 101.847L139.274 105.639L139.274 105.639L134.637 124.506C134.109 126.651 135.421 128.817 137.566 129.345L139.369 129.788L139.369 129.788L139.656 129.859C140.687 130.112 141.574 130.764 142.123 131.672L143.267 133.561C143.816 134.468 144.704 135.12 145.734 135.373L150.1 136.447C151.13 136.7 152.219 136.533 153.126 135.984L155.015 134.84C155.923 134.291 157.011 134.124 158.041 134.378L158.328 134.448L158.328 134.448L209.425 147.007C211.571 147.535 213.737 146.223 214.265 144.078L216.083 136.679C216.61 134.534 215.299 132.367 213.153 131.84L169.64 121.145L169.64 121.145L169.353 121.074C168.323 120.821 167.234 120.988 166.327 121.537L164.438 122.681C163.53 123.23 162.442 123.396 161.411 123.143L157.046 122.07C156.015 121.817 155.128 121.165 154.579 120.257L153.435 118.368C152.886 117.461 151.998 116.809 150.968 116.555L150.681 116.485L150.681 116.485L148.878 116.042C146.733 115.514 145.421 113.348 145.948 111.202L147.789 103.711L147.789 103.711L148.721 99.9195L148.721 99.9195L149.631 96.2203C150.158 94.075 152.324 92.7634 154.47 93.2907L156.59 93.8118C157.607 94.0702 158.483 94.7184 159.027 95.6172L160.171 97.5063C160.72 98.4138 161.608 99.0659 162.638 99.3191L167.003 100.392C168.034 100.645 169.122 100.479 170.03 99.9296L171.919 98.7859C172.818 98.2418 173.894 98.0733 174.916 98.3162L218.745 109.089C220.891 109.617 223.057 108.305 223.585 106.16L227.267 91.1775C227.794 89.0323 226.483 86.8657 224.337 86.3384L173.24 73.7791L173.24 73.7791Z" fill="#FFAB19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M270.852 499.109C230.053 476.476 189.189 455.04 164.032 453.041C118.975 449.461 104.697 463.221 90.1865 464.925C75.6762 466.629 76.3064 443.685 112.306 434.539C148.306 425.392 52.0843 404.858 41.4819 400.381C30.8794 395.904 35.0387 381.784 47.8195 383.88C60.6004 385.977 103.483 397.275 103.483 397.275C103.483 397.275 100.776 394.665 101.389 389.065C102.001 383.465 110.388 382.64 110.388 382.64C110.388 382.64 107.275 375.066 110.257 371.204C113.238 367.341 120.637 367.984 120.637 367.984C120.637 367.984 118.507 360.124 126.73 357.244C134.953 354.364 156.832 356.821 219.668 393.156C231.672 400.097 245.652 407.483 261.058 415.377L270.852 499.109Z" fill="#825331"/>
+<mask id="mask0" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="35" y="356" width="236" height="144">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M270.852 499.109C230.053 476.476 189.189 455.04 164.032 453.041C118.975 449.461 104.697 463.221 90.1865 464.925C75.6762 466.629 76.3064 443.685 112.306 434.539C148.306 425.392 52.0843 404.858 41.4819 400.381C30.8794 395.904 35.0387 381.784 47.8195 383.88C60.6004 385.977 103.483 397.275 103.483 397.275C103.483 397.275 100.776 394.665 101.389 389.065C102.001 383.465 110.388 382.64 110.388 382.64C110.388 382.64 107.275 375.066 110.257 371.204C113.238 367.341 120.637 367.984 120.637 367.984C120.637 367.984 118.507 360.124 126.73 357.244C134.953 354.364 156.832 356.821 219.668 393.156C231.672 400.097 245.652 407.483 261.058 415.377L270.852 499.109Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35.5289 386.99C35.9793 390.84 32.9776 397.193 52.2161 401.814C71.4547 406.434 115.003 418.795 120.794 425.598C126.585 432.401 107.234 435.912 107.234 435.912C107.234 435.912 116.885 432.741 113.396 428.086C109.907 423.432 45.1593 409.67 38.6649 403.795C32.1705 397.921 35.0785 383.14 35.5289 386.99Z" fill="black" fill-opacity="0.1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M96.5802 462.775C102.779 461.25 112.845 454.869 128.393 451.989C145.746 448.775 171.017 450.229 183.5 455.314C216.616 468.805 252.369 484.324 252.369 484.324L253.049 490.145C253.049 490.145 184.151 453.888 147.82 456.758C111.489 459.628 95.815 470.955 87.1624 467.926C87.1624 467.926 82.9898 466.12 96.5802 462.775Z" fill="black" fill-opacity="0.15"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="248" height="504" fill="white"/>
+</clipPath>
+</defs>
+</svg>

static/images/annual-report/2020/community/Online Community Illustration Wave.svg

@@ -0,0 +1,11 @@
+<svg width="1280" height="632" viewBox="0 0 1280 632" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path opacity="0.1" d="M264.5 79.9973C202 50 79.1667 -6.00356 -0.5 7.99644V200.996C127 200.996 141.5 308 334 340.5C526.5 373 455 510 812.5 510C1098.5 510 1246 547 1284 565.5V119.5C1193.5 119.5 1175 184.5 1010 154.5C823.122 120.522 751.196 165.738 620 154.5C493.051 143.626 354.899 123.385 264.5 79.9973Z" fill="#4C97FF"/>
+<path opacity="0.1" d="M260.103 164.799C197.579 136.18 74.6977 82.7491 -5 96.106V280.24C122.55 280.24 137.055 382.329 329.63 413.336C522.205 444.343 450.677 575.049 808.316 575.049C1094.43 575.049 1241.99 610.35 1280 628V202.488C1189.46 202.488 1170.96 264.502 1005.89 235.88C818.943 203.463 746.988 246.601 615.742 235.88C488.744 225.505 350.537 206.194 260.103 164.799Z" fill="#4C97FF"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="1280" height="632" fill="white"/>
+</clipPath>
+</defs>
+</svg>

static/images/annual-report/2020/community/Timeline/April Illustration.svg

@@ -0,0 +1,50 @@
+<svg width="462" height="458" viewBox="0 0 462 458" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M92.6354 137.25C94.8208 135.317 98.5208 135.123 100.899 136.816C103.278 138.51 106.979 138.315 109.164 136.382L109.753 147.455C107.568 149.389 103.867 149.584 101.489 147.889C99.1101 146.195 95.4101 146.39 93.2247 148.323L92.6354 137.25Z" fill="#59C059"/>
+<path d="M93.4719 152.968L92.563 135.89" stroke="#59C059" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M125.441 134.372L120.937 139.346L121.293 146.027L126.299 150.501L133.024 150.148L137.528 145.174L137.172 138.493L132.166 134.019L125.441 134.372Z" fill="#EC5858"/>
+<rect opacity="0.7" x="86.394" y="160.486" width="237.227" height="180.024" rx="8" transform="rotate(-3.02661 86.394 160.486)" fill="white"/>
+<path d="M449.223 331.989C444.025 335 438.613 338.591 430.807 333.109C423 327.626 421.959 320.604 425.609 315.406C429.259 310.209 434.05 310.075 444.025 314.287C454 318.499 454.42 328.979 449.223 331.989Z" fill="#4C97FF" fill-opacity="0.5"/>
+<path d="M308.539 420.597C313.312 421.592 318.529 422.352 320.279 429.895C322.03 437.438 318.855 442.247 313.833 443.413C308.811 444.578 305.842 442.064 302.093 434.115C298.344 426.166 303.766 419.602 308.539 420.597Z" fill="#4C97FF" fill-opacity="0.5"/>
+<path d="M270.199 305.586C266.725 307.598 263.109 309.998 257.891 306.334C252.673 302.669 251.978 297.976 254.417 294.502C256.857 291.028 260.059 290.939 266.725 293.754C273.392 296.569 273.673 303.573 270.199 305.586Z" fill="#4C97FF" fill-opacity="0.5"/>
+<path d="M214.551 257.9C166.447 224.314 112.732 248.23 91.8878 264.386L95.4768 332.265C95.7102 336.679 99.4791 340.067 103.893 339.831L173.907 336.085C174.962 336.029 175.988 336.131 177.008 336.408C225.192 349.493 320.799 380.771 329.535 406.5C340.57 439 438.5 493 429.5 402C420.5 311 356.375 313.77 374.5 309C382.5 306.895 427 322 406.5 293C386.712 265.007 345.19 261.374 329.535 266.061C311.25 277.335 262.655 291.487 214.551 257.9Z" fill="#4C97FF" fill-opacity="0.5"/>
+<path d="M160.5 277.5C122.9 272.3 101.5 304.333 95.5 321L97.029 332.62C97.5762 336.779 101.243 339.809 105.43 339.563L174.5 335.5C280.1 361.1 321.833 390.167 329.5 401.5C329.333 411 339.4 433.7 381 448.5C422.6 463.3 431.333 429.667 430.5 411C424.833 413.667 406.4 414.5 378 396.5C342.5 374 387.5 346.5 369 321C350.5 295.499 311.5 316.5 268 321C224.5 325.499 207.5 284 160.5 277.5Z" fill="#4C97FF" fill-opacity="0.25"/>
+<path d="M267.876 438.381C245.252 435.762 252.254 415.612 230.766 394.142C209.277 372.673 175.289 362.759 182.315 355.726C189.342 348.694 232.186 354.525 253.674 375.994C286.346 411.195 290.5 441 267.876 438.381Z" fill="#4C97FF" fill-opacity="0.5"/>
+<path d="M202.389 233.957L228.181 251.492C226.829 254.483 222.997 260.657 218.485 261.425" stroke="#575E75" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M213.776 240.959L221.533 230.603M221.533 230.603L229.29 220.248C236.519 227.696 250.203 242.661 247.113 242.936C243.251 243.28 238.729 238.278 233.347 235.963C229.041 234.112 223.677 231.619 221.533 230.603Z" stroke="#575E75" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M200.891 233.083C198.244 235.594 193.742 242.093 196.907 248.004" stroke="#575E75" stroke-width="4" stroke-linecap="round"/>
+<path d="M141.5 230.5C131 218.667 112.8 195 124 195C135.2 195 142.666 216.333 145 227" stroke="#4C97FF" stroke-width="6" stroke-linecap="round"/>
+<path d="M156.5 225C151.333 208.5 143.5 176.6 153.5 181C163.5 185.4 159.667 212.167 156.5 225Z" stroke="#4C97FF" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M168.5 220.5C169.667 210.333 174.7 190 185.5 190" stroke="#4C97FF" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M293.068 70.8074C292.89 69.8401 293.177 68.8015 293.948 68.0641L331.244 32.3683L329.069 30.0962C325.45 32.7715 318.581 38.0262 314.277 42.4343C307.988 48.875 300.097 60.7559 300.097 60.7559L298.198 58.7726C298.198 58.7726 305.747 46.7672 311.963 40.3735C318.082 34.0804 329.584 26.3591 329.584 26.3591L330.532 27.35L330.533 27.3496L333.38 30.3241L333.788 29.9333C340.15 23.8444 349.244 21.5478 357.734 23.8859C359.51 24.3749 360.873 25.7996 361.284 27.595C363.248 36.1793 360.555 45.164 354.193 51.2529L314.352 89.3837C313.66 90.0465 312.741 90.3087 311.866 90.1949L239.629 159.331C238.55 160.365 236.92 160.424 235.762 159.602C235.313 160.287 234.779 160.931 234.163 161.521L215.646 179.243C212.99 181.785 209.394 182.737 206.034 182.125L204.144 183.934C202.537 185.471 200.332 185.831 198.326 185.228C198.015 185.58 197.681 185.929 197.325 186.269C194.083 189.372 190.278 190.657 188.825 189.139C187.373 187.622 188.824 183.876 192.065 180.774C192.523 180.336 192.991 179.934 193.463 179.572C193.23 177.8 193.747 175.985 195.132 174.659L197.093 172.782C196.629 169.399 197.738 165.848 200.394 163.306L218.91 145.584C219.514 145.006 220.167 144.51 220.855 144.096C219.734 142.895 219.747 140.982 220.962 139.819L293.068 70.8074Z" fill="black" fill-opacity="0.1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3907 295.522C7.90774 292.612 7.46132 287.444 10.3936 283.98L13.8621 279.882C16.7943 276.418 21.9949 275.969 25.4778 278.879L33.7111 285.758C33.759 285.796 33.8065 285.835 33.8537 285.874L51.9519 300.995L51.9863 301.024L160.414 391.614C162.011 392.593 163.388 394.003 164.356 395.826L175.456 416.736C175.54 416.894 175.59 417.056 175.609 417.215L175.736 417.455C176.143 418.22 175.406 419.09 174.578 418.823L174.321 418.741C174.158 418.749 173.989 418.728 173.816 418.673L151.178 411.394C149.199 410.758 147.56 409.647 146.314 408.247L37.8647 317.638L34.5967 314.908L34.5638 314.88L24.0477 306.094C23.9999 306.056 23.9523 306.017 23.905 305.977L11.3907 295.522Z" fill="black" fill-opacity="0.1"/>
+<rect width="21.789" height="32.7659" rx="10.8727" transform="matrix(0.556289 -0.830989 0.834316 0.551287 3.44824 280.634)" fill="#FF6680"/>
+<rect width="21.789" height="40.0472" rx="10.8945" transform="matrix(0.556289 -0.830989 0.834316 0.551287 12.5605 286.652)" fill="#83899C"/>
+<path d="M38.3565 303.699C33.3366 300.382 31.9805 293.64 35.3276 288.64C38.6747 283.64 45.4576 282.275 50.4775 285.592L170.48 364.886L158.359 382.992L38.3565 303.699Z" fill="#575E75"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M162.268 384.741C154.597 383.191 150.963 374.407 155.307 367.918C159.651 361.428 169.21 361.362 173.615 367.791L187.013 387.347C187.707 388.36 186.809 389.701 185.601 389.456L162.268 384.741Z" fill="#F6DDC3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M176.677 387.562C173.211 386.861 171.569 382.892 173.532 379.96C175.495 377.028 179.814 376.998 181.805 379.903L187.373 388.03C187.863 388.746 187.228 389.694 186.374 389.521L176.677 387.562Z" fill="#575E75"/>
+<ellipse rx="3.80338" ry="8.12495" transform="matrix(0.771969 0.635661 0.635661 -0.771969 193.204 183.811)" fill="#3373CC"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M193.795 183.591C191.164 181.429 190.426 177.588 192.59 174.959L194.316 172.864C193.456 169.559 194.137 165.902 196.474 163.064L212.766 143.278C216.638 138.576 223.589 137.902 228.292 141.775C232.994 145.647 233.668 152.598 229.795 157.3L213.503 177.086C211.166 179.924 207.707 181.295 204.299 181.084L202.636 183.104C200.438 185.773 196.467 185.785 193.795 183.591Z" fill="#4C97FF"/>
+<path d="M214.123 137.31C212.981 138.697 213.301 140.771 214.792 141.774C217.098 143.325 220.345 145.579 222.655 147.462C225.195 149.533 228.344 152.577 230.458 154.684C231.729 155.95 233.824 155.865 234.965 154.48L299.756 75.795C304.496 70.0385 303.672 61.5293 297.916 56.7892C292.159 52.0491 283.65 52.8731 278.91 58.6297L214.123 137.31Z" fill="white"/>
+<path d="M278.116 57.4329C276.971 58.8239 277.296 60.9059 278.796 61.9045C281.424 63.6534 285.325 66.3345 288.052 68.5794C290.778 70.8243 294.158 74.139 296.378 76.3818C297.646 77.6624 299.752 77.5826 300.897 76.1916L335.952 33.6195C341.55 26.8215 343.162 17.5815 340.198 9.28934C339.578 7.55509 338.056 6.3015 336.235 6.02578C327.528 4.70746 318.769 8.06279 313.171 14.8608L278.116 57.4329Z" fill="#4C97FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M312.812 15.2975L309.634 12.68L309.633 12.6805L308.574 11.8085C308.574 11.8085 298.065 20.8351 292.733 27.8072C287.316 34.8908 281.239 47.7042 281.239 47.7042L283.358 49.4492C283.358 49.4492 289.79 36.719 295.274 29.5801C299.027 24.6942 305.227 18.6647 308.505 15.5803L310.933 17.5798L312.812 15.2975Z" fill="#4C97FF"/>
+<mask id="mask0" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="187" y="7" width="154" height="184">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M278.401 59.4288C278.11 58.4896 278.273 57.4247 278.95 56.602L312.394 15.9866C317.978 9.20479 326.758 5.91964 335.423 7.36993C337.153 7.65948 338.597 8.84895 339.213 10.4912C342.299 18.7165 340.76 27.9635 335.175 34.7453L301.732 75.3607C301.122 76.1009 300.24 76.47 299.358 76.4598L235.074 154.528C234.187 155.605 232.726 155.895 231.521 155.381L214.562 175.977C212.226 178.814 208.768 180.185 205.359 179.974L203.264 182.519C201.859 184.225 199.727 184.827 197.675 184.463C197.394 184.86 197.09 185.258 196.766 185.651C193.637 189.451 189.786 191.449 188.165 190.114C186.543 188.778 187.765 184.615 190.894 180.816C191.306 180.315 191.731 179.845 192.162 179.41C191.72 177.691 192.009 175.844 193.219 174.375L195.376 171.756C194.514 168.45 195.196 164.793 197.533 161.954L214.428 141.436C213.357 140.349 213.221 138.585 214.232 137.358L278.401 59.4288Z" fill="#4C97FF"/>
+</mask>
+<g mask="url(#mask0)">
+<path d="M334.74 23.6781C338.492 19.561 338.419 11.6932 337.914 8.27393L353.028 20.7192L208.747 194.288L194.713 182.732C195.253 183.176 198.411 182.091 204.049 178.544C209.687 174.997 330.049 28.8245 334.74 23.6781Z" fill="black" fill-opacity="0.1"/>
+</g>
+<path d="M272.845 77.0954C275.055 84.4304 277.688 97.9654 270.544 93.4254C261.613 87.7504 261.538 95.449 260.531 100.996C259.525 106.543 261.035 109.637 254.235 108.492C248.796 107.576 247.172 113.821 247.04 117.059" stroke="#4C97FF" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
+<mask id="mask1" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="7" y="265" width="181" height="125">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7066 285.462C6.91996 282.96 5.89703 277.874 8.4218 274.102L11.3998 269.654C13.9245 265.882 19.0409 264.853 22.8276 267.355L33.9568 274.709C34.0293 274.755 34.1014 274.801 34.1731 274.848L49.4063 284.914C49.6574 285.08 49.8993 285.254 50.132 285.437C50.385 285.577 50.6343 285.727 50.8795 285.889L169.589 364.328C171.3 365.12 172.842 366.373 174.017 368.088L187.416 387.644C187.518 387.793 187.585 387.949 187.622 388.106L187.774 388.328C188.265 389.044 187.63 389.992 186.776 389.819L186.507 389.765C186.349 389.791 186.179 389.789 186.003 389.753L162.67 385.038C160.625 384.625 158.866 383.697 157.47 382.436L38.7585 303.996C38.5074 303.83 38.2654 303.655 38.0328 303.473C37.7798 303.333 37.5304 303.182 37.2853 303.02L24.5191 294.585C24.4561 294.546 24.3934 294.505 24.3311 294.464L10.7066 285.462Z" fill="white"/>
+</mask>
+<g mask="url(#mask1)">
+<path d="M18.3154 285.797C11.9154 282.197 9.31543 276.297 8.81543 273.797L0.81543 281.297L175.815 394.797L181.815 388.797L161.815 379.297C116.649 349.63 24.7154 289.397 18.3154 285.797Z" fill="black" fill-opacity="0.1"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="462" height="458" fill="white"/>
+</clipPath>
+</defs>
+</svg>