mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-12-04 21:01:32 -05:00
82dbfabcec
So that they don't affect styles declared outside the scope of the view. Thanks @rschamp!
134 lines
6 KiB
JavaScript
134 lines
6 KiB
JavaScript
var FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
|
|
var FormattedMessage = require('react-intl').FormattedMessage;
|
|
var React = require('react');
|
|
|
|
var Page = require('../../components/page/www/page.jsx');
|
|
var render = require('../../lib/render.jsx');
|
|
|
|
require('./wedo2.scss');
|
|
|
|
var Wedo2 = React.createClass({
|
|
type: 'wedo2',
|
|
render: function () {
|
|
return (
|
|
<div className="wedo">
|
|
<div className="top-banner">
|
|
<div className="inner">
|
|
<div className="columns2">
|
|
<div className="banner-text">
|
|
<h2>LEGO WeDo 2.0 & Scratch</h2>
|
|
<p className="intro">
|
|
<FormattedMessage id='wedo2.intro' />
|
|
</p>
|
|
</div>
|
|
<div className="banner-photo">
|
|
<img src="/images/wedo/wedo-milo.png" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="inner">
|
|
<section id="getting-started">
|
|
<h3>
|
|
<FormattedMessage id='wedo2.getStarted' />
|
|
</h3>
|
|
<p className="callout">
|
|
<FormattedMessage id='wedo2.requirement' />
|
|
</p>
|
|
<div className="columns3">
|
|
<div className="column">
|
|
<img src="/images/wedo/download-device-manager.png" />
|
|
<h4>
|
|
<FormattedMessage id='wedo2.installTitle' />
|
|
</h4>
|
|
<p>
|
|
<FormattedHTMLMessage id='wedo2.installText' />
|
|
</p>
|
|
</div>
|
|
<div className="column">
|
|
<img src="/images/wedo/set-up.png" />
|
|
<h4>
|
|
<FormattedMessage id='wedo2.setupTitle' />
|
|
</h4>
|
|
<p>
|
|
<FormattedHTMLMessage id='wedo2.setupText' />
|
|
</p>
|
|
</div>
|
|
<div className="column">
|
|
<img src="/images/wedo/create-and-share.png" />
|
|
<h4>
|
|
<FormattedMessage id='wedo2.createTitle' />
|
|
</h4>
|
|
<p>
|
|
<FormattedMessage id='wedo2.createText' />
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<div className="banner">
|
|
<div className="inner" id="starter-projects">
|
|
<h3>
|
|
<FormattedMessage id='wedo2.starterProjects' />
|
|
</h3>
|
|
<div className="project-list">
|
|
<a href="/projects/101037564/?tip_bar=ext2#editor">
|
|
<div className="project-card">
|
|
<img src="/images/wedo/motor.png" alt="" />
|
|
<p>
|
|
<FormattedMessage id='wedo2.starterMotor' />
|
|
</p>
|
|
</div>
|
|
</a>
|
|
<a href="/projects/101038249/?tip_bar=ext2#editor">
|
|
<div className="project-card">
|
|
<img src="/images/wedo/distance.png" alt="" />
|
|
<p>
|
|
<FormattedMessage id='wedo2.starterDistance' />
|
|
</p>
|
|
</div>
|
|
</a>
|
|
<a href="/projects/101033190/?tip_bar=ext2#editor">
|
|
<div className="project-card">
|
|
<img src="/images/wedo/tilt.png" alt="" />
|
|
<p>
|
|
<FormattedMessage id='wedo2.starterTilt' />
|
|
</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="inner">
|
|
<section>
|
|
<h3>
|
|
<FormattedMessage id='wedo2.versionTitle' />
|
|
</h3>
|
|
<p>
|
|
<FormattedMessage id='wedo2.versionText' />
|
|
</p>
|
|
<div className="device-card">
|
|
<h4>LEGO WeDo 1.0 Hub</h4>
|
|
<img src="/images/wedo/wedo1.png" alt="LEGO WeDo 1.0 Hub" />
|
|
<a href="/projects/editor/?tip_bar=ext1">
|
|
<FormattedMessage id='wedo2.wedo1SetupInstructions' />
|
|
</a>
|
|
</div>
|
|
<div className="device-card">
|
|
<h4>LEGO WeDo 2.0 Hub</h4>
|
|
<img src="/images/wedo/wedo2.png" alt="LEGO WeDo 2.0 Hub" />
|
|
<a href="/projects/editor/?tip_bar=ext2">
|
|
<FormattedMessage id='wedo2.wedo2SetupInstructions' />
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
});
|
|
|
|
render(<Page><Wedo2 /></Page>, document.getElementById('app'));
|