Add landing pages for the micro:bit and EV3 extensions (#1981)

* start building ev3 landing page structure * Inject translations, add more content and structure to ev3 landing page * Add ev3 route * add active styles for os chooser buttons * Add ev3 assets * Add content and intial styles for everything down to "Sample Projects" * Add correct padding to all sections on ev3 page * Add more margins to match the mockup * Create os chooser component for reuse on other landing pages * Make EV3 page stateful, add OS logic, change step styles, fix images on Chrome * Add sample project cards and styles * Add fixed ev3 icon svg * Add app store badges (no href on links yet) * Add section separator, fix sample project card margins * Add border to project cards, make project cards clickable links * Add FAQ boilerplate and styling from InformationPage component * Add indented ol style, example * Add link style with underline * Add EV3 retail link * Content updates * Fix some z-index issues with os chooser * micro:bit page mega-commit * os chooser should not have a higher z-index than nav * Update starter projects * Localize OS chooser * Add localization configuration for EV3 page * Localize section titles on ev3 page * Add starter project images and descriptions * Add link to microbit.org * Fix tip box width on microbit and ev3 pages * add l10n strings up to things to try on ev3 page * Fix lint error in ev3.scss * Add download link style to ev3 * microbit getting started text and images * Remove tip about microbit name * Hex file and starter project download links * microbit wording updates * update images * Fix issues with download link style * text fix * Add ev3 starter project downloads * Add microbit l10n file and config * Add l10n strings for microbit header and scratch link sections * Add l10n strings for microbit page up to faq * content updates * Fix some page overflow issues * microbit faq content and style * Use zipped version of microbit hex file * Add platform name to scratch link download button * Add EV3 faq to l10n.json * Add final strings from micro:bit and EV3 pages to l10n.json files * Add white download asset * Tweak styles for ev3 and microbit * Add some final tweaks to the EV3 page styles * Add TODO comments about refactoring duplicate code
2024-11-22 15:17:53 -05:00 · 2018-07-19 18:08:44 -04:00 · 2018-07-19 18:08:44 -04:00 · 5f0016f385
commit 5f0016f385
parent fa3f968e33
60 changed files with 2270 additions and 0 deletions
--- a/.tx/config
+++ b/.tx/config
@ -145,3 +145,14 @@ file_filter = localizations/preview/<lang>.json
 source_file = src/views/preview/l10n.json
 source_lang = en
 type = KEYVALUEJSON
+
+[scratch-website.ev3-l10njson]
+source_file = src/views/ev3/l10n.json
+source_lang = en
+type = KEYVALUEJSON
+
+[scratch-website.microbit-l10njson]
+source_file = src/views/microbit/l10n.json
+source_lang = en
+type = KEYVALUEJSON
+
--- a/src/components/os-chooser/os-chooser.jsx
+++ b/src/components/os-chooser/os-chooser.jsx
@ -0,0 +1,51 @@
+const classNames = require('classnames');
+const injectIntl = require('react-intl').injectIntl;
+const FormattedMessage = require('react-intl').FormattedMessage;
+const PropTypes = require('prop-types');
+const React = require('react');
+
+
+const FlexRow = require('../../components/flex-row/flex-row.jsx');
+const Button = require('../../components/forms/button.jsx');
+
+require('./os-chooser.scss');
+
+const OS_ENUM = {
+    WINDOWS: 'Windows',
+    MACOS: 'macOS'
+};
+
+const OSChooser = props => (
+    <div className="os-chooser">
+        <FlexRow className="inner">
+            <FormattedMessage id="oschooser.choose" />
+            <Button
+                className={classNames({active: props.currentOS === OS_ENUM.WINDOWS})}
+                onClick={() => // eslint-disable-line react/jsx-no-bind
+                    props.handleSetOS(OS_ENUM.WINDOWS)
+                }
+            >
+                <img src="/svgs/extensions/windows.svg" />
+            Windows
+            </Button>
+            <Button
+                className={classNames({active: props.currentOS === OS_ENUM.MACOS})}
+                onClick={() => // eslint-disable-line react/jsx-no-bind
+                    props.handleSetOS(OS_ENUM.MACOS)
+                }
+            >
+                <img src="/svgs/extensions/mac.svg" />
+            macOS
+            </Button>
+        </FlexRow>
+    </div>
+);
+
+OSChooser.propTypes = {
+    currentOS: PropTypes.string,
+    handleSetOS: PropTypes.func
+};
+
+const wrappedOSChooser = injectIntl(OSChooser);
+
+module.exports = wrappedOSChooser;
--- a/src/components/os-chooser/os-chooser.scss
+++ b/src/components/os-chooser/os-chooser.scss
@ -0,0 +1,40 @@
+@import "../../colors";
+
+.os-chooser {
+    display: flex;
+    position: sticky;
+    top: 50px;
+    z-index: 9;
+    box-shadow: 0 0 3px $box-shadow-gray;
+    background-color: $ui-white;
+    padding: 0;
+    height: 5rem;
+
+    .inner {
+        justify-content: flex-start;
+    }
+
+    span {
+        margin-right: 1rem;
+        font-weight: 600;
+    }
+
+    .button {
+        display: flex;
+        margin-right: 1rem;
+        border-radius: 1.6rem;
+        background-color: $active-gray;
+        padding: .5rem 1.1rem;
+        align-items: center;
+        box-sizing: border-box;
+
+        img {
+            margin-right: .3rem;
+            height: 1.5rem;
+        }
+
+        &.active {
+            background-color: $ui-blue;
+        }
+    }
+}
--- a/src/l10n.json
+++ b/src/l10n.json
@ -103,6 +103,8 @@

    "navigation.signOut": "Sign out",

+    "oschooser.choose": "Choose your OS:",
+
    "parents.FaqAgeRangeA": "While Scratch is primarily designed for 8 to 16 year olds, it is also used by people of all ages, including younger children with their parents.",
    "parents.FaqAgeRangeQ": "What is the age range for Scratch?",
    "parents.FaqResourcesQ": "What resources are available for learning Scratch?",
--- a/src/routes.json
+++ b/src/routes.json
@ -301,6 +301,20 @@
        "view": "wedo2/wedo2",
        "title": "LEGO WeDo 2.0"
    },
