feat: add initial super tile experiment

.gitignore

@@ -70,3 +70,7 @@ yarn-error.log
 
 # In case npm is accidently used to install deps
 package-lock.json
+
+# VSCode files
+.vscode
+

gatsby-config.js

@@ -47,6 +47,7 @@ module.exports = {
               features: {
                 'developer-website_global-header-gh-buttons': 'on',
                 'developer-website_right-rail-buttons': 'outline',
+                super_tiles: 'on',
               },
               core: {
                 authorizationKey: process.env.SPLITIO_AUTH_KEY || 'localhost',

src/experiments/super_tiles/components/CodeStreamTile.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { css } from '@emotion/react';
+import SuperTile from './SuperTile';
+import { Button } from '@newrelic/gatsby-theme-newrelic';
+
+const CodeStreamTile = () => {
+  return (
+    <SuperTile>
+      <div
+        css={css`
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+          gap: 40px;
+        `}
+      >
+        <div>
+          <span
+            css={css`
+              color: var(--color-brand-400);
+              font-size: 14px;
+              line-height: 20px;
+            `}
+          >
+            Tools & Communications
+          </span>
+          <h2
+            css={css`
+              font-size: 24px;
+              font-weight: 600;
+              line-height: 30px;
+            `}
+          >
+            Introducing CodeStream
+          </h2>
+          <span
+            css={css`
+              color: var(--primary-text-color);
+            `}
+          >
+            CodeStream supercharges development workflows by putting
+            collaboration tools in your IDE.
+          </span>
+        </div>
+        <div>
+          <Button variant={Button.VARIANT.OUTLINE}>Install CodeStream</Button>
+        </div>
+      </div>
+    </SuperTile>
+  );
+};
+
+export default CodeStreamTile;

src/experiments/super_tiles/components/GuidedInstallTile.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { css } from '@emotion/react';
+import SuperTile from './SuperTile';
+import { Button } from '@newrelic/gatsby-theme-newrelic';
+
+const GuidedInstallTile = () => {
+  return (
+    <SuperTile type="primary">
+      <div
+        css={css`
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+          gap: 40px;
+        `}
+      >
+        <div>
+          <span
+            css={css`
+              color: #faa44a;
+              font-size: 14px;
+              line-height: 20px;
+            `}
+          >
+            First Steps
+          </span>
+          <h2
+            css={css`
+              font-size: 24px;
+              font-weight: 600;
+              line-height: 30px;
+              color: var(--color-white);
+
+              .dark-mode & {
+                color: var(--heading-text-color);
+              }
+            `}
+          >
+            Guided Install
+          </h2>
+          <span
+            css={css`
+              color: var(--color-neutrals-300);
+
+              .dark-mode & {
+                color: var(--primary-text-color);
+              }
+            `}
+          >
+            Install the New Relic agent with a single command line and start
+            monitoring your log and infrastructure data in real time.
+          </span>
+        </div>
+        <div>
+          <Button
+            css={css`
+              background-color: var(--color-brand-500);
+            `}
+            variant={Button.VARIANT.PRIMARY}
+          >
+            Install New Relic
+          </Button>
+        </div>
+      </div>
+    </SuperTile>
+  );
+};
+
+export default GuidedInstallTile;

src/experiments/super_tiles/components/SuperTile.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@emotion/react';
+
+const SuperTile = ({ children, className, type }) => {
+  return (
+    <div
+      className={className}
+      css={css`
+        width: 100%;
+        display: flex;
+        border-radius: 8px;
+        padding: 24px;
+        flex-direction: column;
+        align-items: flex-start;
+        ${type === 'primary'
+          ? `background: var(--color-brand-700);`
+          : `background: var(--tertiary-background-color);`}
+      `}
+    >
+      {children}
+    </div>
+  );
+};
+
+SuperTile.propTypes = {
+  type: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+};
+
+export default SuperTile;

src/experiments/super_tiles/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@emotion/react';
+import useTreatment from '../../hooks/useTreatment';
+import IOBanner from '../../components/IOBanner';
+import CodeStreamTile from './components/CodeStreamTile';
+import GuidedInstallTile from './components/GuidedInstallTile';
+
+const SuperTilesExperiment = ({ isMobile }) => {
+  const { treatment } = useTreatment('super_tiles');
+
+  if (treatment === 'on') {
+    return (
+      <div
+        css={css`
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          margin-bottom: 16px;
+          gap: 16px;
+        `}
+      >
+        <GuidedInstallTile />
+        <CodeStreamTile />
+      </div>
+    );
+  }
+
+  return <IOBanner isMobile={isMobile} />;
+};
+
+SuperTilesExperiment.propTypes = {
+  isMobile: PropTypes.bool,
+};
+
+export default SuperTilesExperiment;

src/pages/instant-observability.js

@@ -7,7 +7,6 @@ import { css } from '@emotion/react';
 import SegmentedControl from '../components/SegmentedControl';
 import Overlay from '../components/Overlay';
 import PackTile from '../components/PackTile';
-import IOBanner from '../components/IOBanner';
 import IOLogo from '../components/IOLogo';
 import QuickstartFilter from '../components/quickstarts/QuickstartFilter';
 import {
@@ -23,6 +22,7 @@ import BUILD_YOUR_OWN from '../images/build-your-own.svg';
 import GUIDED_INSTALL from '../images/guided-install.svg';
 import { useDebounce } from 'react-use';
 import { sortFeaturedQuickstarts } from '../utils/sortFeaturedQuickstarts';
+import SuperTilesExperiment from '../experiments/super_tiles';
 
 import {
   QUICKSTARTS_REPO,
@@ -294,7 +294,7 @@ const QuickstartsPage = ({ data, location }) => {
             }
           `}
         >
-          {isMobile && <IOBanner isMobile />}
+          {isMobile && <SuperTilesExperiment isMobile />}
           <div
             css={css`
               padding: var(--site-content-padding);
@@ -410,7 +410,7 @@ const QuickstartsPage = ({ data, location }) => {
             padding: var(--site-content-padding);
           `}
         >
-          {!isMobile && <IOBanner />}
+          {!isMobile && <SuperTilesExperiment />}
           <div
             css={css`
               background-color: var(--secondary-background-color);