From 172f1bebd245043c7dcecd3b9dceb3e5324ab15c Mon Sep 17 00:00:00 2001
From: Daniel Golden <danielgolden90@gmail.com>
Date: Wed, 2 Sep 2020 11:07:31 -0400
Subject: [PATCH] feat: add markup and styles for tracks section

---
 src/components/FeatherIcon.js             | 13 +++++++
 src/images/nerd-days/icon-open-source.svg | 12 ++++++
 src/images/nerd-days/icon-road.svg        | 44 ++++++++++++++++++++++
 src/images/nerd-days/icon-shapes.svg      | 10 +++++
 src/pages/nerd-days.js                    | 35 +++++++++++++++++
 src/pages/nerd-days.module.scss           | 46 +++++++++++++++++++++--
 6 files changed, 157 insertions(+), 3 deletions(-)
 create mode 100644 src/images/nerd-days/icon-open-source.svg
 create mode 100644 src/images/nerd-days/icon-road.svg
 create mode 100644 src/images/nerd-days/icon-shapes.svg

diff --git a/src/components/FeatherIcon.js b/src/components/FeatherIcon.js
index a094fd270..55dbe9316 100644
--- a/src/components/FeatherIcon.js
+++ b/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 = {
diff --git a/src/images/nerd-days/icon-open-source.svg b/src/images/nerd-days/icon-open-source.svg
new file mode 100644
index 000000000..2327f94fa
--- /dev/null
+++ b/src/images/nerd-days/icon-open-source.svg
@@ -0,0 +1,12 @@
+<svg width="81" height="78" viewBox="0 0 81 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1" fill="white">
+<path d="M53.1393 75.9236C53.4995 76.9678 54.6403 77.5271 55.6652 77.1152C63.7829 73.8532 70.6266 68.0102 75.1206 60.4612C79.9564 52.3382 81.7588 42.7649 80.2083 33.4394C78.6578 24.1139 73.8545 15.639 66.6504 9.51774C59.4463 3.39649 50.307 0.0246063 40.8535 0.000134028C31.4001 -0.0243383 22.2434 3.30019 15.0077 9.38405C7.77205 15.4679 2.92495 23.9179 1.32618 33.2352C-0.272594 42.5525 1.48029 52.135 6.27393 60.283C10.7288 67.8551 17.5421 73.7335 25.6428 77.0375C26.6656 77.4546 27.8093 76.9013 28.1748 75.859L36.7659 51.361C37.1314 50.3187 36.5679 49.1935 35.6185 48.6289C34.1746 47.7702 32.9597 46.557 32.097 45.0907C30.8939 43.0457 30.454 40.6406 30.8552 38.3021C31.2565 35.9636 32.473 33.8428 34.2891 32.3159C36.1051 30.7889 38.4033 29.9545 40.776 29.9607C43.1487 29.9668 45.4425 30.8131 47.2506 32.3494C49.0587 33.8858 50.2643 36.0128 50.6534 38.3534C51.0426 40.6939 50.5902 43.0967 49.3765 45.1355C48.5063 46.5972 47.285 47.8041 45.8367 48.6553C44.8845 49.215 44.3151 50.3373 44.6753 51.3815L53.1393 75.9236Z"/>
+</mask>
+<path d="M53.1393 75.9236C53.4995 76.9678 54.6403 77.5271 55.6652 77.1152C63.7829 73.8532 70.6266 68.0102 75.1206 60.4612C79.9564 52.3382 81.7588 42.7649 80.2083 33.4394C78.6578 24.1139 73.8545 15.639 66.6504 9.51774C59.4463 3.39649 50.307 0.0246063 40.8535 0.000134028C31.4001 -0.0243383 22.2434 3.30019 15.0077 9.38405C7.77205 15.4679 2.92495 23.9179 1.32618 33.2352C-0.272594 42.5525 1.48029 52.135 6.27393 60.283C10.7288 67.8551 17.5421 73.7335 25.6428 77.0375C26.6656 77.4546 27.8093 76.9013 28.1748 75.859L36.7659 51.361C37.1314 50.3187 36.5679 49.1935 35.6185 48.6289C34.1746 47.7702 32.9597 46.557 32.097 45.0907C30.8939 43.0457 30.454 40.6406 30.8552 38.3021C31.2565 35.9636 32.473 33.8428 34.2891 32.3159C36.1051 30.7889 38.4033 29.9545 40.776 29.9607C43.1487 29.9668 45.4425 30.8131 47.2506 32.3494C49.0587 33.8858 50.2643 36.0128 50.6534 38.3534C51.0426 40.6939 50.5902 43.0967 49.3765 45.1355C48.5063 46.5972 47.285 47.8041 45.8367 48.6553C44.8845 49.215 44.3151 50.3373 44.6753 51.3815L53.1393 75.9236Z" stroke="url(#paint0_linear)" stroke-width="8" mask="url(#path-1-inside-1)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="98.5278" y1="83.0769" x2="-28.7133" y2="24.2967" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0069CE"/>
+<stop offset="1" stop-color="#0FB7C9"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/images/nerd-days/icon-road.svg b/src/images/nerd-days/icon-road.svg
new file mode 100644
index 000000000..f6493bf5e
--- /dev/null
+++ b/src/images/nerd-days/icon-road.svg
@@ -0,0 +1,44 @@
+<svg width="71" height="78" viewBox="0 0 71 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.62303 72.4912C48.0769 49.4031 7.47358 23.4939 27.5765 2" stroke="url(#paint0_linear)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M61.9159 74.1601C74.5188 32.682 27.7975 20.1078 36.4085 2.12951" stroke="url(#paint1_linear)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M38.9004 63.0373C38.9332 62.9335 39.026 62.8601 39.1347 62.8547L43.1106 62.6571C43.3017 62.6476 43.4324 62.8476 43.3469 63.0188C42.9061 63.9023 41.7551 66.215 40.4371 68.9114C38.9172 72.0208 36.8082 74.6199 36.4042 75.1055C36.3603 75.1584 36.297 75.1889 36.2283 75.1923L32.2617 75.3894C32.0537 75.3997 31.9228 75.1675 32.0413 74.9962C32.7598 73.9575 34.6786 71.1444 36.3359 68.3636C38.0644 65.4631 38.7249 63.5929 38.9004 63.0373Z" fill="url(#paint2_linear)"/>
+<path d="M39.9286 43.2317C39.8492 43.0623 39.9726 42.8638 40.1597 42.8638H42.6109C42.6974 42.8638 42.7771 42.9076 42.8207 42.9823C43.1177 43.492 44.25 45.5537 44.25 47.3638C44.25 49.1361 43.8881 51.8735 43.7801 52.6512C43.763 52.7741 43.658 52.8638 43.5339 52.8638H41.0465C40.8916 52.8638 40.7734 52.7248 40.7976 52.5717C40.9225 51.7819 41.25 49.5499 41.25 47.8638C41.25 46.2288 40.3262 44.0807 39.9286 43.2317Z" fill="url(#paint3_linear)"/>
+<path d="M36.75 32.8638H39.1182L39.5129 33.9245C40.128 34.7796 40.5209 36.7838 40.6502 37.5285C40.6763 37.679 40.5598 37.8138 40.407 37.8138H38.5677C38.434 37.8138 38.3232 37.7087 38.3113 37.5756C38.253 36.9253 38.0173 35.0917 37.1576 33.9416C37.149 33.9301 37.1412 33.9178 37.1347 33.9051C36.75 33.1551 36.75 32.8638 36.75 32.8638Z" fill="url(#paint4_linear)"/>
+<path d="M34.2948 27.1479C34.1597 26.9688 34.3041 26.7054 34.5272 26.7285L35.648 26.8449C35.7262 26.853 35.7956 26.8968 35.8359 26.9643C36.0705 27.3576 36.898 28.7522 37.3804 29.6628C37.4721 29.8358 37.3328 30.036 37.138 30.0158L35.9375 29.8911C35.8163 29.8785 35.723 29.7801 35.6978 29.6609C35.5322 28.8782 34.7671 27.7739 34.2948 27.1479Z" fill="url(#paint5_linear)"/>
+<path d="M31.6756 21.7727C31.511 21.589 31.6751 21.2827 31.9177 21.327L32.8539 21.4981C32.9157 21.5093 32.9708 21.5432 33.0084 21.5936C33.2119 21.8657 33.9027 22.7942 34.3694 23.4774C34.4912 23.6558 34.3382 23.8827 34.1257 23.8439L33.0315 23.644C32.9183 23.6233 32.8352 23.5276 32.8017 23.4175C32.6542 22.9324 32.1074 22.2548 31.6756 21.7727Z" fill="url(#paint6_linear)"/>
+<path d="M29.6949 17.4175C29.6577 17.2537 29.799 17.1135 29.9648 17.1403L30.6244 17.2468C30.7453 17.2663 30.8353 17.37 30.8484 17.4918C30.8799 17.7836 30.9799 18.3348 31.2978 18.868C31.4276 19.0858 31.2364 19.4516 30.986 19.4112L30.7474 19.3727C30.6998 19.365 30.6551 19.3439 30.6205 19.3102C30.0663 18.7696 29.8028 17.8925 29.6949 17.4175Z" fill="url(#paint7_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="47.4453" y1="-11.3639" x2="-15.9415" y2="-3.79066" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0069CE"/>
+<stop offset="1" stop-color="#0FB7C9"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="40.1154" y1="-15.3602" x2="4.36545" y2="11.7995" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0069CE"/>
+<stop offset="1" stop-color="#0FB7C9"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="36.8426" y1="78.6471" x2="29.0661" y2="73.3944" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0069CE"/>
+<stop offset="1" stop-color="#0FB7C9"/>
+</linearGradient>
+<linearGradient id="paint3_linear" x1="45.25" y1="53.2484" x2="36.925" y2="51.5178" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0069CE"/>
+<stop offset="1" stop-color="#0FB7C9"/>
+</linearGradient>
+<linearGradient id="paint4_linear" x1="41.5741" y1="38.0042" x2="34.8667" y2="35.5334" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0069CE"/>
+<stop offset="1" stop-color="#0FB7C9"/>
+</linearGradient>
+<linearGradient id="paint5_linear" x1="38.4565" y1="30.2687" x2="33.246" y2="26.262" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0069CE"/>
+<stop offset="1" stop-color="#0FB7C9"/>
+</linearGradient>
+<linearGradient id="paint6_linear" x1="35.5351" y1="24.1826" x2="31.9812" y2="19.6368" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0069CE"/>
+<stop offset="1" stop-color="#0FB7C9"/>
+</linearGradient>
+<linearGradient id="paint7_linear" x1="32.437" y1="19.7265" x2="29.064" y2="16.9668" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0069CE"/>
+<stop offset="1" stop-color="#0FB7C9"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/images/nerd-days/icon-shapes.svg b/src/images/nerd-days/icon-shapes.svg
new file mode 100644
index 000000000..38997b3b4
--- /dev/null
+++ b/src/images/nerd-days/icon-shapes.svg
@@ -0,0 +1,10 @@
+<svg width="101" height="81" viewBox="0 0 101 81" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M63.1539 11.8868L70.142 37.9668L96.222 30.9787L89.2339 4.89872L63.1539 11.8868ZM60.1867 8.54077C59.1198 8.82665 58.4866 9.92332 58.7725 10.9903L66.7959 40.934C67.0818 42.0009 68.1785 42.6341 69.2454 42.3482L99.1891 34.3248C100.256 34.0389 100.889 32.9422 100.603 31.8753L92.5799 1.93159C92.294 0.864657 91.1974 0.231492 90.1304 0.517375L60.1867 8.54077ZM20.75 44.2005C29.5866 44.2005 36.75 37.037 36.75 28.2005C36.75 19.3639 29.5866 12.2005 20.75 12.2005C11.9134 12.2005 4.75 19.3639 4.75 28.2005C4.75 37.037 11.9134 44.2005 20.75 44.2005ZM20.75 48.2005C31.7957 48.2005 40.75 39.2462 40.75 28.2005C40.75 17.1548 31.7957 8.20049 20.75 8.20049C9.7043 8.20049 0.75 17.1548 0.75 28.2005C0.75 39.2462 9.7043 48.2005 20.75 48.2005ZM38.0276 76.7005L52.75 51.2005L67.4724 76.7005H38.0276ZM51.018 46.2005C51.7878 44.8672 53.7122 44.8672 54.482 46.2005L72.6686 77.7005C73.4384 79.0338 72.4761 80.7005 70.9365 80.7005H34.5635C33.0239 80.7005 32.0616 79.0338 32.8314 77.7005L51.018 46.2005Z" fill="url(#paint0_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="122.877" y1="83.7871" x2="-22.0264" y2="0.440425" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0069CE"/>
+<stop offset="0.0001" stop-color="#0069CE"/>
+<stop offset="1" stop-color="#0FB7C9"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/pages/nerd-days.js b/src/pages/nerd-days.js
index 81b32cb83..3ec63191e 100644
--- a/src/pages/nerd-days.js
+++ b/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>
     </>
diff --git a/src/pages/nerd-days.module.scss b/src/pages/nerd-days.module.scss
index 3bda78ebd..9d83ee64d 100644
--- a/src/pages/nerd-days.module.scss
+++ b/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;
 }
\ No newline at end of file