feat: add in agenda section and table

newrelic · Sep 2, 2020 · 01b327d · 01b327d
1 parent 172f1be
commit 01b327d
Show file tree

Hide file tree

Showing 2 changed files with 158 additions and 0 deletions.
diff --git a/src/pages/nerd-days.js b/src/pages/nerd-days.js
@@ -190,6 +190,60 @@ const NerdDaysPage = () => {
               </li>
             </ul>
           </section>
+
+          <section className={cx(styles.agendaSection, styles.eventSection)}>
+            <h3 className={cx(styles.sectionHeading)}>Agenda</h3>
+            <p className={cx(styles.sectionDescription)}>
+            We’ve got a packed schedule with thought-leaders of their respective industries
+            </p>
+
+            <div className={cx(styles.agendaContainer)}>
+              <div className={cx(styles.agendaHeaderRow)}>
+                <h5 className={cx(styles.agendaHeaderRowHeading, styles.agendaHeaderRowHeading1)}>Observability</h5>
+                <h5 className={cx(styles.agendaHeaderRowHeading, styles.agendaHeaderRowHeading2)}>Cloud Migration</h5>
+                <h5 className={cx(styles.agendaHeaderRowHeading, styles.agendaHeaderRowHeading3)}>Open Source</h5>
+                <h5 className={cx(styles.agendaHeaderRowHeading, styles.agendaHeaderRowHeading4)}>DevOps Journey</h5>
+                <h5 className={cx(styles.agendaHeaderRowHeading, styles.agendaHeaderRowHeading5)}>Fundamentals</h5>
+              </div>
+              <div className={cx(styles.agendaRow)}>
+                <h4 className={cx(styles.agendaTime)}>8:00 AM</h4>
+                <h4 className={cx(styles.agendaSession, styles.agendaSession5Col)} data-speaker="Jemiah Sius">Welcome</h4>
+              </div>
+              <div className={cx(styles.agendaRow)}>
+                <h4 className={cx(styles.agendaTime)}>8:30 AM</h4>
+                <h4 className={cx(styles.agendaSession, styles.agendaSession2Col)} data-speaker="Anita Baker">Building better apps</h4>
+                <h4 className={cx(styles.agendaSession, styles.agendaSession2Col)} data-speaker="Robert Parr">Open DevOps</h4>
+                <h4 className={cx(styles.agendaSession)} data-speaker="Jeff Osborne">NR 101</h4>
+              </div>
+              <div className={cx(styles.agendaRow)}>
+                <h4 className={cx(styles.agendaTime)}>9:00 AM</h4>
+                <h4 className={cx(styles.agendaSession)} data-speaker="Dylan Hernandez">All seeing eye</h4>
+                <h4 className={cx(styles.agendaSession)} data-speaker="Celso Piña">AWS Ops</h4>
+                <h4 className={cx(styles.agendaSession)} data-speaker="Jeff Osborne">Main v master</h4>
+                <h4 className={cx(styles.agendaSession, styles.agendaSession2Col)} data-speaker="Jemiah Sius">DevOps Journey</h4>
+              </div>
+              <div className={cx(styles.agendaRow)}>
+                <h4 className={cx(styles.agendaTime)}>11:00 AM</h4>
+                <h4 className={cx(styles.agendaSession)} data-speaker="Dylan Hernandez">Is it down? Yes.</h4>
+                <h4 className={cx(styles.agendaSession, styles.agendaSession2Col)} data-speaker="Natalia Lafourcade">How much is too much?</h4>
+                <h4 className={cx(styles.agendaSession)} data-speaker="John McGibbons">Monolith Magic</h4>
+                <h4 className={cx(styles.agendaSession)} data-speaker="Anita Baker">Debuggers</h4>
+              </div>
+              <div className={cx(styles.agendaRow)}>
+                <h4 className={cx(styles.agendaTime, styles.agendaSessionSecondary)}>12:00 PM</h4>
+                <h4 className={cx(styles.agendaSession, styles.agendaSessionSecondary, styles.agendaSession5Col)} data-speaker="Music by DJ Mykael V">Lunch break</h4>
+              </div>
+              <div className={cx(styles.agendaRow)}>
+                <h4 className={cx(styles.agendaTime)}>1:30 PM</h4>
+                <h4 className={cx(styles.agendaSession, styles.agendaSession3Col)} data-speaker="Natalia Lafourcade">Observability and you</h4>
+                <h4 className={cx(styles.agendaSession, styles.agendaSession2Col)} data-speaker="Celso Piña">Covid productivity</h4>
+              </div>
+              <div className={cx(styles.agendaRow)}>
+                <h4 className={cx(styles.agendaTime)}>2:30 PM</h4>
+                <h4 className={cx(styles.agendaSession, styles.agendaSession5Col)} data-speaker="Jemiah Sius and Team">Closing + Swag</h4>
+              </div>
+            </div>
+          </section>
         </PageLayout.Content>
       </PageLayout>
     </>

diff --git a/src/pages/nerd-days.module.scss b/src/pages/nerd-days.module.scss
@@ -231,4 +231,108 @@ a.ctaButton {
   font-size: 13px;
   letter-spacing: .75px;
   font-weight: bold;
+}
+
+.agendaContainer {
+  max-width: 1000px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.agendaHeaderRow {
+  display: grid;
+  grid-template-columns: .75fr repeat(5, 1fr);
+  grid-template-areas: ". header1 header2 header3 header4 header5";
+}
+
+.agendaHeaderRowHeading {
+  margin: 0;
+  padding: 12px;
+  grid-area: auto;
+  text-align: center;
+  color: #006C75;
+  text-transform: uppercase;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: .5px;
+  background-color: #F4F5F5;
+  box-shadow: 0 0 0 1px #CBCFCF;
+}
+
+.agendaHeaderRowHeading1 {
+  grid-area: header1;
+}
+
+.agendaHeaderRowHeading2 {
+  grid-area: header2;
+}
+
+.agendaHeaderRowHeading3 {
+  grid-area: header3;
+}
+
+.agendaHeaderRowHeading4 {
+  grid-area: header4;
+}
+
+.agendaHeaderRowHeading5 {
+  grid-area: header5;
+}
+
+.agendaRow {
+  display: grid;
+  grid-template-columns: .75fr repeat(5, 1fr);
+}
+
+.agendaSession {
+  padding: 14px 0;
+  font-size: 16px;
+  font-weight: 700;
+  text-align: center;
+  box-shadow: 0 0 0 1px #CBCFCF;
+  background-color: #fff;
+  margin: 0;
+
+  &:after {
+    display: block;
+    content: attr(data-speaker);
+    margin-top: 1px;
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: .05rem;
+    font-weight: normal;
+    color: #464e4eb0;
+  }
+}
+
+.agendaSession5Col {
+  grid-column: span 5;
+}
+
+.agendaSession4Col {
+  grid-column: span 4;
+}
+
+.agendaSession3Col {
+  grid-column: span 3;
+}
+
+.agendaSession2Col {
+  grid-column: span 2;
+}
+
+.agendaTime {
+  padding: 16px 0 16px 20px;
+  box-shadow: 0 0 0 1px #CBCFCF;
+  font-weight: 700;
+  margin: 0;
+  color: #333;
+  background-color: #F4F5F5;
+  display: flex;
+  align-items: center;
+}
+
+.agendaSessionSecondary {
+  background-color: #F4F5F5;
 }