Merge pull request #601 from technoboy10/educator-landing

Fix GH-311: Educator landing page

src/routes.json

@@ -67,6 +67,12 @@
         "view": "faq/faq",
         "title": "FAQ"
     },
+    {
+        "name": "educator-landing",
+        "pattern": "^/educators/?$",
+        "view": "teachers/landing/landing",
+        "title": "Educators"
+    },
     {
         "name": "teacher-faq",
         "pattern": "^/educators/faq/?$",

src/views/teachers/landing/landing.jsx

+var React = require('react');
+var render = require('../../../lib/render.jsx');
+
+var Page = require('../../../components/page/www/page.jsx');
+var FlexRow = require('../../../components/flex-row/flex-row.jsx');
+var SubNavigation = require('../../../components/subnavigation/subnavigation.jsx');
+var TitleBanner = require('../../../components/title-banner/title-banner.jsx');
+var Button = require('../../../components/forms/button.jsx');
+
+require('./landing.scss');
+
+var Landing = React.createClass({
+    type: 'Landing',
+    render: function () {
+        return (
+            <div className="educators">
+                <TitleBanner className="masthead">
+                    <div className="inner">
+                        <h1>Scratch for Educators</h1>
+                        <FlexRow className="masthead-info">
+                            <p className="intro">
+                                Your students can use Scratch to code their own{' '}
+                                interactive stories, animations, and games.{' '}
+                                In the process, they learn to think creatively,{' '}
+                                reason systematically, and work{' '}
+                                collaboratively — essential skills for everyone in today’s society.
+                            </p>
+                            <iframe src="https://www.youtube.com/embed/uPSuG063jhA"
+                                frameborder="0" allowfullscreen></iframe>
+                        </FlexRow>
+                    </div>
+                    <div className="band">
+                        <SubNavigation className="inner">
+                            <a href="#in-practice">
+                                <li>
+                                    In Practice
+                                </li>
+                            </a>
+                            <a href="#resources">
+                                <li>
+                                    Resources
+                                </li>
+                            </a>
+                            <a href="#teacher-accounts">
+                                <li>
+                                    Teacher Accounts
+                                </li>
+                            </a>
+                        </SubNavigation>
+                    </div>
+                </TitleBanner>
+
+                <div className="inner">
+                    <section id="in-practice">
+                        <span className="nav-spacer"></span>
+                        <h2>Who Uses Scratch?</h2>
+                        <p className="intro">Educators are using Scratch in a wide variety of: </p>
+                        <FlexRow className="general-usage">
+                            <p><b>Settings:</b> schools, museums, libraries, community centers</p>
+                            <p><b>Grade Levels:</b> elementary, middle, and high school (and some colleges too!)</p>
+                            <p><b>Subject Areas:</b> language arts, science, social studies,{' '}
+                                math, computer science, foreign languages, and the arts</p>
+                        </FlexRow>
+                        <FlexRow className="stories">
+                            <div className="story">
+                                <img src="/images/teachers/stories/ingrid.jpg" alt="ingrid's story" />
+                                <div className="story-info">
+                                     <a href="//bit.ly/28SBsa9">Ingrid Gustafson</a>
+                                     <p>Instructional Technology Specialist</p>
+                                </div>
+                            </div>
+                            <div className="story">
+                                <img src="/images/teachers/stories/dylan.jpg" alt="dylan's story" />
+                                <div className="story-info">
+                                    <a href="//bit.ly/28Q5l6P">Dylan Ryder</a>
+                                    <p>Educational Technologist</p>
+                                </div>
+                            </div>
+                            <div className="story">
+                                <img src="/images/teachers/stories/plug-in-studio.jpg"
+                                     alt="plug in studio's story" />
+                                 <div className="story-info">
+                                     <a href="//bit.ly/28SC1AY">Plug-In Studios</a>
+                                     <p>After-School Program</p>
+                                </div>
+                            </div>
+                            <div className="story">
+                                <img src="/images/teachers/stories/ghana-code-club.jpg"
+                                     alt="ghana code club's story" />
+                                <div className="story-info">
+                                     <a href="//bit.ly/28UzapJ">Ghana Code Club</a>
+                                     <p>After-School Program</p>
+                                </div>
+                            </div>
+                        </FlexRow>
+                    </section>
+                    <section id="resources">
+                        <span className="nav-spacer"></span>
+                        <h2>Educator Resources</h2>
+                        <FlexRow className="educator-community">
+                            <div>
+                                <h3>A Community for Educators</h3>
+                                <p>
+                                    <a href="http://scratched.gse.harvard.edu/">ScratchEd</a> is an{' '}
+                                    online community where Scratch educators{' '}
+                                    <a href="http://scratched.gse.harvard.edu/stories">share stories</a>,
+                                     exchange resources, ask questions, and{' '}
+                                    find people. ScratchEd is developed and supported by{' '}
+                                    the Harvard Graduate School of Education.
+                                </p>
+                            </div>
+                            <div>
+                                <h3>In-Person Gatherings</h3>
+                                <p>
+                                    <a href="http://www.meetup.com/pro/scratched/">Scratch Educator Meetups</a>{' '}
+                                    are gatherings of Scratch Educators who want to learn with and{' '}
+                                    from each other, sharing their ideas and strategies{' '}
+                                    for supporting computational creativity in all its forms.
+                                </p>
+                            </div>
+                        </FlexRow>
+                        <h3 id="guides-header">Guides & Tutorials</h3>
+                        <FlexRow className="guides-and-tutorials">
+                            <div>
+                                <img src="/svgs/teachers/resources.svg" alt="resources icon" />
+                                <p>
+                                    On the <a href="https://scratch.mit.edu/help/">Help Page</a>,{' '}
+                                    you can find workshop guides, Scratch Cards, videos, and other resources.
+                                </p>
+                            </div>
+                            <div>
+                                <img src="/svgs/teachers/tips-window.svg" alt="tips window icon" />
+                                <p>
+                                    The{' '}
+                                    <a href="https://scratch.mit.edu/projects/editor/?tip_bar=home">Tips Window</a>{' '}
+                                    features step-by-step tutorials for getting started in Scratch.
+                                </p>
+                            </div>
+                            <div>
+                                <img src="/svgs/teachers/creative-computing.svg" alt="creative computing icon" />
+                                <p>
+                                    The <a href="http://scratched.gse.harvard.edu/guide/">Creative Computing{' '}
+                                    Curriculum Guide</a>{' '}
+                                    provides plans, activities, and{' '}
+                                    strategies for introducing creative computing.
+                                </p>
+                            </div>
+                        </FlexRow>
+                    </section>
+                </div>
+                <div id="teacher-accounts">
+                    <div className="inner account-flex">
+                        <div id="left">
+                            <h2>Teacher Accounts in Scratch</h2>
+                            <p>
+                                As an educator, you can request a Scratch Teacher Account,{' '}
+                                which makes it easier to create accounts for{' '}
+                                groups of students and to manage your students’{' '}
+                                projects and comments. To learn more, see the{' '}
+                                <a href="faq">Teacher Account FAQ page</a>.
+                            </p>
+                            <a href="register"><Button>Request Account</Button></a>
+                        </div>
+                        <img src="/images/teachers/teacher-account.png" alt="teacher account" id="teacher-icon"/>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+});
+
+render(<Page><Landing /></Page>, document.getElementById('app'));

src/views/teachers/landing/landing.scss

+@import "../../../colors";
+@import "../../../frameless";
+
+$teacher-spot: $ui-purple;
+$story-width: $cols3;
+
+#view {
+    padding: 0;
+}
+
+.educators {
+    .intro {
+        margin: 0;
+    }
+
+    b {
+        font-weight: bold;
+    }
+
+    a {
+        white-space: normal;
+    }
+
+    .title-banner {
+        &.masthead {
+            background-color: $teacher-spot;
+            padding-bottom: 0;
+
+            h1 {
+                margin: 0;
+                color: $ui-white;
+            }
+
+
+            .masthead-info {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+
+                p {
+                    margin: 0;
+                    max-width: $cols6;
+                    text-align: left;
+                    color: $ui-white;
+
+                    a {
+                        border-bottom: 1px solid $ui-white;
+                        color: $ui-white;
+                    }
+                }
+
+                iframe {
+                    margin-bottom: $gutter;
+                    border: 2px solid $ui-border;
+                    border-radius: 10px;
+                    width: $cols4;
+                }
+            }
+
+            .band {
+                $band-color: hsla(360, 100, 100, .15);
+
+                margin-top: 2rem;
+                background-color: $band-color;
+                padding: 1rem 0;
+            }
+
+            .sub-nav {
+                text-align: left;
+
+                li {
+                    margin: 0 .5rem 0 0;
+                }
+            }
+
+        }
+
+        &.faq-banner {
+            margin-bottom: 0;
+            background-color: $ui-gray;
+        }
+    }
+
+    .general-usage {
+        justify-content: space-between;
+
+        p {
+            max-width: $cols4;
+        }
+    }
+
+    .educator-community {
+        margin-bottom: 2rem;
+        text-align: left;
+        justify-content: space-between;
+        align-items: flex-start;
+
+        div {
+            max-width: $cols6;
+        }
+    }
+
+    .guides-and-tutorials {
+        div {
+            max-width: $cols4;
+            text-align: center;
+        }
+    }
+
+    section {
+        margin-bottom: 3rem;
+    }
+
+    #in-practice,
+    #resources {
+        .nav-spacer {
+            display: block;
+            visibility: hidden;
+            margin-top: -50px; // height of  nav bar
+            height: 50px;
+        }
+    }
+
+
+    #in-practice {
+        border-bottom: 1px solid $ui-border;
+        padding-bottom: 2rem;
+
+        .stories {
+            margin: auto;
+            align-items: center;
+            justify-content: space-between;
+            flex-direction: row;
+        }
+
+        .story {
+            margin: 10px auto;
+            border: 1px solid $ui-border;
+            border-radius: 10px;
+            background-color: $ui-white;
+            box-sizing: border-box;
+
+            img {
+                border-top-left-radius: 9px;
+                border-top-right-radius: 9px;
+                width: 100%;
+            }
+
+            .story-info {
+                padding-top: 10px;
+                padding-left: 10px;
+
+                p {
+                    margin: 10px 0;
+                    font-size: .75rem;
+                }
+            }
+        }
+    }
+
+    #resources {
+        h2 {
+            padding-bottom: 2rem;
+            text-align: center;
+        }
+
+        h3 {
+            font-weight: 300;
+        }
+
+        #guides-header {
+            text-align: center;
+        }
+    }
+
+    #teacher-accounts {
+        margin-bottom: -3px;
+        background-color: $teacher-spot;
+        padding: 50px 0;
+        width: 100%;
+        overflow-x: hidden;
+
+        .inner {
+            display: flex;
+            height: 100%;
+            align-items: center;
+        }
+
+        p {
+            margin: 0;
+            text-align: left;
+            color: $ui-white;
+
+            a {
+                border-bottom: 1px solid $ui-white;
+                color: $ui-white;
+            }
+        }
+
+        h2 {
+            margin: 0 0 2rem 0;
+            text-align: left;
+            color: $ui-white;
+        }
+
+        #left {
+            width: $cols4;
+            max-width: $cols4;
+
+            text-align: left;
+
+            p {
+                margin-bottom: 3.5rem;
+            }
+
+            button {
+                background-color: $ui-white;
+                padding: 16px 16px;
+                width: $cols5 / 2;
+                color: $ui-blue;
+                font-size: 16px;
+                font-weight: 500;
+            }
+        }
+
+        img {
+            width: $cols7;
+        }
+    }
+}
+
+//4 columns
+@media only screen and (max-width: $mobile - 1) {
+    $story-width: $cols4;
+
+    .stories {
+        width: $cols4;
+    }
+
+    .story {
+        width: $story-width;
+
+        img {
+            width: $story-width;
+        }
+    }
+
+    .title-banner {
+        &.masthead {
+            padding-bottom: 2rem;
+        }
+
+        .band {
+            display: none;
+        }
+    }
+
+    .flex-row {
+        &.sidebar-row {
+
+            .body-copy {
+                width: 100%;
+            }
+        }
+    }
+
+    #teacher-icon {
+        display: none;
+    }
+
+    .in-practice {
+        text-align: center;
+    }
+
+    .flex-row {
+        align-items: center;
+    }
+
+    .story {
+        margin-left: 50px;
+    }
+
+    .general-usage {
+        align-items: center;
+    }
+
+    .guides-and-tutorials {
+        align-items: center;
+    }
+
+    .account-flex {
+        justify-content: center;
+    }
+}
+
+//6 columns
+@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+    $story-width: $cols3;
+
+    .stories {
+        width: $cols6;
+    }
+
+    .story {
+        width: $story-width;
+    }
+
+    #teacher-icon {
+        display: none;
+    }
+
+    .flex-row {
+        &.sidebar-row {
+
+            .body-copy {
+                width: 100%;
+            }
+
+            .sidebar {
+                margin: 0 auto;
+            }
+        }
+    }
+
+    .in-practice {
+        text-align: center;
+    }
+
+    .flex-row {
+        align-items: center;
+    }
+
+    .story {
+        margin-left: 50px;
+    }
+
+    .general-usage {
+        align-items: center;
+    }
+
+    .guides-and-tutorials {
+        align-items: center;
+    }
+
+    .account-flex {
+        justify-content: center;
+    }
+}
+
+
+//8 columns
+@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+    $story-width: $cols4;
+
+    .stories {
+        width: $cols8;
+    }
+
+    .story {
+        width: $story-width;
+    }
+
+    .masthead {
+        h1 {
+            text-align: center;
+        }
+
+        .subnav {
+            justify-content: center;
+        }
+    }
+
+    .masthead-info {
+        p {
+            width: $cols4;
+        }
+
+        iframe {
+            width: $cols4;
+            box-sizing: border-box;
+        }
+    }
+
+    #view {
+        text-align: left;
+    }
+
+    .flex-row {
+        &.sidebar-row {
+
+            .body-copy {
+                width: 100%;
+            }
+
+            .sidebar {
+                margin: 0 auto;
+            }
+        }
+    }
+
+    #in-practice {
+        h2 {
+            text-align: center;
+        }
+
+        .intro {
+            margin-bottom: 1rem;
+            text-align: center;
+        }
+
+        .general-usage {
+            margin-bottom: 2rem;
+
+            p {
+                margin: .25em 0;
+                max-width: $cols8;
+                text-align: center;
+            }
+        }
+    }
+
+    .educators {
+        #resources {
+            margin: 0 auto;
+            width: $cols6;
+
+            h2 {
+                margin: 0 auto;
+                text-align: left;
+            }
+
+            .educator-community {
+                justify-content: center;
+            }
+
+            #guides-header {
+                margin: auto;
+                width: $cols6;
+                text-align: left;
+            }
+
+            .guides-and-tutorials {
+                div {
+                    display: flex;
+                    max-width: $cols8;
+                    text-align: left;
+                    justify-content: space-between;
+                }
+
+                p {
+                    width: $cols4;
+                }
+
+                img {
+                    margin: 0;
+                    width: $cols2;
+                }
+            }
+        }
+    }
+
+    section {
+        p {
+            width: 100%;
+        }
+    }
+
+    .guides-and-tutorials {
+        margin-bottom: 2rem;
+        justify-content: space-around;
+        align-items: flex-start;
+    }
+
+    #teacher-accounts {
+        .inner {
+            justify-content: space-between;
+        }
+    }
+
+    #left {
+        width: $cols4;
+    }
+}
+
+// 12 columns
+@media only screen and (min-width: $desktop) {
+    $story-width: $cols3;
+
+    .stories {
+        width: $cols12;
+    }
+
+    .story {
+        width: $story-width;
+    }
+
+    .masthead {
+        h1 {
+            text-align: left;
+        }
+
+        .sub-nav {
+            justify-content: flex-start;
+        }
+    }
+
+    .general-usage {
+        align-items: flex-start;
+    }
+
+    .guides-and-tutorials {
+        align-items: flex-start;
+        justify-content: space-between;
+    }
+
+    .account-flex {
+        justify-content: space-between;
+    }
+}

