2020-08-10 16:43:07 -04:00
const bindAll = require ( 'lodash.bindall' ) ;
const FormattedHTMLMessage = require ( 'react-intl' ) . FormattedHTMLMessage ;
const FormattedMessage = require ( 'react-intl' ) . FormattedMessage ;
const injectIntl = require ( 'react-intl' ) . injectIntl ;
const intlShape = require ( 'react-intl' ) . intlShape ;
const React = require ( 'react' ) ;
const Button = require ( '../../components/forms/button.jsx' ) ;
const FlexRow = require ( '../../components/flex-row/flex-row.jsx' ) ;
const MasonryGrid = require ( '../../components/masonrygrid/masonrygrid.jsx' ) ;
const TitleBanner = require ( '../../components/title-banner/title-banner.jsx' ) ;
const NavigationBox = require ( '../../components/navigation/base/navigation.jsx' ) ;
2020-08-28 16:55:16 -04:00
const Comment = require ( '../../components/comment/comment.jsx' ) ;
2020-08-10 16:43:07 -04:00
const Page = require ( '../../components/page/www/page.jsx' ) ;
const render = require ( '../../lib/render.jsx' ) ;
2020-08-17 12:04:38 -04:00
2020-08-10 16:43:07 -04:00
require ( './annual-report.scss' ) ;
2020-08-17 12:04:38 -04:00
const AnnualReport = ( ) => (
< div >
< div className = "subnavigation" >
< FlexRow className = "inner" >
2020-08-19 16:30:45 -04:00
< a
className = "link"
2020-08-20 10:10:31 -04:00
href = "/annual-report#message"
2020-08-19 16:30:45 -04:00
>
< FormattedMessage id = "annualReport.subnavMessage" / >
< / a >
< a
className = "link"
2020-08-20 10:10:31 -04:00
href = "/annual-report#mission"
2020-08-19 16:30:45 -04:00
>
< FormattedMessage id = "annualReport.subnavMission" / >
< / a >
< a
className = "link"
2020-08-20 10:10:31 -04:00
href = "/annual-report#reach"
2020-08-19 16:30:45 -04:00
>
< FormattedMessage id = "annualReport.subnavReach" / >
< / a >
< a
className = "link"
2020-08-20 10:10:31 -04:00
href = "/annual-report#timeline"
2020-08-19 16:30:45 -04:00
>
< FormattedMessage id = "annualReport.subnavTimeline" / >
< / a >
< a
className = "link"
2020-08-20 10:10:31 -04:00
href = "/annual-report#work"
2020-08-19 16:30:45 -04:00
>
< FormattedMessage id = "annualReport.subnavWork" / >
< / a >
< a
className = "link"
2020-08-20 10:10:31 -04:00
href = "/annual-report#financials"
2020-08-19 16:30:45 -04:00
>
< FormattedMessage id = "annualReport.subnavFinancials" / >
< / a >
< a
className = "link"
2020-08-20 10:10:31 -04:00
href = "/annual-report#supporters"
2020-08-19 16:30:45 -04:00
>
< FormattedMessage id = "annualReport.subnavSupporters" / >
< / a >
< a
className = "link"
2020-08-20 10:10:31 -04:00
href = "/annual-report#leadership"
2020-08-19 16:30:45 -04:00
>
< FormattedMessage id = "annualReport.subnavLeadership" / >
< / a >
< a
className = "link"
2020-08-20 10:10:31 -04:00
href = "/annual-report#donate"
2020-08-19 16:30:45 -04:00
>
< FormattedMessage id = "annualReport.subnavDonate" / >
2020-08-24 10:25:18 -04:00
< / a >
2020-08-17 12:04:38 -04:00
< / FlexRow >
< / div >
< div className = "banner-wrapper" >
< TitleBanner className = "masthead masthead" >
< div className = "title-banner-p" >
< img src = "/images/ideas/masthead-illustration.svg" / >
< h1 className = "title-banner-h1" >
< FormattedMessage id = "ideas.headerMessage" / >
< / h1 >
< a href = "/projects/editor/?tutorial=all" >
< Button className = "ideas-button" >
< img src = "/images/ideas/bulb-icon.svg" / >
< FormattedMessage id = "ideas.headerButtonMessage" / >
< / Button >
< / a >
2020-08-10 16:43:07 -04:00
< / div >
2020-08-17 12:04:38 -04:00
< / TitleBanner >
< / div >
2020-08-20 10:10:31 -04:00
< div className = "mission" id = "mission" >
2020-08-17 12:04:38 -04:00
< div className = "inner" >
< FlexRow
as = "section"
className = "tips-info-section tips-left"
>
< div className = "ideas-image" >
< img src = "/images/ideas/getting-started-illustration.svg" / >
2020-08-10 16:43:07 -04:00
< / div >
2020-08-17 12:04:38 -04:00
< div >
< h2 >
< FormattedMessage id = "ideas.gettingStartedTitle" / >
< / h2 >
< p >
< FormattedHTMLMessage id = "ideas.gettingStartedText" / >
< / p >
< a href = "/projects/editor/?tutorial=getStarted" >
< Button className = "ideas-button" >
< img src = "/images/ideas/try-it-icon.svg" / >
< FormattedMessage id = "ideas.tryIt" / >
< / Button >
< / a >
2020-08-10 16:43:07 -04:00
< / div >
2020-08-17 12:04:38 -04:00
< / FlexRow >
< / div >
< / div >
2020-08-20 10:10:31 -04:00
< div className = "our-reach" id = "reach" >
2020-08-17 12:04:38 -04:00
< div className = "inner" >
< section className = "ttt-section" >
< div className = "ttt-head" >
< h2 >
< FormattedMessage id = "ideas.activityGuidesTitle" / >
< / h2 >
< p >
< FormattedHTMLMessage id = "ideas.activityGuidesText" / >
< / p >
2020-08-10 16:43:07 -04:00
< / div >
2020-08-17 12:04:38 -04:00
< a
className = "wide-button"
href = "/projects/editor/?tutorial=all"
>
< Button className = "ideas-button wide-button" >
< FormattedMessage id = "ideas.seeAllTutorials" / >
< / Button >
< / a >
< / section >
< / div >
< / div >
2020-08-20 10:10:31 -04:00
< div className = "history" id = "history" >
2020-08-17 12:04:38 -04:00
< div className = "inner" >
< section className = "ttt-section" >
< div className = "ttt-head" >
< h2 >
< FormattedMessage id = "ideas.activityGuidesTitle" / >
< / h2 >
< p >
< FormattedHTMLMessage id = "ideas.activityGuidesText" / >
< / p >
2020-08-10 16:43:07 -04:00
< / div >
2020-08-17 12:04:38 -04:00
< a
className = "wide-button"
href = "/projects/editor/?tutorial=all"
>
< Button className = "ideas-button wide-button" >
< FormattedMessage id = "ideas.seeAllTutorials" / >
< / Button >
< / a >
< / section >
< / div >
< / div >
2020-08-20 10:10:31 -04:00
< div className = "our-work" id = "work" >
2020-08-17 12:04:38 -04:00
< div className = "inner" >
< section className = "ttt-section" >
< div className = "ttt-head" >
< h2 >
< FormattedMessage id = "ideas.activityGuidesTitle" / >
< / h2 >
< p >
< FormattedHTMLMessage id = "ideas.activityGuidesText" / >
< / p >
2020-08-10 16:43:07 -04:00
< / div >
2020-08-17 12:04:38 -04:00
< a
className = "wide-button"
href = "/projects/editor/?tutorial=all"
>
< Button className = "ideas-button wide-button" >
< FormattedMessage id = "ideas.seeAllTutorials" / >
< / Button >
< / a >
< / section >
< / div >
< / div >
2020-08-25 16:47:11 -04:00
< div className = "financials-section" id = "financials" >
< div className = "inner" >
2020-08-24 10:25:18 -04:00
< h1 className = "financials-h1" >
< FormattedMessage id = "annualReport.financialsTitle" / >
< / h1 >
2020-08-25 16:47:11 -04:00
< h2 >
< FormattedMessage id = "annualReport.financialsRevenue" / >
< / h2 >
< hr / >
< div className = "financials-content" >
< div className = "financials-table" >
< div className = "circle-and-words" >
< img src = "/images/annual-report/blue-circle.svg" / >
< div className = "key-and-money" >
< p className = "key" >
< FormattedMessage id = "annualReport.financialsGrants" / >
< / p >
< p >
$3 , 898 , 078
< span className = "percentage" > ( 82.7 % ) < / span >
< / p >
< / div >
< / div >
< div className = "circle-and-words" >
< img src = "/images/annual-report/yellow-circle.svg" / >
< div className = "key-and-money" >
< p className = "key" >
< FormattedMessage id = "annualReport.financialsEvents" / >
< / p >
< p >
$700 , 000
< span className = "percentage" > ( 14.8 % ) < / span >
< / p >
< / div >
< / div >
< div className = "circle-and-words" >
< img src = "/images/annual-report/green-circle.svg" / >
< div className = "key-and-money" >
< p className = "key" >
< FormattedMessage id = "annualReport.financialsOther" / >
< / p >
< p >
$114 , 982
< span className = "percentage" > ( 2.4 % ) < / span >
< / p >
< / div >
< / div >
< div className = "circle-and-words" >
< div className = "key-and-money total" >
< p className = "key" >
< FormattedMessage id = "annualReport.financialsTotal" / >
< / p >
< p >
$4 , 713 , 060
< / p >
< / div >
< / div >
< / div >
< img className = "graph" src = "/images/annual-report/revenue-graph.svg" / >
< / div >
< h2 >
< FormattedMessage id = "annualReport.financialsExpenses" / >
< / h2 >
< hr / >
< div className = "financials-content" >
< div className = "financials-table" >
< div className = "circle-and-words" >
< img src = "/images/annual-report/blue-circle.svg" / >
< div className = "key-and-money" >
< p className = "key" >
< FormattedMessage id = "annualReport.financialsProgram" / >
< / p >
< p >
$1 , 135 , 767
< span className = "percentage" > ( 48.8 % ) < / span >
< / p >
< / div >
< / div >
< div className = "circle-and-words" >
< img src = "/images/annual-report/yellow-circle.svg" / >
< div className = "key-and-money" >
< p className = "key" >
< FormattedMessage id = "annualReport.financialsGeneral" / >
< / p >
< p >
$224 , 104
< span className = "percentage" > ( 9.6 % ) < / span >
< / p >
< / div >
< / div >
< div className = "circle-and-words" >
< img src = "/images/annual-report/green-circle.svg" / >
< div className = "key-and-money" >
< p className = "key" >
< FormattedMessage id = "annualReport.financialsFundraising" / >
< / p >
< p >
$962 , 958
< span className = "percentage" > ( 41.4 % ) < / span >
< / p >
< / div >
< / div >
< div className = "circle-and-words" >
< div className = "key-and-money total" >
< p className = "key" >
< FormattedMessage id = "annualReport.financialsTotal" / >
< / p >
< p >
$2 , 322 , 829
< / p >
< / div >
2020-08-24 10:25:18 -04:00
< / div >
2020-08-10 16:43:07 -04:00
< / div >
2020-08-25 16:47:11 -04:00
< img className = "graph" src = "/images/annual-report/expenses-graph.svg" / >
2020-08-24 10:25:18 -04:00
< / div >
2020-08-25 16:47:11 -04:00
< div className = "financials-button-wrapper" >
< a href = "https://secure.donationpay.org/scratchfoundation/" >
< Button className = "financials-button" >
< FormattedMessage id = "annualReport.financialsButton" / >
< img
className = "download-icon"
2020-08-27 13:07:41 -04:00
src = "/images/annual-report/download-icon.svg"
2020-08-25 16:47:11 -04:00
/ >
< / Button >
< / a >
2020-08-24 10:25:18 -04:00
< / div >
2020-08-10 16:43:07 -04:00
< / div >
2020-08-17 12:04:38 -04:00
< / div >
2020-08-27 16:54:21 -04:00
< div className = "supporters-section" id = "supporters" >
2020-08-17 12:04:38 -04:00
< div className = "inner" >
2020-08-27 16:54:21 -04:00
< div className = "supporters-heading" >
< h1 >
< FormattedMessage id = "annualReport.supportersTitle" / >
< / h1 >
< p >
< FormattedHTMLMessage id = "annualReport.supportersIntro" / >
< / p >
< / div >
< div className = "donor-spotlight" >
< div className = "subsection-tag" >
< FormattedHTMLMessage id = "annualReport.supportersSpotlightTitle" / >
< / div >
< div className = "sfe-info" >
2020-08-17 12:04:38 -04:00
< h2 >
2020-08-27 16:54:21 -04:00
< FormattedMessage id = "annualReport.supportersSFETitle" / >
2020-08-17 12:04:38 -04:00
< / h2 >
< p >
2020-08-27 16:54:21 -04:00
< FormattedMessage id = "annualReport.supportersSFEDescription" / >
2020-08-17 12:04:38 -04:00
< / p >
< / div >
2020-08-27 16:54:21 -04:00
< div className = "david-siegel" >
< div className = "ds-info" >
< img src = "/images/annual-report/david-siegel-photo.svg" / >
< h3 > David Siegel < / h3 >
2020-08-28 16:55:16 -04:00
< div > Co - Founder and < br / > Co - Chairman < br / > Two Sigma < / div >
2020-08-27 16:54:21 -04:00
< / div >
< div className = "ds-quote" >
2020-08-28 16:55:16 -04:00
< Comment comment = "Making sure that Scratch remains free and accessible for kids everywhere is one of the most impactful ways we can help young learners engage and thrive in an increasingly digital world. Supporting Scratch is more important today than ever before." / >
2020-08-27 16:54:21 -04:00
< / div >
< / div >
< / div >
2020-08-17 12:04:38 -04:00
< / div >
< / div >
2020-08-20 10:10:31 -04:00
< div className = "donate-section" id = "donate" >
2020-08-17 12:04:38 -04:00
< FlexRow className = "donate-info" >
< img src = "/images/annual-report/donate-illustration.svg" / >
< div className = "donate-content" >
< h1 className = "donate-h1" >
< FormattedMessage id = "annualReport.donateTitle" / >
< / h1 >
< p className = "donate-p" >
< FormattedMessage id = "annualReport.donateMessage" / >
< / p >
< a href = "https://secure.donationpay.org/scratchfoundation/" >
< Button className = "donate-button" >
< FormattedMessage id = "annualReport.donateButton" / >
< / Button >
< / a >
< / div >
< / FlexRow >
< / div >
< / div >
) ;
2020-08-10 16:43:07 -04:00
render (
< Page > < AnnualReport / > < / Page > , document . getElementById ( 'app' ) ) ;
