feat: add guide page structure

src/components/GuidePage.js

@@ -0,0 +1,23 @@
+import GuideTile from './GuideTile';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const GuidePage = ({ heading, description, guides }) => (
+  <>
+    <h1>{heading}</h1>
+    <p>{description}</p>
+    <div>
+      {guides.map((guide, index) => (
+        <GuideTile key={index} {...guide} />
+      ))}
+    </div>
+  </>
+);
+
+GuidePage.propTypes = {
+  heading: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  guides: PropTypes.object.isRequired,
+};
+
+export default GuidePage;

src/components/GuideTile.js

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+// TODO clock icon
+// TODO semantic element for root element here?
+// TODO use path
+
+const GuideTile = ({ minutes, title, description, path }) => (
+  <div>
+    {Number.isInteger(minutes) && <div>{`${minutes} minutes`}</div>}
+    <h2>{title}</h2>
+    <p>{description}</p>
+    <button type="button">Start the Guide</button>
+  </div>
+);
+
+GuideTile.propTypes = {
+  minutes: PropTypes.number,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  path: PropTypes.string.isRequired,
+};
+
+export default GuideTile;

src/components/Header.js

@@ -1,10 +1,11 @@
-import { Link, useStaticQuery, graphql } from 'gatsby';
-import React from 'react';
-import PropTypes from 'prop-types';
+import './Header.scss';
+
+import { Link, graphql, useStaticQuery } from 'gatsby';
 
 import Container from './Container';
 import ExternalLink from './ExternalLink';
-import './Header.scss';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 const Header = ({ pages }) => {
   // NOTE: we may want to abstract this
@@ -96,7 +97,7 @@ Header.propTypes = {
 Header.defaultProps = {
   pages: [
     { displayName: 'Collect Data', path: '' },
-    { displayName: 'Explore Data', path: '' },
+    { displayName: 'Explore Data', path: 'explore-data' },
     { displayName: 'Build Apps', path: '' },
     { displayName: 'Automate New Relic', path: '' },
     { displayName: 'Reference Docs', path: '' },

src/pages/explore-data.js

@@ -0,0 +1,39 @@
+import GuidePage from '../components/GuidePage';
+import Layout from '../components/Layout';
+import { Link } from 'gatsby';
+import React from 'react';
+import SEO from '../components/Seo';
+
+// TODO: Pull this data from a different file
+const heading = 'Explore Data in New Relic';
+
+const description = `Once New Relic has your data, the next step is to query that data to get
+what you need, when you need it. New Relic One provides modern APIs to
+give you full control over how data is queried.`;
+
+const guides = [
+  {
+    minutes: 15,
+    title: 'GraphQL API',
+    description:
+      'Learn how to fetch precisely the data your application needs. No more, no less.',
+    path: 'guides/graphql-api',
+  },
+  {
+    minutes: 5,
+    title: 'REST API',
+    description:
+      'Get data out to New Relic using the gold standard in API technology.',
+    path: 'guides/rest-api',
+  },
+];
+
+const ExploreDataPage = () => (
+  <Layout>
+    <SEO title={heading} />
+    <GuidePage heading={heading} description={description} guides={guides} />
+    <Link to="/">Go back to the homepage</Link>
+  </Layout>
+);
+
+export default ExploreDataPage;