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

src/Home.js

-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>

src/Wizard.js

@@ -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'>

src/WizardRow.js

@@ -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';

src/scss/Wizard.scss

@@ -43,6 +43,11 @@
       direction: rtl;
     }
 
+    strong {
+      font-weight: 700;
+      color: $lightest;
+    }
+
     &.hint {
       color: $lighter;
       margin: 30px 0;