Commit deef8469 authored by Eugen Rochko's avatar Eugen Rochko

Add video in modal for "how it works" button

parent 20863195
...@@ -13,10 +13,12 @@ ...@@ -13,10 +13,12 @@
"react-intl": "^2.4.0", "react-intl": "^2.4.0",
"react-motion": "^0.4.7", "react-motion": "^0.4.7",
"react-redux": "^5.0.5", "react-redux": "^5.0.5",
"react-responsive-modal": "^2.0.1",
"react-responsive-select": "^3.1.4", "react-responsive-select": "^3.1.4",
"react-router-dom": "^4.0.0", "react-router-dom": "^4.0.0",
"react-router-hash-link": "^1.1.0", "react-router-hash-link": "^1.1.0",
"react-snapshot": "^1.1.0", "react-snapshot": "^1.1.0",
"react-youtube": "^7.5.0",
"redux": "^3.7.1", "redux": "^3.7.1",
"redux-thunk": "^2.2.0", "redux-thunk": "^2.2.0",
"reselect": "^3.0.1", "reselect": "^3.0.1",
......
import React from 'react'; import React, { PureComponent } from 'react';
import { FormattedHTMLMessage as FormattedMessage } from 'react-intl'; import { FormattedHTMLMessage as FormattedMessage } from 'react-intl';
import { HashLink as Link } from 'react-router-hash-link'; import { HashLink as Link } from 'react-router-hash-link';
import AnchorLink from './AnchorLink'; import AnchorLink from './AnchorLink';
import Modal from 'react-responsive-modal';
import YouTube from 'react-youtube';
import Features from './Features'; import Features from './Features';
import Wizard from './WizardContainer'; import Wizard from './WizardContainer';
...@@ -25,78 +27,140 @@ import cloud2 from './assets/cloud2.png'; ...@@ -25,78 +27,140 @@ import cloud2 from './assets/cloud2.png';
import cloud3 from './assets/cloud3.png'; import cloud3 from './assets/cloud3.png';
import cloud4 from './assets/cloud4.png'; import cloud4 from './assets/cloud4.png';
const Home = () => ( const styles = {
<div> modal: {
<div className='intro'> padding: 0,
<Navigation /> lineHeight: 0,
},
<div className='text'> closeIcon: {
<h1><FormattedMessage id='home.headline' defaultMessage='Social networking, <strong>back in your hands</strong>' /></h1> zIndex: 200,
<p><FormattedMessage id='home.tagline' defaultMessage='The world’s largest free, open-source, decentralized microblogging network' /></p> right: '-40px',
top: '-30px',
fill: 'white',
},
<AnchorLink href='#getting-started' className='cta button'><FormattedMessage id='home.get_started' defaultMessage='Get started' /></AnchorLink> };
<AnchorLink href='#how-it-works' className='cta button alt'><FormattedMessage id='home.how_it_works' defaultMessage='How it works' /></AnchorLink>
</div>
<div className='hero'> const playerOpts = {
<div className='hero__floats'>
<img src={cloud2} className='float-1' alt='Cloud 1' />
<img src={cloud4} className='float-2' alt='Cloud 2' />
<img src={cloud3} className='float-3' alt='Cloud 3' />
</div>
<img className='desktop' src={screenshotFull} alt='Screenshot of Mastodon on desktop'/> width: 720,
<img className='mobile' src={screenshotMobile} alt='Screenshot of Mastodon on mobile'/> height: 405,
</div>
</div> playerVars: {
autoplay: 1,
},
};
export default class Home extends PureComponent {
state = {
open: false,
};
setModalRef = c => {
this.modal = c;
}
setPlayerRef = e => {
this.player = e.target;
this.player.playVideo();
}
handleHowItWorksClick = () => {
this.setState({ open: true });
if (this.player) {
this.player.playVideo();
}
}
onCloseModal = () => {
this.setState({ open: false });
this.player.pauseVideo();
}
render () {
const { open } = this.state;
<div className='as-seen-on'> return (
<div className='container'> <div>
<h2><FormattedMessage id='home.as_seen_on' defaultMessage='As seen on' /></h2> <div className='intro'>
<Navigation />
<div className='logo-grid'> <div className='text'>
<div> <h1><FormattedMessage id='home.headline' defaultMessage='Social networking, <strong>back in your hands</strong>' /></h1>
<a href='https://motherboard.vice.com/en_us/article/mastodon-is-like-twitter-without-nazis-so-why-are-we-not-using-it' className='logo-motherboard'><img src={motherboardLogo} alt='Motherboard' /></a> <p><FormattedMessage id='home.tagline' defaultMessage='The world’s largest free, open-source, decentralized microblogging network' /></p>
<a href='https://www.producthunt.com/posts/mastodon' className='logo-product-hunt'><img src={productHuntLogo} alt='Product Hunt' /></a>
<AnchorLink href='#getting-started' className='cta button'><FormattedMessage id='home.get_started' defaultMessage='Get started' /></AnchorLink>
<button className='cta button alt' onClick={this.handleHowItWorksClick}><span className='icon-circled'><span className='ion-play' /></span><FormattedMessage id='home.how_it_works' defaultMessage='How it works' /></button>
</div> </div>
<div> <div className='hero'>
<a href='http://www.theverge.com/2017/4/4/15177856/mastodon-social-network-twitter-clone' className='logo-the-verge'><img src={theVergeLogo} alt='The Verge' /></a> <div className='hero__floats'>
<a href='https://www.wired.com/2017/04/like-twitter-hate-trolls-try-mastodon/' className='logo-wired'><img src={wiredLogo} alt='Wired' /></a> <img src={cloud2} className='float-1' alt='Cloud 1' />
<img src={cloud4} className='float-2' alt='Cloud 2' />
<img src={cloud3} className='float-3' alt='Cloud 3' />
</div>
<img className='desktop' src={screenshotFull} alt='Screenshot of Mastodon on desktop'/>
<img className='mobile' src={screenshotMobile} alt='Screenshot of Mastodon on mobile'/>
</div>
</div>
<div className='as-seen-on'>
<div className='container'>
<h2><FormattedMessage id='home.as_seen_on' defaultMessage='As seen on' /></h2>
<div className='logo-grid'>
<div>
<a href='https://motherboard.vice.com/en_us/article/mastodon-is-like-twitter-without-nazis-so-why-are-we-not-using-it' className='logo-motherboard'><img src={motherboardLogo} alt='Motherboard' /></a>
<a href='https://www.producthunt.com/posts/mastodon' className='logo-product-hunt'><img src={productHuntLogo} alt='Product Hunt' /></a>
</div>
<div>
<a href='http://www.theverge.com/2017/4/4/15177856/mastodon-social-network-twitter-clone' className='logo-the-verge'><img src={theVergeLogo} alt='The Verge' /></a>
<a href='https://www.wired.com/2017/04/like-twitter-hate-trolls-try-mastodon/' className='logo-wired'><img src={wiredLogo} alt='Wired' /></a>
</div>
</div>
</div> </div>
</div> </div>
</div>
</div>
<Features /> <Features />
<div className='frontpage-sponsorship'> <div className='frontpage-sponsorship'>
<div className='container'> <div className='container'>
<h2><FormattedMessage id='home.sponsored_by' defaultMessage='Sponsored by' /></h2> <h2><FormattedMessage id='home.sponsored_by' defaultMessage='Sponsored by' /></h2>
<div className='logo-grid'> <div className='logo-grid'>
<div> <div>
<Link to='/sponsors' className='logo-sponsor-tootdon'><img src={sponsorTootdon} alt='Tootdon' /></Link> <Link to='/sponsors' className='logo-sponsor-tootdon'><img src={sponsorTootdon} alt='Tootdon' /></Link>
<Link to='/sponsors' className='logo-sponsor-tootdon'><img src={sponsorPixiv} alt='pixiv Inc.' /></Link> <Link to='/sponsors' className='logo-sponsor-tootdon'><img src={sponsorPixiv} alt='pixiv Inc.' /></Link>
<Link to='/sponsors' className='logo-sponsor-tootdon'><img src={sponsorKibousoft} alt='Kibousoft LLC' /></Link> <Link to='/sponsors' className='logo-sponsor-tootdon'><img src={sponsorKibousoft} alt='Kibousoft LLC' /></Link>
</div>
</div>
</div> </div>
</div> </div>
</div>
</div>
<Wizard /> <Wizard />
<div className='bottom-cta'> <div className='bottom-cta'>
<div className='container'> <div className='container'>
<h3><FormattedMessage id='home.install_your_own' defaultMessage='Install your own' /></h3> <h3><FormattedMessage id='home.install_your_own' defaultMessage='Install your own' /></h3>
<p><FormattedMessage id='home.install_your_own_text' defaultMessage='If you are interested in running your own instance &mdash; for your friends, family or organization &mdash; you can get started by reading the installation documentation. You only host your own users and the content that they subscribe to.' /></p> <p><FormattedMessage id='home.install_your_own_text' defaultMessage='If you are interested in running your own instance &mdash; for your friends, family or organization &mdash; you can get started by reading the installation documentation. You only host your own users and the content that they subscribe to.' /></p>
<a href='https://github.com/tootsuite/documentation#running-mastodon' className='cta button alt'><FormattedMessage id='home.read_the_docs' defaultMessage='Read the docs' /></a> <a href='https://github.com/tootsuite/documentation#running-mastodon' className='cta button alt'><FormattedMessage id='home.read_the_docs' defaultMessage='Read the docs' /></a>
</div> </div>
</div> </div>
<HowItWorks />
<Credits />
<HowItWorks /> <Modal open={open} onClose={this.onCloseModal} little showCloseIcon styles={styles}>
<Credits /> <YouTube videoId='IPSbNdBmWKE' onReady={this.setPlayerRef} opts={playerOpts} />
</div> </Modal>
); </div>
);
}
export default Home; }
...@@ -689,3 +689,12 @@ $phi: 1.6180339887498948482; ...@@ -689,3 +689,12 @@ $phi: 1.6180339887498948482;
transform: translate(0, -0px); transform: translate(0, -0px);
} }
} }
.icon-circled {
display: inline-block;
margin-right: 10px;
}
iframe {
box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment