diff --git a/src/components/FeatherIcon.js b/src/components/FeatherIcon.js index e747031b8..bf87683c8 100644 --- a/src/components/FeatherIcon.js +++ b/src/components/FeatherIcon.js @@ -159,6 +159,22 @@ const ICONS = { > ), + code: ( + <> + + + > + ), + 'message-square': ( + <> + + > + ), + twitter: ( + <> + + > + ), }; FeatherIcon.propTypes = { diff --git a/src/images/nerd-days/hopin-logo.svg b/src/images/nerd-days/hopin-logo.svg new file mode 100644 index 000000000..998c7c479 --- /dev/null +++ b/src/images/nerd-days/hopin-logo.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/nerd-days.js b/src/pages/nerd-days.js index 5c550b068..9441c210b 100644 --- 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,7 +423,7 @@ const NerdDaysPage = () => { { Engage with the developer community + + + + + + @newrelic + + + + + + + + + + New Relic Forum + + + + + + + + + + Developers + + + + + + + + + + + + Event powered by Hopin + + diff --git a/src/pages/nerd-days.module.scss b/src/pages/nerd-days.module.scss index d7c06c965..f04bee674 100644 --- 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; } \ No newline at end of file
+ Event powered by Hopin +