Merge pull request #201 from newrelic/zstickles/cta-icons

Tile Icons & Home Page Get Started Updates

Author: timglaser

src/components/FeatherIcon.js

@@ -42,6 +42,34 @@ const ICONS = {
   github: (
     <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />
   ),
+  barChart: (
+    <>
+      <line x1="18" y1="20" x2="18" y2="10" />
+      <line x1="12" y1="20" x2="12" y2="4" />
+      <line x1="6" y1="20" x2="6" y2="14" />
+    </>
+  ),
+  box: (
+    <>
+      <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
+      <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
+      <line x1="12" y1="22.08" x2="12" y2="12" />
+    </>
+  ),
+  cpu: (
+    <>
+      <rect x="4" y="4" width="16" height="16" rx="2" ry="2" />
+      <rect x="9" y="9" width="6" height="6" />
+      <line x1="9" y1="1" x2="9" y2="4" />
+      <line x1="15" y1="1" x2="15" y2="4" />
+      <line x1="9" y1="20" x2="9" y2="23" />
+      <line x1="15" y1="20" x2="15" y2="23" />
+      <line x1="20" y1="9" x2="23" y2="9" />
+      <line x1="20" y1="14" x2="23" y2="14" />
+      <line x1="1" y1="9" x2="4" y2="9" />
+      <line x1="1" y1="14" x2="4" y2="14" />
+    </>
+  ),
 };
 
 FeatherIcon.propTypes = {

src/components/GuideListing/GuideListing.module.scss

@@ -31,5 +31,6 @@
 
   @media (max-width: 1180px) {
     grid-template-columns: 1fr;
+    grid-gap: 3rem;
   }
 }

src/components/GuideTile.js

@@ -1,11 +1,18 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import FeatherIcon from './FeatherIcon';
 import cx from 'classnames';
 import { navigate } from 'gatsby';
 import styles from './GuideTile.module.scss';
 
-const GuideTile = ({ minutes, title, description, path, className }) => (
-  <div className={cx(styles.tile, className)}>
+const GuideTile = ({ icon, minutes, title, description, path, className }) => (
+  <div className={cx(styles.tile, className, { [styles.tileWithIcon]: icon })}>
+    {icon && (
+      <div className={styles.iconContainer}>
+        <FeatherIcon name={icon} size="2.5rem" />
+      </div>
+    )}
+
     <div className={styles.timeEstimate}>{minutes} minutes</div>
     <div className={styles.main}>
       <h2>{title}</h2>
@@ -23,6 +30,7 @@ GuideTile.propTypes = {
   description: PropTypes.string.isRequired,
   path: PropTypes.string.isRequired,
   className: PropTypes.string,
+  icon: PropTypes.string,
 };
 
 export default GuideTile;

src/components/GuideTile.module.scss

@@ -8,12 +8,18 @@
   padding: 0.5rem;
   border: 1px solid var(--color-neutrals-300);
   border-radius: 0.25rem;
+  position: relative;
+  margin-top: 1rem;
 
   button:hover {
     transform: translateY(-1px);
   }
 }
 
+.tileWithIcon h2 {
+  margin-top: 1rem;
+}
+
 .timeEstimate {
   font-size: 0.75rem;
   grid-area: time;
@@ -28,6 +34,21 @@
   background-position: left center;
 }
 
+.iconContainer {
+  position: absolute;
+  top: -2.75rem;
+  left: 50%;
+  margin-left: -2.75rem;
+  width: 5.5rem;
+  height: 5.5rem;
+  border: 4px solid var(--color-white);
+  background-color: var(--color-neutrals-200);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .main {
   grid-area: main;
   display: flex;

src/pages/index.js

@@ -15,21 +15,24 @@ 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: '',
+    title: 'Collect data',
+    description: `Define, visualize, and get alerts on the data you want using custom events`,
+    path: '/collect-data/custom-events',
+    icon: 'barChart',
   },
   {
-    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: 7,
+    title: 'Automate data',
+    description: `Add tags to applications you instrument for easier filtering and organization`,
+    path: '/automate-workflows/add-tags-to-apps',
+    icon: 'box',
   },
   {
-    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: '',
+    minutes: 12,
+    title: 'Build custom apps',
+    description: `Build a Hello World! app and publish it to your local New Relic One Catalog`,
+    path: '/build-apps/build-hello-world-app',
+    icon: 'cpu',
   },
 ];