feat: Add a developer champion banner to the homepage

newrelic · Jun 24, 2020 · 64a85e3 · 64a85e3
1 parent 25bff81
commit 64a85e3
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 5 deletions.
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -8,7 +8,6 @@ import SEO from '../components/Seo';
 import GuideListing from '../components/GuideListing/GuideListing';
 import GuideTile from '../components/GuideTile';
 import PageTitle from '../components/PageTitle';
-import Section from '../components/Section';
 import Video from '../components/Video';
 import FeatherIcon from '../components/FeatherIcon';
 import ExternalLink from '../components/ExternalLink';
@@ -101,7 +100,7 @@ const IndexPage = ({ data, pageContext }) => {
           />
         </section>
 
-        <Section backgroundBanner>
+        <section className={cx(styles.section, styles.stripedSection)}>
           <GuideListing className={styles.guideListing}>
             <header className={styles.guideListingHeader}>
               <GuideListing.Heading className={cx(styles.guideListingHeading)}>
@@ -117,9 +116,9 @@ const IndexPage = ({ data, pageContext }) => {
               ))}
             </GuideListing.List>
           </GuideListing>
-        </Section>
+        </section>
 
-        <GuideListing className={styles.guideListing}>
+        <GuideListing className={styles.section}>
           <GuideListing.Heading className={styles.guideListingHeading}>
             Get inspired
           </GuideListing.Heading>
@@ -152,6 +151,24 @@ const IndexPage = ({ data, pageContext }) => {
           </ExternalLink>{' '}
           built by the New Relic community.
         </p>
+
+        <section className={cx(styles.section, styles.stripedSection)}>
+          <h1>New Relic Developer Champions</h1>
+          <p>
+            New Relic Champions are solving 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">
+            <button type="button">
+              Nominate a Developer Champion
+              <FeatherIcon
+                className={styles.externalLinkIcon}
+                name="external-link"
+              />
+            </button>
+          </ExternalLink>
+        </section>
       </Layout>
     </PageContext.Provider>
   );

diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
@@ -31,7 +31,7 @@
 }
 
 .guideListing {
-  margin-top: 6rem;
+  margin-top: 0;
 }
 
 .guideListingHeader {
@@ -69,3 +69,12 @@
 .externalLinkIcon {
   margin-left: 0.25rem;
 }
+
+.section {
+  margin-top: 4rem;
+}
+
+.stripedSection {
+  padding: 2rem;
+  background: var(--color-neutrals-100);
+}