mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-23 15:47:53 -05:00
More progress on donate section
This commit is contained in:
Karishma Chadha
parent
13c9837ebf
commit
98a7841a50
2 changed files with 265 additions and 220 deletions
|
|
@ -13,225 +13,209 @@ const NavigationBox = require('../../components/navigation/base/navigation.jsx')
|
|||
|
||||
const Page = require('../../components/page/www/page.jsx');
|
||||
const render = require('../../lib/render.jsx');
|
||||
|
||||
|
||||
require('./annual-report.scss');
|
||||
|
||||
class AnnualReport extends React.Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
}
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
<div className="subnavigation">
|
||||
<FlexRow className="inner">
|
||||
<ul className="ul">
|
||||
<li className="li-left">
|
||||
<ul className="li-left-ul">
|
||||
<li>
|
||||
<a
|
||||
className="link"
|
||||
href="/conference"
|
||||
>
|
||||
<span className="">Mission</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="link"
|
||||
href="/conference"
|
||||
>
|
||||
<span className="">Reach</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
const AnnualReport = () => (
|
||||
<div>
|
||||
<div className="subnavigation">
|
||||
<FlexRow className="inner">
|
||||
<ul className="ul">
|
||||
<li className="li-left">
|
||||
<ul className="li-left-ul">
|
||||
<li>
|
||||
<a
|
||||
className="link"
|
||||
href="/conference"
|
||||
>
|
||||
<span className="">Mission</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="link"
|
||||
href="/conference"
|
||||
>
|
||||
<span className="">Reach</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</FlexRow>
|
||||
</li>
|
||||
</ul>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</TitleBanner>
|
||||
</div>
|
||||
<div className="mission">
|
||||
<div className="inner">
|
||||
<FlexRow
|
||||
as="section"
|
||||
className="tips-info-section tips-left"
|
||||
>
|
||||
<div className="ideas-image">
|
||||
<img src="/images/ideas/getting-started-illustration.svg" />
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</FlexRow>
|
||||
</TitleBanner>
|
||||
</div>
|
||||
<div className="mission">
|
||||
<div className="inner">
|
||||
<FlexRow
|
||||
as="section"
|
||||
className="tips-info-section tips-left"
|
||||
>
|
||||
<div className="ideas-image">
|
||||
<img src="/images/ideas/getting-started-illustration.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="our-reach">
|
||||
<div className="inner">
|
||||
<section className="ttt-section">
|
||||
<div className="ttt-head">
|
||||
<h2>
|
||||
<FormattedMessage id="ideas.activityGuidesTitle" />
|
||||
</h2>
|
||||
<p>
|
||||
<FormattedHTMLMessage id="ideas.activityGuidesText" />
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
className="wide-button"
|
||||
href="/projects/editor/?tutorial=all"
|
||||
>
|
||||
<Button className="ideas-button wide-button">
|
||||
<FormattedMessage id="ideas.seeAllTutorials" />
|
||||
</Button>
|
||||
</a>
|
||||
</section>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div className="history">
|
||||
<div className="inner">
|
||||
<section className="ttt-section">
|
||||
<div className="ttt-head">
|
||||
<h2>
|
||||
<FormattedMessage id="ideas.activityGuidesTitle" />
|
||||
</h2>
|
||||
<p>
|
||||
<FormattedHTMLMessage id="ideas.activityGuidesText" />
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
className="wide-button"
|
||||
href="/projects/editor/?tutorial=all"
|
||||
>
|
||||
<Button className="ideas-button wide-button">
|
||||
<FormattedMessage id="ideas.seeAllTutorials" />
|
||||
</Button>
|
||||
</a>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div className="our-work">
|
||||
<div className="inner">
|
||||
<section className="ttt-section">
|
||||
<div className="ttt-head">
|
||||
<h2>
|
||||
<FormattedMessage id="ideas.activityGuidesTitle" />
|
||||
</h2>
|
||||
<p>
|
||||
<FormattedHTMLMessage id="ideas.activityGuidesText" />
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
className="wide-button"
|
||||
href="/projects/editor/?tutorial=all"
|
||||
>
|
||||
<Button className="ideas-button wide-button">
|
||||
<FormattedMessage id="ideas.seeAllTutorials" />
|
||||
</Button>
|
||||
</a>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div className="financials">
|
||||
<div className="inner">
|
||||
<section className="ttt-section">
|
||||
<div className="ttt-head">
|
||||
<h2>
|
||||
<FormattedMessage id="ideas.activityGuidesTitle" />
|
||||
</h2>
|
||||
<p>
|
||||
<FormattedHTMLMessage id="ideas.activityGuidesText" />
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
className="wide-button"
|
||||
href="/projects/editor/?tutorial=all"
|
||||
>
|
||||
<Button className="ideas-button wide-button">
|
||||
<FormattedMessage id="ideas.seeAllTutorials" />
|
||||
</Button>
|
||||
</a>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div className="supporters">
|
||||
<div className="inner">
|
||||
<section className="ttt-section">
|
||||
<div className="ttt-head">
|
||||
<h2>
|
||||
<FormattedMessage id="ideas.activityGuidesTitle" />
|
||||
</h2>
|
||||
<p>
|
||||
<FormattedHTMLMessage id="ideas.activityGuidesText" />
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
className="wide-button"
|
||||
href="/projects/editor/?tutorial=all"
|
||||
>
|
||||
<Button className="ideas-button wide-button">
|
||||
<FormattedMessage id="ideas.seeAllTutorials" />
|
||||
</Button>
|
||||
</a>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<TitleBanner>
|
||||
<div className="title-banner">
|
||||
<FlexRow className="donate-info">
|
||||
<img src="/images/annual-report/donate-illustration.svg" width="300" height="300"/>
|
||||
<div>
|
||||
<h1 className="title-banner-h1 section-heading">
|
||||
<FormattedMessage id="annualReport.donateTitle" />
|
||||
</h1>
|
||||
<p className="donate-p">
|
||||
<FormattedMessage id="annualReport.donateMessage" />
|
||||
</p>
|
||||
<a href="/projects/editor/?tutorial=all">
|
||||
<Button className="ideas-button">
|
||||
<img src="/images/ideas/bulb-icon.svg" />
|
||||
<FormattedMessage id="annualReport.donateButton" />
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
</FlexRow>
|
||||
</div>
|
||||
</TitleBanner>
|
||||
</div>
|
||||
</FlexRow>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
AnnualReport.propTypes = {
|
||||
intl: intlShape
|
||||
};
|
||||
</div>
|
||||
<div className="our-reach">
|
||||
<div className="inner">
|
||||
<section className="ttt-section">
|
||||
<div className="ttt-head">
|
||||
<h2>
|
||||
<FormattedMessage id="ideas.activityGuidesTitle" />
|
||||
</h2>
|
||||
<p>
|
||||
<FormattedHTMLMessage id="ideas.activityGuidesText" />
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
className="wide-button"
|
||||
href="/projects/editor/?tutorial=all"
|
||||
>
|
||||
<Button className="ideas-button wide-button">
|
||||
<FormattedMessage id="ideas.seeAllTutorials" />
|
||||
</Button>
|
||||
</a>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div className="history">
|
||||
<div className="inner">
|
||||
<section className="ttt-section">
|
||||
<div className="ttt-head">
|
||||
<h2>
|
||||
<FormattedMessage id="ideas.activityGuidesTitle" />
|
||||
</h2>
|
||||
<p>
|
||||
<FormattedHTMLMessage id="ideas.activityGuidesText" />
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
className="wide-button"
|
||||
href="/projects/editor/?tutorial=all"
|
||||
>
|
||||
<Button className="ideas-button wide-button">
|
||||
<FormattedMessage id="ideas.seeAllTutorials" />
|
||||
</Button>
|
||||
</a>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div className="our-work">
|
||||
<div className="inner">
|
||||
<section className="ttt-section">
|
||||
<div className="ttt-head">
|
||||
<h2>
|
||||
<FormattedMessage id="ideas.activityGuidesTitle" />
|
||||
</h2>
|
||||
<p>
|
||||
<FormattedHTMLMessage id="ideas.activityGuidesText" />
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
className="wide-button"
|
||||
href="/projects/editor/?tutorial=all"
|
||||
>
|
||||
<Button className="ideas-button wide-button">
|
||||
<FormattedMessage id="ideas.seeAllTutorials" />
|
||||
</Button>
|
||||
</a>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div className="financials">
|
||||
<div className="inner">
|
||||
<section className="ttt-section">
|
||||
<div className="ttt-head">
|
||||
<h2>
|
||||
<FormattedMessage id="ideas.activityGuidesTitle" />
|
||||
</h2>
|
||||
<p>
|
||||
<FormattedHTMLMessage id="ideas.activityGuidesText" />
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
className="wide-button"
|
||||
href="/projects/editor/?tutorial=all"
|
||||
>
|
||||
<Button className="ideas-button wide-button">
|
||||
<FormattedMessage id="ideas.seeAllTutorials" />
|
||||
</Button>
|
||||
</a>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div className="supporters">
|
||||
<div className="inner">
|
||||
<section className="ttt-section">
|
||||
<div className="ttt-head">
|
||||
<h2>
|
||||
<FormattedMessage id="ideas.activityGuidesTitle" />
|
||||
</h2>
|
||||
<p>
|
||||
<FormattedHTMLMessage id="ideas.activityGuidesText" />
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
className="wide-button"
|
||||
href="/projects/editor/?tutorial=all"
|
||||
>
|
||||
<Button className="ideas-button wide-button">
|
||||
<FormattedMessage id="ideas.seeAllTutorials" />
|
||||
</Button>
|
||||
</a>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div className="donate-section">
|
||||
<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>
|
||||
);
|
||||
|
||||
render(
|
||||
<Page><AnnualReport /></Page>, document.getElementById('app'));
|
||||
|
|
|
|||
|
|
@ -127,16 +127,77 @@ $base-bg: $ui-white;
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.donate-p {
|
||||
font-size: 20px;
|
||||
text-align: left;
|
||||
color: $type-white;
|
||||
max-width: 500px;
|
||||
.donate-section {
|
||||
height: 500px;
|
||||
background-color: #0EBD8C;
|
||||
|
||||
.donate-info {
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding: 82px 0px;
|
||||
}
|
||||
|
||||
.donate-content {
|
||||
margin-left: 20px;
|
||||
|
||||
img {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
height: 62px;
|
||||
width: 460px;
|
||||
color: $ui-white;
|
||||
font-family: "Helvetica Neue";
|
||||
font-size: 52px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0;
|
||||
line-height: 64px;
|
||||
}
|
||||
|
||||
p {
|
||||
height: 160px;
|
||||
width: 460px;
|
||||
color: #FFFFFF;
|
||||
font-family: "Helvetica Neue";
|
||||
font-size: 20px;
|
||||
letter-spacing: 0;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.donate-button {
|
||||
// margin-right: .75rem;
|
||||
background-color: $ui-white;
|
||||
color: $ui-blue;
|
||||
height: 66px;
|
||||
width: 176px;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
border-radius: 6px;
|
||||
|
||||
// font-size: 1rem;
|
||||
|
||||
font-family: "Helvetica Neue";
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0;
|
||||
line-height: 29px;
|
||||
|
||||
a { // do we need this?
|
||||
color: $ui-blue;
|
||||
}
|
||||
|
||||
span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.donate-info {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
img.tips-icon {
|
||||
height: 1.75rem;
|
||||
|
|
@ -307,7 +368,7 @@ img.tips-icon {
|
|||
margin-right: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
/*display: block;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
|
|
|
|||
Loading…
Reference in a new issue