static/svgs/teachers/creative-computing.svg

+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="140" height="116" viewBox="0 0 140 116"><title>creative-computing</title><g opacity="0.1"><rect x="52.5" y="36.5" width="44" height="52" rx="2.12" ry="2.12" fill="#231f20" stroke="#231f20" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/></g><rect x="51.5" y="35.5" width="44" height="52" rx="2.12" ry="2.12" fill="#fff" stroke="#824dcb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><g opacity="0.1"><rect x="48.5" y="32.5" width="44" height="52" rx="2.12" ry="2.12" fill="#231f20" stroke="#231f20" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/></g><rect x="47.5" y="31.5" width="44" height="52" rx="2.12" ry="2.12" fill="#fff" stroke="#824dcb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><g opacity="0.1"><rect x="44.5" y="28.5" width="44" height="52" rx="2.12" ry="2.12" fill="#231f20" stroke="#231f20" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/></g><rect x="43.5" y="27.5" width="44" height="52" rx="2.12" ry="2.12" fill="#fff"/><polygon points="79.5 59.5 43.5 59.5 43.5 51.5 79.5 51.5 75.5 55.5 79.5 59.5" fill="#f7941e" stroke="#ce781b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><rect x="43.5" y="27.5" width="44" height="52" rx="2.12" ry="2.12" fill="none" stroke="#824dcb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="63.5" y1="67.5" x2="79.5" y2="67.5" fill="none" stroke="#a7a9ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="63.5" y1="71.5" x2="67.5" y2="71.5" fill="none" stroke="#a7a9ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="71.5" y1="71.5" x2="79.5" y2="71.5" fill="none" stroke="#a7a9ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/></svg>
\ No newline at end of file

