scratch-www/src/components/intro/intro.jsx

var React = require('react');
var Modal = require('../modal/modal.jsx');

require('./intro.scss');

Modal.setAppElement(document.getElementById('view'));

module.exports = React.createClass({
    propTypes: {
        projectCount: React.PropTypes.number
    },
    getDefaultProps: function () {
        return {
            projectCount: 10569070
        };
    },
    getInitialState: function () {
        return {
            videoOpen: false
        };
    },
    showVideo: function () {
        this.setState({videoOpen: true});
    },
    closeVideo: function () {
        this.setState({videoOpen: false});
    },
    render: function () {
        return (
            <div className="intro">
                <div className="content">
                    <h1>
                        Create stories, games, and animations<br />
                        Share with others around the world
                    </h1>
                    <div className="sprites">
                        <a className="sprite sprite-1" href="/projects/editor/?tip_bar=getStarted">
                            <img
                                className="costume costume-1"
                                src="//cdn.scratch.mit.edu/scratchr2/static/images/cat-a.png" />
                            <img
                                className="costume costume-2"
                                src="//cdn.scratch.mit.edu/scratchr2/static/images/cat-b.png" />
                            <div className="circle"></div>
                            <div className="text">TRY IT OUT</div>
                        </a>
                        <a className="sprite sprite-2" href="/starter_projects/">
                            <img
                                className="costume costume-1"
                                src="//cdn.scratch.mit.edu/scratchr2/static/images/tera-a.png" />
                            <img
                                className="costume costume-2"
                                src="//cdn.scratch.mit.edu/scratchr2/static/images/tera-b.png" />
                            <div className="circle"></div>
                            <div className="text">SEE EXAMPLES</div>
                        </a>
                        <a className="sprite sprite-3" href="#">
                            <img
                                className="costume costume-1"
                                src="//cdn.scratch.mit.edu/scratchr2/static/images/gobo-a.png" />
                            <img
                                className="costume costume-2"
                                src="//cdn.scratch.mit.edu/scratchr2/static/images/gobo-b.png" />
                            <div className="circle"></div>
                            <div className="text">JOIN SCRATCH</div>
                            <div className="text subtext">( it&rsquo;s free )</div>
                        </a>
                    </div>
                    <div className="description">
                        A creative learning community with
                        <span className="project-count"> {this.props.projectCount.toLocaleString()} </span>
                        projects shared
                    </div>
                    <div className="links">
                        <a href="/about/">ABOUT SCRATCH</a>
                        <a href="/educators/">FOR EDUCATORS</a>
                        <a className="last" href="/parents/">FOR PARENTS</a>
                    </div>
                </div>
                <div className="video">
                    <div className="play-button" onClick={this.showVideo}></div>
                    <img src="//cdn.scratch.mit.edu/scratchr2/static/images/hp-video-screenshot.png" />
                </div>
                <Modal
                    className="video-modal"
                    isOpen={this.state.videoOpen}
                    onRequestClose={this.closeVideo}>
                    <iframe src="//player.vimeo.com/video/65583694?title=0&amp;byline=0&amp;portrait=0" />
                </Modal>
            </div>
        );
    }
});