progress on onboarding

src/routes.json

@@ -239,6 +239,13 @@
         "view": "scratch_1.4/scratch_1.4",
         "title": "Scratch 1.4"
     },
+    {
+        "name": "scratcher-onboarding",
+        "pattern": "^/scratcher-onboarding/?$",
+        "routeAlias": "/scratcher-onboarding",
+        "view": "scratcher-onboarding/scratcher-onboarding",
+        "title": "Congratulations!"
+    },
     {
         "name": "download-scratch2",
         "pattern": "^/download/scratch2/?(\\?.*)?$",

src/views/scratcher-onboarding/scratcher-onboarding.jsx

@@ -0,0 +1,90 @@
+import React, {useState} from 'react';
+const FormattedMessage = require('react-intl').FormattedMessage;
+const render = require('../../lib/render.jsx');
+
+const Button = require('../../components/forms/button.jsx');
+const Page = require('../../components/page/www/page.jsx');
+const Video = require('../../components/video/video.jsx');
+
+require('./scratcher-onboarding.scss');
+
+const OnboardingNavigation = ({page, totalPages}) => {
+    const dots = [];
+
+    for (let i = 1; i < totalPages; i++){
+        dots.push(<div className={`dot ${page === i ? 'active' : ''}`} />);
+    }
+
+    return (
+        <div>
+            {dots}
+        </div>
+    );
+};
+
+const ScratcherOnboarding = ({name}) => {
+    const [page, setPage] = useState(1);
+    const totalPages = 9;
+
+    const NextPage = () => {
+        setPage(Math.min(page + 1, totalPages));
+    };
+    const BackPage = () => {
+        setPage(Math.max(page - 1, 1));
+    };
+
+    if (page === 1){
+        return (
+            <div className="onboarding">
+                <div className="left-art">
+                    test
+                </div>
+                <div className="right-content">
+                    <h1>Congratulations {name}! You have shown that you are ready to become a Scratcher.</h1>
+                    <div>
+                    Scratch is a friendly and welcoming community for everyone, where people create, share, and learn together. We welcome people of all ages, races, ethnicities, religions, abilities, sexual orientations, and gender identities.
+                    The next few pages will take you through the community guidelines and explain what this means.
+                    </div>
+                    { /* eslint-disable react/jsx-no-bind */ }
+                    <Button onClick={NextPage}>
+                        Get started
+                    </Button>
+                </div>
+            </div>
+        );
+    } else if (page < 8) {
+    
+        return (
+            <div className="onboarding">
+                <div className="left-art">
+                    test
+                </div>
+                <div className="right-content">
+                    <h1>Congratulations {name}! You have shown that you are ready to become a Scratcher.</h1>
+                    <div>
+                    Scratch is a friendly and welcoming community for everyone, where people create, share, and learn together. We welcome people of all ages, races, ethnicities, religions, abilities, sexual orientations, and gender identities.
+                    The next few pages will take you through the community guidelines and explain what this means.
+                    </div>
+                </div>
+                <div className="navigation">
+                    { /* eslint-disable react/jsx-no-bind */ }
+                    <Button onClick={BackPage}>
+                        Back
+                    </Button>
+                    <OnboardingNavigation
+                        page={page}
+                        totalPages={totalPages}
+                    />
+                    { /* eslint-disable react/jsx-no-bind */ }
+                    <Button onClick={NextPage}>
+                        Next
+                    </Button>
+                </div>
+            </div>
+        );
+    }
+    return (null);
+    
+};
+
+render(<ScratcherOnboarding />, document.getElementById('app'));

src/views/scratcher-onboarding/scratcher-onboarding.scss

@@ -0,0 +1,56 @@
+@import "../../colors";
+@import "../../frameless";
+
+body{
+    background-color: white !important;
+}
+.onboarding {
+    display: flex;
+    height: 100vh;
+    background-color: white;
+    flex-direction: row;
+    line-height: 1.87rem;
+
+    button{
+        padding: .3em .9em;
+    }
+
+    .dot{
+        width: 5px;
+        height: 5px;
+        border: solid 2px black;
+    }
+
+    .dot.active{
+        background-color: red;
+    }
+
+    @media #{$medium-and-smaller} {
+        flex-direction: column;
+    }
+    .left-art{
+        background-color: #E9F1FC;
+        display: flex;
+        flex: 4;
+        @media #{$medium-and-smaller} {
+            flex: 12
+        }
+    
+        @media #{$small} {
+            display: flex;
+        }
+    }
+    .right-content{
+        flex: 8;
+        padding: 40px;
+        @media #{$medium-and-smaller} {
+            flex: 12;
+        }
+    
+        @media #{$small} {
+            p {
+                width: 300px;
+            }
+        }
+    }
+}