feat: add markup and styles for tracks section

src/components/FeatherIcon.js

@@ -14,6 +14,12 @@ const FeatherIcon = ({ className, name, size = '1em', ...props }) => {
       className={cx(styles.icon, className)}
       style={{ width: size, height: size }}
     >
+      <defs>
+        <linearGradient gradientUnits="userSpaceOnUse" id="nerdDaysGradient">
+          <stop offset="0%" stop-color="#0FB7C9" />
+          <stop offset="150%" stop-color="#0069CE" />
+        </linearGradient>
+      </defs>
       {paths}
     </svg>
   ) : null;
@@ -147,6 +153,13 @@ const ICONS = {
       <path d="M16 3.13a4 4 0 0 1 0 7.75" />
     </>
   ),
+  eye: (
+    <>
+
+      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+      <circle cx="12" cy="12" r="3" />
+    </>
+  ),
 };
 
 FeatherIcon.propTypes = {

src/pages/nerd-days.js

@@ -3,8 +3,12 @@ import cx from 'classnames';
 import PageLayout from '../components/PageLayout';
 import { Button, ExternalLink } from '@newrelic/gatsby-theme-newrelic';
 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 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';
 
 const NerdDaysPage = () => {
   return (
@@ -155,6 +159,37 @@ const NerdDaysPage = () => {
               </li>
             </ul>
           </section>
+
+          <section className={cx(styles.tracksSection, styles.eventSection, styles.alternateSection)}>
+            <h3 className={cx(styles.sectionHeading)}>Tracks</h3>
+            <p className={cx(styles.sectionDescription)}>
+              Tracks will vary by region. All sessions will be recorded and 
+              distributed after the event.
+            </p>
+
+            <ul className={cx(styles.tracksList)}>
+              <li className={cx(styles.tracksListItem)}>
+                <FeatherIcon className={cx(styles.eyeIcon, styles.trackIcon)} name="eye" size="87" />
+                <h5 className={cx(styles.tracksListItemName)}>Observability</h5>
+              </li>
+              <li className={cx(styles.tracksListItem)}>
+                <FeatherIcon className={cx(styles.cloudMigrationIcon, styles.trackIcon)} name="upload-cloud" size="87" />
+                <h5 className={cx(styles.tracksListItemName)}>Cloud Migration</h5>
+              </li>
+              <li className={cx(styles.tracksListItem)}>
+                <img className={cx(styles.trackIcon)} src={openSourceIcon} alt="open source"/>
+                <h5 className={cx(styles.tracksListItemName)}>Open Source</h5>
+              </li>
+              <li className={cx(styles.tracksListItem)}>
+                <img className={cx(styles.trackIcon)} src={roadIcon} alt="devops journey"/>
+                <h5 className={cx(styles.tracksListItemName)}>Devops Journey</h5>
+              </li>
+              <li className={cx(styles.tracksListItem)}>
+                <img className={cx(styles.trackIcon)} src={shapesIcon} alt="Fundamentals"/>
+                <h5 className={cx(styles.tracksListItemName)}>fundamentals</h5>
+              </li>
+            </ul>
+          </section>
         </PageLayout.Content>
       </PageLayout>
     </>

src/pages/nerd-days.module.scss

@@ -20,7 +20,7 @@
 .heroLogoContainer {
   display: inline-block;
   max-width: 364px;
-  padding: 20px 20px 0;
+  padding: 10px 20px 0;
   text-align: center;
   background-color: #fff;
   box-shadow: 
@@ -116,7 +116,14 @@ a.ctaButton {
 }
 
 .eventSection {
-  padding: 70px 0 50px;
+  padding: 65px 0 65px;
+  position: relative;
+
+  &.alternateSection {
+    background-color: #F4F5F5;
+    margin-left:-32px;
+    margin-right: -32px;
+  }
 }
 
 .sectionHeading {
@@ -128,7 +135,7 @@ a.ctaButton {
 .sectionDescription {
   margin-bottom: 40px;
   text-align: center;
-  color: var(--color-neutral-900);
+  color: var(--nr1--base-colors--ui--gray--3);
   font-size: 16px;
 }
 
@@ -191,4 +198,37 @@ a.ctaButton {
     background-image: linear-gradient(294.8deg, #0069CE -16.42%, #0FB7C9 115.59%);
     clip-path: polygon(0 0, 100% 0%, 100% 0%, 0% 100%);
   }
+}
+
+.eyeIcon,
+.cloudMigrationIcon {
+  stroke: url(#nerdDaysGradient);
+  stroke-width: 1.12px;
+}
+
+.tracksList {
+  max-width: 900px;
+  margin: 0 auto;
+  list-style-type: none;
+  display: flex;
+  justify-content: space-between;
+}
+
+.tracksListItem {
+  display: flex;
+  max-width: 175px;
+  justify-content: space-between;
+  flex-direction: column;
+  align-items: center;
+}
+
+.trackIcon {
+  margin-bottom: 14px;
+}
+
+.tracksListItemName {
+  text-transform: uppercase;
+  font-size: 13px;
+  letter-spacing: .75px;
+  font-weight: bold;
 }