feat: add final engagement section

newrelic · Sep 3, 2020 · ee6f797 · ee6f797
1 parent f3b5bf6
commit ee6f797
Show file tree

Hide file tree

Showing 4 changed files with 199 additions and 1 deletion.
diff --git a/src/components/FeatherIcon.js b/src/components/FeatherIcon.js
@@ -159,6 +159,22 @@ const ICONS = {
       <circle cx="12" cy="12" r="3" />
     </>
   ),
+  code: (
+    <>
+      <polyline points="16 18 22 12 16 6" />
+      <polyline points="8 6 2 12 8 18" />
+    </>
+  ),
+  'message-square': (
+    <>
+      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+    </>
+  ),
+  twitter: (
+    <>
+      <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" />
+    </>
+  ),
 };
 
 FeatherIcon.propTypes = {

diff --git a/src/images/nerd-days/hopin-logo.svg b/src/images/nerd-days/hopin-logo.svg
diff --git a/src/pages/nerd-days.js b/src/pages/nerd-days.js
@@ -6,6 +6,7 @@ import SEO from '../components/Seo';
 import FeatherIcon from '../components/FeatherIcon';
 import nrLogo from '../images/nerd-days/nr-logo.svg';
 import styles from './nerd-days.module.scss';
+import hopinLogo from '../images/nerd-days/hopin-logo.svg';
 import roadIcon from '../images/nerd-days/icon-road.svg';
 import shapesIcon from '../images/nerd-days/icon-shapes.svg';
 import openSourceIcon from '../images/nerd-days/icon-open-source.svg';
@@ -422,14 +423,87 @@ const NerdDaysPage = () => {
 
           <section
             className={cx(
-              styles.engageSection,
+              styles.engagementSection,
               styles.eventSection,
               styles.alternateSection
             )}
           >
             <h3 className={cx(styles.sectionHeading)}>
               Engage with the developer community
             </h3>
+
+            <ul className={cx(styles.engagementOptions)}>
+              <li className={cx(styles.engagementOption)}>
+                <a
+                  href="https://twitter.com/newrelic"
+                  className={cx(styles.engagementOptionLink)}
+                >
+                  <span className={cx(styles.engagementOptionLabel)}>
+                    @newrelic
+                  </span>
+                  <span className={cx(styles.engagementOptionIconContainer)}>
+                    <FeatherIcon
+                      className={cx(styles.engagementOptionIcon)}
+                      name="twitter"
+                      size="23"
+                    />
+                  </span>
+                </a>
+              </li>
+              <li
+                className={cx(
+                  styles.engagementOption,
+                  styles.engagementOptionForum
+                )}
+              >
+                <a
+                  href="https://discuss.newrelic.com/"
+                  className={cx(styles.engagementOptionLink)}
+                >
+                  <span className={cx(styles.engagementOptionLabel)}>
+                    New Relic Forum
+                  </span>
+                  <span className={cx(styles.engagementOptionIconContainer)}>
+                    <FeatherIcon
+                      className={cx(styles.engagementOptionIcon)}
+                      name="message-square"
+                      size="20"
+                    />
+                  </span>
+                </a>
+              </li>
+              <li className={cx(styles.engagementOption)}>
+                <a
+                  href="https://developer.newrelic.com/"
+                  className={cx(styles.engagementOptionLink)}
+                >
+                  <span className={cx(styles.engagementOptionLabel)}>
+                    Developers
+                  </span>
+                  <span className={cx(styles.engagementOptionIconContainer)}>
+                    <FeatherIcon
+                      className={cx(styles.engagementOptionIcon)}
+                      name="code"
+                      size="26"
+                    />
+                  </span>
+                </a>
+              </li>
+            </ul>
+
+            <a
+              href="https://hopin.to/?ref=developer.newrelic.com"
+              className={cx(styles.sponsorLogoContainer)}
+            >
+              <img
+                className={cx(styles.sponsorLogo)}
+                src={hopinLogo}
+                alt="Hoping logo"
+              />
+              <p className={cx(styles.sponsorLogoCaption)}>
+                Event powered by Hopin
+              </p>
+            </a>
           </section>
         </PageLayout.Content>
       </PageLayout>

diff --git a/src/pages/nerd-days.module.scss b/src/pages/nerd-days.module.scss
@@ -337,4 +337,88 @@ a.ctaButton {
 
 .agendaSessionSecondary {
   background-color: #F4F5F5;
+}
+
+.engagementSection {
+  padding-bottom: 30px;
+  text-align: center;
+}
+
+.engagementOptions {
+  display: inline-flex;
+  list-style-type: none;
+  align-items: center;
+  margin-top: 20px;
+  margin-bottom: 50px;
+}
+
+.engagementOption {
+  margin-right: 35px;
+  border: 3px solid #006C75;
+  border-radius: 4px;
+  box-shadow: 
+    0 15px 20px rgba(4, 89, 97, 0.1), 
+    0px 6.26664px 8.35552px rgba(4, 89, 97, 0.0718854), 
+    0px 3.35045px 4.46726px rgba(4, 89, 97, 0.0596107), 
+    0px 1.87823px 2.50431px rgba(4, 89, 97, 0.05), 
+    0px 0.997515px 1.33002px rgba(4, 89, 97, 0.0403893), 
+    0px 0.415088px 0.553451px rgba(4, 89, 97, 0.0281146);
+  transition: transform .095s ease-out;
+
+  &:last-child {
+    margin: 0;
+  }
+
+  &:hover {
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: translateY(2px);
+  }
+}
+
+.engagementOptionLink {
+  display: inline-flex;
+  align-items: stretch;
+  height: 44px;
+  font-weight: 600;
+}
+
+.engagementOptionLabel {
+  font-size: 20px;
+  display: inline-flex;
+  padding: 6px 14px;
+  align-items: center;
+}
+
+.engagementOptionIconContainer {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 0 11px 0 24px;
+  background-color: #006C75;
+  border-right: 1px solid #006C75;
+  clip-path: polygon(20% 0, 100% 0%, 100% 100%, 0% 100%);
+}
+
+.engagementOptionIcon {
+  stroke: #fff;
+  stroke-width: 2px;
+
+  .engagementOptionForum & {
+    stroke-width: 2.5px;
+  }
+}
+
+.sponsorLogoContainer {
+  display: block;
+  width: 200px;
+  margin: 10px auto 0;
+  margin-top: 10px;
+}
+
+.sponsorLogoCaption {
+  color: #999;
 }