Add preview faq page

Implements #1711

src/routes.json

@@ -191,6 +191,13 @@
         "view": "microworldshomepage/microworldshomepage",
         "title": "Microworlds"
     },
+    {
+        "name": "preview-faq",
+        "pattern": "^/preview-faq/?$",
+        "routeAlias": "/preview-faq/?$",
+        "view": "preview-faq/preview-faq",
+        "title": "Scratch 3.0 Preview FAQ"
+    },
     {
         "name": "privacypolicy",
         "pattern": "^/privacy_policy/?$",

src/views/preview-faq/l10n.json

+{
+    "preview-faq.title": "Scratch 3.0 Preview FAQ"
+}

src/views/preview-faq/preview-faq.jsx

+var injectIntl = require('react-intl').injectIntl;
+var React = require('react');
+
+var Box = require('../../components/box/box.jsx');
+var InformationPage = require('../../components/informationpage/informationpage.jsx');
+var Page = require('../../components/page/www/page.jsx');
+var render = require('../../lib/render.jsx');
+
+require('./preview-faq.scss');
+
+var PreviewFaq = injectIntl(React.createClass({
+    type: 'PreviewFaq',
+    render: function () {
+        return (
+            <InformationPage title={this.props.intl.formatMessage({id: 'preview-faq.title'})}>
+                <div className="inner">
+                    <Box
+                        title={''}
+                    >
+                        <iframe
+                            className="preview-faq-iframe"
+                            src="https://docs.google.com/document/d/e/2PACX-1vQZFrpOagYqEwcrBBCplIomiyguPAodIJVnCq9Sr11WDI_aa2b-JtDWak-Aiu-cwWobTXftRMF6wBbd/pub?embedded=true"
+                        ></iframe>
+                    </Box>
+                </div>
+            </InformationPage>
+        );
+    }
+}));
+
+render(<Page><PreviewFaq /></Page>, document.getElementById('app'));

src/views/preview-faq/preview-faq.scss

+@import "../../colors";
+@import "../../frameless";
+
+#view {
+    padding: 0;
+}
+
+.box > .box-content {
+    padding: 0;
+}
+
+.preview-faq-iframe {
+    border: none;
+    width: $cols12; // for the box padding
+    height: 450px;
+}
+
+//4 columns
+@media only screen and (max-width: $mobile - 1) {
+    .preview-faq-iframe {
+        width: $cols4;
+    }
+}
+
+//6 columns
+@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+    .preview-faq-iframe {
+        width: $cols6;
+    }
+}
+
+//8 columns
+@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+    .preview-faq-iframe {
+        width: $cols8;
+    }
+}