static/svgs/teachers/offline-editor.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="140" height="116" viewBox="0 0 140 116"><title>offline-editor</title><g style="isolation:isolate"><g id="Layer_1" data-name="Layer 1"><path d="M89.64,40.64V68a4,4,0,0,1-4,4H55.31a4,4,0,0,1-4-4V30a4,4,0,0,1,4-4H75Z" fill="#231f20" stroke="#231f20" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4" opacity="0.1"/><path d="M89.64,38.64V66a4,4,0,0,1-4,4H55.31a4,4,0,0,1-4-4V28a4,4,0,0,1,4-4H75Z" fill="#fff"/><path d="M74.94,35.9V25.36L89.58,40H79A4.1,4.1,0,0,1,74.94,35.9Z" fill="#231f20" stroke="#231f20" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4" opacity="0.1"/><path d="M74.94,34.61V24.06L89.58,38.7H79A4.1,4.1,0,0,1,74.94,34.61Z" fill="#fff" stroke="#88898c" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="70.37" y1="70" x2="70.37" y2="52" fill="none" stroke="#bcbec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="67.33" y1="65.76" x2="73.62" y2="65.76" fill="none" stroke="#bcbec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><path d="M89.64,38.64V66a4,4,0,0,1-4,4H55.31a4,4,0,0,1-4-4V28a4,4,0,0,1,4-4H75Z" fill="none" stroke="#88898c" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="67.33" y1="62.23" x2="73.62" y2="62.23" fill="none" stroke="#bcbec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="67.33" y1="58.71" x2="73.62" y2="58.71" fill="none" stroke="#bcbec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="67.33" y1="55.18" x2="73.62" y2="55.18" fill="none" stroke="#bcbec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><path d="M66,37.49a4.19,4.19,0,0,1-1.52,3.22,4.6,4.6,0,0,1-3,1.12,4.74,4.74,0,0,1-.57,0L60.79,42a2.36,2.36,0,0,1-1.64.8H59a2.4,2.4,0,0,1-2.38-2.21s0,0,0-.08v0c0-.88,0-1.61,0-2.06s0-1.42,0-1.61a2.39,2.39,0,0,1,.62-1.57,5.81,5.81,0,0,1-.13-2.34V32.71a5.82,5.82,0,0,1,.57-2.09,3.33,3.33,0,0,1,3-1.8H61l0.42,0a2.37,2.37,0,0,1,1.63-.62,2.4,2.4,0,0,1,2.35,2.39s-0.11,3.48-.17,3.78a2.43,2.43,0,0,1-.16.53A3.82,3.82,0,0,1,66,37.49Z" fill="#f9a83a"/><path d="M60.83,35c-0.62-.1-0.94-0.51-0.78-1.78l0-.15c0.14-1.11.25-1.35,0.79-1.32a1,1,0,0,1,.51.26,3,3,0,0,1,.74.94,2.65,2.65,0,0,1,.22.85l0,0.31h0a0.54,0.54,0,0,0,1.06,0s0.14-3.39.14-3.44A0.54,0.54,0,0,0,63,30.11a0.54,0.54,0,0,0-.54.53s0,0.47,0,.94a2.47,2.47,0,0,0-1.57-.91c-1.62-.09-1.8,1.4-1.91,2.26l0,0.15c-0.22,1.7.35,2.77,1.68,3s2.41,0.56,2.42,1.45a1.3,1.3,0,0,1-.49,1,1.72,1.72,0,0,1-1.38.39,2.57,2.57,0,0,1-.42-0.11A3.09,3.09,0,0,1,59.88,38a2.15,2.15,0,0,1-.3-1c0-.13,0-0.21,0-0.22a0.54,0.54,0,1,0-1.08,0s0,1.06-.05,1.69a19,19,0,0,0,0,1.92,0.54,0.54,0,0,0,.57.5,0.53,0.53,0,0,0,.5-0.57s0-.42,0-1a4.14,4.14,0,0,0,1.53.6,2.75,2.75,0,0,0,2.25-.64,2.36,2.36,0,0,0,.87-1.8c0-2-2.26-2.33-3.33-2.5" fill="#fff"/><rect x="36.74" y="85.13" width="66.52" height="6.87" rx="3.43" ry="3.43" fill="#231f20" stroke="#231f20" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.4" opacity="0.1" style="mix-blend-mode:multiply"/><rect x="36.74" y="85.13" width="66.52" height="6.87" rx="3.43" ry="3.43" fill="#b6ecff"/><polygon points="62.61 92 59.02 92 61.13 85.13 64.72 85.13 62.61 92" fill="#2398c1" opacity="0.3"/><polygon points="69.75 92 66.16 92 68.27 85.13 71.86 85.13 69.75 92" fill="#2398c1" opacity="0.3"/><polygon points="76.89 92 73.3 92 75.41 85.13 79 85.13 76.89 92" fill="#2398c1" opacity="0.3"/><polygon points="84.03 92 80.44 92 82.55 85.13 86.14 85.13 84.03 92" fill="#2398c1" opacity="0.3"/><polygon points="91.17 92 87.58 92 89.69 85.13 93.28 85.13 91.17 92" fill="#2398c1" opacity="0.3"/><polygon points="98.32 92 94.72 92 96.83 85.13 100.42 85.13 98.32 92" fill="#2398c1" opacity="0.3"/><rect x="36.74" y="85.13" width="24.28" height="6.87" rx="3.43" ry="3.43" fill="#2398c1" stroke="#2398c1" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><rect x="36.74" y="85.13" width="66.52" height="6.87" rx="3.43" ry="3.43" fill="none" stroke="#2398c1" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><path d="M99,67.55l-9.6,9.6a2.35,2.35,0,0,1-3.32,0l-9.6-9.6a0.94,0.94,0,0,1,.67-1.61h2V55.56a1.63,1.63,0,0,1,1.63-1.63H94.72a1.63,1.63,0,0,1,1.63,1.63V65.95h2A0.94,0.94,0,0,1,99,67.55Z" fill="#f7941e"/><path d="M96.33,55.54v1.32a1.61,1.61,0,0,0-1.61-1.61H80.82a1.61,1.61,0,0,0-1.61,1.61V55.54a1.61,1.61,0,0,1,1.61-1.61h13.9A1.61,1.61,0,0,1,96.33,55.54Z" fill="#fff" opacity="0.2"/><path d="M99,67.55l-9.6,9.6a2.35,2.35,0,0,1-3.32,0l-9.6-9.6a0.94,0.94,0,0,1,.67-1.61h2V55.56a1.63,1.63,0,0,1,1.63-1.63H94.72a1.63,1.63,0,0,1,1.63,1.63V65.95h2A0.94,0.94,0,0,1,99,67.55Z" fill="none" stroke="#ce781b" stroke-miterlimit="10" stroke-width="1.4"/></g></g></svg>
\ No newline at end of file

