Merge pull request #166 from newrelic/liz/edit-ctas

Refactor CTAs and replace content

src/components/GuideTile.module.scss

@@ -5,7 +5,7 @@
     'main main main';
   background-color: white;
   box-shadow: var(--boxshadow);
-  padding: 1.5rem;
+  padding: 0.5rem;
 
   button:hover {
     transform: translateY(-1px);
@@ -40,5 +40,6 @@
   font-size: 0.9rem;
   margin-bottom: 1.5rem;
   max-width: calc(100% - 4rem);
-  color: var(--color-neutrals-500);
+  color: var(--color-neutrals-600);
+  flex: 1;
 }

src/components/styles.scss

@@ -57,12 +57,12 @@
   --color-teal-800: #003539;
   --color-teal-900: #002123;
 
-  --boxshadow: 0px 2.76726px 2.21381px rgba(0, 85, 90, 0.0168687),
-    0px 6.6501px 5.32008px rgba(0, 85, 90, 0.0242336),
-    0px 12.5216px 10.0172px rgba(0, 85, 90, 0.03),
-    0px 22.3363px 17.869px rgba(0, 85, 90, 0.0357664),
-    0px 41.7776px 33.4221px rgba(0, 85, 90, 0.0431313),
-    0px 100px 80px rgba(0, 85, 90, 0.06);
+  --boxshadow: 0 0.24905px 0.55345px rgba(0, 0, 0, 0.00562291),
+    0 0.59851px 1.33002px rgba(0, 0, 0, 0.00807786),
+    0 1.12694px 2.50431px rgba(0, 0, 0, 0.01),
+    0 2.01027px 4.46726px rgba(0, 0, 0, 0.0119221),
+    0 3.75998px 8.35552px rgba(0, 0, 0, 0.0143771),
+    0 9px 20px rgba(0, 0, 0, 0.02);
 
   --color-tile-background: rgb(215, 210, 233);
   --primary-font-family: 'open sans', sans-serif;

src/pages/index.js

@@ -2,15 +2,34 @@ import React from 'react';
 
 import Layout from '../components/Layout';
 import SEO from '../components/Seo';
-import Jumbotron from '../components/Jumbotron';
-import Section from '../components/Section';
 import GuideListing from '../components/GuideListing/GuideListing';
 import GuideTile from '../components/GuideTile';
 import PageTitle from '../components/PageTitle';
 import Video from '../components/Video';
 import ExternalLink from '../components/ExternalLink';
 import styles from './index.module.scss';
 
+const getStartedGuides = [
+  {
+    minutes: 5,
+    title: 'Collect data from any source',
+    description: `Learn how to ingest data from various sources. Whether you want to ingest data “out of the box,” or bring custom data into New Relic that isn't collected by default.`,
+    path: '',
+  },
+  {
+    minutes: 5,
+    title: 'Instrument your data',
+    description: `Use custom instrumentation to automatically produce complete information, without needing to modify your application code. Manage your environment through Observability as Code.`,
+    path: '',
+  },
+  {
+    minutes: 5,
+    title: 'Customize your data',
+    description: `Build and customize on the programmable platform by learning how to customize existing apps, enhance open source projects, or build your own application to solve your specific problem.`,
+    path: '',
+  },
+];
+
 const guides = [
   {
     minutes: 5,
@@ -70,10 +89,17 @@ const IndexPage = () => (
       />
     </section>
 
-    <Section backgroundBanner className={styles.backgroundBanner}>
-      <Jumbotron />
-    </Section>
-    <div className={styles.line} />
+    <GuideListing className={styles.guideListing}>
+      <GuideListing.Heading className={styles.guideListingHeading}>
+        Get started
+      </GuideListing.Heading>
+      <GuideListing.List>
+        {getStartedGuides.map((guide, index) => (
+          <GuideTile className={styles.guideTile} key={index} {...guide} />
+        ))}
+      </GuideListing.List>
+    </GuideListing>
+    <hr className={styles.line} />
 
     <GuideListing className={styles.guideListing}>
       <GuideListing.Heading className={styles.guideListingHeading}>

src/pages/index.module.scss

@@ -1,13 +1,13 @@
 .line {
   border-bottom: 4px solid var(--color-brand-800);
   width: 50px;
-  margin: auto;
+  margin: 3rem auto 0;
 }
 
 .intro {
   display: flex;
   justify-content: space-between;
-  margin: 2rem auto 7rem;
+  margin: 2rem auto;
 
   @media (max-width: 760px) {
     flex-direction: column;
@@ -43,7 +43,6 @@
 }
 
 .guideTile {
-  box-shadow: none;
   border: 1px solid var(--color-neutrals-300);
   border-radius: 0.25rem;
 }