Merge pull request #266 from newrelic/jerel/dev-champions

Developer champion page

src/components/FeatherIcon.js

@@ -105,20 +105,33 @@ const ICONS = {
       <polyline points="16 16 12 12 8 16" />
     </>
   ),
-
   x: (
     <>
       <line x1="18" y1="6" x2="6" y2="18" />
       <line x1="6" y1="6" x2="18" y2="18" />
     </>
   ),
-
   award: (
     <>
       <circle cx="12" cy="8" r="7" />
       <polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88" />
     </>
   ),
+  trello: (
+    <>
+      <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+      <rect x="7" y="7" width="3" height="9" />
+      <rect x="14" y="7" width="3" height="5" />
+    </>
+  ),
+  users: (
+    <>
+      <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+      <circle cx="9" cy="7" r="4" />
+      <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+      <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+    </>
+  ),
 };
 
 FeatherIcon.propTypes = {

src/components/FeatherIcon.module.scss

@@ -1,7 +1,7 @@
 .icon {
   fill: none;
   stroke: currentColor;
-  stroke-width: 2;
+  stroke-width: var(--feather-icon-stroke-width, 2);
   stroke-linecap: round;
   stroke-linejoin: round;
 }

src/data/sidenav.json

@@ -490,6 +490,6 @@
   },
   {
     "displayName": "Developer champions",
-    "url": "/developer-champions"
+    "url": "/developer-champion"
   }
 ]

src/pages/developer-champion.js

@@ -0,0 +1,150 @@
+import React from 'react';
+import cx from 'classnames';
+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';
+import teamMeeting from '../images/developer-champion/team-meeting.jpg';
+import styles from './developer-champion.module.scss';
+
+const DeveloperChampionPage = () => {
+  return (
+    <Layout>
+      <SEO />
+      <PageTitle>New Relic Developer Champions</PageTitle>
+      <section className={cx(styles.section, styles.twoColumn)}>
+        <div>
+          <p>
+            New Relic Champions are the voice of the developer community. As
+            experts and innovators, they are given the resources to not only
+            share the newest product innovations and updates but also provide
+            feedback of the community back to New Relic product and engineering
+            teams.
+          </p>
+          <p>
+            Champions solve big problems using New Relic as their linchpin and
+            are recognized as experts and leaders in the New Relic technical
+            community.{' '}
+          </p>
+          <ExternalLink href="https://forms.gle/Zkdub5e1x4MNqSKW9">
+            Nominate a Developer Champion
+          </ExternalLink>
+        </div>
+        <img
+          className={styles.img}
+          src={devChampionHeader}
+          alt="developer champion header"
+        />
+      </section>
+      <section className={styles.section}>
+        <h2>What do developer champions do?</h2>
+        <p>
+          New Relic Champions demonstrate expertise in using New Relic products
+          by solving large problems and positioning New Relic as a central force
+          in their strategies. The New Relic Champions is a recognition and
+          partnership program designed to acknowledge the developers that are
+          driving innovation within their companies and making top contributions
+          to the developer community. Also committing to making their work
+          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>
+        <ExternalLink
+          className={styles.nominateButton}
+          href="https://forms.gle/Zkdub5e1x4MNqSKW9"
+        >
+          <button type="button">
+            Nominate a Developer Champion{' '}
+            <FeatherIcon
+              name="external-link"
+              className={styles.externalLinkIcon}
+            />
+          </button>
+        </ExternalLink>
+      </section>
+      <section className={cx(styles.section, styles.twoColumn)}>
+        <img
+          className={styles.img}
+          src={uptimeEverythingHeader}
+          alt="uptime everything header"
+        />
+        <div>
+          <h2>Why should you join and how will we support?</h2>
+          <p>
+            As a benefit of being a Developer Champion, New Relic provides
+            Champions unique access to our Developer Advocacy team and the
+            resources of our product organization as well as specialized
+            recognition and rewards.
+          </p>
+        </div>
+      </section>
+      <section className={styles.section}>
+        <h2>Developer Champions Benefits:</h2>
+        <ul>
+          <li>
+            Formal, specialized access to the New Relic Product organization
+            <ul>
+              <li>
+                Champions have direct access to the New Relic’s Developer
+                Ecosystem team
+              </li>
+              <li>Custom badge to wear with pride at events</li>
+            </ul>
+          </li>
+          <li>
+            Public recognition on the New Relic Developer website and badging in
+            the New Relic Explorers Hub as a Champion
+          </li>
+          <li>Exclusive Champion-only SWAG</li>
+          <li>Early access program for some of our products (under NDA)</li>
+          <li>
+            Priority access to offsite FutureHack events (including when Lew is
+            participating)
+          </li>
+          <li>
+            Increased Explorer’s Hub support SLA Access to private Developer
+            Champion Explorer’s Hub group
+          </li>
+        </ul>
+      </section>
+      <section className={cx(styles.section, styles.twoColumn)}>
+        <img
+          src={colleaguesOffice}
+          className={styles.img}
+          alt="colleagues office"
+        />
+        <img src={teamMeeting} className={styles.img} alt="team meeting" />
+      </section>
+    </Layout>
+  );
+};
+
+export default DeveloperChampionPage;

src/pages/developer-champion.module.scss

@@ -0,0 +1,41 @@
+.section {
+  &:not(:last-child) {
+    margin-bottom: 4rem;
+  }
+}
+
+.twoColumn {
+  display: grid;
+  grid-template-columns: repeat(2, calc(50% - 1rem));
+  grid-gap: 2rem;
+}
+
+.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);
+}
+
+.nominateButton {
+  grid-column: 2;
+  justify-self: center;
+}
+
+.externalLinkIcon {
+  margin-left: 0.5rem;
+}