static/svgs/teachers/resources.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="140" height="116" viewBox="0 0 140 116"><title>resources</title><g style="isolation:isolate"><g id="Layer_1" data-name="Layer 1"><g opacity="0.4" style="mix-blend-mode:multiply"><path d="M97,44.18L91.25,62.24V81.16a2.45,2.45,0,0,1-2.44,2.45H84.43l-0.95,3a2.44,2.44,0,0,1-3.07,1.58L66.18,83.61h-15a2.45,2.45,0,0,1-2.44-2.45V78l-4.17-1.33A2.44,2.44,0,0,1,43,73.66l5.75-18v-19a2.44,2.44,0,0,1,2.44-2.44H73.85l17.4,5.55,4.17,1.33A2.45,2.45,0,0,1,97,44.18Z" fill="#bcbec0" stroke="#bcbec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><path d="M91.25,36.66v3.11l-17.4-5.55h15A2.44,2.44,0,0,1,91.25,36.66Z" fill="#bcbec0" stroke="#bcbec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/></g><rect x="48.74" y="32.47" width="42.52" height="49.4" rx="2.12" ry="2.12" transform="translate(20.68 -18.57) rotate(17.69)" fill="#caa9ff" stroke="#824dcb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><rect x="48.74" y="32.47" width="42.52" height="49.4" rx="2.12" ry="2.12" fill="#caa9ff" stroke="#824dcb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><path d="M54.57,45.78H85.43a0,0,0,0,1,0,0V71.35a3,3,0,0,1-3,3H57.57a3,3,0,0,1-3-3V45.78A0,0,0,0,1,54.57,45.78Z" fill="#fff" stroke="#824dcb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><path d="M57.34,40H82.66a2.77,2.77,0,0,1,2.77,2.77v3a0,0,0,0,1,0,0H54.57a0,0,0,0,1,0,0v-3A2.77,2.77,0,0,1,57.34,40Z" fill="#824dcb" stroke="#824dcb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><polygon points="74.76 61.95 70 66.7 65.24 61.95 67.36 61.95 67.36 57.45 72.64 57.45 72.64 61.95 74.76 61.95" fill="#fff" stroke="#824dcb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="67.93" y1="54.53" x2="72.07" y2="54.53" fill="#fff" stroke="#824dcb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="68.88" y1="51.81" x2="71.12" y2="51.81" fill="#fff" stroke="#824dcb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/></g></g></svg>
\ No newline at end of file

