Merge pull request #4643 from LLK/hotfix/sec-page

[Hotfix/Master] Add the SEC page

src/routes.json

@@ -254,6 +254,14 @@
         "view": "search/search",
         "title": "Search"
     },
+    {
+        "name": "sec",
+        "pattern": "^/sec/?(\\?.*)?$",
+        "routeAlias": "/sec/?",
+        "view": "sec/sec",
+        "title": "Scratch Education Collaborative",
+        "viewportWidth": "device-width"
+    },
     {
         "name": "splash",
         "pattern": "^/?$",

src/views/sec/l10n.json

+{
+  "sec.title": "Scratch Education Collaborative",
+  "sec.intro": "A global network of organizations supporting creative coding",
+  "sec.projectsTitle": "Overview",
+  "sec.eligibilityTitle": "Eligibility",
+  "sec.applyTitle": "How do I apply?",
+  "sec.subscribe": "To receive updates about resources, events, and ideas for supporting families and educators using Scratch, {subscribeLink}",
+  "sec.subscribeCallToAction": "sign up for our mailing list",
+  "sec.applyDeadline": "The deadline for applying to the Scratch Education Collaborative is January 10th, 2021",
+  "sec.applyButton": "Click here to apply",
+  "sec.projectsIntro": "The Scratch Foundation is launching the Scratch Education Collaborative (SEC), to bring together organizations committed to supporting creative coding experiences with a focus on educators, students, and communities historically underrepresented in computing.",
+  "sec.projectsIntro2": "In 2021, during the pilot year of the SEC, 5 organizations from across the globe will be selected to share their work, learn from one another, and help to develop best practices and examples for implementing {culturallySustainingLink} creative computing with Scratch.",
+  "sec.culturallySustaining": "culturally sustaining",
+  "sec.expectationsFromSec": "What participating organizations can expect from the SEC",
+  "sec.expectationsFromSecPoint1": "Opportunities to connect with and learn from peer organizations and thought leaders around the globe through virtual workshops",
+  "sec.expectationsFromSecPoint2": "Support in developing and promoting equity-centered creative coding resources, events, and workshops using Scratch",
+  "sec.expectationsFromSecPoint3": "Opportunities to connect with and learn from the Scratch Team through workshops and virtual office hours",
+  "sec.expectationsFromSecPoint4": "Promotion of the organization’s work and impact through Scratch Team social-channels, websites, and newsletters",
+  "sec.expectationsFromOrgs": "What the SEC expects of participating organizations",
+  "sec.expectationsFromOrgsPoint1": "Participate in 4-6 virtual workshops or meetings over the course of the year",
+  "sec.expectationsFromOrgsPoint2": "Support the creation of culturally sustaining Scratch creative coding resources for your community",
+  "sec.expectationsFromOrgsPoint3": "Host at least one event, tutorial, or professional development activity for your community in 2021",
+  "sec.expectationsFromOrgsPoint4": "Share best-practices, learnings, and challenges back with the Scratch Foundation and SEC peer organizations",
+  "sec.eligibilityPoint1": "Participants must be a non-profit organization, public school, school district, university, college, or government entity",
+  "sec.eligibilityPoint2": "Organizations must be part-of and work with communities historically underrepresented in computing",
+  "sec.eligibilityPoint3": "Must be able to dedicate at least one staff person as point of contact for the program",
+  "sec.eligibilityPrompt": "Wondering if your organization might be a good fit for the pilot year of the Scratch Education Collaborative? {link} to find out more.",
+  "sec.eligibilityPromptLink": "Read the FAQ"
+ }

src/views/sec/sec.jsx

+const FormattedMessage = require('react-intl').FormattedMessage;
+const React = require('react');
+
+const FlexRow = require('../../components/flex-row/flex-row.jsx');
+const SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
+const TitleBanner = require('../../components/title-banner/title-banner.jsx');
+
+const render = require('../../lib/render.jsx');
+const Page = require('../../components/page/www/page.jsx');
+
+require('./sec.scss');
+
+const EducationCollaborative = () => (
+    <div className="education-collaborative">
+        <TitleBanner className="masthead">
+            <div className="inner">
+                <FlexRow className="masthead-info uneven">
+                    <div className="long">
+                        <h1 className="title-banner-h1">
+                            <FormattedMessage id="sec.title" />
+                        </h1>
+                        <p className="title-banner-p intro">
+                            <FormattedMessage
+                                id="sec.intro"
+                            />
+                        </p>
+                    </div>
+                    <img
+                        alt=""
+                        className="short"
+                        src="/images/sec/SEC-Top-img.svg"
+                    />
+                </FlexRow>
+            </div>
+        </TitleBanner>
+
+        <div className="inner">
+            <section id="projects">
+                <h2><FormattedMessage id="sec.projectsTitle" /></h2>
+                <p><FormattedMessage id="sec.projectsIntro" /></p>
+                <p>
+                    <FormattedMessage
+                        id="sec.projectsIntro2"
+                        values={{
+                            culturallySustainingLink: <a
+                                href="https://docs.google.com/document/d/1JcRBFhAXvMGKXgHADg1sAZC8b_zb2OSVDjaEOL8tzcw/edit#bookmark=id.4c6pah669jb5"
+                                rel="noopener noreferrer"
+                                target="_blank"
+                            >
+                                <FormattedMessage id="sec.culturallySustaining" />
+                            </a>
+                        }}
+                    />
+                </p>
+            </section>
+            <section id="expectations-for-sec">
+                <h3><FormattedMessage id="sec.expectationsFromSec" /></h3>
+                <ul>
+                    <li><FormattedMessage id="sec.expectationsFromSecPoint1" /></li>
+                    <li><FormattedMessage id="sec.expectationsFromSecPoint2" /></li>
+                    <li><FormattedMessage id="sec.expectationsFromSecPoint3" /></li>
+                    <li><FormattedMessage id="sec.expectationsFromSecPoint4" /></li>
+                </ul>
+            </section>
+
+            <section id="expectations-for-orgs">
+                <h3><FormattedMessage id="sec.expectationsFromOrgs" /></h3>
+                <ul>
+                    <li><FormattedMessage id="sec.expectationsFromOrgsPoint1" /></li>
+                    <li><FormattedMessage id="sec.expectationsFromOrgsPoint2" /></li>
+                    <li><FormattedMessage id="sec.expectationsFromOrgsPoint3" /></li>
+                    <li><FormattedMessage id="sec.expectationsFromOrgsPoint4" /></li>
+                </ul>
+            </section>
+
+            <section id="eligibility">
+                <h3><FormattedMessage id="sec.eligibilityTitle" /></h3>
+                <ul>
+                    <li><FormattedMessage id="sec.eligibilityPoint1" /></li>
+                    <li><FormattedMessage id="sec.eligibilityPoint2" /></li>
+                    <li><FormattedMessage id="sec.eligibilityPoint3" /></li>
+                </ul>
+            </section>
+            <section>
+                <p><FormattedMessage
+                    id="sec.eligibilityPrompt"
+                    values={{
+                        link: <a
+                            href="https://docs.google.com/document/d/1JcRBFhAXvMGKXgHADg1sAZC8b_zb2OSVDjaEOL8tzcw/edit?usp=sharing"
+                            rel="noopener noreferrer"
+                            target="_blank"
+                        >
+                            <FormattedMessage id="sec.eligibilityPromptLink" />
+                        </a>
+                    }}
+                />
+                </p>
+            </section>
+        </div>
+
+        <TitleBanner className="masthead">
+            <div className="inner">
+                <FlexRow className="masthead-info uneven">
+                    <div className="long">
+                        <h1><FormattedMessage id="sec.applyTitle" /></h1>
+                        <p className="intro">
+                            <FormattedMessage id="sec.applyDeadline" />
+                        </p>
+                        <SubNavigation
+                            align="left"
+                            className="sec-apply-buttons"
+                        >
+                            <a
+                                href="https://forms.gle/Py7jgaE2ZK1YdbUF7"
+                                rel="noopener noreferrer"
+                                target="_blank"
+                            >
+                                <li><FormattedMessage id="sec.applyButton" /></li>
+                            </a>
+                        </SubNavigation>
+                    </div>
+                    <img
+                        alt=""
+                        className="short"
+                        src="/images/sec/SEC-bottom-img.svg"
+                    />
+                </FlexRow>
+            </div>
+        </TitleBanner>
+
+        <div className="inner">
+            <section>
+                <p>
+                    <FormattedMessage
+                        id="sec.subscribe"
+                        values={{
+                            subscribeLink: (
+                                <a
+                                    href=" https://us9.list-manage.com/subscribe?u=96e741c12c99f46f1f3e95e09&id=149bd1a4c2"
+                                    target="_blank"
+                                >
+                                    <FormattedMessage id="sec.subscribeCallToAction" />
+                                </a>
+                            )
+                        }}
+                    />
+                </p>
+            </section>
+        </div>
+    </div>
+);
+
+render(<Page><EducationCollaborative /></Page>, document.getElementById('app'));

src/views/sec/sec.scss

+@import "../../colors";
+@import "../../frameless";
+
+$sec-spot: $ui-blue;
+
+#view {
+    padding: 0;
+}
+
+.education-collaborative {
+    .title-banner {
+        &.masthead {
+            background-color: $sec-spot;
+            padding: 50px 0;
+
+            .masthead-info {
+                align-items: center;
+                justify-content: space-between;
+
+                @media #{$intermediate} {
+                    justify-content: end;
+                }
+
+                h1 {
+                    margin: 0 0 1rem 0;
+                    text-align: left;
+                    color: $ui-white;
+                }
+                p {
+                    margin: 0;
+                    text-align: left;
+                    color: $ui-white;
+                    max-width: $cols6;
+                    font-size: 1.65em;
+                }
+                img {
+                    width: $cols4;
+                }
+
+                .sec-apply-buttons {
+                    margin-top: 2rem;
+                    li {
+                        border: 2px solid $ui-white;
+                        padding: 16px;
+                        font-size: 16px;
+                        font-weight: 500;
+                    }
+                }
+            }
+        }
+    }
+
+    section {
+        margin-bottom: 3rem;
+
+        p, ul {
+            max-width: $cols8;
+        }
+    }
+}
+
+@media #{$intermediate, $medium, $small} {
+    #view {
+        text-align: left;
+    }
+}
+
+
+
+