feat: add beta banner to marketplace

src/components/IOBanner.js

@@ -9,7 +9,6 @@ const IOBanner = ({ isMobile }) => {
     <section
       css={css`
         position: relative;
-        margin-bottom: ${isMobile ? 0 : '2rem'};
       `}
     >
       <img

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);