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 { FormattedHTMLMessage as FormattedMessage } from 'react-intl';
import React, { PureComponent, Fragment } from 'react';
import PropTypes from 'prop-types';
import { injectIntl, FormattedHTMLMessage as FormattedMessage } from 'react-intl';
import { HashLink as Link } from 'react-router-hash-link';
import AnchorLink from './AnchorLink';
import Modal from 'react-responsive-modal';
......@@ -32,6 +33,8 @@ import cloud2 from './assets/cloud2.png';
import cloud3 from './assets/cloud3.png';
import cloud4 from './assets/cloud4.png';
const USERS_NUM_APPROX = 1571504;
const styles = {
modal: {
padding: 0,
......@@ -60,6 +63,10 @@ const playerOpts = {
export default class Home extends PureComponent {
static contextTypes = {
intl: PropTypes.object.isRequired,
};
state = {
open: false,
};
......@@ -88,6 +95,7 @@ export default class Home extends PureComponent {
render () {
const { open } = this.state;
const { intl } = this.context;
return (
<div>
......@@ -96,7 +104,7 @@ export default class Home extends PureComponent {
<div className='text'>
<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>
<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 {
<div className='wizard-page' id='getting-started'>
<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'>
<div className='row'>
......
......@@ -11,7 +11,7 @@ const messages = defineMessages({
const WizardRow = ({ instance, intl }) => {
const theme = (instance.info && instance.info.theme) || 'General';
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,
populationColor;
......@@ -27,9 +27,9 @@ const WizardRow = ({ instance, intl }) => {
stabilityColor = 'red';
}
if (instance.users > 150000) {
if (instance.users > 200000) {
populationColor = 'red';
} else if (instance.users > 50000) {
} else if (instance.users > 100000) {
populationColor = 'yellow';
} else {
populationColor = 'green';
......
......@@ -43,6 +43,11 @@
direction: rtl;
}
strong {
font-weight: 700;
color: $lightest;
}
&.hint {
color: $lighter;
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