feat: Add supporter UI to /welcome

client/src/components/Supporters.js

@@ -0,0 +1,57 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Button, ProgressBar } from '@freecodecamp/react-bootstrap';
+
+import FullWidthRow from '../components/helpers/FullWidthRow';
+
+import './supporters.css';
+
+const propTypes = { isDonating: PropTypes.bool.isRequired };
+
+function Supporters({ isDonating }) {
+  return (
+    <Fragment>
+      <FullWidthRow>
+        <h2>Support an open future.</h2>
+      </FullWidthRow>
+      <FullWidthRow>
+        <div id='supporter-progress-wrapper'>
+          <ProgressBar
+            label={'4000 supporters out of 10,000 goal'}
+            max={10000}
+            now={4000}
+          />
+        </div>
+      </FullWidthRow>
+      <FullWidthRow>
+        <b>
+          <p>
+            freeCodeCamp.org is a tiny non-profit that's helping millions of
+            people learn to code for free. <br />
+            {isDonating
+              ? 'Thank you for supporting freeCodeCamp.org'
+              : 'Join 4,000 supporters. Your $5 / month donation will help ' +
+                'keep tech education free and open.'}
+          </p>
+        </b>
+      </FullWidthRow>
+      {isDonating ? null : (
+        <FullWidthRow>
+          <Button
+            bsSize='lg'
+            bsStyle='primary'
+            href='https://donate.freecodecamp.org'
+            target='_blank'
+            >
+            Click here to become a Supporter
+          </Button>
+        </FullWidthRow>
+      )}
+    </Fragment>
+  );
+}
+
+Supporters.displayName = 'Supporters';
+Supporters.propTypes = propTypes;
+
+export default Supporters;

client/src/components/supporters.css

@@ -0,0 +1,7 @@
+#supporter-progress-wrapper .progress {
+  height: 38px;
+}
+
+#supporter-progress-wrapper .progress-bar {
+  padding-top: 8px;
+}

client/src/pages/welcome.js

@@ -10,6 +10,7 @@ import Helmet from 'react-helmet';
 import { Loader, Spacer } from '../components/helpers';
 import CurrentChallengeLink from '../components/helpers/CurrentChallengeLink';
 import Layout from '../components/layouts/Default';
+import Supporters from '../components/Supporters';
 import {
   userSelector,
   userFetchStateSelector,
@@ -32,7 +33,8 @@ const propTypes = {
     completedChallengeCount: PropTypes.number,
     completedProjectCount: PropTypes.number,
     completedCertCount: PropTypes.number,
-    completedLegacyCertCount: PropTypes.number
+    completedLegacyCertCount: PropTypes.number,
+    isDonating: PropTypes.bool
   })
 };
 
@@ -53,7 +55,8 @@ function Welcome({
     completedChallengeCount: completedChallenges = 0,
     completedProjectCount = 0,
     completedCertCount = 0,
-    completedLegacyCertCount: completedLegacyCerts = 0
+    completedLegacyCertCount: completedLegacyCerts = 0,
+    isDonating
   }
 }) {
   if (pending && !complete) {
@@ -91,6 +94,8 @@ function Welcome({
             </Col>
           </Row>
           <Spacer />
+          <Supporters isDonating={isDonating} />
+          <Spacer size={2} />
           <Row>
             <Col sm={8} smOffset={2} xs={12}>
               <a