From 14b091a6742de2d943da6548cd59d3652173cc8e Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Thu, 25 Jun 2020 17:45:20 -0700
Subject: [PATCH] feat: Add champion program icons section

---
 src/pages/developer-champion.js          | 27 ++++++++++++++++++++++++
 src/pages/developer-champion.module.scss | 17 +++++++++++++++
 2 files changed, 44 insertions(+)

diff --git a/src/pages/developer-champion.js b/src/pages/developer-champion.js
index d9816c88f..430cae74d 100644
--- a/src/pages/developer-champion.js
+++ b/src/pages/developer-champion.js
@@ -43,6 +43,7 @@ import Layout from '../components/Layout';
 import SEO from '../components/Seo';
 import PageTitle from '../components/PageTitle';
 import ExternalLink from '../components/ExternalLink';
+import FeatherIcon from '../components/FeatherIcon';
 import colleaguesOffice from '../images/developer-champion/colleagues-office.jpeg';
 import devChampionHeader from '../images/developer-champion/developer-champion-header.jpg';
 import uptimeEverythingHeader from '../images/developer-champion/uptime-everything-header-image.jpg';
@@ -90,6 +91,32 @@ const DeveloperChampionPage = () => {
           public by:
         </p>
       </section>
+      <section className={cx(styles.section, styles.championProgram)}>
+        <div className={styles.point}>
+          <FeatherIcon className={styles.pointIcon} name="github" size="4rem" />
+          <h4>Open-source contributions</h4>
+          <p>
+            Serving as an open-source author or maintainer for an accepted
+            public project related to New Relic One
+          </p>
+        </div>
+        <div className={styles.point}>
+          <FeatherIcon className={styles.pointIcon} name="trello" size="4rem" />
+          <h4>Content creation</h4>
+          <p>
+            Authoring two pieces of content in the New Relic Explorers Hub / Dev
+            Website
+          </p>
+        </div>
+        <div className={styles.point}>
+          <FeatherIcon className={styles.pointIcon} name="users" size="4rem" />
+          <h4>Community engagement</h4>
+          <p>
+            Delivering and/or organizing two events based around an
+            observability platform theme in which New Relic plays a crucial role
+          </p>
+        </div>
+      </section>
       <section className={cx(styles.section, styles.twoColumn)}>
         <img
           className={styles.img}
diff --git a/src/pages/developer-champion.module.scss b/src/pages/developer-champion.module.scss
index babef3c48..e6956851a 100644
--- a/src/pages/developer-champion.module.scss
+++ b/src/pages/developer-champion.module.scss
@@ -13,3 +13,20 @@
 .img {
   width: 100%;
 }
+
+.championProgram {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 2rem;
+}
+
+.point {
+  text-align: center;
+}
+
+.pointIcon {
+  --feather-icon-stroke-width: 1;
+
+  margin-bottom: 2rem;
+  color: var(--color-brand-400);
+}