Merge pull request #8988 from scratchfoundation/integration-branch-ux-12.2024

Integration branch ux 12.2024

package-lock.json

@@ -22194,7 +22194,6 @@
       "resolved": "https://registry.npmjs.org/scratch-gui/-/scratch-gui-5.1.0.tgz",
       "integrity": "sha512-OpFwrtKBQxgP5cQB6QDnugNW7ahGRp9bVaDDF0NIoP+4vZJxVSGJ7vRRSwvrc0qLl4PfZ5AEj70CBFJyVbLUow==",
       "dev": true,
-      "license": "AGPL-3.0-only",
       "dependencies": {
         "@microbit/microbit-universal-hex": "^0.2.2",
         "arraybuffer-loader": "^1.0.6",

src/_colors.scss

@@ -25,11 +25,15 @@ $background-color: hsla(0, 0%, 99%, 1); //#FDFDFD
 
 $motion-blue-3: hsla(215, 60%, 50%, 1);//#3373CC
 
+$ui-light-blue: hsla(195, 63%, 86%, 1); //#C5E7f2
+$ui-cyan-blue: hsla(194, 73%, 36%, 1); //#19809F
+
 /* UI Secondary Colors */
 /* 3.0 colors */
 /* Using www naming convention for now, should be consistent with gui */
 $ui-aqua: hsla(144, 45%, 36%, 1); 
 $ui-aqua-dark: darken($ui-aqua, 10%);
+$ui-purple-light: hsla(260, 100%, 88%, 1); // #DACEF3
 $ui-purple: hsla(260, 100%, 70%, 1); // #9966FF Looks Primary
 $ui-purple-dark: hsla(260, 60%, 60%, 1); // #855CD6 Looks Secondary
 $ui-purple-darker: hsla(260, 46%, 54%, 1);
@@ -37,6 +41,7 @@ $ui-purple-10percent: hsla(260, 60%, 60%, .1);
 $ui-purple-25percent: hsla(260, 60%, 60%, .25);
 $ui-magenta: hsla(300, 53%, 60%, 1); /* #CF63CF Sounds Primary */
 $ui-magenta-dark: hsla(300, 48%, 50%, 1); /* #BD42BD Sounds Tertiary */
+$ui-light-grayish-blue: hsla(215, 76%, 95%, 1);
 
 $ui-yellow: hsla(45, 100%, 50%, 1); // #FFBF00 Events Primary
 $ui-coral: hsla(350, 100%, 70%, 1); // #FF6680 More Blocks Primary
@@ -48,6 +53,7 @@ $ui-light-primary: hsl(215, 100%, 95%);
 $ui-light-primary-transparent: hsla(215, 100%, 95%, 0);
 
 $ui-border: hsla(0, 0%, 85%, 1); //#D9D9D9
+$ui-border-light-blue: hsla(215, 50%, 90%, 1); //#D9E3F2
 
 /* modals */
 $ui-mint-green: hsl(163, 69%, 44%);
@@ -59,6 +65,7 @@ $active-dark-gray: hsla(0, 0%, 0%, .2);
 $box-shadow-gray: hsla(0, 0%, 0%, .25);
 $box-shadow-light-gray: hsla(0, 0%, 0%, .15);
 $overlay-gray: hsla(0, 0%, 0%, .75);
+$gray-50: hsla(226, 15%, 97%, 1);
 $transparent-light-blue: rgba(229, 240, 254, 0);
 
 /* Typography Colors */

src/components/adminpanel/adminpanel.jsx

@@ -11,7 +11,7 @@ const AdminPanel = ({
     onOpen,
     onClose
 }) => (
-    <div className={classNames('admin-panel', className, {hidden: !isOpen})}>
+    <div className={classNames('admin-panel', className, {collapsed: !isOpen})}>
         {isOpen ? (
             <React.Fragment>
                 <span

src/components/adminpanel/adminpanel.scss

@@ -14,7 +14,7 @@
     overflow: scroll;
     text-shadow: none;
 
-    &.hidden {
+    &.collapsed {
         width: 10px;
     }
 

src/components/cards-modal/cards-modal.jsx

@@ -0,0 +1,143 @@
+import React, {useCallback, useState} from 'react';
+import ReactModal from 'react-modal';
+import PropTypes from 'prop-types';
+import Button from '../forms/button.jsx';
+import {FormattedMessage, useIntl} from 'react-intl';
+import ModalNavigation from '../modal-navigation/modal-navigation.jsx';
+
+import './cards-modal.scss';
+
+const GUIDES_SECTIONS = [
+    {
+        titleId: 'ideas.modalSectionTitleSpritesAndSounds',
+        imgSrc: '/images/ideas/sprites-sounds.svg',
+        cards: [
+            {
+                cardId: 'ideas.modalCardNameCreateSprite',
+                hrefId: 'guides.ScratchLearningResource_CreateOriginalSpriteLink'
+            },
+            {
+                cardId: 'ideas.modalCardNameRemix',
+                hrefId: 'guides.ScratchLearningResource_RemixRe-imagineSpritesLink'
+            },
+            {
+                cardId: 'ideas.modalCardNameBringDrawingsIntoScratch',
+                hrefId: 'guides.ScratchLearningResource_BringYourDrawingsIntoScratchLink'
+            },
+            {
+                cardId: 'ideas.modalCardNameSound',
+                hrefId: 'guides.ScratchLearningResource_SoundsAddRecordText-to-SpeechLink'
+            },
+            {
+                cardId: 'ideas.modalCardNameCreateAsset',
+                hrefId: 'guides.ScratchLearningResource_CreateanAssetPackLink'
+            }
+        ]
+    },
+    {
+        titleId: 'ideas.modalSectionTitleAdvancedTopics',
+        imgSrc: '/images/ideas/advanced-topics.svg',
+        cards: [
+            {
+                cardId: 'ideas.modalCardNameConditionalStatements',
+                hrefId: 'guides.ScratchLearningResource_ConditionalStatementsLink'
+            },
+            {
+                cardId: 'ideas.modalCardNameVariablesLists',
+                hrefId: 'guides.ScratchLearningResource_VariablesandListsLink'
+            },
+            {
+                cardId: 'ideas.modalCardNameCustomBlocks',
+                hrefId: 'guides.ScratchLearningResource_MyBlocksLink'
+            },
+            {
+                cardId: 'ideas.modalCardNameFaceSensing',
+                hrefId: 'cards.paperplanes-turtlegraphics-cardsLink'
+            },
+            {
+                cardId: 'ideas.modalCardNameComputationalConcepts',
+                hrefId: 'cards.facesensing-cardsLink'
+            }
+        ]
+    }
+];
+
+export const CardsModal = ({isOpen, onClose = () => {}}) => {
+    const [currentPage, setCurrentPage] = useState(0);
+    const intl = useIntl();
+    const onNextPage = useCallback(() => {
+        if (currentPage < GUIDES_SECTIONS.length - 1) {
+            setCurrentPage(currentPage + 1);
+        }
+    }, [currentPage]);
+    const onBackPage = useCallback(() => {
+        if (currentPage > 0) {
+            setCurrentPage(currentPage - 1);
+        }
+    }, [currentPage]);
+
+    if (!isOpen) return null;
+    return (
+        <ReactModal
+            isOpen={isOpen}
+            onRequestClose={onClose}
+            className="cards-modal-container"
+            overlayClassName="cards-modal-overlay"
+        >
+            <div className="cards-modal-header">
+                <div className="cards-title">
+                    <FormattedMessage id={'ideas.modalTitle'} />
+                </div>
+                <Button
+                    className="close-button"
+                    isCloseType
+                    onClick={onClose}
+                />
+            </div>
+            <div className="cards-modal-section-title">
+                <FormattedMessage id={GUIDES_SECTIONS[currentPage].titleId} />
+            </div>
+            <div className="cards-modal-section-content">
+                <img
+                    className="section-img"
+                    src={GUIDES_SECTIONS[currentPage].imgSrc}
+                />
+                <div className="cards-modal-cards-list">
+                    {GUIDES_SECTIONS[currentPage].cards.map(card => (
+                        <div
+                            key={card.cardId}
+                            className="card"
+                        >
+                            <FormattedMessage id={card.cardId} />
+                            <a
+                                href={intl.formatMessage({
+                                    id: card.hrefId
+                                })}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                <Button>
+                                    <img src="/images/ideas/download-icon.svg" />
+                                </Button>
+                            </a>
+                        </div>
+                    ))}
+                </div>
+            </div>
+            <ModalNavigation
+                currentPage={currentPage}
+                totalDots={GUIDES_SECTIONS.length}
+                nextButtonImageSrc="/images/ideas/right-arrow.svg"
+                prevButtonImageSrc="/images/ideas/left-arrow.svg"
+                onNextPage={onNextPage}
+                onBackPage={onBackPage}
+                className="cards-modal-navigation"
+            />
+        </ReactModal>
+    );
+};
+
+CardsModal.propTypes = {
+    isOpen: PropTypes.bool,
+    onClose: PropTypes.func
+};

src/components/cards-modal/cards-modal.scss

@@ -0,0 +1,150 @@
+@import "../../colors";
+@import "../../frameless";
+
+.cards-modal-overlay {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 510;
+
+    background-color: $box-shadow-light-gray;
+    border-color: unset;
+}
+  
+.cards-modal-container {
+    display: flex;
+    flex-direction: column;
+
+    background: white;
+    border-radius: 8px;
+    width: 640px;
+
+    box-shadow: 0 0 0 4px $ui-blue-25percent;
+
+    &:focus {
+        outline: none;
+        border: none;
+    }
+
+    .cards-modal-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        padding: 10px;
+        background-color: $ui-blue;
+        border-radius: 8px 8px 0 0;
+
+        .cards-title {
+            font-size: 1rem;
+            font-weight: 700;
+            line-height: 1.25rem;
+            color: $ui-white;
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        .close-button {
+            position: unset;
+            margin: 0;
+        }
+    }
+
+    .cards-modal-section-title {
+        text-align: center;
+        vertical-align: middle;
+        
+        color: $header-gray;
+        font-size: 1.5rem;
+        font-weight: 700;
+        line-height: 2rem;
+
+        padding: 0.5rem 0;
+        margin: 0.75rem 0
+    }
+
+    .cards-modal-section-content {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        margin: 0 1.25rem;
+        gap: 1.25rem;
+
+        .section-img {
+            width: 200px;
+        }
+
+        .cards-modal-cards-list {
+            flex: 1;
+
+            .card {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                font-size: 0.875rem;
+                font-weight: 500;
+
+    
+                .button {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    width: 2rem;
+                    height: 2rem;
+                }
+            }
+    
+            .card + .card {
+                border-top: 1px solid $box-shadow-light-gray;
+            }
+        }
+    }
+
+    .cards-modal-navigation {
+        justify-content: center;
+        align-items: center;
+        margin: 1.75rem 0;
+
+        .navigation-button {
+            padding: 0;
+            margin: 0 1rem;
+        }
+
+        .dotRow{
+            width: 32px;
+            height: 16px;
+            gap: 0.5rem;
+        }
+    
+        .dot{
+            width: 8px;
+            height: 8px;
+            background-color: transparent;
+            border: 2px solid $ui-blue;
+        }
+
+        .active{
+            background-color: $ui-blue;
+            box-shadow: 0 0 0 4px $ui-blue-25percent;
+        }
+    }
+}
+
+.cards-modal-container:focus {
+    outline: none;
+    border: none;
+}
+
+@media only screen and (max-width: $mobileIntermediate) {
+    .cards-modal-container {
+        width: 100%;
+    }
+}

src/components/community-guidelines/community-guidelines-modal.jsx

@@ -36,13 +36,25 @@ export const CommunityGuidelinesModal = props => {
             <CommunityGuidelines
                 userId={props.userId}
                 currentPage={currentPage}
-                onNextPage={currentPage < communityGuidelines.length - 1 ? onNextPage : onComplete}
-                nextButtonText={currentPage === communityGuidelines.length - 1 ?
-                    <FormattedMessage id={'communityGuidelines.buttons.finish'} /> :
-                    null}
+                onNextPage={
+                    currentPage < communityGuidelines.length - 1 ?
+                        onNextPage :
+                        onComplete
+                }
+                nextButtonText={
+                    currentPage === communityGuidelines.length - 1 ? (
+                        <FormattedMessage id={'communityGuidelines.buttons.finish'} />
+                    ) : (
+                        <FormattedMessage id={'communityGuidelines.buttons.next'} />
+                    )
+                }
+                prevButtonText={
+                    <FormattedMessage id={'communityGuidelines.buttons.back'} />
+                }
                 onBackPage={currentPage > 0 ? onBackPage : null}
             />
-        </ReactModal>);
+        </ReactModal>
+    );
 };
 
 CommunityGuidelinesModal.propTypes = {

src/components/community-guidelines/community-guidelines.jsx

@@ -1,7 +1,7 @@
 import React, {useEffect} from 'react';
 import {FormattedMessage} from 'react-intl';
 import thumbnailUrl from '../../lib/user-thumbnail.js';
-import OnboardingNavigation from '../onboarding-navigation/onboarding-navigation.jsx';
+import ModalNavigation from '../modal-navigation/modal-navigation.jsx';
 
 import './community-guidelines.scss';
 import PropTypes from 'prop-types';
@@ -65,6 +65,7 @@ export const CommunityGuidelines = ({
     userId,
     currentPage,
     nextButtonText,
+    prevButtonText,
     onNextPage,
     onBackPage
 }) => {
@@ -108,10 +109,11 @@ export const CommunityGuidelines = ({
                     </div>
                 )}
             </div>
-            <OnboardingNavigation
+            <ModalNavigation
                 currentPage={currentPage}
                 totalDots={communityGuidelines.length}
                 nextButtonText={nextButtonText}
+                prevButtonText={prevButtonText}
                 onNextPage={onNextPage}
                 onBackPage={onBackPage}
             />
@@ -123,7 +125,8 @@ CommunityGuidelines.propTypes = {
     currentPage: PropTypes.number,
     userId: PropTypes.string,
     constructHeader: PropTypes.func,
-    nextButtonText: PropTypes.string,
+    nextButtonText: PropTypes.node,
+    prevButtonText: PropTypes.node,
     onNextPage: PropTypes.func,
     onBackPage: PropTypes.func
 };

src/components/forms/button.scss

@@ -39,6 +39,10 @@ $pass-bg: $ui-aqua;
         box-shadow: none;
     }
 
+    &.transparent {
+        background-color: transparent;
+    }
+
     &.large {
         border-radius: .25rem;
         font-size: 1rem;

src/components/intro/intro.jsx

@@ -3,6 +3,8 @@ const connect = require('react-redux').connect;
 const PropTypes = require('prop-types');
 const React = require('react');
 
+const classnames = require('classnames');
+
 const navigationActions = require('../../redux/navigation.js');
 
 const Video = require('../video/video.jsx');
@@ -52,13 +54,8 @@ class Intro extends React.Component {
 
                     </FlexRow>
                     <FlexRow className="intro-video-container">
-                        {this.state.videoOpen ?
+                        {!this.state.videoOpen &&
                             (
-                                <Video
-                                    className="intro-video"
-                                    videoId="joal01i8b1"
-                                />
-                            ) : (
                                 <div
                                     className="video-image"
                                     onClick={this.handleShowVideo}
@@ -75,6 +72,12 @@ class Intro extends React.Component {
                                 </div>
                             )
                         }
+                        
+                        <Video
+                            className={classnames('intro-videos')}
+                            videoId="joal01i8b1"
+                            shouldPlay={this.state.videoOpen}
+                        />
                     </FlexRow>
                 </FlexRow>
 

src/components/modal-navigation/modal-navigation.jsx

@@ -1,21 +1,24 @@
 import React, {useEffect, useMemo} from 'react';
 import Button from '../forms/button.jsx';
-import {FormattedMessage} from 'react-intl';
 import PropTypes from 'prop-types';
 
-import './onboarding-navigation.scss';
+import './modal-navigation.scss';
 import classNames from 'classnames';
 
-const OnboardingNavigation = ({
+const ModalNavigation = ({
     currentPage,
     totalDots,
     onNextPage,
     onBackPage,
-    nextButtonText
+    nextButtonText,
+    prevButtonText,
+    nextButtonImageSrc,
+    prevButtonImageSrc,
+    className
 }) => {
     useEffect(() => {
-        new Image().src = '/images/onboarding/right-arrow.svg';
-        new Image().src = '/images/onboarding/left-arrow.svg';
+        new Image().src = nextButtonImageSrc;
+        new Image().src = prevButtonImageSrc;
     }, []);
 
     const dots = useMemo(() => {
@@ -32,49 +35,62 @@ const OnboardingNavigation = ({
     }, [currentPage, totalDots]);
     
     return (
-        <div className="navigation">
+        <div className={classNames('navigation', className)}>
             {
                 <Button
                     onClick={onBackPage}
-                    className={classNames({
-                        hidden: !onBackPage
+                    className={classNames('navigation-button', {
+                        hidden: !onBackPage,
+                        transparent: !prevButtonText
                     })}
                 >
                     <img
                         className="left-arrow"
                         alt=""
-                        src="/images/onboarding/left-arrow.svg"
+                        src={prevButtonImageSrc}
                     />
                     <span className="navText">
-                        {<FormattedMessage
-                            id={'communityGuidelines.buttons.back'}
-                        />}
+                        {prevButtonText}
                     </span>
                 </Button> }
             {(currentPage >= 0 && totalDots) &&
             <div className="dotRow">
                 {dots}
             </div>}
-            <Button onClick={onNextPage}>
+            <Button
+                onClick={onNextPage}
+                className={classNames('navigation-button', {
+                    transparent: !nextButtonText
+                })}
+            >
                 <span className="navText">
-                    {nextButtonText || <FormattedMessage id={'communityGuidelines.buttons.next'} />}
+                    {nextButtonText}
                 </span>
                 <img
                     className="right-arrow"
                     alt=""
-                    src="/images/onboarding/right-arrow.svg"
+                    src={nextButtonImageSrc}
                 />
             </Button>
         </div>
 
     );
 };
-OnboardingNavigation.propTypes = {
+ModalNavigation.propTypes = {
     currentPage: PropTypes.number,
     totalDots: PropTypes.number,
     onNextPage: PropTypes.func,
     onBackPage: PropTypes.func,
-    nextButtonText: PropTypes.node
+    nextButtonText: PropTypes.node,
+    prevButtonText: PropTypes.node,
+    nextButtonImageSrc: PropTypes.string,
+    prevButtonImageSrc: PropTypes.string,
+    className: PropTypes.string
 };
 
-export default OnboardingNavigation;
+ModalNavigation.defaultProps = {
+    nextButtonImageSrc: '/images/onboarding/right-arrow.svg',
+    prevButtonImageSrc: '/images/onboarding/left-arrow.svg'
+};
+
+export default ModalNavigation;

src/components/modal-navigation/modal-navigation.scss

@@ -1,7 +1,7 @@
 @import "../../colors";
 @import "../../frameless";
 
-.button{
+.navigation-button{
     display: flex;
     justify-content: center;
     align-items: center;
@@ -21,10 +21,6 @@
     }
 }
 
-.hidden{
-    visibility: hidden;
-}
-
 .navigation{
     display: flex;
     width: 100%;
@@ -32,9 +28,14 @@
     align-items: center;
     margin-bottom: 40px;
 
+    .hidden{
+        visibility: hidden;
+    }
+
     .dotRow{
         display: flex;
         justify-content: space-between;
+        align-items: center;
         width: 244px;
         min-width: 0px;
         padding: 0px 5px;

src/components/video/video.jsx

@@ -12,7 +12,12 @@ class Video extends React.Component {
             videoStarted: false
         };
     }
+
     componentDidMount () {
+        if (!this.props.shouldPlay) {
+            return;
+        }
+
         /**
             uses code snippets from
             https://github.com/mrdavidjcole/wistia-player-react/blob/master/src/components/wistia_embed.js
@@ -35,7 +40,9 @@ class Video extends React.Component {
             onReady: video => {
                 video.bind('play', () => {
                     this.setState({videoStarted: true});
-                    this.props.onVideoStart();
+                    if (this.props.onVideoStart) {
+                        this.props.onVideoStart();
+                    }
                     return video.unbind;
                 });
             }
@@ -43,36 +50,43 @@ class Video extends React.Component {
     }
 
     render () {
+        if (!this.props.shouldPlay) {
+            return null;
+        }
+
         // Provide CSS classes for anything using the video component to configure what happens before and after
         // the video has played for the first time. See VideoPreview for an example.
         const videoStartedClass = this.state.videoStarted ? 'iframe-video-started' : 'iframe-video-not-started';
-        
+
         return (
             <div className={classNames('video-player', this.props.className)}>
                 <iframe
                     allowFullScreen
                     className={classNames('wistia_embed', `wistia_async_${this.props.videoId}`, videoStartedClass)}
                     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&autoplay=true`}
                     title={this.props.title}
                     width={this.props.width}
+                    height={this.props.height}
                 />
             </div>
         );
     }
 }
+
 Video.defaultProps = {
     height: '225',
     title: '',
-    width: '400'
+    width: '400',
+    shouldPlay: true
 };
 
 Video.propTypes = {
     className: PropTypes.string,
     height: PropTypes.string.isRequired,
     onVideoStart: PropTypes.func,
+    shouldPlay: PropTypes.bool.isRequired,
     title: PropTypes.string.isRequired,
     videoId: PropTypes.string.isRequired,
     width: PropTypes.string.isRequired

src/components/welcome/welcome.jsx

@@ -18,54 +18,42 @@ const Welcome = props => (
         moreTitle="x"
         title={props.messages['welcome.welcomeToScratch']}
     >
-        <div className="welcome-col blue">
-            <h4>
-                <a
-                    href={
-                        shouldDisplayOnboarding(props.user, props.permissions) ?
-                            '/projects/editor/' :
-                            '/projects/editor/?tutorial=getStarted'
-                    }
-                >
-                    {props.messages['welcome.learn']}
-                </a>
-            </h4>
+        <div className="welcome-options">
             <a
+                id="welcome.explore"
+                className="welcome-option-button"
+                href="/starter-projects"
+            >
+                {props.messages['welcome.explore']}
+                <img
+                    alt="Starter Projects"
+                    src="/images/explore_starter_projects.svg"
+                />
+            </a>
+            <a
+                id="welcome.community"
+                className="welcome-option-button"
+                href="/community_guidelines"
+            >
+                {props.messages['welcome.community']}
+                <img
+                    alt="Community Guidelines"
+                    src="/images/learn_about_the_community.svg"
+                />
+            </a>
+            <a
+                id="welcome.create"
+                className="welcome-option-button"
                 href={
                     shouldDisplayOnboarding(props.user, props.permissions) ?
                         '/projects/editor/' :
                         '/projects/editor/?tutorial=getStarted'
                 }
             >
+                {props.messages['welcome.create']}
                 <img
                     alt="Get Started"
-                    src="/images/welcome-learn.png"
-                />
-            </a>
-        </div>
-        <div className="welcome-col green">
-            <h4>
-                <a href="/starter_projects/">
-                    {props.messages['welcome.tryOut']}
-                </a>
-            </h4>
-            <a href="/starter_projects/">
-                <img
-                    alt="Starter Projects"
-                    src="/images/welcome-try.png"
-                />
-            </a>
-        </div>
-        <div className="welcome-col pink">
-            <h4>
-                <a href="/studios/146521/">
-                    {props.messages['welcome.connect']}
-                </a>
-            </h4>
-            <a href="/studios/146521/">
-                <img
-                    alt="Connect"
-                    src="/images/welcome-connect.png"
+                    src="/images/create_a_project.svg"
                 />
             </a>
         </div>
@@ -75,9 +63,9 @@ const Welcome = props => (
 Welcome.propTypes = {
     messages: PropTypes.shape({
         'welcome.welcomeToScratch': PropTypes.string,
-        'welcome.learn': PropTypes.string,
-        'welcome.tryOut': PropTypes.string,
-        'welcome.connect': PropTypes.string
+        'welcome.explore': PropTypes.string,
+        'welcome.community': PropTypes.string,
+        'welcome.create': PropTypes.string
     }),
     onDismiss: PropTypes.func,
     permissions: PropTypes.object,
@@ -87,9 +75,9 @@ Welcome.propTypes = {
 Welcome.defaultProps = {
     messages: {
         'welcome.welcomeToScratch': 'Welcome to Scratch!',
-        'welcome.learn': 'Learn how to make a project in Scratch',
-        'welcome.tryOut': 'Try out starter projects',
-        'welcome.connect': 'Connect with other Scratchers'
+        'welcome.explore': 'Explore Starter Projects',
+        'welcome.community': 'Learn about the community',
+        'welcome.create': 'Create a Project'
     }
 };
 

src/components/welcome/welcome.scss

@@ -2,76 +2,48 @@
 
 .welcome {
     .box-content {
+        display: flex ;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        flex: 1 1 100%;
+
         padding: 0;
-    }
 
-    .welcome-col {
-        display: inline-block;
-        margin: 10px 15px;
-        width: 150px;
-        height: 253px;
-
-        h4 {
-            margin-top: 12px;
-            padding: 0;
-            font-weight: 200;
-        }
-
-        > a {
-            display: block;
-            margin-top: 20px;
-            margin-bottom: 35px;
-            height: 100px;
-        }
-
-        $color-bars: "h4:before, > a:after";
-
-        #{$color-bars} {
-            display: block;
-            margin: 10px 0;
-            border-radius: 5px;
+        .welcome-banner {
             width: 100%;
-            height: 10px;
-            content: "";
+            font-size: 0.875rem;
+            font-weight: 500;
+            line-height: 1.125rem;
+            text-align: center;
+            color: $ui-cyan-blue;
+            background-color: $ui-light-blue;
+            padding: 0.625rem 0;
         }
 
-        img {
-            display: block;
-            max-width: 133px;
-            max-height: 100px;
-        }
+        .welcome-options {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 1rem;
+            flex-wrap: wrap;
 
-        &.blue {
-            #{$color-bars} {
-                background-color: $ui-blue;
-            }
+            padding: 1.5rem 0;
 
-            a {
-                color: $ui-blue;
-            }
-
-            img {
-                margin-left: 4px;
-            }
-        }
-
-        &.green {
-            #{$color-bars} {
-                background-color: $ui-aqua;
-            }
-
-            a {
-                color: $ui-aqua;
-            }
-        }
-
-        &.pink {
-            #{$color-bars} {
-                background-color: $ui-purple;
-            }
-
-            a {
-                color: $ui-purple;
+            .welcome-option-button {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                gap: 1rem;
+            
+                width: 10rem;
+                height: 13rem;
+            
+                border: 1px solid $ui-border-light-blue;
+                border-radius: 20px;
+            
+                text-align: center;
             }
         }
     }

src/components/youtube-playlist-item/youtube-playlist-item.jsx

@@ -0,0 +1,61 @@
+import React, {useEffect, useState} from 'react';
+import PropTypes from 'prop-types';
+
+import {FormattedMessage} from 'react-intl';
+import api from '../../lib/api';
+import {YoutubeVideoButton} from '../youtube-video-button/youtube-video-button.jsx';
+import Spinner from '../spinner/spinner.jsx';
+
+import './youtube-playlist-item.scss';
+
+export const YoutubePlaylistItem = ({playlistRequestUri, playlistTitleId, onSelectedVideo}) => {
+    const [loading, setLoading] = useState(true);
+    const [playlistVideos, setPlaylistVideos] = useState([]);
+
+    useEffect(() => {
+        api({
+            host: process.env.ROOT_URL,
+            method: 'GET',
+            uri: playlistRequestUri,
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        }, (_err, body, res) => {
+            setLoading(false);
+            if (res.statusCode === 200) {
+                setPlaylistVideos(body);
+            }
+        });
+    }, []);
+
+    return (
+        <div className="playlist">
+            <div className="playlist-title">
+                <FormattedMessage id={playlistTitleId} />
+            </div>
+            {loading ? (
+                <Spinner
+                    className="spinner"
+                    color="transparent-gray"
+                />
+            ) : (
+                <section className="playlist-videos">
+                    {playlistVideos
+                        .map(video => (
+                            <YoutubeVideoButton
+                                key={video.videoId}
+                                onSelectedVideo={onSelectedVideo}
+                                {...video}
+                            />
+                        ))}
+                </section>
+            )}
+        </div>
+    );
+};
+
+YoutubePlaylistItem.propTypes = {
+    playlistRequestUri: PropTypes.string,
+    playlistTitleId: PropTypes.string,
+    onSelectedVideo: PropTypes.func
+};

src/components/youtube-playlist-item/youtube-playlist-item.scss

@@ -0,0 +1,26 @@
+.playlist {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    .playlist-title {
+        display: flex;
+        font-size: 2rem;
+        font-weight: 700;
+        line-height: 2.5rem;
+        text-align: start;
+    }
+
+    .spinner {
+        width: 100%;
+        height: 50px;
+    }
+
+    .playlist-videos {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(13.125rem, auto));
+        justify-content: space-around;
+        align-items: start;
+        gap: 1rem;
+    }
+}

src/components/youtube-video-button/youtube-video-button.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './youtube-video-button.scss';
+
+const parseViewCount = viewCount =>
+    parseInt(viewCount, 10).toLocaleString('en-US', {
+        notation: 'compact',
+        compactDisplay: 'short'
+    });
+
+export const YoutubeVideoButton = ({onSelectedVideo, ...videoData}) => (
+    <div
+        className="youtbe-video-button"
+        // eslint-disable-next-line react/jsx-no-bind
+        onClick={() => onSelectedVideo(videoData.videoId)}
+    >
+        <div className="thumbnail">
+            <img src={videoData.thumbnail} />
+            <div className="duration">{videoData.length}</div>
+        </div>
+        <div className="video-info">
+            <div className="video-title">{videoData.title}</div>
+            <div className="video-metadata">
+                <div className="channel-name">{videoData.channel}</div>
+                <div className="video-statistics">
+                    {`${parseViewCount(videoData.views)} · ${videoData.uploadTime}`}
+                </div>
+            </div>
+            {videoData.hasCC && <img src="/images/ideas/video-cc-label.svg" />}
+        </div>
+    </div>
+);
+
+YoutubeVideoButton.propTypes = {
+    videoId: PropTypes.string,
+    title: PropTypes.string,
+    thumbnail: PropTypes.string,
+    channel: PropTypes.string,
+    uploadTime: PropTypes.string,
+    length: PropTypes.string,
+    views: PropTypes.string,
+    hasCC: PropTypes.bool,
+    onSelectedVideo: PropTypes.func
+};

src/components/youtube-video-button/youtube-video-button.scss

@@ -0,0 +1,70 @@
+@import "../../colors";
+
+.youtbe-video-button {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+
+    width: 13.125rem;
+
+    .thumbnail {
+        position: relative;
+        width: 100%;
+
+        img {
+            position: relative;
+            width: 100%;
+            border-radius: 12px;
+        }
+
+        .duration {
+            position: absolute;
+            z-index: 1;
+            bottom : 0.5rem;
+            right: 0;
+
+            margin: 0.5rem;
+            padding: 0.25rem;
+            border-radius: 4px;
+            background-color: $overlay-gray;
+            color: $type-white;
+
+            font-size: 0.75rem;
+            font-weight: 500;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+        }
+    }
+
+    .video-info {
+        margin-right: 1.5rem;
+        text-align: start;
+
+        .video-title {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            line-height: 1.2rem;
+            max-height: 2.4rem;
+
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            font-weight: 600;
+            font-size: 0.875rem;
+            color: black;
+        }
+
+        .video-metadata {
+            margin: 0.5rem 4rem 0.25rem 0;
+
+            color: $ui-dark-gray;
+            font-size: 0.75rem;
+            font-weight: 500;
+            line-height: 1.125rem;
+        }
+    }
+
+    &:hover {
+        cursor: pointer;
+    }
+}

src/components/youtube-video-modal/youtube-video-modal.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import ReactModal from 'react-modal';
+import PropTypes from 'prop-types';
+import Button from '../forms/button.jsx';
+const classNames = require('classnames');
+
+import './youtube-video-modal.scss';
+
+export const YoutubeVideoModal = ({videoId, onClose = () => {}, className}) => {
+    if (!videoId) return null;
+    return (
+        <ReactModal
+            isOpen={!!videoId}
+            onRequestClose={onClose}
+            className="youtube-video-modal-container"
+            overlayClassName="youtube-video-modal-overlay"
+        >
+            <div
+                className={classNames('cards-modal-header', className)}
+            >
+                <Button
+                    className="close-button"
+                    isCloseType
+                    onClick={onClose}
+                />
+            </div>
+            <iframe
+                className="youtube-player"
+                type="text/html"
+                width="640"
+                height="360"
+                src={`https://www.youtube.com/embed/${videoId}?rel=0&cc_load_policy=1&autoplay=1`}
+                allow="autoplay"
+            />
+        </ReactModal>
+    );
+};
+
+YoutubeVideoModal.defaultProps = {
+    className: 'mint-green'
+};
+
+YoutubeVideoModal.propTypes = {
+    videoId: PropTypes.string,
+    onClose: PropTypes.func,
+    className: PropTypes.string
+};

src/components/youtube-video-modal/youtube-video-modal.scss

@@ -0,0 +1,60 @@
+@import "../../colors";
+
+.youtube-video-modal-overlay {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 510;
+
+    background-color: $box-shadow-light-gray;
+    border-color: unset;
+}
+
+.youtube-video-modal-container {
+    display: flex;
+    flex-direction: column;
+
+    background: white;
+    border-radius: 8px;
+    width: 640px;
+
+    &:focus {
+        outline: none;
+        border: none;
+    }
+
+    .cards-modal-header {
+        display: flex;
+        justify-content: end;
+        align-items: center;
+
+        padding: 10px;
+        border-radius: 8px 8px 0 0;
+
+        .close-button {
+            position: unset;
+            margin: 0;
+        }
+
+        &.mint-green {
+            background-color: $ui-mint-green;
+        }
+    }
+
+    .youtube-player {
+        border: 0;
+        border-bottom-left-radius: 8px;
+        border-bottom-right-radius: 8px;
+    }
+}
+
+.youtube-video-modal-container:focus {
+    outline: none;
+    border: none;
+}

src/views/become-a-scratcher/become-a-scratcher.jsx

@@ -14,7 +14,7 @@ import Button from '../../components/forms/button.jsx';
 import Modal from '../../components/modal/base/modal.jsx';
 import NotAvailable from '../../components/not-available/not-available.jsx';
 import WarningBanner from '../../components/title-banner/warning-banner.jsx';
-import OnboardingNavigation from '../../components/onboarding-navigation/onboarding-navigation.jsx';
+import ModalNavigation from '../../components/modal-navigation/modal-navigation.jsx';
 import {
     CommunityGuidelines,
     communityGuidelines
@@ -285,10 +285,11 @@ const BecomeAScratcher = ({user, invitedScratcher, scratcher, sessionStatus}) =>
                             <FormattedMessage id={'becomeAScratcher.toBeAScratcher.communityGuidelines'} />
                         </div>
                     </div>
-                    <OnboardingNavigation
+                    <ModalNavigation
                         onNextPage={nextPage}
                         onBackPage={backPage}
                         nextButtonText={<FormattedMessage id={'becomeAScratcher.buttons.communityGuidelines'} />}
+                        prevButtonText={<FormattedMessage id={'communityGuidelines.buttons.back'} />}
                     />
                 </div>
             );

src/views/guidelines/guidelines.jsx

@@ -1,50 +1,183 @@
 const FormattedMessage = require('react-intl').FormattedMessage;
 const React = require('react');
 
-const Box = require('../../components/box/box.jsx');
-
 const Page = require('../../components/page/www/page.jsx');
 const render = require('../../lib/render.jsx');
+const {useIntl} = require('react-intl');
 
 require('./guidelines.scss');
 
-const Guidelines = () => (
-    <div className="inner guidelines">
-        <Box
-            title={
-                <FormattedMessage id="guidelines.title" />
-            }
-        >
-            <p>
-                <FormattedMessage id="guidelines.header1" />&nbsp;
-                <strong><FormattedMessage id="guidelines.header2" /></strong>&nbsp;
-                <FormattedMessage id="guidelines.header3" />
-            </p>
-            <dl>
-                <dt><FormattedMessage id="guidelines.respectheader" /></dt>
-                <dd><FormattedMessage id="guidelines.respectbody" /></dd>
-                <dt><FormattedMessage id="guidelines.privacyheader" /></dt>
-                <dd><FormattedMessage id="guidelines.privacybody" /></dd>
-                <dt><FormattedMessage id="guidelines.helpfulheader" /></dt>
-                <dd><FormattedMessage id="guidelines.helpfulbody" /></dd>
-                <dt><FormattedMessage id="guidelines.remixheader" /></dt>
-                <dd>
-                    <em><FormattedMessage id="guidelines.remixbody1" /></em><br />
-                    <FormattedMessage id="guidelines.remixbody2" />
-                </dd>
-                <dt><FormattedMessage id="guidelines.honestyheader" /></dt>
-                <dd><FormattedMessage id="guidelines.honestybody" /></dd>
-                <dt><FormattedMessage id="guidelines.friendlyheader" /></dt>
-                <dd><FormattedMessage id="guidelines.friendlybody" /></dd>
-            </dl>
-            <div className="guidelines-footer">
-                <img
-                    alt="sprites"
-                    src="//cdn.scratch.mit.edu/scratchr2/static/images/help/spritesforcommunityguid.png"
-                />
-            </div>
-        </Box>
-    </div>
-);
+const pageSections = [
+    {
+        id: 'respect',
+        headerTextId: 'guidelines.respectheader',
+        contentTexts: [
+            {id: 'guidelines.respectbody1'},
+            {id: 'guidelines.respectbody2'}
+        ],
+        sectionImgSrc: '/svgs/guidelines/illustration_respect.svg',
+        sectionImgAltTextId: 'guidelines.respectSectionImageDescription',
+        buttonImgSrc: '/svgs/guidelines/blobblue_respect.svg',
+        buttonImgAltTextId: 'guidelines.respectButtonImageDescription'
+    },
+    {
+        id: 'privacy',
+        headerTextId: 'guidelines.privacyheader',
+        contentTexts: [
+            {id: 'guidelines.privacybody1'},
+            {id: 'guidelines.privacybody2'}
+        ],
+        sectionImgSrc: '/svgs/guidelines/illustration_safe.svg',
+        sectionImgAltTextId: 'guidelines.privacySectionImageDescription',
+        buttonImgSrc: '/svgs/guidelines/blobyellow_safe.svg',
+        buttonImgAltTextId: 'guidelines.privacyButtonImageDescription'
+    },
+    {
+        id: 'helpful',
+        headerTextId: 'guidelines.helpfulheader',
+        contentTexts: [
+            {id: 'guidelines.helpfulbody1'},
+            {id: 'guidelines.helpfulbody2'}
+        ],
+        sectionImgSrc: '/svgs/guidelines/illustration_feedback.svg',
+        sectionImgAltTextId: 'guidelines.helpfulSectionImageDescription',
+        buttonImgSrc: '/svgs/guidelines/blobmagenta_feedback.svg',
+        buttonImgAltTextId: 'guidelines.helpfulButtonImageDescription'
+    },
+    {
+        id: 'remix',
+        headerTextId: 'guidelines.remixheader',
+        contentTexts: [
+            {id: 'guidelines.remixbody1'},
+            {id: 'guidelines.remixbody2'}
+        ],
+        sectionImgSrc: '/svgs/guidelines/illustration_remix.svg',
+        sectionImgAltTextId: 'guidelines.remixSectionImageDescription',
+        buttonImgSrc: '/svgs/guidelines/blobgreen_remix.svg',
+        buttonImgAltTextId: 'guidelines.remixButtonImageDescription'
+    },
+    {
+        id: 'honesty',
+        headerTextId: 'guidelines.honestyheader',
+        contentTexts: [
+            {id: 'guidelines.honestybody1'},
+            {id: 'guidelines.honestybody2'}
+        ],
+        sectionImgSrc: '/svgs/guidelines/illustration_honest.svg',
+        sectionImgAltTextId: 'guidelines.honestySectionImageDescription',
+        buttonImgSrc: '/svgs/guidelines/blobpurple_honest.svg',
+        buttonImgAltTextId: 'guidelines.honestyButtonImageDescription'
+    },
+    {
+        id: 'friendly',
+        headerTextId: 'guidelines.friendlyheader',
+        contentTexts: [
+            {id: 'guidelines.friendlybody1'},
+            {id: 'guidelines.friendlybody2'}
+        ],
+        sectionImgSrc: '/svgs/guidelines/illustration_friendly.svg',
+        sectionImgAltTextId: 'guidelines.friendlySectionImageDescription',
+        buttonImgSrc: '/svgs/guidelines/blobpink_friendly.svg',
+        buttonImgAltTextId: 'guidelines.friendlyButtonImageDescription'
+    },
+    {
+        id: 'learn-more',
+        headerTextId: 'guidelines.learnMoreheader',
+        contentTexts: [
+            {
+                id: 'guidelines.learnMorebody1',
+                values: {
+                    a: chunks => (
+                        <a
+                            href="https://resources.scratch.mit.edu/www/guides/en/scratch-community-guide.pdf"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            {chunks}
+                        </a>
+                    )
+                }
+            },
+            {id: 'guidelines.learnMorebody2'}
+        ],
+        sectionImgSrc: '/svgs/guidelines/illustration_learn_more.svg',
+        sectionImgAltTextId: 'guidelines.learnMoreSectionImageDescription'
+    }
+];
 
-render(<Page><Guidelines /></Page>, document.getElementById('app'));
+const Guidelines = () => {
+    const intl = useIntl();
+
+    return (
+        <div className="guidelines-page">
+            <header>
+                <div className="title">
+                    <FormattedMessage id="guidelines.title" />
+                </div>
+                <div className="header1">
+                    <FormattedMessage id="guidelines.header1" />
+                </div>
+                <div className="header2">
+                    <FormattedMessage id="guidelines.header2" />
+                </div>
+            </header>
+            <section className="navigation">
+                <div className="header3">
+                    <FormattedMessage id="guidelines.header3" />
+                </div>
+                <section className="navigation-buttons">
+                    {pageSections
+                        .filter(guide => guide.buttonImgSrc)
+                        .map(({id, headerTextId, buttonImgSrc, buttonImgAltTextId}) => (
+                            <a
+                                key={id}
+                                href={`#${id}`}
+                            >
+                                <img
+                                    alt={intl.formatMessage({id: buttonImgAltTextId})}
+                                    src={buttonImgSrc}
+                                />
+                                <FormattedMessage id={headerTextId} />
+                            </a>
+                        ))}
+                </section>
+            </section>
+            <section className="inner guidelines">
+                {pageSections.map(
+                    ({id, headerTextId, contentTexts, sectionImgSrc, sectionImgAltTextId}, index) => (
+                        <div
+                            id={id}
+                            key={id}
+                            className={`guideline ${
+                                index % 2 === 0 ? 'content-first' : 'image-first'
+                            }`}
+                        >
+                            <div>
+                                <div className="guideline-title">
+                                    <FormattedMessage id={headerTextId} />
+                                </div>
+                                <p className="first-paragraph">
+                                    <FormattedMessage {...contentTexts[0]} />
+                                </p>
+                                <p className="second-paragraph">
+                                    <FormattedMessage {...contentTexts[1]} />
+                                </p>
+                            </div>
+                            <img
+                                alt={intl.formatMessage({id: sectionImgAltTextId})}
+                                src={sectionImgSrc}
+                            />
+                        </div>
+                    )
+                )}
+            </section>
+        </div>
+    );
+};
+
+render(
+    <Page>
+        <Guidelines />
+    </Page>,
+    document.getElementById('app')
+);

src/views/guidelines/guidelines.scss

@@ -1,23 +1,215 @@
 @import "../../colors";
 @import "../../frameless";
 
-.guidelines {
-    .guidelines-footer {
-        margin-top: 1.5rem;
-        text-align: center;
+#view {
+    padding: 0;
+}
+
+.guidelines-page {
+    header {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        background-color: $motion-blue-3;
+        background-image: url('/svgs/guidelines/header_sprinkles_left.svg'), url('/svgs/guidelines/header_sprinkles_right.svg');
+        background-position: left, right;
+        background-repeat: no-repeat;
+
+        padding: 6.25rem 0;
+
+        div {
+            color: $ui-white;
+            text-align: center;
+            font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
+            width: 708px;
+        }
+
+        .title {
+            margin-bottom: 2.25rem;
+            font-size: 2.25rem;
+            font-weight: 700;
+        }
+
+        .header1, .header2 {
+            font-size: 1.5rem;
+            font-weight: 500;
+        }
+
+        .header1 {
+            margin-bottom: 1.5rem;
+        }
     }
 
-    dl {
-        dt {
-            margin-top: 1.5rem;
-        }
-    }
-}
-
-@media #{$medium-and-smaller}{
-    .guidelines-footer {
-        img {
-            display: none;
+    .navigation {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 4.5rem;
+        margin: 6rem 15% 0 15%;
+        padding-bottom: 6rem;
+
+        border-bottom: 1px solid $active-gray;
+        
+        .header3 {
+            font-size: 1.25rem;
+            font-weight: 400;
+            font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
+            text-align: start;
+        }
+
+        .navigation-buttons {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            grid-template-rows: repeat(3, 1fr);
+            grid-auto-flow: column;
+            column-gap: 2.25rem;
+            row-gap: 1rem;
+
+            a {
+                display: flex;
+                align-items: center;
+                gap: 1.875rem;
+
+                padding: 1rem 2rem;
+
+                font-size: 1.125rem;
+                font-weight: 500;
+                font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
+                color: $header-gray;
+                text-align: start;
+                word-wrap: break-word;
+
+                border: 1px solid $box-shadow-light-gray;
+                border-radius: 10px;
+                transition: background 0.5s ease-in-out;
+            }
+
+            a:hover {
+                background-color: $ui-light-grayish-blue;
+            }
+        }
+    }
+
+    .guidelines {
+        display: flex;
+        flex-direction: column;
+        gap: 12rem;
+
+        margin: 6rem auto;
+
+        .guideline {
+            display: flex;
+            align-items: center;
+            gap: 4.5rem;
+            scroll-margin-top: 6rem;
+
+            div, p {
+                font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
+                text-align: start;
+            }
+
+            .guideline-title { 
+                font-size: 1.5rem;
+                font-weight: 500;
+            }
+
+            .first-paragraph { 
+                font-size: 1.25rem;
+                font-weight: 400;
+            }
+
+            .second-paragraph { 
+                font-size: 1rem;
+                font-weight: 400;
+            }
+
+            img {
+                width: $cols4;
+            }
+
+            a {
+                text-decoration: underline;
+            }
+        }
+    
+        .content-first {
+            flex-direction: row;
+        }
+    
+        .image-first {
+            flex-direction: row-reverse;
+        }
+    }
+
+    @media only screen and (max-width: 1024px) {
+        .guidelines {
+            .guideline {
+                flex-direction: column-reverse;
+                gap: 2.25rem;
+                margin: 0 10%;
+            }
+        }
+    }
+
+    @media only screen and (max-width: 768px) {
+        header {
+            background-image: unset;
+            padding: 6.25rem 10%;
+
+            div {
+                width: auto;
+            }
+        }
+    }
+
+    @media only screen and (max-width: 560px) {
+        header {
+            .title {
+                font-size: 2rem;
+            }
+    
+            .header1, .header2 {
+                font-size: 1.25rem;
+            }
+        }
+
+        .navigation {
+            .navigation-buttons {
+                grid-template-columns: repeat(1, 1fr);
+                grid-template-rows: unset;
+                grid-auto-flow: unset;
+            }
+        }
+    }
+
+    @media only screen and (max-width: 360px) {
+        header {
+            .title {
+                font-size: 1.5rem;
+            }
+    
+            .header1, .header2 {
+                font-size: 1rem;
+            }
+        }
+
+        .navigation {
+            .header3 {
+                font-size: 1rem;
+            }
+        }
+
+        .guidelines {
+            .guideline {
+                .guideline-title { 
+                    font-size: 1.25rem;
+                }
+    
+                .first-paragraph { 
+                    font-size: 1.125rem;
+                }
+            }
         }
     }
 }

src/views/guidelines/l10n.json

@@ -1,19 +1,40 @@
 {
-  "guidelines.title": "Scratch Community Guidelines",
+  "guidelines.title": "The Purpose of Scratch Community",
   "guidelines.header1": "Scratch is a friendly and welcoming community for everyone, where people create, share, and learn together.",
   "guidelines.header2": "We welcome people of all ages, races, ethnicities, religions, abilities, sexual orientations, and gender identities.",
   "guidelines.header3": "Help keep Scratch a welcoming, supportive, and creative space for all by following these Community Guidelines:",
   "guidelines.respectheader": "Treat everyone with respect.",
-  "guidelines.respectbody": "Scratchers have diverse backgrounds, interests, identities, and experiences. Everyone on Scratch is encouraged to share things that excite them and are important to them—we hope that you find ways to celebrate your own identity on Scratch, and allow others to do the same. It’s never OK to attack a person or group’s identity or to be unkind to someone about their background or interests.",
+  "guidelines.respectbody1": "Scratchers have diverse backgrounds, interests, identities, and experiences.",
+  "guidelines.respectbody2": "Everyone on Scratch is encouraged to share things that excite them and are important to them—we hope that you find ways to celebrate your own identity on Scratch, and allow others to do the same. It’s never OK to attack a person or group’s identity or to be unkind to someone about their background or interests.",
   "guidelines.privacyheader": "Be safe: keep personal and contact information private.",
-  "guidelines.privacybody": "For safety reasons, don't give out any information that could be used for private communication, in person or online. This includes sharing real last names, phone numbers, addresses, hometowns, school names, email addresses, usernames or links to social media sites, video chatting applications, or websites with private chat functionality.",
+  "guidelines.privacybody1": "For safety reasons, don't give out any information that could be used for private communication, in person or online.",
+  "guidelines.privacybody2": "This includes sharing real last names, phone numbers, addresses, hometowns, school names, email addresses, usernames or links to social media sites, video chatting applications, or websites with private chat functionality.",
   "guidelines.helpfulheader": "Give helpful feedback.",
-  "guidelines.helpfulbody": "Everyone on Scratch is learning. When commenting on a project, remember to say something you like about it, offer suggestions, and be kind, not critical. Please keep comments respectful and avoid spamming or posting chain mail. We encourage you to try new things, experiment, and learn from others.",
+  "guidelines.helpfulbody1": "Everyone on Scratch is learning.",
+  "guidelines.helpfulbody2": "When commenting on a project, remember to say something you like about it, offer suggestions, and be kind, not critical. Please keep comments respectful and avoid spamming or posting chain mail. We encourage you to try new things, experiment, and learn from others.",
   "guidelines.remixheader": "Embrace remix culture.",
   "guidelines.remixbody1": "Remixing is when you build upon someone else’s projects, code, ideas, images, or anything else they share on Scratch to make your own unique creation.",
   "guidelines.remixbody2": "Remixing is a great way to collaborate and connect with other Scratchers. You are encouraged to use anything you find on Scratch in your own creations, as long as you provide credit to everyone whose work you used and make a meaningful change to it. And when you share something on Scratch, you are giving permission to all Scratchers to use your work in their creations, too.",
   "guidelines.honestyheader": "Be honest.",
-  "guidelines.honestybody": "It’s important to be honest and authentic when interacting with others on Scratch, and remember that there is a person behind every Scratch account. Spreading rumors, impersonating other Scratchers or celebrities, or pretending to be seriously ill is not respectful to the Scratch Community.",
+  "guidelines.honestybody1": "It’s important to be honest and authentic when interacting with others on Scratch, and remember that there is a person behind every Scratch account.",
+  "guidelines.honestybody2": "Spreading rumors, impersonating other Scratchers or celebrities, or pretending to be seriously ill is not respectful to the Scratch Community.",
   "guidelines.friendlyheader": "Help keep the site friendly.",
-  "guidelines.friendlybody": "It’s important to keep your creations and conversations friendly and appropriate for all ages. If you think something on Scratch is mean, insulting, too violent, or otherwise disruptive to the community, click “Report” to let us know about it. Please use the “Report” button rather than engaging in fights, spreading rumors about other people’s behavior, or otherwise responding to any inappropriate content. The Scratch Team will look at your report and take the appropriate action."
+  "guidelines.friendlybody1": "It’s important to keep your creations and conversations friendly and appropriate for all ages.",
+  "guidelines.friendlybody2": "If you think something on Scratch is mean, insulting, too violent, or otherwise disruptive to the community, click “Report” to let us know about it. Please use the “Report” button rather than engaging in fights, spreading rumors about other people’s behavior, or otherwise responding to any inappropriate content. The Scratch Team will look at your report and take the appropriate action.",
+  "guidelines.learnMoreheader": "Want to learn more?",
+  "guidelines.learnMorebody1": "<a>Download the guide</a> for more details!",
+  "guidelines.learnMorebody2": "Discover the limitless potential of the Scratch online community with our guides! These valuable resources are designed to help you navigate and thrive as a Scratcher, revealing everything from setting up your profile to connecting with like-minded individuals. Learn how to connect with others, share your unique creations, and find inspiration for your next project.",
+  "guidelines.respectButtonImageDescription": "A blue circle",
+  "guidelines.privacyButtonImageDescription": "A yellow circle",
+  "guidelines.helpfulButtonImageDescription": "A magenta circle",
+  "guidelines.remixButtonImageDescription": "A green circle",
+  "guidelines.honestyButtonImageDescription": "A purple circle",
+  "guidelines.friendlyButtonImageDescription": "A pink circle",
+  "guidelines.respectSectionImageDescription": "A graphic of two hands grasping each other in a handshake, with a pink heart above them.",
+  "guidelines.privacySectionImageDescription": "A graphic of a blue combination lock lock on a yellow background. Inside the lock is the shape of a head with a question mark printed on the face.",
+  "guidelines.helpfulSectionImageDescription": "A graphic of a piece of paper on top of a pink background. On the paper, there is a Scratch project with a white cat on a blue background. A pink pen with a heart on the cap is drawing a heart and a pencil is writing a comment.",
+  "guidelines.remixSectionImageDescription": "A graphic of the Scratch \"remix\" swirl on a green background. Two hands move orange, blue, and purple Scratch blocks around. A paintbrush paints a green streak.",
+  "guidelines.honestySectionImageDescription": "A graphic of a light blue compass on a purple background. There is a pink heart in the \"North\" position.",
+  "guidelines.friendlySectionImageDescription": "A graphic of 5 hands with different skin tones using their pointer and middle fingers to create a star on a pink background with a pink star and yellow star in the center.",
+  "guidelines.learnMoreSectionImageDescription": "A graphic of a box with a green arrow pointing inside of it with stars in the background."
 }

src/views/ideas/ideas.jsx

@@ -1,284 +1,341 @@
-const bindAll = require('lodash.bindall');
 const FormattedMessage = require('react-intl').FormattedMessage;
-const injectIntl = require('react-intl').injectIntl;
 const React = require('react');
+const {useState, useCallback} = require('react');
 
 const Button = require('../../components/forms/button.jsx');
 const FlexRow = require('../../components/flex-row/flex-row.jsx');
-const MasonryGrid = require('../../components/masonrygrid/masonrygrid.jsx');
-const TitleBanner = require('../../components/title-banner/title-banner.jsx');
-const TTTModal = require('../../components/modal/ttt/modal.jsx');
-const TTTTile = require('../../components/ttt-tile/ttt-tile.jsx');
 
 const Page = require('../../components/page/www/page.jsx');
-const intlShape = require('../../lib/intl-shape');
 const render = require('../../lib/render.jsx');
 
-const Tiles = require('./ttt.json');
+const {useIntl} = require('react-intl');
+const {
+    YoutubeVideoModal
+} = require('../../components/youtube-video-modal/youtube-video-modal.jsx');
+const {YoutubePlaylistItem} = require('../../components/youtube-playlist-item/youtube-playlist-item.jsx');
+const {CardsModal} = require('../../components/cards-modal/cards-modal.jsx');
 
 require('./ideas.scss');
 
-class Ideas extends React.Component {
-    constructor (props) {
-        super(props);
-        bindAll(this, [
-            'handleShowTTTModal',
-            'handleHideTTTModal',
-            'renderTiles'
-        ]);
-        this.state = {
-            currentTile: Tiles[0],
-            TTTModalOpen: false
-        };
+const tipsSectionData = [
+    {
+        tipImage: {
+            altTextId: 'ideas.gettingStartedImageDescription',
+            imageSrc: '/images/ideas/getting-started-illustration.svg'
+        },
+        button: {
+            href: '/projects/editor/?tutorial=getStarted',
+            buttonTextId: 'ideas.gettingStartedButtonText'
+        }
+    },
+    {
+        tipImage: {
+            altTextId: 'ideas.seeTutorialsLibraryImageDescription',
+            imageSrc: '/images/ideas/see-tutorials-library.png'
+        },
+        button: {
+            href: '/projects/editor/?tutorial=all',
+            buttonTextId: 'ideas.seeTutorialsLibraryButtonText'
+        }
+    },
+    {
+        tipImage: {
+            altTextId: 'ideas.starterProjectsImageDescription',
+            imageSrc: '/images/ideas/starter-projects-illustration.svg'
+        },
+        button: {
+            href: '/starter_projects',
+            buttonTextId: 'ideas.starterProjectsButton'
+        }
+    },
+    {
+        tipImage: {
+            altTextId: 'ideas.cardsIllustrationDescription',
+            imageSrc: '/images/ideas/cards-illustration.svg'
+        },
+        button: {
+            hrefId: 'cards.scratch-cards-allLink',
+            buttonImageSrc: '/images/ideas/download-icon.svg',
+            buttonTextId: 'ideas.codingCards'
+        }
     }
-    handleShowTTTModal (tile) {
-        // expects translated tile
-        this.setState({
-            currentTile: tile,
-            TTTModalOpen: true
-        });
+];
+
+const physicalIdeasData = [
+    {
+        physicalIdeasImage: {
+            imageSrc: '/images/ideas/micro-bit.png',
+            imageClass: 'micro-bit'
+        },
+        physicalIdeasDescription: {
+            headerId: 'ideas.microBitHeader',
+            bodyId: 'ideas.microBitBody',
+            hrefId: 'cards.microbit-cardsLink',
+            buttonImageSrc: '/images/ideas/download-icon.svg',
+            buttonTextId: 'ideas.codingCards'
+        }
+    },
+    {
+        physicalIdeasImage: {
+            imageSrc: '/images/ideas/make-board.svg',
+            imageClass: 'makey-makey-img'
+        },
+        physicalIdeasDescription: {
+            headerId: 'ideas.makeyMakeyHeader',
+            bodyId: 'ideas.makeyMakeyBody',
+            hrefId: 'cards.makeymakey-cardsLink',
+            buttonImageSrc: '/images/ideas/download-icon.svg',
+            buttonTextId: 'ideas.codingCards'
+        }
     }
-    handleHideTTTModal () {
-        this.setState({
-            TTTModalOpen: false
-        });
-    }
-    renderTiles () {
-        return Tiles.map((tile, key) => {
-            const translatedTile = {
-                tutorialUrl: `/projects/editor/?tutorial=${tile.tutorialUrl}`,
-                modalImage: tile.modalImage,
-                modalImageDescription: this.props.intl.formatMessage({id: tile.modalImageDescription}),
-                description: this.props.intl.formatMessage({id: tile.description}),
-                guideUrl: this.props.intl.formatMessage({id: tile.guideUrl}),
-                thumbImage: tile.thumbImage,
-                thumbImageDescription: this.props.intl.formatMessage({id: tile.thumbImageDescription}),
-                title: this.props.intl.formatMessage({id: tile.title}),
-                cardsUrl: this.props.intl.formatMessage({id: tile.cardsUrl})
-            };
-            return (
-                <TTTTile
-                    key={key}
-                    onClick={() => { // eslint-disable-line react/jsx-no-bind
-                        this.handleShowTTTModal(translatedTile);
-                    }}
-                    {...translatedTile}
+];
+
+const playlists = {
+    'sprites-and-vectors': 'ideas.spritesAndVector',
+    'tips-and-tricks': 'ideas.tipsAndTricks',
+    'advanced-topics': 'ideas.advancedTopics'
+};
+
+const Ideas = () => {
+    const intl = useIntl();
+    const [youtubeVideoId, setYoutubeVideoId] = useState('');
+    const [isCardsModalOpen, setCardsModalOpen] = useState(false);
+
+    const onCloseVideoModal = useCallback(() => setYoutubeVideoId(''), [setYoutubeVideoId]);
+    const onSelectedVideo = useCallback(
+        videoId => setYoutubeVideoId(videoId),
+        [setYoutubeVideoId]
+    );
+
+    const onCardsModalOpen = useCallback(() => setCardsModalOpen(true), [isCardsModalOpen]);
+    const onCardsModalClose = useCallback(() => setCardsModalOpen(false), [isCardsModalOpen]);
+
+    return (
+        <div>
+            <div className="banner-wrapper">
+                <img
+                    alt={intl.formatMessage({id: 'ideas.headerImageDescription'})}
+                    src="/images/ideas/banner.svg"
                 />
-            );
-        });
-    }
-    render () {
-        return (
-            <div>
-                <div className="banner-wrapper">
-                    <TitleBanner className="masthead ideas-banner">
-                        <div className="title-banner-p">
-                            <img
-                                alt={this.props.intl.formatMessage({id: 'ideas.headerImageDescription'})}
-                                src="/images/ideas/masthead-illustration.svg"
-                            />
-                            <h1 className="title-banner-h1">
-                                <FormattedMessage id="ideas.headerMessage" />
-                            </h1>
-                            <a href="/projects/editor/?tutorial=all">
-                                <Button className="banner-button">
-                                    <img
-                                        alt=""
-                                        src="/images/ideas/bulb-yellow-icon.svg"
-                                    />
-                                    <FormattedMessage id="ideas.headerButtonMessage" />
-                                </Button>
-                            </a>
-                        </div>
-                    </TitleBanner>
-                </div>
-                <div className="tips-getting-started">
-                    <div className="inner">
-                        <FlexRow
-                            as="section"
-                            className="tips-info-section tips-left"
-                        >
-                            <div className="ideas-image">
-                                <img
-                                    alt={this.props.intl.formatMessage({id: 'ideas.gettingStartedImageDescription'})}
-                                    src="/images/ideas/getting-started-illustration.svg"
-                                />
-                            </div>
-                            <div>
-                                <h2>
-                                    <FormattedMessage id="ideas.gettingStartedTitle" />
-                                </h2>
-                                <p>
-                                    <FormattedMessage id="ideas.gettingStartedText" />
-                                </p>
-                                <a href="/projects/editor/?tutorial=getStarted">
-                                    <Button className="ideas-button">
-                                        <img
-                                            alt=""
-                                            src="/images/ideas/try-it-icon.svg"
-                                        />
-                                        <FormattedMessage id="ideas.tryIt" />
-                                    </Button>
-                                </a>
-                            </div>
-                        </FlexRow>
-                    </div>
-                </div>
-                <div className="tips-activity-guides">
-                    <div className="inner">
-                        <section className="ttt-section">
-                            <div className="ttt-head">
-                                <h2>
-                                    <FormattedMessage id="ideas.activityGuidesTitle" />
-                                </h2>
-                                <p>
-                                    <FormattedMessage id="ideas.activityGuidesText" />
-                                </p>
-                            </div>
-                            <MasonryGrid >
-                                {this.renderTiles()}
-                            </MasonryGrid>
-                            <TTTModal
-                                isOpen={this.state.TTTModalOpen}
-                                onRequestClose={this.handleHideTTTModal}
-                                {...this.state.currentTile}
-                            />
-                            <a
-                                className="wide-button"
-                                href="/projects/editor/?tutorial=all"
-                            >
-                                <Button className="ideas-button wide-button">
-                                    <FormattedMessage id="ideas.seeAllTutorials" />
-                                </Button>
-                            </a>
-                        </section>
-                    </div>
-                </div>
-                <div>
-                    <div className="inner">
-                        <FlexRow
-                            as="section"
-                            className="tips-info-section cards-info ideas-all-cards"
-                        >
-                            <div className="tips-info-body">
-                                <h2>
-                                    <FormattedMessage id="ideas.cardsTitle" />
-                                </h2>
-                                <p>
-                                    <FormattedMessage id="ideas.cardsText" />
-                                </p>
-                                <a
-                                    href={this.props.intl.formatMessage({
-                                        id: 'cards.scratch-cards-allLink'
-                                    })}
-                                    rel="noopener noreferrer"
-                                    target="_blank"
-                                >
-                                    <Button className="ideas-button">
-                                        <img
-                                            alt=""
-                                            src="/images/ideas/download-icon.svg"
-                                        />
-                                        <FormattedMessage id="general.downloadPDF" />
-                                    </Button>
-                                </a>
-                            </div>
-                            <div className="tips-info-body tips-illustration">
-                                <img
-                                    alt={this.props.intl.formatMessage({id: 'ideas.cardsIllustrationDescription'})}
-                                    src="/images/ideas/cards-illustration.svg"
-                                />
-                            </div>
-                        </FlexRow>
+                <div className="banner-description">
+                    <div className="title">
+                        <FormattedMessage id="ideas.headerTitle" />
                     </div>
+                    <p>
+                        <FormattedMessage
+                            id="ideas.headerDescription"
+                            values={{a: chunks => <a href="https://scratch.mit.edu/projects/1093752362/">{chunks}</a>}}
+                        />
+                    </p>
                 </div>
+            </div>
+            <div className="tips">
                 <div className="inner">
-                    <div className="tips-divider" />
-                </div>
-                <div>
-                    <div className="inner">
-                        <FlexRow
-                            as="section"
-                            className="ideas-starter tips-info-section tips-left"
-                        >
-                            <div className="ideas-image">
-                                <img
-                                    alt={this.props.intl.formatMessage({id: 'ideas.starterProjectsImageDescription'})}
-                                    src="/images/ideas/starter-projects-illustration.svg"
-                                />
-                            </div>
-                            <div className="tips-info-body">
-                                <h2>
-                                    <FormattedMessage id="ideas.starterProjectsTitle" />
-                                </h2>
-                                <p>
-                                    <FormattedMessage id="ideas.starterProjectsText" />
-                                </p>
-                                <p>
-                                    <a href="/starter_projects">
-                                        <Button className="ideas-button">
-                                            <FormattedMessage id="ideas.starterProjectsButton" />
-                                        </Button>
-                                    </a>
-                                </p>
-                            </div>
-                        </FlexRow>
+                    <div className="section-header">
+                        <FormattedMessage id="ideas.startHereText" />
                     </div>
+                    <section className="tips-section">
+                        {tipsSectionData.map((tipData, index) => (
+                            <div
+                                key={index}
+                                className="tip"
+                            >
+                                <img
+                                    alt={intl.formatMessage({
+                                        id: tipData.tipImage.altTextId
+                                    })}
+                                    src={tipData.tipImage.imageSrc}
+                                    className="tips-img"
+                                />
+                                <a
+                                    href={
+                                        tipData.button.href ?
+                                            tipData.button.href :
+                                            intl.formatMessage({
+                                                id: tipData.button.hrefId
+                                            })
+                                    }
+                                    {...(tipData.button.hrefId ?
+                                        {target: '_blank', rel: 'noopener noreferrer'} :
+                                        {})}
+                                >
+                                    <Button className="tips-button">
+                                        {tipData.button.buttonImageSrc && (
+                                            <img src={tipData.button.buttonImageSrc} />
+                                        )}
+                                        <FormattedMessage id={tipData.button.buttonTextId} />
+                                    </Button>
+                                </a>
+                            </div>
+                        ))}
+                    </section>
                 </div>
-                <div className="gray-area">
-                    <div className="inner">
-                        <FlexRow
-                            as="section"
-                            className="tips-info-section mod-align-top"
+            </div>
+            <div className="youtube-videos">
+                <div className="inner">
+                    <div className="section-header">
+                        <img src="/images/ideas/youtube-icon.svg" />
+                        <div>
+                            <div className="section-title">
+                                <FormattedMessage id="ideas.scratchYouTubeChannel" />
+                            </div>
+                            <div className="section-description">
+                                <FormattedMessage
+                                    id="ideas.scratchYouTubeChannelDescription"
+                                    values={{
+                                        a: chunks => (
+                                            <a href="https://www.youtube.com/@ScratchTeam">
+                                                {chunks}
+                                            </a>
+                                        )
+                                    }}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                    <section className="playlists">
+                        {Object.keys(playlists).map(playlistKey => (
+                            <YoutubePlaylistItem
+                                key={playlistKey}
+                                playlistRequestUri={`/ideas/videos/${playlistKey}`}
+                                playlistTitleId={playlists[playlistKey]}
+                                onSelectedVideo={onSelectedVideo}
+                            />
+                        ))}
+                        <YoutubeVideoModal
+                            videoId={youtubeVideoId}
+                            onClose={onCloseVideoModal}
+                        />
+                    </section>
+                    <div
+                        className="download-cards"
+                    >
+                        <Button
+                            className="pass"
+                            onClick={onCardsModalOpen}
                         >
-                            <div className="tips-info-body mod-narrow">
-                                <img
-                                    className="tips-icon"
-                                    alt=""
-                                    src="/images/tips/download-icon.svg"
-                                />
-                                <h3>
-                                    <FormattedMessage id="ideas.desktopEditorHeader" />
-                                </h3>
-                                <p>
-                                    <FormattedMessage
-                                        id="ideas.desktopEditorBodyHTML"
-                                        values={{a: chunks => <a href="/download">{chunks}</a>}}
-                                    />
-                                </p>
-                            </div>
-                            <div className="tips-info-body mod-narrow">
-                                <img
-                                    className="tips-icon"
-                                    alt=""
-                                    src="/images/tips/question-icon.svg"
-                                />
-                                <h3>
-                                    <FormattedMessage id="ideas.questionsHeader" />
-                                </h3>
-                                <p>
-                                    <FormattedMessage
-                                        id="ideas.questionsBodyHTML"
-                                        values={{
-                                            faq: chunks => <a href="/info/faq">{chunks}</a>,
-                                            forum: chunks => <a href="/discuss/7/">{chunks}</a>
-                                        }}
-                                    />
-                                </p>
-                            </div>
-                        </FlexRow>
+                            <img src="/images/ideas/download-icon.svg" />
+                        </Button>
+                        <FormattedMessage
+                            id="ideas.downloadGuides"
+                            values={{
+                                strong: chunks => <strong>{chunks}</strong>,
+                                a: chunks => <a onClick={onCardsModalOpen}>{chunks}</a>
+                            }}
+                        />
+                        <CardsModal
+                            isOpen={isCardsModalOpen}
+                            onClose={onCardsModalClose}
+                        />
                     </div>
                 </div>
             </div>
-        );
-    }
-}
-
-Ideas.propTypes = {
-    intl: intlShape
+            <div className="physical-ideas">
+                <div className="inner">
+                    <div className="section-header">
+                        <FormattedMessage id="ideas.physicalPlayIdeas" />
+                    </div>
+                    <FlexRow
+                        as="section"
+                        className="physical-ideas-section"
+                    >
+                        {physicalIdeasData.map((physicalIdea, index) => (
+                            <div
+                                key={index}
+                                className="physical-idea"
+                            >
+                                <img
+                                    src={physicalIdea.physicalIdeasImage.imageSrc}
+                                    className={physicalIdea.physicalIdeasImage.imageClass}
+                                />
+                                <div className="physical-idea-description">
+                                    <h3>
+                                        <FormattedMessage
+                                            id={physicalIdea.physicalIdeasDescription.headerId}
+                                        />
+                                    </h3>
+                                    <p>
+                                        <FormattedMessage
+                                            id={physicalIdea.physicalIdeasDescription.bodyId}
+                                        />
+                                    </p>
+                                    <a
+                                        href={intl.formatMessage({
+                                            id: physicalIdea.physicalIdeasDescription.hrefId
+                                        })}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                    >
+                                        <Button className="tips-button">
+                                            <img
+                                                src={
+                                                    physicalIdea.physicalIdeasDescription.buttonImageSrc
+                                                }
+                                            />
+                                            <FormattedMessage
+                                                id={
+                                                    physicalIdea.physicalIdeasDescription.buttonTextId
+                                                }
+                                            />
+                                        </Button>
+                                    </a>
+                                </div>
+                            </div>
+                        ))}
+                    </FlexRow>
+                </div>
+            </div>
+            <div className="gray-area">
+                <div className="inner">
+                    <FlexRow
+                        as="section"
+                        className="tips-info-section"
+                    >
+                        <div className="tips-info-body mod-narrow">
+                            <img
+                                className="tips-icon"
+                                alt=""
+                                src="/images/tips/download-icon.svg"
+                            />
+                            <h3>
+                                <FormattedMessage id="ideas.desktopEditorHeader" />
+                            </h3>
+                            <p>
+                                <FormattedMessage
+                                    id="ideas.desktopEditorBodyHTML"
+                                    values={{a: chunks => <a href="/download">{chunks}</a>}}
+                                />
+                            </p>
+                        </div>
+                        <div className="tips-info-body mod-narrow">
+                            <img
+                                className="tips-icon"
+                                alt=""
+                                src="/images/tips/question-icon.svg"
+                            />
+                            <h3>
+                                <FormattedMessage id="ideas.questionsHeader" />
+                            </h3>
+                            <p>
+                                <FormattedMessage
+                                    id="ideas.questionsBodyHTML"
+                                    values={{
+                                        faq: chunks => <a href="/info/faq">{chunks}</a>,
+                                        forum: chunks => <a href="/discuss/7/">{chunks}</a>
+                                    }}
+                                />
+                            </p>
+                        </div>
+                    </FlexRow>
+                </div>
+            </div>
+        </div>
+    );
 };
 
-const WrappedIdeas = injectIntl(Ideas);
-
 render(
-    <Page><WrappedIdeas /></Page>, document.getElementById('app'));
+    <Page>
+        <Ideas />
+    </Page>,
+    document.getElementById('app')
+);

src/views/ideas/ideas.scss

@@ -9,167 +9,265 @@ $base-bg: $ui-white;
 }
 
 .banner-wrapper {
-    background: $ui-aqua bottom right url("/images/ideas/right-juice.png") no-repeat;
-}
-
-.ideas-banner {
-    margin-bottom: 0;
-    background: bottom left url("/images/ideas/left-juice.png") no-repeat;
-}
-
-.ttt-section {
     display: flex;
-    margin: 0 auto;
-    text-align: center;
-    justify-content: center;
     flex-wrap: wrap;
+    justify-content: center;
     align-items: center;
-}
+    gap: 2rem;
+    padding: 3rem 0;
+    background-color: $ui-aqua;
 
-.tips-divider {
-    border-top: 1px solid $ui-gray;
-    width: 100%;
-}
+    .banner-description {
+        display: flex;
+        flex-direction: column;
+        text-align: start;
+        max-width: 27rem;
 
-.tips-banner-image {
-    max-width: calc(100% - 2rem);
-}
+        .title {
+            font-size: 2rem;
+            font-weight: 700;
+            line-height: 2.5rem;
+            color: $ui-white;
+        }
 
-.banner-button {
-    background-color: $ui-white;
-    color: $ui-aqua;
-    font-size: 1rem;
+        p {
+            font-size: 1rem;
+            font-weight: 400;
+            line-height: 1.5rem;
+            color: $ui-white;
 
-    img {
-        margin-right: 1rem;
-        height: 1.5rem;
-        vertical-align: middle;
-    }
-
-    a {
-        color: $ui-white;
-    }
-
-    span {
-      vertical-align: middle;
+            a {
+                font-weight: 700;
+                text-decoration: underline;
+                color: $ui-purple-light;
+            }
+        }
     }
 }
 
-.ideas-button {
-    margin-right: .75rem;
-    background-color: $ui-purple-dark;
-    color: $ui-white;
-    font-size: 1rem;
+.tips {
+    .inner {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
 
-    img {
-        margin-right: 1rem;
-        height: 1.5rem;
-        vertical-align: middle;
-    }
-
-    a {
-        color: $ui-white;
-    }
-
-    span {
-      vertical-align: middle;
+        .tips-section {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax($cols3, auto));
+            justify-content: space-around;
+            align-items: center;
+            
+            .tip {
+                display: flex;
+                flex-direction: column;
+    
+                .tips-img {
+                    width: $cols3;
+                    height: 10rem;
+                }
+            }
+        }
     }
 }
 
-.wide-button {
-    width: 100%;
-}
+.youtube-videos {
+    .inner {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        
+        .section-header {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 2.5rem;
+            padding: 4rem 0;
 
-.ideas-all-cards {
-    padding: 5rem 0 !important;
-}
+            div {
+                display: flex;
+                flex-direction: column;
+                gap: 0.5rem;
+                max-width: 25rem;
 
-.ideas-starter {
-    padding: 5rem 0 !important;
-}
+                .section-title {
+                    font-size: 2rem;
+                    font-weight: 700;
+                    line-height: 2.5rem;
+                    text-align: start;
+                }
+    
+                .section-description {
+                    font-size: 1rem;
+                    font-weight: 400;
+                    line-height: 1.5rem;
+                    text-align: start;
 
-.tips-getting-started {
-    background-color: $ui-light-gray;
-    padding-top: 2.5rem;
-}
+                    a {
+                        font-weight: 400;
+                        text-decoration: underline;
+                    }
+                }
+            }
+        }
 
-.tips-left {
-    justify-content: flex-start;
-}
+        .playlists {
+            display: flex;
+            flex-direction: column;
+            gap: 3rem;
+            margin-bottom: 3rem;
+        }
 
-.ideas-image {
-    margin-right: 2rem;
-}
+        .download-cards {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
 
-.tips-activity-guides {
-    background-color: $ui-light-gray;
-    padding-bottom: 2rem;
-}
+            margin-bottom: 3.5rem;
 
-.purchase-button {
-    img {
-        margin-right: 0;
-        margin-left: .75rem;
-        width: 1rem;
-        vertical-align: baseline;
+            .button {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                width: 2rem;
+                height: 2rem;
+            }
+
+            span {
+                font-size: 1rem;
+                line-height: 1.5rem;
+                text-align: start;
+
+                a {
+                    font-weight: 400;
+                    text-decoration: underline;
+                }
+            }
+        }
     }
 }
 
-.tips-info-section {
-    padding: 2.5rem 0;
-    width: 100%;
-    flex-wrap: nowrap;
-}
+.physical-ideas {
+    .inner {
+        display: flex;
+        flex-direction: column;
+        gap: 1.5rem;
 
-.tips-info-body {
-    text-align: left;
-}
+        .physical-ideas-section {
+            justify-content: space-between;
+            align-items: flex-start;
+            gap: 5.5rem;
 
-.tips-cards-buttons {
-    a {
-        white-space: normal;
+            .physical-idea {
+                display: flex;
+                gap: 1.5rem;
+                text-align: start;
+
+                .makey-makey-img {
+                    height: 6.5rem;
+                }
+
+                .micro-bit {
+                    height: 8.5rem;
+                }
+
+                .physical-idea-description {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-between;
+                    align-items: flex-start;
+
+                    h3 {
+                        font-size: 1.3rem;
+                    }
+                    
+                    p {
+                        margin: 0;
+                        font-size: 1rem;
+                        font-weight: 400;
+                        line-height: 1.5rem;
+                    }
+        
+                    .tips-button {
+                        width: auto;
+                        padding: 0.75rem;
+                    }
+                }
+            }
+
+            .physical-idea:first-child {
+                flex: 1.5;
+            }
+
+            .physical-idea:last-child {
+                flex: 2;
+            }
+        }
     }
 }
 
+.tips, .physical-ideas {
+    display: flex;
+    justify-content: center;
+    padding: 3rem 0;
+    background-color: $gray-50;
+}
+
 .gray-area {
     background-color: $ui-gray;
+
+    .tips-info-section {
+        padding: 2.5rem 0;
+        width: 100%;
+        flex-wrap: nowrap;
+
+        .tips-info-body {
+            text-align: left;
+        }
+    }
+
+    img.tips-icon {
+        height: 1.75rem;
+    }
 }
 
-img.tips-icon {
-    height: 1.75rem;
+.tips, .physical-ideas {
+    .section-header {
+        display: flex;
+        font-size: 2rem;
+        font-weight: 700;
+        line-height: 2.5rem;
+        text-align: start;
+    }
 }
+
+.tips-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5rem;
+    
+    font-weight: 700;
+    line-height: 1.25rem;
+
+    width: 100%;
+    padding: 0.5rem 0;
+
+    border-radius: 4px;
+}
+
 //4 columns
 @media #{$small} {
-
-    .title-banner {
-        &.masthead {
-            padding-bottom: 1.25rem;
-
-            p {
-                max-width: $cols4;
-            }
+    .banner-wrapper {
+        img {
+            display: none;
         }
     }
-
-    .ttt-head {
-
-        p {
-            max-width: $cols4;
-        }
-    }
-
-    //put the image first if in 4-column
+    
     .tips-info-body {
         max-width: $cols4;
         text-align: center;
 
-        &.tips-illustration {
-            order: -1;
-            img {
-                width: $cols4;
-            }
-        }
-
         .button {
             width: 100%;
         }
@@ -178,82 +276,33 @@ img.tips-icon {
 
 //6 columns
 @media #{$medium} {
-    .title-banner {
-        &.masthead {
-
-            p {
-                max-width: $cols6;
-            }
-        }
-    }
-
-    .ttt-head {
-        p {
-            max-width: $cols6;
-        }
-    }
-
-    .tips-info-body.tips-illustration {
-        order: -1;
-        img {
-            width: $cols4;
-        }
-    }
-
     .tips-info-body {
         max-width: $cols4;
         text-align: center;
     }
 }
 
-
 //8 columns
 @media #{$intermediate} {
-    .title-banner {
-        &.masthead {
-            padding-bottom: 2rem;
-
-            p {
-                max-width: $cols6;
-            }
-        }
-    }
-
-    .ttt-head {
-        p {
-            max-width: $cols6;
-        }
-    }
-
-    .tips-info-section {
-        &.mod-align-top {
-            align-items: flex-start;
-        }
-    }
-
     .tips-info-body {
         max-width: $cols4;
     }
 }
 
-// 12 columns
-@media #{$big} {
-    .title-banner {
-        &.masthead {
-            padding-bottom: 1.25rem;
-
-            p {
-                max-width: $cols8;
+@media #{$intermediate-and-smaller}{
+    .physical-ideas {
+        .inner {
+            .physical-ideas-section {
+                .physical-idea:first-child {
+                    flex: 2;
+                }
             }
         }
     }
+}
 
-    .ttt-head {
-        p {
-            max-width: $cols8;
-        }
-    }
-
+// 12 columns
+@media #{$big} {
     .tips-info-section {
         &.mod-align-top {
             align-items: flex-start;

src/views/ideas/l10n-static.json

@@ -2,6 +2,8 @@
     "cards.scratch-cards-allLink": "https://resources.scratch.mit.edu/www/cards/en/scratch-cards-all.pdf",
     "cards.name-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/name-cards.pdf",
     "cards.animation-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/animation-cards.pdf",
+    "cards.microbit-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/microbit-cards.pdf",
+    "cards.makeymakey-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/makeymakey-cards.pdf",
     "cards.music-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/music-cards.pdf",
     "cards.story-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/story-cards.pdf",
     "cards.chase-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/chase-cards.pdf",
@@ -9,6 +11,8 @@
     "cards.pong-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/pong-cards.pdf",
     "cards.fly-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/fly-cards.pdf",
     "cards.imagine-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/imagine-cards.pdf",
+    "cards.paperplanes-turtlegraphics-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/paperplanes-turtlegraphics-cards.pdf",
+    "cards.facesensing-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/facesensing-cards.pdf",
     "guides.NameGuideLink": "https://resources.scratch.mit.edu/www/guides/en/NameGuide.pdf",
     "guides.AnimateGuideLink": "https://resources.scratch.mit.edu/www/guides/en/AnimateGuide.pdf",
     "guides.MusicGuideLink": "https://resources.scratch.mit.edu/www/guides/en/MusicGuide.pdf",
@@ -17,5 +21,13 @@
     "guides.VideoGuideLink": "https://resources.scratch.mit.edu/www/guides/en/VideoGuide.pdf",
     "guides.PongGuideLink": "https://resources.scratch.mit.edu/www/guides/en/PongGuide.pdf",
     "guides.FlyGuideLink": "https://resources.scratch.mit.edu/www/guides/en/FlyGuide.pdf",
-    "guides.ImagineGuideLink": "https://resources.scratch.mit.edu/www/guides/en/ImagineGuide.pdf"
+    "guides.ImagineGuideLink": "https://resources.scratch.mit.edu/www/guides/en/ImagineGuide.pdf",
+    "guides.ScratchLearningResource_CreateOriginalSpriteLink": "https://resources.scratch.mit.edu/www/guides/en/ScratchLearningResource_CreateOriginalSprite.pdf",
+    "guides.ScratchLearningResource_RemixRe-imagineSpritesLink": "https://resources.scratch.mit.edu/www/guides/en/ScratchLearningResource_RemixRe-imagineSprites.pdf",
+    "guides.ScratchLearningResource_BringYourDrawingsIntoScratchLink": "https://resources.scratch.mit.edu/www/guides/en/ScratchLearningResource_BringYourDrawingsIntoScratch.pdf",
+    "guides.ScratchLearningResource_SoundsAddRecordText-to-SpeechLink": "https://resources.scratch.mit.edu/www/guides/en/ScratchLearningResource_SoundsAddRecordText-to-Speech.pdf",
+    "guides.ScratchLearningResource_CreateanAssetPackLink": "https://resources.scratch.mit.edu/www/guides/en/ScratchLearningResource_CreateanAssetPack.pdf",
+    "guides.ScratchLearningResource_ConditionalStatementsLink": "https://resources.scratch.mit.edu/www/guides/en/ScratchLearningResource_ConditionalStatements.pdf",
+    "guides.ScratchLearningResource_VariablesandListsLink": "https://resources.scratch.mit.edu/www/guides/en/ScratchLearningResource_VariablesandLists.pdf",
+    "guides.ScratchLearningResource_MyBlocksLink": "https://resources.scratch.mit.edu/www/guides/en/ScratchLearningResource_MyBlocks.pdf"
 }

src/views/ideas/l10n.json

@@ -1,13 +1,13 @@
 {
-    "ideas.headerMessage": "What will you create?",
-    "ideas.headerImageDescription": "Outlandish creations from pixelated unicorns to drumbeat waveforms to levitating tacos to buckets of rainbows.",
+    "ideas.headerTitle": "Looking for a project idea?",
+    "ideas.headerDescription": "Try Scratch’s Project Idea Generator! Pick as many ideas as you’d like. Mix and match ideas! <a>Remix your own</a> idea generator! The possibilities are endless.",
+    "ideas.headerImageDescription": "Scratch cat holding a lightning bulb and a block",
     "ideas.headerButtonMessage": "Choose a tutorial",
-    "ideas.gettingStartedTitle": "Getting Started",
-    "ideas.gettingStartedText": "New to Scratch? Try the Getting Started tutorial.",
+    "ideas.startHereText": "New to Scratch? Start here!",
+    "ideas.gettingStartedButtonText": "Try Getting Started Tutorial",
+    "ideas.seeTutorialsLibraryButtonText": "See Tutorials Library",
     "ideas.gettingStartedImageDescription": "An illustrated boy plants his flag on top of a freshly painted mountaintop.",
-    "ideas.tryIt": "Try it!",
-    "ideas.activityGuidesTitle": "Activity Guides",
-    "ideas.activityGuidesText": "What do you want to make with Scratch? For each activity, you can try the Tutorial, download a set of Coding Cards, or view the Educator Guide.",
+    "ideas.seeTutorialsLibraryImageDescription": "An illustration of three tutorial thumbnails.",
     "ideas.animateANameTitle": "Animate a Name",
     "ideas.animateANameDescription": "Animate the letters of your name, initials, or favorite word.",
     "ideas.animateANameImageDescription": "The name ANYA in all caps and blocked letters is poised to wiggle",
@@ -26,43 +26,47 @@
     "ideas.videoSensingTitle": "Video Sensing",
     "ideas.videoSensingDescription": "Interact with a project using the Video Sensing extension.",
     "ideas.videoSensingImageDescription": "A virtual hand dodges a spurt of flame in an attempt to pet a dragon.",
-    "ideas.seeAllTutorials": "See All Tutorials",
-    "ideas.cardsTitle": "Get the Entire Collection of Coding Cards",
-    "ideas.cardsText": "With the Scratch Coding Cards, you can learn to create interactive games, stories, music, animations, and more!",
     "ideas.cardsIllustrationDescription": "An assortment of fun, animated characters and objects leap out of a stack of cards.",
-    "ideas.starterProjectsTitle": "Starter Projects",
-    "ideas.starterProjectsText": "You can play with Starter Projects and remix them to make your own creations.",
     "ideas.starterProjectsImageDescription": "An illustration of the Scratch Code Editor.",
     "ideas.starterProjectsButton": "Explore Starter Projects",
     "ideas.tryTheTutorial": "Try the tutorial",
     "ideas.codingCards": "Coding Cards",
     "ideas.educatorGuide": "Educator Guide",
+    "ideas.scratchYouTubeChannel": "ScratchTeam channel",
+    "ideas.scratchYouTubeChannelDescription": "This is the official <a>Youtube Channel</a> of Scratch. We share resources, tutorials, and stories about Scratch.",
+    "ideas.spritesAndVector": "Sprites & Vector Drawing",
+    "ideas.tipsAndTricks": "Tips & Tricks",
+    "ideas.advancedTopics": "Advanced Topics",
+    "ideas.physicalPlayIdeas": "Physical Play Ideas",
+    "ideas.microBitHeader": "Have a micro:bit?",
+    "ideas.microBitBody": "Connect your Scratch project to the real world.",
+    "ideas.makeyMakeyHeader": "Have a MakeyMakey?",
+    "ideas.makeyMakeyBody": "Turn anything into a key that connects with your Scratch project!",
     "ideas.desktopEditorHeader": "Scratch App Download",
-    "ideas.desktopEditorBody": "To create projects without an Internet connection, you can <a href=\"/download\">download the Scratch app</a>.",
     "ideas.desktopEditorBodyHTML": "To create projects without an Internet connection, you can <a>download the Scratch app</a>.",
     "ideas.questionsHeader": "Questions",
-    "ideas.questionsBody": "Have more questions? See the <a href=\"/info/faq\">Frequently Asked Questions</a> or visit the <a href=\"/discuss/7/\">Help with Scripts Forum</a>.",
     "ideas.questionsBodyHTML": "Have more questions? See the <faq>Frequently Asked Questions</faq> or visit the <forum>Help with Scripts Forum</forum>.",
-    "ideas.cardsPurchase": "Purchase Printed Set",
     "ideas.MakeItFlyTitle": "Make It Fly",
     "ideas.MakeItFlyDescription": "Choose any character and make it fly!",
     "ideas.MakeItFlyImageDescription": "The scratch cat flies over the skyline. Alongside a flying taco.",
-    "ideas.RaceTitle": "Race to the Finish",
-    "ideas.RaceDescription": "Make a game where two characters race each other.",
-    "ideas.HideAndSeekTitle": "Hide and Seek",
-    "ideas.HideAndSeekDescription": "Make a hide-and-seek game with characters that appear and disappear.",
-    "ideas.FashionTitle": "Fashion Game",
-    "ideas.FashionDescription": "Make a game where you dress a character with different clothes and styles.",
     "ideas.PongTitle": "Pong Game",
     "ideas.PongDescription": "Make a bouncing ball game with sounds, points, and other effects.",
     "ideas.PongImageDescription": "A ball bounces off a digital paddle.",
     "ideas.ImagineTitle": "Imagine a World",
     "ideas.ImagineDescription": "Imagine a world where anything is possible.",
     "ideas.ImagineImageDescription": "A girl stands proudly in front of a thought bubble as big as the Earth and as intricate as butterfly wings.",
-    "ideas.DanceTitle": "Let's Dance",
-    "ideas.DanceDescription": "Design an animated dance scene with music and dance moves.",
-    "ideas.CatchTitle": "Catch Game",
-    "ideas.CatchDescription": "Make a game where you catch things falling from the sky.",
-    "ideas.VirtualPetTitle": "Virtual Pet",
-    "ideas.VirtualPetDescription": "Create an interactive pet that can eat, drink, and play."
+    "ideas.modalTitle": "Written Guides",
+    "ideas.modalSectionTitleSpritesAndSounds": "Sprites and Sounds",
+    "ideas.modalSectionTitleAdvancedTopics": "Advanced Topics",
+    "ideas.modalCardNameCreateSprite": "Create a Sprite with the Paint Editor",
+    "ideas.modalCardNameRemix": "Remix and Re-Imagine Sprites",
+    "ideas.modalCardNameBringDrawingsIntoScratch": "Bring Your Drawings Into Scratch",
+    "ideas.modalCardNameSound": "Sound: Add, Record, and Use Text to Speech Blocks",
+    "ideas.modalCardNameCreateAsset": "Create Your Own Asset Pack",
+    "ideas.modalCardNameConditionalStatements": "Conditional Statements",
+    "ideas.modalCardNameVariablesLists": "Variables and Lists",
+    "ideas.modalCardNameCustomBlocks": "Make Your Custom My Blocks",
+    "ideas.modalCardNameFaceSensing": "Scratch Lab Face Sensing Coding Cards",
+    "ideas.modalCardNameComputationalConcepts": "Turtle Graphics Coding Cards",
+    "ideas.downloadGuides": "<strong>Computer doesn’t allow Youtube?</strong> Download <a>written guides</a> for these topics."
 }

src/views/splash/l10n.json

@@ -52,9 +52,9 @@
     "hocbanner.animateACharacter": "Animate a Character",
 
     "welcome.welcomeToScratch": "Welcome to Scratch!",
-    "welcome.learn": "Learn how to make a project in Scratch",
-    "welcome.tryOut": "Try out starter projects",
-    "welcome.connect": "Connect with other Scratchers",
+    "welcome.explore": "Explore Starter Projects",
+    "welcome.community": "Learn about the community",
+    "welcome.create": "Create a Project",
 
     "activity.seeUpdates": "This is where you will see updates from Scratchers you follow",
     "activity.checkOutScratchers": "Check out some Scratchers you might like to follow",

src/views/splash/presentation.jsx

@@ -335,9 +335,9 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
             'general.viewAll': formatMessage({id: 'general.viewAll'}),
             'news.scratchNews': formatMessage({id: 'news.scratchNews'}),
             'welcome.welcomeToScratch': formatMessage({id: 'welcome.welcomeToScratch'}),
-            'welcome.learn': formatMessage({id: 'welcome.learn'}),
-            'welcome.tryOut': formatMessage({id: 'welcome.tryOut'}),
-            'welcome.connect': formatMessage({id: 'welcome.connect'}),
+            'welcome.explore': formatMessage({id: 'welcome.explore'}),
+            'welcome.community': formatMessage({id: 'welcome.community'}),
+            'welcome.create': formatMessage({id: 'welcome.create'}),
             'intro.aboutScratch': formatMessage({id: 'intro.aboutScratch'}),
             'intro.forEducators': formatMessage({id: 'intro.forEducators'}),
             'intro.forParents': formatMessage({id: 'intro.forParents'}),

src/views/splash/splash.scss

@@ -33,6 +33,11 @@
             }
         }
 
+        .box.welcome {
+            display: flex;
+            flex-direction: column;
+        }
+
         .news {
             width: 40%;
 

static/images/create_a_project.svg

@@ -0,0 +1,46 @@
+<svg width="119" height="101" viewBox="0 0 119 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.7745 91.7526C50.5099 98.0145 53.57 98.4372 82.0745 91.0708C89.6509 89.1123 107.48 86.4019 115.459 64.3897C120.661 50.0391 113.329 17.8268 85.1089 13.7824C67.6263 11.2781 56.3024 5.00132 28.5431 13.347C0.783839 21.6905 2.94026 85.8454 30.7745 91.7526Z" fill="#AEDDD2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 23.7639C0.0085657 23.7405 3.05796 15.2631 17.5704 10.1419C32.085 5.02273 39.8434 9.68943 39.8669 9.70217L67.093 0.101138C68.0117 -0.221728 69.0181 0.254075 69.3458 1.1632L76.4125 20.8793C76.738 21.7884 76.2604 22.7889 75.3418 23.1139L29.8429 39.1595L28.8707 39.5036C28.4296 39.6587 28.0698 39.9815 27.8685 40.4L26.3545 43.5586C26.1532 43.977 25.7935 44.2999 25.3523 44.4549L20.0844 46.3135C19.6433 46.4686 19.1593 46.4452 18.7375 46.2456L15.5532 44.7438C15.1313 44.5442 14.6473 44.5208 14.2062 44.6759L13.234 45.02L9.91052 46.1925C8.99399 46.5153 7.98538 46.0417 7.65988 45.1304L0 23.7639Z" fill="#F9A11B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.676 23.7594C32.3035 23.205 33.3678 23.1498 34.053 23.6362C34.7361 24.1227 35.8026 24.0674 36.43 23.513L36.6013 26.6928C35.9717 27.2472 34.9074 27.3046 34.2243 26.816C33.5412 26.3296 32.4769 26.3848 31.8473 26.9392L31.676 23.7594Z" fill="#2EAC4D"/>
+<path d="M35.3185 27.2897C34.8945 27.2897 34.4727 27.1729 34.1365 26.9329C33.5047 26.4847 32.5218 26.5357 31.9415 27.0476C31.8987 27.0837 31.8387 27.0943 31.7873 27.0731C31.7359 27.0518 31.7017 27.003 31.6974 26.9477L31.5261 23.7679C31.5239 23.7233 31.541 23.6808 31.5753 23.6511C32.2499 23.0542 33.3998 22.9947 34.1343 23.5173C34.766 23.9655 35.7489 23.9145 36.3293 23.4026C36.3721 23.3665 36.4299 23.3558 36.4835 23.3771C36.5349 23.3983 36.5691 23.4472 36.5734 23.5024L36.7447 26.6822C36.7469 26.7268 36.7297 26.7693 36.6955 26.799C36.3293 27.124 35.8218 27.2897 35.3185 27.2897ZM33.1236 26.3424C33.5476 26.3424 33.9694 26.4592 34.3056 26.6992C34.9181 27.1347 35.8624 27.0986 36.4471 26.6291L36.295 23.7934C35.6098 24.2246 34.6226 24.2246 33.9651 23.7552C33.3527 23.3197 32.4083 23.3558 31.8237 23.8253L31.9758 26.661C32.3098 26.4507 32.7188 26.3424 33.1236 26.3424Z" fill="#0A8241"/>
+<path d="M31.9179 28.4898C31.8023 28.4898 31.7059 28.4006 31.6995 28.2838L31.4361 23.3813C31.4297 23.2624 31.5218 23.1583 31.6438 23.1519C31.7573 23.1477 31.8687 23.2369 31.8751 23.358L32.1385 28.2604C32.1449 28.3794 32.0528 28.4835 31.9308 28.4898C31.9265 28.4898 31.9222 28.4898 31.9179 28.4898Z" fill="#0A8241"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M41.1776 22.982L39.8821 24.4094L39.9849 26.3275L41.426 27.6126L43.3598 27.5128L44.6553 26.0854L44.5525 24.1673L43.1114 22.8822L41.1776 22.982Z" fill="#E7555B"/>
+<path d="M41.4259 27.757C41.3895 27.757 41.3552 27.7443 41.3274 27.7188L39.8862 26.4337C39.8584 26.4082 39.8391 26.3721 39.8391 26.3339L39.7363 24.4158C39.7363 24.3775 39.747 24.3393 39.7727 24.3117L41.0683 22.8843C41.094 22.8567 41.1304 22.8376 41.1689 22.8354L43.1026 22.7356C43.1412 22.7356 43.1797 22.7462 43.2076 22.7717L44.6488 24.0568C44.6766 24.0823 44.6959 24.1184 44.6959 24.1566L44.7987 26.0747C44.7987 26.113 44.788 26.1512 44.7623 26.1788L43.4667 27.6062C43.441 27.6338 43.4046 27.6529 43.366 27.6551L41.4323 27.7549C41.4323 27.7549 41.4281 27.7549 41.4238 27.7549L41.4259 27.757ZM40.1282 26.2595L41.4794 27.4639L43.2932 27.3704L44.5074 26.0322L44.4111 24.2331L43.0598 23.0287L41.246 23.1243L40.0318 24.4625L40.1282 26.2616V26.2595Z" fill="#961A1D"/>
+<path d="M36.0316 29.4648L100.589 26.4953C101.878 26.4358 102.979 27.2982 103.048 28.4197L105.579 70.0717C105.647 71.1932 104.658 72.1512 103.367 72.2107L38.809 75.1802C37.5199 75.2397 36.4192 74.3773 36.3507 73.2557L33.8195 31.6038C33.751 30.4823 34.7403 29.5243 36.0316 29.4648Z" fill="white"/>
+<g opacity="0.5">
+<path d="M117.507 73.5467C116.312 74.2328 115.065 75.0527 113.271 73.8016C111.474 72.5505 111.234 70.9489 112.076 69.7615C112.915 68.5763 114.018 68.5444 116.312 69.5067C118.607 70.4668 118.704 72.8585 117.507 73.5467Z" fill="#5178BB"/>
+</g>
+<g opacity="0.5">
+<path d="M85.1429 93.7663C86.2414 93.9935 87.4406 94.1677 87.8432 95.8883C88.2458 97.6088 87.5156 98.707 86.3614 98.9725C85.205 99.238 84.524 98.6645 83.661 96.8505C82.798 95.0365 84.0465 93.539 85.1429 93.7663Z" fill="#5178BB"/>
+</g>
+<g opacity="0.5">
+<path d="M87.9653 69.5768C86.9503 70.1609 85.8924 70.8555 84.3677 69.7934C82.843 68.7314 82.6396 67.3698 83.3527 66.363C84.0658 65.3561 85.0016 65.3306 86.9503 66.1463C88.899 66.962 88.9803 68.9926 87.9653 69.5768Z" fill="#5178BB"/>
+</g>
+<g opacity="0.5">
+<path d="M63.521 56.6408C52.4541 48.977 40.0981 54.4339 35.3035 58.1214L36.1301 73.6105C36.1836 74.6173 37.0509 75.3905 38.0659 75.3374L54.1716 74.4835C54.4135 74.4707 54.6512 74.4941 54.8847 74.5578C65.9687 77.5443 87.9633 84.6814 89.9741 90.5525C92.5116 97.9678 115.042 110.292 112.971 89.5265C110.9 68.7611 96.1478 69.3941 100.317 68.3044C102.157 67.8244 112.395 71.2718 107.679 64.653C103.127 58.2658 93.5759 57.4353 89.9741 58.5058C85.7683 61.0781 74.5879 64.3068 63.521 56.643V56.6408Z" fill="#5178BB"/>
+</g>
+<g opacity="0.25">
+<path d="M51.0859 61.1121C42.4367 59.9247 37.5135 67.236 36.1323 71.0382L36.4835 73.6891C36.6099 74.6385 37.4536 75.3289 38.4172 75.2737L54.3066 74.3475C78.5989 80.1889 88.2011 86.8225 89.9635 89.4076C89.9249 91.5763 92.242 96.7549 101.812 100.132C111.382 103.51 113.391 95.8352 113.2 91.5742C111.896 92.1838 107.656 92.3728 101.122 88.2648C92.955 83.1308 103.309 76.8561 99.0517 71.036C94.7967 65.2159 85.8241 70.0101 75.8172 71.036C65.8103 72.062 61.9001 62.5926 51.0859 61.11V61.1121Z" fill="#5178BB"/>
+</g>
+<g opacity="0.5">
+<path d="M75.7872 97.8255C70.5835 97.2286 72.1938 92.6299 67.2493 87.7295C62.3069 82.8313 54.4864 80.5691 56.1032 78.9633C57.7199 77.3595 67.5748 78.6892 72.5193 83.5875C80.0357 91.6209 80.9908 98.4202 75.7872 97.8233V97.8255Z" fill="#5178BB"/>
+</g>
+<path d="M68.3971 60.3942C68.1166 60.3942 67.8704 60.1945 67.8211 59.912C67.7676 59.5955 67.9817 59.296 68.2986 59.2429C69.1317 59.1027 69.9882 58.0045 70.4765 57.1294L63.3627 52.3331C63.095 52.1526 63.0265 51.7936 63.2085 51.5281C63.3905 51.2626 63.7524 51.1946 64.0201 51.3752L71.5579 56.4582C71.7935 56.6175 71.8791 56.9191 71.7613 57.1761C71.2731 58.2467 70.0353 60.1287 68.4935 60.3878C68.4614 60.3942 68.4271 60.3963 68.395 60.3963L68.3971 60.3942Z" fill="#565E77"/>
+<path d="M76.6503 55.0393C75.8258 55.0393 75.0271 54.5061 74.1834 53.9432C73.6437 53.5842 73.087 53.2125 72.5088 52.9661C71.4852 52.5286 70.2431 51.9635 69.4701 51.6046L67.4893 54.2279C67.2965 54.4849 66.9304 54.5359 66.6712 54.3447C66.4121 54.1535 66.3607 53.7903 66.5535 53.5333L68.8212 50.5319L71.0869 47.5305C71.1897 47.3946 71.346 47.3096 71.5173 47.299C71.6886 47.2883 71.8556 47.3521 71.9734 47.4731C72.4424 47.9532 74.0849 49.6461 75.4854 51.2753C77.539 53.665 77.584 54.1684 77.4319 54.5762C77.3355 54.8354 77.1043 55.0053 76.8152 55.0308C76.7595 55.035 76.706 55.0371 76.6503 55.0371V55.0393ZM70.1875 50.6572C70.9562 51.0119 72.0527 51.509 72.9713 51.9019C73.6502 52.1908 74.2797 52.6114 74.8365 52.9831C75.207 53.2295 75.5667 53.4695 75.8944 53.6395C75.1556 52.6156 73.5324 50.7634 71.6115 48.771L70.1875 50.6572Z" fill="#565E77"/>
+<path d="M62.0927 56.5028C61.885 56.5028 61.6815 56.3923 61.5766 56.1969C60.4952 54.1939 61.9385 52.0379 62.8529 51.1776C63.0863 50.9567 63.4568 50.9673 63.6795 51.1989C63.9022 51.4304 63.8915 51.7979 63.6581 52.0188C62.9664 52.6688 61.8593 54.264 62.6066 55.6489C62.7587 55.9314 62.6516 56.2819 62.3668 56.4327C62.279 56.4794 62.1848 56.5007 62.0905 56.5007L62.0927 56.5028Z" fill="#565E77"/>
+<path d="M45.9014 51.7192C45.6594 51.7192 45.4195 51.6215 45.2461 51.4261C43.6315 49.6206 42.0061 47.5666 40.9011 45.931C38.6484 42.5983 38.7233 41.3641 39.0424 40.6632C39.2073 40.3 39.6527 39.6882 40.7876 39.6882C42.5757 39.6882 44.1947 41.0137 45.6016 43.6263C46.9421 46.1158 47.6081 48.8644 47.7815 49.6482C47.8843 50.1177 47.5845 50.5807 47.1134 50.6827C46.9956 50.7082 46.8779 50.7082 46.7644 50.689C46.8179 50.9801 46.7237 51.2902 46.4838 51.4983C46.3168 51.6449 46.1091 51.7171 45.9014 51.7171V51.7192ZM40.6313 41.4406C40.5649 42.1437 42.0083 45.0622 45.972 49.61C45.6123 48.1295 44.9484 46.1094 44.0533 44.4463C43.3124 43.0698 42.1432 41.4279 40.7876 41.4279C40.717 41.4279 40.6656 41.4321 40.6313 41.4385V41.4406Z" fill="#0275BB"/>
+<path d="M50.2851 50.124C49.9039 50.124 49.5634 49.8776 49.4478 49.5144C48.6362 46.9442 47.9167 44.1213 47.5205 41.9653C46.7175 37.5853 47.2914 36.4234 47.8824 35.8988C48.1693 35.6439 48.7946 35.2828 49.7626 35.7055C53.9683 37.5407 51.4393 48.2484 51.1374 49.4634C51.0431 49.8415 50.7069 50.1113 50.3129 50.124C50.3043 50.124 50.2958 50.124 50.2851 50.124ZM49.0109 37.2773C48.8974 37.5598 48.6683 38.59 49.2765 41.8166C49.4863 42.9296 49.784 44.2232 50.133 45.5593C50.8247 40.916 50.2422 37.8126 49.0559 37.2943C49.0388 37.288 49.0259 37.2816 49.0109 37.2773Z" fill="#0275BB"/>
+<path d="M53.7925 48.8198C53.7582 48.8198 53.7261 48.8198 53.6918 48.8134C53.21 48.7582 52.8653 48.327 52.9209 47.8512C53.0087 47.1014 53.3728 44.4675 54.4157 42.08C55.8012 38.9065 57.5421 38.2417 58.7606 38.2417C59.2446 38.2417 59.6364 38.6304 59.6364 39.1105C59.6364 39.5905 59.2446 39.9792 58.7606 39.9792C56.5785 39.9792 55.0517 44.699 54.6641 48.0488C54.6127 48.4927 54.2336 48.8198 53.7946 48.8198H53.7925Z" fill="#0275BB"/>
+<path d="M56.2995 48.4222C57.2861 47.7035 57.8113 46.75 57.4725 46.2923C57.1337 45.8347 56.0592 46.0462 55.0726 46.7649C54.086 47.4835 53.5608 48.4371 53.8996 48.8947C54.2384 49.3524 55.3129 49.1408 56.2995 48.4222Z" fill="#4172B7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M55.8592 47.5708C55.3089 46.8295 55.371 45.7738 56.1205 45.2279L56.718 44.7925C56.7115 43.8685 57.1377 42.9551 57.945 42.3667L63.5769 38.2629C64.9153 37.2879 66.7976 37.5747 67.7806 38.9023C68.7635 40.2298 68.4765 42.097 67.136 43.0719L61.504 47.1757C60.6967 47.7641 59.6903 47.8937 58.8037 47.6112L58.2298 48.0296C57.4696 48.584 56.4203 48.3228 55.8614 47.5687L55.8592 47.5708Z" fill="#4172B7"/>
+<path d="M64.335 36.7888C63.941 37.0755 63.8853 37.6406 64.213 38.0038C64.7183 38.5645 65.425 39.3717 65.909 40.0174C66.4422 40.729 67.0696 41.7359 67.4872 42.4304C67.7377 42.8468 68.2967 42.9636 68.6928 42.6768L91.0943 26.3572C92.7325 25.1635 93.0858 22.8779 91.8823 21.2529C90.6788 19.628 88.3747 19.2775 86.7365 20.4713L64.3372 36.7888H64.335Z" fill="white"/>
+<path d="M86.6058 20.1038C86.2097 20.3927 86.1561 20.9598 86.4859 21.3209C87.062 21.9539 87.9143 22.9161 88.4839 23.6872C89.0535 24.4561 89.7259 25.55 90.1606 26.2871C90.409 26.7077 90.9722 26.8266 91.3684 26.5378L103.489 17.7078C105.425 16.2974 106.47 13.9821 106.243 11.6115C106.196 11.1166 105.877 10.6854 105.414 10.4921C103.202 9.56814 100.66 9.86339 98.7263 11.2738L86.6058 20.1038Z" fill="#4172B7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M98.602 11.3651L97.9381 10.4666L97.7176 10.1671C97.7176 10.1671 94.3341 11.8346 92.4582 13.3087C90.5524 14.8062 88.0854 17.7609 88.0854 17.7609L88.5287 18.3599C88.5287 18.3599 91.0834 15.4498 93.0107 13.9438C94.3298 12.9115 96.3728 11.7432 97.4456 11.1527L97.9531 11.8388L98.6041 11.3651H98.602Z" fill="#4172B7"/>
+<g opacity="0.5">
+<path d="M74.3933 34.482C74.3162 34.482 74.2369 34.4713 74.1598 34.448C73.7273 34.3205 73.481 33.8681 73.6095 33.439C73.8579 32.6085 74.4511 31.5719 75.3697 31.1513C75.9479 30.8858 76.5797 30.8901 77.2007 31.162C77.5005 31.2937 77.6739 31.3383 77.7639 31.3553C77.8217 31.2406 77.8966 31.0345 77.9523 30.8752C78.0422 30.6246 78.145 30.3399 78.2928 30.0213C78.357 29.8832 78.4191 29.7388 78.4812 29.5922C78.8967 28.6321 79.3656 27.5467 80.4342 27.3577C81.173 27.2281 81.9418 27.5956 82.7855 28.4834C82.7855 28.4834 82.7898 28.4877 82.7919 28.4898C82.9825 27.9503 83.1538 26.6588 83.0767 24.9489C83.0575 24.5007 83.4065 24.1226 83.8584 24.1035C84.3145 24.0801 84.6914 24.4306 84.7106 24.8788C84.8049 27.0008 84.6528 29.6432 83.3894 30.1721C82.9825 30.3421 82.3379 30.3824 81.5927 29.5986C80.9824 28.955 80.719 28.955 80.7169 28.9571C80.5049 29.0251 80.1516 29.8408 79.9824 30.2337C79.9139 30.3909 79.8453 30.5481 79.7768 30.6989C79.659 30.9559 79.5712 31.196 79.4877 31.4275C79.2779 32.0074 79.0616 32.6064 78.4341 32.874C77.8131 33.1374 77.1257 32.9101 76.5347 32.651C76.2948 32.5469 76.1557 32.5809 76.0507 32.6297C75.6738 32.8018 75.3226 33.4029 75.1727 33.9085C75.0678 34.2611 74.7423 34.4883 74.389 34.4883L74.3933 34.482Z" fill="#628EC9"/>
+</g>
+<path d="M43.2203 68.914L41.2245 68.6166C40.777 68.5487 40.4151 68.2216 40.3037 67.7861C40.0253 66.6752 39.5778 65.6195 38.9718 64.653C38.7341 64.2707 38.7512 63.7843 39.0146 63.4189L40.1902 61.7961L38.0809 59.7336L36.462 60.9209C36.098 61.1865 35.6076 61.212 35.2178 60.9804C34.2349 60.3942 33.1664 59.963 32.0421 59.7017C31.601 59.5997 31.2669 59.2429 31.192 58.7989L30.8665 56.8256L27.9049 56.8448L27.6051 58.8223C27.5365 59.2663 27.2068 59.6274 26.7678 59.7357C25.6478 60.0139 24.5835 60.4579 23.6092 61.0569C23.2237 61.2927 22.7333 61.2757 22.365 61.0144L20.729 59.8483L18.6496 61.9384L19.8467 63.5464C20.1165 63.9075 20.1401 64.3939 19.9066 64.7805C19.3156 65.7555 18.8809 66.8154 18.6175 67.9306C18.5126 68.3681 18.155 68.6995 17.7074 68.7738L15.718 69.0967L15.7373 72.0344L17.731 72.3317C18.1785 72.3976 18.5426 72.7247 18.6518 73.1623C18.9302 74.2753 19.3799 75.3289 19.9837 76.2953C20.2214 76.6777 20.2043 77.1641 19.9409 77.5295L18.7653 79.1523L20.8724 81.2148L22.4913 80.0274C22.8554 79.7619 23.3458 79.7364 23.7355 79.968C24.7184 80.5542 25.787 80.9854 26.9112 81.2467C27.3524 81.3486 27.6864 81.7055 27.7614 82.1473L28.0869 84.1206L31.0485 84.1015L31.3461 82.1239C31.4147 81.68 31.7444 81.3189 32.1834 81.2106C33.3055 80.9323 34.3677 80.4884 35.342 79.8894C35.7275 79.6515 36.2179 79.6685 36.5862 79.9318L38.2223 81.098L40.3037 79.0078L39.1067 77.3999C38.839 77.0388 38.8154 76.5524 39.0467 76.1679C39.6377 75.1929 40.0724 74.133 40.3358 73.0178C40.4408 72.5803 40.8005 72.2489 41.246 72.1767L43.2375 71.8538L43.2182 68.9161L43.2203 68.914ZM29.5259 77.162C25.8084 77.1875 22.7633 74.2073 22.7376 70.5177C22.7119 66.8303 25.7163 63.8098 29.436 63.7843C33.1535 63.7588 36.2008 66.7389 36.2243 70.4285C36.25 74.116 33.2434 77.1365 29.5259 77.162Z" fill="#4172B8"/>
+<g opacity="0.1">
+<path d="M61.5123 47.1694L67.1443 43.0656C67.3327 42.9275 67.4998 42.7703 67.6454 42.6025C67.9302 42.8659 68.3713 42.9105 68.7011 42.6705L90.6807 26.6589C90.912 26.7183 91.1689 26.6844 91.3788 26.5314L103.499 17.7014C105.343 16.3569 106.377 14.1924 106.275 11.9387L105.718 11.1868C105.621 12.1171 105.114 14.1839 103.846 15.0144C102.262 16.051 60.6472 46.3665 58.9191 46.9209C57.191 47.4753 56.283 47.5496 56.1716 47.3988L56.7841 48.2251C57.2659 48.3865 57.8013 48.3419 58.2402 48.0233L58.8141 47.6048C59.7007 47.8873 60.7072 47.7578 61.5145 47.1694H61.5123Z" fill="black"/>
+</g>
+</svg>

static/images/explore_starter_projects.svg

@@ -0,0 +1,35 @@
+<svg width="133" height="101" viewBox="0 0 133 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M81.5883 99C73.5813 98.6613 70.7914 99.611 47.3318 94.8072C39.6741 93.2376 33.4467 91.2785 28.3489 88.9983C12.2309 81.7838 7.39839 71.3837 4.38967 60.1512C0.419318 45.3723 4.63727 9.57619 43.4676 15.9938C61.0358 18.8982 84.9529 8.74825 113.07 18.668C141.188 28.5877 127.522 97.3065 81.5883 99Z" fill="#FDDDCC"/>
+<path d="M103.83 97.9109C103.83 97.9109 78.5883 99.9829 62.3112 90.3886C46.0341 80.7943 19.7471 82.6781 19.7471 82.6781L13.345 81.04L31.9941 14.8847C31.9941 14.8847 56.1213 15.2212 73.1855 22.3472C90.2474 29.4732 116.077 30.1174 116.077 30.1174L103.83 97.9109Z" fill="#8CD0BE"/>
+<path d="M102.959 97.1383C102.959 97.1383 77.5936 99.1904 61.2281 89.5784C44.8625 79.9663 18.4473 81.8281 18.4473 81.8281L30.701 14.0059C30.701 14.0059 54.9498 14.3623 72.1023 21.506C89.2549 28.6497 115.212 29.3161 115.212 29.3161L102.961 97.1361L102.959 97.1383Z" fill="#F1F9F7"/>
+<path d="M40.9142 18.6371C42.241 15.4689 39.3688 11.2428 34.4992 9.19795C29.6295 7.1531 24.6064 8.0638 23.2797 11.2321C21.953 14.4003 24.8251 18.6264 29.6947 20.6712C34.5644 22.7161 39.5875 21.8054 40.9142 18.6371Z" fill="#8BCFBD"/>
+<path d="M41.2434 17.4881L23.0363 78.3879L5.40405 70.9852L23.4961 11.4468L41.2434 17.4881Z" fill="#8BCFBD"/>
+<path d="M23.0368 78.3947C24.3635 75.2264 21.4914 71.0004 16.6218 68.9555C11.7521 66.9107 6.72895 67.8214 5.40224 70.9897C4.07552 74.1579 6.94763 78.384 11.8173 80.4288C16.6869 82.4737 21.7101 81.563 23.0368 78.3947Z" fill="#AEDCD1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7678 80.5818C13.4002 80.5087 10.7363 79.2712 9.08716 77.5157C7.26336 75.6739 6.95165 73.8741 6.8787 73.1325C6.85881 72.7296 6.83891 72.329 6.93618 71.9061L6.91628 71.5032C6.95165 71.2088 7.34073 71.0848 7.72318 71.1955C8.10562 71.3062 8.36427 71.6693 8.32669 71.9637L8.25816 72.3223C8.22279 72.6167 8.24268 73.0196 8.29353 73.3583C8.31342 73.7612 8.51459 75.3485 10.135 76.9335C11.2912 78.1312 13.4245 79.3421 15.5534 79.455C17.6513 79.6298 19.4508 78.6381 19.9592 77.1638C20.4367 75.7536 19.884 73.9915 18.4338 72.7252C17.1583 71.5453 15.4229 71.0804 14.3264 71.087C12.9934 71.1335 12.2993 71.6538 12.0561 71.9261C12.0251 71.988 11.121 72.7186 11.3 73.9029C11.3774 74.4121 11.6869 75.1138 12.3523 75.7558C13.0752 76.5041 14.2468 77.0066 15.1377 76.9756C16.1149 76.9889 16.8952 76.5107 17.0301 75.7957C17.1649 75.0806 16.7361 74.3966 16.2718 74.0114C15.7192 73.5819 15.1002 73.5111 14.8614 73.5487C14.3861 73.6262 14.2933 73.8166 14.2933 73.8166L14.2004 74.0047C14.227 74.1752 14.2513 74.3435 14.3087 74.4497L14.5718 74.5803C14.9543 74.691 15.2439 74.9899 15.3257 75.2666C15.2903 75.561 14.9896 75.727 14.6647 75.7226C14.0766 75.5876 13.5792 75.2644 13.3471 75.0718C12.7679 74.4718 12.8165 73.7125 12.8475 73.6483L12.9094 73.5222L13.0641 73.2078C13.2498 72.8293 13.7008 72.5813 14.2955 72.4839C15.0095 72.3666 16.1303 72.5282 17.0588 73.3008C18.1067 74.0535 18.6704 75.3507 18.4095 76.3203C18.2061 77.3962 16.9461 78.1821 15.4362 78.1422C14.1032 78.1887 12.3722 77.4914 11.3597 76.4421C10.0842 75.2622 9.9051 74.0778 9.85205 73.7391C9.56466 72.1076 10.8314 71.087 10.8623 71.0251C11.1364 70.6908 12.0406 69.9625 13.9064 69.9425C15.2394 69.8961 17.5076 70.3897 19.3048 72.0611C21.1331 73.6705 21.9687 75.9639 21.3055 77.7526L21.1198 78.1312C20.3129 79.7693 18.1885 80.7566 15.7634 80.5795L15.7678 80.5818Z" fill="#078E69"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M55.6969 56.9811L56.3358 57.1095L82.3023 62.3494C83.0671 62.5044 83.5601 63.2482 83.4054 64.0141L80.5249 78.182C80.3679 78.948 79.6229 79.4439 78.858 79.2889L52.8916 74.049L52.2549 73.9206C51.7553 73.8188 51.2358 73.9206 50.8113 74.204L48.7267 75.5898C48.3022 75.8709 47.7827 75.9727 47.2831 75.8731L43.1713 75.043C42.6717 74.9433 42.234 74.6467 41.9532 74.2217L40.5737 72.1385C40.293 71.7135 39.8531 71.4191 39.3557 71.3173L38.7168 71.1889L35.8473 70.6089C35.0825 70.4539 34.5895 69.7079 34.7442 68.9441L37.6247 54.7762C37.7795 54.0103 38.5267 53.5144 39.2916 53.6694L42.1588 54.2471L42.7977 54.3755C43.2973 54.4774 43.735 54.7718 44.0158 55.1968L45.3952 57.2822C45.676 57.7072 46.1159 58.0016 46.6133 58.1035L50.7251 58.9336C51.2247 59.0355 51.7442 58.9336 52.1687 58.6503L54.2533 57.2645C54.6778 56.9811 55.1973 56.8793 55.6969 56.9811Z" fill="#F37621"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M43.4875 34.8969C43.5007 34.8858 48.1056 30.9188 58.2547 32.7297C68.4039 34.5405 71.3595 39.8534 71.3662 39.8689L90.4066 43.2648C91.0477 43.3799 91.4766 43.9931 91.3616 44.6351L88.8857 58.5551C88.7707 59.1971 88.1584 59.6265 87.5173 59.5114L55.6992 53.8376L55.0183 53.7159C54.711 53.6605 54.3927 53.7314 54.1362 53.9107L52.1997 55.2633C51.9433 55.4426 51.6249 55.5134 51.3176 55.4581L47.6325 54.8006C47.3252 54.7452 47.0511 54.5704 46.872 54.3136L45.5213 52.3765C45.3422 52.1198 45.0681 51.9449 44.7608 51.8895L44.0799 51.7678L41.7565 51.3538C41.1154 51.2387 40.6888 50.6255 40.8015 49.9835L43.483 34.9013L43.4875 34.8969Z" fill="#F9A11B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M52.1905 4.01086C54.253 3.08774 56.6715 2.78667 59.1629 3.14972C62.2114 3.59247 63.0869 4.75689 65.4987 6.89536C67.4706 8.61322 67.7624 9.512 70.2141 9.86841C72.6679 10.2248 73.4394 9.60054 75.3163 8.44276C75.6633 8.21032 76.174 8.22582 76.6228 8.46933C77.0715 8.71284 77.3567 9.12681 77.37 9.5607L77.8806 25.0015C77.8917 25.3158 77.748 25.5926 77.4827 25.763C75.1748 27.1997 73.8285 27.9347 70.7977 27.4942C67.7469 27.0492 66.8892 25.8737 64.4619 23.7485C62.4878 22.0174 62.1982 21.1164 59.7443 20.76C57.4784 20.4301 54.5758 21.3223 52.794 22.314L52.1794 3.74743" fill="#54B857"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M55.628 3.08774L56.2205 21.0146C54.9383 21.3178 53.7158 21.8049 52.7918 22.3162L52.186 4.01087C53.2494 3.53491 54.4122 3.22499 55.6258 3.08774H55.628Z" fill="#221F1F" fill-opacity="0.15"/>
+<path d="M54.7329 39.1872L52.1531 3.86707" stroke="#CA9468" stroke-width="6.19" stroke-linecap="round" stroke-linejoin="round"/>
+<mask id="mask0_2346_575" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="8" y="10" width="121" height="86">
+<path d="M98.5571 95.6351C93.183 94.9555 89.6658 94.7231 86.8119 94.6478C78.869 94.4441 76.1189 95.427 52.7809 91.0549C45.1607 89.6271 38.9554 87.7897 33.862 85.6158C17.7573 78.7377 12.79 68.5257 9.61546 57.4615C5.43067 42.9018 9.00089 7.41338 47.6057 13.1337C65.0722 15.7215 88.6091 5.29262 116.654 14.6501C144.698 24.0075 118.924 98.2075 98.5594 95.6351H98.5571Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_2346_575)">
+<path d="M90.0217 31.0915L91.2663 45.3214L96.0767 44.9096L95.2433 35.4968C95.0377 32.8381 92.6922 30.859 90.0217 31.0893V31.0915Z" fill="#939598"/>
+<path d="M91.8366 55.4891L91.9516 56.8262C91.7062 56.9966 91.4851 57.1826 91.2862 57.384C89.2789 59.3786 88.9716 62.4623 90.6959 64.7292C93.0083 67.7155 97.2373 67.6845 99.5032 64.9948C101.508 62.5996 101.183 59.0665 98.8157 57.0719C98.4531 56.7664 98.0597 56.5074 97.644 56.3325L97.5291 54.9954C97.4871 54.504 97.0339 54.1365 96.5409 54.1785L92.6745 54.515C92.1594 54.5416 91.7946 54.9954 91.8344 55.4891H91.8366ZM93.2492 59.7394C94.1645 58.6503 95.7915 58.4953 96.8792 59.4118C97.9668 60.3283 98.1215 61.9576 97.2063 63.0468C96.2911 64.1359 94.642 64.2754 93.5543 63.3589C92.4667 62.4424 92.3274 60.791 93.2515 59.7394H93.2492Z" fill="#E96024"/>
+<path d="M75.9046 48.166L75.92 48.3431C76.1499 50.9177 78.4026 52.8348 80.9714 52.6046L97.2242 51.1767C97.6774 51.1435 97.9979 50.7583 97.9493 50.3266L97.6619 47.0835C97.6288 46.6297 97.2441 46.3087 96.813 46.3574L75.9023 48.1638L75.9046 48.166ZM93.4948 48.5844C93.7689 48.2679 94.2376 48.2103 94.5537 48.487C94.8698 48.7615 94.9273 49.2308 94.651 49.5474C94.3769 49.864 93.9082 49.9215 93.5921 49.6448C93.276 49.3703 93.2185 48.901 93.4948 48.5844Z" fill="#939598"/>
+<path d="M99.249 46.6385L99.585 50.5104C99.627 51.0018 100.08 51.3693 100.573 51.3272L101.908 51.2121C102.165 51.5796 102.496 51.9316 102.859 52.2371C105.251 54.2449 108.779 53.9195 110.771 51.5486C113.021 48.8833 112.314 44.6683 108.98 42.9328C106.471 41.6089 103.48 42.4258 101.866 44.779C101.714 45.0114 101.546 45.266 101.44 45.5272L100.105 45.6424C99.6138 45.6844 99.2623 46.1161 99.2512 46.6385H99.249ZM104.499 46.3176C105.415 45.2284 107.042 45.0734 108.129 45.9899C109.217 46.9064 109.372 48.5357 108.456 49.6249C107.541 50.714 105.892 50.8535 104.804 49.937C103.717 49.0205 103.578 47.3691 104.502 46.3176H104.499Z" fill="#E96024"/>
+<path d="M115.044 54.0701C110.897 50.9022 109.814 49.2242 108.987 47.1543C107.601 43.7186 103.051 45.6955 104.037 48.735C104.984 51.6814 103.891 52.7861 102.07 52.682C98.0465 52.4496 96.0326 51.9847 93.0659 52.7175C89.3785 53.6362 90.9392 57.0564 92.5751 56.9413C97.003 56.6092 98.2786 56.7863 99.028 57.612C99.6138 58.2319 99.3287 59.2701 96.2868 58.958C93.046 58.6458 92.4093 62.9383 95.5838 63.8061C97.5756 64.3573 98.8136 63.381 99.3154 65.2384C99.3154 65.2384 98.1636 66.6352 96.0856 66.9252C96.0856 66.9252 95.8579 67.5716 96.6339 68.7139C97.129 69.4732 98.1592 69.6193 98.7185 69.6238C98.9175 69.6238 99.0568 69.8141 99.0346 69.9979C98.7893 71.6294 100.633 73.0108 101.951 72.7186C105.417 71.9836 108.439 72.7828 110.327 72.7341C117.856 72.5237 122.777 60.0051 115.044 54.0745V54.0701Z" fill="#D59D7A"/>
+<path d="M115.831 56.3502C119.753 59.1041 143.073 54.5394 143.073 54.5394C143.073 54.5394 148.868 57.1671 148.786 62.987C148.704 69.1058 143.982 70.4406 143.982 70.4406L113.473 70.0621L115.831 56.3502Z" fill="#D59D7A"/>
+<path d="M106.551 42.2931C106.551 42.2931 104.654 42.1027 102.872 43.6502C102.872 43.6502 103.069 41.7883 104.511 41.5115C105.607 41.3056 106.549 42.2931 106.549 42.2931H106.551Z" fill="#D59D7A"/>
+<g opacity="0.1">
+<path d="M143.075 54.5394C143.075 54.5394 149.095 57.3818 148.788 62.987C148.481 68.5921 143.984 70.4406 143.984 70.4406L115.778 70.0886C115.778 70.0886 113.789 72.4595 110.917 72.6898C108.054 72.9598 107.577 72.4773 105.565 72.4108C103.553 72.3444 102.463 72.5902 101.889 72.7075C101.314 72.827 100.206 72.5946 99.5099 71.7356C98.8135 70.8767 98.9351 70.2945 98.9484 69.9713C98.9616 69.6481 98.7936 69.6038 98.6323 69.5972C98.4709 69.5905 97.4031 69.5507 96.8328 69.0083C96.2624 68.466 95.8888 67.5229 95.9994 66.8986C95.9994 66.8986 97.9249 66.7415 99.2291 65.2118C99.2291 65.2118 100.18 70.6177 107.616 70.0466C113.026 69.6326 112.25 66.7304 116.121 66.8942C119.992 67.058 138.716 68.6231 141.884 65.5682C145.114 62.5221 143.075 54.5371 143.075 54.5371V54.5394Z" fill="black"/>
+</g>
+<g opacity="0.1">
+<path d="M98.989 64.5215C98.3368 63.295 96.7737 62.2965 95.1752 62.1061C93.5767 61.9157 93.5237 60.6847 93.5237 60.6847C93.5237 60.6847 92.9732 62.5799 94.837 63.4765C96.8467 64.5038 98.3457 63.5341 98.989 64.5215Z" fill="black"/>
+</g>
+<g opacity="0.1">
+<path d="M99.2302 58.1105C99.2302 58.1105 99.3628 57.3024 98.4542 56.6692C97.2669 55.8522 95.5933 55.6773 93.9904 56.0471C90.7934 56.7268 90.8332 54.4951 90.8332 54.4951C90.6276 54.9578 90.8089 56.9017 92.5511 56.9238C94.616 56.9592 98.5117 56.1755 99.2302 58.1105Z" fill="black"/>
+</g>
+</g>
+</svg>

static/images/ideas/left-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.558139 10.7977L7.83016 18.2108C8.42768 18.7845 9.26604 18.9379 9.9863 18.6192C10.7066 18.3028 11.1512 17.604 11.1512 16.7943L11.1512 13.9825L21.2718 12.5494C22.8212 12.344 24 10.97 24 9.35284C24 9.21355 23.9907 9.0719 23.9745 8.93261C23.7499 7.4736 22.6336 6.34747 21.2603 6.17041L11.1512 4.6996L11.1512 2.01058C11.1512 1.19137 10.6788 0.461858 9.94924 0.152587C9.21509 -0.156686 8.4022 0.0109341 7.83016 0.594066L0.558139 8.00716C0.199169 8.37545 -8.6648e-07 8.87123 -8.20042e-07 9.40242C-7.73604e-07 9.93361 0.199169 10.4294 0.558139 10.7977Z" fill="#4C97FF"/>
+</svg>

static/images/ideas/right-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.4419 10.7977L16.1698 18.2108C15.5723 18.7845 14.734 18.9379 14.0137 18.6192C13.2934 18.3028 12.8488 17.604 12.8488 16.7943L12.8488 13.9825L2.72817 12.5494C1.17881 12.344 6.82997e-07 10.97 8.24376e-07 9.35284C8.36553e-07 9.21355 0.00926484 9.0719 0.0254754 8.93261C0.250121 7.4736 1.3664 6.34747 2.73975 6.17041L12.8488 4.6996L12.8488 2.01058C12.8488 1.19137 13.3212 0.461858 14.0508 0.152587C14.7849 -0.156686 15.5978 0.0109341 16.1698 0.594066L23.4419 8.00716C23.8008 8.37545 24 8.87123 24 9.40242C24 9.93361 23.8008 10.4294 23.4419 10.7977Z" fill="#4C97FF"/>
+</svg>

static/images/ideas/video-cc-label.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" y="0.0300293" width="15" height="16" fill="#606060"/>
+<path d="M15 7.03003H13.5V6.53003H11.5V9.53003H13.5V9.03003H15V10.03C15 10.2952 14.8946 10.5496 14.7071 10.7371C14.5196 10.9247 14.2652 11.03 14 11.03H11C10.7348 11.03 10.4804 10.9247 10.2929 10.7371C10.1054 10.5496 10 10.2952 10 10.03V6.03003C10 5.76481 10.1054 5.51046 10.2929 5.32292C10.4804 5.13539 10.7348 5.03003 11 5.03003H14C14.2652 5.03003 14.5196 5.13539 14.7071 5.32292C14.8946 5.51046 15 5.76481 15 6.03003M8 7.03003H6.5V6.53003H4.5V9.53003H6.5V9.03003H8V10.03C8 10.2952 7.89464 10.5496 7.70711 10.7371C7.51957 10.9247 7.26522 11.03 7 11.03H4C3.73478 11.03 3.48043 10.9247 3.29289 10.7371C3.10536 10.5496 3 10.2952 3 10.03V6.03003C3 5.76481 3.10536 5.51046 3.29289 5.32292C3.48043 5.13539 3.73478 5.03003 4 5.03003H7C7.26522 5.03003 7.51957 5.13539 7.70711 5.32292C7.89464 5.51046 8 5.76481 8 6.03003M16 0.0300293H2C0.89 0.0300293 0 0.920029 0 2.03003V14.03C0 14.5605 0.210714 15.0692 0.585786 15.4442C0.960859 15.8193 1.46957 16.03 2 16.03H16C16.5304 16.03 17.0391 15.8193 17.4142 15.4442C17.7893 15.0692 18 14.5605 18 14.03V2.03003C18 1.4996 17.7893 0.990888 17.4142 0.615816C17.0391 0.240743 16.5304 0.0300293 16 0.0300293Z" fill="#F4F4F4"/>
+</svg>

static/images/ideas/youtube-icon.svg

@@ -0,0 +1,12 @@
+<svg width="140" height="110" viewBox="0 0 140 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2_749)">
+<path opacity="0.15" fill-rule="evenodd" clip-rule="evenodd" d="M55 102.36C23.62 102.06 -6.70002 64.7 2.64998 39.56C12.01 14.43 29.31 -0.300021 60.69 -2.09711e-05C92.07 0.299979 118.24 30.85 123.1 63.38C127.97 95.91 86.38 102.65 55 102.35V102.36ZM22.16 108.18C17.61 111.53 10.57 104.29 6.26998 99.23C1.96998 94.17 3.61998 88.8 7.47998 88.84C10.12 88.87 12.94 91.03 15.54 93.07L15.79 93.27C16.89 94.13 17.95 94.96 18.93 95.57C22.3 97.67 26.71 104.83 22.16 108.18Z" fill="#628EC9"/>
+<path d="M139.01 57.4C138.99 65.5 133.84 71.28 126.28 73.12C118.11 75.11 111.03 76.27 93.01 78.16C74.39 80.12 67.76 80.36 59.32 80.15C51.29 79.95 45.15 75.44 43.6 67.42C43.28 65.76 41.85 60.53 40.91 51.64C40.24 45.22 40.47 38.9 40.44 37.34C40.3 29.32 45.38 23.67 53.17 21.62C61.33 19.47 67.42 18.32 86.51 16.31C105.55 14.31 111.72 14.38 120.13 14.58C128.33 14.78 134.34 19.13 135.85 27.31C136.14 28.9 137.59 34.09 138.44 42.16C139.31 50.45 139.01 55.76 139.01 57.39V57.4Z" fill="#FF0000"/>
+<path d="M84.33 59.9L104.45 45.28L81.73 35.16L84.33 59.9Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_2_749">
+<rect width="138.14" height="109.03" fill="white" transform="translate(0.929993)"/>
+</clipPath>
+</defs>
+</svg>

static/images/learn_about_the_community.svg

@@ -0,0 +1,37 @@
+<svg width="123" height="101" viewBox="0 0 123 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 50.957C0 78.3772 19.4459 104.531 61.2442 100.608C103.043 96.6843 122.488 78.3795 122.488 50.957C122.488 23.5344 96.3183 9.30529 61.2442 1.30618C26.1701 -6.69063 0 23.5367 0 50.957Z" fill="#EECDE2"/>
+<path opacity="0.6" d="M75.862 65.4884C75.9981 66.7709 76.0166 69.5134 74.2634 72.076C73.9497 72.528 73.2831 72.3943 73.1239 71.9053C72.7202 70.4821 71.9105 68.1917 70.4273 66.8424C70.0905 66.5771 69.6638 66.4641 69.2578 66.5495C65.9314 67.396 49.4382 70.8904 44.8247 58.4811C39.6853 44.6788 49.4866 36.4005 61.7493 34.6383C74.1712 32.8485 78.8054 39.5351 81.818 47.6035C85.3243 56.9427 78.584 62.7229 76.4318 64.3006C76.0119 64.5843 75.8182 65.0064 75.8597 65.4861L75.862 65.4884Z" fill="white"/>
+<path opacity="0.6" d="M40.3218 39.1707C39.7105 38.0336 38.6564 35.5033 39.3115 32.4679C39.4314 31.9304 40.0981 31.8013 40.4302 32.1957C41.3414 33.3605 42.9584 35.1734 44.8407 35.8631C45.2537 35.9807 45.6919 35.9254 46.0333 35.6924C48.7922 33.6511 62.7411 24.1827 71.7028 33.9256C81.6772 44.7595 75.735 56.1285 65.0502 62.3977C54.2269 68.7522 47.4082 64.3121 41.5698 57.9806C34.7925 50.6596 38.8455 42.7597 40.2434 40.4877C40.5248 40.0656 40.5433 39.602 40.3241 39.173L40.3218 39.1707Z" fill="white"/>
+<path opacity="0.6" d="M49.4888 69.5941C48.4023 70.2169 45.9687 71.294 42.9907 70.6413C42.4624 70.5213 42.3171 69.8478 42.6885 69.5088C43.7934 68.5815 45.5097 66.937 46.121 65.0294C46.2224 64.612 46.1532 64.1668 45.9157 63.8208C43.8373 61.0322 34.1651 46.9323 43.3713 37.8168C53.6064 27.6726 64.8748 33.6557 71.3245 44.4619C77.8618 55.4065 73.7558 62.3308 67.7744 68.2678C60.8588 75.1598 53.032 71.0795 50.7714 69.6702C50.3515 69.3865 49.8994 69.3681 49.4888 69.5941Z" fill="white"/>
+<path opacity="0.6" d="M75.2504 35.4802C76.4661 35.1734 79.0981 34.7906 81.7924 36.2229C82.2676 36.4813 82.2283 37.1686 81.7785 37.3947C80.4637 37.9897 78.3692 39.1107 77.2665 40.7853C77.0566 41.1589 77.0036 41.6064 77.1397 42.0031C78.3899 45.2485 83.9054 61.4335 72.5838 67.7304C59.9936 74.7423 50.7551 65.9428 47.4541 53.8011C44.107 41.498 49.9269 35.9392 57.2878 31.8313C65.8043 27.0567 72.2424 33.0952 74.0394 35.0604C74.367 35.4479 74.7983 35.5863 75.255 35.4802H75.2504Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M66.0812 48.5676C65.0132 53.0285 59.3686 55.8286 58.0699 55.6372C56.7712 55.4457 52.1738 51.1348 52.4414 46.554C52.4506 46.404 52.4622 46.2564 52.4829 46.1088C52.8059 43.9176 54.8612 42.3976 57.0618 42.7228C58.1783 42.8866 59.1263 43.4909 59.7353 44.3466C60.5635 43.7031 61.6476 43.3986 62.7641 43.5624C64.9647 43.8876 66.4918 45.9335 66.1689 48.127C66.1481 48.2747 66.1135 48.42 66.0812 48.5653V48.5676Z" fill="#F06580"/>
+<g opacity="0.5">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.0815 40.3978C19.0562 40.6953 18.8739 40.956 18.6017 41.0851L17.9858 41.3758C17.6952 41.5119 17.7713 41.9455 18.0919 41.9732L18.7701 42.0331C19.0677 42.0585 19.3307 42.243 19.4575 42.5129L19.7482 43.1288C19.8843 43.4217 20.318 43.3433 20.3479 43.0227L20.4079 42.3445C20.4333 42.047 20.6178 41.784 20.89 41.6572L21.5059 41.3689C21.7966 41.2328 21.7205 40.7968 21.3998 40.7692L20.7216 40.7092C20.4218 40.6815 20.1611 40.5016 20.0342 40.2294L19.7459 39.6136C19.6098 39.3229 19.1738 39.3991 19.1461 39.7197L19.0862 40.3978H19.0815ZM12.6249 46.2795C13.3723 45.9312 13.8752 45.2093 13.9467 44.3881L14.1105 42.5221C14.1889 41.6387 15.3838 41.4265 15.7598 42.2292L16.5556 43.9245C16.904 44.6718 17.626 45.1747 18.4449 45.2462L20.311 45.4099C21.1945 45.4884 21.4044 46.6831 20.604 47.0591L18.9085 47.8549C18.1635 48.2032 17.6606 48.9251 17.5891 49.7439L17.4253 51.6099C17.3492 52.4933 16.1543 52.7032 15.776 51.9029L14.9801 50.2076C14.6318 49.4625 13.9098 48.9597 13.0886 48.8882L11.2224 48.7244C10.339 48.646 10.129 47.4512 10.9295 47.0753L12.6249 46.2795ZM10.6434 52.4772C10.9156 52.348 11.0979 52.0874 11.1233 51.7898L11.1832 51.1117C11.2109 50.7911 11.6446 50.715 11.783 51.0056L12.0713 51.6215C12.1982 51.8936 12.4612 52.0759 12.7587 52.1012L13.4392 52.1612C13.7599 52.1889 13.836 52.6225 13.5453 52.7609L12.9271 53.0492C12.6549 53.1761 12.4727 53.439 12.4473 53.7366L12.3897 54.4147C12.3597 54.7376 11.926 54.8137 11.7899 54.5208L11.5016 53.905C11.3747 53.6328 11.1117 53.4506 10.8141 53.4252L10.136 53.3675C9.81533 53.3375 9.7392 52.9039 10.0299 52.7678L10.6458 52.4795L10.6434 52.4772Z" fill="white"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M102.293 61.2398C102.999 61.1937 103.624 60.7739 103.935 60.1396L104.646 58.7003C104.983 58.0198 106.002 58.2228 106.053 58.9794L106.161 60.5824C106.207 61.2859 106.627 61.9133 107.259 62.2247L108.699 62.9351C109.379 63.2719 109.176 64.2913 108.42 64.3444L106.816 64.4528C106.113 64.4989 105.488 64.9187 105.174 65.5507L104.461 66.99C104.124 67.6704 103.105 67.4675 103.054 66.7109L102.948 65.1079C102.9 64.4044 102.482 63.7793 101.848 63.4656L100.408 62.7552C99.7277 62.4184 99.9307 61.3989 100.687 61.3459L102.291 61.2398H102.293Z" fill="white" fill-opacity="0.6"/>
+<mask id="mask0_2346_613" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="123" height="101">
+<path d="M0 50.957C0 78.3772 19.409 104.531 61.1289 100.608C102.849 96.6843 122.258 78.3795 122.258 50.957C122.258 23.5344 96.1384 9.30529 61.1289 1.30618C26.1193 -6.69063 0 23.5367 0 50.957Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_2346_613)">
+<path d="M25.476 81.3229C29.8773 79.8975 33.1574 82.6238 35.0536 83.1659C38.3776 84.1369 37.538 78.2898 31.2013 77.0235C27.5705 76.2923 29.5382 73.2961 31.5266 71.6838C34.1447 69.5503 37.4111 66.448 39.4157 64.6212C41.6647 62.5568 38.8736 59.7959 36.8136 61.5858C34.0225 64.0169 29.7204 68.6138 28.9176 67.9057C28.0618 67.1584 34.3177 61.9202 37.568 58.179C39.9208 55.448 37.3465 53.0746 34.5646 55.3996C31.2428 58.1605 27.266 63.5256 26.5671 63.0643C25.8704 62.603 29.8473 57.8492 32.274 55.0075C34.2716 52.6756 31.3466 50.4659 29.5243 52.5626C26.7793 55.7502 22.8878 61.8833 22.2327 61.4981C21.3584 60.9653 24.1265 57.3925 25.4483 55.3673C27.0423 52.9201 24.3733 51.4162 22.9685 53.3491C20.4865 56.7651 14.7703 65.2347 13.2387 67.6128C9.60323 73.2292 17.2293 83.9639 25.4691 81.3206L25.476 81.3229Z" fill="#4C2F1B"/>
+<path d="M12.4589 73.4138C12.4589 73.4138 2.76827 89.8272 -1.82677 106.363C-4.39418 115.492 9.96072 128.499 11.2317 120.767C12.768 111.495 16.5419 84.5544 22.7101 80.0751C28.8922 75.6234 12.4589 73.4138 12.4589 73.4138Z" fill="#4C2F1B"/>
+<path opacity="0.1" d="M25.1576 52.581C23.7482 53.7712 20.6456 58.5157 19.3239 60.4717C17.9744 62.4438 13.5132 69.1974 13.903 72.1036C14.1614 74.0988 16.4266 76.403 15.9606 76.6637C15.52 76.9082 13.5547 75.3858 13.0057 75.9279C12.3044 76.6222 0.101727 102.748 3.28504 108.48C6.71518 114.655 2.47076 114.837 2.47076 114.837C2.47076 114.837 -2.2304 113.34 -2.08738 107.731C-1.88208 99.9114 12.489 72.6157 12.489 72.6157C12.489 72.6157 11.7485 69.9378 13.068 67.9149C14.3874 65.8921 20.7056 56.5459 21.6929 55.1482C22.6663 53.725 23.5706 51.866 25.1553 52.581H25.1576Z" fill="black"/>
+<path d="M26.9684 34.9913C26.2164 33.0768 26.1102 31.3838 22.6916 29.4694C14.9779 25.1792 15.6238 10.5188 29.0191 11.9281C30.966 12.1403 37.6624 11.22 41.2125 9.73684C43.8445 8.60202 44.9056 11.0839 42.3982 12.2764C40.4213 13.1874 35.0166 13.7572 35.3926 13.9624C35.7732 14.1331 41.9922 14.3592 46.811 11.905C49.9367 10.3112 51.5744 13.3743 48.7325 14.9174C44.9887 16.9148 37.734 17.1178 38.163 17.3992C38.6174 17.7198 44.9956 18.2134 51.0508 15.9138C54.6101 14.5691 55.5674 18.5709 51.8374 19.9203C44.8549 22.4298 37.9554 20.6468 38.2461 21.3134C38.4883 21.8693 44.901 23.4977 52.6102 21.3249C55.6712 20.4715 55.9757 24.8701 52.2203 25.975C47.0601 27.4788 42.645 26.72 37.5425 26.1825C34.0155 25.8227 28.8806 26.0326 30.6361 29.5962C34.809 38.1766 28.2601 38.2689 26.966 34.9913H26.9684Z" fill="#FCDAB3"/>
+<path d="M25.6697 11.9119C18.6526 11.7481 -9.19219 1.4517 -12.1379 -24.0795L-16.7629 1.70081C-16.7629 1.70081 -0.156654 22.9787 22.6017 23.673" fill="#FCDAB3"/>
+<path opacity="0.1" d="M-16.7676 1.73539C-16.7676 1.73539 -2.35046 20.3285 18.0181 23.297C18.0181 23.297 18.634 26.7245 21.0769 28.3599C23.5197 29.9952 25.0976 30.9271 26.1679 32.9661C27.2382 35.0051 26.5531 35.3949 28.4539 36.6243C30.3546 37.8537 31.8633 36.3129 31.8886 35.0166C31.8886 35.0166 29.2958 35.5448 28.3132 32.6316C27.3236 29.753 25.5958 27.5618 23.8865 26.6046C22.1772 25.6474 19.6928 21.9523 19.6259 20.2316C19.5614 18.3056 18.2488 18.7531 17.6675 19.7103C17.047 20.6929 -13.935 9.39083 -15.1252 -7.61536L-16.8022 1.72847L-16.77 1.73539H-16.7676Z" fill="black"/>
+<path opacity="0.1" d="M30.3916 27.5342C30.936 26.0234 31.545 24.1505 33.6211 24.2151C35.6971 24.2796 53.1408 27.3381 54.8985 23.071C54.8985 23.071 54.8847 26.3855 49.4061 26.8053C43.9253 27.2251 36.2346 26.0511 33.9648 26.1226C30.9014 26.2241 30.3939 27.5342 30.3939 27.5342H30.3916Z" fill="black"/>
+<path opacity="0.1" d="M38.1399 21.3295C38.2991 21.0159 43.2355 21.5256 46.2458 21.1427C49.2238 20.7529 53.429 20.0033 53.9896 18.0173C53.9896 18.0173 49.2861 20.2178 44.8018 20.2339C40.3244 20.2178 38.2806 20.7414 38.1399 21.3319V21.3295Z" fill="black"/>
+<path opacity="0.1" d="M50.0934 12.6661C50.1603 13.0536 50.5317 14.4214 47.3899 15.5332C44.2481 16.6449 38.5735 17.2008 38.4282 17.2446C38.2506 17.2815 38.0799 17.2838 38.0684 17.3507C38.0684 17.3507 38.1745 16.7533 38.9841 16.6265C44.2205 15.8561 47.27 14.8643 48.9493 13.8978C49.6736 13.4803 50.0934 12.6661 50.0934 12.6661Z" fill="black"/>
+<path opacity="0.1" d="M35.3325 13.9163C35.4894 13.8079 38.3128 13.3212 38.5943 13.2704C38.9103 13.2243 43.3669 12.793 43.7683 10.7448C43.7683 10.7448 43.3785 11.3929 41.4223 11.9995C39.4662 12.6062 35.547 13.0998 35.3325 13.9163Z" fill="black"/>
+<path d="M88.5193 45.1055C88.5193 45.1055 87.2552 47.6911 89.1167 48.4269C90.3624 48.9182 91.5826 48.2862 92.2539 47.8133L92.2747 47.7972C92.4223 47.6957 92.5399 47.5988 92.6276 47.525L92.6553 47.502C92.7222 47.442 92.766 47.4028 92.7798 47.3889V47.382C94.1939 47.7764 95.2273 46.7731 95.9147 45.629C96.3853 44.8102 96.7498 43.9337 96.9943 43.0203C96.9943 43.1149 97.0104 44.9255 99.4141 44.1759C99.6124 44.0998 99.7878 43.9752 99.9239 43.8138L99.9585 43.7792C100.662 43.0019 101.495 41.2235 102.346 38.9631L102.369 38.9055C103.146 36.8296 103.935 34.3523 104.643 31.8912C104.759 31.4991 104.867 31.1047 104.976 30.7126L104.989 30.6757C105.61 28.4268 106.15 26.2448 106.537 24.4457L106.553 24.3627C106.899 22.7435 107.116 21.4403 107.156 20.6929C107.188 20.0679 107.213 19.3943 107.232 18.6932C107.264 17.4914 107.275 16.2159 107.278 14.9888C107.269 14.9819 107.259 14.975 107.25 14.9704C106.639 14.5829 106 14.2184 105.335 13.8817C102.512 12.4401 99.4094 11.6282 96.2423 11.4967C94.9759 11.446 93.811 11.4183 92.7429 11.4137C92.7429 11.7458 92.7429 12.0872 92.736 12.4378C92.6853 15.8123 92.5653 18.1811 92.5653 18.1811C92.5653 18.1811 87.6773 19.3159 86.7777 25.2714C86.5955 26.4616 86.2287 27.6149 85.6935 28.692C85.3221 29.4301 84.8954 30.1406 84.4225 30.8187C84.4225 30.8233 84.4202 30.8256 84.4179 30.8302C84.238 31.0932 84.065 31.3377 83.9035 31.5683C82.9416 32.9384 82.4272 33.7572 83.7512 34.3708C83.8343 34.41 83.9242 34.4469 84.0188 34.4838C84.1757 34.5438 84.3371 34.5945 84.5009 34.6337C84.5009 34.6337 84.5055 34.6337 84.5102 34.636C84.983 34.7583 85.4813 34.7606 85.9565 34.6429C86.4363 34.5138 86.8792 34.2716 87.2437 33.9348L87.2529 33.9256C88.0718 33.1921 88.4893 32.1842 88.577 31.9581L88.5954 31.912C88.2632 35.2911 86.4363 37.7245 85.7535 41.0252C85.6405 41.5672 85.562 42.1162 85.5228 42.6674C85.2068 46.8584 88.5262 45.1055 88.5262 45.1055H88.5193Z" fill="#E3B580"/>
+<path opacity="0.1" d="M92.2449 43.2441C92.7846 41.8025 93.4974 40.3447 93.7996 39.4083C94.2056 38.1466 94.3394 34.2831 94.3394 34.2831L91.968 34.0155C91.7881 34.8321 91.6612 38.4395 91.2391 39.8442C91.0707 40.4001 90.614 41.3342 90.1226 42.2615C89.3637 43.6915 88.5195 45.1077 88.5195 45.1077C88.4987 44.0929 89.0039 43.0249 89.5321 42.0331C90.005 41.1428 90.4963 40.3147 90.6417 39.6343C90.8746 38.5525 91.103 33.5981 91.103 33.5981C90.9069 33.2751 90.8331 32.8946 90.8954 32.5209C91.0015 31.9074 92.3048 32.7862 92.6232 32.8577C94.9784 33.3697 96.2655 33.4712 99.8802 33.9925C99.8802 33.9925 99.3081 37.36 98.8745 38.4049C98.4039 39.5582 96.946 41.5257 96.9875 43.0157C96.9091 42.8981 96.8514 42.7689 96.8145 42.6328C96.7615 42.499 96.7384 42.3537 96.7476 42.2107C97.0198 39.5328 97.6242 39.0554 98.104 38.0912C98.5654 37.1709 98.3923 34.5045 98.3923 34.5045L95.6035 34.3085C95.6035 34.3085 95.382 38.2227 94.9714 39.4475C94.5977 40.5592 93.5735 42.0585 92.9161 43.6085C92.7339 44.026 92.5863 44.455 92.4755 44.8955C91.9888 46.8746 92.7777 47.3797 92.7777 47.3797V47.3866C92.7362 47.4281 92.6947 47.465 92.6508 47.4996L92.6232 47.5227C92.5032 47.6219 92.351 47.7372 92.2841 47.788L92.2702 47.7972L92.2495 47.8133C92.005 47.5573 91.6843 46.8561 91.6843 46.8561C91.3798 45.9727 91.7351 44.6141 92.2449 43.2441ZM87.3868 32.5717C87.9751 31.1462 88.2934 30.8948 88.2934 30.8948C89.3038 30.7333 90.5886 29.7623 91.7697 28.6551C92.9599 27.5134 94.0718 26.2909 95.096 24.9992C95.1329 26.4362 94.4247 27.8432 93.4374 28.9804C92.5793 29.9722 91.5113 30.761 90.5425 31.1854L88.5725 31.912L88.5333 32.0089C88.2426 32.6939 87.8274 33.319 87.3084 33.8541L87.2323 33.9256L87.2231 33.9348C86.8632 34.2785 86.4203 34.523 85.9359 34.6429L85.8875 34.6545C85.8875 34.6545 86.7986 33.9948 87.3845 32.5693L87.3868 32.5717ZM89.7374 31.5152C89.7374 31.5152 89.7259 31.5222 89.719 31.5245C89.6359 31.5614 89.4998 31.6098 89.3476 31.6629C89.4652 31.619 89.599 31.5683 89.7374 31.5152Z" fill="black"/>
+<path opacity="0.1" d="M99.4141 44.1782C99.6078 44.0952 99.7831 43.9729 99.9239 43.8161L99.9585 43.7815C100.724 42.9696 101.548 41.1336 102.346 38.9677L102.369 38.9101C103.19 36.6612 103.977 34.0594 104.623 31.8889L104.971 30.7126L104.985 30.6757C105.691 28.3068 106.187 26.171 106.533 24.4457L106.549 24.3626C106.881 22.6789 107.066 21.3987 107.151 20.6929C107.188 20.3861 107.213 19.655 107.227 18.6931C107.241 17.639 107.245 16.3128 107.245 14.9704C106.634 14.5829 105.995 14.2184 105.331 13.8817C105.278 19.6065 104.265 26.2563 103.223 31.5844C102.24 36.5943 101.229 40.4393 100.95 41.2558C100.249 43.2671 99.4164 44.1828 99.4164 44.1828L99.4141 44.1782Z" fill="black"/>
+<path d="M88.0489 76.8505C85.3107 73.762 86.3672 70.1039 86.1112 68.3624C85.689 65.2993 81.2278 68.1064 82.485 73.7251C83.1839 76.9382 80.0444 76.4261 78.0007 75.372C75.311 73.995 71.6086 72.4427 69.4057 71.4947C66.9283 70.3968 65.648 73.679 67.844 74.7031C70.8151 76.117 76.1137 77.9738 75.8323 78.8687C75.5463 79.8398 68.9997 76.6152 64.7899 75.2982C61.7334 74.3548 60.7 77.3118 63.6134 78.7396C67.0782 80.4672 72.8658 81.7842 72.7459 82.4993C72.6075 83.2304 67.3066 81.6966 64.1002 80.744C61.4705 79.9597 60.7093 83.1405 63.0967 83.8532C66.6768 84.9419 73.1103 85.9383 73.0135 86.5957C72.882 87.4998 68.9743 86.5219 66.8683 86.169C64.3124 85.7492 64.0171 88.4455 66.114 88.9138C69.7679 89.7234 78.7642 91.3472 81.2647 91.7439C87.1308 92.7057 93.1675 82.6284 88.0489 76.8528V76.8505Z" fill="#B48454"/>
+<path d="M83.304 90.9735C96.3394 96.1448 102.286 101.724 110.196 108.143C116.911 113.58 123.13 100.513 118.853 97.1412C108.143 88.6923 93.2991 82.9767 89.1123 81.2422C85.1678 79.5814 83.304 90.9735 83.304 90.9735Z" fill="#B48454"/>
+<path opacity="0.1" d="M64.6883 87.3453C64.6052 88.0995 65.2304 88.7638 66.2984 88.9991C67.3664 89.2344 79.4907 91.5594 80.9024 91.7785C82.3141 91.9976 83.7005 91.6632 84.231 91.3725C84.231 91.3725 93.082 94.4495 103.137 102.442C113.192 110.432 112.858 113.128 117.155 107.996C117.155 107.996 101.193 95.0353 89.3982 90.699C86.7431 89.7234 87.7119 89.0798 87.7512 87.4675C87.7904 85.8576 85.7004 90.2862 82.298 90.3669C78.914 90.4292 66.596 88.1664 65.8393 87.8366C65.0804 87.5068 64.9466 86.5864 65.1635 86.4665C65.2188 86.4896 64.7644 86.7848 64.6929 87.3499L64.6883 87.3453Z" fill="black"/>
+<path opacity="0.1" d="M88.5264 77.4294C89.0685 78.5251 89.8781 80.8132 89.2207 82.6146C88.441 84.845 89.6567 83.551 90.3971 82.9329C91.216 82.2409 93.7465 83.1151 94.2264 83.3342L90.1895 81.6481C90.208 81.6689 89.9035 78.8203 88.5264 77.4294Z" fill="black"/>
+<path opacity="0.1" d="M61.8373 81.4221C61.6573 82.5131 62.8268 83.2673 63.7334 83.3596C64.6376 83.4887 72.8681 85.1818 72.9927 86.6141C72.9927 86.6141 72.7343 86.162 70.1323 85.5693C66.8729 84.8404 63.941 84.3606 63.0298 84.0216C62.0264 83.6571 61.1983 82.6007 61.8373 81.4244V81.4221Z" fill="black"/>
+<path opacity="0.1" d="M61.9687 76.1124C61.6481 76.719 62.144 78.2483 63.3251 78.8134C64.5062 79.3785 67.964 80.6125 70.0354 81.2122C72.1069 81.8119 72.7828 82.2501 72.7274 82.5523C72.7274 82.5523 73.0227 81.7542 69.9639 80.5248C66.9052 79.2955 64.0886 78.7857 63.1313 77.6647C62.174 76.5437 62.2479 75.6188 62.4647 75.4989C62.4647 75.462 62.294 75.5081 61.971 76.1147L61.9687 76.1124Z" fill="black"/>
+<path opacity="0.1" d="M67.2257 71.7415C66.7183 72.2997 67.1266 73.6905 68.5198 74.2118C69.9131 74.7331 76.3397 77.3787 75.8322 78.8664C75.8322 78.8664 75.8737 78.5089 74.2152 77.6486C72.3375 76.6614 68.0954 74.9061 67.4749 74.4886C66.8544 74.0711 66.5176 73.3676 66.6467 72.7864C66.7736 72.2443 67.2234 71.7392 67.2234 71.7392L67.2257 71.7415Z" fill="black"/>
+</g>
+</svg>

static/svgs/guidelines/blobblue_respect.svg

@@ -0,0 +1 @@
+<svg width="45" height="46" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M44.572 22.631c0 12.427-7.428 20.7-22.286 22.5C7.43 46.931 0 35.059 0 22.632c0-12.426 2.476-21 22.286-22.5 19.81-1.5 22.286 10.074 22.286 22.5z" fill="#4C97FF"/></svg>

static/svgs/guidelines/blobgreen_remix.svg

@@ -0,0 +1 @@
+<svg width="45" height="46" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M44.572 22.631c0 12.427-7.428 20.7-22.286 22.5C7.43 46.931 0 35.059 0 22.632c0-12.426 2.476-21 22.286-22.5 19.81-1.5 22.286 10.074 22.286 22.5z" fill="#59C059"/></svg>

static/svgs/guidelines/blobmagenta_feedback.svg

@@ -0,0 +1 @@
+<svg width="45" height="46" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M44.572 22.631c0 12.427-7.428 20.7-22.286 22.5C7.43 46.931 0 35.059 0 22.632c0-12.426 2.476-21 22.286-22.5 19.81-1.5 22.286 10.074 22.286 22.5z" fill="#CF63CF"/></svg>

static/svgs/guidelines/blobpink_friendly.svg

@@ -0,0 +1 @@
+<svg width="45" height="46" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M44.572 22.631c0 12.427-7.428 20.7-22.286 22.5C7.43 46.931 0 35.059 0 22.632c0-12.426 2.476-21 22.286-22.5 19.81-1.5 22.286 10.074 22.286 22.5z" fill="#FF6680"/></svg>

static/svgs/guidelines/blobpurple_honest.svg

@@ -0,0 +1 @@
+<svg width="45" height="46" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M44.572 22.631c0 12.427-7.428 20.7-22.286 22.5C7.43 46.931 0 35.059 0 22.632c0-12.426 2.476-21 22.286-22.5 19.81-1.5 22.286 10.074 22.286 22.5z" fill="#96F"/></svg>

static/svgs/guidelines/blobyellow_safe.svg

@@ -0,0 +1 @@
+<svg width="45" height="46" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M44.572 22.631c0 12.427-7.428 20.7-22.286 22.5C7.43 46.931 0 35.059 0 22.632c0-12.426 2.476-21 22.286-22.5 19.81-1.5 22.286 10.074 22.286 22.5z" fill="#FFAB19"/></svg>

static/svgs/guidelines/header_sprinkles_left.svg

@@ -0,0 +1,27 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 354" width="201" height="354">
+	<title>header_sprinkles-svg</title>
+	<defs>
+		<clipPath clipPathUnits="userSpaceOnUse" id="cp1">
+			<path d="m0 0h1280v354h-1280z"/>
+		</clipPath>
+	</defs>
+	<style>
+		.s0 { opacity: .1;fill: #000000 } 
+		.s1 { opacity: .1;fill: none;stroke: #000000;stroke-miterlimit:10;stroke-width: 2 } 
+		.s2 { opacity: .3;fill: #ffffff } 
+	</style>
+	<g id="Clip-Path" clip-path="url(#cp1)">
+		<g>
+			<path class="s0" d="m1270.5 132.8c27 0 48.6-23.3 48.6-52.1 0-28.8-21.9-52.1-48.6-52.1h-17.7c-27 0-48.6 23.3-48.6 52.1 0 28.8 21.8 52.1 48.6 52.1l-15.7-3.8c2.9 6.9 3.5 11.1 2 25.3-1.8 17.7 13.3 19.5 39.6-22 0.4-0.6 3.3-5 3.7-5.5z"/>
+			<path class="s0" d="m1260.3 113.3c19.1 0 34.5-15.5 34.5-34.6 0-19.1-15.4-34.6-34.5-34.6-19 0-34.5 15.5-34.5 34.6 0 19.1 15.5 34.6 34.5 34.6z"/>
+			<path fill-rule="evenodd" class="s1" d="m1244 84.3c0 0 15.4 10.2 32 0.8"/>
+			<path class="s0" d="m1238.2 77.6c2.3 0 4.2-1.9 4.2-4.2 0-1.1-0.4-2.2-1.2-3-0.8-0.8-1.9-1.2-3-1.2-1.1 0-2.2 0.4-3 1.2-0.8 0.8-1.2 1.9-1.2 3 0 2.3 1.9 4.2 4.2 4.2zm44.2 0c2.3 0 4.2-1.9 4.2-4.2q0-0.8-0.3-1.6-0.3-0.8-0.9-1.4-0.6-0.6-1.4-0.9-0.7-0.3-1.6-0.3c-2.3 0-4.2 1.9-4.2 4.2 0 2.3 1.9 4.2 4.2 4.2z"/>
+			<path class="s0" d="m1225.1 280.9h-81c-13 0-23.5 11.6-23.5 26 0 14.3 10.5 25.9 23.5 25.9h46c0.1 0.3 0.4 0.4 0.6 0.7 12.7 20.8 31.6 25.2 29.9 15.8-1.3-6.9-2.3-13-1-16.5h5.5c13 0 23.5-11.6 23.5-25.9-0.1-14.4-10.5-26-23.5-26z"/>
+			<path fill-rule="evenodd" class="s0" d="m1220.8 302.5c-0.8 8.4-10.3 15.1-12.8 15.1-2.4 0-12-6.7-12.7-15.1v-0.8c0-4.1 3.3-7.4 7.4-7.4 2 0 3.9 0.8 5.3 2.1 1.3-1.4 3.2-2.1 5.4-2.1 4 0 7.4 3.3 7.4 7.4z"/>
+			<path class="s0" d="m1163.5 318.2l3-6.3c0.3-0.4 0.6-0.7 1.2-0.8l6.8-1c1.3-0.2 1.7-1.8 0.9-2.6l-5-4.8c-0.3-0.3-0.5-0.9-0.4-1.3l1.2-6.8c0.1-1.2-1.1-2.2-2.2-1.6l-6.1 3.2c-0.4 0.2-1 0.2-1.4 0l-6.1-3.2c-1.2-0.6-2.5 0.3-2.2 1.6l1.2 6.8c0.1 0.4-0.2 1-0.4 1.3l-5 4.8c-0.8 0.8-0.4 2.3 0.9 2.6l6.8 1c0.4 0 0.9 0.4 1.2 0.8l3 6.3c0.4 1.1 2 1.1 2.6 0z"/>
+			<path class="s2" d="m18.2 15.8c2.4-0.6 4.2-2.6 4.9-4.9l1.5-5.6c0.6-2.7 4.4-2.7 5.1 0l1.4 5.6c0.7 2.4 2.7 4.3 5 4.9l5.6 1.5c2.6 0.7 2.6 4.5 0 5.1l-5.6 1.5c-2.5 0.7-4.3 2.6-5 4.9l-1.4 5.6c-0.7 2.7-4.5 2.7-5.1 0l-1.5-5.6c-0.7-2.4-2.6-4.2-4.9-4.9l-5.6-1.5c-2.7-0.6-2.7-4.4 0-5.1zm1162.3 3.1c1.2-0.3 2-1.2 2.3-2.3l0.7-2.6c0.3-1.3 2.1-1.3 2.4 0l0.7 2.6c0.3 1.2 1.3 2 2.4 2.3l2.6 0.7c1.2 0.3 1.2 2.1 0 2.4l-2.6 0.7c-1.2 0.3-2.1 1.3-2.4 2.3l-0.7 2.7c-0.3 1.2-2.1 1.2-2.4 0l-0.7-2.7c-0.3-1.1-1.2-2-2.3-2.3l-2.6-0.7c-1.3-0.3-1.3-2.1 0-2.4zm-31.1 181.2c1.1-0.3 2-1.2 2.3-2.3l0.7-2.7c0.3-1.2 2.1-1.2 2.4 0l0.7 2.7c0.3 1.1 1.2 2 2.3 2.3l2.6 0.7c1.3 0.3 1.3 2.1 0 2.4l-2.6 0.7c-1.1 0.3-2 1.3-2.3 2.3l-0.7 2.7c-0.3 1.2-2.1 1.2-2.4 0l-0.7-2.7c-0.3-1.1-1.2-2-2.3-2.3l-2.7-0.7c-1.2-0.3-1.2-2.1 0-2.4zm-29-26.5c2.5-0.6 4.3-2.6 4.9-4.9l1.5-5.6c0.7-2.7 4.5-2.7 5.1 0l1.5 5.6c0.6 2.4 2.6 4.3 4.9 4.9l5.6 1.5c2.6 0.7 2.6 4.4 0 5.1l-5.6 1.5c-2.4 0.7-4.3 2.6-4.9 4.9l-1.5 5.6c-0.6 2.7-4.4 2.7-5.1 0l-1.5-5.6c-0.6-2.4-2.6-4.2-4.9-4.9l-5.6-1.5c-2.6-0.7-2.6-4.4 0-5.1zm-1027.8 119.7c2.3-0.6 4-2.4 4.7-4.5l1.3-5.1c0.7-2.4 4.2-2.4 4.8 0l1.4 5.1c0.7 2.2 2.5 3.9 4.7 4.5l5.2 1.3c2.5 0.6 2.5 4.1 0 4.7l-5.2 1.4c-2.3 0.6-4 2.4-4.7 4.5l-1.4 5.1c-0.6 2.4-4.1 2.4-4.8 0l-1.3-5.1c-0.7-2.3-2.5-3.9-4.7-4.5l-5.2-1.4c-2.5-0.6-2.5-4.1 0-4.7zm28.2-16.6c1.1-0.3 1.9-1.1 2.2-2.1l0.7-2.5c0.3-1.2 1.9-1.2 2.2 0l0.7 2.5c0.3 1 1.1 1.8 2.2 2.1l2.4 0.7c1.2 0.3 1.2 2 0 2.2l-2.4 0.7c-1.1 0.3-1.9 1.2-2.2 2.2l-0.7 2.5c-0.3 1.1-1.9 1.1-2.2 0l-0.7-2.5c-0.3-1.1-1.1-1.9-2.2-2.2l-2.4-0.7c-1.2-0.2-1.2-1.9 0-2.2z"/>
+			<path class="s0" d="m116.9 220.6c28.4 0 51.4-24.7 51.4-55.1 0-30.4-23.1-55-51.4-55h-147c-28.5-0.2-51.6 24.4-51.6 54.9 0 30.4 23.1 55 51.4 55h12.3c3 7.4 0.7 20.3-2.2 35.2-3.9 20 37.8 10.5 65.5-33.4 0.5-0.6 0.7-1.2 1.2-1.6z"/>
+			<path fill-rule="evenodd" class="s0" d="m39 156.7c-2.1 22.7-27.7 40.5-34.2 40.5-6.5 0-32-17.8-34.1-40.5 0-0.7-0.1-1.5-0.1-2.2 0-11 8.9-19.8 19.9-19.8q2-0.1 4 0.3 2 0.4 3.8 1.2 1.9 0.8 3.5 2 1.7 1.1 3 2.5 1.4-1.4 3.1-2.5 1.6-1.2 3.5-2 1.8-0.8 3.8-1.2 1.9-0.4 4-0.3c10.9 0 19.9 8.9 19.9 19.8 0 0.7-0.1 1.5-0.1 2.2zm78.2 2.7c-1.5 16-19.4 28.4-24 28.4-4.7 0-22.6-12.4-24-28.4 0-0.5-0.2-1-0.2-1.6 0-7.6 6.4-14 14-14 4 0 7.6 1.6 10 4.2 2.5-2.6 6.1-4.2 10-4.2 7.8 0 14 6.2 14 14 0.3 0.6 0.2 1.2 0.2 1.6z"/>
+		</g>
+	</g>
+</svg>

static/svgs/guidelines/header_sprinkles_right.svg

@@ -0,0 +1,27 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 224 354" width="224" height="354">
+	<title>header_sprinkles-svg</title>
+	<defs>
+		<clipPath clipPathUnits="userSpaceOnUse" id="cp1">
+			<path d="m-1056 0h1280v354h-1280z"/>
+		</clipPath>
+	</defs>
+	<style>
+		.s0 { opacity: .1;fill: #000000 } 
+		.s1 { opacity: .1;fill: none;stroke: #000000;stroke-miterlimit:10;stroke-width: 2 } 
+		.s2 { opacity: .3;fill: #ffffff } 
+	</style>
+	<g id="Clip-Path" clip-path="url(#cp1)">
+		<g>
+			<path class="s0" d="m214.5 132.8c27 0 48.6-23.3 48.6-52.1 0-28.8-21.9-52.1-48.6-52.1h-17.7c-27 0-48.6 23.3-48.6 52.1 0 28.8 21.8 52.1 48.6 52.1l-15.7-3.8c2.9 6.9 3.5 11.1 2 25.3-1.8 17.7 13.3 19.5 39.6-22 0.4-0.6 3.3-5 3.7-5.5z"/>
+			<path class="s0" d="m204.3 113.3c19.1 0 34.5-15.5 34.5-34.6 0-19.1-15.4-34.6-34.5-34.6-19 0-34.5 15.5-34.5 34.6 0 19.1 15.5 34.6 34.5 34.6z"/>
+			<path fill-rule="evenodd" class="s1" d="m188 84.3c0 0 15.4 10.2 32 0.8"/>
+			<path class="s0" d="m182.2 77.6c2.3 0 4.2-1.9 4.2-4.2 0-1.1-0.4-2.2-1.2-3-0.8-0.8-1.9-1.2-3-1.2-1.1 0-2.2 0.4-3 1.2-0.8 0.8-1.2 1.9-1.2 3 0 2.3 1.9 4.2 4.2 4.2zm44.2 0c2.4 0 4.2-1.9 4.2-4.2q0-0.8-0.3-1.6-0.3-0.8-0.9-1.4-0.6-0.6-1.4-0.9-0.7-0.3-1.6-0.3c-2.3 0-4.2 1.9-4.2 4.2 0 2.3 1.9 4.2 4.2 4.2z"/>
+			<path class="s0" d="m169.1 280.9h-81c-13 0-23.5 11.6-23.5 26 0 14.3 10.5 25.9 23.5 25.9h46c0.1 0.3 0.4 0.4 0.6 0.7 12.7 20.8 31.6 25.2 29.9 15.8-1.3-6.9-2.3-13-1-16.5h5.5c13 0 23.5-11.6 23.5-25.9-0.1-14.4-10.5-26-23.5-26z"/>
+			<path fill-rule="evenodd" class="s0" d="m164.8 302.5c-0.8 8.4-10.3 15.1-12.8 15.1-2.4 0-12-6.7-12.7-15.1v-0.8c0-4.1 3.3-7.4 7.4-7.4 2 0 3.9 0.8 5.3 2.1 1.3-1.4 3.2-2.1 5.4-2.1 4 0 7.3 3.3 7.3 7.4z"/>
+			<path class="s0" d="m107.5 318.2l3-6.3c0.3-0.4 0.6-0.7 1.2-0.8l6.8-1c1.3-0.2 1.7-1.8 0.9-2.6l-5-4.8c-0.3-0.3-0.5-0.9-0.4-1.3l1.2-6.8c0.1-1.2-1.1-2.2-2.2-1.6l-6.1 3.2c-0.4 0.2-1 0.2-1.4 0l-6.1-3.2c-1.2-0.6-2.5 0.3-2.2 1.6l1.2 6.8c0.1 0.4-0.2 1-0.4 1.3l-5 4.8c-0.8 0.8-0.4 2.3 0.9 2.6l6.8 1c0.4 0 0.9 0.4 1.2 0.8l3 6.3c0.4 1.1 2 1.1 2.6 0z"/>
+			<path class="s2" d="m-1037.8 15.8c2.4-0.6 4.2-2.6 4.9-4.9l1.5-5.6c0.6-2.7 4.4-2.7 5.1 0l1.4 5.6c0.7 2.4 2.7 4.3 5 4.9l5.6 1.5c2.6 0.7 2.6 4.5 0 5.1l-5.6 1.5c-2.5 0.7-4.3 2.6-5 4.9l-1.4 5.6c-0.7 2.7-4.5 2.7-5.1 0l-1.5-5.6c-0.7-2.4-2.6-4.2-4.9-4.9l-5.6-1.5c-2.7-0.6-2.7-4.4 0-5.1zm1162.3 3.1c1.2-0.3 2-1.2 2.3-2.3l0.7-2.6c0.3-1.3 2.1-1.3 2.4 0l0.7 2.6c0.3 1.2 1.3 2 2.4 2.3l2.6 0.7c1.2 0.3 1.2 2.1 0 2.4l-2.6 0.7c-1.2 0.3-2.1 1.3-2.4 2.3l-0.7 2.7c-0.3 1.2-2.1 1.2-2.4 0l-0.7-2.7c-0.3-1.1-1.2-2-2.3-2.3l-2.6-0.7c-1.3-0.3-1.3-2.1 0-2.4zm-31.1 181.2c1.1-0.3 2-1.2 2.3-2.3l0.7-2.7c0.3-1.2 2.1-1.2 2.4 0l0.7 2.7c0.3 1.1 1.2 2 2.3 2.3l2.6 0.7c1.3 0.3 1.3 2.1 0 2.4l-2.6 0.7c-1.1 0.3-2 1.3-2.3 2.3l-0.7 2.7c-0.3 1.2-2.1 1.2-2.4 0l-0.7-2.7c-0.3-1.1-1.2-2-2.3-2.3l-2.7-0.7c-1.2-0.3-1.2-2.1 0-2.4zm-29-26.5c2.5-0.6 4.3-2.6 4.9-4.9l1.5-5.6c0.7-2.7 4.5-2.7 5.1 0l1.5 5.6c0.6 2.4 2.6 4.3 4.9 4.9l5.6 1.5c2.6 0.7 2.6 4.4 0 5.1l-5.6 1.5c-2.4 0.7-4.3 2.6-4.9 4.9l-1.5 5.6c-0.6 2.7-4.4 2.7-5.1 0l-1.5-5.6c-0.6-2.4-2.6-4.2-4.9-4.9l-5.6-1.5c-2.6-0.7-2.6-4.4 0-5.1zm-1027.8 119.7c2.3-0.6 4-2.4 4.7-4.5l1.3-5.1c0.7-2.4 4.2-2.4 4.8 0l1.4 5.1c0.7 2.2 2.5 3.9 4.7 4.5l5.2 1.3c2.5 0.6 2.5 4.1 0 4.7l-5.2 1.4c-2.3 0.6-4 2.4-4.7 4.5l-1.4 5.1c-0.6 2.4-4.1 2.4-4.8 0l-1.3-5.1c-0.7-2.3-2.5-3.9-4.7-4.5l-5.2-1.4c-2.5-0.6-2.5-4.1 0-4.7zm28.2-16.6c1.1-0.3 1.9-1.1 2.2-2.1l0.7-2.5c0.3-1.2 1.9-1.2 2.2 0l0.7 2.5c0.3 1 1.1 1.8 2.2 2.1l2.4 0.7c1.2 0.3 1.2 2 0 2.2l-2.4 0.7c-1.1 0.3-1.9 1.2-2.2 2.2l-0.7 2.5c-0.3 1.1-1.9 1.1-2.2 0l-0.7-2.5c-0.3-1.1-1.1-1.9-2.2-2.2l-2.4-0.7c-1.2-0.2-1.2-1.9 0-2.2z"/>
+			<path class="s0" d="m-939.1 220.6c28.5 0 51.4-24.7 51.4-55.1 0-30.4-23.1-55-51.4-55h-147c-28.5-0.2-51.6 24.4-51.6 54.9 0 30.4 23.1 55 51.4 55h12.3c3 7.4 0.7 20.3-2.2 35.2-3.9 20 37.8 10.5 65.5-33.4 0.5-0.6 0.7-1.2 1.2-1.6z"/>
+			<path fill-rule="evenodd" class="s0" d="m-1017 156.7c-2.1 22.7-27.7 40.5-34.2 40.5-6.5 0-32-17.8-34.1-40.5 0-0.7-0.1-1.5-0.1-2.2 0-11 8.9-19.8 19.9-19.8q2-0.1 4 0.3 2 0.4 3.8 1.2 1.9 0.8 3.5 2 1.7 1.1 3 2.5 1.4-1.4 3.1-2.5 1.6-1.2 3.5-2 1.8-0.8 3.8-1.2 1.9-0.4 4-0.3c10.9 0 19.9 8.9 19.9 19.8 0 0.7-0.1 1.5-0.1 2.2zm78.2 2.7c-1.5 16-19.4 28.4-24 28.4-4.7 0-22.6-12.4-24-28.4 0-0.5-0.2-1-0.2-1.6 0-7.6 6.4-14 14-14 4 0 7.6 1.6 10 4.2 2.5-2.6 6.1-4.2 10-4.2 7.8 0 14 6.2 14 14 0.3 0.6 0.2 1.2 0.2 1.6z"/>
+		</g>
+	</g>
+</svg>

static/svgs/guidelines/illustration_learn_more.svg

@@ -0,0 +1,21 @@
+<svg width="360" height="360" viewBox="0 0 360 360" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.3633 67.768C70.5711 26.4296 215.385 28.6821 285.363 80.7676C322.505 108.397 396.426 229.869 291.416 286.124C245.694 310.617 156.911 311.364 104.287 272.135C98.1483 267.559 93.5905 261.245 90.0314 254.466C29.8569 139.854 -11.691 115.368 32.3633 67.768Z" fill="#0FBD8C"/>
+<path d="M107.855 320.009C94.7183 324.907 41.9505 298.05 32.2258 278.631C27.1001 268.36 0.0265617 181.281 27.6749 180.655C41.2962 180.355 72.1233 252.972 81.2347 265.47C96.5873 286.54 123.445 314.191 107.855 320.009Z" fill="#0FBD8C"/>
+<path d="M209.096 249.909C266.03 245.929 311.361 230.941 310.346 216.434C309.332 201.926 262.356 193.393 205.422 197.375C148.488 201.355 103.156 216.343 104.171 230.85C105.185 245.357 152.161 253.891 209.096 249.909Z" fill="black" fill-opacity="0.1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M104.018 233.118C103.589 233.066 103.268 232.7 103.268 232.267V145.472C103.268 145.208 103.386 144.959 103.592 144.796L151.904 106.602C152.056 106.482 152.244 106.419 152.434 106.419C152.456 106.419 260.469 114.813 260.469 114.813C260.915 114.848 261.258 115.221 261.258 115.667V199.879C261.258 200.112 261.163 200.336 260.994 200.5L213.129 246.288C212.969 246.44 212.759 246.524 212.54 246.524C212.505 246.524 212.472 246.522 212.436 246.518L104.018 233.118Z" fill="#CC9900"/>
+<path d="M211.452 242.393L257.284 198.548V118.552C256.809 118.514 256.232 118.47 255.521 118.415C250.457 118.021 250.457 118.021 243.284 117.464C230.626 116.48 217.968 115.496 206.152 114.578H206.144C190.955 113.398 178.297 112.414 169.014 111.694C163.739 111.283 159.623 110.964 156.774 110.743C155.311 110.629 154.184 110.541 153.407 110.481L107.243 146.978V229.512L211.452 242.393ZM104.018 233.118C103.589 233.066 103.268 232.7 103.268 232.267V145.472C103.268 145.208 103.386 144.959 103.592 144.796L151.904 106.602C152.056 106.482 152.244 106.419 152.434 106.419C152.456 106.419 260.469 114.813 260.469 114.813C260.915 114.848 261.258 115.221 261.258 115.667V199.879C261.258 200.112 261.163 200.336 260.994 200.5L213.129 246.288C212.969 246.44 212.759 246.524 212.54 246.524C212.505 246.524 212.472 246.522 212.436 246.518L104.018 233.118Z" fill="black" fill-opacity="0.2"/>
+<path d="M154.938 150.14C154.938 151.237 154.048 152.127 152.95 152.127C151.853 152.127 150.963 151.237 150.963 150.14V111.387C150.963 110.29 151.853 109.399 152.95 109.399C154.048 109.399 154.938 110.29 154.938 111.387V150.14Z" fill="black" fill-opacity="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M213.562 240.837L258.04 198.897V169.261L241.045 184.437L213.562 157.095V240.837Z" fill="#B38600"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M108.474 146.441L151.175 150.415V111.838L108.474 146.441Z" fill="#B38600"/>
+<path d="M214.438 158.752C214.403 159.709 214.369 161.115 214.339 162.966C214.278 166.684 214.225 172.183 214.183 179.464C214.101 194.032 214.06 215.724 214.06 244.536C214.06 245.634 213.17 246.524 212.072 246.524C210.975 246.524 210.085 245.634 210.085 244.536C210.085 180.891 210.219 157.351 210.792 156.207C211.283 155.224 212.477 154.826 213.458 155.317C214.44 155.808 214.837 157.002 214.347 157.984C214.488 157.701 214.484 157.797 214.489 157.723C214.472 157.954 214.455 158.301 214.438 158.752Z" fill="black" fill-opacity="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M188.433 133.248C186.333 133.248 184.345 132.266 182.98 130.555L160.648 102.584C158.805 100.277 158.397 97.1278 159.583 94.3708C160.767 91.6108 163.265 89.8981 166.099 89.8981H176.225V58.3379C176.225 54.7158 178.976 51.7679 182.357 51.7679H195.26C198.643 51.7679 201.391 54.7158 201.391 58.3379V89.8981H211.343C214.197 89.8981 216.702 91.6278 217.881 94.4138C219.057 97.1978 218.618 100.359 216.737 102.656L193.823 130.631C192.463 132.294 190.498 133.248 188.433 133.248Z" fill="#59C059"/>
+<path d="M188.433 128.279C188.991 128.279 189.551 128.007 189.98 127.482L212.894 99.5078C213.6 98.6458 213.766 97.4428 213.304 96.3478C212.89 95.3678 212.164 94.8668 211.343 94.8668H196.423V58.3379C196.423 57.3851 195.818 56.7362 195.26 56.7362H182.357C181.799 56.7362 181.194 57.3857 181.194 58.3379V94.8668H166.099C165.288 94.8668 164.563 95.3648 164.147 96.3338C163.681 97.4158 163.837 98.6158 164.531 99.4838L186.864 127.457C187.297 128 187.863 128.279 188.433 128.279ZM188.433 133.248C186.333 133.248 184.345 132.266 182.98 130.555L160.648 102.584C158.805 100.277 158.397 97.1278 159.583 94.3708C160.767 91.6108 163.265 89.8981 166.099 89.8981H176.225V58.3379C176.225 54.7158 178.976 51.7679 182.357 51.7679H195.26C198.643 51.7679 201.391 54.7158 201.391 58.3379V89.8981H211.343C214.197 89.8981 216.702 91.6278 217.881 94.4138C219.057 97.1978 218.618 100.359 216.737 102.656L193.823 130.631C192.463 132.294 190.498 133.248 188.433 133.248Z" fill="black" fill-opacity="0.15"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M212.614 156.008C212.497 155.663 212.618 155.246 212.914 155.026L259.995 115.566C260.15 115.434 260.35 115.363 260.558 115.362C261.026 115.362 261.106 115.445 286.85 141.467C287.181 141.803 287.174 142.341 286.831 142.666C286.391 143.082 243.035 184.207 242.579 184.649C242.418 184.806 242.138 184.918 241.91 184.918C239.254 184.918 212.713 156.299 212.614 156.008Z" fill="#CC9900"/>
+<path d="M219.765 157.935C222.717 161.096 226.034 164.587 229.155 167.803C233.005 171.77 236.361 175.117 238.947 177.543C240.014 178.546 240.934 179.375 241.687 180.015C248.784 173.277 273.951 149.403 281.772 141.986C267.711 127.772 264.334 124.368 261.573 121.624C261.118 121.171 260.719 120.776 260.372 120.435L217.955 155.988C218.501 156.58 219.114 157.237 219.765 157.935ZM212.614 156.008C212.497 155.663 212.618 155.246 212.914 155.026L259.995 115.566C260.15 115.434 260.35 115.363 260.558 115.362C261.026 115.362 261.106 115.445 286.85 141.467C287.181 141.803 287.174 142.341 286.831 142.666C286.391 143.082 243.035 184.207 242.579 184.649C242.418 184.806 242.138 184.918 241.91 184.918C239.254 184.918 212.713 156.299 212.614 156.008Z" fill="black" fill-opacity="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M88.4871 182.005C88.3489 181.779 88.3251 181.503 88.4225 181.256L102.337 145.713C102.464 145.385 102.781 145.171 103.129 145.171C103.154 145.171 212.79 155.431 212.79 155.431C213.064 155.454 213.305 155.61 213.444 155.844C213.583 156.078 213.602 156.367 213.491 156.615L197.518 193.349C197.383 193.662 197.076 193.86 196.739 193.86C196.709 193.86 89.1252 182.408 89.1252 182.408C88.8612 182.381 88.6243 182.232 88.4871 182.005Z" fill="#CC9900"/>
+<path d="M207.708 158.946C202.57 158.466 202.57 158.466 195.289 157.785C182.441 156.582 169.592 155.381 157.598 154.259L157.589 154.258C142.172 152.815 129.324 151.613 119.901 150.732C114.547 150.231 110.369 149.84 107.477 149.57C106.588 149.486 105.821 149.415 105.179 149.355L93.6168 178.89C93.7914 178.909 93.975 178.928 94.1688 178.948C99.2113 179.486 99.2113 179.486 106.356 180.246C118.963 181.588 131.572 182.93 143.341 184.182L143.353 184.183C158.481 185.794 171.089 187.136 180.336 188.12C185.59 188.678 189.689 189.115 192.528 189.416C193.404 189.509 194.159 189.59 194.79 189.656L208.127 158.986C207.993 158.974 207.853 158.96 207.708 158.946ZM88.4871 182.005C88.3489 181.779 88.3251 181.503 88.4225 181.256L102.337 145.713C102.464 145.385 102.781 145.171 103.129 145.171C103.154 145.171 212.79 155.431 212.79 155.431C213.064 155.454 213.305 155.61 213.444 155.844C213.583 156.078 213.602 156.367 213.491 156.615L197.518 193.349C197.383 193.662 197.076 193.86 196.739 193.86C196.709 193.86 89.1252 182.408 89.1252 182.408C88.8612 182.381 88.6243 182.232 88.4871 182.005Z" fill="black" fill-opacity="0.2"/>
+<path d="M54.6349 251.695C53.1051 251.278 51.8534 250.026 51.4362 248.496L50.4627 245.02C50.0455 243.351 47.6812 243.351 47.264 245.02L46.2905 248.496C45.8733 250.026 44.6216 251.278 43.0918 251.695L39.615 252.669C37.9461 253.086 37.9461 255.45 39.615 255.867L43.0918 256.841C44.6216 257.258 45.8733 258.51 46.2905 260.039L47.264 263.516C47.6812 265.185 50.0455 265.185 50.4627 263.516L51.4362 260.039C51.8534 258.51 53.1051 257.258 54.6349 256.841L58.1117 255.867C59.7806 255.45 59.7806 253.086 58.1117 252.669L54.6349 251.695Z" fill="#FFBF00"/>
+<path d="M314.416 187.678C313.249 187.367 312.394 186.433 312.083 185.345L311.383 182.701C311.072 181.457 309.283 181.457 308.972 182.701L308.273 185.345C307.962 186.511 307.028 187.367 305.94 187.678L303.296 188.377C302.052 188.688 302.052 190.477 303.296 190.788L305.94 191.488C307.106 191.799 307.962 192.732 308.273 193.821L308.972 196.464C309.283 197.708 311.072 197.708 311.383 196.464L312.083 193.821C312.394 192.654 313.327 191.799 314.416 191.488L317.059 190.788C318.304 190.477 318.304 188.688 317.059 188.377L314.416 187.678Z" fill="#FFBF00"/>
+<path d="M97.4593 99.4268C95.2643 98.8788 93.4356 97.0498 92.7041 94.6718L91.241 89.5511C90.5094 87.1735 87.0345 87.1735 86.4858 89.5511L85.0226 94.6718C84.4739 96.8668 82.6451 98.6958 80.2675 99.4268L75.1465 100.891C72.7689 101.622 72.7689 105.097 75.1465 105.646L80.2675 107.109C82.4622 107.657 84.2911 109.486 85.0226 111.864L86.4858 116.985C87.2173 119.362 90.6923 119.362 91.241 116.985L92.7041 111.864C93.2527 109.669 95.0813 107.84 97.4593 107.109L102.58 105.646C104.957 104.914 104.957 101.439 102.58 100.891L97.4593 99.4268Z" fill="#FFBF00"/>
+<path d="M61.8756 271.937C61.2536 271.781 60.787 271.314 60.6315 270.692L60.2427 269.293C60.0872 268.593 59.0763 268.593 58.9208 269.293L58.532 270.692C58.3765 271.314 57.9099 271.781 57.2879 271.937L55.8882 272.325C55.1884 272.481 55.1884 273.492 55.8882 273.647L57.2879 274.036C57.9099 274.192 58.3765 274.658 58.532 275.28L58.9208 276.68C59.0763 277.38 60.0872 277.38 60.2427 276.68L60.6315 275.28C60.787 274.658 61.2536 274.192 61.8756 274.036L63.2753 273.647C63.9751 273.492 63.9751 272.481 63.2753 272.325L61.8756 271.937Z" fill="#FFBF00"/>
+</svg>

webpack.config.js

@@ -271,6 +271,7 @@ module.exports = {
         new webpack.DefinePlugin({
             'process.env.NODE_ENV': `"${process.env.NODE_ENV || 'development'}"`,
             'process.env.API_HOST': `"${process.env.API_HOST || 'https://api.scratch.mit.edu'}"`,
+            'process.env.ROOT_URL': `"${process.env.ROOT_URL || 'https://scratch.mit.edu'}"`,
             'process.env.RECAPTCHA_SITE_KEY': `"${
                 process.env.RECAPTCHA_SITE_KEY || '6Lf6kK4UAAAAABKTyvdSqgcSVASEnMrCquiAkjVW'}"`,
             'process.env.ASSET_HOST': `"${process.env.ASSET_HOST || 'https://assets.scratch.mit.edu'}"`,