feat: unify landing page layout

* moved the LandingBanner to its own folder, with the background
* added some css variables for brand colors
* attempted to update many uses to the css variables, but I'm sure there
  are still some sitting around

src/components/Breadcrumbs.js

@@ -16,6 +16,7 @@ const Breadcrumbs = ({ segments, separator }) => {
           <Link
             to={segment.url}
             css={css`
+              color: var(--brand-highlight-green);
               text-decoration: none;
             `}
           >

src/components/GlobalStyles.js

@@ -20,7 +20,19 @@ import {
   SohneLeichtKursiv,
 } from './fonts';
 
-const fonts = styled.div`
+const GlobalStyles = styled.div`
+  /* BRAND COLORS */
+  --brand-highlight-green: #1ce783;
+  --brand-grey-black: #1d252c;
+  --brand-white: #f9fafa;
+
+  --brand-primary-background-color: #e5e5e5;
+  --brand-secondary-background-color: var(--brand-grey-black);
+
+  --brand-primary-text-color: var(--brand-grey-black);
+  --brand-secondary-text-color: var(--brand-white);
+
+  /* FONTS */
   @font-face {
     font-family: 'Söhne-Buch';
     src: url(${SohneBuch});
@@ -95,4 +107,4 @@ const fonts = styled.div`
   }
 `;
 
-export default fonts;
+export default GlobalStyles;

src/components/IOBanner.js

@@ -128,7 +128,6 @@ const BannerHeaderContent = ({ search, setSearch, setIsSearchInputEmpty }) => {
     </div>
   );
 };
-
 const IOBanner = ({ search, setSearch, setIsSearchInputEmpty }) => {
   return (
     <div
@@ -138,6 +137,7 @@ const IOBanner = ({ search, setSearch, setIsSearchInputEmpty }) => {
         --left-margin: calc(50% - 50vw);
 
         position: absolute;
+        top: var(--global-header-height);
         width: 100vw;
         left: var(--left-margin);
         height: var(--banner-height);

src/components/InstallButton.js

@@ -85,7 +85,12 @@ const createInstallLink = (
 const hasComponent = (quickstart, key) =>
   quickstart[key] && quickstart[key].length > 0;
 
-const InstallButton = ({ quickstart, location, ...props }) => {
+const InstallButton = ({
+  quickstart,
+  location,
+  style = 'PRIMARY',
+  ...props
+}) => {
   const { treatment } = useTreatment('super_tiles');
 
   const hasInstallableComponent =
@@ -271,17 +276,29 @@ const InstallButton = ({ quickstart, location, ...props }) => {
       onClick={handleInstallClick}
       variant={Button.VARIANT.PRIMARY}
       css={css`
-        --button-background: #1d252c;
-        border-radius: 4px;
-        padding: 1rem;
+        --button-background: var(
+          ${style === 'PRIMARY'
+            ? '--brand-white'
+            : '--brand-secondary-background-color'}
+        );
+        --button-text-color: var(
+          ${style === 'PRIMARY'
+            ? '--brand-primary-text-color'
+            : '--brand-secondary-text-color'}
+        );
         background-color: var(--button-background);
-        font-family: 'Söhne-Leicht';
+        border-radius: 4px;
+        color: var(--button-text-color);
         font-size: 14px;
+        line-height: 21px;
         font-weight: 400;
+        padding: 1rem;
 
         &:hover {
           background-color: var(--button-background);
+          color: var(--button-text-color);
         }
+
         ${hasInstallableComponent &&
         css`
           padding: 0;
@@ -302,6 +319,7 @@ InstallButton.propTypes = {
   quickstart: quickstart.isRequired,
   onClick: PropTypes.func.isRequired,
   location: PropTypes.object.isRequired,
+  style: PropTypes.oneOf(['PRIMARY', 'SECONDARY']),
 };
 
 export default InstallButton;

src/components/BannerBackground.js → src/components/LandingBanner/BannerBackground.js

@@ -1,26 +1,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
-import bannerOverlayRight from '../images/io-banner/banner-style-right.svg';
-import bannerOverlayLeft from '../images/io-banner/banner-style-left.svg';
-import { QUICKSTARTS_COLLAPSE_BREAKPOINT } from '../data/constants';
+import bannerOverlayRight from '../../images/io-banner/banner-style-right.svg';
+import bannerOverlayLeft from '../../images/io-banner/banner-style-left.svg';
+import { QUICKSTARTS_COLLAPSE_BREAKPOINT } from '../../data/constants';
 
 const BannerBackground = ({ children }) => {
   return (
     <div
       css={css`
-        --banner-height: 368px;
+        --banner-height: 430px;
 
         --left-margin: calc(50% - 50vw);
 
-        position: absolute;
         width: 100vw;
         left: var(--left-margin);
         height: var(--banner-height);
         margin: 0 0 0 var(--left-margin);
-        padding: 0 40px;
 
-        background: #1d252c;
+        background: var(--brand-secondary-background-color);
         box-sizing: border-box;
         @media (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) {
           --banner-height: unset;
@@ -29,21 +27,20 @@ const BannerBackground = ({ children }) => {
     >
       <div
         css={css`
-          margin: 0 auto 88px;
+          height: 100%;
           position: relative;
           display: flex;
           justify-content: center;
           align-items: center;
           @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) {
             width: 100%;
-            height: unset;
             margin: 0 auto 0px;
           }
         `}
       >
         <div
           css={css`
-            margin-right: auto;
+            margin-left: auto;
 
             @media (max-width: 1440px) {
               display: none;
@@ -55,7 +52,7 @@ const BannerBackground = ({ children }) => {
               position: absolute;
               width: 157.03px;
               height: 148px;
-              left: 10px;
+              left: 5px;
               top: 50px;
               z-index: auto;
             `}
@@ -67,7 +64,7 @@ const BannerBackground = ({ children }) => {
         {children}
         <div
           css={css`
-            margin-left: auto;
+            margin-right: auto;
 
             @media (max-width: 1440px) {
               display: none;
@@ -77,8 +74,8 @@ const BannerBackground = ({ children }) => {
           <img
             css={css`
               position: absolute;
-              right: 10px;
-              top: 36px;
+              right: 5px;
+              top: 0px;
               z-index: auto;
             `}
             src={bannerOverlayRight}
@@ -90,8 +87,9 @@ const BannerBackground = ({ children }) => {
     </div>
   );
 };
+
 BannerBackground.propTypes = {
-  children: PropTypes.node,
+  children: PropTypes.node.isRequired,
 };
 
 export default BannerBackground;

src/components/LandingBanner.js → src/components/LandingBanner/index.js

@@ -1,19 +1,17 @@
-import { Button, Icon, Link, useTessen } from '@newrelic/gatsby-theme-newrelic';
-import { QUICKSTARTS_REPO, SHIELD_LEVELS } from '../data/constants';
 import React, { useEffect, useState } from 'react';
 
-import Breadcrumbs from '../components/Breadcrumbs';
-import InstallButton from '../components/InstallButton';
+import Breadcrumbs from '../../components/Breadcrumbs';
+import InstallButton from '../../components/InstallButton';
 import { css } from '@emotion/react';
-import { quickstart } from '../types';
-import defaultImage from '../images/defaultQuickstartImage.png';
+import { quickstart } from '../../types';
+import defaultImage from '../../images/defaultQuickstartImage.png';
 import BannerBackground from './BannerBackground';
 
+const IMAGE_DISPLAY_BREAKPOINT = '1200px';
+
 const LandingBanner = ({ quickstart, className }) => {
   const [imgStyle, setImgStyle] = useState({});
 
-  const quickstartUrl = quickstart.packUrl || QUICKSTARTS_REPO;
-  const tessen = useTessen();
   const breadcrumbs = [
     {
       name: 'Instant Observability',
@@ -24,15 +22,6 @@ const LandingBanner = ({ quickstart, className }) => {
     },
   ];
 
-  const trackQuickstart = (action, quickstart) => () =>
-    tessen.track({
-      eventName: 'instantObservability',
-      category: action,
-      quickstartName: quickstart.name,
-      quickstartId: quickstart.id,
-      quickstartUrl: quickstart.packUrl,
-    });
-
   // get image resolution from URL
   const getURLMeta = async (url) => {
     const img = new Image();
@@ -71,48 +60,51 @@ const LandingBanner = ({ quickstart, className }) => {
       <div
         className={className}
         css={css`
-          color: white;
-          h2 {
-            color: white;
-          }
-          z-index: 2;
-
           border-bottom: none;
+          color: var(--brand-secondary-text-color);
           display: grid;
           grid-column-gap: 1rem;
           grid-row-gap: 1rem;
-          grid-template-columns: 1fr 0.5fr 1fr;
           grid-template-areas:
             'breadcrumbs logo .'
             'title title image'
             'summ summ image'
-            'summ summ image'
             'cta . image';
+          grid-template-columns: 1fr 0.5fr 1fr;
+          grid-template-rows: 0.25fr 0.5fr auto auto;
+          height: 100%;
           justify-content: normal;
           justify-self: center;
+          padding-bottom: 1rem;
           row-gap: 1rem;
+          z-index: 2;
 
-          @media (max-width: 1300px) {
-            grid-template-columns: 1fr;
+          h2 {
+            color: white;
+          }
+
+          @media (max-width: ${IMAGE_DISPLAY_BREAKPOINT}) {
             grid-template-areas:
               'breadcrumbs'
               'title'
               'summ'
               'cta';
+            grid-template-columns: 1fr;
+            grid-template-rows: 0.25fr 0.25fr auto auto;
           }
         `}
       >
         <Breadcrumbs segments={breadcrumbs} />
         {quickstart.logoUrl && (
           <div
             css={css`
+              align-self: start;
               background-color: white;
               border-radius: 0 0 7px 7px;
               grid-area: logo;
-              align-self: center;
               justify-self: center;
               padding: 5px;
-              @media (max-width: 1300px) {
+              @media (max-width: ${IMAGE_DISPLAY_BREAKPOINT}) {
                 display: none;
               }
             `}
@@ -135,8 +127,12 @@ const LandingBanner = ({ quickstart, className }) => {
             font-weight: normal;
             grid-area: title;
             margin-bottom: 0;
-            padding-bottom: 0;
-            align-self: end;
+
+            @media (max-width: 760px) {
+              font-size: 44px;
+              line-height: 46px;
+              letter-spacing: -0.015em;
+            }
           `}
         >
           {quickstart.title}
@@ -147,10 +143,12 @@ const LandingBanner = ({ quickstart, className }) => {
               grid-area: summ;
               font-size: 24px;
               line-height: 32px;
-              margin-right: 3rem;
 
               @media (max-width: 760px) {
                 max-width: 100%;
+                font-size: 18px;
+                line-height: 24px;
+                letter-spacing: -0.005em;
               }
             `}
           >
@@ -160,13 +158,10 @@ const LandingBanner = ({ quickstart, className }) => {
         <div
           css={css`
             grid-area: image;
-            align-self: center;
-            justify-self: center;
-            margin-bottom: 1rem;
-            border: 28px solid #000000;
-            border-radius: 26px;
+            align-self: start;
+            margin: 0 auto 1rem;
 
-            @media (max-width: 1300px) {
+            @media (max-width: ${IMAGE_DISPLAY_BREAKPOINT}) {
               display: none;
             }
           `}
@@ -175,8 +170,9 @@ const LandingBanner = ({ quickstart, className }) => {
             src={quickstart.dashboards[0]?.screenshots[0] ?? defaultImage}
             alt={quickstart.title}
             css={css`
-              height: 200px;
-              width: 100%;
+              border: 28px solid #000000;
+              border-radius: 26px;
+              height: 250px;
             `}
           />
         </div>
@@ -186,19 +182,10 @@ const LandingBanner = ({ quickstart, className }) => {
           `}
         >
           <InstallButton
-            css={css`
-              --button-background: #f9fafa;
-
-              background-color: var(--button-background);
-              color: #1d252c;
-
-              &:hover {
-                background-color: var(--button-background);
-                color: #1d252c;
-              }
-            `}
+            css={css``}
             quickstart={quickstart}
             location={location}
+            style="PRIMARY"
           />
         </div>
       </div>