Merge pull request #2035 from LLK/hotfix/extension-landing-pages

[Develop] Extension landing pages update

src/components/extension-landing/extension-landing.jsx

@@ -10,8 +10,16 @@ class ExtensionLanding extends React.Component {
             'onSetOS'
         ]);
 
+        // @todo use bowser for browser detection
+        let detectedOS = OS_ENUM.WINDOWS;
+        if (window.navigator && window.navigator.platform) {
+            if (window.navigator.platform === 'MacIntel') {
+                detectedOS = OS_ENUM.MACOS;
+            }
+        }
+
         this.state = {
-            OS: OS_ENUM.WINDOWS
+            OS: detectedOS
         };
     }
 

src/components/extension-landing/extension-landing.scss

@@ -46,6 +46,7 @@
     }
 
     .screenshot {
+        border: 1px solid $ui-border;
         border-radius: .5rem;
     }
 

src/components/extension-landing/project-card.jsx

@@ -3,9 +3,9 @@ const React = require('react');
 
 const ProjectCard = props => (
     <a
-        download
         className="project-card"
         href={props.cardUrl}
+        target="_blank"
     >
         <div className="project-card-image">
             <img src={props.imageSrc} />

src/routes.json

@@ -301,6 +301,13 @@
         "view": "wedo2/wedo2",
         "title": "LEGO WeDo 2.0"
     },
