chore: updating to master

.nvmrc

@@ -0,0 +1 @@
+10

README.md

@@ -2,12 +2,13 @@
 
 ## 🚀 Quick start
 
-1.  **Start developing.**
+1. **Start developing.**
 
     Navigate into your new site’s directory and start it up.
 
     ```shell
     cd developer-website/
+    npm install
     npm start
     ```
 

src/components/CallToAction.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import './CallToAction.scss';
+import PropTypes from 'prop-types';
+
+const CallToAction = ({ text, children }) => {
+  return (
+    <div className="callToAction">
+      {text && <h3>{text}</h3>}
+      {children}
+    </div>
+  );
+};
+CallToAction.propTypes = {
+  text: PropTypes.string,
+  children: PropTypes.node.isRequired,
+};
+export default CallToAction;

src/components/CallToAction.scss

@@ -0,0 +1,53 @@
+.callToAction {
+  font-size: 0.75rem;
+  height: 300px;
+  width: 300px;
+  margin: 0 0 5%;
+  border-radius: 50%;
+  border: solid 2px rgb(141, 141, 252);
+  background: rgb(173, 173, 248);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  p {
+    margin-bottom: 0.5rem;
+  }
+  input {
+    height: 25px;
+    margin: 0;
+    border: none;
+  }
+  button {
+    height: 25px;
+    margin: 0;
+    border: none;
+  }
+  form {
+    margin: 0;
+  }
+  @media (max-width: 500px) {
+    background: none;
+    border-radius: 0;
+    border: none;
+    p {
+      margin-bottom: 0.5rem;
+    }
+    input {
+      width: 70%;
+      margin-right: 0.5rem;
+    }
+    select {
+      width: 100%;
+    }
+    button {
+      width: 100%;
+    }
+    form {
+      width: 100%;
+      button {
+        width: 25%;
+      }
+    }
+  }
+}

src/components/GuideListing.js

@@ -0,0 +1,32 @@
+import './GuideListing.scss';
+
+import GuideTile from './GuideTile';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const GuideListing = ({ heading, description, guides }) => (
+  <div className="GuideListing">
+    <h1 className="GuideListing-heading">{heading}</h1>
+    <p className="GuideListing-description">{description}</p>
+    <div className="GuideListing-list">
+      {guides.map((guide, index) => (
+        <GuideTile key={index} {...guide} />
+      ))}
+    </div>
+  </div>
+);
+
+GuideListing.propTypes = {
+  heading: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  guides: PropTypes.arrayOf(
+    PropTypes.shape({
+      minutes: PropTypes.number.isRequired,
+      title: PropTypes.string.isRequired,
+      description: PropTypes.string.isRequired,
+      path: PropTypes.string.isRequired,
+    })
+  ).isRequired,
+};
+
+export default GuideListing;

src/components/GuideListing.scss

@@ -0,0 +1,22 @@
+.GuideListing {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 2.5rem;
+}
+
+.GuideListing-heading,
+.GuideListing-description {
+  max-width: 800px;
+  text-align: center;
+  margin-bottom: 1.5rem;
+}
+
+.GuideListing-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(264px, 1fr));
+  grid-gap: 1rem;
+  grid-auto-rows: minmax(248px, auto);
+  margin-top: 1rem;
+  width: 100%;
+}

src/components/GuideTile.js

@@ -0,0 +1,27 @@
+import './GuideTile.scss';
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import { navigate } from 'gatsby';
+
+const GuideTile = ({ minutes, title, description, path }) => (
+  <div className="GuideTile">
+    <div className="GuideTile-timeEstimate">{`${minutes} minutes`}</div>
+    <div className="GuideTile-main">
+      <h2>{title}</h2>
+      <p className="GuideTile-description">{description}</p>
+      <button type="button" onClick={() => navigate(path)}>
+        Start the Guide
+      </button>
+    </div>
+  </div>
+);
+
+GuideTile.propTypes = {
+  minutes: PropTypes.number.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  path: PropTypes.string.isRequired,
+};
+
+export default GuideTile;

src/components/GuideTile.scss

@@ -0,0 +1,29 @@
+.GuideTile {
+  display: grid;
+  grid-template-areas:
+    '. . time'
+    'main main main';
+
+  background-color: var(--color-tile-background);
+  padding: 1rem;
+}
+
+.GuideTile-timeEstimate {
+  grid-area: time;
+  text-align: right;
+}
+
+.GuideTile-main {
+  grid-area: main;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  width: 100%;
+  margin-bottom: 1rem;
+}
+
+.GuideTile-description {
+  margin-bottom: 1.5rem;
+  max-width: calc(100% - 4rem);
+}

src/components/Header.js

@@ -111,7 +111,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/components/Header.scss

@@ -1,6 +1,5 @@
 header.Header--main {
   background-color: #d7e6e8;
-  margin-bottom: 1rem;
 
   .u-container {
     display: grid;

src/components/Jumbotron.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import CallToAction from './CallToAction';
+import './Jumbotron.scss';
+
+const Jumbotron = () => (
+  <div className="jumbotron">
+    <h2 className="indexPage-h2">
+      Build custom applications on top of your observability data
+    </h2>
+    <CallToAction text="Create your free account">
+      <form>
+        <input placeholder="[email protected]" />
+        <button type="submit">Sign up</button>
+      </form>
+    </CallToAction>
+    <CallToAction text="Get your API key">
+      <select id="api-keys" name="api-keys">
+        <option value="" disabled selected hidden>
+          Select or create a key...
+        </option>
+        <option value="key">key</option>
+        <option value="otherkey">otherkey</option>
+      </select>
+    </CallToAction>
+    <CallToAction text="Install the newrelic CLI">
+      <button type="button">Download for macOS</button>
+    </CallToAction>
+  </div>
+);
+
+export default Jumbotron;

src/components/Jumbotron.scss

@@ -0,0 +1,14 @@
+.jumbotron {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  background: rgb(202, 202, 245);
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 5%;
+  @media (max-width: 500px) {
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-items: center;
+  }
+}

src/components/Layout.js

@@ -7,20 +7,12 @@ import './styles.scss';
 const Layout = ({ children }) => (
   <>
     <Header />
-    <div
-      style={{
-        margin: `0 auto`,
-        maxWidth: 960,
-        padding: `0 1.0875rem 1.45rem`,
-      }}
-    >
-      <main>{children}</main>
-      <footer>
-        © {new Date().getFullYear()}, Built with
-        {` `}
-        <a href="https://www.gatsbyjs.org">Gatsby</a>
-      </footer>
-    </div>
+    <main>{children}</main>
+    <footer>
+      © {new Date().getFullYear()}, Built with
+      {` `}
+      <a href="https://www.gatsbyjs.org">Gatsby</a>
+    </footer>
   </>
 );
 

src/components/styles.scss

@@ -5,6 +5,7 @@
 :root {
   --color-black: #000;
   --color-white: #fff;
+  --color-tile-background: rgb(215, 210, 233);
 }
 
 /*-- Reset --*/

src/pages/explore-data.js

@@ -0,0 +1,38 @@
+import GuideListing from '../components/GuideListing';
+import Layout from '../components/Layout';
+import { Link } from 'gatsby';
+import React from 'react';
+import SEO from '../components/Seo';
+
+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} />
+    <GuideListing heading={heading} description={description} guides={guides} />
+    <Link to="/">Go back to the homepage</Link>
+  </Layout>
+);
+
+export default ExploreDataPage;

src/pages/index.js

@@ -2,18 +2,28 @@ import React from 'react';
 import { Link } from 'gatsby';
 
 import Layout from '../components/Layout';
-import Image from '../components/Image';
 import SEO from '../components/Seo';
+import Jumbotron from '../components/Jumbotron';
+import Container from '../components/Container';
+import './index.scss';
 
 const IndexPage = () => (
   <Layout>
     <SEO title="Home" />
-    <h1>Hi people</h1>
-    <p>Welcome to your new Gatsby site.</p>
-    <p>Now go build something great.</p>
-    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
-      <Image />
-    </div>
+    <Jumbotron />
+    <h2 className="indexPage-h2 desktop">
+      Learn about observability with one of our guides
+    </h2>
+    <Container>
+      <h2 className="indexPage-h2 mobile">Learn how with one of our guides</h2>
+      <div className="indexPage-grid">
+        <div className="indexPage-grid-guide">Collect Data</div>
+        <div className="indexPage-grid-guide">Explore Data</div>
+        <div className="indexPage-grid-guide">Build Apps</div>
+        <div className="indexPage-grid-guide">Automate New Relic</div>
+        <div className="indexPage-grid-guide">Reference Docs</div>
+      </div>
+    </Container>
     <Link to="/page-2/">Go to page 2</Link>
   </Layout>
 );