feat: Create homepage

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/Header.scss

@@ -1,6 +1,5 @@
 header.Header--main {
   background-color: #d7e6e8;
-  margin-bottom: 1rem;
 
   a {
     color: #000;

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/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>
 );

src/pages/index.scss

@@ -0,0 +1,35 @@
+.indexPage-h2 {
+  text-align: center;
+  width: 100%;
+  margin-bottom: 1rem;
+}
+.mobile {
+  display: none;
+}
+@media (max-width: 500px) {
+  .mobile {
+    display: block;
+  }
+  .desktop {
+    display: none;
+  }
+}
+.indexPage-grid {
+  margin: 5% auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-row-gap: 2rem;
+  @media (max-width: 500px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.indexPage-grid-guide {
+  justify-self: center;
+  height: 250px;
+  width: 375px;
+  background: rgb(178, 224, 224);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}