static/svgs/teachers/tips-window.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="140" height="116" viewBox="0 0 140 116"><title>tips-window2</title><g style="isolation:isolate"><g id="Layer_1" data-name="Layer 1"><path d="M19.87,38.13H120.13a0,0,0,0,1,0,0V90.24a4,4,0,0,1-4,4H23.88a4,4,0,0,1-4-4V38.13A0,0,0,0,1,19.87,38.13Z" fill="#231f20" stroke="#231f20" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4" opacity="0.1" style="mix-blend-mode:multiply"/><path d="M19.87,35.82H120.13a0,0,0,0,1,0,0V87.93a4,4,0,0,1-4,4H23.88a4,4,0,0,1-4-4V35.82A0,0,0,0,1,19.87,35.82Z" fill="#e6e7e8"/><path d="M23.88,21.75h92.23a4,4,0,0,1,4,4v10.3a0,0,0,0,1,0,0H19.87a0,0,0,0,1,0,0V25.76A4,4,0,0,1,23.88,21.75Z" fill="#b6ecff" stroke="#2398c1" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><rect x="53.51" y="26.24" width="62.08" height="5.33" rx="2.62" ry="2.62" fill="#fff" stroke="#2398c1" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><circle cx="24.87" cy="28.91" r="1.06" fill="#2398c1"/><circle cx="28.44" cy="28.91" r="1.06" fill="#2398c1"/><circle cx="32" cy="28.91" r="1.06" fill="#2398c1"/><line x1="41.54" y1="28.91" x2="38.21" y2="28.91" fill="none" stroke="#2398c1" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><polyline points="39.74 30.44 38.21 28.91 39.74 27.38" fill="none" stroke="#2398c1" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="45.29" y1="28.91" x2="48.62" y2="28.91" fill="none" stroke="#2398c1" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><polyline points="47.09 27.38 48.62 28.91 47.09 30.44" fill="none" stroke="#2398c1" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><rect x="19.87" y="35.99" width="100.25" height="2.53" fill="#231f20" stroke="#231f20" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4" opacity="0.05"/><path d="M25.94,47.45H60.36a0,0,0,0,1,0,0V65.22a3.42,3.42,0,0,1-3.42,3.42H29.35a3.42,3.42,0,0,1-3.42-3.42V47.45A0,0,0,0,1,25.94,47.45Z" fill="#fff" stroke="#a7a9ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><path d="M25.94,73.23H60.36a0,0,0,0,1,0,0V88.52a3.42,3.42,0,0,1-3.42,3.42H29.35a3.42,3.42,0,0,1-3.42-3.42V73.23a0,0,0,0,1,0,0Z" transform="translate(86.29 165.16) rotate(180)" fill="#fff" stroke="#a7a9ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><path d="M66.52,87.84h46.86a0,0,0,0,1,0,0v2.27a1.83,1.83,0,0,1-1.83,1.83H68.35a1.83,1.83,0,0,1-1.83-1.83V87.84a0,0,0,0,1,0,0Z" transform="translate(179.91 179.78) rotate(180)" fill="#e6e7e8" stroke="#a7a9ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><path d="M29.35,42.4H56.94a3.42,3.42,0,0,1,3.42,3.42v1.62a0,0,0,0,1,0,0H25.94a0,0,0,0,1,0,0V45.82A3.42,3.42,0,0,1,29.35,42.4Z" fill="#e6e7e8" stroke="#a7a9ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><path d="M84.48,47.44V84.35h-18V44.41a2,2,0,0,1,2-2h2a2,2,0,0,1,2,2v3h12Z" fill="#e6e7e8" stroke="#a7a9ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><path d="M74.52,42.4h2a2,2,0,0,1,2,2v3a0,0,0,0,1,0,0h-6a0,0,0,0,1,0,0v-3A2,2,0,0,1,74.52,42.4Z" fill="#e6e7e8" stroke="#a7a9ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><path d="M80.51,42.4h2a2,2,0,0,1,2,2v3a0,0,0,0,1,0,0h-6a0,0,0,0,1,0,0v-3A2,2,0,0,1,80.51,42.4Z" fill="#e6e7e8" stroke="#a7a9ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><rect x="84.48" y="47.44" width="28.9" height="36.91" fill="#d1d3d4" stroke="#a7a9ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><path d="M91.67,55.9h36.91a0,0,0,0,1,0,0V72a3.94,3.94,0,0,1-3.94,3.94h-29A3.94,3.94,0,0,1,91.67,72V55.9A0,0,0,0,1,91.67,55.9Z" transform="translate(176.02 -44.23) rotate(90)" fill="#e6e7e8" stroke="#a7a9ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="69.55" y1="51.28" x2="73.5" y2="51.28" fill="none" stroke="#d1d3d4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="77.5" y1="51.28" x2="81.45" y2="51.28" fill="none" stroke="#d1d3d4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="69.55" y1="54.01" x2="73.5" y2="54.01" fill="none" stroke="#d1d3d4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="77.5" y1="54.01" x2="81.45" y2="54.01" fill="none" stroke="#d1d3d4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="69.55" y1="56.73" x2="73.5" y2="56.73" fill="none" stroke="#d1d3d4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="77.5" y1="56.73" x2="81.45" y2="56.73" fill="none" stroke="#d1d3d4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="69.55" y1="59.46" x2="73.5" y2="59.46" fill="none" stroke="#d1d3d4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="77.5" y1="59.46" x2="81.45" y2="59.46" fill="none" stroke="#d1d3d4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="69.55" y1="62.18" x2="73.5" y2="62.18" fill="none" stroke="#d1d3d4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="77.5" y1="62.18" x2="81.45" y2="62.18" fill="none" stroke="#a7a9ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><line x1="100.13" y1="52.39" x2="120.13" y2="52.39" fill="#e6e7e8" stroke="#a7a9ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><circle cx="110.26" cy="66.08" r="7.14" fill="#824dcb" stroke="#caa9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/><path d="M108.14,64.13a2.19,2.19,0,0,1,.46-0.73,2.06,2.06,0,0,1,.71-0.48,2.41,2.41,0,0,1,.93-0.17,2.94,2.94,0,0,1,1.11.18,2.16,2.16,0,0,1,.71.45,1.65,1.65,0,0,1,.39.58,1.69,1.69,0,0,1,.12.58,2,2,0,0,1-.12.74,1.83,1.83,0,0,1-.29.5,2,2,0,0,1-.38.35l-0.4.29a1.84,1.84,0,0,0-.33.33,1,1,0,0,0-.18.47v0.36H109.6V67.16A1.83,1.83,0,0,1,110,66a2.35,2.35,0,0,1,.36-0.33l0.35-.28a1.27,1.27,0,0,0,.26-0.31,0.77,0.77,0,0,0,.09-0.42,0.86,0.86,0,0,0-.21-0.64,0.8,0.8,0,0,0-.58-0.21,0.9,0.9,0,0,0-.43.1,0.86,0.86,0,0,0-.3.26,1.16,1.16,0,0,0-.17.38,1.92,1.92,0,0,0-.06.47H108A2.7,2.7,0,0,1,108.14,64.13Zm2.8,4v1.44h-1.47V68.14h1.47Z" fill="#fff"/><path d="M19.87,35.82H120.13a0,0,0,0,1,0,0V87.93a4,4,0,0,1-4,4H23.88a4,4,0,0,1-4-4V35.82A0,0,0,0,1,19.87,35.82Z" fill="none" stroke="#2398c1" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.33"/></g></g></svg>
\ No newline at end of file