feat: Add champion program icons section

newrelic · Jun 26, 2020 · 14b091a · 14b091a
1 parent 39fa513
commit 14b091a
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 0 deletions.
diff --git 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
@@ -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);
+}