feat: Background stripe on get started section

newrelic · Jun 19, 2020 · 385375e · 385375e
1 parent dc9d97a
commit 385375e
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 26 deletions.
diff --git a/src/components/GuideListing/GuideListing.js b/src/components/GuideListing/GuideListing.js
@@ -1,19 +1,21 @@
+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;
 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
@@ -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
@@ -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
@@ -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;
-}