feat(support): add descriptions to sponsor and backer sections

This is a follow up to #1466 based on @xdamman's suggestion. It adds a short
description above the avatars to describe the rank and contributions.

Author: skipjack

components/support/support-style.scss

@@ -4,7 +4,18 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  padding: 1em 0.5em;
+  padding: 0 0.5em 1em;
+
+  &__description {
+    flex: 0 0 100%;
+    margin-bottom: 1em;
+  }
+
+  &__rank {
+    text-transform: capitalize;
+
+    &:after { content: ' '; }
+  }
 
   &__item {
     position: relative;

components/support/support.jsx

@@ -47,6 +47,19 @@ export default class Support extends React.Component {
 
     return (
       <div className="support">
+        <div className="support__description">
+          { type === 'sponsors' ? (
+            <p>
+              <b className="support__rank">{ rank } sponsors</b>
+              <span>are those who have pledged { minimum ? `$${minimum}` : '' } { maximum ? `to $${maximum}` : 'or more' } to webpack.</span>
+            </p>
+          ) : (
+            <p>
+              The following <b>Backers</b> are individuals who have contributed various amounts of money in order to help support webpack. Every little bit helps, and we appreciate even the smallest contributions.
+            </p>
+          )}
+        </div>
+
         {
           supporters.map((supporter, index) => (
             <a key={ supporter.id || supporter.username || index }