+    {
+        "name": "wedo-legacy",
+        "pattern": "^/wedo-legacy/?$",
+        "routeAlias": "/wedo-legacy/?$",
+        "view": "wedo2-legacy/wedo2",
+        "title": "LEGO WeDo"
+    },
     {
         "name": "ev3",
         "pattern": "^/ev3/?$",

src/views/ev3/ev3.jsx

@@ -39,11 +39,11 @@ class EV3 extends ExtensionLanding {
                             values={{
                                 ev3Link: (
                                     <a
-                                        href="https://shop.lego.com/en-US/LEGO-MINDSTORMS-EV3-31313"
+                                        href="https://education.lego.com/en-us/middle-school/intro/mindstorms-ev3"
                                         rel="noopener noreferrer"
                                         target="_blank"
                                     >
-                                                LEGO MINDSTORMS EV3
+                                                LEGO MINDSTORMS Education EV3
                                     </a>
                                 )
                             }}
@@ -88,7 +88,10 @@ class EV3 extends ExtensionLanding {
                             </Step>
                             <Step number={2}>
                                 <div className="step-image">
-                                    <img src="/images/ev3/ev3-connect-2.png" />
+                                    <img
+                                        className="screenshot"
+                                        src="/images/ev3/ev3-connect-2.png"
+                                    />
                                 </div>
                                 <p>
                                     <FormattedMessage
@@ -109,7 +112,10 @@ class EV3 extends ExtensionLanding {
                             </Step>
                             <Step number={3}>
                                 <div className="step-image">
-                                    <img src="/images/ev3/ev3-connect-3.png" />
+                                    <img
+                                        className="screenshot"
+                                        src="/images/ev3/ev3-connect-3.png"
+                                    />
                                 </div>
                                 <p><FormattedMessage id="ev3.addExtension" /></p>
                             </Step>
@@ -196,19 +202,19 @@ class EV3 extends ExtensionLanding {
                     <h3><FormattedMessage id="ev3.starterProjects" /></h3>
                     <Steps>
                         <ProjectCard
-                            cardUrl="https://downloads.scratch.mit.edu/ev3/ev3-wave-hello.sb3"
+                            cardUrl="https://beta.scratch.mit.edu/#239075992"
                             description={this.props.intl.formatMessage({id: 'ev3.waveHelloDescription'})}
                             imageSrc="/images/ev3/starter-wave-hello.png"
                             title={this.props.intl.formatMessage({id: 'ev3.waveHelloTitle'})}
                         />
                         <ProjectCard
-                            cardUrl="https://downloads.scratch.mit.edu/ev3/ev3-distance-instrument.sb3"
+                            cardUrl="https://beta.scratch.mit.edu/#239076020"
                             description={this.props.intl.formatMessage({id: 'ev3.distanceInstrumentDescription'})}
                             imageSrc="/images/ev3/starter-distance-instrument.png"
                             title={this.props.intl.formatMessage({id: 'ev3.distanceInstrumentTitle'})}
                         />
                         <ProjectCard
-                            cardUrl="https://downloads.scratch.mit.edu/ev3/ev3-space-tacos.sb3"
+                            cardUrl="https://beta.scratch.mit.edu/#239076044"
                             description={this.props.intl.formatMessage({id: 'ev3.spaceTacosDescription'})}
                             imageSrc="/images/ev3/starter-flying-game.png"
                             title={this.props.intl.formatMessage({id: 'ev3.spaceTacosTitle'})}

src/views/ev3/ev3.scss

@@ -2,7 +2,7 @@
 
 .ev3 {
     .extension-header {
-        background-color: $ui-aqua;
+        background-color: $ui-orange;
         background-image: url("/images/ev3/ev3-pattern.svg");
     }
 }

src/views/ev3/l10n.json

@@ -33,6 +33,6 @@
     "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.updateFirmwareText": "We recommend updating to EV3 firmware version 1.10E or above. See {firmwareUpdateLink}.",
     "ev3.firmwareUpdateText": "firmware update instructions from LEGO"
 }

src/views/microbit/microbit.jsx

@@ -126,7 +126,10 @@ class MicroBit extends ExtensionLanding {
                             </Step>
                             <Step number={2}>
                                 <div className="step-image">
-                                    <img src="/images/microbit/mbit-connect-2.png" />
+                                    <img
+                                        className="screenshot"
+                                        src="/images/microbit/mbit-connect-2.png"
+                                    />
                                 </div>
                                 <p>
                                     <FormattedMessage
@@ -147,7 +150,10 @@ class MicroBit extends ExtensionLanding {
                             </Step>
                             <Step number={3}>
                                 <div className="step-image">
-                                    <img src="/images/microbit/mbit-connect-3.png" />
+                                    <img
+                                        className="screenshot"
+                                        src="/images/microbit/mbit-connect-3.png"
+                                    />
                                 </div>
                                 <p><FormattedMessage id="microbit.addExtension" /></p>
                             </Step>
@@ -201,19 +207,19 @@ class MicroBit extends ExtensionLanding {
                     <h3><FormattedMessage id="microbit.starterProjects" /></h3>
                     <Steps>
                         <ProjectCard
-                            cardUrl="https://downloads.scratch.mit.edu/microbit/microbit-heartbeat.sb3"
+                            cardUrl="https://beta.scratch.mit.edu/#239075756"
                             description={this.props.intl.formatMessage({id: 'microbit.heartBeatDescription'})}
                             imageSrc="/images/microbit/starter-heart.png"
                             title={this.props.intl.formatMessage({id: 'microbit.heartBeat'})}
                         />
                         <ProjectCard
-                            cardUrl="https://downloads.scratch.mit.edu/microbit/microbit-guitar.sb3"
+                            cardUrl="https://beta.scratch.mit.edu/#239075950"
                             description={this.props.intl.formatMessage({id: 'microbit.tiltGuitarDescription'})}
                             imageSrc="/images/microbit/starter-guitar.png"
                             title={this.props.intl.formatMessage({id: 'microbit.tiltGuitar'})}
                         />
                         <ProjectCard
-                            cardUrl="https://downloads.scratch.mit.edu/microbit/microbit-fish.sb3"
+                            cardUrl="https://beta.scratch.mit.edu/#239075973"
                             description={this.props.intl.formatMessage({id: 'microbit.oceanAdventureDescription'})}
                             imageSrc="/images/microbit/starter-fish.png"
                             title={this.props.intl.formatMessage({id: 'microbit.oceanAdventure'})}

src/views/microbit/microbit.scss

@@ -3,7 +3,7 @@
 
 .microbit {
     .extension-header {
-        background-color: $ui-purple;
+        background-color: $ui-mint-green;
         background-image: url("/images/microbit/mbit-pattern.svg");
 
         .extension-info {

src/views/wedo2-legacy/l10n.json

@@ -0,0 +1,21 @@
+{
+    "wedoLegacy.intro": "The LEGO® Education WeDo 2.0 is an introductory invention kit you can use to build your own interactive machines. You can snap together Scratch programming blocks to interact with your LEGO WeDo creations and add animations on the screen.",
+    "wedoLegacy.requirement": "The LEGO WeDo 2.0 extension is available for Mac OSX and Windows 10+.",
+    "wedoLegacy.getStarted": "Getting Started with LEGO WeDo 2.0",
+    "wedoLegacy.installTitle": "1. Install Device Manager",
+    "wedoLegacy.installText": "The Device Manager lets you connect WeDo 2.0 to Scratch using Bluetooth",
+    "wedoLegacy.downloadMac": "Download for Mac OSX",
+    "wedoLegacy.downloadWin": "Download for Windows 10+",
+    "wedoLegacy.setupTitle": "2. Setup & Help",
+    "wedoLegacy.setupText": "Connect your WeDo 2.0 by following the steps in the <a href=\"/projects/editor/?tip_bar=ext2\">Tips Window</a>",
+    "wedoLegacy.createTitle": "3. Create",
+    "wedoLegacy.createText": "Use the WeDo extension blocks to turn on lights, control motors, and make your project interactive",
+    "wedoLegacy.wedo2SetupInstructions": "WeDo 2.0 Setup Instructions",
+    "wedoLegacy.wedo1SetupInstructions": "WeDo 1.0 Setup Instructions",
+    "wedoLegacy.starterProjects": "WeDo 2.0 Starter Projects",
+    "wedoLegacy.starterMotor": "Motor",
+    "wedoLegacy.starterDistance": "Distance Sensor",
+    "wedoLegacy.starterTilt": "Tilt Sensor",
+    "wedoLegacy.versionTitle": "Which version do you have?",
+    "wedoLegacy.versionText": "You can also use Scratch to program the original LEGO WeDo (LEGO WeDo 1.0)."
+}

src/views/wedo2-legacy/wedo2.jsx

@@ -0,0 +1,155 @@
+const FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
+const FormattedMessage = require('react-intl').FormattedMessage;
+const React = require('react');
+
+const Page = require('../../components/page/www/page.jsx');
+const render = require('../../lib/render.jsx');
+
+require('./wedo2.scss');
+
+const Wedo2 = () => (
+    <div className="wedo">
+        <div className="top-banner">
+            <div className="inner">
+                <div className="columns2">
+                    <div className="banner-text">
+                        <h2>LEGO WeDo 2.0 &amp; Scratch</h2>
+                        <p className="intro">
+                            <FormattedMessage id="wedoLegacy.intro" />
+                        </p>
+                    </div>
+                    <div className="banner-photo">
+                        <img src="/images/wedo-legacy/wedo-milo.png" />
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div className="inner">
+            <section id="getting-started">
+                <h3>
+                    <FormattedMessage id="wedoLegacy.getStarted" />
+                </h3>
+                <p className="callout">
+                    <FormattedMessage id="wedoLegacy.requirement" />
+                </p>
+                <div className="columns3">
+                    <div className="column">
+                        <img src="/images/wedo-legacy/download-device-manager.png" />
+                        <h4>
+                            <FormattedMessage id="wedoLegacy.installTitle" />
+                        </h4>
+                        <p>
+                            <FormattedHTMLMessage id="wedoLegacy.installText" />
+                            <br />
+                            <a href="https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1084869222&mt=12">
+                                <FormattedMessage id="wedoLegacy.downloadMac" />
+                            </a>
+                            <br />
+                            <a href="https://downloads.scratch.mit.edu/device-manager/ScratchDeviceManager-1.1.0.exe">
+                                <FormattedMessage id="wedoLegacy.downloadWin" />
+                            </a>
+                        </p>
+                    </div>
+                    <div className="column">
+                        <img src="/images/wedo-legacy/set-up.png" />
+                        <h4>
+                            <FormattedMessage id="wedoLegacy.setupTitle" />
+                        </h4>
+                        <p>
+                            <FormattedHTMLMessage id="wedoLegacy.setupText" />
+                        </p>
+                    </div>
+                    <div className="column">
+                        <img src="/images/wedo-legacy/create-and-share.png" />
+                        <h4>
+                            <FormattedMessage id="wedoLegacy.createTitle" />
+                        </h4>
+                        <p>
+                            <FormattedMessage id="wedoLegacy.createText" />
+                        </p>
+                    </div>
+                </div>
+            </section>
+        </div>
+
+        <div className="banner">
+            <div
+                className="inner"
+                id="starter-projects"
+            >
+                <h3>
+                    <FormattedMessage id="wedoLegacy.starterProjects" />
+                </h3>
+                <div className="project-list">
+                    <a href="/projects/101037564/?tip_bar=ext2#editor">
+                        <div className="project-card">
+                            <img
+                                alt=""
+                                src="/images/wedo-legacy/motor.png"
+                            />
+                            <p>
+                                <FormattedMessage id="wedoLegacy.starterMotor" />
+                            </p>
+                        </div>
+                    </a>
+                    <a href="/projects/101038249/?tip_bar=ext2#editor">
+                        <div className="project-card">
+                            <img
+                                alt=""
+                                src="/images/wedo-legacy/distance.png"
+                            />
+                            <p>
+                                <FormattedMessage id="wedoLegacy.starterDistance" />
+                            </p>
+                        </div>
+                    </a>
+                    <a href="/projects/101033190/?tip_bar=ext2#editor">
+                        <div className="project-card">
+                            <img
+                                alt=""
+                                src="/images/wedo-legacy/tilt.png"
+                            />
+                            <p>
+                                <FormattedMessage id="wedoLegacy.starterTilt" />
+                            </p>
+                        </div>
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <div className="inner">
+            <section>
+                <h3>
+                    <FormattedMessage id="wedoLegacy.versionTitle" />
+                </h3>
+                <p>
+                    <FormattedMessage id="wedoLegacy.versionText" />
+                </p>
+                <div className="device-card">
+                    <h4>LEGO WeDo 1.0 Hub</h4>
+                    <img
+                        alt="LEGO WeDo 1.0 Hub"
+                        src="/images/wedo-legacy/wedo1.png"
+                    />
+                    <a href="/projects/editor/?tip_bar=ext1">
+                        <FormattedMessage id="wedoLegacy.wedo1SetupInstructions" />
+                    </a>
+                </div>
+                <div className="device-card">
+                    <h4>LEGO WeDo 2.0 Hub</h4>
+                    <img
+                        alt="LEGO WeDo 2.0 Hub"
+                        src="/images/wedo-legacy/wedo2.png"
+                    />
+                    <a href="/projects/editor/?tip_bar=ext2">
+                        <FormattedMessage id="wedoLegacy.wedo2SetupInstructions" />
+                    </a>
+                </div>
+            </section>
+        </div>
+    </div>
+);
+
+render(<Page><Wedo2 /></Page>, document.getElementById('app'));

src/views/wedo2-legacy/wedo2.scss

@@ -0,0 +1,232 @@
+@import "../../colors";
+@import "../../frameless";
+
+#view {
+    padding: 0;
+}
+
+.wedo {
+    h3,
+    h4 {
+        margin: 1.5em 0 .3em;
+    }
+
+    h2 {
+        margin: .75em 0 .3em;
+    }
+
+    p {
+        margin: .25em 0 1em;
+
+        &.intro {
+            margin-bottom: 1em;
+        }
+
+        &.callout {
+            padding: .75em 1em;
+            text-align: center;
+        }
+    }
+
+    .top-banner {
+        margin-bottom: 50px;
+        background-color: $ui-blue;
+        padding: 50px 0;
+        width: 100%;
+
+        h2 {
+            color: $ui-white;
+        }
+
+        p {
+            color: $ui-white;
+        }
+
+        .columns2 {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .banner-text {
+            max-width: $cols7;
+        }
+
+        .banner-photo {
+            max-width: $cols4;
+
+            img {
+                width: 100%;
+            }
+        }
+    } 
+
+    section {
+        margin-bottom: 50px;
+        text-align: center;
+    }
+
+    // Getting Started Section
+
+    .columns3 {
+        display: flex;
+        justify-content: space-between;
+
+        .column { 
+            margin: 15px;
+            max-width: $cols4;
+
+            img {
+                margin: 0 auto;
+                width: 80%;
+            }
+        }
+    }
+
+    // Project Highlight Section
+
+    #starter-projects {
+        h3,
+        p {
+            text-align: center;
+        }
+    }
+
+    .banner {
+        background-color: $ui-gray;
+        padding: 10px 0 50px;
+
+        h3 {
+            margin-top: 30px;
+        }
+    }
+
+    .project-list {
+        display: flex;
+        margin: 0 auto;
+        max-width: $cols9;
+        justify-content: space-between;
+    } 
+
+    .project-card {
+        transition: transform .25s ease;
+        margin: 10px;
+        border-radius: 7px;
+        background-color: $ui-white;
+        max-width: $cols3;
+        overflow: hidden;
+
+
+        img {
+            border-bottom: 2px solid $ui-white;
+            width: 100%;
+        }
+
+        p {
+            display: block;
+            margin: 15px 15px 20px;
+            color: $ui-blue;
+            font-weight: 500;
+        }
+
+        &:hover {
+            transform: scale(1.1, 1.1);
+            transition: transform .25s ease;
+            cursor: pointer; 
+
+            p {
+                color: $ui-blue-dark;
+            }
+        }
+    }
+
+    // Device Cards
+
+    .device-card {
+        display: inline-block;
+        margin: 0 10px;
+        max-width: $cols3;
+
+        img {
+            width: 100%;
+        }
+    }
+}
+
+// Responsive Behavior
+
+//4 columns
+@media only screen and (max-width: $mobile - 1) {
+    .wedo {
+        .inner {
+            margin: 0 auto;
+            width: calc(100% - 40px);
+        }
+        
+        .top-banner {
+            text-align: center;
+
+            .banner-photo {
+                display: none;
+            }
+        }
+
+        .project-list,
+        .columns3 {
+            display: block;
+        }
+
+        .project-card,
+        .columns3 .column {
+            display: block;
+            margin: 20px auto;
+            width: $cols6;
+        }
+    }
+}
+
+//6 columns
+@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+    .wedo {
+        .project-list,
+        .columns3 {
+            display: inline-block;
+        }
+
+        .top-banner {
+            text-align: center;
+
+            .banner-photo {
+                display: none;
+            }
+        }
+
+        .project-card,
+        .columns3 .column {
+            display: inline-block;
+            width: $cols6;
+        }
+    }
+}
+
+//8 columns
+@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+    #view {
+        text-align: center;
+    }
+
+    .wedo {
+        .top-banner {
+            text-align: left;
+
+            .banner-photo {
+                max-width: $cols3;
+            }
+        }
+
+        .inner {
+            margin: 0 auto;
+            width: $tablet;
+        }
+    }
+}

src/views/wedo2/l10n.json

@@ -1,21 +1,27 @@
 {
-    "wedo2.intro": "The LEGO® Education WeDo 2.0 is an introductory invention kit you can use to build your own interactive machines. You can snap together Scratch programming blocks to interact with your LEGO WeDo creations and add animations on the screen.",
+    "wedo2.headerText": "{wedo2Link} is an introductory invention kit you can use to build interactive robots and other creations. You can snap together Scratch programming blocks to interact with your LEGO WeDo creations and add animations and sounds.",
-    "wedo2.requirement": "The LEGO WeDo 2.0 extension is available for Mac OSX and Windows 10+.",
+    "wedo2.gettingStarted": "Getting Started",
-    "wedo2.getStarted": "Getting Started with LEGO WeDo 2.0",
+    "wedo2.connectingWedo2": "Connecting WeDo 2.0 to Scratch",
-    "wedo2.installTitle": "1. Install Device Manager",
+    "wedo2.useScratch3": "Use the {scratch3Link} editor.",
-    "wedo2.installText": "The Device Manager lets you connect WeDo 2.0 to Scratch using Bluetooth",
+    "wedo2.addExtension": "Add the WeDo 2.0 extension.",
-    "wedo2.downloadMac": "Download for Mac OSX",
+    "wedo2.thingsToTry": "Things to Try",
-    "wedo2.downloadWin": "Download for Windows 10+",
+    "wedo2.makeMotorMove": "Make a motor move",
-    "wedo2.setupTitle": "2. Setup & Help",
+    "wedo2.plugMotorIn": "Plug a motor into the WeDo.",
-    "wedo2.setupText": "Connect your WeDo 2.0 by following the steps in the <a href=\"/projects/editor/?tip_bar=ext2\">Tips Window</a>",
+    "wedo2.clickMotorBlock": "Find the {motorBlockText} block and click on it.",
-    "wedo2.createTitle": "3. Create",
+    "wedo2.motorBlockText": "\"turn motor on for 1 seconds\"",
-    "wedo2.createText": "Use the WeDo extension blocks to turn on lights, control motors, and make your project interactive",
+    "wedo2.starterProjects": "Starter Projects",
-    "wedo2.wedo2SetupInstructions": "WeDo 2.0 Setup Instructions",
+    "wedo2.starter1Title": "Wagging Dog",
-    "wedo2.wedo1SetupInstructions": "WeDo 1.0 Setup Instructions",
+    "wedo2.starter1Description": "Use a motor to make a spinning tail for your virtual pet.",
-    "wedo2.starterProjects": "WeDo 2.0 Starter Projects",
+    "wedo2.starter2Title": "Tilting Toad",
-    "wedo2.starterMotor": "Motor",
+    "wedo2.starter2Description": "Use the tilt sensor to make music with a toad.",
-    "wedo2.starterDistance": "Distance Sensor",
+    "wedo2.starter3Title": "Distance Dino",
-    "wedo2.starterTilt": "Tilt Sensor",
+    "wedo2.starter3Description": "Use the distance sensor to move the dinosaur.",
-    "wedo2.versionTitle": "Which version do you have?",
+    "wedo2.troubleshootingTitle": "Troubleshooting",
-    "wedo2.versionText": "You can also use Scratch to program the original LEGO WeDo (LEGO WeDo 1.0)."
+    "wedo2.closeScratchCopiesTitle": "Close other copies of Scratch",
-}
+    "wedo2.closeScratchCopiesText": "Only one copy of Scratch can connect with the WeDo 2.0 at a time. If you have Scratch open in other browser tabs, close it and try again.",
+    "wedo2.otherComputerConnectedTitle": "Make sure no other computer is connected to your WeDo 2.0",
+    "wedo2.otherComputerConnectedText": "Only one computer can be connected to an WeDo 2.0 at a time. If you have another computer connected to your WeDo 2.0, disconnect the WeDo 2.0 or close Scratch on that computer and try again.",
+    "wedo2.legacyInfoTitle": "Using Scratch 2.0?",
+    "wedo2.legacyInfoText": "Visit our page about {wedoLegacyLink}.",
+    "wedo2.legacyLinkText": "using LEGO WeDo with Scratch 2.0"
+  }

src/views/wedo2/wedo2.jsx

@@ -1,155 +1,212 @@
-const FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
+const injectIntl = require('react-intl').injectIntl;
+const intlShape = require('react-intl').intlShape;
 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');
+
+const ExtensionLanding = require('../../components/extension-landing/extension-landing.jsx');
+const ExtensionHeader = require('../../components/extension-landing/extension-header.jsx');
+const ExtensionRequirements = require('../../components/extension-landing/extension-requirements.jsx');
+const ExtensionSection = require('../../components/extension-landing/extension-section.jsx');
+const InstallScratchLink = require('../../components/extension-landing/install-scratch-link.jsx');
+const ProjectCard = require('../../components/extension-landing/project-card.jsx');
+
+const Steps = require('../../components/steps/steps.jsx');
+const Step = require('../../components/steps/step.jsx');
+
+require('../../components/extension-landing/extension-landing.scss');
 require('./wedo2.scss');
 
-const Wedo2 = () => (
+class Wedo2 extends ExtensionLanding {
-    <div className="wedo">
+    render () {
-        <div className="top-banner">
+        return (
-            <div className="inner">
+            <div className="extension-landing wedo2">
-                <div className="columns2">
+                <ExtensionHeader imageSrc="/images/wedo2/wedo2-illustration.png">
-                    <div className="banner-text">
+                    <FlexRow className="column extension-copy">
-                        <h2>LEGO WeDo 2.0 &amp; Scratch</h2>
+                        <h2><img src="/images/wedo2/wedo2.svg" />LEGO WeDo 2.0</h2>
-                        <p className="intro">
+                        <FormattedMessage
-                            <FormattedMessage id="wedo2.intro" />
+                            id="wedo2.headerText"
-                        </p>
+                            values={{
-                    </div>
+                                wedo2Link: (
-                    <div className="banner-photo">
+                                    <a
-                        <img src="/images/wedo/wedo-milo.png" />
+                                        href="https://education.lego.com/en-us/elementary/intro/wedo2"
-                    </div>
+                                        rel="noopener noreferrer"
-                </div>
+                                        target="_blank"
+                                    >
+                                                LEGO Education WeDo 2.0
+                                    </a>
+                                )
+                            }}
+                        />
+                    </FlexRow>
+                    <ExtensionRequirements>
+                        <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>
+                    </ExtensionRequirements>
+                </ExtensionHeader>
+                <OSChooser
+                    currentOS={this.state.OS}
+                    handleSetOS={this.onSetOS}
+                />
+                <InstallScratchLink
+                    currentOS={this.state.OS}
+                />
+                <ExtensionSection className="getting-started">
+                    <h2><FormattedMessage id="wedo2.gettingStarted" /></h2>
+                    <FlexRow className="column getting-started-section">
+                        <h3><FormattedMessage id="wedo2.connectingWedo2" /></h3>
+                        <Steps>
+                            <Step number={1}>
+                                <div className="step-image">
+                                    <img
+                                        className="screenshot"
+                                        src="/images/wedo2/wedo2-connect-1.png"
+                                    />
+                                </div>
+                                <p>
+                                    <FormattedMessage
+                                        id="wedo2.useScratch3"
+                                        values={{
+                                            scratch3Link: (
+                                                <a
+                                                    href="https://beta.scratch.mit.edu/"
+                                                    rel="noopener noreferrer"
+                                                    target="_blank"
+                                                >
+                                                            Scratch 3.0
+                                                </a>
+                                            )
+                                        }}
+                                    />
+                                </p>
+                            </Step>
+                            <Step number={2}>
+                                <div className="step-image">
+                                    <img
+                                        className="screenshot"
+                                        src="/images/wedo2/wedo2-connect-2.png"
+                                    />
+                                </div>
+                                <p><FormattedMessage id="wedo2.addExtension" /></p>
+                            </Step>
+                        </Steps>
+                    </FlexRow>
+                </ExtensionSection>
+                <ExtensionSection className="blue things-to-try">
+                    <h2><FormattedMessage id="wedo2.thingsToTry" /></h2>
+                    <h3><FormattedMessage id="wedo2.makeMotorMove" /></h3>
+                    <Steps>
+                        <Step
+                            compact
+                            number={1}
+                        >
+                            <span className="step-description">
+                                <FormattedMessage id="wedo2.plugMotorIn" />
+                            </span>
+                            <div className="step-image">
+                                <img src="/images/wedo2/wedo2-motor.png" />
+                            </div>
+                        </Step>
+                        <Step
+                            compact
+                            number={2}
+                        >
+                            <span className="step-description">
+                                <FormattedMessage
+                                    id="wedo2.clickMotorBlock"
+                                    values={{
+                                        motorBlockText: (
+                                            <strong><FormattedMessage id="wedo2.motorBlockText" /></strong>
+                                        )
+                                    }}
+                                />
+                            </span>
+                            <div className="step-image">
+                                <img src="/images/wedo2/wedo2-motor-turn-block.png" />
+                            </div>
+                        </Step>
+                    </Steps>
+                    <hr />
+                    <h3><FormattedMessage id="wedo2.starterProjects" /></h3>
+                    <Steps>
+                        <ProjectCard
+                            cardUrl="https://beta.scratch.mit.edu/#239284992"
+                            description={this.props.intl.formatMessage({id: 'wedo2.starter1Description'})}
+                            imageSrc="/images/wedo2/wedo2-starter1.png"
+                            title={this.props.intl.formatMessage({id: 'wedo2.starter1Title'})}
+                        />
+                        <ProjectCard
+                            cardUrl="https://beta.scratch.mit.edu/#239284997"
+                            description={this.props.intl.formatMessage({id: 'wedo2.starter2Description'})}
+                            imageSrc="/images/wedo2/wedo2-starter2.png"
+                            title={this.props.intl.formatMessage({id: 'wedo2.starter2Title'})}
+                        />
+                        <ProjectCard
+                            cardUrl="https://beta.scratch.mit.edu/#239285001"
+                            description={this.props.intl.formatMessage({id: 'wedo2.starter3Description'})}
+                            imageSrc="/images/wedo2/wedo2-starter3.png"
+                            title={this.props.intl.formatMessage({id: 'wedo2.starter3Title'})}
+                        />
+                    </Steps>
+                </ExtensionSection>
+                <ExtensionSection className="faq">
+                    <h2><FormattedMessage id="wedo2.troubleshootingTitle" /></h2>
+                    <h3 className="faq-title"><FormattedMessage id="wedo2.closeScratchCopiesTitle" /></h3>
+                    <p>
+                        <FormattedMessage id="wedo2.closeScratchCopiesText" />
+                    </p>
+                    <h3 className="faq-title"><FormattedMessage id="wedo2.otherComputerConnectedTitle" /></h3>
+                    <p>
+                        <FormattedMessage id="wedo2.otherComputerConnectedText" />
+                    </p>
+                    <h3 className="faq-title"><FormattedMessage id="wedo2.legacyInfoTitle" /></h3>
+                    <p>
+                        <FormattedMessage
+                            id="wedo2.legacyInfoText"
+                            values={{
+                                wedoLegacyLink: (
+                                    <a
+                                        href="/wedo-legacy"
+                                        rel="noopener noreferrer"
+                                        target="_blank"
+                                    >
+                                        <FormattedMessage id="wedo2.legacyLinkText" />
+                                    </a>
+                                )
+                            }}
+                        />
+                    </p>
+                </ExtensionSection>
             </div>
-        </div>
+        );
+    }
+}
 
-        <div className="inner">
+Wedo2.propTypes = {
-            <section id="getting-started">
+    intl: intlShape.isRequired
-                <h3>
+};
-                    <FormattedMessage id="wedo2.getStarted" />
-                </h3>
-                <p className="callout">
-                    <FormattedMessage id="wedo2.requirement" />
-                </p>
-                <div className="columns3">
-                    <div className="column">
-                        <img src="/images/wedo/download-device-manager.png" />
-                        <h4>
-                            <FormattedMessage id="wedo2.installTitle" />
-                        </h4>
-                        <p>
-                            <FormattedHTMLMessage id="wedo2.installText" />
-                            <br />
-                            <a href="https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1084869222&mt=12">
-                                <FormattedMessage id="wedo2.downloadMac" />
-                            </a>
-                            <br />
-                            <a href="https://downloads.scratch.mit.edu/device-manager/ScratchDeviceManager-1.1.0.exe">
-                                <FormattedMessage id="wedo2.downloadWin" />
-                            </a>
-                        </p>
-                    </div>
-                    <div className="column">
-                        <img src="/images/wedo/set-up.png" />
-                        <h4>
-                            <FormattedMessage id="wedo2.setupTitle" />
-                        </h4>
-                        <p>
-                            <FormattedHTMLMessage id="wedo2.setupText" />
-                        </p>
-                    </div>
-                    <div className="column">
-                        <img src="/images/wedo/create-and-share.png" />
-                        <h4>
-                            <FormattedMessage id="wedo2.createTitle" />
-                        </h4>
-                        <p>
-                            <FormattedMessage id="wedo2.createText" />
-                        </p>
-                    </div>
-                </div>
-            </section>
-        </div>
 
-        <div className="banner">
+const WrappedWedo2 = injectIntl(Wedo2);
-            <div
-                className="inner"
-                id="starter-projects"
-            >
-                <h3>
-                    <FormattedMessage id="wedo2.starterProjects" />
-                </h3>
-                <div className="project-list">
-                    <a href="/projects/101037564/?tip_bar=ext2#editor">
-                        <div className="project-card">
-                            <img
-                                alt=""
-                                src="/images/wedo/motor.png"
-                            />
-                            <p>
-                                <FormattedMessage id="wedo2.starterMotor" />
-                            </p>
-                        </div>
-                    </a>
-                    <a href="/projects/101038249/?tip_bar=ext2#editor">
-                        <div className="project-card">
-                            <img
-                                alt=""
-                                src="/images/wedo/distance.png"
-                            />
-                            <p>
-                                <FormattedMessage id="wedo2.starterDistance" />
-                            </p>
-                        </div>
-                    </a>
-                    <a href="/projects/101033190/?tip_bar=ext2#editor">
-                        <div className="project-card">
-                            <img
-                                alt=""
-                                src="/images/wedo/tilt.png"
-                            />
-                            <p>
-                                <FormattedMessage id="wedo2.starterTilt" />
-                            </p>
-                        </div>
-                    </a>
-                </div>
-            </div>
-        </div>
 
-        <div className="inner">
+render(<Page><WrappedWedo2 /></Page>, document.getElementById('app'));
-            <section>
-                <h3>
-                    <FormattedMessage id="wedo2.versionTitle" />
-                </h3>
-                <p>
-                    <FormattedMessage id="wedo2.versionText" />
-                </p>
-                <div className="device-card">
-                    <h4>LEGO WeDo 1.0 Hub</h4>
-                    <img
-                        alt="LEGO WeDo 1.0 Hub"
-                        src="/images/wedo/wedo1.png"
-                    />
-                    <a href="/projects/editor/?tip_bar=ext1">
-                        <FormattedMessage id="wedo2.wedo1SetupInstructions" />
-                    </a>
-                </div>
-                <div className="device-card">
-                    <h4>LEGO WeDo 2.0 Hub</h4>
-                    <img
-                        alt="LEGO WeDo 2.0 Hub"
-                        src="/images/wedo/wedo2.png"
-                    />
-                    <a href="/projects/editor/?tip_bar=ext2">
-                        <FormattedMessage id="wedo2.wedo2SetupInstructions" />
-                    </a>
-                </div>
-            </section>
-        </div>
-    </div>
-);
-
-render(<Page><Wedo2 /></Page>, document.getElementById('app'));

src/views/wedo2/wedo2.scss

@@ -1,232 +1,8 @@
 @import "../../colors";
-@import "../../frameless";
 
-#view {
+.wedo2 {
-    padding: 0;
+    .extension-header {
-}
+        background-color: $ui-coral;
-
+        background-image: url("/images/wedo2/wedo2-pattern.svg");
-.wedo {
-    h3,
-    h4 {
-        margin: 1.5em 0 .3em;
-    }
-
-    h2 {
-        margin: .75em 0 .3em;
-    }
-
-    p {
-        margin: .25em 0 1em;
-
-        &.intro {
-            margin-bottom: 1em;
-        }
-
-        &.callout {
-            padding: .75em 1em;
-            text-align: center;
-        }
-    }
-
-    .top-banner {
-        margin-bottom: 50px;
-        background-color: $ui-blue;
-        padding: 50px 0;
-        width: 100%;
-
-        h2 {
-            color: $ui-white;
-        }
-
-        p {
-            color: $ui-white;
-        }
-
-        .columns2 {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .banner-text {
-            max-width: $cols7;
-        }
-
-        .banner-photo {
-            max-width: $cols4;
-
-            img {
-                width: 100%;
-            }
-        }
-    } 
-
-    section {
-        margin-bottom: 50px;
-        text-align: center;
-    }
-
-    // Getting Started Section
-
-    .columns3 {
-        display: flex;
-        justify-content: space-between;
-
-        .column { 
-            margin: 15px;
-            max-width: $cols4;
-
-            img {
-                margin: 0 auto;
-                width: 80%;
-            }
-        }
-    }
-
-    // Project Highlight Section
-
-    #starter-projects {
-        h3,
-        p {
-            text-align: center;
-        }
-    }
-
-    .banner {
-        background-color: $ui-gray;
-        padding: 10px 0 50px;
-
-        h3 {
-            margin-top: 30px;
-        }
-    }
-
-    .project-list {
-        display: flex;
-        margin: 0 auto;
-        max-width: $cols9;
-        justify-content: space-between;
-    } 
-
-    .project-card {
-        transition: transform .25s ease;
-        margin: 10px;
-        border-radius: 7px;
-        background-color: $ui-white;
-        max-width: $cols3;
-        overflow: hidden;
-
-
-        img {
-            border-bottom: 2px solid $ui-white;
-            width: 100%;
-        }
-
-        p {
-            display: block;
-            margin: 15px 15px 20px;
-            color: $ui-blue;
-            font-weight: 500;
-        }
-
-        &:hover {
-            transform: scale(1.1, 1.1);
-            transition: transform .25s ease;
-            cursor: pointer; 
-
-            p {
-                color: $ui-blue-dark;
-            }
-        }
-    }
-
-    // Device Cards
-
-    .device-card {
-        display: inline-block;
-        margin: 0 10px;
-        max-width: $cols3;
-
-        img {
-            width: 100%;
-        }
-    }
-}
-
-// Responsive Behavior
-
-//4 columns
-@media only screen and (max-width: $mobile - 1) {
-    .wedo {
-        .inner {
-            margin: 0 auto;
-            width: calc(100% - 40px);
-        }
-        
-        .top-banner {
-            text-align: center;
-
-            .banner-photo {
-                display: none;
-            }
-        }
-
-        .project-list,
-        .columns3 {
-            display: block;
-        }
-
-        .project-card,
-        .columns3 .column {
-            display: block;
-            margin: 20px auto;
-            width: $cols6;
-        }
-    }
-}
-
-//6 columns
-@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
-    .wedo {
-        .project-list,
-        .columns3 {
-            display: inline-block;
-        }
-
-        .top-banner {
-            text-align: center;
-
-            .banner-photo {
-                display: none;
-            }
-        }
-
-        .project-card,
-        .columns3 .column {
-            display: inline-block;
-            width: $cols6;
-        }
-    }
-}
-
-//8 columns
-@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
-    #view {
-        text-align: center;
-    }
-
-    .wedo {
-        .top-banner {
-            text-align: left;
-
-            .banner-photo {
-                max-width: $cols3;
-            }
-        }
-
-        .inner {
-            margin: 0 auto;
-            width: $tablet;
-        }
     }
 }

static/images/wedo2/wedo2.svg

@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
+    <title>wedo2-block-icon</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <polygon id="path-1" points="0 18.9025641 31.0588235 18.9025641 31.0588235 0.424182751 0 0.424182751"></polygon>
+    </defs>
+    <g id="wedo2-block-icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="WeDo" transform="translate(4.000000, 10.000000)">
+            <path d="M19.5128913,1.16923077 L18.7825384,1.16923077 C18.4644208,1.16923077 18.2065384,1.38281026 18.2065384,1.6478359 L18.2065384,2.72820513 L20.0888913,2.72820513 L20.0888913,1.6478359 C20.0888913,1.38281026 19.831009,1.16923077 19.5128913,1.16923077" id="Fill-1" fill="#7C87A5"></path>
+            <path d="M20.9099405,1.16923077 L20.1795875,1.16923077 C19.8614699,1.16923077 19.6035875,1.38281026 19.6035875,1.6478359 L19.6035875,2.72820513 L21.4859405,2.72820513 L21.4859405,1.6478359 C21.4859405,1.38281026 21.2280581,1.16923077 20.9099405,1.16923077 Z" id="Stroke-3"></path>
+            <path d="M5.54051765,1.16923077 L4.81204706,1.16923077 C4.49204706,1.16923077 4.23604706,1.38281026 4.23604706,1.6478359 L4.23604706,2.72820513 L6.1184,2.72820513 L6.1184,1.6478359 C6.1184,1.38281026 5.86051765,1.16923077 5.54051765,1.16923077" id="Fill-5" fill="#7C87A5"></path>
+            <path d="M6.93756678,1.16923077 L6.20909619,1.16923077 C5.88909619,1.16923077 5.63309619,1.38281026 5.63309619,1.6478359 L5.63309619,2.72820513 L7.51544913,2.72820513 L7.51544913,1.6478359 C7.51544913,1.38281026 7.25756678,1.16923077 6.93756678,1.16923077 Z" id="Stroke-7"></path>
+            <path d="M22.3051073,1.16923077 L21.5747543,1.16923077 C21.2566367,1.16923077 21.0006367,1.38281026 21.0006367,1.6478359 L21.0006367,2.72820513 L22.8829896,2.72820513 L22.8829896,1.6478359 C22.8829896,1.38281026 22.6232249,1.16923077 22.3051073,1.16923077" id="Fill-9" fill="#7C87A5"></path>
+            <path d="M23.7021564,1.16923077 L22.9718035,1.16923077 C22.6536858,1.16923077 22.3976858,1.38281026 22.3976858,1.6478359 L22.3976858,2.72820513 L24.2800388,2.72820513 L24.2800388,1.6478359 C24.2800388,1.38281026 24.020274,1.16923077 23.7021564,1.16923077 Z" id="Stroke-11"></path>
+            <path d="M25.1010879,1.16923077 L24.3707349,1.16923077 C24.0526173,1.16923077 23.7947349,1.38281026 23.7947349,1.6478359 L23.7947349,2.72820513 L25.6770879,2.72820513 L25.6770879,1.6478359 C25.6770879,1.38281026 25.4192055,1.16923077 25.1010879,1.16923077" id="Fill-13" fill="#7C87A5"></path>
+            <path d="M26.498137,1.16923077 L25.7677841,1.16923077 C25.4496664,1.16923077 25.1917841,1.38281026 25.1917841,1.6478359 L25.1917841,2.72820513 L27.074137,2.72820513 L27.074137,1.6478359 C27.074137,1.38281026 26.8162547,1.16923077 26.498137,1.16923077 Z" id="Stroke-15"></path>
+            <path d="M13.9246948,1.16923077 L13.1943419,1.16923077 C12.8762242,1.16923077 12.6183419,1.38281026 12.6183419,1.6478359 L12.6183419,2.72820513 L14.5006948,2.72820513 L14.5006948,1.6478359 C14.5006948,1.38281026 14.2428125,1.16923077 13.9246948,1.16923077" id="Fill-17" fill="#7C87A5"></path>
+            <path d="M15.3217439,1.16923077 L14.591391,1.16923077 C14.2732734,1.16923077 14.015391,1.38281026 14.015391,1.6478359 L14.015391,2.72820513 L15.8977439,2.72820513 L15.8977439,1.6478359 C15.8977439,1.38281026 15.6398616,1.16923077 15.3217439,1.16923077 Z" id="Stroke-19"></path>
+            <path d="M16.7169107,1.16923077 L15.9865578,1.16923077 C15.6684401,1.16923077 15.4124401,1.38281026 15.4124401,1.6478359 L15.4124401,2.72820513 L17.2947931,2.72820513 L17.2947931,1.6478359 C17.2947931,1.38281026 17.0350284,1.16923077 16.7169107,1.16923077" id="Fill-21" fill="#7C87A5"></path>
+            <path d="M18.1139599,1.16923077 L17.3836069,1.16923077 C17.0654893,1.16923077 16.8094893,1.38281026 16.8094893,1.6478359 L16.8094893,2.72820513 L18.6918422,2.72820513 L18.6918422,1.6478359 C18.6918422,1.38281026 18.4320775,1.16923077 18.1139599,1.16923077 Z" id="Stroke-23"></path>
+            <path d="M11.1287142,1.16923077 L10.4002436,1.16923077 C10.0802436,1.16923077 9.8242436,1.38281026 9.8242436,1.6478359 L9.8242436,2.72820513 L11.7065965,2.72820513 L11.7065965,1.6478359 C11.7065965,1.38281026 11.4487142,1.16923077 11.1287142,1.16923077" id="Fill-25" fill="#7C87A5"></path>
+            <path d="M12.5257633,1.16923077 L11.7972927,1.16923077 C11.4772927,1.16923077 11.2212927,1.38281026 11.2212927,1.6478359 L11.2212927,2.72820513 L13.1036457,2.72820513 L13.1036457,1.6478359 C13.1036457,1.38281026 12.8457633,1.16923077 12.5257633,1.16923077 Z" id="Stroke-27"></path>
+            <path d="M8.33461592,1.16923077 L7.60426298,1.16923077 C7.28614533,1.16923077 7.03014533,1.38281026 7.03014533,1.6478359 L7.03014533,2.72820513 L8.91249827,2.72820513 L8.91249827,1.6478359 C8.91249827,1.38281026 8.65273356,1.16923077 8.33461592,1.16923077" id="Fill-29" fill="#7C87A5"></path>
+            <path d="M9.73166505,1.16923077 L9.00131211,1.16923077 C8.68319446,1.16923077 8.42719446,1.38281026 8.42719446,1.6478359 L8.42719446,2.72820513 L10.3095474,2.72820513 L10.3095474,1.6478359 C10.3095474,1.38281026 10.0497827,1.16923077 9.73166505,1.16923077 Z" id="Stroke-31"></path>
+            <path d="M27.8933038,1.16923077 L27.1629509,1.16923077 C26.8448332,1.16923077 26.5888332,1.38281026 26.5888332,1.6478359 L26.5888332,2.72820513 L28.4711862,2.72820513 L28.4711862,1.6478359 C28.4711862,1.38281026 28.2114215,1.16923077 27.8933038,1.16923077" id="Fill-33" fill="#7C87A5"></path>
+            <path d="M29.2903529,1.16923077 L28.56,1.16923077 C28.2418824,1.16923077 27.9858824,1.38281026 27.9858824,1.6478359 L27.9858824,2.72820513 L29.8682353,2.72820513 L29.8682353,1.6478359 C29.8682353,1.38281026 29.6084706,1.16923077 29.2903529,1.16923077 Z" id="Stroke-35"></path>
+            <path d="M29.6470588,18.4065268 L11.7647059,18.4065268 L11.7647059,2.53333333 L29.6470588,2.53333333 C30.1665882,2.53333333 30.5882353,2.97778275 30.5882353,3.52540793 L30.5882353,17.4144522 C30.5882353,17.9620774 30.1665882,18.4065268 29.6470588,18.4065268" id="Fill-37" fill="#FFFFFF"></path>
+            <path d="M29.6470588,18.4065268 L11.7647059,18.4065268 L11.7647059,2.53333333 L29.6470588,2.53333333 C30.1665882,2.53333333 30.5882353,2.97778275 30.5882353,3.52540793 L30.5882353,17.4144522 C30.5882353,17.9620774 30.1665882,18.4065268 29.6470588,18.4065268 Z" id="Stroke-39" stroke="#7C87A5" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path d="M11.7647059,18.4065268 L1.41176471,18.4065268 C0.892235294,18.4065268 0.470588235,17.9620774 0.470588235,17.4144522 L0.470588235,6.5016317 C0.470588235,4.311131 2.15717647,2.53333333 4.23529412,2.53333333 L19.2941176,2.53333333 L15.5294118,2.53333333 C13.4512941,2.53333333 11.7647059,4.311131 11.7647059,6.5016317 L11.7647059,18.4065268 Z" id="Fill-41" fill="#FFFFFF"></path>
+            <path d="M11.7647059,18.4065268 L1.41176471,18.4065268 C0.892235294,18.4065268 0.470588235,17.9620774 0.470588235,17.4144522 L0.470588235,6.5016317 C0.470588235,4.311131 2.15717647,2.53333333 4.23529412,2.53333333 L19.2941176,2.53333333 L15.5294118,2.53333333 C13.4512941,2.53333333 11.7647059,4.311131 11.7647059,6.5016317 L11.7647059,18.4065268 Z" id="Stroke-43" stroke="#7C87A5" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path d="M8.94117647,2.53333333 L7.05882353,2.53333333 C5.50023529,2.53333333 4.23529412,3.86668159 4.23529412,5.50955711 L4.23529412,7.49569044 C4.23529412,8.04331562 4.65694118,8.48776503 5.17647059,8.48776503 L8,8.48776503 C8.51952941,8.48776503 8.94117647,8.04331562 8.94117647,7.49569044 L8.94117647,5.50955711 C8.94117647,3.86668159 10.2061176,2.53333333 11.7647059,2.53333333 L12.7058824,2.53333333 L8.94117647,2.53333333 Z" id="Fill-45" fill="#4C97FF"></path>
+            <path d="M8.94117647,2.53333333 L7.05882353,2.53333333 C5.50023529,2.53333333 4.23529412,3.86668159 4.23529412,5.50955711 L4.23529412,7.49569044 C4.23529412,8.04331562 4.65694118,8.48776503 5.17647059,8.48776503 L8,8.48776503 C8.51952941,8.48776503 8.94117647,8.04331562 8.94117647,7.49569044 L8.94117647,5.50955711 C8.94117647,3.86668159 10.2061176,2.53333333 11.7647059,2.53333333 L12.7058824,2.53333333 L8.94117647,2.53333333 Z" id="Stroke-47" stroke="#3D79CC" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round"></path>
+            <polyline id="Stroke-50" stroke="#7C87A5" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round" points="0.470588235 10.4738984 28.4310588 10.4738984 30.5882353 13.448138"></polyline>
+            <path d="M11.7647059,18.4065268 L1.41176471,18.4065268 C0.892235294,18.4065268 0.470588235,17.9620774 0.470588235,17.4144522 L0.470588235,6.5016317 C0.470588235,4.311131 2.15717647,2.53333333 4.23529412,2.53333333 L19.2941176,2.53333333 L15.5294118,2.53333333 C13.4512941,2.53333333 11.7647059,4.311131 11.7647059,6.5016317 L11.7647059,18.4065268 Z" id="Stroke-52" stroke="#7C87A5" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path d="M17.3069176,8.96410256 L16.5765647,8.96410256 C16.2584471,8.96410256 16.0005647,9.17768205 16.0005647,9.44270769 L16.0005647,10.5230769 L17.8829176,10.5230769 L17.8829176,9.44270769 C17.8829176,9.17768205 17.6250353,8.96410256 17.3069176,8.96410256" id="Fill-54" fill="#7C87A5"></path>
+            <path d="M17.3069176,8.96410256 L16.5765647,8.96410256 C16.2584471,8.96410256 16.0005647,9.17768205 16.0005647,9.44270769 L16.0005647,10.5230769 L17.8829176,10.5230769 L17.8829176,9.44270769 C17.8829176,9.17768205 17.6250353,8.96410256 17.3069176,8.96410256 Z" id="Stroke-56"></path>
+            <path d="M20.1782588,8.96410256 L19.4497882,8.96410256 C19.1297882,8.96410256 18.8737882,9.17768205 18.8737882,9.44270769 L18.8737882,10.5230769 L20.7561412,10.5230769 L20.7561412,9.44270769 C20.7561412,9.17768205 20.4982588,8.96410256 20.1782588,8.96410256" id="Fill-58" fill="#7C87A5"></path>
+            <path d="M20.1782588,8.96410256 L19.4497882,8.96410256 C19.1297882,8.96410256 18.8737882,9.17768205 18.8737882,9.44270769 L18.8737882,10.5230769 L20.7561412,10.5230769 L20.7561412,9.44270769 C20.7561412,9.17768205 20.4982588,8.96410256 20.1782588,8.96410256 Z" id="Stroke-60"></path>
+            <path d="M23.0514824,8.96410256 L22.3211294,8.96410256 C22.0030118,8.96410256 21.7451294,9.17768205 21.7451294,9.44270769 L21.7451294,10.5230769 L23.6274824,10.5230769 L23.6274824,9.44270769 C23.6274824,9.17768205 23.3696,8.96410256 23.0514824,8.96410256" id="Fill-62" fill="#7C87A5"></path>
+            <path d="M23.0514824,8.96410256 L22.3211294,8.96410256 C22.0030118,8.96410256 21.7451294,9.17768205 21.7451294,9.44270769 L21.7451294,10.5230769 L23.6274824,10.5230769 L23.6274824,9.44270769 C23.6274824,9.17768205 23.3696,8.96410256 23.0514824,8.96410256 Z" id="Stroke-64"></path>
+            <path d="M25.9228235,8.96410256 L25.1943529,8.96410256 C24.8743529,8.96410256 24.6183529,9.17768205 24.6183529,9.44270769 L24.6183529,10.5230769 L26.5007059,10.5230769 L26.5007059,9.44270769 C26.5007059,9.17768205 26.2428235,8.96410256 25.9228235,8.96410256" id="Fill-66" fill="#7C87A5"></path>
+            <path d="M25.9228235,8.96410256 L25.1943529,8.96410256 C24.8743529,8.96410256 24.6183529,9.17768205 24.6183529,9.44270769 L24.6183529,10.5230769 L26.5007059,10.5230769 L26.5007059,9.44270769 C26.5007059,9.17768205 26.2428235,8.96410256 25.9228235,8.96410256 Z" id="Stroke-68"></path>
+            <path d="M29.6470588,18.4065268 L11.7647059,18.4065268 L11.7647059,10.4699301 L28.4310588,10.4699301 L30.5882353,13.448138 L30.5882353,17.4144522 C30.5882353,17.9620774 30.1665882,18.4065268 29.6470588,18.4065268" id="Fill-70" fill="#E6E7E8"></path>
+            <path d="M29.6470588,18.4065268 L11.7647059,18.4065268 L11.7647059,10.4699301 L28.4310588,10.4699301 L30.5882353,13.448138 L30.5882353,17.4144522 C30.5882353,17.9620774 30.1665882,18.4065268 29.6470588,18.4065268 Z" id="Stroke-72" stroke="#7C87A5" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path d="M11.7647059,18.4065268 L1.41176471,18.4065268 C0.892235294,18.4065268 0.470588235,17.9620774 0.470588235,17.4144522 L0.470588235,10.4699301 L11.7647059,10.4699301 L11.7647059,18.4065268 Z" id="Fill-74" fill="#E6E7E8"></path>
+            <path d="M11.7647059,18.4065268 L1.41176471,18.4065268 C0.892235294,18.4065268 0.470588235,17.9620774 0.470588235,17.4144522 L0.470588235,10.4699301 L11.7647059,10.4699301 L11.7647059,18.4065268 Z" id="Stroke-76" stroke="#7C87A5" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round"></path>
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <g id="Clip-79"></g>
+            <polygon id="Fill-78" fill="#E6E7E8" mask="url(#mask-2)" points="15.5294118 14.4382284 26.8235294 14.4382284 26.8235294 10.4699301 15.5294118 10.4699301"></polygon>
+            <polygon id="Stroke-80" stroke="#7C87A5" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round" mask="url(#mask-2)" points="15.5294118 14.4382284 26.8235294 14.4382284 26.8235294 10.4699301 15.5294118 10.4699301"></polygon>
+            <path d="M28.432,10.4738984 L30.5891765,7.68021632" id="Stroke-81" stroke="#7C87A5" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round" mask="url(#mask-2)"></path>
+        </g>
+    </g>
+</svg>