Commit de081376 authored by Eugen Rochko's avatar Eugen Rochko

Add approx. user count to tagline, a note to sign up lead

parent 9ca81004
import React, { PureComponent } from 'react'; import React, { PureComponent, Fragment } from 'react';
import { FormattedHTMLMessage as FormattedMessage } from 'react-intl'; import PropTypes from 'prop-types';
import { injectIntl, 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 Modal from 'react-responsive-modal';
...@@ -32,6 +33,8 @@ import cloud2 from './assets/cloud2.png'; ...@@ -32,6 +33,8 @@ 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 USERS_NUM_APPROX = 1571504;
const styles = { const styles = {
modal: { modal: {
padding: 0, padding: 0,
...@@ -60,6 +63,10 @@ const playerOpts = { ...@@ -60,6 +63,10 @@ const playerOpts = {
export default class Home extends PureComponent { export default class Home extends PureComponent {
static contextTypes = {
intl: PropTypes.object.isRequired,
};
state = { state = {
open: false, open: false,
}; };
...@@ -88,6 +95,7 @@ export default class Home extends PureComponent { ...@@ -88,6 +95,7 @@ export default class Home extends PureComponent {
render () { render () {
const { open } = this.state; const { open } = this.state;
const { intl } = this.context;
return ( return (
<div> <div>
...@@ -96,7 +104,7 @@ export default class Home extends PureComponent { ...@@ -96,7 +104,7 @@ export default class Home extends PureComponent {
<div className='text'> <div className='text'>
<h1><FormattedMessage id='home.headline' defaultMessage='Social networking, <strong>back in your hands</strong>' /></h1> <h1><FormattedMessage id='home.headline' defaultMessage='Social networking, <strong>back in your hands</strong>' /></h1>
<p><FormattedMessage id='home.tagline2' defaultMessage='Follow friends and discover new ones. Publish anything you want: links, pictures, text, video. All on a platform that is community-owned and ad-free.' /></p> <p><FormattedMessage id='home.tagline3' defaultMessage='Follow friends and discover new ones among more than {count}M people. Publish anything you want: links, pictures, text, video. All on a platform that is community-owned and ad-free.' values={{ count: intl.formatNumber(USERS_NUM_APPROX / (1000 * 1000), { maximumFractionDigits: 1 }) }} /></p>
<AnchorLink href='#getting-started' className='cta button'><FormattedMessage id='home.get_started' defaultMessage='Get started' /></AnchorLink> <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-md-play' /></span><FormattedMessage id='home.how_it_works' defaultMessage='How it works' /></button> <button className='cta button alt' onClick={this.handleHowItWorksClick}><span className='icon-circled'><span className='ion-md-play' /></span><FormattedMessage id='home.how_it_works' defaultMessage='How it works' /></button>
......
...@@ -72,7 +72,9 @@ class Wizard extends React.PureComponent { ...@@ -72,7 +72,9 @@ class Wizard extends React.PureComponent {
<div className='wizard-page' id='getting-started'> <div className='wizard-page' id='getting-started'>
<h1><i className='ion-md-person-add' /> <FormattedMessage id='wizard.sign_up' defaultMessage='Sign up' /></h1> <h1><i className='ion-md-person-add' /> <FormattedMessage id='wizard.sign_up' defaultMessage='Sign up' /></h1>
<p className='lead'><FormattedMessage id='wizard.hint2' defaultMessage='All you need to do to sign up is choose a server. Just like when signing up for an e-mail address, one server is going to be hosting your account and be part of your identity.' /></p> <p className='lead'>
<FormattedMessage id='wizard.hint2' defaultMessage='All you need to do to sign up is choose a server. Just like when signing up for an e-mail address, one server is going to be hosting your account and be part of your identity.' /> <strong><FormattedMessage id='wizard.hint5' defaultMessage='Remember, you can follow and talk to anyone from any server, regardless of your choice!' /></strong>
</p>
<form className='wizard-controls'> <form className='wizard-controls'>
<div className='row'> <div className='row'>
......
...@@ -11,7 +11,7 @@ const messages = defineMessages({ ...@@ -11,7 +11,7 @@ const messages = defineMessages({
const WizardRow = ({ instance, intl }) => { const WizardRow = ({ instance, intl }) => {
const theme = (instance.info && instance.info.theme) || 'General'; const theme = (instance.info && instance.info.theme) || 'General';
const description = (instance.info && instance.info.short_description) || theme; const description = (instance.info && instance.info.short_description) || theme;
const population = instance.users >= 1000 ? `${intl.formatNumber(instance.users / 1000, { maximumFractionDigits: 1 })}k` : instance.users; const population = instance.users >= 1000 ? `${intl.formatNumber(instance.users / 1000, { maximumFractionDigits: 1 })}K` : instance.users;
let stabilityColor, stabilityLabel, let stabilityColor, stabilityLabel,
populationColor; populationColor;
...@@ -27,9 +27,9 @@ const WizardRow = ({ instance, intl }) => { ...@@ -27,9 +27,9 @@ const WizardRow = ({ instance, intl }) => {
stabilityColor = 'red'; stabilityColor = 'red';
} }
if (instance.users > 150000) { if (instance.users > 200000) {
populationColor = 'red'; populationColor = 'red';
} else if (instance.users > 50000) { } else if (instance.users > 100000) {
populationColor = 'yellow'; populationColor = 'yellow';
} else { } else {
populationColor = 'green'; populationColor = 'green';
......
...@@ -43,6 +43,11 @@ ...@@ -43,6 +43,11 @@
direction: rtl; direction: rtl;
} }
strong {
font-weight: 700;
color: $lightest;
}
&.hint { &.hint {
color: $lighter; color: $lighter;
margin: 30px 0; margin: 30px 0;
......
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