From 6ff9ddba608471be7f94c663100aea4ecd543d89 Mon Sep 17 00:00:00 2001
From: aswanson-nr <aswanson@newrelic.com>
Date: Tue, 28 Sep 2021 14:41:58 -0700
Subject: [PATCH] feat: add beta banner to marketplace

---
 src/components/IOBanner.js         |  1 -
 src/pages/instant-observability.js | 21 +++++++++++++++++++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/IOBanner.js b/src/components/IOBanner.js
index ed299a2b6..4825c7e46 100644
--- a/src/components/IOBanner.js
+++ b/src/components/IOBanner.js
@@ -9,7 +9,6 @@ const IOBanner = ({ isMobile }) => {
     <section
       css={css`
         position: relative;
-        margin-bottom: ${isMobile ? 0 : '2rem'};
       `}
     >
       <img
diff --git a/src/pages/instant-observability.js b/src/pages/instant-observability.js
index 1e1a20c69..3defb1bae 100644
--- a/src/pages/instant-observability.js
+++ b/src/pages/instant-observability.js
@@ -16,6 +16,7 @@ import {
   Button,
   Icon,
   Link,
+  Callout,
 } from '@newrelic/gatsby-theme-newrelic';
 import { navigate } from '@reach/router';
 
@@ -38,6 +39,21 @@ const VIEWS = {
   LIST: 'List view',
 };
 
+const betaBanner = () => (
+  <Callout
+    variant={Callout.VARIANT.COURSE}
+    title="We're in beta!"
+    css={css`
+      margin-bottom: 1rem;
+      margin-top: 1rem;
+    `}
+  >
+    The New Relic I/O beta is currently available to all users, and will require
+    a full user license for future usage. Note that New Relic's free forever
+    tier comes with 1 free full user.
+  </Callout>
+);
+
 /**
  * Determines if one string is a substring of the other, case insensitive
  * @param {String} substring the substring to test against
@@ -230,7 +246,7 @@ const QuickstartsPage = ({ data, location }) => {
           `}
         >
           {isMobile && <IOBanner isMobile />}
-
+          <div>{isMobile && betaBanner()}</div>
           <div
             css={css`
               padding: var(--site-content-padding);
@@ -353,6 +369,7 @@ const QuickstartsPage = ({ data, location }) => {
                       css={css`
                         fill: currentColor;
                         stroke-width: ${name === 'All' ? 1 : 0.25};
+
                         margin: 0 0.5rem;
                       `}
                     />
@@ -370,7 +387,7 @@ const QuickstartsPage = ({ data, location }) => {
           `}
         >
           {!isMobile && <IOBanner />}
-
+          <div>{!isMobile && betaBanner()}</div>
           <div
             css={css`
               background-color: var(--secondary-background-color);