+    {
+        "name": "ev3",
+        "pattern": "^/ev3/?$",
+        "routeAlias": "/ev3/?$",
+        "view": "ev3/ev3",
+        "title": "LEGO MINDSTORMS EV3"
+    },
+    {
+        "name": "microbit",
+        "pattern": "^/microbit/?$",
+        "routeAlias": "/microbit/?$",
+        "view": "microbit/microbit",
+        "title": "micro:bit"
+    },
    {
        "name": "donate-redirect",
        "pattern": "^/info/donate/?",
--- a/src/views/ev3/ev3.jsx
+++ b/src/views/ev3/ev3.jsx
@ -0,0 +1,389 @@
+/*
+ * TODO: Refactor this file and views/microbit/microbit.jsx
+ * into something that can be used in both places (scratch-www#1982)
+ */
+
+const bindAll = require('lodash.bindall');
+const injectIntl = require('react-intl').injectIntl;
+const FormattedMessage = require('react-intl').FormattedMessage;
+const React = require('react');
+
+
+const Page = require('../../components/page/www/page.jsx');
+const render = require('../../lib/render.jsx');
+
+const FlexRow = require('../../components/flex-row/flex-row.jsx');
+const OSChooser = require('../../components/os-chooser/os-chooser.jsx');
+
+require('./ev3.scss');
+
+class EV3 extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'onSetOS'
+        ]);
+
+        this.OS_ENUM = {
+            WINDOWS: 'Windows',
+            MACOS: 'macOS'
+        };
+
+        this.state = {
+            OS: this.OS_ENUM.WINDOWS
+        };
+    }
+
+    onSetOS (os) {
+        this.setState({
+            OS: os
+        });
+    }
+
+    render () {
+        return (
+            <div className="ev3">
+                <div className="extension-header">
+                    <FlexRow className="inner">
+                        <FlexRow className="column extension-info">
+                            <FlexRow className="column extension-copy">
+                                <h2><img src="/images/ev3/ev3.svg" />LEGO MINDSTORMS EV3</h2>
+                                <FormattedMessage
+                                    id="ev3.headerText"
+                                    values={{
+                                        ev3Link: (
+                                            <a
+                                                href="https://shop.lego.com/en-US/LEGO-MINDSTORMS-EV3-31313"
+                                                rel="noopener noreferrer"
+                                                target="_blank"
+                                            >
+                                                LEGO MINDSTORMS EV3
+                                            </a>
+                                        )
+                                    }}
+                                />
+                                <span />
+                            </FlexRow>
+                            <FlexRow className="column extension-requirements-container">
+                                <span className="requirements-header">
+                                    <FormattedMessage id="ev3.requirements" />
+                                </span>
+                                <FlexRow className="extension-requirements">
+                                    <span>
+                                        <img src="/svgs/extensions/windows.svg" />
+                                        Windows 10+
+                                    </span>
+                                    <span>
+                                        <img src="/svgs/extensions/mac.svg" />
+                                        macOS 10.13+
+                                    </span>
+                                    <span>
+                                        <img src="/svgs/extensions/bluetooth.svg" />
+                                        Bluetooth
+                                    </span>
+                                    <span>
+                                        <img src="/svgs/extensions/scratch-link.svg" />
+                                        Scratch Link
+                                    </span>
+                                </FlexRow>
+                            </FlexRow>
+                        </FlexRow>
+                        <div className="extension-image">
+                            <img src="/images/ev3/ev3-illustration.png" />
+                        </div>
+                    </FlexRow>
+                </div>
+                <OSChooser
+                    currentOS={this.state.OS}
+                    handleSetOS={this.onSetOS}
+                />
+                <div className="blue install-scratch-link">
+                    <FlexRow className="inner column">
+                        <h2><FormattedMessage id="ev3.installScratchLink" /></h2>
+                        <FlexRow className="steps">
+                            <div className="step">
+                                <FlexRow className="step-number-row">
+                                    <div className="step-number">1</div>
+                                    <FlexRow className="step-content">
+                                        <span className="step-description">
+                                            <FormattedMessage id="ev3.installScratchLinkStep" />
+                                        </span>
+                                        <a
+                                            className="step-image badge"
+                                            href={`https://downloads.scratch.mit.edu/link/${
+                                                this.state.OS === this.OS_ENUM.WINDOWS ? 'windows' : 'mac'
+                                            }.zip`}
+                                        >
+                                            <button className="button download-button">
+                                                {this.state.OS === this.OS_ENUM.WINDOWS ?
+                                                    <FormattedMessage id="ev3.windowsDownload" /> :
+                                                    <FormattedMessage id="ev3.macosDownload" />
+                                                }
+                                                <img src="/svgs/extensions/download-white.svg" />
+                                            </button>
+                                        </a>
+                                    </FlexRow>
+                                </FlexRow>
+
+                            </div>
+                            <div className="step">
+                                <FlexRow className="step-number-row">
+                                    <div className="step-number">2</div>
+                                    <FlexRow className="step-content">
+                                        <span className="step-description">
+                                            <FormattedMessage id="ev3.startScratchLink" />
+                                        </span>
+                                        <div className="step-image">
+                                            <img
+                                                className="screenshot"
+                                                src={`/images/scratchlink/${
+                                                    this.state.OS === this.OS_ENUM.WINDOWS ? 'windows' : 'mac'
+                                                }-toolbar.png`}
+                                            />
+                                        </div>
+                                    </FlexRow>
+                                </FlexRow>
+                            </div>
+                        </FlexRow>
+                    </FlexRow>
+                </div>
+                <div className="getting-started">
+                    <FlexRow className="inner column">
+                        <h2><FormattedMessage id="ev3.gettingStarted" /></h2>
+                        <FlexRow className="column connecting-ev3">
+                            <h3><FormattedMessage id="ev3.connectingEV3" /></h3>
+                            <FlexRow className="steps">
+                                <div className="step">
+                                    <FlexRow className="step-number-row">
+                                        <div className="step-number">1</div>
+                                    </FlexRow>
+                                    <div className="step-content">
+                                        <div className="step-image">
+                                            <img src="/images/ev3/ev3-connect-1.png" />
+                                        </div>
+                                        <p><FormattedMessage id="ev3.turnOnEV3" /></p>
+                                    </div>
+                                </div>
+                                <div className="step">
+                                    <FlexRow className="step-number-row">
+                                        <div className="step-number">2</div>
+                                    </FlexRow>
+                                    <div className="step-content">
+                                        <div className="step-image">
+                                            <img src="/images/ev3/ev3-connect-2.png" />
+                                        </div>
+                                        <p>
+                                            <FormattedMessage
+                                                id="ev3.useScratch3"
+                                                values={{
+                                                    scratch3Link: (
+                                                        <a
+                                                            href="https://beta.scratch.mit.edu/"
+                                                            rel="noopener noreferrer"
+                                                            target="_blank"
+                                                        >
+                                                            Scratch 3.0
+                                                        </a>
+                                                    )
+                                                }}
+                                            />
+                                        </p>
+                                    </div>
+                                </div>
+                                <div className="step">
+                                    <FlexRow className="step-number-row">
+                                        <div className="step-number">3</div>
+                                    </FlexRow>
+                                    <div className="step-content">
+                                        <div className="step-image">
+                                            <img src="/images/ev3/ev3-connect-3.png" />
+                                        </div>
+                                        <p><FormattedMessage id="ev3.addExtension" /></p>
+                                    </div>
+                                </div>
+                            </FlexRow>
+                            <div className="tip-box">
+                                <h4><FormattedMessage id="ev3.firstTimeConnecting" /></h4>
+                                <FlexRow className="column tip-content">
+                                    <p><FormattedMessage id="ev3.pairingDescription" /></p>
+                                    <FlexRow className="steps">
+                                        <div className="step">
+                                            <div className="step-content">
+                                                <div className="step-image">
+                                                    <img src="/images/ev3/ev3-accept-connection.png" />
+                                                </div>
+                                                <p><FormattedMessage id="ev3.acceptConnection" /></p>
+                                            </div>
+                                        </div>
+                                        <div className="step">
+                                            <div className="step-content">
+                                                <div className="step-image">
+                                                    <img src="/images/ev3/ev3-pin.png" />
+                                                </div>
+                                                <p><FormattedMessage id="ev3.acceptPasscode" /></p>
+                                            </div>
+                                        </div>
+                                        <div className="step">
+                                            <div className="step-content">
+
+                                                <div className="step-image">
+                                                    <img
+                                                        className="screenshot"
+                                                        src={`/images/ev3/${
+                                                            this.state.OS === this.OS_ENUM.WINDOWS ?
+                                                                'win-device-ready.png' :
+                                                                'mac-enter-passcode.png'
+                                                        }`}
+                                                    />
+                                                </div>
+                                                <p>
+                                                    {this.state.OS === this.OS_ENUM.WINDOWS ?
+                                                        <FormattedMessage id="ev3.windowsFinalizePairing" /> :
+                                                        <FormattedMessage id="ev3.macosFinalizePairing" />
+                                                    }
+                                                </p>
+                                            </div>
+                                        </div>
+                                    </FlexRow>
+                                </FlexRow>
+                            </div>
+                        </FlexRow>
+                    </FlexRow>
+                </div>
+                <div className="blue things-to-try">
+                    <FlexRow className="inner column">
+                        <h2><FormattedMessage id="ev3.thingsToTry" /></h2>
+                        <h3>Make a motor move</h3>
+                        <FlexRow className="steps">
+                            <div className="step">
+                                <FlexRow className="step-number-row">
+                                    <div className="step-number">1</div>
+                                    <FlexRow className="step-content">
+                                        <span className="step-description">
+                                            Plug a motor into <strong>port A</strong> on the EV3 hub
+                                        </span>
+                                        <div className="step-image">
+                                            <img src="/images/ev3/ev3-motor-port-a.png" />
+                                        </div>
+                                    </FlexRow>
+                                </FlexRow>
+                            </div>
+                            <div className="step">
+                                <FlexRow className="step-number-row">
+                                    <div className="step-number">2</div>
+                                    <FlexRow className="step-content">
+                                        <span className="step-description">
+                                            Find the <strong>&ldquo;motor A turn this way&rdquo;</strong> block
+                                             and click on it.
+                                        </span>
+                                        <div className="step-image">
+                                            <img src="/images/ev3/motor-turn-block.png" />
+                                        </div>
+                                    </FlexRow>
+                                </FlexRow>
+                            </div>
+                        </FlexRow>
+                        <div className="section-separator" />
+                        <h3>Starter Projects</h3>
+                        <FlexRow className="steps">
+                            <a
+                                download
+                                className="project-card"
+                                href="https://downloads.scratch.mit.edu/ev3/ev3-wave-hello.sb3"
+                            >
+                                <div className="project-card-image">
+                                    <img src="/images/ev3/starter-wave-hello.png" />
+                                </div>
+                                <div className="project-card-info">
+                                    <h4>Wave Hello</h4>
+                                    <p>
+                                        Make a puppet robot and have a friendly chat.
+                                    </p>
+                                </div>
+                            </a>
+                            <a
+                                download
+                                className="project-card"
+                                href="https://downloads.scratch.mit.edu/ev3/ev3-distance-instrument.sb3"
+                            >
+                                <div className="project-card-image">
+                                    <img src="/images/ev3/starter-distance-instrument.png" />
+                                </div>
+                                <div className="project-card-info">
+                                    <h4>Distance Instrument</h4>
+                                    <p>
+                                        Move your body in front of the sensor to make music.
+                                    </p>
+                                </div>
+                            </a>
+                            <a
+                                download
+                                className="project-card"
+                                href="https://downloads.scratch.mit.edu/ev3/ev3-space-tacos.sb3"
+                            >
+                                <div className="project-card-image">
+                                    <img src="/images/ev3/starter-flying-game.png" />
+                                </div>
+                                <div className="project-card-info">
+                                    <h4>Space Tacos</h4>
+                                    <p>
+                                        Build your own controller to catch tacos in space.
+                                    </p>
+                                </div>
+                            </a>
+                        </FlexRow>
+                    </FlexRow>
+                </div>
+                <div className="faq inner">
+                    <h2><FormattedMessage id="ev3.troubleshootingTitle" /></h2>
+                    <h3 className="faq-title"><FormattedMessage id="ev3.makeSurePairedTitle" /></h3>
+                    <p>
+                        <FormattedMessage
+                            id="ev3.makeSurePairedText"
+                            values={{
+                                pairingInstructionLink: (
+                                    <a
+                                        href="https://www.lego.com/en-us/service/help/products/themes-sets/mindstorms/connecting-your-lego-mindstorms-ev3-to-bluetooth-408100000007886"
+                                        rel="noopener noreferrer"
+                                        target="_blank"
+                                    >
+                                        <FormattedMessage id="ev3.pairingInstructionText" />
+                                    </a>
+                                )
+                            }}
+                        />
+                    </p>
+                    <h3 className="faq-title"><FormattedMessage id="ev3.closeScratchCopiesTitle" /></h3>
+                    <p>
+                        <FormattedMessage id="ev3.closeScratchCopiesText" />
+                    </p>
+                    <h3 className="faq-title"><FormattedMessage id="ev3.otherComputerConnectedTitle" /></h3>
+                    <p>
+                        <FormattedMessage id="ev3.otherComputerConnectedText" />
+                    </p>
+                    <h3 className="faq-title"><FormattedMessage id="ev3.updateFirmwareTitle" /></h3>
+                    <p>
+                        <FormattedMessage
+                            id="ev3.updateFirmwareText"
+                            values={{
+                                firmwareUpdateLink: (
+                                    <a
+                                        href="https://education.lego.com/en-us/support/mindstorms-ev3/firmware-update"
+                                        rel="noopener noreferrer"
+                                        target="_blank"
+                                    >
+                                        <FormattedMessage id="ev3.firmwareUpdateText" />
+                                    </a>
+                                )
+                            }}
+                        />
+                    </p>
+                </div>
+            </div>
+        );
+    }
+}
+
+const WrappedEV3 = injectIntl(EV3);
+
+render(<Page><WrappedEV3 /></Page>, document.getElementById('app'));
--- a/src/views/ev3/ev3.scss
+++ b/src/views/ev3/ev3.scss
@ -0,0 +1,313 @@
+// TODO: Refactor this file and views/microbit/microbit.scss into something that can be used in both places (scratch-www#1982)
+
+@import "../../colors";
+@import "../../frameless";
+
+#view {
+    padding: 0;
+}
+
+.ev3 {
+    &>div {
+        padding: 4rem 0;
+    }
+
+    h2 {
+        margin-bottom: 1rem;
+    }
+
+    h3 {
+        margin-bottom: 2rem;
+    }
+
+    span {
+        line-height: 1.7rem;
+    }
+
+    .download {
+        display: inline-block;
+
+        &::after {
+            display: inline-block;
+            margin-left: .5rem;
+            background-image: url("/svgs/extensions/download.svg");
+            background-repeat: no-repeat;
+            width: 20px;
+            height: 20px;
+            vertical-align: text-top;
+            content: "";
+        }
+    }
+
+    .extension-header {
+        background-color: $ui-aqua;
+        background-image: url("/images/ev3/ev3-pattern.svg");
+        background-size: cover;
+        color: $ui-white;
+
+        .inner {
+            justify-content: space-between;
+            flex-wrap: nowrap;
+        }
+
+        .extension-info {
+            max-width: $cols7;
+            align-items: flex-start;
+
+            .extension-copy {
+                margin-bottom: 5rem;
+                align-items: flex-start;
+
+                h2 {
+                    display: flex;
+                    margin-bottom: 2rem;
+                    color: $ui-white;
+                }
+
+                h2 img {
+                    padding-right: .5rem;
+                    max-height: 100%;
+                }
+
+                span {
+                    font-size: 1.2rem;
+                }
+
+                a {
+                    border-bottom: 1px solid $ui-white;
+                    color: $ui-white;
+                }
+            }
+
+            .extension-requirements-container {
+                font-weight: 500;
+                align-items: flex-start;
+
+                .requirements-header {
+                    margin-bottom: 1.5rem;
+                }
+
+                .extension-requirements {
+                    justify-content: space-between;
+                }
+
+                .extension-requirements span {
+                    display: flex;
+                    margin-right: 1rem;
+                    font-size: 15px; // TODO: change to rem later
+                    align-items: center;
+                }
+
+                .extension-requirements span img {
+                    padding-right: .5rem;
+                }
+            }
+        }
+
+        .extension-image {
+            width: 100%;
+            max-width: $cols5;
+
+            img {
+                max-width: 100%;
+                max-height: 100%;
+            }
+
+        }
+    }
+
+    .os-chooser {
+        padding: 0;
+    }
+
+    .install-scratch-link,
+    .getting-started,
+    .faq {
+        .inner {
+            align-items: flex-start;
+        }
+    }
+
+    .install-scratch-link {
+        padding: 2rem 0;
+
+        .step-image.badge {
+            height: initial;
+        }
+
+        .download-button {
+            display: flex;
+            align-items: center;
+
+            img {
+                margin-left: .5rem;
+            }
+        }
+    }
+
+    .screenshot {
+        border-radius: .5rem;
+    }
+
+    .getting-started {
+        .connecting-ev3 {
+            width: 100%;
+            align-items: flex-start;
+        }
+
+        .tip-box {
+            margin-top: 4rem;
+            border: 1px solid $ui-blue-25percent;
+            border-radius: 1rem;
+            background-color: $ui-blue-10percent;
+            padding: 2rem 3rem;
+            width: 100%;
+            box-sizing: border-box;
+
+            .tip-content {
+                align-items: flex-start;
+
+                p {
+                    margin-top: 0;
+                }
+            }
+        }
+    }
+
+    .things-to-try {
+        .project-card {
+            margin: 0 1.5rem;
+            border: 1px solid $ui-border;
+            border-radius: .5rem;
+            background-color: $ui-white;
+            overflow: hidden;
+            flex-basis: 0;
+            flex-grow: 1;
+        }
+
+        .project-card-image {
+            img {
+                max-width: 100%;
+            }
+        }
+
+        .project-card-info {
+            padding: 1rem;
+
+            p {
+                margin: .2rem 0;
+            }
+        }
+
+        .section-separator {
+            margin: 4rem 0;
+            border-top: 1px solid $ui-border;
+            width: 100%;
+        }
+    }
+
+    .faq {
+        p {
+            margin-bottom: 1.25rem;
+            margin-left: 0;
+            max-width: $cols8;
+            text-align: left;
+        }
+
+        .faq-title {
+            margin-bottom: 1rem;
+            font-size: 1.4rem;
+        }
+
+        ul {
+            max-width: $cols8;
+        }
+
+        section {
+            ul {
+                max-width: $cols8;
+            }
+
+            .nav-spacer {
+                display: block;
+                visibility: hidden;
+                margin-top: -50px; // height of  nav bar
+                height: 50px;
+            }
+
+        }
+
+        ul,
+        ol {
+            &.indented {
+                padding-left: $cols1 + (20px / $em);
+            }
+        }
+    }
+
+    .blue {
+        background-color: $ui-blue-10percent;
+    }
+
+    .inner {
+        max-width: $cols12;
+    }
+}
+
+.steps {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+
+.step {
+    flex-basis: 0;
+    flex-grow: 1;
+
+    .step-number-row {
+        padding-bottom: 1.5rem;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        .step-content {
+            text-align: left;
+            align-items: flex-start;
+
+            .step-description {
+                margin-bottom: 1rem;
+            }
+        }
+
+        .step-number {
+            display: inline-flex;
+            border-radius: 2rem;
+            background-color: $ui-blue;
+            width: 2rem;
+            height: 2rem;
+            color: $ui-white;
+            justify-content: center;
+            align-items: center;
+            flex-shrink: 0;
+        }
+    }
+
+    .step-content {
+        display: flex;
+        padding: 0 2rem;
+        text-align: center;
+        flex-flow: column;
+        align-items: center;
+        box-sizing: border-box;
+
+        .step-image {
+            height: 10rem;
+
+            img {
+                width: auto;
+                height: 100%;
+            }
+        }
+    }
+}
--- a/src/views/ev3/l10n.json
+++ b/src/views/ev3/l10n.json
@ -0,0 +1,32 @@
+{
+    "ev3.headerText": "{ev3Link} is an invention kit with motors and sensors you can use to build interactive robotic creations. Connecting it to Scratch expands the possibilities: build a robotic puppet and tell stories, make your own musical instruments and game controllers, or whatever else you can imagine.",
+    "ev3.requirements": "Requirements",
+    "ev3.installScratchLink": "Install Scratch Link",
+    "ev3.installScratchLinkStep": "Download and install Scratch Link.",
+    "ev3.windowsDownload": "Download for Windows",
+    "ev3.macosDownload": "Download for macOS",
+    "ev3.startScratchLink": "Start Scratch Link and make sure it is running. It should appear in your toolbar.",
+    "ev3.gettingStarted": "Getting Started",
+    "ev3.connectingEV3": "Connecting EV3 to Scratch",
+    "ev3.turnOnEV3": "Turn on your EV3 by holding down the center button.",
+    "ev3.useScratch3": "Use the {scratch3Link} editor.",
+    "ev3.addExtension": "Add the EV3 extension.",
+    "ev3.firstTimeConnecting": "First time connecting your EV3?",
+    "ev3.pairingDescription": "After clicking the connect button in Scratch, you will need to pair it with your computer:",
+    "ev3.acceptConnection": "Accept the connection.",
+    "ev3.acceptPasscode": "Accept the passcode.",
+    "ev3.windowsFinalizePairing": "Wait for your device to be ready.",
+    "ev3.macosFinalizePairing": "Enter the passcode on your computer.",
+    "ev3.thingsToTry": "Things to Try",
+    "ev3.troubleshootingTitle": "Troubleshooting",
+    "ev3.makeSurePairedTitle": "Make sure your computer is paired with your EV3",
+    "ev3.makeSurePairedText": "Your computer needs to be paired with your EV3 before it can connect to Scratch. We try to do this automatically the first time you add the EV3 extension, but if it isn't working you can try these {pairingInstructionLink}.",
+    "ev3.pairingInstructionText": "bluetooth pairing instructions from LEGO",
+    "ev3.closeScratchCopiesTitle": "Close other copies of Scratch",
+    "ev3.closeScratchCopiesText": "Only one copy of Scratch can connect with the EV3 at a time. If you have Scratch open in other browser tabs, close it and try again.",
+    "ev3.otherComputerConnectedTitle": "Make sure no other computer is connected to your EV3",
+    "ev3.otherComputerConnectedText": "Only one computer can be connected to an EV3 at a time. If you have another computer connected to your EV3, disconnect the EV3 or close Scratch on that computer and try again.",
+    "ev3.updateFirmwareTitle": "Try updating your EV3 firmware",
+    "ev3.updateFirmwareText": "We recommend updating to EV3 firmware version 1.10E or above. See {firmwareUpdateLink}. We recommend following the instructions for \"Manual Firmware Update\".",
+    "ev3.firmwareUpdateText": "firmware update instructions from LEGO"
+}
--- a/src/views/microbit/l10n.json
+++ b/src/views/microbit/l10n.json
@ -0,0 +1,38 @@
+{
+    "microbit.headerText": "{microbitLink} is a tiny circuit board designed to help kids learn to code and create with technology. It has many features including an LED display, buttons, and a motion sensor. You can connect it to Scratch and build creative projects that combine the magic of the digital and physical worlds.",
+    "microbit.requirements": "Requirements",
+    "microbit.installScratchLink": "Install Scratch Link",
+    "microbit.installScratchLinkStep": "Download and install Scratch Link.",   
+    "microbit.windowsDownload": "Download for Windows",
+    "microbit.macosDownload": "Download for macOS",
+    "microbit.startScratchLink": "Start Scratch Link and make sure it is running. It should appear in your toolbar.",
+    "microbit.gettingStarted": "Getting Started",
+    "microbit.installMicrobitHex": "Install Scratch micro:bit HEX",
+    "microbit.connectUSB": "Connect a micro:bit to your computer with a USB cable",
+    "microbit.downloadHex": "Download the Scratch micro:bit HEX file",
+    "microbit.dragDropHex": "Drag and drop the HEX file onto your micro:bit",
+    "microbit.connectingMicrobit": "Connecting micro:bit to Scratch",
+    "microbit.powerMicrobit": "Power your micro:bit with USB or a battery pack.",
+    "microbit.useScratch3": "Use the {scratch3Link} editor.",
+    "microbit.addExtension": "Add the micro:bit extension.",
+    "microbit.thingsToTry": "Things to Try",
+    "microbit.displayHelloTitle": "Display “Hello!”",
+    "microbit.displayHelloBlock": "Find the {displayHelloText} block and click on it.",
+    "microbit.displayHelloText": "“display hello”",
+    "microbit.helloScroll": "You should see {helloText} scroll across the micro:bit display",
+    "microbit.helloText": "“hello”",
+    "microbit.starterProjects": "Starter Projects",
+    "microbit.heartBeat": "Heart Beat",
+    "microbit.heartBeatDescription": "Press the buttons to animate the heart.",
+    "microbit.tiltGuitar": "Tilt Guitar",
+    "microbit.tiltGuitarDescription": "Make music by tilting your micro:bit.",
+    "microbit.oceanAdventure": "Ocean Adventure",
+    "microbit.oceanAdventureDescription": "Build your own controller and swim toward the saxophones.",
+    "microbit.troubleshootingTitle": "Troubleshooting",
+    "microbit.closeScratchCopiesTitle": "Close other copies of Scratch",
+    "microbit.closeScratchCopiesText": "Only one copy of Scratch can connect with the micro:bit at a time. If you have Scratch open in other browser tabs, close it and try again.",
+    "microbit.otherComputerConnectedTitle": "Make sure no other computer is connected to your micro:bit",
+    "microbit.otherComputerConnectedText": "Only one computer can be connected to an micro:bit at a time. If you have another computer connected to your micro:bit, disconnect the micro:bit or close Scratch on that computer and try again.",
+    "microbit.resetButtonTitle": "Make sure you aren’t hitting the “reset” button",
+    "microbit.resetButtonText": "Sometimes while using the micro:bit you can accidentally press the “reset” button on the back in-between the USB and power ports. Make sure you keep your fingers (and toes) away from it while using Scratch!"
+}
--- a/src/views/microbit/microbit.jsx
+++ b/src/views/microbit/microbit.jsx
@ -0,0 +1,381 @@
+/*
+ * TODO: Refactor this file and views/ev3/ev3.jsx
+ * into something that can be used in both places (scratch-www#1982)
+ */
+
+const bindAll = require('lodash.bindall');
+const injectIntl = require('react-intl').injectIntl;
+const FormattedMessage = require('react-intl').FormattedMessage;
+const React = require('react');
+
+
+const Page = require('../../components/page/www/page.jsx');
+const render = require('../../lib/render.jsx');
+
+const FlexRow = require('../../components/flex-row/flex-row.jsx');
+const OSChooser = require('../../components/os-chooser/os-chooser.jsx');
+
+require('./microbit.scss');
+
+class MicroBit extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'onSetOS'
+        ]);
+
+        this.OS_ENUM = {
+            WINDOWS: 'Windows',
+            MACOS: 'macOS'
+        };
+
+        this.state = {
+            OS: this.OS_ENUM.WINDOWS
+        };
+    }
+
+    onSetOS (os) {
+        this.setState({
+            OS: os
+        });
+    }
+
+    render () {
+        return (
+            <div className="microbit">
+                <div className="extension-header">
+                    <FlexRow className="inner">
+                        <FlexRow className="column extension-info">
+                            <FlexRow className="column extension-copy">
+                                <h2><img src="/images/microbit/microbit.svg" />micro:bit</h2>
+                                <FormattedMessage
+                                    id="microbit.headerText"
+                                    values={{
+                                        microbitLink: (
+                                            <a
+                                                href="http://microbit.org/"
+                                                rel="noopener noreferrer"
+                                                target="_blank"
+                                            >
+                                      micro:bit
+                                            </a>
+                                        )
+                                    }}
+                                />
+                            </FlexRow>
+                            <FlexRow className="column extension-requirements-container">
+                                <span className="requirements-header">
+                                    <FormattedMessage id="microbit.requirements" />
+                                </span>
+                                <FlexRow className="extension-requirements">
+                                    <span>
+                                        <img src="/svgs/extensions/windows.svg" />
+                                        Windows 10+
+                                    </span>
+                                    <span>
+                                        <img src="/svgs/extensions/mac.svg" />
+                                        macOS 10.13+
+                                    </span>
+                                    <span>
+                                        <img src="/svgs/extensions/bluetooth.svg" />
+                                        Bluetooth 4.0
+                                    </span>
+                                    <span>
+                                        <img src="/svgs/extensions/scratch-link.svg" />
+                                        Scratch Link
+                                    </span>
+                                </FlexRow>
+                            </FlexRow>
+                        </FlexRow>
+                        <div className="extension-image">
+                            <img src="/images/microbit/microbit-heart.png" />
+                        </div>
+                    </FlexRow>
+                </div>
+                <OSChooser
+                    currentOS={this.state.OS}
+                    handleSetOS={this.onSetOS}
+                />
+                <div className="blue install-scratch-link">
+                    <FlexRow className="inner column">
+                        <h2><FormattedMessage id="microbit.installScratchLink" /></h2>
+                        <FlexRow className="steps">
+                            <div className="step">
+                                <FlexRow className="step-number-row">
+                                    <div className="step-number">1</div>
+                                    <FlexRow className="step-content">
+                                        <span className="step-description">
+                                            <FormattedMessage id="microbit.installScratchLinkStep" />
+                                        </span>
+                                        <a
+                                            className="step-image badge"
+                                            href={`https://downloads.scratch.mit.edu/link/${
+                                                this.state.OS === this.OS_ENUM.WINDOWS ? 'windows' : 'mac'
+                                            }.zip`}
+                                        >
+                                            <button className="button download-button">
+                                                {this.state.OS === this.OS_ENUM.WINDOWS ?
+                                                    <FormattedMessage id="microbit.windowsDownload" /> :
+                                                    <FormattedMessage id="microbit.macosDownload" />
+                                                }
+                                                <img src="/svgs/extensions/download-white.svg" />
+                                            </button>
+                                        </a>
+                                    </FlexRow>
+                                </FlexRow>
+
+                            </div>
+                            <div className="step">
+                                <FlexRow className="step-number-row">
+                                    <div className="step-number">2</div>
+                                    <FlexRow className="step-content">
+                                        <span className="step-description">
+                                            <FormattedMessage id="microbit.startScratchLink" />
+                                        </span>
+                                        <div className="step-image">
+                                            <img
+                                                className="screenshot"
+                                                src={`/images/scratchlink/${
+                                                    this.state.OS === this.OS_ENUM.WINDOWS ? 'windows' : 'mac'
+                                                }-toolbar.png`}
+                                            />
+                                        </div>
+                                    </FlexRow>
+                                </FlexRow>
+                            </div>
+                        </FlexRow>
+                    </FlexRow>
+                </div>
+                <div className="getting-started">
+                    <FlexRow className="inner column">
+                        <h2><FormattedMessage id="microbit.gettingStarted" /></h2>
+                        <FlexRow className="column install-hex">
+                            <h3><FormattedMessage id="microbit.installMicrobitHex" /></h3>
+                            <FlexRow className="steps">
+                                <div className="step">
+                                    <FlexRow className="step-number-row">
+                                        <div className="step-number">1</div>
+                                    </FlexRow>
+                                    <div className="step-content">
+                                        <div className="step-image">
+                                            <img src="/images/microbit/mbit-usb.png" />
+                                        </div>
+                                        <p>
+                                            <FormattedMessage id="microbit.connectUSB" />
+                                        </p>
+                                    </div>
+                                </div>
+                                <div className="step">
+                                    <FlexRow className="step-number-row">
+                                        <div className="step-number">2</div>
+                                    </FlexRow>
+                                    <div className="step-content">
+                                        <div className="step-image">
+                                            <img src="/images/microbit/mbit-hex-download.png" />
+                                        </div>
+                                        <a
+                                            download
+                                            className="download"
+                                            href="https://downloads.scratch.mit.edu/microbit/scratch-microbit-1.0.hex.zip"
+                                        >
+                                            <FormattedMessage id="microbit.downloadHex" />
+                                        </a>
+                                    </div>
+                                </div>
+                                <div className="step">
+                                    <FlexRow className="step-number-row">
+                                        <div className="step-number">3</div>
+                                    </FlexRow>
+                                    <div className="step-content">
+                                        <div className="step-image">
+                                            <img
+                                                src={`/images/microbit/${
+                                                    this.state.OS === this.OS_ENUM.WINDOWS ? 'win' : 'mac'
+                                                }-copy-hex.png`}
+                                            />
+                                        </div>
+                                        <p>
+                                            <FormattedMessage id="microbit.dragDropHex" />
+                                        </p>
+                                    </div>
+                                </div>
+                            </FlexRow>
+                        </FlexRow>
+                        <div className="section-separator" />
+                        <FlexRow className="column connecting">
+                            <h3><FormattedMessage id="microbit.connectingMicrobit" /></h3>
+                            <FlexRow className="steps">
+                                <div className="step">
+                                    <FlexRow className="step-number-row">
+                                        <div className="step-number">1</div>
+                                    </FlexRow>
+                                    <div className="step-content">
+                                        <div className="step-image">
+                                            <img src="/images/microbit/mbit-connect-1.png" />
+                                        </div>
+                                        <p><FormattedMessage id="microbit.powerMicrobit" /></p>
+                                    </div>
+                                </div>
+                                <div className="step">
+                                    <FlexRow className="step-number-row">
+                                        <div className="step-number">2</div>
+                                    </FlexRow>
+                                    <div className="step-content">
+                                        <div className="step-image">
+                                            <img src="/images/microbit/mbit-connect-2.png" />
+                                        </div>
+                                        <p>
+                                            <FormattedMessage
+                                                id="microbit.useScratch3"
+                                                values={{
+                                                    scratch3Link: (
+                                                        <a
+                                                            href="https://beta.scratch.mit.edu/"
+                                                            rel="noopener noreferrer"
+                                                            target="_blank"
+                                                        >
+                                                            Scratch 3.0
+                                                        </a>
+                                                    )
+                                                }}
+                                            />
+                                        </p>
+                                    </div>
+                                </div>
+                                <div className="step">
+                                    <FlexRow className="step-number-row">
+                                        <div className="step-number">3</div>
+                                    </FlexRow>
+                                    <div className="step-content">
+                                        <div className="step-image">
+                                            <img src="/images/microbit/mbit-connect-3.png" />
+                                        </div>
+                                        <p><FormattedMessage id="microbit.addExtension" /></p>
+                                    </div>
+                                </div>
+                            </FlexRow>
+                        </FlexRow>
+                    </FlexRow>
+                </div>
+                <div className="blue things-to-try">
+                    <FlexRow className="inner column">
+                        <h2><FormattedMessage id="microbit.thingsToTry" /></h2>
+                        <h3><FormattedMessage id="microbit.displayHelloTitle" /></h3>
+                        <FlexRow className="steps display-hello">
+                            <div className="step">
+                                <FlexRow className="step-number-row">
+                                    <div className="step-number">1</div>
+                                    <FlexRow className="step-content">
+                                        <span className="step-description">
+                                            <FormattedMessage
+                                                id="microbit.displayHelloBlock"
+                                                values={{
+                                                    displayHelloText: (
+                                                        <strong>
+                                                            <FormattedMessage id="microbit.displayHelloText" />
+                                                        </strong>
+                                                    )
+                                                }}
+                                            />
+                                        </span>
+                                        <div className="step-image">
+                                            <img src="/images/microbit/display-hello-block.png" />
+                                        </div>
+                                    </FlexRow>
+                                </FlexRow>
+                            </div>
+                            <div className="step">
+                                <FlexRow className="step-number-row">
+                                    <div className="step-number">2</div>
+                                    <FlexRow className="step-content">
+                                        <span className="step-description">
+                                            <FormattedMessage
+                                                id="microbit.helloScroll"
+                                                values={{
+                                                    helloText: (
+                                                        <strong><FormattedMessage id="microbit.helloText" /></strong>
+                                                    )
+                                                }}
+                                            />                                        </span>
+                                        <div className="step-image">
+                                            <img src="/images/microbit/mbit-display-h.png" />
+                                        </div>
+                                    </FlexRow>
+                                </FlexRow>
+                            </div>
+                        </FlexRow>
+                        <div className="section-separator" />
+                        <h3><FormattedMessage id="microbit.starterProjects" /></h3>
+                        <FlexRow className="steps">
+                            <a
+                                download
+                                className="project-card"
+                                href="https://downloads.scratch.mit.edu/microbit/microbit-heartbeat.sb3"
+                            >
+                                <div className="project-card-image">
+                                    <img src="/images/microbit/starter-heart.png" />
+                                </div>
+                                <div className="project-card-info">
+                                    <h4><FormattedMessage id="microbit.heartBeat" /></h4>
+                                    <p>
+                                        <FormattedMessage id="microbit.heartBeatDescription" />
+                                    </p>
+                                </div>
+                            </a>
+                            <a
+                                download
+                                className="project-card"
+                                href="https://downloads.scratch.mit.edu/microbit/microbit-guitar.sb3"
+                            >
+                                <div className="project-card-image">
+                                    <img src="/images/microbit/starter-guitar.png" />
+                                </div>
+                                <div className="project-card-info">
+                                    <h4><FormattedMessage id="microbit.tiltGuitar" /></h4>
+                                    <p>
+                                        <FormattedMessage id="microbit.tiltGuitarDescription" />
+                                    </p>
+                                </div>
+                            </a>
+                            <a
+                                download
+                                className="project-card"
+                                href="https://downloads.scratch.mit.edu/microbit/microbit-fish.sb3"
+                            >
+
+                                <div className="project-card-image">
+                                    <img src="/images/microbit/starter-fish.png" />
+                                </div>
+                                <div className="project-card-info">
+                                    <h4><FormattedMessage id="microbit.oceanAdventure" /></h4>
+                                    <p>
+                                        <FormattedMessage id="microbit.oceanAdventureDescription" />
+                                    </p>
+                                </div>
+                            </a>
+                        </FlexRow>
+                    </FlexRow>
+                </div>
+                <div className="faq inner">
+                    <h2><FormattedMessage id="microbit.troubleshootingTitle" /></h2>
+                    <h3 className="faq-title"><FormattedMessage id="microbit.closeScratchCopiesTitle" /></h3>
+                    <p>
+                        <FormattedMessage id="microbit.closeScratchCopiesText" />
+                    </p>
+                    <h3 className="faq-title"><FormattedMessage id="microbit.otherComputerConnectedTitle" /></h3>
+                    <p>
+                        <FormattedMessage id="microbit.otherComputerConnectedText" />
+                    </p>
+                    <h3 className="faq-title"><FormattedMessage id="microbit.resetButtonTitle" /></h3>
+                    <p>
+                        <FormattedMessage id="microbit.resetButtonText" />
+                    </p>
+                </div>
+            </div>
+        );
+    }
+}
+
+const WrappedMicroBit = injectIntl(MicroBit);
+
+render(<Page><WrappedMicroBit /></Page>, document.getElementById('app'));
--- a/src/views/microbit/microbit.scss
+++ b/src/views/microbit/microbit.scss
@ -0,0 +1,321 @@
+// TODO: Refactor this file and views/ev3/ev3.scss into something that can be used in both places (scratch-www#1982)
+
+@import "../../colors";
+@import "../../frameless";
+
+#view {
+    padding: 0;
+}
+
+.microbit {
+    &>div {
+        padding: 4rem 0;
+    }
+
+    h2 {
+        margin-bottom: 1rem;
+    }
+
+    h3 {
+        margin-bottom: 2rem;
+    }
+
+    span {
+        line-height: 1.7rem;
+    }
+
+    .download {
+        display: inline-block;
+
+        &::after {
+            display: inline-block;
+            margin-left: .5rem;
+            background-image: url("/svgs/extensions/download.svg");
+            background-repeat: no-repeat;
+            width: 20px;
+            height: 20px;
+            vertical-align: text-top;
+            content: "";
+        }
+    }
+
+    .extension-header {
+        background-color: $ui-purple;
+        background-image: url("/images/microbit/mbit-pattern.svg");
+        background-size: cover;
+        color: $ui-white;
+
+        .inner {
+            justify-content: space-between;
+            flex-wrap: nowrap;
+        }
+
+        .extension-info {
+            padding-right: $cols1;
+            max-width: $cols7 + ($gutter / $em);
+            align-items: flex-start;
+
+            .extension-copy {
+                margin-bottom: 5rem;
+                align-items: flex-start;
+
+                h2 {
+                    display: flex;
+                    margin-bottom: 2rem;
+                    color: $ui-white;
+                }
+
+                h2 img {
+                    padding-right: .5rem;
+                    max-height: 100%;
+                }
+
+                a {
+                    border-bottom: 1px solid $ui-white;
+                    color: $ui-white;
+                }
+
+                span {
+                    font-size: 1.2rem;
+                }
+            }
+
+            .extension-requirements-container {
+                font-weight: 500;
+                align-items: flex-start;
+
+                .requirements-header {
+                    margin-bottom: 1.5rem;
+                }
+
+                .extension-requirements {
+                    justify-content: space-between;
+                }
+
+                .extension-requirements span {
+                    display: flex;
+                    margin-right: 1rem;
+                    font-size: 15px; // TODO: change to rem later
+                    align-items: center;
+                }
+
+                .extension-requirements span img {
+                    padding-right: .5rem;
+                }
+            }
+        }
+
+        .extension-image {
+            width: 100%;
+            max-width: $cols4;
+
+            img {
+                max-width: 100%;
+                max-height: 100%;
+            }
+
+        }
+    }
+
+    .os-chooser {
+        padding: 0;
+    }
+
+    .install-scratch-link,
+    .getting-started,
+    .faq {
+        .inner {
+            align-items: flex-start;
+        }
+    }
+
+    .install-scratch-link {
+        padding: 2rem 0;
+
+        .step-image.badge {
+            height: initial;
+        }
+
+        .download-button {
+            display: flex;
+            align-items: center;
+
+            img {
+                margin-left: .5rem;
+            }
+        }
+    }
+
+    .screenshot {
+        border-radius: .5rem;
+    }
+
+    .getting-started {
+        .install-hex,
+        .connecting {
+            width: 100%;
+            align-items: flex-start;
+
+            a {
+                margin: 1rem 0;
+            }
+        }
+
+        .tip-box {
+            margin-top: 4rem;
+            border: 1px solid $ui-blue-25percent;
+            border-radius: 1rem;
+            background-color: $ui-blue-10percent;
+            padding: 0 2rem;
+            width: 100%;
+            box-sizing: border-box;
+
+            .tip-content {
+                align-items: flex-start;
+            }
+        }
+    }
+
+    .things-to-try {
+        .display-hello {
+            .step-image {
+                align-self: center;
+            }
+        }
+
+        .project-card {
+            margin: 0 1.5rem;
+            border: 1px solid $ui-border;
+            border-radius: .5rem;
+            background-color: $ui-white;
+            overflow: hidden;
+            flex-basis: 0;
+            flex-grow: 1;
+        }
+
+        .project-card-image {
+            img {
+                max-width: 100%;
+            }
+        }
+
+        .project-card-info {
+            padding: 1rem;
+
+            p {
+                margin: .2rem 0;
+            }
+        }
+    }
+
+    .faq {
+        p {
+            margin-bottom: 1.25rem;
+            margin-left: 0;
+            max-width: $cols8;
+            text-align: left;
+        }
+
+        .faq-title {
+            margin-bottom: 1rem;
+            font-size: 1.4rem;
+        }
+
+        ul {
+            max-width: $cols8;
+        }
+
+        section {
+            ul {
+                max-width: $cols8;
+            }
+
+            .nav-spacer {
+                display: block;
+                visibility: hidden;
+                margin-top: -50px; // height of  nav bar
+                height: 50px;
+            }
+
+        }
+
+        ul,
+        ol {
+            &.indented {
+                padding-left: $cols1 + (20px / $em);
+            }
+        }
+    }
+
+    .blue {
+        background-color: $ui-blue-10percent;
+    }
+
+    .inner {
+        max-width: $cols12;
+    }
+
+    .section-separator {
+        margin: 4rem 0;
+        border-top: 1px solid $ui-border;
+        width: 100%;
+    }
+}
+
+.steps {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+
+.step {
+    flex-basis: 0;
+    flex-grow: 1;
+
+    .step-number-row {
+        padding-bottom: 1.5rem;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        .step-content {
+            text-align: left;
+            align-items: flex-start;
+
+            .step-description {
+                margin-bottom: 1rem;
+            }
+        }
+
+        .step-number {
+            display: inline-flex;
+            border-radius: 2rem;
+            background-color: $ui-blue;
+            width: 2rem;
+            height: 2rem;
+            color: $ui-white;
+            justify-content: center;
+            align-items: center;
+            flex-shrink: 0;
+        }
+    }
+
+    .step-content {
+        display: flex;
+        padding: 0 2rem;
+        text-align: center;
+        flex-flow: column;
+        align-items: center;
+        box-sizing: border-box;
+
+        .step-image {
+            height: 10rem;
+
+            img {
+                width: auto;
+                height: 100%;
+            }
+        }
+    }
+}
--- a/static/images/ev3/ev3-accept-connection.png
+++ b/static/images/ev3/ev3-accept-connection.png
--- a/static/images/ev3/ev3-connect-1.png
+++ b/static/images/ev3/ev3-connect-1.png
--- a/static/images/ev3/ev3-connect-2.png
+++ b/static/images/ev3/ev3-connect-2.png
--- a/static/images/ev3/ev3-connect-3.png
+++ b/static/images/ev3/ev3-connect-3.png
--- a/static/images/ev3/ev3-enter-pin.png
+++ b/static/images/ev3/ev3-enter-pin.png
--- a/static/images/ev3/ev3-illustration.png
+++ b/static/images/ev3/ev3-illustration.png
--- a/static/images/ev3/ev3-motor-port-a.png
+++ b/static/images/ev3/ev3-motor-port-a.png
--- a/static/images/ev3/ev3-pattern.svg
+++ b/static/images/ev3/ev3-pattern.svg
--- a/static/images/ev3/ev3-pin.png
+++ b/static/images/ev3/ev3-pin.png
--- a/static/images/ev3/ev3.svg
+++ b/static/images/ev3/ev3.svg
@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="36px" viewBox="0 0 32 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.1 (57501) - http://www.bohemiancoding.com/sketch -->
+    <title>ev3</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Round-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="EV3-Landing" transform="translate(-169.000000, -112.000000)" fill-rule="nonzero">
+            <g id="Masthead" transform="translate(0.000000, 46.000000)">
+                <g id="ev3" transform="translate(169.000000, 66.000000)">
+                    <path d="M30.3448276,32.0727273 L1.65517241,32.0727273 C0.993103448,32.0727273 0.551724138,31.6363636 0.551724138,30.9818182 L0.551724138,5.01818182 C0.551724138,4.36363636 0.993103448,3.92727273 1.65517241,3.92727273 L30.3448276,3.92727273 C31.0068966,3.92727273 31.4482759,4.36363636 31.4482759,5.01818182 L31.4482759,30.9818182 C31.4482759,31.6363636 31.0068966,32.0727273 30.3448276,32.0727273 Z" id="Shape" stroke="#7C87A5" stroke-width="1.09090909" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M28.137931,35.4545455 L3.86206897,35.4545455 C3.2,35.4545455 2.75862069,35.0181818 2.75862069,34.3636364 L2.75862069,1.63636364 C2.75862069,0.981818182 3.2,0.545454545 3.86206897,0.545454545 L28.137931,0.545454545 C28.8,0.545454545 29.2413793,0.981818182 29.2413793,1.63636364 L29.2413793,34.3636364 C29.2413793,35.0181818 28.8,35.4545455 28.137931,35.4545455 Z" id="Shape" stroke="#7C87A5" stroke-width="1.09090909" fill="#E6E7E8" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <rect id="Rectangle-path" stroke="#7C87A5" stroke-width="1.09090909" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" x="2.75862069" y="15.8181818" width="26.4827586" height="14.1818182"></rect>
+                    <path d="M16,11.4545455 L16,15.8181818" id="Shape" stroke="#7C87A5" stroke-width="1.09090909" fill="#E6E7E8" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M25.9310345,13.6363636 L6.06896552,13.6363636 C5.40689655,13.6363636 4.96551724,13.2 4.96551724,12.5454545 L4.96551724,3.81818182 C4.96551724,3.16363636 5.40689655,2.72727273 6.06896552,2.72727273 L25.9310345,2.72727273 C26.5931034,2.72727273 27.0344828,3.16363636 27.0344828,3.81818182 L27.0344828,12.5454545 C27.0344828,13.2 26.5931034,13.6363636 25.9310345,13.6363636 Z" id="Shape" fill="#414757"></path>
+                    <path d="M16.5517241,24.1090909 L15.4482759,24.1090909 C15.1172414,24.1090909 14.8965517,23.8909091 14.8965517,23.5636364 L14.8965517,22.4727273 C14.8965517,22.1454545 15.1172414,21.9272727 15.4482759,21.9272727 L16.5517241,21.9272727 C16.8827586,21.9272727 17.1034483,22.1454545 17.1034483,22.4727273 L17.1034483,23.5636364 C17.1034483,23.8909091 16.8827586,24.1090909 16.5517241,24.1090909 Z" id="Shape" fill="#7C87A5" opacity="0.5"></path>
+                    <path d="M11.6965517,24.1090909 L10.0413793,24.1090909 C9.37931034,24.1090909 8.93793103,23.6727273 8.93793103,23.0181818 C8.93793103,22.3636364 9.37931034,21.9272727 10.0413793,21.9272727 L11.6965517,21.9272727 C12.0275862,21.9272727 12.2482759,22.1454545 12.2482759,22.4727273 L12.2482759,23.5636364 C12.2482759,23.8909091 11.9172414,24.1090909 11.6965517,24.1090909 Z" id="Shape" fill="#7C87A5" opacity="0.5"></path>
+                    <path d="M20.3034483,21.9272727 L21.9586207,21.9272727 C22.6206897,21.9272727 23.062069,22.3636364 23.062069,23.0181818 C23.062069,23.6727273 22.6206897,24.1090909 21.9586207,24.1090909 L20.3034483,24.1090909 C19.9724138,24.1090909 19.7517241,23.8909091 19.7517241,23.5636364 L19.7517241,22.4727273 C19.7517241,22.2545455 20.0827586,21.9272727 20.3034483,21.9272727 Z" id="Shape" fill="#7C87A5" opacity="0.5"></path>
+                    <path d="M9.04827586,19.0909091 L5.51724138,19.0909091 C5.1862069,19.0909091 4.96551724,18.8727273 4.96551724,18.5454545 L4.96551724,15.8181818 L11.5862069,15.8181818 L9.48965517,18.8727273 C9.48965517,18.9818182 9.26896552,19.0909091 9.04827586,19.0909091 Z" id="Shape" fill="#7C87A5" opacity="0.5"></path>
+                    <path d="M19.9724138,20.6181818 L19.4206897,21.1636364 C19.3103448,21.2727273 19.3103448,21.3818182 19.3103448,21.6 L19.3103448,21.8181818 C19.3103448,22.1454545 19.0896552,22.3636364 18.7586207,22.3636364 L18.2068966,22.3636364 C17.8758621,22.3636364 17.6551724,22.1454545 17.6551724,21.8181818 C17.6551724,21.4909091 17.4344828,21.2727273 17.1034483,21.2727273 L14.8965517,21.2727273 C14.5655172,21.2727273 14.3448276,21.4909091 14.3448276,21.8181818 C14.3448276,22.1454545 14.1241379,22.3636364 13.7931034,22.3636364 L13.2413793,22.3636364 C12.9103448,22.3636364 12.6896552,22.1454545 12.6896552,21.8181818 L12.6896552,21.4909091 C12.6896552,21.3818182 12.5793103,21.1636364 12.5793103,21.0545455 L12.0275862,20.5090909 C11.8068966,20.2909091 11.8068966,19.9636364 12.0275862,19.7454545 L13.6827586,18.1090909 C13.7931034,18 13.9034483,18 14.1241379,18 L18.0965517,18 C18.2068966,18 18.4275862,18.1090909 18.537931,18.1090909 L20.1931034,19.7454545 C20.1931034,19.9636364 20.1931034,20.4 19.9724138,20.6181818 Z" id="Shape" fill="#7C87A5" opacity="0.5"></path>
+                    <path d="M12.0275862,25.5272727 L12.5793103,24.9818182 C12.6896552,24.8727273 12.6896552,24.7636364 12.6896552,24.5454545 L12.6896552,24.2181818 C12.6896552,23.8909091 12.9103448,23.6727273 13.2413793,23.6727273 L13.7931034,23.6727273 C14.1241379,23.6727273 14.3448276,23.8909091 14.3448276,24.2181818 C14.3448276,24.5454545 14.5655172,24.7636364 14.8965517,24.7636364 L17.1034483,24.7636364 C17.4344828,24.7636364 17.6551724,24.5454545 17.6551724,24.2181818 C17.6551724,23.8909091 17.8758621,23.6727273 18.2068966,23.6727273 L18.7586207,23.6727273 C19.0896552,23.6727273 19.3103448,23.8909091 19.3103448,24.2181818 L19.3103448,24.5454545 C19.3103448,24.6545455 19.4206897,24.8727273 19.4206897,24.9818182 L19.9724138,25.5272727 C20.1931034,25.7454545 20.1931034,26.0727273 19.9724138,26.2909091 L18.3172414,27.9272727 C18.2068966,28.0363636 18.0965517,28.0363636 17.8758621,28.0363636 L13.9034483,28.0363636 C13.7931034,28.0363636 13.5724138,27.9272727 13.462069,27.9272727 L11.8068966,26.2909091 C11.8068966,26.0727273 11.8068966,25.7454545 12.0275862,25.5272727 Z" id="Shape" fill="#7C87A5" opacity="0.5"></path>
+                    <path d="M23.7241379,30 L29.2413793,30 L29.2413793,34.3636364 C29.2413793,35.0181818 28.8,35.4545455 28.137931,35.4545455 L23.7241379,35.4545455 L23.7241379,30 Z" id="Shape" stroke="#CC4C23" stroke-width="1.09090909" fill="#F15A29" stroke-linecap="round" stroke-linejoin="round"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/static/images/ev3/mac-bluetooth-on.png
+++ b/static/images/ev3/mac-bluetooth-on.png
--- a/static/images/ev3/mac-enter-passcode.png
+++ b/static/images/ev3/mac-enter-passcode.png
--- a/static/images/ev3/mac-rename-ev3-1.png
+++ b/static/images/ev3/mac-rename-ev3-1.png
--- a/static/images/ev3/mac-rename-ev3-2.png
+++ b/static/images/ev3/mac-rename-ev3-2.png
--- a/static/images/ev3/mac-rename-ev3-3.png
+++ b/static/images/ev3/mac-rename-ev3-3.png
--- a/static/images/ev3/mac-toolbar.png
+++ b/static/images/ev3/mac-toolbar.png
--- a/static/images/ev3/motor-turn-block.png
+++ b/static/images/ev3/motor-turn-block.png
--- a/static/images/ev3/starter-distance-instrument.png
+++ b/static/images/ev3/starter-distance-instrument.png
--- a/static/images/ev3/starter-flying-game.png
+++ b/static/images/ev3/starter-flying-game.png
--- a/static/images/ev3/starter-wave-hello.png
+++ b/static/images/ev3/starter-wave-hello.png
--- a/static/images/ev3/win-device-ready.png
+++ b/static/images/ev3/win-device-ready.png
--- a/static/images/microbit/display-hello-block.png
+++ b/static/images/microbit/display-hello-block.png
--- a/static/images/microbit/mac-bluetooth-on.png
+++ b/static/images/microbit/mac-bluetooth-on.png
--- a/static/images/microbit/mac-copy-hex.png
+++ b/static/images/microbit/mac-copy-hex.png
--- a/static/images/microbit/mac-toolbar.png
+++ b/static/images/microbit/mac-toolbar.png
--- a/static/images/microbit/mbit-connect-1.png
+++ b/static/images/microbit/mbit-connect-1.png
--- a/static/images/microbit/mbit-connect-2.png
+++ b/static/images/microbit/mbit-connect-2.png
--- a/static/images/microbit/mbit-connect-3.png
+++ b/static/images/microbit/mbit-connect-3.png
--- a/static/images/microbit/mbit-display-h.png
+++ b/static/images/microbit/mbit-display-h.png
--- a/static/images/microbit/mbit-hex-download.png
+++ b/static/images/microbit/mbit-hex-download.png
--- a/static/images/microbit/mbit-pattern.svg
+++ b/static/images/microbit/mbit-pattern.svg
@ -0,0 +1,217 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1347px" height="622px" viewBox="0 0 1347 622" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51 (57462) - http://www.bohemiancoding.com/sketch -->
+    <title>mbit-pattern</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <polygon id="path-1" points="0 0 104 0 104 103.9987 0 103.9987"></polygon>
+        <polygon id="path-3" points="0 0 104 0 104 103.9987 0 103.9987"></polygon>
+        <polygon id="path-5" points="0.31136 0 103.99136 0 103.99136 103.9987 0.31136 103.9987"></polygon>
+        <polygon id="path-7" points="0 0 104 0 104 103.9987 0 103.9987"></polygon>
+        <polygon id="path-9" points="0.31136 0 103.99136 0 103.99136 103.9987 0.31136 103.9987"></polygon>
+        <polygon id="path-11" points="0 0 207 0 207 206.998706 0 206.998706"></polygon>
+        <polygon id="path-13" points="0 0 207 0 207 206.998706 0 206.998706"></polygon>
+        <polygon id="path-15" points="0 0 207 0 207 206.998706 0 206.998706"></polygon>
+        <polygon id="path-17" points="0 0 207 0 207 206.998706 0 206.998706"></polygon>
+    </defs>
+    <g id="Round-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.05">
+        <g id="mbit-pattern">
+            <g id="Group-3">
+                <mask id="mask-2" fill="white">
+                    <use xlink:href="#path-1"></use>
+                </mask>
+                <g id="Clip-2"></g>
+                <polygon id="Fill-1" fill="#FFFFFF" mask="url(#mask-2)" points="104 103.9987 0 -0.0013 104 -0.0013"></polygon>
+            </g>
+            <polygon id="Fill-4" fill="#FFFFFF" points="208 208 104 104 208 104"></polygon>
+            <polygon id="Fill-6" fill="#FFFFFF" points="311 311 207 207 311 207"></polygon>
+            <polygon id="Fill-8" fill="#FFFFFF" points="311 208 207 104 311 104"></polygon>
+            <g id="Group-12" transform="translate(207.000000, 0.000000)">
+                <mask id="mask-4" fill="white">
+                    <use xlink:href="#path-3"></use>
+                </mask>
+                <g id="Clip-11"></g>
+                <polygon id="Fill-10" fill="#FFFFFF" mask="url(#mask-4)" points="104 103.9987 0 -0.0013 104 -0.0013"></polygon>
+            </g>
+            <g id="Group-15" transform="translate(103.000000, 0.000000)">
+                <mask id="mask-6" fill="white">
+                    <use xlink:href="#path-5"></use>
+                </mask>
+                <g id="Clip-14"></g>
+                <polygon id="Fill-13" fill="#FFFFFF" mask="url(#mask-6)" points="103.99136 103.9987 0.31136 -0.0013 103.99136 -0.0013"></polygon>
+            </g>
+            <polygon id="Fill-16" fill="#FFFFFF" points="415 208 311 104 415 104"></polygon>
+            <polygon id="Fill-18" fill="#FFFFFF" points="415 311 311 207 415 207"></polygon>
+            <polygon id="Fill-20" fill="#FFFFFF" points="415 415 311 311 415 311"></polygon>
+            <polygon id="Fill-22" fill="#FFFFFF" points="311 415 207 311 311 311"></polygon>
+            <polygon id="Fill-24" fill="#FFFFFF" points="518 518 414 414 518 414"></polygon>
+            <polygon id="Fill-26" fill="#FFFFFF" points="415 518 311 414 415 414"></polygon>
+            <polygon id="Fill-28" fill="#FFFFFF" points="415 622 311 518 415 518"></polygon>
+            <polygon id="Fill-34" fill="#FFFFFF" points="518 311 414 207 518 207"></polygon>
+            <polygon id="Fill-36" fill="#FFFFFF" points="622 311 518 207 622 207"></polygon>
+            <polygon id="Fill-38" fill="#FFFFFF" points="622 208 518 104 622 104"></polygon>
+            <polygon id="Fill-40" fill="#FFFFFF" points="518 415 414 311 518 311"></polygon>
+            <polygon id="Fill-42" fill="#FFFFFF" points="622 518 518 414 622 414"></polygon>
+            <polygon id="Fill-44" fill="#FFFFFF" points="622 415 518 311 622 311"></polygon>
+            <polygon id="Fill-46" fill="#FFFFFF" points="726 415 622 311 726 311"></polygon>
+            <polygon id="Fill-48" fill="#FFFFFF" points="829 415 725 311 829 311"></polygon>
+            <polygon id="Fill-50" fill="#FFFFFF" points="726 311 622 207 726 207"></polygon>
+            <polygon id="Fill-52" fill="#FFFFFF" points="622 622 518 518 622 518"></polygon>
+            <polygon id="Fill-54" fill="#FFFFFF" points="518 622 414 518 518 518"></polygon>
+            <polygon id="Fill-66" fill="#FFFFFF" points="829 622 725 518 829 518"></polygon>
+            <polygon id="Fill-70" fill="#FFFFFF" points="726 518 622 414 726 414"></polygon>
+            <polygon id="Fill-72" fill="#FFFFFF" points="726 622 622 518 726 518"></polygon>
+            <polygon id="Fill-74" fill="#FFFFFF" points="518 208 414 104 518 104"></polygon>
+            <g id="Group-78" transform="translate(414.000000, 0.000000)">
+                <mask id="mask-8" fill="white">
+                    <use xlink:href="#path-7"></use>
+                </mask>
+                <g id="Clip-77"></g>
+                <polygon id="Fill-76" fill="#FFFFFF" mask="url(#mask-8)" points="104 103.9987 0 -0.0013 104 -0.0013"></polygon>
+            </g>
+            <g id="Group-81" transform="translate(311.000000, 0.000000)">
+                <mask id="mask-10" fill="white">
+                    <use xlink:href="#path-9"></use>
+                </mask>
+                <g id="Clip-80"></g>
+                <polygon id="Fill-79" fill="#FFFFFF" mask="url(#mask-10)" points="103.99136 103.9987 0.31136 -0.0013 103.99136 -0.0013"></polygon>
+            </g>
+            <polygon id="Fill-82" fill="#FFFFFF" points="35 139 0 104 35 104"></polygon>
+            <polygon id="Fill-84" fill="#FFFFFF" points="70 139 35 104 70 104"></polygon>
+            <polygon id="Fill-86" fill="#FFFFFF" points="104 139 69 104 104 104"></polygon>
+            <polygon id="Fill-88" fill="#FFFFFF" points="35 173 0 138 35 138"></polygon>
+            <polygon id="Fill-90" fill="#FFFFFF" points="70 173 35 138 70 138"></polygon>
+            <polygon id="Fill-92" fill="#FFFFFF" points="104 173 69 138 104 138"></polygon>
+            <polygon id="Fill-94" fill="#FFFFFF" points="35 208 0 173 35 173"></polygon>
+            <polygon id="Fill-96" fill="#FFFFFF" points="70 208 35 173 70 173"></polygon>
+            <polygon id="Fill-98" fill="#FFFFFF" points="104 208 69 173 104 173"></polygon>
+            <polygon id="Fill-100" fill="#FFFFFF" points="35 242 0 207 35 207"></polygon>
+            <polygon id="Fill-102" fill="#FFFFFF" points="70 242 35 207 70 207"></polygon>
+            <polygon id="Fill-104" fill="#FFFFFF" points="104 242 69 207 104 207"></polygon>
+            <polygon id="Fill-106" fill="#FFFFFF" points="35 277 0 242 35 242"></polygon>
+            <polygon id="Fill-108" fill="#FFFFFF" points="70 277 35 242 70 242"></polygon>
+            <polygon id="Fill-110" fill="#FFFFFF" points="104 277 69 242 104 242"></polygon>
+            <polygon id="Fill-112" fill="#FFFFFF" points="35 311 0 276 35 276"></polygon>
+            <polygon id="Fill-114" fill="#FFFFFF" points="70 311 35 276 70 276"></polygon>
+            <polygon id="Fill-116" fill="#FFFFFF" points="104 311 69 276 104 276"></polygon>
+            <polygon id="Fill-118" fill="#FFFFFF" points="139 242 104 207 139 207"></polygon>
+            <polygon id="Fill-120" fill="#FFFFFF" points="173 242 138 207 173 207"></polygon>
+            <polygon id="Fill-122" fill="#FFFFFF" points="208 242 173 207 208 207"></polygon>
+            <polygon id="Fill-124" fill="#FFFFFF" points="139 277 104 242 139 242"></polygon>
+            <polygon id="Fill-126" fill="#FFFFFF" points="173 277 138 242 173 242"></polygon>
+            <polygon id="Fill-128" fill="#FFFFFF" points="208 277 173 242 208 242"></polygon>
+            <polygon id="Fill-130" fill="#FFFFFF" points="139 311 104 276 139 276"></polygon>
+            <polygon id="Fill-132" fill="#FFFFFF" points="173 311 138 276 173 276"></polygon>
+            <polygon id="Fill-134" fill="#FFFFFF" points="208 311 173 276 208 276"></polygon>
+            <polygon id="Fill-136" fill="#FFFFFF" points="35 346 0 311 35 311"></polygon>
+            <polygon id="Fill-138" fill="#FFFFFF" points="70 346 35 311 70 311"></polygon>
+            <polygon id="Fill-140" fill="#FFFFFF" points="104 346 69 311 104 311"></polygon>
+            <polygon id="Fill-142" fill="#FFFFFF" points="35 380 0 345 35 345"></polygon>
+            <polygon id="Fill-144" fill="#FFFFFF" points="70 380 35 345 70 345"></polygon>
+            <polygon id="Fill-146" fill="#FFFFFF" points="104 380 69 345 104 345"></polygon>
+            <polygon id="Fill-148" fill="#FFFFFF" points="35 415 0 380 35 380"></polygon>
+            <polygon id="Fill-150" fill="#FFFFFF" points="70 415 35 380 70 380"></polygon>
+            <polygon id="Fill-152" fill="#FFFFFF" points="104 415 69 380 104 380"></polygon>
+            <polygon id="Fill-154" fill="#FFFFFF" points="139 346 104 311 139 311"></polygon>
+            <polygon id="Fill-156" fill="#FFFFFF" points="173 346 138 311 173 311"></polygon>
+            <polygon id="Fill-158" fill="#FFFFFF" points="208 346 173 311 208 311"></polygon>
+            <polygon id="Fill-160" fill="#FFFFFF" points="139 380 104 345 139 345"></polygon>
+            <polygon id="Fill-162" fill="#FFFFFF" points="173 380 138 345 173 345"></polygon>
+            <polygon id="Fill-164" fill="#FFFFFF" points="208 380 173 345 208 345"></polygon>
+            <polygon id="Fill-166" fill="#FFFFFF" points="139 415 104 380 139 380"></polygon>
+            <polygon id="Fill-168" fill="#FFFFFF" points="173 415 138 380 173 380"></polygon>
+            <polygon id="Fill-170" fill="#FFFFFF" points="208 415 173 380 208 380"></polygon>
+            <polygon id="Fill-172" fill="#FFFFFF" points="35 449 0 414 35 414"></polygon>
+            <polygon id="Fill-174" fill="#FFFFFF" points="70 449 35 414 70 414"></polygon>
+            <polygon id="Fill-176" fill="#FFFFFF" points="104 449 69 414 104 414"></polygon>
+            <polygon id="Fill-178" fill="#FFFFFF" points="35 484 0 449 35 449"></polygon>
+            <polygon id="Fill-180" fill="#FFFFFF" points="70 484 35 449 70 449"></polygon>
+            <polygon id="Fill-182" fill="#FFFFFF" points="104 484 69 449 104 449"></polygon>
+            <polygon id="Fill-184" fill="#FFFFFF" points="35 519 0 484 35 484"></polygon>
+            <polygon id="Fill-186" fill="#FFFFFF" points="70 519 35 484 70 484"></polygon>
+            <polygon id="Fill-188" fill="#FFFFFF" points="104 519 69 484 104 484"></polygon>
+            <polygon id="Fill-190" fill="#FFFFFF" points="139 449 104 414 139 414"></polygon>
+            <polygon id="Fill-192" fill="#FFFFFF" points="173 449 138 414 173 414"></polygon>
+            <polygon id="Fill-194" fill="#FFFFFF" points="208 449 173 414 208 414"></polygon>
+            <polygon id="Fill-196" fill="#FFFFFF" points="139 484 104 449 139 449"></polygon>
+            <polygon id="Fill-198" fill="#FFFFFF" points="173 484 138 449 173 449"></polygon>
+            <polygon id="Fill-200" fill="#FFFFFF" points="208 484 173 449 208 449"></polygon>
+            <polygon id="Fill-202" fill="#FFFFFF" points="139 519 104 484 139 484"></polygon>
+            <polygon id="Fill-204" fill="#FFFFFF" points="173 519 138 484 173 484"></polygon>
+            <polygon id="Fill-206" fill="#FFFFFF" points="208 519 173 484 208 484"></polygon>
+            <polygon id="Fill-208" fill="#FFFFFF" points="242 449 207 414 242 414"></polygon>
+            <polygon id="Fill-210" fill="#FFFFFF" points="277 449 242 414 277 414"></polygon>
+            <polygon id="Fill-212" fill="#FFFFFF" points="311 449 276 414 311 414"></polygon>
+            <polygon id="Fill-214" fill="#FFFFFF" points="242 484 207 449 242 449"></polygon>
+            <polygon id="Fill-216" fill="#FFFFFF" points="277 484 242 449 277 449"></polygon>
+            <polygon id="Fill-218" fill="#FFFFFF" points="311 484 276 449 311 449"></polygon>
+            <polygon id="Fill-220" fill="#FFFFFF" points="242 519 207 484 242 484"></polygon>
+            <polygon id="Fill-222" fill="#FFFFFF" points="277 519 242 484 277 484"></polygon>
+            <polygon id="Fill-224" fill="#FFFFFF" points="311 519 276 484 311 484"></polygon>
+            <polygon id="Fill-226" fill="#FFFFFF" points="35 553 0 518 35 518"></polygon>
+            <polygon id="Fill-228" fill="#FFFFFF" points="70 553 35 518 70 518"></polygon>
+            <polygon id="Fill-230" fill="#FFFFFF" points="104 553 69 518 104 518"></polygon>
+            <polygon id="Fill-232" fill="#FFFFFF" points="139 553 104 518 139 518"></polygon>
+            <polygon id="Fill-234" fill="#FFFFFF" points="173 553 138 518 173 518"></polygon>
+            <polygon id="Fill-236" fill="#FFFFFF" points="208 553 173 518 208 518"></polygon>
+            <polygon id="Fill-238" fill="#FFFFFF" points="242 553 207 518 242 518"></polygon>
+            <polygon id="Fill-240" fill="#FFFFFF" points="277 553 242 518 277 518"></polygon>
+            <polygon id="Fill-242" fill="#FFFFFF" points="311 553 276 518 311 518"></polygon>
+            <polygon id="Fill-244" fill="#FFFFFF" points="35 588 0 553 35 553"></polygon>
+            <polygon id="Fill-246" fill="#FFFFFF" points="70 588 35 553 70 553"></polygon>
+            <polygon id="Fill-248" fill="#FFFFFF" points="104 588 69 553 104 553"></polygon>
+            <polygon id="Fill-250" fill="#FFFFFF" points="35 622 0 587 35 587"></polygon>
+            <polygon id="Fill-252" fill="#FFFFFF" points="70 622 35 587 70 587"></polygon>
+            <polygon id="Fill-254" fill="#FFFFFF" points="104 622 69 587 104 587"></polygon>
+            <polygon id="Fill-262" fill="#FFFFFF" points="139 588 104 553 139 553"></polygon>
+            <polygon id="Fill-264" fill="#FFFFFF" points="173 588 138 553 173 553"></polygon>
+            <polygon id="Fill-266" fill="#FFFFFF" points="208 588 173 553 208 553"></polygon>
+            <polygon id="Fill-268" fill="#FFFFFF" points="139 622 104 587 139 587"></polygon>
+            <polygon id="Fill-270" fill="#FFFFFF" points="173 622 138 587 173 587"></polygon>
+            <polygon id="Fill-272" fill="#FFFFFF" points="208 622 173 587 208 587"></polygon>
+            <polygon id="Fill-280" fill="#FFFFFF" points="242 588 207 553 242 553"></polygon>
+            <polygon id="Fill-282" fill="#FFFFFF" points="277 588 242 553 277 553"></polygon>
+            <polygon id="Fill-284" fill="#FFFFFF" points="311 588 276 553 311 553"></polygon>
+            <polygon id="Fill-286" fill="#FFFFFF" points="242 622 207 587 242 587"></polygon>
+            <polygon id="Fill-288" fill="#FFFFFF" points="277 622 242 587 277 587"></polygon>
+            <polygon id="Fill-290" fill="#FFFFFF" points="311 622 276 587 311 587"></polygon>
+            <polygon id="Fill-292" fill="#FFFFFF" points="346 588 311 553 346 553"></polygon>
+            <polygon id="Fill-294" fill="#FFFFFF" points="346 622 311 587 346 587"></polygon>
+            <polygon id="Fill-296" fill="#FFFFFF" points="380 622 345 587 380 587"></polygon>
+            <g id="Group-492" transform="translate(518.000000, 0.000000)">
+                <mask id="mask-12" fill="white">
+                    <use xlink:href="#path-11"></use>
+                </mask>
+                <g id="Clip-491"></g>
+                <polygon id="Fill-490" fill="#FFFFFF" mask="url(#mask-12)" points="207 206.998706 0 -0.00129375 207 -0.00129375"></polygon>
+            </g>
+            <polygon id="Fill-493" fill="#FFFFFF" points="932 414 725 207 932 207"></polygon>
+            <polygon id="Fill-495" fill="#FFFFFF" points="1140 414 933 207 1140 207"></polygon>
+            <polygon id="Fill-497" fill="#FFFFFF" points="1347 414 1140 207 1347 207"></polygon>
+            <g id="Group-501" transform="translate(933.000000, 0.000000)">
+                <mask id="mask-14" fill="white">
+                    <use xlink:href="#path-13"></use>
+                </mask>
+                <g id="Clip-500"></g>
+                <polygon id="Fill-499" fill="#FFFFFF" mask="url(#mask-14)" points="207 206.998706 0 -0.00129375 207 -0.00129375"></polygon>
+            </g>
+            <g id="Group-504" transform="translate(1140.000000, 0.000000)">
+                <mask id="mask-16" fill="white">
+                    <use xlink:href="#path-15"></use>
+                </mask>
+                <g id="Clip-503"></g>
+                <polygon id="Fill-502" fill="#FFFFFF" mask="url(#mask-16)" points="207 206.998706 0 -0.00129375 207 -0.00129375"></polygon>
+            </g>
+            <polygon id="Fill-505" fill="#FFFFFF" points="1140 621 933 414 1140 414"></polygon>
+            <polygon id="Fill-507" fill="#FFFFFF" points="932 621 725 414 932 414"></polygon>
+            <polygon id="Fill-513" fill="#FFFFFF" points="1347 621 1140 414 1347 414"></polygon>
+            <g id="Group-517" transform="translate(725.000000, 0.000000)">
+                <mask id="mask-18" fill="white">
+                    <use xlink:href="#path-17"></use>
+                </mask>
+                <g id="Clip-516"></g>
+                <polygon id="Fill-515" fill="#FFFFFF" mask="url(#mask-18)" points="207 206.998706 0 -0.00129375 207 -0.00129375"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/static/images/microbit/mbit-usb.png
+++ b/static/images/microbit/mbit-usb.png
--- a/static/images/microbit/microbit-heart.png
+++ b/static/images/microbit/microbit-heart.png
--- a/static/images/microbit/microbit.svg
+++ b/static/images/microbit/microbit.svg
@ -0,0 +1,263 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="34px" height="28px" viewBox="0 0 34 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.1 (57501) - http://www.bohemiancoding.com/sketch -->
+    <title>microbit</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Round-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="MicroBit-Landing" transform="translate(-169.000000, -120.000000)">
+            <g id="Masthead" transform="translate(0.000000, 46.000000)">
+                <g id="microbit" transform="translate(170.000000, 74.000000)">
+                    <polygon id="Shape" stroke="#7C87A5" stroke-width="0.22" fill="#E6E7E8" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="19.11 0.11 19.11 1 13.78 1 13.78 0.11 14.22 0.11 14.22 0.33 14.67 0.33 14.67 0.11 18.22 0.11 18.22 0.33 18.67 0.33 18.67 0.11"></polygon>
+                    <path d="M30.66,1 L2.22,1 C1.24082518,0.999984548 0.445500982,1.79084064 0.44,2.77 L0.44,25 C0.441253651,25.7700944 0.93758836,26.4520502 1.67,26.69 C1.84871651,26.7421345 2.03383687,26.7690611 2.22,26.77 L30.66,26.77 C30.8461631,26.7690611 31.0312835,26.7421345 31.21,26.69 C31.9424116,26.4520502 32.4387463,25.7700944 32.44,25 L32.44,2.77 C32.434499,1.79084064 31.6391748,0.999984548 30.66,1 Z M3.11,23.54 C2.71343518,23.54 2.34699416,23.3284352 2.14871175,22.985 C1.95042933,22.6415648 1.95042933,22.2184352 2.14871175,21.875 C2.34699416,21.5315648 2.71343518,21.32 3.11,21.32 C3.50656482,21.32 3.87300584,21.5315648 4.07128825,21.875 C4.26957067,22.2184352 4.26957067,22.6415648 4.07128825,22.985 C3.87300584,23.3284352 3.50656482,23.54 3.11,23.54 Z M9.38,23.54 C8.93014083,23.5399817 8.52477626,23.2684441 8.35357179,22.8524366 C8.18236732,22.436429 8.27918149,21.9582239 8.59871605,21.641568 C8.91825061,21.3249121 9.39731226,21.2324295 9.81175347,21.4073917 C10.2261947,21.5823538 10.4940528,21.9901591 10.49,22.44 C10.4845121,23.0491272 9.98915197,23.5400247 9.38,23.54 Z M16.44,23.54 C15.9901408,23.5399817 15.5847763,23.2684441 15.4135718,22.8524366 C15.2423673,22.436429 15.3391815,21.9582239 15.658716,21.641568 C15.9782506,21.3249121 16.4573123,21.2324295 16.8717535,21.4073917 C17.2861947,21.5823538 17.5540528,21.9901591 17.55,22.44 C17.5445121,23.0491272 17.049152,23.5400247 16.44,23.54 Z M23.5,23.54 C23.1034352,23.54 22.7369942,23.3284352 22.5387117,22.985 C22.3404293,22.6415648 22.3404293,22.2184352 22.5387117,21.875 C22.7369942,21.5315648 23.1034352,21.32 23.5,21.32 C23.8965648,21.32 24.2630058,21.5315648 24.4612883,21.875 C24.6595707,22.2184352 24.6595707,22.6415648 24.4612883,22.985 C24.2630058,23.3284352 23.8965648,23.54 23.5,23.54 Z M29.77,23.54 C29.3201408,23.5399817 28.9147763,23.2684441 28.7435718,22.8524366 C28.5723673,22.436429 28.6691815,21.9582239 28.988716,21.641568 C29.3082506,21.3249121 29.7873123,21.2324295 30.2017535,21.4073917 C30.6161947,21.5823538 30.8840528,21.9901591 30.88,22.44 C30.8745121,23.0491272 30.379152,23.5400247 29.77,23.54 Z" id="Shape" stroke="#231F20" stroke-width="0.89" fill="#231F20" fill-rule="nonzero" opacity="0.1"></path>
+                    <path d="M30.66,1 L2.22,1 C1.24082518,0.999984548 0.445500982,1.79084064 0.44,2.77 L0.44,25 C0.441253651,25.7700944 0.93758836,26.4520502 1.67,26.69 C1.84871651,26.7421345 2.03383687,26.7690611 2.22,26.77 L30.66,26.77 C30.8461631,26.7690611 31.0312835,26.7421345 31.21,26.69 C31.9424116,26.4520502 32.4387463,25.7700944 32.44,25 L32.44,2.77 C32.434499,1.79084064 31.6391748,0.999984548 30.66,1 Z M3.11,23.54 C2.71343518,23.54 2.34699416,23.3284352 2.14871175,22.985 C1.95042933,22.6415648 1.95042933,22.2184352 2.14871175,21.875 C2.34699416,21.5315648 2.71343518,21.32 3.11,21.32 C3.50656482,21.32 3.87300584,21.5315648 4.07128825,21.875 C4.26957067,22.2184352 4.26957067,22.6415648 4.07128825,22.985 C3.87300584,23.3284352 3.50656482,23.54 3.11,23.54 Z M9.38,23.54 C8.93014083,23.5399817 8.52477626,23.2684441 8.35357179,22.8524366 C8.18236732,22.436429 8.27918149,21.9582239 8.59871605,21.641568 C8.91825061,21.3249121 9.39731226,21.2324295 9.81175347,21.4073917 C10.2261947,21.5823538 10.4940528,21.9901591 10.49,22.44 C10.4845121,23.0491272 9.98915197,23.5400247 9.38,23.54 Z M16.44,23.54 C15.9901408,23.5399817 15.5847763,23.2684441 15.4135718,22.8524366 C15.2423673,22.436429 15.3391815,21.9582239 15.658716,21.641568 C15.9782506,21.3249121 16.4573123,21.2324295 16.8717535,21.4073917 C17.2861947,21.5823538 17.5540528,21.9901591 17.55,22.44 C17.5445121,23.0491272 17.049152,23.5400247 16.44,23.54 Z M23.5,23.54 C23.1034352,23.54 22.7369942,23.3284352 22.5387117,22.985 C22.3404293,22.6415648 22.3404293,22.2184352 22.5387117,21.875 C22.7369942,21.5315648 23.1034352,21.32 23.5,21.32 C23.8965648,21.32 24.2630058,21.5315648 24.4612883,21.875 C24.6595707,22.2184352 24.6595707,22.6415648 24.4612883,22.985 C24.2630058,23.3284352 23.8965648,23.54 23.5,23.54 Z M29.77,23.54 C29.3201408,23.5399817 28.9147763,23.2684441 28.7435718,22.8524366 C28.5723673,22.436429 28.6691815,21.9582239 28.988716,21.641568 C29.3082506,21.3249121 29.7873123,21.2324295 30.2017535,21.4073917 C30.6161947,21.5823538 30.8840528,21.9901591 30.88,22.44 C30.8745121,23.0491272 30.379152,23.5400247 29.77,23.54 Z" id="Shape" fill="#414757" fill-rule="nonzero"></path>
+                    <path d="M0.44,9 L0.44,2.77 C0.445500982,1.79084064 1.24082518,0.999984548 2.22,1 L8.44,1 L0.44,9 Z" id="Shape" fill="#4C97FF" fill-rule="nonzero"></path>
+                    <polygon id="Shape" fill="#4C97FF" fill-rule="nonzero" points="8.44 4.56 8.44 1 12 1"></polygon>
+                    <polygon id="Shape" fill="#4C97FF" fill-rule="nonzero" points="12 3.67 12 1 14.67 1"></polygon>
+                    <polygon id="Shape" stroke="#4C97FF" stroke-width="0.22" fill="#4C97FF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="28.44 9.89 28.44 7.22 31.11 7.22"></polygon>
+                    <polygon id="Shape" stroke="#4C97FF" stroke-width="0.22" fill="#4C97FF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" points="4.45 16.11 4.45 18.78 1.78 18.78"></polygon>
+                    <rect id="Rectangle-path" fill="#FFFFFF" fill-rule="nonzero" x="0.89" y="12.56" width="1" height="1" rx="0.44"></rect>
+                    <rect id="Rectangle-path" fill="#FFFFFF" fill-rule="nonzero" x="31.11" y="12.56" width="1" height="1" rx="0.44"></rect>
+                    <path d="M17.56,5.56 C17.7312083,5.55999999 17.87,5.42120826 17.87,5.25 C17.87,5.07879174 17.7312083,4.94000001 17.56,4.94 C17.3887917,4.94 17.25,5.07879173 17.25,5.25 C17.25,5.42120827 17.3887917,5.56 17.56,5.56" id="Shape" fill="#4C97FF" fill-rule="nonzero"></path>
+                    <path d="M15.3,4.94 C15.1892477,4.93999999 15.0869083,4.99908565 15.0315321,5.09499999 C14.9761559,5.19091433 14.9761559,5.30908567 15.0315321,5.40500001 C15.0869083,5.50091435 15.1892477,5.56000001 15.3,5.56 C15.4712083,5.55999999 15.61,5.42120826 15.61,5.25 C15.61,5.07879174 15.4712083,4.94000001 15.3,4.94" id="Shape" fill="#4C97FF" fill-rule="nonzero"></path>
+                    <path d="M15.3,4.33 C14.950262,4.29338789 14.6102464,4.45934112 14.4239421,4.75758228 C14.2376377,5.05582345 14.2376377,5.43417655 14.4239421,5.73241772 C14.6102464,6.03065888 14.950262,6.19661211 15.3,6.16 L17.58,6.16 C17.929738,6.19661211 18.2697536,6.03065888 18.4560579,5.73241772 C18.6423623,5.43417655 18.6423623,5.05582345 18.4560579,4.75758228 C18.2697536,4.45934112 17.929738,4.29338789 17.58,4.33 L15.3,4.33 M17.58,6.77 L15.3,6.77 C14.7056435,6.867381 14.1098479,6.60464376 13.7809267,6.10011072 C13.4520056,5.59557768 13.4520056,4.94442232 13.7809267,4.43988928 C14.1098479,3.93535624 14.7056435,3.672619 15.3,3.77 L17.58,3.77 C18.1743565,3.672619 18.7701521,3.93535624 19.0990733,4.43988928 C19.4279944,4.94442232 19.4279944,5.59557768 19.0990733,6.10011072 C18.7701521,6.60464376 18.1743565,6.867381 17.58,6.77" id="Shape" fill="#4C97FF" fill-rule="nonzero"></path>
+                    <rect id="Rectangle-path" stroke="#231F20" stroke-width="0.89" fill="#231F20" fill-rule="nonzero" opacity="0.25" stroke-linecap="round" stroke-linejoin="round" x="2.22" y="10.78" width="4.44" height="4.44" rx="0.44"></rect>
+                    <rect id="Rectangle-path" stroke="#7C87A5" stroke-width="0.22" fill="#E6E7E8" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="2.22" y="10.78" width="4.44" height="4.44" rx="0.44"></rect>
+                    <circle id="Oval" stroke="#231F20" stroke-width="0.67" fill="#231F20" fill-rule="nonzero" opacity="0.1" cx="4.44" cy="13" r="1"></circle>
+                    <circle id="Oval" stroke="#414757" stroke-width="0.22" fill="#414757" fill-rule="nonzero" cx="4.44" cy="13" r="1"></circle>
+                    <rect id="Rectangle-path" stroke="#231F20" stroke-width="0.89" fill="#231F20" fill-rule="nonzero" opacity="0.25" stroke-linecap="round" stroke-linejoin="round" x="26.22" y="10.78" width="4.44" height="4.44" rx="0.44"></rect>
+                    <rect id="Rectangle-path" stroke="#7C87A5" stroke-width="0.22" fill="#E6E7E8" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="26.22" y="10.78" width="4.44" height="4.44" rx="0.44"></rect>
+                    <circle id="Oval" stroke="#231F20" stroke-width="0.67" fill="#231F20" fill-rule="nonzero" opacity="0.1" cx="28.44" cy="13" r="1"></circle>
+                    <circle id="Oval" stroke="#414757" stroke-width="0.22" fill="#414757" fill-rule="nonzero" cx="28.44" cy="13" r="1"></circle>
+                    <g id="Group" opacity="0.5" transform="translate(11.000000, 8.000000)" fill="#E6E7E8" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.11" y="0.78" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <g id="Group" opacity="0.25" transform="translate(11.000000, 9.000000)" fill="#231F20" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.11" y="0.44" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <rect id="Rectangle-path" fill="#E6E7E8" fill-rule="nonzero" x="11.11" y="9" width="1" height="1" rx="0.04"></rect>
+                    <g id="Group" opacity="0.5" transform="translate(13.000000, 8.000000)" fill="#E6E7E8" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.67" y="0.78" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <g id="Group" opacity="0.25" transform="translate(13.000000, 9.000000)" fill="#231F20" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.67" y="0.44" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <rect id="Rectangle-path" fill="#E6E7E8" fill-rule="nonzero" x="13.67" y="9" width="1" height="1" rx="0.04"></rect>
+                    <g id="Group" opacity="0.5" transform="translate(16.000000, 8.000000)" fill="#E6E7E8" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.22" y="0.78" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <g id="Group" opacity="0.25" transform="translate(16.000000, 9.000000)" fill="#231F20" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.22" y="0.44" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <rect id="Rectangle-path" fill="#E6E7E8" fill-rule="nonzero" x="16.22" y="9" width="1" height="1" rx="0.04"></rect>
+                    <g id="Group" opacity="0.5" transform="translate(18.000000, 8.000000)" fill="#E6E7E8" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.78" y="0.78" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <g id="Group" opacity="0.25" transform="translate(18.000000, 9.000000)" fill="#231F20" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.78" y="0.44" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <rect id="Rectangle-path" fill="#E6E7E8" fill-rule="nonzero" x="18.78" y="9" width="1" height="1" rx="0.04"></rect>
+                    <g id="Group" opacity="0.5" transform="translate(21.000000, 8.000000)" fill="#E6E7E8" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.33" y="0.78" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <g id="Group" opacity="0.25" transform="translate(21.000000, 9.000000)" fill="#231F20" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.33" y="0.44" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <rect id="Rectangle-path" fill="#E6E7E8" fill-rule="nonzero" x="21.33" y="9" width="1" height="1" rx="0.04"></rect>
+                    <g id="Group" opacity="0.5" transform="translate(11.000000, 11.000000)" fill="#E6E7E8" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.11" y="0.28" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <g id="Group" opacity="0.25" transform="translate(11.000000, 11.000000)" fill="#231F20" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.11" y="0.94" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <rect id="Rectangle-path" fill="#E6E7E8" fill-rule="nonzero" x="11.11" y="11.5" width="1" height="1" rx="0.04"></rect>
+                    <g id="Group" opacity="0.5" transform="translate(13.000000, 11.000000)" fill="#E6E7E8" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.67" y="0.28" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <g id="Group" opacity="0.25" transform="translate(13.000000, 11.000000)" fill="#231F20" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.67" y="0.94" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <rect id="Rectangle-path" fill="#E6E7E8" fill-rule="nonzero" x="13.67" y="11.5" width="1" height="1" rx="0.04"></rect>
+                    <g id="Group" opacity="0.5" transform="translate(16.000000, 11.000000)" fill="#E6E7E8" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.22" y="0.28" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <g id="Group" opacity="0.25" transform="translate(16.000000, 11.000000)" fill="#231F20" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.22" y="0.94" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <rect id="Rectangle-path" fill="#E6E7E8" fill-rule="nonzero" x="16.22" y="11.5" width="1" height="1" rx="0.04"></rect>
+                    <g id="Group" opacity="0.5" transform="translate(18.000000, 11.000000)" fill="#E6E7E8" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.78" y="0.28" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <g id="Group" opacity="0.25" transform="translate(18.000000, 11.000000)" fill="#231F20" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.78" y="0.94" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <rect id="Rectangle-path" fill="#E6E7E8" fill-rule="nonzero" x="18.78" y="11.5" width="1" height="1" rx="0.04"></rect>
+                    <g id="Group" opacity="0.5" transform="translate(21.000000, 11.000000)" fill="#E6E7E8" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.33" y="0.28" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <g id="Group" opacity="0.25" transform="translate(21.000000, 11.000000)" fill="#231F20" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.33" y="0.94" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <rect id="Rectangle-path" fill="#E6E7E8" fill-rule="nonzero" x="21.33" y="11.5" width="1" height="1" rx="0.04"></rect>
+                    <g id="Group" opacity="0.5" transform="translate(11.000000, 13.000000)" fill="#E6E7E8" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.11" y="0.78" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <g id="Group" opacity="0.25" transform="translate(11.000000, 14.000000)" fill="#231F20" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.11" y="0.44" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <rect id="Rectangle-path" fill="#E6E7E8" fill-rule="nonzero" x="11.11" y="14" width="1" height="1" rx="0.04"></rect>
+                    <g id="Group" opacity="0.5" transform="translate(13.000000, 13.000000)" fill="#E6E7E8" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.67" y="0.78" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <g id="Group" opacity="0.25" transform="translate(13.000000, 14.000000)" fill="#231F20" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.67" y="0.44" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <rect id="Rectangle-path" fill="#E6E7E8" fill-rule="nonzero" x="13.67" y="14" width="1" height="1" rx="0.04"></rect>
+                    <g id="Group" opacity="0.5" transform="translate(16.000000, 13.000000)" fill="#E6E7E8" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.22" y="0.78" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <g id="Group" opacity="0.25" transform="translate(16.000000, 14.000000)" fill="#231F20" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.22" y="0.44" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <rect id="Rectangle-path" fill="#E6E7E8" fill-rule="nonzero" x="16.22" y="14" width="1" height="1" rx="0.04"></rect>
+                    <g id="Group" opacity="0.5" transform="translate(18.000000, 13.000000)" fill="#E6E7E8" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.78" y="0.78" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <g id="Group" opacity="0.25" transform="translate(18.000000, 14.000000)" fill="#231F20" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.78" y="0.44" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <rect id="Rectangle-path" fill="#E6E7E8" fill-rule="nonzero" x="18.78" y="14" width="1" height="1" rx="0.04"></rect>
+                    <g id="Group" opacity="0.5" transform="translate(21.000000, 13.000000)" fill="#E6E7E8" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.33" y="0.78" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <g id="Group" opacity="0.25" transform="translate(21.000000, 14.000000)" fill="#231F20" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.33" y="0.44" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <rect id="Rectangle-path" fill="#E6E7E8" fill-rule="nonzero" x="21.33" y="14" width="1" height="1" rx="0.04"></rect>
+                    <g id="Group" opacity="0.5" transform="translate(11.000000, 16.000000)" fill="#E6E7E8" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.11" y="0.28" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <g id="Group" opacity="0.25" transform="translate(11.000000, 16.000000)" fill="#231F20" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.11" y="0.94" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <rect id="Rectangle-path" fill="#E6E7E8" fill-rule="nonzero" x="11.11" y="16.5" width="1" height="1" rx="0.04"></rect>
+                    <g id="Group" opacity="0.5" transform="translate(13.000000, 16.000000)" fill="#E6E7E8" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.67" y="0.28" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <g id="Group" opacity="0.25" transform="translate(13.000000, 16.000000)" fill="#231F20" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.67" y="0.94" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <rect id="Rectangle-path" fill="#E6E7E8" fill-rule="nonzero" x="13.67" y="16.5" width="1" height="1" rx="0.04"></rect>
+                    <g id="Group" opacity="0.5" transform="translate(16.000000, 16.000000)" fill="#E6E7E8" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.22" y="0.28" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <g id="Group" opacity="0.25" transform="translate(16.000000, 16.000000)" fill="#231F20" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.22" y="0.94" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <rect id="Rectangle-path" fill="#E6E7E8" fill-rule="nonzero" x="16.22" y="16.5" width="1" height="1" rx="0.04"></rect>
+                    <g id="Group" opacity="0.5" transform="translate(18.000000, 16.000000)" fill="#E6E7E8" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.78" y="0.28" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <g id="Group" opacity="0.25" transform="translate(18.000000, 16.000000)" fill="#231F20" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.78" y="0.94" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <rect id="Rectangle-path" fill="#E6E7E8" fill-rule="nonzero" x="18.78" y="16.5" width="1" height="1" rx="0.04"></rect>
+                    <g id="Group" opacity="0.5" transform="translate(21.000000, 16.000000)" fill="#E6E7E8" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.33" y="0.28" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <g id="Group" opacity="0.25" transform="translate(21.000000, 16.000000)" fill="#231F20" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.33" y="0.94" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <rect id="Rectangle-path" fill="#E6E7E8" fill-rule="nonzero" x="21.33" y="16.5" width="1" height="1" rx="0.04"></rect>
+                    <g id="Group" opacity="0.5" transform="translate(11.000000, 18.000000)" fill="#E6E7E8" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.11" y="0.78" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <g id="Group" opacity="0.25" transform="translate(11.000000, 19.000000)" fill="#231F20" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.11" y="0.44" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <rect id="Rectangle-path" fill="#E6E7E8" fill-rule="nonzero" x="11.11" y="19" width="1" height="1" rx="0.04"></rect>
+                    <g id="Group" opacity="0.5" transform="translate(13.000000, 18.000000)" fill="#E6E7E8" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.67" y="0.78" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <g id="Group" opacity="0.25" transform="translate(13.000000, 19.000000)" fill="#231F20" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.67" y="0.44" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <rect id="Rectangle-path" fill="#E6E7E8" fill-rule="nonzero" x="13.67" y="19" width="1" height="1" rx="0.04"></rect>
+                    <g id="Group" opacity="0.5" transform="translate(16.000000, 18.000000)" fill="#E6E7E8" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.22" y="0.78" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <g id="Group" opacity="0.25" transform="translate(16.000000, 19.000000)" fill="#231F20" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.22" y="0.44" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <rect id="Rectangle-path" fill="#E6E7E8" fill-rule="nonzero" x="16.22" y="19" width="1" height="1" rx="0.04"></rect>
+                    <g id="Group" opacity="0.5" transform="translate(18.000000, 18.000000)" fill="#E6E7E8" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.78" y="0.78" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <g id="Group" opacity="0.25" transform="translate(18.000000, 19.000000)" fill="#231F20" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.78" y="0.44" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <rect id="Rectangle-path" fill="#E6E7E8" fill-rule="nonzero" x="18.78" y="19" width="1" height="1" rx="0.04"></rect>
+                    <g id="Group" opacity="0.5" transform="translate(21.000000, 18.000000)" fill="#E6E7E8" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.33" y="0.78" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <g id="Group" opacity="0.25" transform="translate(21.000000, 19.000000)" fill="#231F20" fill-rule="nonzero">
+                        <rect id="Rectangle-path" x="0.33" y="0.44" width="1" height="1" rx="0.04"></rect>
+                    </g>
+                    <rect id="Rectangle-path" fill="#E6E7E8" fill-rule="nonzero" x="21.33" y="19" width="1" height="1" rx="0.04"></rect>
+                    <path d="M1.44,23.67 L1.44,26.58 C1.23870729,26.4785354 1.05878028,26.3393466 0.91,26.17 L0.91,23.67 L1.44,23.67 Z" id="Shape" fill="#FFBF00" fill-rule="nonzero"></path>
+                    <polygon id="Shape" fill="#FFBF00" fill-rule="nonzero" points="2.08 26.77 2.2 26.77 2.2 23.67 1.67 23.67 1.67 26.69"></polygon>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="2.46" y="23.67" width="1" height="3.1"></rect>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="3.24" y="23.67" width="1" height="3.1"></rect>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="4.03" y="23.67" width="1" height="3.1"></rect>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="4.81" y="23.67" width="1" height="3.1"></rect>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="5.59" y="23.67" width="1" height="3.1"></rect>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="6.38" y="23.67" width="1" height="3.1"></rect>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="7.16" y="23.67" width="1" height="3.1"></rect>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="7.95" y="23.67" width="1" height="3.1"></rect>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="8.73" y="23.67" width="1" height="3.1"></rect>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="9.52" y="23.67" width="1" height="3.1"></rect>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="10.3" y="23.67" width="1" height="3.1"></rect>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="11.08" y="23.67" width="1" height="3.1"></rect>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="11.87" y="23.67" width="1" height="3.1"></rect>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="12.65" y="23.67" width="1" height="3.1"></rect>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="13.44" y="23.67" width="1" height="3.1"></rect>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="14.22" y="23.67" width="1" height="3.1"></rect>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="15.01" y="23.67" width="1" height="3.1"></rect>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="15.79" y="23.67" width="1" height="3.1"></rect>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="16.58" y="23.67" width="1" height="3.1"></rect>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="17.36" y="23.67" width="1" height="3.1"></rect>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="18.14" y="23.67" width="1" height="3.1"></rect>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="18.93" y="23.67" width="1" height="3.1"></rect>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="19.71" y="23.67" width="1" height="3.1"></rect>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="20.5" y="23.67" width="1" height="3.1"></rect>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="21.28" y="23.67" width="1" height="3.1"></rect>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="22.06" y="23.67" width="1" height="3.1"></rect>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="22.85" y="23.67" width="1" height="3.1"></rect>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="23.63" y="23.67" width="1" height="3.1"></rect>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="24.42" y="23.67" width="1" height="3.1"></rect>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="25.2" y="23.67" width="1" height="3.1"></rect>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="25.99" y="23.67" width="1" height="3.1"></rect>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="26.77" y="23.67" width="1" height="3.1"></rect>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="27.56" y="23.67" width="1" height="3.1"></rect>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="28.34" y="23.67" width="1" height="3.1"></rect>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="29.12" y="23.67" width="1" height="3.1"></rect>
+                    <rect id="Rectangle-path" fill="#FFBF00" fill-rule="nonzero" x="29.91" y="23.67" width="1" height="3.1"></rect>
+                    <polygon id="Shape" fill="#FFBF00" fill-rule="nonzero" points="30.81 26.77 30.69 26.77 30.69 23.67 31.22 23.67 31.22 26.69"></polygon>
+                    <path d="M32,23.67 L32,26.17 C31.8512197,26.3393466 31.6712927,26.4785354 31.47,26.58 L31.47,23.67 L32,23.67 Z" id="Shape" fill="#FFBF00" fill-rule="nonzero"></path>
+                    <path d="M3.11,23.54 C2.71343518,23.54 2.34699416,23.3284352 2.14871175,22.985 C1.95042933,22.6415648 1.95042933,22.2184352 2.14871175,21.875 C2.34699416,21.5315648 2.71343518,21.32 3.11,21.32 C3.50656482,21.32 3.87300584,21.5315648 4.07128825,21.875 C4.26957067,22.2184352 4.26957067,22.6415648 4.07128825,22.985 C3.87300584,23.3284352 3.50656482,23.54 3.11,23.54 Z M2.22,26.77 L4.54,26.77 L4.54,22.44 C4.47765352,21.693792 3.85380806,21.1198958 3.105,21.1198958 C2.35619194,21.1198958 1.73234648,21.693792 1.67,22.44 L1.67,26.7 L2.22,26.77 Z" id="Shape" fill="#FFBF00" fill-rule="nonzero"></path>
+                    <path d="M10.44,21.44 C10.0306806,21.0291817 9.41486744,20.9039895 8.87763309,21.1223774 C8.34039875,21.3407654 7.98659306,21.8601116 7.98,22.44 L7.98,26.78 L10.86,26.78 L10.86,22.44 C10.8567492,22.0644466 10.7058854,21.7052469 10.44,21.44 Z M9.44,23.56 C8.98730492,23.5844809 8.56521866,23.3312015 8.37382614,22.9202257 C8.18243363,22.50925 8.26020534,22.0231853 8.57027452,21.6924449 C8.88034371,21.3617044 9.36038552,21.252768 9.78284191,21.4172756 C10.2052983,21.5817832 10.4852542,21.9866683 10.49,22.44 C10.4845121,23.0491272 9.98915197,23.5400247 9.38,23.54 L9.44,23.56 Z" id="Shape" fill="#FFBF00" fill-rule="nonzero"></path>
+                    <path d="M17.44,21.44 C17.0306806,21.0291817 16.4148674,20.9039895 15.8776331,21.1223774 C15.3403987,21.3407654 14.9865931,21.8601116 14.98,22.44 L14.98,26.78 L17.86,26.78 L17.86,22.44 C17.8567492,22.0644466 17.7058854,21.7052469 17.44,21.44 Z M16.44,23.54 C15.9901408,23.5399817 15.5847763,23.2684441 15.4135718,22.8524366 C15.2423673,22.436429 15.3391815,21.9582239 15.658716,21.641568 C15.9782506,21.3249121 16.4573123,21.2324295 16.8717535,21.4073917 C17.2861947,21.5823538 17.5540528,21.9901591 17.55,22.44 C17.5445121,23.0491272 17.049152,23.5400247 16.44,23.54 Z" id="Shape" fill="#FFBF00" fill-rule="nonzero"></path>
+                    <path d="M24.52,21.44 C24.1106806,21.0291817 23.4948674,20.9039895 22.9576331,21.1223774 C22.4203987,21.3407654 22.0665931,21.8601116 22.06,22.44 L22.06,26.78 L24.94,26.78 L24.94,22.44 C24.9367492,22.0644466 24.7858854,21.7052469 24.52,21.44 Z M23.52,23.56 C22.9069639,23.56 22.41,23.0630361 22.41,22.45 C22.41,21.8369639 22.9069639,21.34 23.52,21.34 C24.1330361,21.34 24.63,21.8369639 24.63,22.45 C24.63,23.0630361 24.1330361,23.56 23.52,23.56 Z" id="Shape" fill="#FFBF00" fill-rule="nonzero"></path>
+                    <path d="M30.79,21.44 C30.3798042,21.0361719 29.7685264,20.915422 29.2355905,21.1329468 C28.7026547,21.3504717 28.3504601,21.8644757 28.34,22.44 L28.34,26.78 L30.66,26.78 L31.21,26.7 L31.21,22.44 C31.2067492,22.0644466 31.0558854,21.7052469 30.79,21.44 Z M29.79,23.56 C29.3402299,23.5680864 28.9300507,23.3039154 28.7513688,22.8910822 C28.5726868,22.478249 28.6608368,21.9983918 28.9745768,21.6760167 C29.2883169,21.3536417 29.7656044,21.2524988 30.1831357,21.4199088 C30.6006671,21.5873188 30.8758747,21.9901761 30.88,22.44 C30.8745121,23.0491272 30.379152,23.5400247 29.77,23.54 L29.79,23.56 Z" id="Shape" fill="#FFBF00" fill-rule="nonzero"></path>
+                    <path d="M2.98093,24.82817 C2.98093,24.8503701 2.98166999,24.8771948 2.98315,24.908645 C2.98463001,24.9400952 2.98925496,24.9704349 2.997025,24.999665 C3.00479504,25.0288951 3.01718991,25.0538699 3.03421,25.07459 C3.05123009,25.0953101 3.07564984,25.10567 3.10747,25.10567 C3.14003016,25.10567 3.16500491,25.0953101 3.182395,25.07459 C3.19978509,25.0538699 3.21236496,25.0288951 3.220135,24.999665 C3.22790504,24.9704349 3.23252999,24.9400952 3.23401,24.908645 C3.23549001,24.8771948 3.23623,24.8503701 3.23623,24.82817 C3.23623,24.8148499 3.236045,24.7987551 3.235675,24.779885 C3.235305,24.7610149 3.23382501,24.7415901 3.231235,24.72161 C3.22864499,24.7016299 3.22494502,24.6818351 3.220135,24.662225 C3.21532498,24.6426149 3.20811005,24.6250401 3.19849,24.6095 C3.18886995,24.5939599 3.17666007,24.58138 3.16186,24.57176 C3.14705993,24.56214 3.12893011,24.55733 3.10747,24.55733 C3.08600989,24.55733 3.06806507,24.56214 3.053635,24.57176 C3.03920493,24.58138 3.02736505,24.5939599 3.018115,24.6095 C3.00886495,24.6250401 3.00165003,24.6426149 2.99647,24.662225 C2.99128997,24.6818351 2.98759001,24.7016299 2.98537,24.72161 C2.98314999,24.7415901 2.981855,24.7610149 2.981485,24.779885 C2.981115,24.7987551 2.98093,24.8148499 2.98093,24.82817 Z M2.82331,24.82817 C2.82331,24.7526896 2.83089492,24.6892353 2.846065,24.637805 C2.86123508,24.5863747 2.88176987,24.5451202 2.90767,24.51404 C2.93357013,24.4829598 2.96372483,24.4607601 2.998135,24.44744 C3.03254517,24.4341199 3.06898981,24.42746 3.10747,24.42746 C3.1466902,24.42746 3.18350483,24.4341199 3.217915,24.44744 C3.25232517,24.4607601 3.28266487,24.4829598 3.308935,24.51404 C3.33520513,24.5451202 3.35592492,24.5863747 3.371095,24.637805 C3.38626508,24.6892353 3.39385,24.7526896 3.39385,24.82817 C3.39385,24.9058704 3.38626508,24.9708047 3.371095,25.022975 C3.35592492,25.0751453 3.33520513,25.1167698 3.308935,25.14785 C3.28266487,25.1789302 3.25232517,25.2011299 3.217915,25.21445 C3.18350483,25.2277701 3.1466902,25.23443 3.10747,25.23443 C3.06898981,25.23443 3.03254517,25.2277701 2.998135,25.21445 C2.96372483,25.2011299 2.93357013,25.1789302 2.90767,25.14785 C2.88176987,25.1167698 2.86123508,25.0751453 2.846065,25.022975 C2.83089492,24.9708047 2.82331,24.9058704 2.82331,24.82817 Z" id="0" fill="#575E75"></path>
+                    <path d="M3.73639,18.23364 L3.94174,18.23364 L3.84184,17.94282 L3.83962,17.94282 L3.73639,18.23364 Z M3.75304,17.74746 L3.93175,17.74746 L4.22812,18.54 L4.04719,18.54 L3.98725,18.36351 L3.69088,18.36351 L3.62872,18.54 L3.45334,18.54 L3.75304,17.74746 Z" id="A" fill="#575E75"></path>
+                    <path d="M28.82086,7.79825 L28.99735,7.79825 C29.0284302,7.79825 29.0539599,7.79085007 29.07394,7.77605 C29.0939201,7.76124993 29.10391,7.73720017 29.10391,7.7039 C29.10391,7.68539991 29.10058,7.67023006 29.09392,7.65839 C29.08726,7.64654994 29.0783801,7.63730003 29.06728,7.63064 C29.0561799,7.62397997 29.0434151,7.61935501 29.028985,7.616765 C29.0145549,7.61417499 28.9995701,7.61288 28.98403,7.61288 L28.82086,7.61288 L28.82086,7.79825 Z M28.64659,7.47746 L29.01955,7.47746 C29.0572902,7.47746 29.0916998,7.48078997 29.12278,7.48745 C29.1538602,7.49411003 29.1804999,7.50502492 29.2027,7.520195 C29.2249001,7.53536508 29.2421049,7.55552987 29.254315,7.58069 C29.2665251,7.60585013 29.27263,7.63692981 29.27263,7.67393 C29.27263,7.7138902 29.2635651,7.74718987 29.245435,7.77383 C29.2273049,7.80047013 29.2004802,7.82229991 29.16496,7.83932 C29.2138002,7.85338007 29.2502449,7.87798482 29.274295,7.913135 C29.2983451,7.94828518 29.31037,7.99064975 29.31037,8.04023 C29.31037,8.0801902 29.3026001,8.11478485 29.28706,8.144015 C29.2715199,8.17324515 29.2506151,8.19710991 29.224345,8.21561 C29.1980749,8.23411009 29.1681052,8.24779996 29.134435,8.25668 C29.1007648,8.26556004 29.0661702,8.27 29.03065,8.27 L28.64659,8.27 L28.64659,7.47746 Z M28.82086,8.13458 L29.00734,8.13458 C29.0243601,8.13458 29.0406399,8.13291502 29.05618,8.129585 C29.0717201,8.12625498 29.0854099,8.12070504 29.09725,8.112935 C29.1090901,8.10516496 29.118525,8.09462007 29.125555,8.0813 C29.132585,8.06797993 29.1361,8.0509601 29.1361,8.03024 C29.1361,7.9895398 29.1246301,7.96049509 29.10169,7.943105 C29.0787499,7.92571491 29.0484102,7.91702 29.01067,7.91702 L28.82086,7.91702 L28.82086,8.13458 Z" id="B" fill="#575E75"></path>
+                    <path d="M9.45512,25.22 L9.2975,25.22 L9.2975,24.71606 L9.10214,24.71606 L9.10214,24.59729 C9.12952014,24.59803 9.15597487,24.595995 9.181505,24.591185 C9.20703513,24.586375 9.2299749,24.5778651 9.250325,24.565655 C9.2706751,24.5534449 9.28787993,24.5373501 9.30194,24.51737 C9.31600007,24.4973899 9.32524998,24.4726001 9.32969,24.443 L9.45512,24.443 L9.45512,25.22 Z" id="1" fill="#575E75"></path>
+                    <path d="M16.18107,24.74159 C16.17959,24.6971898 16.1847699,24.6559352 16.19661,24.617825 C16.2084501,24.5797148 16.2262099,24.5464151 16.24989,24.517925 C16.2735701,24.4894349 16.3033548,24.4672351 16.339245,24.451325 C16.3751352,24.4354149 16.4163898,24.42746 16.46301,24.42746 C16.4985302,24.42746 16.5323848,24.4330099 16.564575,24.44411 C16.5967652,24.4552101 16.6250699,24.4711199 16.64949,24.49184 C16.6739101,24.5125601 16.6933349,24.5380898 16.707765,24.56843 C16.7221951,24.5987702 16.72941,24.6328098 16.72941,24.67055 C16.72941,24.7097702 16.7231201,24.7434399 16.71054,24.77156 C16.6979599,24.7996801 16.6813101,24.8246549 16.66059,24.846485 C16.6398699,24.8683151 16.6163751,24.8881099 16.590105,24.90587 C16.5638349,24.9236301 16.5373801,24.9412049 16.51074,24.958595 C16.4840999,24.9759851 16.4582001,24.9946699 16.43304,25.01465 C16.4078799,25.0346301 16.3856801,25.0579399 16.36644,25.08458 L16.73385,25.08458 L16.73385,25.22 L16.16331,25.22 C16.16331,25.1748598 16.1697849,25.1356402 16.182735,25.10234 C16.1956851,25.0690398 16.2132599,25.0392551 16.23546,25.012985 C16.2576601,24.9867149 16.2837449,24.9624801 16.313715,24.94028 C16.3436851,24.9180799 16.3753198,24.8955101 16.40862,24.87257 C16.4256401,24.8607299 16.4437699,24.8487051 16.46301,24.836495 C16.4822501,24.8242849 16.4998249,24.8107801 16.515735,24.79598 C16.5316451,24.7811799 16.5449649,24.7645301 16.555695,24.74603 C16.5664251,24.7275299 16.57179,24.7064401 16.57179,24.68276 C16.57179,24.6450198 16.5608751,24.6156051 16.539045,24.594515 C16.5172149,24.5734249 16.4892802,24.56288 16.45524,24.56288 C16.4322999,24.56288 16.4128751,24.5682449 16.396965,24.578975 C16.3810549,24.5897051 16.36829,24.6037649 16.35867,24.621155 C16.34905,24.6385451 16.342205,24.6577849 16.338135,24.678875 C16.334065,24.6999651 16.33203,24.7208699 16.33203,24.74159 L16.18107,24.74159 Z" id="2" fill="#575E75"></path>
+                    <path d="M23.21308,24.75713 C23.2301001,24.75861 23.2482299,24.75861 23.26747,24.75713 C23.2867101,24.75565 23.3046549,24.751395 23.321305,24.744365 C23.3379551,24.737335 23.3516449,24.7271601 23.362375,24.71384 C23.3731051,24.7005199 23.37847,24.6827601 23.37847,24.66056 C23.37847,24.6272598 23.3673701,24.6017301 23.34517,24.58397 C23.3229699,24.5662099 23.2974401,24.55733 23.26858,24.55733 C23.2286198,24.55733 23.1984651,24.5704649 23.178115,24.596735 C23.1577649,24.6230051 23.14796,24.6561198 23.1487,24.69608 L22.99885,24.69608 C23.00033,24.6561198 23.0075449,24.6196752 23.020495,24.586745 C23.0334451,24.5538148 23.0515749,24.5255101 23.074885,24.50183 C23.0981951,24.4781499 23.1261298,24.4598351 23.15869,24.446885 C23.1912502,24.4339349 23.2275098,24.42746 23.26747,24.42746 C23.2985502,24.42746 23.3296298,24.432085 23.36071,24.441335 C23.3917902,24.450585 23.4197249,24.4644599 23.444515,24.48296 C23.4693051,24.5014601 23.4894699,24.5240299 23.50501,24.55067 C23.5205501,24.5773101 23.52832,24.6080198 23.52832,24.6428 C23.52832,24.6805402 23.5192551,24.7138399 23.501125,24.7427 C23.4829949,24.7715601 23.4558002,24.7911699 23.41954,24.80153 L23.41954,24.80375 C23.4624602,24.81337 23.4961299,24.8340898 23.52055,24.86591 C23.5449701,24.8977302 23.55718,24.9358398 23.55718,24.98024 C23.55718,25.0209402 23.5492251,25.0571998 23.533315,25.08902 C23.5174049,25.1208402 23.4961301,25.1474799 23.46949,25.16894 C23.4428499,25.1904001 23.4121402,25.2066799 23.37736,25.21778 C23.3425798,25.2288801 23.3063202,25.23443 23.26858,25.23443 C23.2249198,25.23443 23.1851452,25.2281401 23.149255,25.21556 C23.1133648,25.2029799 23.0828401,25.1846651 23.05768,25.160615 C23.0325199,25.1365649 23.0130951,25.1071502 22.999405,25.07237 C22.9857149,25.0375898 22.97924,24.9976302 22.97998,24.95249 L23.12983,24.95249 C23.13057,24.9732101 23.1339,24.9930049 23.13982,25.011875 C23.14574,25.0307451 23.1542499,25.0470249 23.16535,25.060715 C23.1764501,25.0744051 23.1903249,25.08532 23.206975,25.09346 C23.2236251,25.1016 23.2434199,25.10567 23.26636,25.10567 C23.3018802,25.10567 23.3318499,25.0947551 23.35627,25.072925 C23.3806901,25.0510949 23.3929,25.0213102 23.3929,24.98357 C23.3929,24.9539699 23.3871651,24.9314001 23.375695,24.91586 C23.3642249,24.9003199 23.3496101,24.889035 23.33185,24.882005 C23.3140899,24.874975 23.2946651,24.870905 23.273575,24.869795 C23.2524849,24.868685 23.2323201,24.86813 23.21308,24.86813 L23.21308,24.75713 Z M23.95456,25.22 L23.77918,25.22 L23.58271,24.64613 L23.7481,24.64613 L23.86909,25.03796 L23.87131,25.03796 L23.9923,24.64613 L24.14881,24.64613 L23.95456,25.22 Z" id="3v" fill="#575E75"></path>
+                    <path d="M29.17935,25.13009 C29.1482698,25.1700502 29.1138602,25.1979849 29.07612,25.213895 C29.0383798,25.2298051 29.0002702,25.23776 28.96179,25.23776 C28.9011097,25.23776 28.8465352,25.2272151 28.798065,25.206125 C28.7495948,25.1850349 28.7087102,25.1559902 28.67541,25.11899 C28.6421098,25.0819898 28.6165801,25.0385152 28.59882,24.988565 C28.5810599,24.9386148 28.57218,24.8847803 28.57218,24.82706 C28.57218,24.7678597 28.5810599,24.7129153 28.59882,24.662225 C28.6165801,24.6115347 28.6421098,24.5673202 28.67541,24.52958 C28.7087102,24.4918398 28.7495948,24.4622401 28.798065,24.44078 C28.8465352,24.4193199 28.9011097,24.40859 28.96179,24.40859 C29.0024902,24.40859 29.0418948,24.4146949 29.080005,24.426905 C29.1181152,24.4391151 29.1525248,24.4570599 29.183235,24.48074 C29.2139452,24.5044201 29.2392899,24.5336498 29.25927,24.56843 C29.2792501,24.6032102 29.29146,24.6431698 29.2959,24.68831 L29.1294,24.68831 C29.1190399,24.6439098 29.0990601,24.6106101 29.06946,24.58841 C29.0398599,24.5662099 29.0039702,24.55511 28.96179,24.55511 C28.9225698,24.55511 28.8892701,24.5626949 28.86189,24.577865 C28.8345099,24.5930351 28.8123101,24.6133849 28.79529,24.638915 C28.7782699,24.6644451 28.765875,24.6934898 28.758105,24.72605 C28.750335,24.7586102 28.74645,24.7922798 28.74645,24.82706 C28.74645,24.8603602 28.750335,24.8927348 28.758105,24.924185 C28.765875,24.9556352 28.7782699,24.9839399 28.79529,25.0091 C28.8123101,25.0342601 28.8345099,25.0544249 28.86189,25.069595 C28.8892701,25.0847651 28.9225698,25.09235 28.96179,25.09235 C29.0195103,25.09235 29.0640948,25.0777351 29.095545,25.048505 C29.1269952,25.0192749 29.14531,24.9769103 29.15049,24.92141 L28.97511,24.92141 L28.97511,24.79154 L29.30811,24.79154 L29.30811,25.22 L29.19711,25.22 L29.17935,25.13009 Z M29.44908,24.42746 L29.62224,24.42746 L29.95302,24.95915 L29.95524,24.95915 L29.95524,24.42746 L30.11841,24.42746 L30.11841,25.22 L29.94414,25.22 L29.61447,24.68942 L29.61225,24.68942 L29.61225,25.22 L29.44908,25.22 L29.44908,24.42746 Z M30.44586,25.07348 L30.60126,25.07348 C30.6264201,25.07348 30.6508399,25.06941 30.67452,25.06127 C30.6982001,25.05313 30.7192899,25.0396251 30.73779,25.020755 C30.7562901,25.0018849 30.7710899,24.9772802 30.78219,24.94694 C30.7932901,24.9165998 30.79884,24.8796002 30.79884,24.83594 C30.79884,24.7959798 30.794955,24.7599052 30.787185,24.727715 C30.779415,24.6955248 30.7666501,24.6679601 30.74889,24.64502 C30.7311299,24.6220799 30.7076351,24.6045051 30.678405,24.592295 C30.6491749,24.5800849 30.6131002,24.57398 30.57018,24.57398 L30.44586,24.57398 L30.44586,25.07348 Z M30.27159,24.42746 L30.61347,24.42746 C30.6645303,24.42746 30.7120748,24.4355999 30.756105,24.45188 C30.8001352,24.4681601 30.8382448,24.4925798 30.870435,24.52514 C30.9026252,24.5577002 30.9277849,24.5983998 30.945915,24.64724 C30.9640451,24.6960802 30.97311,24.7534297 30.97311,24.81929 C30.97311,24.8770103 30.9657101,24.9302898 30.95091,24.97913 C30.9361099,25.0279702 30.9137251,25.0701498 30.883755,25.10567 C30.8537849,25.1411902 30.8164152,25.1691249 30.771645,25.189475 C30.7268748,25.2098251 30.6741503,25.22 30.61347,25.22 L30.27159,25.22 L30.27159,24.42746 Z" id="GND" fill="#575E75"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/static/images/microbit/starter-fish.png
+++ b/static/images/microbit/starter-fish.png
--- a/static/images/microbit/starter-guitar.png
+++ b/static/images/microbit/starter-guitar.png
--- a/static/images/microbit/starter-heart.png
+++ b/static/images/microbit/starter-heart.png
--- a/static/images/microbit/win-copy-hex.png
+++ b/static/images/microbit/win-copy-hex.png
--- a/static/images/scratchlink/mac-toolbar.png
+++ b/static/images/scratchlink/mac-toolbar.png
--- a/static/images/scratchlink/windows-toolbar.png
+++ b/static/images/scratchlink/windows-toolbar.png
--- a/static/svgs/app-store-badges/apple-app-store-badge.svg
+++ b/static/svgs/app-store-badges/apple-app-store-badge.svg
@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="120px" height="40px" viewBox="0 0 120 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.1 (57501) - http://www.bohemiancoding.com/sketch -->
+    <title>Apple App Store</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Round-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="MicroBit-Landing" transform="translate(-239.000000, -798.000000)" fill-rule="nonzero">
+            <g id="Install-Scratch-Link" transform="translate(0.000000, 624.000000)">
+                <g id="Scratch-Link-Callout" transform="translate(168.000000, 136.000000)">
+                    <g id="Apple-App-Store" transform="translate(71.000000, 38.000000)">
+                        <g id="Group">
+                            <g id="Shape">
+                                <path d="M110.13477,0 L9.53468,0 C9.16798,0 8.80568,0 8.43995,0.002 C8.1338,0.004 7.83009,0.00981 7.521,0.0147 C6.84951368,0.0226018036 6.17960647,0.0816762599 5.5171,0.19141 C4.85552408,0.303532628 4.21467252,0.51491574 3.61622,0.81841 C3.01849941,1.12447171 2.47234502,1.52216753 1.99757,1.99707 C1.5203025,2.47063699 1.12246318,3.01801638 0.81935,3.61816 C0.515400242,4.21710912 0.304640498,4.8589383 0.19435,5.52148 C0.0830109412,6.18318491 0.0230983806,6.85252054 0.01515,7.52348 C0.00587,7.83008 0.00489,8.1377 0,8.44434 L0,31.5586 C0.00489,31.8691 0.00587,32.1699 0.01515,32.4805 C0.023100818,33.1514262 0.0830133796,33.8207284 0.19435,34.4824 C0.304335953,35.145329 0.515108158,35.7875266 0.81935,36.3867 C1.12232555,36.9849029 1.52022081,37.5300662 1.99757,38.001 C2.47054482,38.478014 3.01705224,38.8759804 3.61622,39.1797 C4.21466797,39.4840065 4.85545044,39.6966478 5.5171,39.8105 C6.1797191,39.9193547 6.84955741,39.9784532 7.521,39.9873 C7.83009,39.9941 8.1338,39.998 8.43995,39.998 C8.80567,40 9.168,40 9.53468,40 L110.13477,40 C110.49417,40 110.85937,40 111.21877,39.998 C111.52347,39.998 111.83597,39.9941 112.14067,39.9873 C112.810843,39.9789237 113.47942,39.9198215 114.14067,39.8105 C114.804454,39.6958464 115.447534,39.4832614 116.04887,39.1797 C116.647497,38.8758046 117.1935,38.4778491 117.66607,38.001 C118.142188,37.5282218 118.540932,36.9834573 118.84767,36.3867 C119.149629,35.7870908 119.358395,35.1449445 119.46677,34.4824 C119.578285,33.8206376 119.640323,33.1514843 119.65237,32.4805 C119.65627,32.1699 119.65627,31.8691 119.65627,31.5586 C119.66407,31.1953 119.66407,30.834 119.66407,30.4648 L119.66407,9.53613 C119.66407,9.16992 119.66407,8.80664 119.65627,8.44434 C119.65627,8.1377 119.65627,7.83008 119.65237,7.52344 C119.640326,6.85242244 119.578287,6.18323567 119.46677,5.52144 C119.358093,4.8592816 119.149339,4.21750328 118.84767,3.61812 C118.230394,2.41519608 117.251573,1.4360254 116.04887,0.81832 C115.447532,0.51556738 114.804383,0.30424041 114.14067,0.19132 C113.479535,0.0811027831 112.810888,0.0220077649 112.14067,0.01456 C111.83597,0.00968 111.52347,0.00382 111.21877,0.00187 C110.85937,-0.00013 110.49417,-0.00013 110.13477,-0.00013 L110.13477,0 Z" fill="#A6A6A6"></path>
+                                <path d="M8.44483,39.125 C8.14015,39.125 7.84283,39.1211 7.54054,39.1143 C6.91432177,39.1061407 6.28956717,39.051625 5.6714,38.9512 C5.0949903,38.8519282 4.53660424,38.6672645 4.01466,38.4033 C3.4975017,38.1415227 3.02581177,37.7982729 2.61766,37.3867 C2.20360033,36.9799753 1.85887673,36.508244 1.59715,35.9902 C1.33253926,35.4687891 1.14941288,34.9098996 1.05415,34.333 C0.951274358,33.7131149 0.895614374,33.0863132 0.88765,32.458 C0.88131,32.2471 0.87301,31.5449 0.87301,31.5449 L0.87301,8.44434 C0.87301,8.44434 0.88185,7.75293 0.8877,7.5498 C0.895325827,6.92248205 0.950662148,6.2966531 1.05323,5.67773 C1.14866872,5.09925008 1.33193687,4.53874887 1.59669,4.01563 C1.85745482,3.49794385 2.20026458,3.02586029 2.61183,2.61768 C3.02293283,2.20562142 3.49613161,1.86060412 4.01417,1.59521 C4.53491467,1.3320936 5.09224545,1.14873255 5.66749,1.05127 C6.28768733,0.949836139 6.91461084,0.894996084 7.543,0.88721 L8.44532,0.875 L111.21387,0.875 L112.12697,0.8877 C112.749643,0.895099198 113.370872,0.949450006 113.98537,1.05029 C114.566438,1.14897507 115.129577,1.33361553 115.65627,1.59814 C116.694088,2.13298605 117.538542,2.97916295 118.07127,4.01807 C118.331797,4.53757756 118.512239,5.09350676 118.60647,5.66699 C118.710259,6.29099138 118.768347,6.92173834 118.78027,7.5542 C118.78317,7.8374 118.78317,8.1416 118.78317,8.44434 C118.79107,8.81934 118.79107,9.17627 118.79107,9.53613 L118.79107,30.4648 C118.79107,30.8281 118.79107,31.1826 118.78317,31.54 C118.78317,31.8652 118.78317,32.1631 118.77927,32.4697 C118.767605,33.0908757 118.710486,33.7103642 118.60837,34.3232 C118.51506,34.9042612 118.33293,35.4675131 118.06837,35.9932 C117.804793,36.5056211 117.462049,36.9732662 117.05277,37.3789 C116.644251,37.7926846 116.171729,38.1379427 115.65337,38.4014 C115.128136,38.6673937 114.565826,38.8527403 113.98537,38.9512 C113.36725,39.052161 112.742435,39.1066802 112.11617,39.1143 C111.82327,39.1211 111.51657,39.125 111.21877,39.125 L110.13477,39.127 L8.44483,39.125 Z" fill="#000000"></path>
+                            </g>
+                            <g id="_Group_" transform="translate(9.000000, 8.000000)" fill="#FFFFFF">
+                                <g id="_Group_2">
+                                    <g id="_Group_3">
+                                        <path d="M15.76888,12.30068 C15.790737,10.6042091 16.6801229,9.03718611 18.12544,8.14862 C17.2095126,6.84051277 15.730392,6.04087835 14.13428,5.99094 C12.45504,5.81468 10.82709,6.99577 9.97138,6.99577 C9.09911,6.99577 7.78161,6.00844 6.36288,6.03763 C4.49620126,6.09793842 2.79813717,7.13352548 1.88996,8.7655 C-0.04404,12.11392 1.39855,17.03497 3.25116,19.74158 C4.17806,21.06693 5.26134,22.54738 6.67879,22.49488 C8.06585,22.43735 8.58389,21.6104 10.25819,21.6104 C11.91695,21.6104 12.40298,22.49488 13.84919,22.4615 C15.33757,22.43734 16.27532,21.13026 17.1697,19.79236 C17.8356761,18.8479997 18.3481437,17.8042759 18.68812,16.69985 C16.9203766,15.9521813 15.7709432,14.2200343 15.76888,12.30068 Z" id="_Path_"></path>
+                                        <path d="M13.03725,4.21089 C13.8487766,3.23668191 14.248585,1.98450245 14.15177,0.72027 C12.9119378,0.850490487 11.7666802,1.44304968 10.94419,2.37988 C10.1320187,3.30418903 9.72057463,4.51343268 9.80048,5.74127 C11.0569368,5.75420677 12.2499161,5.19015322 13.03725,4.21089 Z" id="_Path_2"></path>
+                                    </g>
+                                </g>
+                                <g id="Group" transform="translate(25.000000, 9.000000)">
+                                    <path d="M8.30227,10.13965 L3.56887,10.13965 L2.43215,13.4961 L0.42727,13.4961 L4.91067,1.0781 L6.99367,1.0781 L11.47707,13.4961 L9.438,13.4961 L8.30227,10.13965 Z M4.0591,8.59082 L7.8111,8.59082 L5.96149,3.14355 L5.90973,3.14355 L4.0591,8.59082 Z" id="Shape"></path>
+                                    <path d="M21.15969,8.96973 C21.15969,11.78321 19.65383,13.59082 17.38137,13.59082 C16.2067553,13.6522646 15.1003324,13.0370307 14.53274,12.00682 L14.48974,12.00682 L14.48974,16.4912 L12.63134,16.4912 L12.63134,4.44238 L14.4302,4.44238 L14.4302,5.94824 L14.46438,5.94824 C15.0571883,4.92448792 16.1648043,4.30951884 17.34719,4.34765 C19.645,4.34766 21.15969,6.16406 21.15969,8.96973 Z M19.24953,8.96973 C19.24953,7.13673 18.30226,5.93164 16.85695,5.93164 C15.43703,5.93164 14.48195,7.16211 14.48195,8.96973 C14.48195,10.79395 15.43703,12.01563 16.85695,12.01563 C18.30227,12.01563 19.24953,10.81934 19.24953,8.96973 Z" id="Shape"></path>
+                                    <path d="M31.12453,8.96973 C31.12453,11.78321 29.61867,13.59082 27.34621,13.59082 C26.1715953,13.6522646 25.0651724,13.0370307 24.49758,12.00682 L24.45458,12.00682 L24.45458,16.4912 L22.59618,16.4912 L22.59618,4.44238 L24.395,4.44238 L24.395,5.94824 L24.42918,5.94824 C25.0219926,4.92448854 26.1296128,4.30952307 27.312,4.34766 C29.60988,4.34766 31.12453,6.16406 31.12453,8.96973 Z M29.21437,8.96973 C29.21437,7.13673 28.2671,5.93164 26.82179,5.93164 C25.40187,5.93164 24.44679,7.16211 24.44679,8.96973 C24.44679,10.79395 25.40187,12.01563 26.82179,12.01563 C28.26711,12.01563 29.21438,10.81934 29.21438,8.96973 L29.21437,8.96973 Z" id="Shape"></path>
+                                    <path d="M37.71047,10.03613 C37.84817,11.26758 39.04447,12.07613 40.67922,12.07613 C42.24563,12.07613 43.37258,11.26754 43.37258,10.15718 C43.37258,9.19331 42.69289,8.61618 41.08352,8.22066 L39.47415,7.83296 C37.19388,7.28218 36.13528,6.21577 36.13528,4.4853 C36.13528,2.34272 38.00247,0.87104 40.65383,0.87104 C43.27783,0.87104 45.07668,2.34272 45.13723,4.4853 L43.26123,4.4853 C43.14893,3.24604 42.12451,2.498 40.62744,2.498 C39.13037,2.498 38.10596,3.25484 38.10596,4.3564 C38.10596,5.23433 38.76026,5.75093 40.36084,6.1464 L41.729,6.48234 C44.27685,7.08488 45.33545,8.10834 45.33545,9.92472 C45.33545,12.24796 43.48486,13.70304 40.5415,13.70304 C37.78759,13.70304 35.92822,12.28214 35.8081,10.03604 L37.71047,10.03613 Z" id="Shape"></path>
+                                    <path d="M49.34621,2.2998 L49.34621,4.44238 L51.06789,4.44238 L51.06789,5.91406 L49.34621,5.91406 L49.34621,10.90527 C49.34621,11.68066 49.69094,12.04199 50.44777,12.04199 C50.6521614,12.0384259 50.8562221,12.0240726 51.0591,11.99899 L51.0591,13.46188 C50.7188283,13.5254596 50.3729708,13.5542545 50.02687,13.54782 C48.19387,13.54782 47.47902,12.85934 47.47902,11.10348 L47.47902,5.91406 L46.16262,5.91406 L46.16262,4.44238 L47.479,4.44238 L47.479,2.2998 L49.34621,2.2998 Z" id="Shape"></path>
+                                    <path d="M52.065,8.96973 C52.065,6.1211 53.74273,4.33106 56.35895,4.33106 C58.98395,4.33106 60.65387,6.12106 60.65387,8.96973 C60.65387,11.82618 58.99274,13.6084 56.35895,13.6084 C53.72609,13.6084 52.065,11.82617 52.065,8.96973 Z M58.76031,8.96973 C58.76031,7.01563 57.8648,5.86231 56.35894,5.86231 C54.85308,5.86231 53.95855,7.02442 53.95855,8.96973 C53.95855,10.93164 54.85308,12.07618 56.35894,12.07618 C57.8648,12.07618 58.76027,10.93164 58.76027,8.96973 L58.76031,8.96973 Z" id="Shape"></path>
+                                    <path d="M62.18606,4.44238 L63.95852,4.44238 L63.95852,5.98338 L64.00152,5.98338 C64.248696,4.99136841 65.1576526,4.30863156 66.17925,4.34764 C66.393414,4.34689223 66.6069872,4.37015075 66.81597,4.41698 L66.81597,6.15526 C66.545601,6.07264332 66.2635596,6.03471129 65.98097,6.04296 C65.4346182,6.02079544 64.9058709,6.23853473 64.5335615,6.63900597 C64.161252,7.03947722 63.9825766,7.58267074 64.04445,8.12596 L64.04445,13.49608 L62.18605,13.49608 L62.18606,4.44238 Z" id="Shape"></path>
+                                    <path d="M75.3843,10.83691 C75.1343,12.48046 73.53371,13.60839 71.48586,13.60839 C68.85207,13.60839 67.21731,11.84374 67.21731,9.01269 C67.21731,6.17285 68.86086,4.33105 71.40774,4.33105 C73.91262,4.33105 75.48782,6.05175 75.48782,8.79687 L75.48782,9.43359 L69.09329,9.43359 L69.09329,9.54589 C69.0335874,10.2199216 69.2663316,10.8871194 69.7323199,11.3777699 C70.1983083,11.8684204 70.8526275,12.1352333 71.52884,12.11034 C72.4306823,12.1948396 73.2809431,11.6769777 73.61966,10.8369 L75.3843,10.83691 Z M69.1020624,8.13477 L73.62844,8.13476 C73.6621655,7.52909749 73.4416965,6.93682308 73.0201501,6.50063155 C72.5986036,6.06444001 72.0142008,5.82388041 71.40774,5.83691 C70.7964818,5.83326223 70.2090907,6.07393463 69.7761255,6.50543324 C69.3431603,6.93693186 69.1004963,7.52350292 69.1020624,8.13477 Z" id="Shape"></path>
+                                </g>
+                            </g>
+                        </g>
+                        <g id="_Group_4" transform="translate(35.000000, 8.000000)" fill="#FFFFFF">
+                            <g id="Group">
+                                <path d="M2.82619,0.731 C3.61513656,0.674384181 4.38789226,0.974547428 4.93176129,1.54887182 C5.47563032,2.12319621 5.73328587,2.91114479 5.63381,3.69584 C5.63381,5.60209 4.60354,6.69784 2.82619,6.69784 L0.67092,6.69784 L0.67092,0.731 L2.82619,0.731 Z M1.59767,5.854 L2.72267,5.854 C3.28649194,5.88770201 3.83548652,5.66555901 4.21721851,5.24925179 C4.5989505,4.83294457 4.77277961,4.26679442 4.69044,3.708 C4.76678901,3.15152453 4.59045658,2.59004622 4.20967108,2.17713398 C3.82888557,1.76422175 3.28349567,1.5430863 2.72267,1.57421 L1.59767,1.57421 L1.59767,5.854 Z" id="Shape"></path>
+                                <path d="M6.68068,4.44434 C6.60346713,3.63722505 6.99048366,2.85611193 7.67941593,2.42859737 C8.36834819,2.0010828 9.24008181,2.0010828 9.92901407,2.42859737 C10.6179463,2.85611193 11.0049629,3.63722505 10.92775,4.44434 C11.0064319,5.25232226 10.6197687,6.03495038 9.93022554,6.4633853 C9.24068243,6.89182022 8.36774757,6.89182022 7.67820446,6.4633853 C6.98866134,6.03495038 6.60199806,5.25232226 6.68068,4.44434 Z M10.01368,4.44434 C10.01368,3.46827 9.5752,2.89747 8.80568,2.89747 C8.03322,2.89747 7.59868,3.46827 7.59868,4.44435 C7.59868,5.42824 8.03325,5.99464 8.80568,5.99464 C9.57522,5.99463 10.01369,5.42432 10.01369,4.44434 L10.01368,4.44434 Z" id="Shape"></path>
+                                <polygon id="Shape" points="16.57326 6.69775 15.65139 6.69775 14.72073 3.38134 14.65042 3.38134 13.72366 6.69775 12.81057 6.69775 11.56936 2.19482 12.47073 2.19482 13.27737 5.63082 13.34378 5.63082 14.26956 2.19482 15.1221 2.19482 16.04788 5.63082 16.11819 5.63082 16.92092 2.19482 17.80959 2.19482"></polygon>
+                                <path d="M18.85354,2.19482 L19.709,2.19482 L19.709,2.91015 L19.77541,2.91015 C20.0063449,2.38347794 20.5459729,2.06130747 21.11916,2.1079 C21.5629768,2.07453177 21.9978859,2.2447899 22.3010908,2.57060207 C22.6042957,2.89641424 22.7428931,3.34242376 22.67775,3.7827 L22.67775,6.6977 L21.78908,6.6977 L21.78908,4.00586 C21.78908,3.28223 21.47463,2.92236 20.8174,2.92236 C20.5163658,2.90833912 20.2242202,3.02648257 20.0175546,3.24581678 C19.810889,3.465151 19.710315,3.76380101 19.7422,4.06347 L19.7422,6.69775 L18.85353,6.69775 L18.85354,2.19482 Z" id="Shape"></path>
+                                <polygon id="Shape" points="24.09377 0.437 24.98244 0.437 24.98244 6.69774 24.09377 6.69774"></polygon>
+                                <path d="M26.21779,4.44434 C26.1406364,3.63717225 26.527714,2.85603936 27.2166974,2.4285182 C27.9056808,2.00099704 28.7774592,2.00099704 29.4664426,2.4285182 C30.155426,2.85603936 30.5425036,3.63717225 30.46535,4.44434 C30.543932,5.25235119 30.1571979,6.03495719 29.4676205,6.46337324 C28.7780432,6.89178929 27.9050968,6.89178929 27.2155195,6.46337324 C26.5259421,6.03495719 26.139208,5.25235119 26.21779,4.44434 Z M29.55079,4.44434 C29.55079,3.46827 29.11231,2.89747 28.34279,2.89747 C27.57033,2.89747 27.13579,3.46827 27.13579,4.44435 C27.13579,5.42824 27.57036,5.99464 28.34279,5.99464 C29.11232,5.99463 29.5508,5.42432 29.5508,4.44434 L29.55079,4.44434 Z" id="Shape"></path>
+                                <path d="M31.4009,5.42432 C31.4009,4.61377 32.00442,4.14649 33.0757,4.08008 L34.29543,4.00977 L34.29543,3.6211 C34.29543,3.14551 33.98098,2.87696 33.37356,2.87696 C32.87747,2.87696 32.53372,3.05909 32.43508,3.37745 L31.57473,3.37745 C31.66555,2.60401 32.39309,2.10792 33.41457,2.10792 C34.54348,2.10792 35.1802,2.66992 35.1802,3.6211 L35.1802,6.69776 L34.32473,6.69776 L34.32473,6.06495 L34.25442,6.06495 C33.9638686,6.52707633 33.4471736,6.79716323 32.90188,6.77195 C32.5196161,6.81171181 32.1383711,6.68791066 31.8523958,6.43115244 C31.5664205,6.17439423 31.4024061,5.80864331 31.4009,5.42432 Z M34.29543,5.03955 L34.29543,4.66309 L33.19582,4.7334 C32.5757,4.7749 32.29445,4.98584 32.29445,5.38281 C32.29445,5.78808 32.64601,6.02392 33.12945,6.02392 C33.4156361,6.05288986 33.7013264,5.96447505 33.9211204,5.77891559 C34.1409144,5.59335613 34.2759916,5.32654106 34.29543,5.03955 Z" id="Shape"></path>
+                                <path d="M36.34816,4.44434 C36.34816,3.02149 37.07961,2.12012 38.2173,2.12012 C38.7917768,2.09365013 39.3298275,2.40147287 39.59816,2.91012 L39.66457,2.91012 L39.66457,0.437 L40.55324,0.437 L40.55324,6.69774 L39.70168,6.69774 L39.70168,5.98631 L39.63137,5.98631 C39.3427542,6.49073698 38.7980745,6.79335648 38.21731,6.77195 C37.0718,6.772 36.34816,5.87061 36.34816,4.44434 Z M37.26616,4.44434 C37.26616,5.39942 37.71636,5.97413 38.46929,5.97413 C39.21829,5.97413 39.6812,5.39113 39.6812,4.44825 C39.6812,3.50977 39.21343,2.91846 38.46929,2.91846 C37.72121,2.91846 37.26613,3.49707 37.26613,4.44434 L37.26616,4.44434 Z" id="Shape"></path>
+                                <path d="M44.23,4.44434 C44.1527871,3.63722505 44.5398037,2.85611193 45.2287359,2.42859737 C45.9176682,2.0010828 46.7894018,2.0010828 47.4783341,2.42859737 C48.1672663,2.85611193 48.5542829,3.63722505 48.47707,4.44434 C48.5557519,5.25232226 48.1690887,6.03495038 47.4795455,6.4633853 C46.7900024,6.89182022 45.9170676,6.89182022 45.2275245,6.4633853 C44.5379813,6.03495038 44.1513181,5.25232226 44.23,4.44434 Z M47.563,4.44434 C47.563,3.46827 47.12452,2.89747 46.355,2.89747 C45.58254,2.89747 45.148,3.46827 45.148,4.44435 C45.148,5.42824 45.58257,5.99464 46.355,5.99464 C47.12453,5.99463 47.563,5.42432 47.563,4.44434 Z" id="Shape"></path>
+                                <path d="M49.66945,2.19482 L50.52492,2.19482 L50.52492,2.91015 L50.59133,2.91015 C50.8222649,2.38347794 51.3618929,2.06130747 51.93508,2.1079 C52.3788968,2.07453177 52.8138059,2.2447899 53.1170108,2.57060207 C53.4202157,2.89641424 53.5588131,3.34242376 53.49367,3.7827 L53.49367,6.6977 L52.605,6.6977 L52.605,4.00586 C52.605,3.28223 52.29055,2.92236 51.63332,2.92236 C51.3322858,2.90833912 51.0401402,3.02648257 50.8334746,3.24581678 C50.626809,3.465151 50.526235,3.76380101 50.55812,4.06347 L50.55812,6.69775 L49.66945,6.69775 L49.66945,2.19482 Z" id="Shape"></path>
+                                <path d="M58.51516,1.07373 L58.51516,2.21533 L59.49075,2.21533 L59.49075,2.96387 L58.51516,2.96387 L58.51516,5.2793 C58.51516,5.75098 58.7095,5.95752 59.15188,5.95752 C59.2651356,5.95715754 59.3782775,5.95030966 59.49075,5.93701 L59.49075,6.67724 C59.3311595,6.70579072 59.1694656,6.72098004 59.00735,6.72265 C58.01907,6.72265 57.62551,6.37499 57.62551,5.50683 L57.62551,2.96383 L56.91067,2.96383 L56.91067,2.21529 L57.62551,2.21529 L57.62551,1.07373 L58.51516,1.07373 Z" id="Shape"></path>
+                                <path d="M60.70461,0.437 L61.58547,0.437 L61.58547,2.91845 L61.65578,2.91845 C61.8978078,2.38716856 62.4468801,2.06458754 63.02878,2.11181 C63.4700766,2.08779728 63.8990983,2.26180371 64.1989893,2.58643385 C64.4988802,2.91106399 64.6384049,3.35250564 64.57956,3.79052 L64.57956,6.69775 L63.69,6.69775 L63.69,4.00975 C63.69,3.29051 63.355,2.92625 62.72711,2.92625 C62.417939,2.90089367 62.1133391,3.01329096 61.8947423,3.2333935 C61.6761456,3.45349605 61.5658419,3.75886031 61.59332,4.06785 L61.59332,6.69773 L60.70465,6.69773 L60.70461,0.437 Z" id="Shape"></path>
+                                <path d="M69.76125,5.48193 C69.512057,6.33130948 68.6900989,6.88010304 67.81008,6.78466 C67.2096439,6.8005102 66.6325914,6.5516307 66.2320282,6.10405516 C65.8314651,5.65647963 65.6478864,5.05545594 65.73,4.46045 C65.6500674,3.86379048 65.8329582,3.26180373 66.2312908,2.81044696 C66.6296234,2.35909018 67.204202,2.10277675 67.80617,2.10791 C69.0591,2.10791 69.81496,2.96391 69.81496,4.37791 L69.81496,4.688 L66.63527,4.688 L66.63527,4.7378 C66.607132,5.07194014 66.7212507,5.40244775 66.9495608,5.6480407 C67.1778709,5.89363365 67.4991879,6.03152392 67.83449,6.0278 C68.2692619,6.07999468 68.6924825,5.86433304 68.90578,5.4819 L69.76125,5.48193 Z M66.63525,4.03076 L68.90966,4.03076 C68.9323129,3.72516044 68.8248585,3.42420507 68.6137769,3.20205909 C68.4026954,2.97991311 68.1076175,2.85723623 67.80126,2.86426 C67.490752,2.86035891 67.191828,2.98202124 66.9722963,3.20164888 C66.7527647,3.42127653 66.6312331,3.72025374 66.63527,4.03076 L66.63525,4.03076 Z" id="Shape"></path>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/static/svgs/app-store-badges/microsoft-app-store-badge.svg
+++ b/static/svgs/app-store-badges/microsoft-app-store-badge.svg
@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100px" height="40px" viewBox="0 0 100 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.1 (57501) - http://www.bohemiancoding.com/sketch -->
+    <title>English_get</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Round-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="MicroBit-Landing" transform="translate(-378.000000, -798.000000)" fill-rule="nonzero">
+            <g id="Install-Scratch-Link" transform="translate(0.000000, 624.000000)">
+                <g id="Scratch-Link-Callout" transform="translate(168.000000, 136.000000)">
+                    <g id="English_get" transform="translate(210.000000, 38.000000)">
+                        <rect id="Rectangle-path" fill="#000000" x="0.625" y="0.625" width="98.75" height="38.75"></rect>
+                        <path d="M1.25,1.25 L98.75,1.25 L98.75,38.75 L1.25,38.75 L1.25,1.25 Z M0,40 L100,40 L100,0 L0,0 L0,40 Z" id="Shape" fill="#D2D2D2"></path>
+                        <rect id="Rectangle-path" fill="#F25022" x="61.7916667" y="8.33333333" width="11.0833333" height="11.0833333"></rect>
+                        <rect id="Rectangle-path" fill="#7FBA00" x="74.0416667" y="8.33333333" width="11.0833333" height="11.0833333"></rect>
+                        <rect id="Rectangle-path" fill="#00A4EF" x="61.7916667" y="20.5833333" width="11.0833333" height="11.0833333"></rect>
+                        <rect id="Rectangle-path" fill="#FFB900" x="74.0416667" y="20.5833333" width="11.0833333" height="11.0833333"></rect>
+                        <g id="Group" transform="translate(14.791667, 10.208333)" fill="#FFFFFF">
+                            <path d="M15.5625,17.8333333 C13.6875,18.8958333 11.5833333,19.4375 9.1875,19.4375 C7.39583333,19.4375 5.79166667,19.0416667 4.39583333,18.25 C3,17.4583333 1.9375,16.3541667 1.1875,14.9166667 C0.4375,13.4791667 0.0625,11.8541667 0.0625,10.0416667 C0.0625,8.125 0.479166667,6.41666667 1.29166667,4.91666667 C2.10416667,3.41666667 3.27083333,2.25 4.77083333,1.39583333 C6.27083333,0.541666667 7.97916667,0.125 9.91666667,0.125 C10.875,0.125 11.8333333,0.208333333 12.7708333,0.395833333 C13.7083333,0.583333333 14.5,0.8125 15.0833333,1.08333333 L15.0833333,3.89583333 C13.6666667,2.95833333 11.8541667,2.47916667 9.6875,2.47916667 C8.375,2.47916667 7.20833333,2.79166667 6.16666667,3.41666667 C5.125,4.04166667 4.3125,4.91666667 3.72916667,6.04166667 C3.14583333,7.16666667 2.85416667,8.4375 2.85416667,9.83333333 C2.85416667,12.0833333 3.4375,13.8333333 4.60416667,15.125 C5.77083333,16.4166667 7.375,17.0625 9.4375,17.0625 C10.75,17.0625 11.8958333,16.7916667 12.8958333,16.2708333 L12.8958333,11.4583333 L8.95833333,11.4583333 L8.95833333,9.16666667 L15.5833333,9.16666667 L15.5833333,17.8333333 L15.5625,17.8333333 Z" id="Shape"></path>
+                            <path d="M30.3958333,13.1666667 L21.1458333,13.1666667 C21.1875,14.5208333 21.5833333,15.5416667 22.3125,16.2708333 C23.0416667,17 24,17.3541667 25.2083333,17.3541667 C26.7916667,17.3541667 28.1875,16.8958333 29.3958333,15.9791667 L29.3958333,18.25 C28.875,18.625 28.2083333,18.8958333 27.3958333,19.125 C26.5833333,19.3333333 25.75,19.4583333 24.875,19.4583333 C22.8541667,19.4583333 21.2916667,18.8541667 20.1666667,17.6458333 C19.0625,16.4375 18.5,14.75 18.5,12.5625 C18.5,11.2083333 18.7708333,10 19.3125,8.91666667 C19.8541667,7.83333333 20.6041667,7 21.5833333,6.375 C22.5416667,5.77083333 23.625,5.45833333 24.8125,5.45833333 C26.5416667,5.45833333 27.8958333,6.02083333 28.8958333,7.14583333 C29.8958333,8.27083333 30.3958333,9.83333333 30.3958333,11.8541667 L30.3958333,13.1666667 Z M27.8125,11.125 C27.8125,9.97916667 27.5416667,9.08333333 27,8.47916667 C26.4583333,7.875 25.7083333,7.5625 24.75,7.5625 C23.8541667,7.5625 23.1041667,7.89583333 22.4375,8.54166667 C21.7916667,9.1875 21.3541667,10.0625 21.1875,11.1458333 L27.8125,11.1458333 L27.8125,11.125 Z" id="Shape"></path>
+                            <path d="M40,18.9791667 C39.7708333,19.125 39.4375,19.2291667 39,19.3125 C38.5625,19.3958333 38.1875,19.4375 37.8541667,19.4375 C35.3958333,19.4375 34.1458333,18.0833333 34.1458333,15.3541667 L34.1458333,7.89583333 L31.8958333,7.89583333 L31.8958333,5.79166667 L34.1458333,5.79166667 L34.1458333,2.625 L36.7083333,1.8125 L36.7083333,5.79166667 L40,5.79166667 L40,7.91666667 L36.7083333,7.91666667 L36.7083333,14.9166667 C36.7083333,15.8125 36.8541667,16.4166667 37.1458333,16.7708333 C37.4375,17.125 37.9375,17.3125 38.6666667,17.3125 C39.1666667,17.3125 39.6041667,17.1666667 40.0208333,16.8958333 L40.0208333,18.9791667 L40,18.9791667 Z" id="Shape"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/static/svgs/extensions/bluetooth.svg
+++ b/static/svgs/extensions/bluetooth.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51 (57462) - http://www.bohemiancoding.com/sketch -->
+    <title>bluetooth</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="bluetooth" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M10.0067929,11.7982296 L12.3957387,13.6405035 L10.0067929,15.5035099 L10.0067929,11.7982296 Z M10.0067929,4.00347068 L12.3854344,5.85578685 L10.0067929,7.68801845 L10.0067929,4.00347068 Z M8.88494896,1.00665765 C8.38336008,1.06820716 8.00841492,1.4860959 8.01240369,1.97881589 L8.01240369,7.76900464 L6.64126113,6.71618415 C6.43185026,6.5493526 6.16194292,6.47290163 5.89336518,6.50367638 C5.34557295,6.55971883 4.9480247,7.03753736 5.00552959,7.57139833 C5.03411584,7.83865277 5.17505267,8.08258317 5.39476788,8.2448795 L7.3476073,9.74312404 L5.39476788,11.2514109 C4.96165303,11.5870177 4.88952262,12.2012169 5.23388715,12.622993 C5.57791929,13.045417 6.20814627,13.1153891 6.64126113,12.7801062 L8.01240369,11.7172434 L8.01240369,17.5278407 C8.01240369,18.0646172 8.45848208,18.499999 9.00926589,18.499999 C9.23596146,18.5003229 9.45600907,18.4251677 9.63284491,18.2871672 L14.6188179,14.3998301 C15.0519327,14.0684346 15.1270547,13.4571508 14.7870114,13.0350508 C14.7378164,12.9741491 14.6813087,12.9190785 14.6188179,12.8711347 L10.5675486,9.75316633 L14.6188179,6.62515567 C15.0489412,6.29019678 15.1190772,5.67826512 14.7753774,5.25908059 C14.7291741,5.2027142 14.6766552,5.15153093 14.6188179,5.10650261 L9.63284491,1.21916542 C9.42343405,1.05265781 9.15352671,0.975882898 8.88494896,1.00665765 Z" id="Fill-1" fill="#FFFFFF"></path>
+    </g>
+</svg>
--- a/static/svgs/extensions/download-white.svg
+++ b/static/svgs/extensions/download-white.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.1 (57501) - http://www.bohemiancoding.com/sketch -->
+    <title>download-white</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="download-white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M14.7292766,8.77879087 L10.4765261,13.042979 C10.2257229,13.2945489 9.8362769,13.2945489 9.58703145,13.042979 L5.33583877,8.77879087 C4.93081492,8.37096636 5.2252361,7.70063411 5.78759614,7.70063411 L7.90462467,7.70063411 L9.16798754,2.68486136 C9.29261026,2.20047209 9.78954337,1.90358835 10.2740142,2.02859203 C10.6151689,2.10515678 10.8659722,2.37078961 10.9423036,2.68486136 L12.2056664,7.70063411 L14.2775192,7.70063411 C14.8367637,7.70063411 15.1343005,8.37096636 14.7292766,8.77879087 Z M18,11.8123177 L18,14.3905187 C18,16.3749521 16.3954824,18 14.4170967,18 L5.60003894,18 C3.60607536,18 2,16.3749521 2,14.3905187 L2,11.8123177 C2,11.1560484 2.53120436,10.6404082 3.16833804,10.6404082 C3.80858728,10.6404082 4.33667608,11.1560484 4.33667608,11.8123177 L4.33667608,14.3905187 C4.33667608,15.0780389 4.89903612,15.656181 5.60003894,15.656181 L14.4170967,15.656181 C15.1025217,15.656181 15.6633239,15.0780389 15.6633239,14.3905187 L15.6633239,11.8123177 C15.6633239,11.1560484 16.1929705,10.6404082 16.831662,10.6404082 C17.4859313,10.6404082 18,11.1560484 18,11.8123177 Z" id="Fill-1" fill="#FFFFFF"></path>
+    </g>
+</svg>
--- a/static/svgs/extensions/download.svg
+++ b/static/svgs/extensions/download.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51 (57462) - http://www.bohemiancoding.com/sketch -->
+    <title>download</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="download" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M14.7292766,8.77879087 L10.4765261,13.042979 C10.2257229,13.2945489 9.8362769,13.2945489 9.58703145,13.042979 L5.33583877,8.77879087 C4.93081492,8.37096636 5.2252361,7.70063411 5.78759614,7.70063411 L7.90462467,7.70063411 L9.16798754,2.68486136 C9.29261026,2.20047209 9.78954337,1.90358835 10.2740142,2.02859203 C10.6151689,2.10515678 10.8659722,2.37078961 10.9423036,2.68486136 L12.2056664,7.70063411 L14.2775192,7.70063411 C14.8367637,7.70063411 15.1343005,8.37096636 14.7292766,8.77879087 Z M18,11.8123177 L18,14.3905187 C18,16.3749521 16.3954824,18 14.4170967,18 L5.60003894,18 C3.60607536,18 2,16.3749521 2,14.3905187 L2,11.8123177 C2,11.1560484 2.53120436,10.6404082 3.16833804,10.6404082 C3.80858728,10.6404082 4.33667608,11.1560484 4.33667608,11.8123177 L4.33667608,14.3905187 C4.33667608,15.0780389 4.89903612,15.656181 5.60003894,15.656181 L14.4170967,15.656181 C15.1025217,15.656181 15.6633239,15.0780389 15.6633239,14.3905187 L15.6633239,11.8123177 C15.6633239,11.1560484 16.1929705,10.6404082 16.831662,10.6404082 C17.4859313,10.6404082 18,11.1560484 18,11.8123177 Z" id="Fill-1" fill="#4C97FF"></path>
+    </g>
+</svg>
--- a/static/svgs/extensions/mac.svg
+++ b/static/svgs/extensions/mac.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51 (57462) - http://www.bohemiancoding.com/sketch -->
+    <title>mac</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="mac" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M12.3502164,3.80378193 C11.7367853,4.55389379 10.7566828,5.11624576 9.80322734,5.05205118 C9.6637863,4.04961379 10.1503698,2.98409502 10.7108717,2.33806745 C11.3330634,1.58814113 12.3775936,1.03283943 13.254758,1 C13.3651792,2.03360701 12.9373654,3.05867948 12.3502164,3.80378193 Z M15.0523884,11.7406744 C15.3564574,12.4314156 16.2254087,13.4683622 17,13.6917445 C16.9764556,13.7659579 16.9430555,13.8681868 16.9207887,13.9344223 L16.918051,13.9344223 C16.7196578,14.5628242 16.1584259,15.6212927 15.8006976,16.1713994 C15.0699098,17.2389591 14.3400345,18.3042923 13.1622688,18.3556851 C12.0069524,18.3506757 11.642106,17.6443497 10.3238042,17.6552962 C9.00477231,17.6443497 8.60159791,18.3415845 7.50651125,18.3838862 C6.37291405,18.4354645 5.51308851,17.2374748 4.78266571,16.1713994 L4.7788329,16.1713994 L4.7788329,16.1673177 C4.41727179,15.6090475 3.85695245,14.5168119 3.65655159,13.9344223 L3.65764668,13.9344223 L3.65764668,13.929784 C3.44866764,13.4028689 3.1701506,12.3251049 3.10992084,11.7673913 L3.10827821,11.7685045 C3.10754815,11.7605265 3.10681809,11.7505077 3.10353283,11.7406744 C3.02632922,11.1811055 2.96007648,10.017625 3.02870191,9.58106475 L3.02870191,9.54451465 C3.07944093,8.85655651 3.41983036,7.76933033 3.70364032,7.30289916 L3.70364032,7.30716643 L3.70802067,7.30716643 L3.70802067,7.30289916 C4.42530243,6.00861761 5.68848489,5.15497808 7.11337514,5.11935565 C7.11337514,5.11935565 7.30702297,5.10840917 7.33111487,5.10840917 L7.34170071,5.11007898 C8.41671078,5.05831514 9.4355064,5.87763098 10.1098973,5.85685123 C10.8069199,5.87763098 12.0996697,4.96981567 13.3453308,5.07612635 C14.5805885,5.09542183 15.7935795,5.69302517 16.5344057,6.8010311 C16.3338223,6.94797362 16.0368713,7.19028034 15.9326555,7.30716643 L15.9313779,7.30716643 L15.9313779,7.3092073 C15.9249899,7.31440224 15.9186019,7.31922611 15.912944,7.32330784 C15.4431518,7.66765798 14.8554553,8.61684726 14.7459466,9.54451465 L14.7452166,9.54451465 L14.7452166,9.57086041 C14.6406358,10.2792272 14.7651106,11.1536465 15.0383348,11.71303 L15.0523884,11.7406744 Z" id="Combined-Shape" fill="#FFFFFF"></path>
+    </g>
+</svg>
--- a/static/svgs/extensions/offsite-link.svg
+++ b/static/svgs/extensions/offsite-link.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51 (57462) - http://www.bohemiancoding.com/sketch -->
+    <title>offsite-link</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="offsite-link" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M10.1575922,16.994103 C9.84650021,16.994103 9.55614768,16.8751967 9.34045723,16.6608889 L4.99899559,12.3194272 C4.66301623,11.9627084 4.57314521,11.4621959 4.75980041,11.0321977 C4.94507298,10.6021994 5.35433178,10.3367342 5.82857425,10.3367342 L7.47528788,10.3367342 L8.31454496,4.29463633 C8.43483386,3.36965613 9.23952516,2.6658969 10.1866275,2.6658969 C10.2682027,2.6658969 10.3511606,2.67142742 10.4327358,2.68110584 C11.2872018,2.81522106 11.9467168,3.48164924 12.0504142,4.30154948 L12.9117934,10.3367342 L14.4866102,10.3367342 C14.9663832,10.3367342 15.3936162,10.618791 15.5747408,11.0543198 C15.7558655,11.4926138 15.6576987,11.9779173 15.3161888,12.3194272 L10.9747272,16.6608889 C10.7590367,16.8751967 10.4686842,16.994103 10.1575922,16.994103" id="Fill-1" fill="#4C97FF" transform="translate(10.164103, 9.830000) rotate(-90.000000) translate(-10.164103, -9.830000) "></path>
+    </g>
+</svg>
--- a/static/svgs/extensions/scratch-link.svg
+++ b/static/svgs/extensions/scratch-link.svg
@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51 (57462) - http://www.bohemiancoding.com/sketch -->
+    <title>scratch-link</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="scratch-link" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(1.000000, 2.000000)" fill="#FFFFFF" id="Combined-Shape">
+            <path d="M15.0548943,7.16762464 C15.1312951,7.62680704 15.146653,8.08968312 15.1137987,8.5434222 L16.6392874,9.35758641 C16.8795708,9.47520087 16.992714,9.75514272 16.9015385,10.0067016 L16.249896,11.8045504 C16.1587205,12.0566924 15.8916093,12.1991906 15.6313023,12.1346485 L13.940959,11.7781114 C13.6689877,12.1492288 13.3598852,12.4937128 13.0060698,12.7965943 L13.5811171,14.5979423 C13.6684045,14.8514452 13.5500124,15.1300263 13.3070073,15.2433638 L11.5737007,16.0516959 C11.3306956,16.1648391 11.041228,16.0765796 10.9032011,15.846794 L9.89288317,14.2484038 C9.43350637,14.3246102 8.9708247,14.3399681 8.51689121,14.3073083 L7.70331021,15.8320193 C7.58550135,16.0726916 7.30517069,16.1858347 7.05322302,16.094076 L5.25265259,15.4387399 C5.00089933,15.3469812 4.85878996,15.0802588 4.9231377,14.8201462 L5.27986916,13.1292196 C4.91127906,12.8624973 4.56660065,12.5533948 4.26391353,12.1995794 L2.46256548,12.7746266 C2.20886818,12.8619141 1.93048156,12.743522 1.81714399,12.5005169 L1.00881189,10.7670159 C0.895474326,10.5240108 0.983928174,10.2347375 1.21351937,10.0965163 L2.80704948,9.0887256 C2.73570319,8.62682154 2.71295791,8.16141821 2.7506723,7.70534628 L1.22654445,6.89176528 C0.985677811,6.77395642 0.87272905,6.49304255 0.964682172,6.24109488 L1.62099029,4.44577336 C1.71313782,4.1942145 1.98005459,4.05249394 2.23997283,4.11723049 L3.92623367,4.47571158 C4.19276164,4.10712148 4.50711301,3.76011023 4.860734,3.4572287 L4.28588119,1.65588065 C4.19859376,1.40237775 4.31698584,1.12379673 4.55999091,1.01045916 L6.29329754,0.202127064 C6.53630262,0.0887894948 6.82577027,0.177243343 6.96379715,0.40722335 L7.97411507,2.00541915 C8.43349187,1.92921276 8.90142245,1.91132759 9.35788319,1.93660011 L10.1689369,0.419081998 C10.2867458,0.178604172 10.5670765,0.0656554113 10.8186353,0.157219725 L12.6120128,0.810028569 C12.8637661,0.901592883 13.0058754,1.16850966 12.9413333,1.42842789 L12.5846018,3.11954884 C12.9584408,3.38393836 13.3003976,3.70062258 13.6083336,4.05191072 L15.4046272,3.47919636 C15.6581301,3.39190893 15.9365167,3.51030101 16.0498543,3.75330608 L16.8581863,5.48680711 C16.9715239,5.72981219 16.8830701,6.01908544 16.6532845,6.15730673 L15.0548943,7.16762464 Z M11.5238166,9.21341636 C11.5193453,8.67841638 11.3420488,8.20523689 11.013506,7.82614897 C11.0531644,7.73341823 11.0834914,7.63524418 11.101571,7.53259883 C11.1320924,7.36774419 11.1952738,5.46783328 11.1952738,5.45208655 C11.1952738,4.74095649 10.615172,4.15152337 9.90170912,4.13908151 C9.5562531,4.13247177 9.24131852,4.26447213 9.00414556,4.47792779 C8.92852238,4.4643195 8.85076075,4.45518251 8.77377674,4.45071122 C8.72984143,4.44857278 8.68707253,4.44740635 8.64624768,4.44740635 C7.91703804,4.44740635 7.3075813,4.80744268 6.97553916,5.4351734 C6.75314091,5.85275332 6.69909658,6.28957925 6.66293743,6.58546224 C6.661771,6.59109995 6.661771,6.59673767 6.66060458,6.60237539 L6.65263401,6.67566572 C6.5896471,7.18033867 6.62230698,7.60705559 6.72495232,7.96262062 C6.5183008,8.19182301 6.39077174,8.49314931 6.38513402,8.82499704 C6.384162,8.93114166 6.37502501,9.42220633 6.35811186,9.71128517 C6.34450357,9.96070558 6.33322814,10.3604003 6.35577901,10.8458273 L6.35694543,10.8559363 C6.35694543,10.8705166 6.35811186,10.8841249 6.35927828,10.8977332 C6.41001774,11.5795082 6.98467615,12.1147026 7.66761762,12.1147026 C7.69463979,12.1147026 7.72068993,12.1135362 7.7477121,12.1112033 C8.09763941,12.0909853 8.41821171,11.9350732 8.65091338,11.6720445 C8.67676912,11.6428839 8.70165284,11.6123625 8.72537013,11.5806746 C8.82801548,11.5942829 8.93299367,11.5999206 9.03699985,11.6010871 C9.64081887,11.6010871 10.2279191,11.3819937 10.6872959,10.9857982 C11.228128,10.5240886 11.5327592,9.87613981 11.5238166,9.21341636 Z"></path>
+            <path d="M8.67620534,7.84765006 C8.33774787,7.79496656 8.1571465,7.56848582 8.24696117,6.86785358 L8.25726459,6.78328781 C8.33269337,6.17480309 8.39606909,6.03930346 8.68884161,6.05505019 C8.7745738,6.0604935 8.87333106,6.11473224 8.97189392,6.19560433 C9.06345824,6.30155454 9.26661048,6.43860941 9.38111448,6.70999748 C9.4633474,6.90906724 9.49153599,7.03892915 9.50320023,7.17890008 L9.52147421,7.35036446 L9.52147421,7.34958685 C9.54558031,7.4670069 9.6355894,7.56362572 9.760008,7.58442696 C9.92000254,7.61378197 10.0745538,7.50724854 10.1027424,7.34686519 C10.1062416,7.32781359 10.1789488,5.48272463 10.1789488,5.452592 C10.1789488,5.2900702 10.0485036,5.15806984 9.88500981,5.15534819 C9.72151599,5.15437617 9.58912682,5.28715414 9.58912682,5.44928713 C9.58912682,5.45298081 9.58834921,5.70765013 9.5831003,5.96426349 C9.35039864,5.71153821 9.05276601,5.48466867 8.71916864,5.46503386 C7.8270484,5.41740486 7.72965196,6.23759561 7.67094193,6.71038629 L7.66199935,6.79417444 C7.54185764,7.72828596 7.85329295,8.31771908 8.58541865,8.43241748 C9.38111448,8.55722489 9.91222638,8.73996471 9.91708648,9.22947414 C9.92000254,9.41979571 9.81988445,9.6151718 9.6453096,9.76505733 C9.43477,9.94410347 9.15288411,10.0247812 8.88752256,9.98123465 C8.80509524,9.96859838 8.72791683,9.94604751 8.65404328,9.9213582 C8.5498427,9.86342579 8.28700841,9.70343124 8.15384163,9.51913619 C8.04147608,9.36361294 8.00259527,9.11905263 7.99034781,8.96391819 C7.99190304,8.89432153 7.99209745,8.84863658 7.99209745,8.84338767 C7.99501351,8.68008825 7.86398517,8.54692147 7.70243539,8.54303339 C7.53835836,8.53953412 7.40402516,8.67134007 7.40091469,8.83444508 C7.40091469,8.83988839 7.39352734,9.41804608 7.37233729,9.76622376 C7.34201026,10.3268851 7.37233729,10.8020086 7.37233729,10.8226154 C7.38439035,10.985526 7.52455567,11.1083894 7.68766068,11.0975028 C7.84998808,11.0887546 7.97401787,10.9476172 7.96274243,10.7845122 C7.96274243,10.781985 7.94816213,10.552005 7.95010617,10.2335711 C8.16647789,10.3717924 8.45069663,10.5061256 8.78954291,10.5638636 C9.23084014,10.6379316 9.68244078,10.5102081 10.0271192,10.2137419 C10.3362216,9.94954679 10.5131293,9.58873285 10.5082692,9.22344761 C10.497577,8.13245201 9.26661048,7.94096401 8.67620534,7.84765006"></path>
+        </g>
+    </g>
+</svg>
--- a/static/svgs/extensions/windows.svg
+++ b/static/svgs/extensions/windows.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51 (57462) - http://www.bohemiancoding.com/sketch -->
+    <title>windows</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="windows" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M3,4.98829432 L8.72135617,4.20910483 L8.72385717,9.72781594 L3.00522645,9.76038184 L3,4.98829432 Z M8.71863073,10.3636789 L8.7230716,15.8871997 L3.00444088,15.1009721 L3.00412024,10.3266289 L8.71863073,10.3636789 Z M9.41219306,4.10717308 L16.9982365,3 L16.9982365,9.65762765 L9.41219306,9.71785203 L9.41219306,4.10717308 Z M17,10.4156228 L16.9982204,17.0432705 L9.41217703,15.9725863 L9.40154778,10.403214 L17,10.4156228 Z" id="Windows-Icon" fill="#FFFFFF" fill-rule="nonzero"></path>
+    </g>
+</svg>