Merge pull request #244 from thisandagain/feature/about

Migrate - About View

en.json

@@ -1,6 +1,7 @@
 {
     "general.accountSettings": "Account settings",
     "general.about": "About",
+    "general.aboutScratch": "About Scratch",
     "general.donate": "Donate",
     "general.community": "Community",
     "general.contactUs": "Contact Us",
@@ -45,10 +46,37 @@
     "general.viewAll": "View All",
     "general.whatsHappening": "What's Happening?",
     "general.wiki": "Scratch Wiki",
+
+    "about.introOne": "With Scratch, you can program your own interactive stories, games, and animations — and share your creations with others in the online community.",
+    "about.introTwo": "Scratch helps young people learn to think creatively, reason systematically, and work collaboratively — essential skills for life in the 21st century.",
+    "about.introThree": "Scratch is a project of the Lifelong Kindergarten Group at the MIT Media Lab. It is provided free of charge.",
+    "about.introParents": "Info for parents",
+    "about.introEducators": "Info for educators",
+    "about.whoUsesScratch": "Who Uses Scratch?",
+    "about.whoUsesScratchDescription": "Scratch is designed especially for ages 8 to 16, but is used by people of all ages. Millions of people are creating Scratch projects in a wide variety of settings, including homes, schools, museums, libraries, and community centers.",
+    "about.aroundTheWorld": "Around the World",
+    "about.aroundTheWorldDescription": "Scratch is used in more than 150 different countries and available in more than 40 languages. To change languages, click the menu at the bottom of the page. Or, in the Project Editor, click the globe at the top of the page. To add or improve a translation, see the <a href=\"http://wiki.scratch.mit.edu/wiki/How_to_Translate_Scratch\">translation</a> page.",
+    "about.quotes": "Quotes",
+    "about.quotesDescription": "The Scratch Team has received many emails from youth, parents, and educators expressing thanks for Scratch. Want to see what people are saying? You can read a collection of the <a href=\"/info/quotes\">quotes</a> we&#39;ve received.",
+    "about.learnMore": "Learn More About Scratch",
+    "about.learnMoreHelp": "Scratch Help Page",
+    "about.learnMoreFaq": "Frequently Asked Questions",
+    "about.learnMoreParents": "Information for Parents",
+    "about.learnMoreCredits": "Scratch Credits",
+    "about.literacy": "Learn to Code, Code to Learn",
+    "about.literacyDescription": "The ability to code computer programs is an important part of literacy in today’s society. When people learn to code in Scratch, they learn important strategies for solving problems, designing projects, and communicating ideas.",
+    "about.schools": "Scratch in Schools",
+    "about.schoolsDescription": "Students are learning with Scratch at all levels (from elementary school to college) and across disciplines (such as math, computer science, language arts, social studies). Educators share stories, exchange resources, ask questions, and find people on the <a href=\"http://scratched.gse.harvard.edu/\">ScratchEd website</a>.",
+    "about.research": "Research",
+    "about.researchDescription": "The MIT Scratch Team and collaborators are researching how people use and learn with Scratch (for an introduction, see <a href=\"http://web.media.mit.edu/~mres/papers/Scratch-CACM-final.pdf\">Scratch: Programming for All</a>). Find out more about Scratch <a href=\"/info/research\">research</a> and <a href=\"/statistics\">statistics</a> about Scratch.",
+    "about.support": "Support and Funding",
+    "about.supportDescription": "The Scratch project, initiated in 2003, has received generous support from the National Science Foundation (grants 0325828, 1002713, 1027848, 1019396), Intel Foundation, Microsoft, MacArthur Foundation, LEGO Foundation, Code-to-Learn Foundation, Google, Dell, Fastly, Inversoft, and MIT Media Lab research consortia. If you&#39;d like to support Scratch, please see our <a href=\"https://secure.donationpay.org/scratchfoundation/\">donate page</a>, or contact us at donate@scratch.mit.edu.",
+
     "footer.about": "About Scratch",    
     "footer.discuss": "Discussion Forums",
     "footer.help": "Help Page",
     "footer.scratchFamily": "Scratch Family",
+    
     "hoc.activityCards": "Activity Cards",
     "hoc.activityCardsHeader": "Activity Cards and Guides",
     "hoc.activityCardsInfo1": "Want tips and ideas for these Hour of Code&trade; activities? Use the activity cards to get ideas for creating with Scratch. Facilitator guides can help you plan a group activity.",
@@ -65,6 +93,7 @@
     "hoc.subTitle": "With Scratch, you can program your own stories, games, and animations — and share them online.",
     "hoc.tipsDescription": "Need help getting started? Looking for ideas?&nbsp; You can find tutorials and helpful hints in the <a href=\"/projects/editor/?tip_bar=home\">Tips Window</a>",
     "hoc.title": "Get Creative with Coding",
+
     "intro.aboutScratch": "ABOUT SCRATCH",
     "intro.forEducators": "FOR EDUCATORS",
     "intro.forParents": "FOR PARENTS",
@@ -73,12 +102,16 @@
     "intro.tagLine": "Create stories, games, and animations<br /> Share with others around the world",
     "intro.tryItOut": "TRY IT OUT",
     "login.forgotPassword": "Forgot Password?",
+    
     "navigation.signOut": "Sign out",
+    
     "news.scratchNews": "Scratch News",
+    
     "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?",
     "parents.introDescription": "Scratch is a programming language and an online community where children can program and share interactive media such as stories, games, and animation with people from all over the world. As children create with Scratch, they learn to think creatively, work collaboratively, and reason systematically. Scratch is designed and maintained by the Lifelong Kindergarten group at the MIT Media Lab.",
+    
     "splash.featuredProjects": "Featured Projects",
     "splash.featuredStudios": "Featured Studios",
     "splash.projectsCuratedBy": "Projects Curated by",
@@ -90,6 +123,7 @@
     "splash.projectsInStudiosFollowing": "Projects in Studios I'm Following",
     "splash.communityRemixing": "What the Community is Remixing",
     "splash.communityLoving": "What the Community is Loving",
+    
     "welcome.welcomeToScratch": "Welcome to Scratch!",
     "welcome.learn": "Learn how to make a project in Scratch",
     "welcome.tryOut": "Try out starter projects",

src/views/about/about.jsx

@@ -1,4 +1,6 @@
 var React = require('react');
+var FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
+var FormattedMessage = require('react-intl').FormattedMessage;
 var render = require('../../lib/render.jsx');
 
 require('./about.scss');
@@ -7,8 +9,92 @@ var About = React.createClass({
     type: 'About',
     render: function () {
         return (
-            <div>
+            <div className="inner">
-                <h1>I am the about page!</h1>
+                <h1><FormattedMessage id='general.aboutScratch' /></h1>
+
+                <div className="masthead">
+                    <div>
+                        <p><FormattedMessage id='about.introOne' /></p>
+                        <p><FormattedMessage id='about.introTwo' /></p>
+                        <p><FormattedMessage id='about.introThree' /></p>
+
+                        <ul>
+                            <li><a href = "/parents/"><FormattedMessage id="about.introParents" /></a></li>
+                            <li><a href = "/educators/"><FormattedMessage id="about.introEducators" /></a></li>
+                        </ul>
+                    </div>
+
+                    <div>
+                        <iframe
+                            src="https://player.vimeo.com/video/65583694?title=0&byline=0&portrait=0"
+                            frameBorder="0"
+                            webkitAllowFullScreen
+                            mozallowfullscreen
+                            allowFullScreen />
+                    </div>
+                </div>
+
+                <div className="body">
+                    <ul>
+                        <li>
+                            <h2><FormattedMessage id='about.whoUsesScratch' /></h2>
+                            <img src="/images/about/who-uses-scratch.jpg" />
+                            <p><FormattedHTMLMessage id='about.whoUsesScratchDescription' /></p>
+                        </li>
+
+                        <li>
+                            <h2><FormattedMessage id='about.literacy' /></h2>
+                            <iframe
+                                src="https://embed-ssl.ted.com/talks/mitch_resnick_let_s_teach_kids_to_code.html"
+                                scrolling="no"
+                                webkitAllowFullScreen
+                                mozallowfullscreen
+                                allowFullScreen />
+                            <p><FormattedHTMLMessage id='about.literacyDescription' /></p>
+                        </li>
+
+                        <li>
+                            <h2><FormattedMessage id='about.aroundTheWorld' /></h2>
+                            <img src="/images/about/around-the-world.png" />
+                            <p><FormattedHTMLMessage id='about.aroundTheWorldDescription' /></p>
+                        </li>
+
+                        <li>
+                            <h2><FormattedMessage id='about.schools' /></h2>
+                            <img src="/images/about/scratch-in-schools.jpg" />
+                            <p><FormattedHTMLMessage id='about.schoolsDescription' /></p>
+                        </li>
+
+                        <li>
+                            <h2><FormattedMessage id='about.quotes' /></h2>
+                            <img src="/images/about/quotes.gif" />
+                            <p><FormattedHTMLMessage id='about.quotesDescription' /></p>
+                        </li>
+
+                        <li>
+                            <h2><FormattedMessage id='about.research' /></h2>
+                            <img src="/images/about/research-remix.png" />
+                            <p><FormattedHTMLMessage id='about.researchDescription' /></p>
+                        </li>
+
+                        <li>
+                            <h2><FormattedMessage id='about.learnMore' /></h2>
+                            <p>
+                                <ul className="list">
+                                    <li><a href="/help"><FormattedMessage id='about.learnMoreHelp' /></a></li>
+                                    <li><a href="/info/faq"><FormattedMessage id='about.learnMoreFaq' /></a></li>
+                                    <li><a href="/parents"><FormattedMessage id='about.learnMoreParents' /></a></li>
+                                    <li><a href="/credits"><FormattedMessage id='about.learnMoreCredits' /></a></li>
+                                </ul>
+                            </p>
+                        </li>
+
+                        <li>
+                            <h2><FormattedMessage id='about.support' /></h2>
+                            <p><FormattedHTMLMessage id='about.supportDescription' /></p>
+                        </li>
+                    </ul>
+                </div>
             </div>
         );
     }

src/views/about/about.scss

@@ -1,3 +1,71 @@
+@import "../../colors";
+
 #view {
-    
+    .masthead {
+        display: flex;
+        flex-wrap: no-wrap;
+        justify-content: space-between;
+        align-items: stretch;
+
+        div {
+            display: inline-block;
+            width: calc(50% - 10px);
+
+            ul {
+                margin: 0;
+                padding: 0;
+                list-style: none;
+            }
+
+            li {
+                display: inline-block;
+                text-transform: uppercase;
+
+                &:nth-child(odd) {
+                    margin-right: 10px;
+                    border-right: 1px solid $ui-gray;
+                    padding-right: 10px;
+                }
+            }
+
+            iframe {
+                border: 1px solid $ui-gray;
+                width: 460px;
+                height: 290px;
+            }
+        }
+    }
+
+    .body {
+        position: relative;
+        margin: 20px 0 0;
+        border: 1px solid $ui-gray;
+        border-radius: 10px;
+        background: $ui-white;
+        padding: 26px 40px 6px;
+        width: calc(100% - 80px);
+
+        ul {
+            display: flex;
+            margin: 0;
+            padding: 0;
+            list-style: none;
+            justify-content: space-between;
+            flex-wrap: wrap;
+        }
+
+        li {
+            display: inline-block;
+            margin-bottom: 20px;
+            width: calc(384px + 5px + 5px);
+        }
+
+        img, iframe {
+            display: block;
+            border: 1px solid $ui-gray;
+            padding: 5px;
+            width: 396px;
+            height: 222px;
+        }
+    }
 }