feat: add collections landing page

Author: danielgolden

src/components/HomepageCollection.module.scss

@@ -154,4 +154,16 @@
   .project {
     animation-duration: 30s;
   }    
-}
+}
+
+// ==============================================================
+// Dark mode styles
+// =============================================================
+
+:global(.dark-mode) {
+  .homepage-collection:before {
+
+    background: linear-gradient(0deg, rgba(0,0,0, .2) 23.26%, var(--color-neutrals-100));
+
+  }
+}

src/components/PageHeading.js

@@ -69,7 +69,7 @@ const PageHeading = props => {
         !hasIcon && props.hasSeparator ? styles.hasSeparatorWithoutIcon : ''
       } ${props.icon ? styles.hasIcon : ''} ${
         props.callToAction ? styles.hasCallToAction : ''
-      }`}
+      } ${props.className ? props.className : ''}`}
     >
       {hasIcon && props.showIcon && (
         <div className={styles.pageHeadingIconContainer}>
@@ -112,7 +112,8 @@ PageHeading.propTypes = {
   hasSeparator: PropTypes.bool,
   blogMeta: PropTypes.string,
   callToAction: PropTypes.func,
-  darkMode: PropTypes.object
+  darkMode: PropTypes.object,
+  className: PropTypes.string
 };
 
 export default withDarkMode(PageHeading);

src/pages/collection.module.scss

@@ -30,7 +30,7 @@
     height: 10000px;
     background-color: var(--color-neutrals-100);
     width: 100%;
-    transform: skewY(-2deg) translateY(-30px);
+    transform: skewY(-2deg) translateY(-70px);
     z-index:-1;
   }
 }
@@ -59,6 +59,7 @@
 }
 
 .collection-listing {
+  position: relative;
   margin-bottom: 40px;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
@@ -75,6 +76,58 @@
   }
 }
 
+.collections-page {
+  .collection-listing-container {
+    margin-top: 70px;
+  }
+
+  .collection-listing-header-section {
+    padding-bottom: 12px;
+    margin-bottom: 20px;
+  }
+
+  .collection-listing-header-section-heading {
+    display: inline;
+    margin-right: 10px;
+  }
+
+  .collection-listing-header-section-description {
+    display: inline;
+  }
+
+  .collection-listing:after {
+    content: "";
+    display: block;
+    width: 150px;
+    height: calc(100% + 25px);
+    position: absolute;
+    top: -1px;
+    right: -9px;
+    z-index: 1000;
+
+    
+    background: linear-gradient(270deg, #F4F5F5 34.6%, rgba(244, 245, 245, 0) 78.29%);
+  }
+
+  .page-heading {
+    margin-bottom: 100px;
+  }
+}
+
+.collections-page-collection-link {
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: .07em;
+  text-transform: uppercase;
+  border: none;
+
+  svg {
+    transform: scale(.75) translateY(-1.5px);
+  }
+}
+
 // ==============================================================
 // Responsive styles
 // ==============================================================

src/pages/collections.js

@@ -0,0 +1,103 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { graphql } from 'gatsby';
+import Layout from '../components/layout';
+import SEO from '../components/seo';
+import PageHeading from '../components/PageHeading';
+import SimpleProjectModule from '../components/SimpleProjectModule';
+import { startCase } from 'lodash';
+import { ChevronRight } from 'react-feather';
+
+import styles from './collection.module.scss';
+
+export const query = graphql`
+  query allCollections($path: String) {
+    nerdpacks: allProjects(
+      filter: {
+        projectType: { eq: "newrelic" }
+        projectTags: { elemMatch: { slug: { eq: "nr1-app" } } }
+      }
+    ) {
+      edges {
+        node {
+          ...exploreProjectsFields
+        }
+      }
+    }
+
+    layouts: allProjects(filter: { name: { regex: "/layout/" } }) {
+      edges {
+        node {
+          ...exploreProjectsFields
+        }
+      }
+    }
+    sitePage: allSitePage(filter: { path: { eq: $path } }) {
+      nodes {
+        fields {
+          contentEditLink
+        }
+        componentPath
+        path
+      }
+    }
+  }
+`;
+
+const CollectionPage = ({ data }) => {
+  const allCollections = Object.entries(data);
+  return (
+    <Layout fullWidth className={`${styles.collectionPage} ${styles.collectionsPage}`}>
+      <SEO title="Open source projects to which New Relic contributes" />
+      <PageHeading
+        title="Highlighted projects"
+        subheader="Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum."
+        className={styles.pageHeading}
+      />
+      {allCollections.map((collection, i) => {
+        if (collection[0] !== 'sitePage') {
+          return (
+            <>
+              <div className={styles.collectionListingContainer}>
+                <header className={styles.collectionListingHeaderSection}>
+                  <div>
+                    <h4 className={styles.collectionListingHeaderSectionHeading}>
+                      {startCase(collection[0])}
+                    </h4>
+                    <p className={styles.collectionListingHeaderSectionDescription}>
+                      Explore the open source repositories for New Relic agent technology
+                    </p>
+                  </div>
+                  <a href="#" className={styles.collectionsPageCollectionLink}>
+                    View all {collection[1].edges.length} projects 
+                    <ChevronRight />
+                  </a>
+                </header>
+                <div className={styles.collectionListing}>
+                  {collection[1].edges.map((project, i) => {
+                    if (i < 4) {
+                      return (
+                        <SimpleProjectModule
+                          key={project.node.id}
+                          data={project.node}
+                          className={styles.project}
+                        />
+                      );
+                    }
+
+                  })}
+                </div>
+              </div>
+            </>
+          );
+        }
+      })}
+    </Layout>
+  );
+};
+
+CollectionPage.propTypes = {
+  data: PropTypes.object
+};
+
+export default CollectionPage;