From 8dff7da7fa8fa14804bc5088e5bba243578c02ef Mon Sep 17 00:00:00 2001 From: LizBaker <39655074+LizBaker@users.noreply.github.com> Date: Thu, 23 Apr 2020 13:53:37 -0700 Subject: [PATCH] feat: Create homepage --- src/components/CallToAction.js | 17 ++++++++++ src/components/CallToAction.scss | 53 ++++++++++++++++++++++++++++++++ src/components/Header.scss | 1 - src/components/Jumbotron.js | 31 +++++++++++++++++++ src/components/Jumbotron.scss | 14 +++++++++ src/components/Layout.js | 20 ++++-------- src/pages/index.js | 24 ++++++++++----- src/pages/index.scss | 35 +++++++++++++++++++++ 8 files changed, 173 insertions(+), 22 deletions(-) create mode 100644 src/components/CallToAction.js create mode 100644 src/components/CallToAction.scss create mode 100644 src/components/Jumbotron.js create mode 100644 src/components/Jumbotron.scss create mode 100644 src/pages/index.scss diff --git a/src/components/CallToAction.js b/src/components/CallToAction.js new file mode 100644 index 000000000..27e8a2c5f --- /dev/null +++ b/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 ( +
+ {text &&

{text}

} + {children} +
+ ); +}; +CallToAction.propTypes = { + text: PropTypes.string, + children: PropTypes.node.isRequired, +}; +export default CallToAction; diff --git a/src/components/CallToAction.scss b/src/components/CallToAction.scss new file mode 100644 index 000000000..c3ca15ceb --- /dev/null +++ b/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%; + } + } + } +} diff --git a/src/components/Header.scss b/src/components/Header.scss index 37942c798..0dff30c5a 100644 --- a/src/components/Header.scss +++ b/src/components/Header.scss @@ -1,6 +1,5 @@ header.Header--main { background-color: #d7e6e8; - margin-bottom: 1rem; a { color: #000; diff --git a/src/components/Jumbotron.js b/src/components/Jumbotron.js new file mode 100644 index 000000000..af6ee4192 --- /dev/null +++ b/src/components/Jumbotron.js @@ -0,0 +1,31 @@ +import React from 'react'; +import CallToAction from './CallToAction'; +import './Jumbotron.scss'; + +const Jumbotron = () => ( +
+

+ Build custom applications on top of your observability data +

+ +
+ + +
+ + + + + + + +
+); + +export default Jumbotron; diff --git a/src/components/Jumbotron.scss b/src/components/Jumbotron.scss new file mode 100644 index 000000000..a2cebba01 --- /dev/null +++ b/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; + } +} diff --git a/src/components/Layout.js b/src/components/Layout.js index 622291e98..fa46ca3dc 100644 --- a/src/components/Layout.js +++ b/src/components/Layout.js @@ -7,20 +7,12 @@ import './styles.scss'; const Layout = ({ children }) => ( <>
-
-
{children}
-
- © {new Date().getFullYear()}, Built with - {` `} - Gatsby -
-
+
{children}
+ ); diff --git a/src/pages/index.js b/src/pages/index.js index f27408d55..768efe538 100644 --- a/src/pages/index.js +++ b/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 = () => ( -

Hi people

-

Welcome to your new Gatsby site.

-

Now go build something great.

-
- -
+ +

+ Learn about observability with one of our guides +

+ +

Learn how with one of our guides

+
+
Collect Data
+
Explore Data
+
Build Apps
+
Automate New Relic
+
Reference Docs
+
+ Go to page 2 ); diff --git a/src/pages/index.scss b/src/pages/index.scss new file mode 100644 index 000000000..6adb0a327 --- /dev/null +++ b/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; +}