From 385375e3871166c0b09015d87186e40ac6cbb28b Mon Sep 17 00:00:00 2001 From: Tim Glaser <tglaser@newrelic.com> Date: Fri, 19 Jun 2020 13:54:05 -0700 Subject: [PATCH] feat: Background stripe on get started section --- src/components/GuideListing/GuideListing.js | 8 +++--- src/components/Section.module.scss | 8 +++--- src/pages/index.js | 30 +++++++++++---------- src/pages/index.module.scss | 13 ++++----- 4 files changed, 33 insertions(+), 26 deletions(-) diff --git a/src/components/GuideListing/GuideListing.js b/src/components/GuideListing/GuideListing.js index e307facbc..bcd8df409 100644 --- a/src/components/GuideListing/GuideListing.js +++ b/src/components/GuideListing/GuideListing.js @@ -1,12 +1,13 @@ +import React from 'react'; +import cx from 'classnames'; import Heading from './Heading'; import Description from './Description'; import List from './List'; import PropTypes from 'prop-types'; -import React from 'react'; import styles from './GuideListing.module.scss'; -const GuideListing = ({ children }) => ( - <div className={styles.guideListing}>{children}</div> +const GuideListing = ({ className, children }) => ( + <div className={cx(styles.guideListing, className)}>{children}</div> ); GuideListing.Heading = Heading; @@ -14,6 +15,7 @@ GuideListing.Description = Description; GuideListing.List = List; GuideListing.propTypes = { + className: PropTypes.string, children: PropTypes.node.isRequired, }; diff --git a/src/components/Section.module.scss b/src/components/Section.module.scss index 31e4ba9b2..5a2d92dc4 100644 --- a/src/components/Section.module.scss +++ b/src/components/Section.module.scss @@ -4,11 +4,13 @@ .backgroundBanner { position: absolute; - background-color: var(--color-neutrals-100); - width: 100%; - transform: skewY(-2deg) translateY(-58px); + top: -2rem; + bottom: -2rem; + left: -2rem; + right: -2rem; z-index: -1; + background-color: var(--color-neutrals-100); @media (max-width: 500px) { background-color: var(--color-white); } diff --git a/src/pages/index.js b/src/pages/index.js index a242dd6b8..3c1c1949b 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -5,6 +5,7 @@ import SEO from '../components/Seo'; import GuideListing from '../components/GuideListing/GuideListing'; import GuideTile from '../components/GuideTile'; import PageTitle from '../components/PageTitle'; +import Section from '../components/Section'; import Video from '../components/Video'; import ExternalLink from '../components/ExternalLink'; import { PageContext } from '../components/PageContext'; @@ -75,9 +76,6 @@ const IndexPage = ({ pageContext }) => ( Best of all? This site is built in open source. Submit ideas, feedback, and comments directly to our engineers. </p> - <ExternalLink href="https://newrelic.com/signup?partner=Developer+Edition"> - <button type="button">Create a free account</button> - </ExternalLink> </div> <Video className={styles.introVideo} @@ -87,17 +85,21 @@ const IndexPage = ({ pageContext }) => ( /> </section> - <GuideListing className={styles.guideListing}> - <GuideListing.Heading className={styles.guideListingHeading}> - Get started - </GuideListing.Heading> - <GuideListing.List> - {getStartedGuides.map((guide, index) => ( - <GuideTile key={index} {...guide} /> - ))} - </GuideListing.List> - </GuideListing> - <hr className={styles.line} /> + <Section backgroundBanner> + <GuideListing className={styles.guideListing}> + <GuideListing.Heading className={styles.guideListingHeading}> + Get started in minutes + <ExternalLink href="https://newrelic.com/signup?partner=Developer+Edition"> + <button type="button">Create a free account</button> + </ExternalLink> + </GuideListing.Heading> + <GuideListing.List> + {getStartedGuides.map((guide, index) => ( + <GuideTile key={index} {...guide} /> + ))} + </GuideListing.List> + </GuideListing> + </Section> <GuideListing className={styles.guideListing}> <GuideListing.Heading className={styles.guideListingHeading}> diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss index 4d0a84861..206643055 100644 --- a/src/pages/index.module.scss +++ b/src/pages/index.module.scss @@ -36,13 +36,14 @@ margin-bottom: 1rem; } +.guideListing { + margin-top: 6rem; +} + .guideListingHeading { + display: flex; + justify-content: space-between; margin-top: 0rem; - margin-bottom: 2rem; + margin-bottom: 1rem; font-size: 2.5rem; } - -.backgroundBanner { - height: 125%; - top: 1rem; -}